From fad809fec298f795ad25cc2bb032d056f921ff8c Mon Sep 17 00:00:00 2001 From: Ryan Wang Date: Tue, 26 Jul 2022 20:21:11 +0800 Subject: [PATCH] refactor: logic for role creation form Signed-off-by: Ryan Wang --- src/modules/system/roles/RoleDetail.vue | 168 ++++++++---------- src/modules/system/roles/RoleList.vue | 60 ++++--- .../roles/components/RoleEditingModal.vue | 82 ++++----- .../system/roles/composables/use-role.ts | 48 +++++ 4 files changed, 198 insertions(+), 160 deletions(-) diff --git a/src/modules/system/roles/RoleDetail.vue b/src/modules/system/roles/RoleDetail.vue index c024a8e1..0e97c746 100644 --- a/src/modules/system/roles/RoleDetail.vue +++ b/src/modules/system/roles/RoleDetail.vue @@ -9,49 +9,43 @@ import { VTabbar, VTag, } from "@halo-dev/components"; -import { useRoute, useRouter } from "vue-router"; -import { onMounted, ref } from "vue"; +import { useRoute } from "vue-router"; +import { onMounted, ref, watch } from "vue"; import { apiClient } from "@halo-dev/admin-shared"; -import type { Role, User } from "@halo-dev/api-client"; +import type { User } from "@halo-dev/api-client"; import { pluginLabels } from "@/constants/labels"; import { rbacAnnotations } from "@/constants/annotations"; -import { useRoleTemplateSelection } from "@/modules/system/roles/composables/use-role"; - -interface FormState { - role: Role; - saving: boolean; -} +import { + useRoleForm, + useRoleTemplateSelection, +} from "@/modules/system/roles/composables/use-role"; const route = useRoute(); const users = ref([]); -const roleActiveId = ref("detail"); -const formState = ref({ - role: { - apiVersion: "v1alpha1", - kind: "Role", - metadata: { - name: "", - labels: {}, - annotations: { - [rbacAnnotations.DEPENDENCIES]: "", - [rbacAnnotations.DISPLAY_NAME]: "", - }, - }, - rules: [], - }, - saving: false, -}); +const tabActiveId = ref("detail"); const { roleTemplateGroups, handleRoleTemplateSelect, selectedRoleTemplates } = useRoleTemplateSelection(); +const { formState, saving, handleCreateOrUpdate } = useRoleForm(); + +watch( + () => selectedRoleTemplates.value, + (newValue) => { + if (formState.value.metadata.annotations) { + formState.value.metadata.annotations[rbacAnnotations.DEPENDENCIES] = + JSON.stringify(Array.from(newValue)); + } + } +); + const handleFetchRole = async () => { try { const response = await apiClient.extension.role.getv1alpha1Role( route.params.name as string ); - formState.value.role = response.data; + formState.value = response.data; selectedRoleTemplates.value = new Set( JSON.parse( response.data.metadata.annotations?.[rbacAnnotations.DEPENDENCIES] || @@ -73,28 +67,8 @@ const handleFetchUsers = async () => { }; const handleUpdateRole = async () => { - try { - formState.value.saving = true; - if (formState.value.role.metadata.annotations) { - formState.value.role.metadata.annotations[rbacAnnotations.DEPENDENCIES] = - JSON.stringify(Array.from(selectedRoleTemplates.value)); - } - await apiClient.extension.role.updatev1alpha1Role( - route.params.name as string, - formState.value.role - ); - } catch (e) { - console.error(e); - } finally { - formState.value.saving = false; - await handleFetchRole(); - } -}; - -const router = useRouter(); - -const handleRouteToUser = (name: string) => { - router.push({ name: "UserDetail", params: { name } }); + await handleCreateOrUpdate(); + await handleFetchRole(); }; onMounted(() => { @@ -105,8 +79,8 @@ onMounted(() => {