Refactor role API composables: consolidate role creation, editing, and deletion into a single useRolesApi composable; update related components and routes to utilize the new structure.

Author: lcharette

packages/sprinkle-admin/app/assets/composables/index.ts

@@ -14,9 +14,7 @@ export { usePermissionApi } from './usePermissionApi'
 
 // Role
 export { useRoleApi } from './useRoleApi'
-export { useRoleCreateApi } from './useRoleCreateApi'
-export { useRoleEditApi } from './useRoleEditApi'
-export { useRoleDeleteApi } from './useRoleDeleteApi'
+export { useRolesApi } from './useRolesApi'
 export { useRoleUpdateApi } from './useRoleUpdateApi'
 export { useRolePermissionsApi } from './useRolePermissionsApi'
 

packages/sprinkle-admin/app/assets/composables/useRoleCreateApi.ts

@@ -0,0 +1,137 @@
+import { ref, toValue } from 'vue'
+import axios from 'axios'
+import { useRegle } from '@regle/core'
+import { Severity, type ApiErrorResponse } from '@userfrosting/sprinkle-core/interfaces'
+import type {
+    RoleCreateResponse,
+    RoleCreateRequest,
+    RoleEditRequest,
+    RoleEditResponse,
+    RoleDeleteResponse,
+    RoleResponse
+} from '../interfaces'
+import { useAlertsStore } from '@userfrosting/sprinkle-core/stores'
+import { useRuleSchemaAdapter } from '@userfrosting/sprinkle-core/composables'
+import schemaFile from '../../schema/requests/role.yaml?raw'
+
+/**
+ * API Composable
+ */
+export function useRolesApi() {
+    const defaultFormData = (): RoleCreateRequest => ({
+        name: '',
+        slug: '',
+        description: ''
+    })
+
+    const apiLoading = ref<boolean>(false)
+    const apiError = ref<ApiErrorResponse | null>(null)
+    const formData = ref<RoleCreateRequest>(defaultFormData())
+
+    // Load the schema and set up the validator
+    const { r$ } = useRegle(formData, useRuleSchemaAdapter().adapt(schemaFile))
+
+    async function fetchRole(slug: string) {
+        apiLoading.value = true
+        apiError.value = null
+
+        return axios
+            .get<RoleResponse>('/api/roles/r/' + toValue(slug))
+            .then((response) => {
+                return response.data
+            })
+            .catch((err) => {
+                apiError.value = err.response.data
+
+                throw apiError.value
+            })
+            .finally(() => {
+                apiLoading.value = false
+            })
+    }
+
+    async function createRole(data: RoleCreateRequest) {
+        apiLoading.value = true
+        apiError.value = null
+        return axios
+            .post<RoleCreateResponse>('/api/roles', data)
+            .then((response) => {
+                // Add the message to the alert stream
+                useAlertsStore().push({
+                    title: response.data.title,
+                    description: response.data.description,
+                    style: Severity.Success
+                })
+            })
+            .catch((err) => {
+                apiError.value = err.response.data
+
+                throw apiError.value
+            })
+            .finally(() => {
+                apiLoading.value = false
+            })
+    }
+
+    async function updateRole(slug: string, data: RoleEditRequest) {
+        apiLoading.value = true
+        apiError.value = null
+        return axios
+            .put<RoleEditResponse>('/api/roles/r/' + slug, data)
+            .then((response) => {
+                // Add the message to the alert stream
+                useAlertsStore().push({
+                    title: response.data.title,
+                    description: response.data.description,
+                    style: Severity.Success
+                })
+            })
+            .catch((err) => {
+                apiError.value = err.response.data
+
+                throw apiError.value
+            })
+            .finally(() => {
+                apiLoading.value = false
+            })
+    }
+
+    async function deleteRole(slug: string) {
+        apiLoading.value = true
+        apiError.value = null
+        return axios
+            .delete<RoleDeleteResponse>('/api/roles/r/' + slug)
+            .then((response) => {
+                // Add the message to the alert stream
+                useAlertsStore().push({
+                    title: response.data.title,
+                    description: response.data.description,
+                    style: Severity.Success
+                })
+            })
+            .catch((err) => {
+                apiError.value = err.response.data
+
+                throw apiError.value
+            })
+            .finally(() => {
+                apiLoading.value = false
+            })
+    }
+
+    function resetForm() {
+        formData.value = defaultFormData()
+    }
+
+    return {
+        fetchRole,
+        createRole,
+        updateRole,
+        deleteRole,
+        apiLoading,
+        apiError,
+        formData,
+        r$,
+        resetForm
+    }
+}

packages/sprinkle-admin/app/assets/composables/useRoleDeleteApi.ts

@@ -21,6 +21,7 @@ export default [
                 path: 'r/:slug', // roles/r/{slug}
                 name: 'admin.role',
                 meta: {
+                    title: 'ROLE.PAGE',
                     description: 'ROLE.INFO_PAGE',
                     permission: {
                         slug: 'uri_role'

packages/sprinkle-admin/app/assets/composables/useRoleEditApi.ts

@@ -44,7 +44,7 @@
 class RoleCreateAction
 {
     // Request schema for client side form validation
-    protected string $schema = 'schema://requests/role/create.yaml';
+    protected string $schema = 'schema://requests/role.yaml';
 
     /**
      * Inject dependencies.

packages/sprinkle-admin/app/assets/composables/useRolesApi.ts

@@ -45,7 +45,7 @@
 class RoleEditAction
 {
     // Request schema for client side form validation
-    protected string $schema = 'schema://requests/role/edit-info.yaml';
+    protected string $schema = 'schema://requests/role.yaml';
 
     /**
      * Inject dependencies.