refactor: UserEditingModal component

Signed-off-by: Ryan Wang <i@ryanc.cc>

src/modules/system/users/components/UserEditingModal.vue

@@ -15,6 +15,7 @@ import { v4 as uuid } from "uuid";
 import { roleLabels } from "@/constants/labels";
 import { rbacAnnotations } from "@/constants/annotations";
 import YAML from "yaml";
+import cloneDeep from "lodash.clonedeep";
 
 const props = defineProps({
   visible: {
@@ -29,15 +30,14 @@ const props = defineProps({
 
 const emit = defineEmits(["update:visible", "close"]);
 
-interface EditingFormState {
+interface FormState {
   user: User;
   saving: boolean;
   rawMode: boolean;
   raw: string;
 }
 
-const roles = ref<Role[]>([]);
+const initialFormState: FormState = {
-const editingFormState = ref<EditingFormState>({
   user: {
     spec: {
       displayName: "",
@@ -58,11 +58,14 @@ const editingFormState = ref<EditingFormState>({
   saving: false,
   rawMode: false,
   raw: "",
-});
+};
+
+const roles = ref<Role[]>([]);
+const formState = ref<FormState>(cloneDeep(initialFormState));
 const selectedRole = ref("");
 
 const isUpdateMode = computed(() => {
-  return !!editingFormState.value.user.metadata.creationTimestamp;
+  return !!formState.value.user.metadata.creationTimestamp;
 });
 
 const creationModalTitle = computed(() => {
@@ -70,7 +73,7 @@ const creationModalTitle = computed(() => {
 });
 
 const modalWidth = computed(() => {
-  return editingFormState.value.rawMode ? 800 : 700;
+  return formState.value.rawMode ? 800 : 700;
 });
 
 const basicRoles = computed(() => {
@@ -81,8 +84,10 @@ const basicRoles = computed(() => {
 
 watch(props, (newVal) => {
   if (newVal.visible && props.user) {
-    editingFormState.value.user = props.user;
+    formState.value.user = cloneDeep(props.user);
+    return;
   }
+  formState.value = cloneDeep(initialFormState);
 });
 
 const handleFetchRoles = async () => {
@@ -103,18 +108,18 @@ const handleVisibleChange = (visible: boolean) => {
 
 const handleCreateUser = async () => {
   try {
-    editingFormState.value.saving = true;
+    formState.value.saving = true;
     let user: User;
 
     if (isUpdateMode.value) {
       const response = await apiClient.extension.user.updatev1alpha1User(
-        editingFormState.value.user.metadata.name,
+        formState.value.user.metadata.name,
-        editingFormState.value.user
+        formState.value.user
       );
       user = response.data;
     } else {
       const response = await apiClient.extension.user.createv1alpha1User(
-        editingFormState.value.user
+        formState.value.user
       );
       user = response.data;
     }
@@ -130,17 +135,17 @@ const handleCreateUser = async () => {
   } catch (e) {
     console.error(e);
   } finally {
-    editingFormState.value.saving = false;
+    formState.value.saving = false;
   }
 };
 
 const handleRawModeChange = () => {
-  editingFormState.value.rawMode = !editingFormState.value.rawMode;
+  formState.value.rawMode = !formState.value.rawMode;
 
-  if (editingFormState.value.rawMode) {
+  if (formState.value.rawMode) {
-    editingFormState.value.raw = YAML.stringify(editingFormState.value.user);
+    formState.value.raw = YAML.stringify(formState.value.user);
   } else {
-    editingFormState.value.user = YAML.parse(editingFormState.value.raw);
+    formState.value.user = YAML.parse(formState.value.raw);
   }
 };
 onMounted(handleFetchRoles);
@@ -154,35 +159,35 @@ onMounted(handleFetchRoles);
   >
     <template #actions>
       <div class="modal-header-action" @click="handleRawModeChange">
-        <IconCodeBoxLine v-if="!editingFormState.rawMode" />
+        <IconCodeBoxLine v-if="!formState.rawMode" />
         <IconEye v-else />
       </div>
     </template>
 
     <VCodemirror
-      v-show="editingFormState.rawMode"
+      v-show="formState.rawMode"
-      v-model="editingFormState.raw"
+      v-model="formState.raw"
       height="50vh"
       language="yaml"
     />
 
-    <div v-show="!editingFormState.rawMode">
+    <div v-show="!formState.rawMode">
       <FormKit id="user-form" type="form" @submit="handleCreateUser">
         <FormKit
-          v-model="editingFormState.user.metadata.name"
+          v-model="formState.user.metadata.name"
           :disabled="true"
           label="用户名"
           type="text"
           validation="required"
         ></FormKit>
         <FormKit
-          v-model="editingFormState.user.spec.displayName"
+          v-model="formState.user.spec.displayName"
           label="显示名称"
           type="text"
           validation="required"
         ></FormKit>
         <FormKit
-          v-model="editingFormState.user.spec.email"
+          v-model="formState.user.spec.email"
           label="电子邮箱"
           type="email"
           validation="required"
@@ -202,17 +207,17 @@ onMounted(handleFetchRoles);
           validation="required"
         ></FormKit>
         <FormKit
-          v-model="editingFormState.user.spec.phone"
+          v-model="formState.user.spec.phone"
           label="手机号"
           type="text"
         ></FormKit>
         <FormKit
-          v-model="editingFormState.user.spec.avatar"
+          v-model="formState.user.spec.avatar"
           label="头像"
           type="text"
         ></FormKit>
         <FormKit
-          v-model="editingFormState.user.spec.bio"
+          v-model="formState.user.spec.bio"
           label="描述"
           type="textarea"
         ></FormKit>
@@ -220,7 +225,7 @@ onMounted(handleFetchRoles);
     </div>
     <template #footer>
       <VButton
-        :loading="editingFormState.saving"
+        :loading="formState.saving"
         type="secondary"
         @click="$formkit.submit('user-form')"
       >