fix: display user-add Modal after creating workspace and add condition (

#5396) (#5398) * fix: user add conditions * fix: display user-add Modal after creating workspace * fix: conditional restoration for variable 'isNew' --------- Signed-off-by: daeyeon ko <rowan@megazone.com>
cloudforet-io · Jan 3, 2025 · e04e7fd · e04e7fd
1 parent 528087f
commit e04e7fd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 21 deletions.
diff --git a/apps/web/src/services/advanced/pages/admin/AdminWorkspacesPage.vue b/apps/web/src/services/advanced/pages/admin/AdminWorkspacesPage.vue
@@ -4,8 +4,6 @@ import Vue, {
 } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
-import { cloneDeep } from 'lodash';
-
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
     PButton, PHeading, PHorizontalLayout, PHeadingLayout,
@@ -76,15 +74,15 @@ const handleCreateWorkspace = () => {
 
 const handleConfirm = async ({ id, name }: {id: string, name: string}) => {
     userPageStore.$patch((_state) => {
-        _state.state.modal.type = USER_MODAL_TYPE.ADD;
-        _state.state.modal.title = i18n.t('IAM.USER.MAIN.MODAL.INVITE_TITLE', { workspace_name: name }) as string;
-        _state.state.modal.themeColor = 'primary';
         _state.state.afterWorkspaceCreated = true;
         _state.state.createdWorkspaceId = id;
-        _state.state.modal.visible = {
-            add: true,
-        };
-        _state.state.modal = cloneDeep(_state.state.modal);
+    });
+
+    userPageStore.updateModalSettings({
+        type: USER_MODAL_TYPE.ADD,
+        title: i18n.t('IAM.USER.MAIN.MODAL.INVITE_TITLE', { workspace_name: name }) as string,
+        themeColor: 'primary',
+        modalVisibleType: 'add',
     });
 };
 

diff --git a/apps/web/src/services/iam/components/UserManagementAddUser.vue b/apps/web/src/services/iam/components/UserManagementAddUser.vue
@@ -55,9 +55,9 @@ const validationState = reactive({
     userIdInvalidText: '' as TranslateResult,
 });
 
+
 /* Component */
 const hideMenu = () => {
-    emit('change-input', { userList: state.selectedItems });
     state.menuVisible = false;
 };
 const handleClickTextInput = async () => {
@@ -74,6 +74,7 @@ const handleChangeTextInput = (value: string) => {
 };
 const handleEnterTextInput = async () => {
     if (formState.searchText === '') return;
+
     if (validateUserId()) {
         await getUserList();
     }
@@ -86,7 +87,6 @@ const handleSelectDropdownItem = (selected: AuthType|LocalType) => {
     formState.selectedMenuItem = selected;
     resetValidationState();
 };
-
 const getUserList = async () => {
     let isNew = userPageState.isAdminMode || userPageState.afterWorkspaceCreated;
     try {
@@ -99,8 +99,8 @@ const getUserList = async () => {
             await fetchGetWorkspaceUsers(trimmedText);
         }
     } catch (e) {
-        addSelectedItem(isNew);
-        await hideMenu();
+        addSelectedItem(formState.searchText, isNew);
+        hideMenu();
         formState.searchText = '';
         resetValidationState();
     }
@@ -144,8 +144,11 @@ const clickOutside = () => {
     }
 };
 const handleSelectMenuItem = async (menuItem: AddModalMenuItem) => {
-    state.selectedItems.unshift(menuItem);
-    await hideMenu();
+    if (!state.selectedItems.some((item) => item.name === menuItem.name)) {
+        state.selectedItems.unshift(menuItem);
+    }
+    hideMenu();
+    resetValidationState();
 };
 const initAuthTypeList = async () => {
     if (domainStore.state.extendedAuthType !== undefined) {
@@ -155,18 +158,21 @@ const initAuthTypeList = async () => {
         ];
     }
 };
-const addSelectedItem = (isNew: boolean) => {
-    if (!formState.searchText) return;
-    const trimmedText = formState.searchText.trim();
+
+const addSelectedItem = (name : string, isNew: boolean) => {
+    if (!name) return;
+    const trimmedText = name.trim();
     if (state.selectedItems.some((item) => item.name === trimmedText && item.auth_type === formState.selectedMenuItem)) return;
 
     state.selectedItems.unshift({
-        user_id: trimmedText,
         label: trimmedText,
         name: trimmedText,
-        isNew,
+        user_id: trimmedText,
         auth_type: formState.selectedMenuItem,
+        isNew,
     });
+
+    emit('change-input', { userList: state.selectedItems });
 };
 
 /* API */
@@ -260,7 +266,6 @@ onMounted(() => {
                                class="user-id-input"
                                :class="{'invalid': invalid}"
                                @click="handleClickTextInput"
-                               @blur="handleEnterTextInput"
                                @keyup.enter="handleEnterTextInput"
                                @input="handleChangeTextInput($event.target.value)"
                         >