Feat: apply qa issue

apps/web/src/services/iam/components/UserGroupChannelSetInputForm.vue

@@ -10,8 +10,10 @@ import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/typ
 
 import type { NotificationProtocolGetParameters } from '@/schema/alert-manager/notification-protocol/api-verbs/get';
 import type { NotificationProtocolModel } from '@/schema/alert-manager/notification-protocol/model';
+import { i18n } from '@/translations';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
 
 import UserGroupChannelAddFormData from '@/services/iam/components/UserGroupChannelAddFormData.vue';
 import { useNotificationChannelCreateFormStore } from '@/services/iam/store/notification-channel-create-form-store';
@@ -47,29 +49,36 @@ const state = reactive<ChannelInfo & UserModeInfo>({
 });
 
 const validateState = reactive({
-    channelName: false,
     schemaValid: false,
 });
 
-/* Component */
-const handleChangeChannelName = (value: string) => {
-    state.channelName = value;
-    notificationChannelCreateFormState.channelName = value;
-};
+const {
+    forms: {
+        channelName,
+    },
+    setForm,
+    invalidState,
+} = useFormValidator({
+    channelName: notificationChannelCreateFormState.channelName,
+}, {
+    channelName(value: string) {
+        if (!value) return ' ';
+        if (value.length >= 40) {
+            return i18n.t('ALERT_MANAGER.NOTIFICATIONS.NAME_INVALID_TEXT');
+        }
+        return '';
+    },
+});
 
+/* Component */
 const handleUpdateValid = (value: boolean) => {
     validateState.schemaValid = value;
 };
 
 /* Watcher */
