Skip to content

Commit 5013e16

Browse files
lcharettelcharette
committed
Refactor role API composables: remove useRolesApi and update components to use useRoleApi for consistency and improved clarity.
1 parent d17af9b commit 5013e16

File tree

6 files changed

+124
-183
lines changed

6 files changed

+124
-183
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ export { usePermissionApi } from './usePermissionApi'
1414

1515
// Role
1616
export { useRoleApi } from './useRoleApi'
17-
export { useRolesApi } from './useRolesApi'
1817
export { useRoleUpdateApi } from './useRoleUpdateApi'
1918
export { useRolePermissionsApi } from './useRolePermissionsApi'
2019

‎packages/sprinkle-admin/app/assets/composables/useRoleApi.ts‎

Lines changed: 118 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,137 @@
1-
import { ref, toValue, watchEffect } from 'vue'
1+
import { ref, toValue } from 'vue'
22
import axios from 'axios'
3-
import type { ApiErrorResponse } from '@userfrosting/sprinkle-core/interfaces'
4-
import type { RoleResponse } from '../interfaces'
3+
import { useRegle } from '@regle/core'
4+
import { Severity, type ApiErrorResponse } from '@userfrosting/sprinkle-core/interfaces'
5+
import type {
6+
RoleCreateResponse,
7+
RoleCreateRequest,
8+
RoleEditRequest,
9+
RoleEditResponse,
10+
RoleDeleteResponse,
11+
RoleResponse
12+
} from '../interfaces'
13+
import { useAlertsStore } from '@userfrosting/sprinkle-core/stores'
14+
import { useRuleSchemaAdapter } from '@userfrosting/sprinkle-core/composables'
15+
import schemaFile from '../../schema/requests/role.yaml?raw'
516

