Merge remote-tracking branch 'upstream/main'

ruibaby · May 24, 2024 · 4eb59eb · 4eb59eb
2 parents 2002c43 + 34981f9
commit 4eb59eb
Show file tree

Hide file tree

Showing 11 changed files with 177 additions and 336 deletions.
diff --git a/ui/console-src/layouts/BasicLayout.vue b/ui/console-src/layouts/BasicLayout.vue
@@ -295,7 +295,10 @@ onMounted(() => {
       </Teleport>
     </div>
   </div>
-  <GlobalSearchModal v-model:visible="globalSearchVisible" />
+  <GlobalSearchModal
+    v-if="globalSearchVisible"
+    @close="globalSearchVisible = false"
+  />
   <LoginModal />
 </template>
 

diff --git a/ui/console-src/modules/system/users/UserDetail.vue b/ui/console-src/modules/system/users/UserDetail.vue
@@ -95,14 +95,23 @@ const tabbarItems = computed(() => {
 function handleRouteToUC() {
   window.location.href = "/uc";
 }
+
+function onPasswordChangeModalClose() {
+  passwordChangeModal.value = false;
+  refetch();
+}
 </script>
 <template>
-  <UserEditingModal v-model:visible="editingModal" :user="user?.user" />
+  <UserEditingModal
+    v-if="editingModal && user?.user"
+    :user="user?.user"
+    @close="editingModal = false"
+  />
 
   <UserPasswordChangeModal
-    v-model:visible="passwordChangeModal"
+    v-if="passwordChangeModal"
     :user="user?.user"
-    @close="refetch"
+    @close="onPasswordChangeModalClose"
   />
 
   <header class="bg-white">

diff --git a/ui/console-src/modules/system/users/UserList.vue b/ui/console-src/modules/system/users/UserList.vue
@@ -1,32 +1,32 @@
 <script lang="ts" setup>
 import {
+  Dialog,
   IconAddCircle,
+  IconLockPasswordLine,
+  IconRefreshLine,
   IconUserFollow,
   IconUserSettings,
-  IconLockPasswordLine,
+  Toast,
+  VAvatar,
   VButton,
   VCard,
+  VDropdownItem,
+  VEmpty,
+  VEntity,
+  VEntityField,
+  VLoading,
   VPageHeader,
   VPagination,
   VSpace,
-  VTag,
-  VAvatar,
-  VEntity,
-  VEntityField,
-  Dialog,
   VStatusDot,
-  VLoading,
-  Toast,
-  IconRefreshLine,
-  VEmpty,
-  VDropdownItem,
+  VTag,
 } from "@halo-dev/components";
 import UserEditingModal from "./components/UserEditingModal.vue";
 import UserPasswordChangeModal from "./components/UserPasswordChangeModal.vue";
 import GrantPermissionModal from "./components/GrantPermissionModal.vue";
 import { computed, onMounted, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
-import type { User, ListedUser } from "@halo-dev/api-client";
+import type { ListedUser, User } from "@halo-dev/api-client";
 import { rbacAnnotations } from "@/constants/annotations";
 import { formatDatetime } from "@/utils/date";
 import { useRouteQuery } from "@vueuse/router";
@@ -232,19 +232,35 @@ onMounted(() => {
     creationModal.value = true;
   }
 });
+
+function onCreationModalClose() {
+  creationModal.value = false;
+  routeQueryAction.value = undefined;
+}
+
+function onEditingModalClose() {
+  editingModal.value = false;
+  selectedUser.value = undefined;
+}
+
+function onPasswordChangeModalClose() {
+  passwordChangeModal.value = false;
+  refetch();
+}
 </script>
 <template>
-  <UserEditingModal v-model:visible="editingModal" :user="selectedUser" />
-
-  <UserCreationModal
-    v-model:visible="creationModal"
-    @close="routeQueryAction = undefined"
+  <UserEditingModal
+    v-if="editingModal && selectedUser"
+    :user="selectedUser"
+    @close="onEditingModalClose"
   />
 
+  <UserCreationModal v-if="creationModal" @close="onCreationModalClose" />
+
   <UserPasswordChangeModal
-    v-model:visible="passwordChangeModal"
+    v-if="passwordChangeModal"
     :user="selectedUser"
-    @close="refetch"
+    @close="onPasswordChangeModalClose"
   />
 
   <GrantPermissionModal

diff --git a/ui/console-src/modules/system/users/components/UserCreationModal.vue b/ui/console-src/modules/system/users/components/UserCreationModal.vue
@@ -1,17 +1,13 @@
 <script lang="ts" setup>
 // core libs
-import { ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import type { CreateUserRequest } from "@halo-dev/api-client";
 
 // components
 import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 
-// libs
-import { cloneDeep } from "lodash-es";
-import { reset } from "@formkit/core";
-
 // hooks
 import { setFocus } from "@/formkit/utils/focus";
 import { useI18n } from "vue-i18n";
@@ -20,21 +16,12 @@ import { useQueryClient } from "@tanstack/vue-query";
 const { t } = useI18n();
 const queryClient = useQueryClient();
 
-const props = withDefaults(
-  defineProps<{
-    visible: boolean;
-  }>(),
-  {
-    visible: false,
-  }
-);
-
 const emit = defineEmits<{
-  (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
 }>();
 
-const initialFormState: CreateUserRequest = {
+const modal = ref<InstanceType<typeof VModal>>();
+const formState = ref<CreateUserRequest>({
   avatar: "",
   bio: "",
   displayName: "",
@@ -43,38 +30,17 @@ const initialFormState: CreateUserRequest = {
   password: "",
   phone: "",
   roles: [],
-};
-
-const formState = ref<CreateUserRequest>(cloneDeep(initialFormState));
+});
 const selectedRole = ref("");
-const saving = ref(false);
-
-const handleResetForm = () => {
-  formState.value = cloneDeep(initialFormState);
-  reset("user-creation-form");
-};
-
-watch(
-  () => props.visible,
-  (visible) => {
-    if (visible) {
-      setFocus("creationUserNameInput");
-    } else {
-      handleResetForm();
-    }
-  }
-);
+const isSubmitting = ref(false);
 
-const onVisibleChange = (visible: boolean) => {
-  emit("update:visible", visible);
-  if (!visible) {
-    emit("close");
-  }
-};
+onMounted(() => {
+  setFocus("creationUserNameInput");
+});
 
 const handleCreateUser = async () => {
   try {
-    saving.value = true;
+    isSubmitting.value = true;
 
     if (selectedRole.value) {
       formState.value.roles = [selectedRole.value];
@@ -84,24 +50,24 @@ const handleCreateUser = async () => {
       createUserRequest: formState.value,
     });
 
-    onVisibleChange(false);
+    modal.value?.close();
 
     Toast.success(t("core.common.toast.save_success"));
 
     queryClient.invalidateQueries({ queryKey: ["users"] });
   } catch (e) {
     console.error("Failed to create or update user", e);
   } finally {
-    saving.value = false;
+    isSubmitting.value = false;
   }
 };
 </script>
 <template>
   <VModal
+    ref="modal"
     :title="$t('core.user.editing_modal.titles.create')"
-    :visible="visible"
     :width="650"
-    @update:visible="onVisibleChange"
+    @close="emit('close')"
   >
     <FormKit
       id="user-creation-form"
@@ -177,14 +143,13 @@ const handleCreateUser = async () => {
     <template #footer>
       <VSpace>
         <SubmitButton
-          v-if="visible"
-          :loading="saving"
+          :loading="isSubmitting"
           type="secondary"
           :text="$t('core.common.buttons.submit')"
           @submit="$formkit.submit('user-creation-form')"
         >
         </SubmitButton>
-        <VButton @click="onVisibleChange(false)">
+        <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>