-watch(() => state.channelName, (nv_channel_name) => {
-    validateState.channelName = !!nv_channel_name;
-}, { immediate: true });
-
-watch(() => state, (nv_state) => {
+watch(() => channelName, (nv_channel_name) => {
     notificationChannelCreateFormStore.$patch((_state) => {
-        _state.state.channelName = nv_state.channelName;
-        // _state.state.userInfo.type = nv_state.userMode
+        _state.state.channelName = nv_channel_name;
     });
 }, { immediate: true, deep: true });
 
@@ -91,7 +100,7 @@ watch(() => state.channelData, (nv_channel_data) => {
 }, { deep: true, immediate: true });
 
 watch(() => validateState, (nv_validate_state) => {
-    if (nv_validate_state.schemaValid && nv_validate_state.channelName) {
+    if (nv_validate_state.schemaValid && invalidState) {
         emit('update-valid', true);
     } else {
         emit('update-valid', false);
@@ -121,13 +130,15 @@ onMounted(async () => {
     <div class="flex flex-col bg-white">
         <p-field-group :label="$t('IAM.USER_GROUP.MODAL.CREATE_CHANNEL.DESC.CHANNEL_NAME')"
                        required
-                       :invalid="!validateState.channelName"
-                       invalid-text="channel name is required field"
+                       :invalid="!invalidState.channelName"
         >
-            <p-text-input block
-                          :value="state.channelName"
-                          @update:value="handleChangeChannelName"
-            />
+            <template #default="{invalid}">
+                <p-text-input block
+                              :value="channelName"
+                              :invalid="!invalid"
+                              @update:value="setForm('channelName', $event)"
+                />
+            </template>
         </p-field-group>
         <user-group-channel-add-form-data v-if="userGroupPageState.modal.title === $t('IAM.USER_GROUP.MODAL.CREATE_CHANNEL.TITLE')"
                                           @update-valid="handleUpdateValid"

apps/web/src/services/iam/components/UserGroupDeleteDoubleCheckModal.vue

@@ -82,7 +82,6 @@ const fetchDeleteUserGroup = async (params: UserGroupDeleteUserGroupParameters)
 const fetchServiceList = async () => {
     try {
         const { results } = await SpaceConnector.clientV2.alertManager.service.list<ServiceListParameters, ListResponse<ServiceModel>>();
-        console.log(results);
         if (results) {
             const filteredResults = results.filter((result) => result.members.USER_GROUP !== undefined && result.members.USER_GROUP.length > 0);
             state.filteredServices = filteredResults.filter((d) => d.members.USER_GROUP.includes(storeState.selectedUserGroupIds[0]));

apps/web/src/services/iam/components/UserGroupManagementAddUsersModal.vue

@@ -105,7 +105,7 @@ const fetchAddUsers = async (params: UserGroupAddUsersParameters) => {
 .user-group-management-add-users-modal {
     min-height: 34.875rem;
     .modal-contents {
-        @apply flex flex-col bg-primary-4 rounded-md;
+        @apply flex flex-col;
         margin-bottom: 9rem;
         padding: 1rem;
         gap: 1rem;

apps/web/src/services/iam/components/UserGroupManagementTabNotificationChannel.vue

@@ -111,12 +111,7 @@ const state = reactive({
     protocolIcon: '',
 });
 
-const totalCount = computed<number>(() => {
-    if (userGroupPageGetters.selectedUserGroups && userGroupPageGetters.selectedUserGroups[0].notification_channel) {
-        return userGroupPageGetters.selectedUserGroups[0].notification_channel.length;
-    }
-    return 0;
-});
+const totalCount = ref(0);
 
 /* Component */
 const handleChange = async (options: any = {}) => {
@@ -149,12 +144,6 @@ const handleChange = async (options: any = {}) => {
     }
 };
 
-watch(isScheduleTagged, (nv_scheduled_tag) => {
-    if (nv_scheduled_tag) {
-        isScheduleTagged.value = false;
-    }
-}, { immediate: true });
-
 const handleSelect = async (index: number[]) => {
     userGroupPageState.userGroupChannels.selectedIndices = index;
 };
@@ -218,16 +207,29 @@ const handleUpdateModal = async (modalType: string) => {
 };
 
 /* Watcher */
-// watch(() => userGroupPageGetters.selectedUserGroups, async (nv_selected_user_group, ov_selected_user_group) => {
-//     if (nv_selected_user_group !== ov_selected_user_group && nv_selected_user_group[0].user_group_id) {
-//         try {
-//             state.loading = true;
-//             await fetchListUserGroupChannel({ user_group_id: nv_selected_user_group[0].user_group_id, query: channelListApiQuery });
-//         } finally {
-//             state.loading = false;
-//         }
-//     }
-// }, { deep: true, immediate: true });
+watch(isScheduleTagged, (nv_scheduled_tag) => {
+    if (nv_scheduled_tag) {
+        isScheduleTagged.value = false;
+    }
+}, { immediate: true });
+
+watch(() => userGroupPageGetters.selectedUserGroups, () => {
+    if (userGroupPageGetters.selectedUserGroups && userGroupPageGetters.selectedUserGroups[0].notification_channel) {
+        return userGroupPageGetters.selectedUserGroups[0].notification_channel.length;
+    }
+    return 0;
+}, { deep: true, immediate: true });
+
+watch(() => userGroupPageGetters.selectedUserGroups, async (nv_selected_user_group, ov_selected_user_group) => {
+    if (nv_selected_user_group !== ov_selected_user_group && nv_selected_user_group[0].user_group_id) {
+        try {
+            state.loading = true;
+            await fetchListUserGroupChannel({ user_group_id: nv_selected_user_group[0].user_group_id, query: channelListApiQuery });
+        } finally {
+            state.loading = false;
+        }
+    }
+}, { deep: true, immediate: true });
 
 watch([() => tableState.items, () => userGroupPageGetters.selectedUserGroupChannel], ([nv_items, nv_selected_item]) => {
     if (nv_items.length > 0 && nv_selected_item.length === 1) {
@@ -237,14 +239,6 @@ watch([() => tableState.items, () => userGroupPageGetters.selectedUserGroupChann
     }
 }, { deep: true, immediate: true });
 
-// watch(() => userGroupPageState.userGroupChannels.selectedIndices, async (nv_selected_channel) => {
-//     if (nv_selected_channel.length === 1) {
-//         await fetchGetNotificationProtocol({
-//           protocol_id:
-//         });
-//     }
-// }, { deep: true, immediate: true });
-
 /* API */
 const fetchGetNotificationProtocol = async (params: NotificationProtocolGetParameters) => {
     try {
@@ -263,6 +257,7 @@ const fetchListUserGroupChannel = async (params: UserGroupChannelListParameters)
     try {
         const { results } = await SpaceConnector.clientV2.alertManager.userGroupChannel.list<UserGroupChannelListParameters, ListResponse<UserGroupChannelModel>>(params);
         userGroupPageState.userGroupChannels.list = results;
+        totalCount.value = results.length;
     } catch (e) {
         ErrorHandler.handleError(e, true);
     }
@@ -346,7 +341,6 @@ onMounted(async () => {
                          sortable
                          sort-desc
                          :loading="state.loading"
-                         :refreshable="false"
                          :multi-select="false"
                          :key-item-sets="USER_GROUP_CHANNELS_SEARCH_HANDLERS"
                          :query-tags="queryTags"
@@ -356,6 +350,7 @@ onMounted(async () => {
                          :items="tableState.items"
                          @select="handleSelect"
                          @change="handleChange"
+                         @refresh="handleChange()"
         >
             <template #col-channel_id-format="{value}">
                 {{

apps/web/src/services/iam/components/UserGroupManagementTabUsers.vue

@@ -16,6 +16,7 @@ import { i18n } from '@/translations';
 import { useQueryTags } from '@/common/composables/query-tags';
 
 import { calculateTime } from '@/services/iam/composables/refined-table-data';
+import { makeUserValueHandler } from '@/services/iam/composables/user-data-helper';
 import {
     USER_GROUP_MODAL_TYPE,
     USER_GROUP_USERS_SEARCH_HANDLERS,
@@ -42,11 +43,15 @@ let userListApiQuery = userListApiQueryHelper.data;
 const queryTagHelper = useQueryTags({ keyItemSets: USER_GROUP_USERS_SEARCH_HANDLERS });
 const { queryTags } = queryTagHelper;
 
+const storeState = reactive({
+    usersList: computed<UserListItemType[]>(() => userGroupPageState.users.list),
+});
+
 const state = reactive({
     loading: false,
     userItems: computed<UserListItemType[]>(() => {
-        if (userGroupPageState.users.list) {
-            return userGroupPageState.users.list.map((user) => ({
+        if (storeState.usersList) {
+            return storeState.usersList.map((user) => ({
                 user_id: user.user_id,
                 name: user.name,
                 auth_type: user.auth_type,
@@ -67,8 +72,8 @@ const tableState = reactive({
         { name: 'last_accessed_at', label: 'Last Activity' },
     ]),
     valueHandlerMap: computed(() => ({
-        user_id: makeDistinctValueHandler('identity.WorkspaceUser', 'user_id'),
-        name: makeDistinctValueHandler('identity.WorkspaceUser', 'name', 'string', [{ k: 'name', v: '', o: 'not' }]),
+        user_id: makeUserValueHandler('identity.WorkspaceUser', 'user_id', 'string', userGroupPageGetters.selectedUserGroups[0].users, [], 50),
+        name: makeUserValueHandler('identity.WorkspaceUser', 'name', 'string', userGroupPageState.users.list.map((user) => user.name), [{ k: 'name', v: '', o: 'not' }], 50),
         auth_type: makeDistinctValueHandler('identity.WorkspaceUser', 'auth_type'),
         last_accessed_at: makeDistinctValueHandler('identity.WorkspaceUser', 'last_accessed_at', 'datetime'),
     })),
@@ -152,7 +157,7 @@ watch(() => userGroupPageGetters.selectedUserGroups, async (nv_selectedUserGroup
 }, { deep: true, immediate: true });
 
 watch(() => userGroupPageState.users, (nv_users) => {
-    if (nv_users.list && nv_users.list.length) nv_users.totalCount = nv_users.list.length;
+    if (nv_users.list && nv_users.list.length) nv_users.totalCount = nv_users.list.length ?? 0;
 }, { deep: true, immediate: true });
 </script>
 
@@ -192,6 +197,7 @@ watch(() => userGroupPageState.users, (nv_users) => {
                          searchable
                          selectable
                          multi-select
+                         sortable
                          sort-desc
                          :fields="tableState.fields"
                          :items="state.userItems"
@@ -203,12 +209,16 @@ watch(() => userGroupPageState.users, (nv_users) => {
                          :loading="state.loading"
                          @select="handleSelect"
                          @change="handleChange"
+                         @refresh="handleChange()"
         >
             <template #col-last_accessed_at-format="{value, item}">
                 <span v-if="calculateTime(value, item.timezone) === -1">
-                    {{ $t('IAM.USER_GROUP.TAB.USERS.TODAY') }}
+                    -
                 </span>
                 <span v-else-if="calculateTime(value, item.timezone) === 0">
+                    {{ $t('IAM.USER_GROUP.TAB.USERS.TODAY') }}
+                </span>
+                <span v-else-if="calculateTime(value, item.timezone) === 1">
                     {{ $t('IAM.USER_GROUP.TAB.USERS.YESTERDAY') }}
                 </span>
                 <span v-else>

apps/web/src/services/iam/components/UserGroupManagementTable.vue

@@ -53,7 +53,7 @@ const state = reactive({
 const tableState = reactive({
     fields: computed<DataTableFieldType[]>(() => [
         { name: 'name', label: 'User Group Name' },
-        { name: 'description', label: 'Description', width: '280px' },
+        { name: 'description', label: 'Description', width: '480px' },
         { name: 'notification_channel', label: 'Notification Channel', sortable: true },
         { name: 'users', label: 'Users' },
         { name: 'created_at', label: 'Created' },

apps/web/src/services/iam/components/UserPerGroupRemoveDoubleCheckModal.vue

@@ -37,7 +37,7 @@ const handleConfirm = async () => {
             users,
         });
         emit('confirm');
-        showSuccessMessage(i18n.t('IAM.USER_GROUP.MODAL.REMOVE_USER.SHOW_SUCCESS_MESSAGE'), '');
+        showSuccessMessage('', i18n.t('IAM.USER_GROUP.MODAL.REMOVE_USER.SHOW_SUCCESS_MESSAGE'));
     } finally {
         state.loading = false;
         handleCancel();