617
/**
7-
* API used to fetch data about a specific role.
8-
*
9-
* This interface is tied to the `RoleApi` API, accessed at the GET
10-
* `/api/roles/r/{slug}` endpoint and the `RoleResponse` Typescript
11-
* interface.
12-
*
13-
* This composable accept a {slug} to select the role. Any changes to the
14-
* {slug} is watched and will trigger an update.
15-
*
16-
* Available ref:
17-
* - role: RoleResponse
18-
* - error: AlertInterface | null
19-
* - loading: boolean
20-
* - fetchRole(): void - Trigger a refresh of the user data
18+
* API Composable
2119
*/
22-
export function useRoleApi(slug: any) {
23-
const loading = ref(false)
24-
const error = ref<ApiErrorResponse | null>()
25-
const role = ref<RoleResponse>({
26-
id: 0,
27-
slug: '',
20+
export function useRoleApi() {
21+
const defaultFormData = (): RoleCreateRequest => ({
2822
name: '',
29-
description: '',
30-
created_at: '',
31-
updated_at: '',
32-
deleted_at: null,
33-
users_count: 0
23+
slug: '',
24+
description: ''
3425
})
3526

36-
async function fetchRole() {
37-
loading.value = true
38-
error.value = null
27+
const apiLoading = ref<boolean>(false)
28+
const apiError = ref<ApiErrorResponse | null>(null)
29+
const formData = ref<RoleCreateRequest>(defaultFormData())
30+
31+
// Load the schema and set up the validator
32+
const { r$ } = useRegle(formData, useRuleSchemaAdapter().adapt(schemaFile))
3933

40-
await axios
34+
async function fetchRole(slug: string) {
35+
apiLoading.value = true
36+
apiError.value = null
37+
38+
return axios
4139
.get<RoleResponse>('/api/roles/r/' + toValue(slug))
4240
.then((response) => {
43-
role.value = response.data
41+
return response.data
4442
})
4543
.catch((err) => {
46-
error.value = err.response.data
44+
apiError.value = err.response.data
45+
46+
throw apiError.value
4747
})
4848
.finally(() => {
49-
loading.value = false
49+
apiLoading.value = false
5050
})
5151
}
5252

53-
watchEffect(() => {
54-
fetchRole()
55-
})
53+
async function createRole(data: RoleCreateRequest) {
54+
apiLoading.value = true
55+
apiError.value = null
56+
return axios
57+
.post<RoleCreateResponse>('/api/roles', data)
58+
.then((response) => {
59+
// Add the message to the alert stream
60+
useAlertsStore().push({
61+
title: response.data.title,
62+
description: response.data.description,
63+
style: Severity.Success
64+
})
65+
})
66+
.catch((err) => {
67+
apiError.value = err.response.data
68+
69+
throw apiError.value
70+
})
71+
.finally(() => {
72+
apiLoading.value = false
73+
})
74+
}
75+
76+
async function updateRole(slug: string, data: RoleEditRequest) {
77+
apiLoading.value = true
78+
apiError.value = null
79+
return axios
80+
.put<RoleEditResponse>('/api/roles/r/' + slug, data)
81+
.then((response) => {
82+
// Add the message to the alert stream
83+
useAlertsStore().push({
84+
title: response.data.title,
85+
description: response.data.description,
86+
style: Severity.Success
87+
})
88+
})
89+
.catch((err) => {
90+
apiError.value = err.response.data
5691

57-
return { role, error, loading, fetchRole }
92+
throw apiError.value
93+
})
94+
.finally(() => {
95+
apiLoading.value = false
96+
})
97+
}
98+
99+
async function deleteRole(slug: string) {
100+
apiLoading.value = true
101+
apiError.value = null
102+
return axios
103+
.delete<RoleDeleteResponse>('/api/roles/r/' + slug)
104+
.then((response) => {
105+
// Add the message to the alert stream
106+
useAlertsStore().push({
107+
title: response.data.title,
108+
description: response.data.description,
109+
style: Severity.Success
110+
})
111+
})
112+
.catch((err) => {
113+
apiError.value = err.response.data
114+
115+
throw apiError.value
116+
})
117+
.finally(() => {
118+
apiLoading.value = false
119+
})
120+
}
121+
122+
function resetForm() {
123+
formData.value = defaultFormData()
124+
}
125+
126+
return {
127+
fetchRole,
128+
createRole,
129+
updateRole,
130+
deleteRole,
131+
apiLoading,
132+
apiError,
133+
formData,
134+
r$,
135+
resetForm
136+
}
58137
}

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

Lines changed: 0 additions & 137 deletions
This file was deleted.

‎packages/theme-pink-cupcake/src/components/Pages/Admin/Role/RoleDeleteModal.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<script setup lang="ts">
2-
import { useRolesApi } from '@userfrosting/sprinkle-admin/composables'
2+
import { useRoleApi } from '@userfrosting/sprinkle-admin/composables'
33
import type { RoleInterface } from '@userfrosting/sprinkle-account/interfaces'
44
import { Severity } from '@userfrosting/sprinkle-core/interfaces'
55
66
/**
77
* Variables and composables
88
*/
9-
const { deleteRole } = useRolesApi()
9+
const { deleteRole } = useRoleApi()
1010
1111
/**
1212
* Props - The group object to delete

‎packages/theme-pink-cupcake/src/components/Pages/Admin/Role/RoleForm.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import { watch } from 'vue'
33
import type { RoleInterface } from '@userfrosting/sprinkle-account/interfaces'
4-
import { useRolesApi } from '@userfrosting/sprinkle-admin/composables'
4+
import { useRoleApi } from '@userfrosting/sprinkle-admin/composables'
55
66
/**
77
* Props - Optional role object for editing.
@@ -11,7 +11,7 @@ const props = defineProps<{ role?: RoleInterface }>()
1111
/**
1212
* API - Use the role edit API.
1313
*/
14-
const { createRole, updateRole, r$, formData, apiLoading, resetForm } = useRolesApi()
14+
const { createRole, updateRole, r$, formData, apiLoading, resetForm } = useRoleApi()
1515
1616
/**
1717
* Watchers - Watch for changes in the role prop and update formData

‎packages/theme-pink-cupcake/src/views/Admin/PageRole.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { ref, watch } from 'vue'
33
import { useRoute } from 'vue-router'
44
import { usePageMeta } from '@userfrosting/sprinkle-core/stores'
5-
import { useRolesApi } from '@userfrosting/sprinkle-admin/composables'
5+
import { useRoleApi } from '@userfrosting/sprinkle-admin/composables'
66
import RoleInfo from '../../components/Pages/Admin/Role/RoleInfo.vue'
77
import RoleUsers from '../../components/Pages/Admin/Role/RoleUsers.vue'
88
import RolePermissions from '../../components/Pages/Admin/Role/RolePermissions.vue'
@@ -23,7 +23,7 @@ const role = ref<RoleResponse>({
2323
deleted_at: null,
2424
users_count: 0
2525
})
26-
const { fetchRole, apiError } = useRolesApi()
26+
const { fetchRole, apiError } = useRoleApi()
2727
2828
/**
2929
* Methods - Fetch group

0 commit comments

Comments
 (0)