feat: apply qa issue (#5584)

* feat: add custom css of component because of minor bug Signed-off-by: seungyeoneeee <[email protected]> * feat: update schedule setting form reactivity Signed-off-by: seungyeoneeee <[email protected]> * feat: update disabled state of button if no data Signed-off-by: seungyeoneeee <[email protected]> --------- Signed-off-by: seungyeoneeee <[email protected]>
cloudforet-io · Jan 22, 2025 · f36f8ab · f36f8ab
1 parent 48430ca
commit f36f8ab
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/apps/web/src/common/components/schedule-setting-form/ScheduleSettingForm.vue b/apps/web/src/common/components/schedule-setting-form/ScheduleSettingForm.vue
@@ -121,6 +121,12 @@ const handleSelectDropdown = (type: 'start' | 'end', value: number) => {
     }
 };
 
+const areDayArraysEqual = (selectedDayButton: DayType[], compareDays: DayType[]) => {
+    if (selectedDayButton.length !== compareDays.length) return false;
+    const selectedDaySet = new Set(selectedDayButton);
+    return compareDays.every((day) => selectedDaySet.has(day));
+};
+
 
 watch([() => state.selectedRadioIdx, () => state.selectedDayButton, () => state.start, () => state.end], ([selectedRadioIdx]) => {
     emit('update-form', {
@@ -130,6 +136,16 @@ watch([() => state.selectedRadioIdx, () => state.selectedDayButton, () => state.
     });
 }, { immediate: true });
 
+watch(() => state.selectedDayButton, (selectedDayButton) => {
+    const weekDays = ['MON', 'TUE', 'WED', 'THU', 'FRI'] as DayType[];
+    const everyDay = ['MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT', 'SUN'] as DayType[];
+    if (areDayArraysEqual(selectedDayButton, weekDays)) {
+        state.selectedRadioIdx = 0;
+    } else if (areDayArraysEqual(selectedDayButton, everyDay)) {
+        state.selectedRadioIdx = 1;
+    }
+}, { immediate: true });
+
 onMounted(() => {
     if (props.scheduleForm) {
         initScheduleForm();

diff --git a/apps/web/src/services/iam/components/UserAssignToGroupModal.vue b/apps/web/src/services/iam/components/UserAssignToGroupModal.vue
@@ -115,4 +115,7 @@ watch([() => userPageGetters.selectedUsers, () => userPageState.users], ([nv_sel
     height: 22rem;
     overflow: auto;
 }
+:deep(.dropdown-context-menu) {
+    left: unset !important;
+}
 </style>
diff --git a/apps/web/src/services/iam/components/UserGroupManagementAddUsersModal.vue b/apps/web/src/services/iam/components/UserGroupManagementAddUsersModal.vue
@@ -130,4 +130,7 @@ const fetchAddUsers = async (params: UserGroupAddUsersParameters) => {
         overflow: auto;
     }
 }
+:deep(.dropdown-context-menu) {
+    left: unset !important;
+}
 </style>
diff --git a/apps/web/src/services/iam/components/UserGroupManagementEditModal.vue b/apps/web/src/services/iam/components/UserGroupManagementEditModal.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { computed, reactive } from 'vue';
+import { computed, reactive, watch } from 'vue';
 
 import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { PButtonModal, PButton } from '@cloudforet/mirinae';
+import { PButtonModal } from '@cloudforet/mirinae';
 
 import type { UserGroupCreateParameters } from '@/schema/identity/user-group/api-verbs/create';
 import type { UserGroupUpdateParameters } from '@/schema/identity/user-group/api-verbs/update';
@@ -32,8 +32,14 @@ const state = reactive({
     loading: false,
     groupName: '',
     description: '',
+    disabled: false,
 });
 
+/* Watcher */
+watch(() => state.groupName, (groupName) => {
+    state.disabled = groupName.length > 0;
+}, { immediate: true });
+
 /* Component */
 const handleConfirm = async () => {
     switch (storeState.modalType) {
@@ -114,27 +120,25 @@ const fetchUpdateUserGroup = async (params: UserGroupUpdateParameters) => {
                     :visible="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.CREATE || userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.UPDATE"
                     size="md"
                     :loading="state.loading"
+                    :disabled="!state.disabled"
                     @cancel="handleClose"
                     @close="handleClose"
+                    @confirm="handleConfirm"
     >
         <template #body>
             <div class="modal-contents">
                 <user-group-management-add-group-info @update:values="handleUpdateValues" />
             </div>
         </template>
         <template #confirm-button>
-            <p-button v-if="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.CREATE"
-                      theme="primary"
-                      @click="handleConfirm"
-            >
+            <span v-if="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.CREATE">
+
                 {{ $t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.CONFIRM') }}
-            </p-button>
-            <p-button v-else-if="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.UPDATE"
-                      theme="primary"
-                      @click="handleConfirm"
-            >
+            </span>
+            <span v-else-if="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.UPDATE">
+
                 {{ $t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.UPDATE') }}
-            </p-button>
+            </span>
         </template>
     </p-button-modal>
 </template>