feat: Update 1st feedback & userGroup markup 1st completed

apps/web/src/schema/identity/user-group/model.ts

@@ -1,18 +1,15 @@
-import type { AuthType } from '@/schema/identity/user/type';
+import type { Tags } from '@/schema/_common/model';
+import type { UserModel } from '@/schema/identity/user/model';
 
 export interface UserGroupModel {
     user_group_id: string;
-    description: string;
-    notification: number;
-    users: number;
-    created: string;
-}
-
-export interface UserPerUserGroupModel {
-    user_id: string;
     name: string;
-    auth_type: AuthType;
-    last_activity: string;
+    description?: string;
+    users: UserModel[];
+    tags: Tags;
+    workspace_id: string;
+    domain_id: string;
+    created_at: string;
 }
 
 export interface NotificationChannelPerUserGroupModel {

apps/web/src/schema/identity/user-group/type.ts

@@ -1,11 +1,8 @@
 import type {
     NotificationChannelPerUserGroupModel,
     UserGroupModel,
-    UserPerUserGroupModel,
 } from '@/schema/identity/user-group/model';
 
 export type UserGroupListItemType = Partial<UserGroupModel>;
 
-export type UserListPerUserGroupItemType = Partial<UserPerUserGroupModel>;
-
 export type NotificationChannelListPerUserGroupItemType = Partial<NotificationChannelPerUserGroupModel>;

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

@@ -11,7 +11,9 @@ import { PFieldGroup, PTextInput } from '@cloudforet/mirinae';
                 <p-text-input :placeholder="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.GROUP_NAME')" />
             </template>
         </p-field-group>
-        <p-field-group :label="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.DESCRIPTION')">
+        <p-field-group
+            :label="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.DESCRIPTION')"
+        >
             <template #default>
                 <p-text-input :placeholder="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.DESCRIPTION')" />
             </template>

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

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { computed, reactive } from 'vue';
+
+import { PButtonModal, PSelectDropdown } from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
+
+import { USER_GROUP_MODAL_TYPE } from '@/services/iam/constants/user-group-constant';
+import { useUserGroupPageStore } from '@/services/iam/store/user-group-page-store';
+
+const userGroupPageStore = useUserGroupPageStore();
+const userGroupPageState = userGroupPageStore.state;
+const userGroupPageGetters = userGroupPageStore.getters;
+
+const storeState = reactive({
+    emailList: computed<MenuItem[]>(() => userGroupPageGetters.usersPerSelectedUserGroup.map((user) => ({
+        label: user.user_id,
+        name: user.name,
+    }))),
+});
+
+const handleConfirm = () => {};
+
+const handleClose = () => {};
+</script>
+
+<template>
+    <p-button-modal class="user-group-management-add-users-modal"
+                    :header-title="userGroupPageState.modal.title"
+                    :visible="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.ADD_NEW_USER"
+                    size="md"
+                    @confirm="handleConfirm"
+                    @cancel="handleClose"
+                    @close="handleClose"
+    >
+        <template #body>
+            <div class="modal-contents">
+                <p>User</p>
+                <p-select-dropdown :menu="storeState.emailList"
+                                   multi-selectable
+                                   is-filterable
+                />
+            </div>
+        </template>
+    </p-button-modal>
+</template>
+
+<style scoped lang="postcss">
+.user-group-management-add-users-modal {
+    min-height: 34.875rem;
+    .modal-contents {
+        @apply flex flex-col bg-primary-4 rounded-md;
+        margin-bottom: 9rem;
+        padding: 1rem;
+        gap: 1rem;
+    }
+}
+</style>

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

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import { reactive } from 'vue';
 
-import { PButtonModal } from '@cloudforet/mirinae';
+import { PButtonModal, PButton } from '@cloudforet/mirinae';
 
 import UserGroupManagementAddGroupInfo from '@/services/iam/components/UserGroupManagementAddGroupInfo.vue';
-import UserGroupManagementAddNotificationChannelInfo
-    from '@/services/iam/components/UserGroupManagementAddNotificationChannelInfo.vue';
+import UserGroupManagementScheduleSetting from '@/services/iam/components/UserGroupManagementScheduleSetting.vue';
+import { USER_GROUP_MODAL_TYPE } from '@/services/iam/constants/user-group-constant';
 import { useUserGroupPageStore } from '@/services/iam/store/user-group-page-store';
 
 const userGroupPageStore = useUserGroupPageStore();
@@ -32,23 +32,48 @@ const handleConfirm = () => {
 
 const handleClose = () => {
     console.log('TODO: handleClose');
+    userGroupPageState.modal.type = '';
+};
+
+/* API */
+const handleCreate = () => {
+    console.log('TODO: Create API');
+};
+
+const handleUpdate = () => {
+    console.log('TODO: Update API');
 };
 </script>
 
 <template>
     <p-button-modal class="user-group-management-edit-modal"
                     :header-title="userGroupPageState.modal.title"
-                    :visible="userGroupPageState.modal.visible === 'create' || userGroupPageState.modal.visible === 'update'"
+                    :visible="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.CREATE || userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.UPDATE"
                     size="md"
                     @confirm="handleConfirm"
+                    @cancel="handleClose"
                     @close="handleClose"
     >
         <template #body>
             <div class="modal-contents">
                 <user-group-management-add-group-info />
-                <user-group-management-add-notification-channel-info />
+                <user-group-management-schedule-setting />
             </div>
         </template>
+        <template #confirm-button>
+            <p-button v-if="userGroupPageState.modal.type === USER_GROUP_MODAL_TYPE.CREATE"
+                      theme="primary"
+                      @click="handleCreate"
+            >
+                {{ $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="handleUpdate"
+            >
+                {{ $t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.UPDATE') }}
+            </p-button>
+        </template>
     </p-button-modal>
 </template>
 

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

@@ -3,16 +3,16 @@ import { PHeading, PButton, PHeadingLayout } from '@cloudforet/mirinae';
 
 import { i18n } from '@/translations';
 
+import { USER_GROUP_MODAL_TYPE } from '@/services/iam/constants/user-group-constant';
 import { useUserGroupPageStore } from '@/services/iam/store/user-group-page-store';
 
 const userGroupPageStore = useUserGroupPageStore();
 
 const handleCreateGroup = () => {
     userGroupPageStore.updateModalSettings({
-        type: 'create',
+        type: USER_GROUP_MODAL_TYPE.CREATE,
         title: i18n.t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.TITLE'),
         themeColor: 'primary',
-        visible: 'create',
     });
 };
 </script>

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

@@ -0,0 +1,123 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+
+import {
+    PFieldGroup, PRadioGroup, PRadio, PI, PSelectButton, PSelectDropdown,
+} from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/inputs/context-menu/type';
+
+import { i18n } from '@/translations';
+
+interface ScheduleRadioType {
+  key: string;
+  name: TranslateResult | string;
+}
+
+const state = {
+    scheduleSettingList: computed<ScheduleRadioType[]>(() => [
+        {
+            key: 'weekdays',
+            name: i18n.t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.WEEKDAYS'),
+        },
+        {
+            key: 'everyday',
+            name: i18n.t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.EVERYDAY'),
+        },
+        {
+            key: 'custom',
+            name: i18n.t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.CUSTOM'),
+        },
+    ]),
+    selectedScheduleRadioType: computed<undefined>(() => undefined),
+    days: computed<MenuItem[]>(() => [
+        {
+            name: 'Monday',
+            label: 'Mon',
+        },
+        {
+            name: 'Tuesday',
+            label: 'Tue',
+        },
+        {
+            name: 'Wednesday',
+            label: 'Wed',
+        },
+        {
+            name: 'Thursday',
+            label: 'Thu',
+        },
+        {
+            name: 'Friday',
+            label: 'Fri',
+        },
+        {
+            name: 'Saturday',
+            label: 'Sat',
+        },
+        {
+            name: 'Sunday',
+            label: 'Sun',
+        },
+    ]),
+};
+
+
+const selectedDays = ref<string[]>([]);
+const selectedTime = ref<ScheduleRadioType>();
+</script>
+
+<template>
+    <div class="user-group-schedule-setting-wrapper">
+        <p-field-group :label="$t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.SCHEDULE_SETTING')"
+                       required
+        >
+            <p-radio-group direction="horizontal">
+                <p-radio v-for="schedule_setting in state.scheduleSettingList.value"
+                         :key="schedule_setting.key"
+                         v-model="selectedTime"
+                         :value="schedule_setting"
+                >
+                    {{ schedule_setting.name }}
+                </p-radio>
+            </p-radio-group>
+            <div class="flex gap-1 py-2 px-0.5">
+                <p-i name="ic_info-circle"
+                     color="#007EE5"
+                     width="14px"
+                     height="14px"
+                />
+                <p class="text-xs text-blue-600">
+                    {{ $t('IAM.USER_GROUP.MODAL.CREATE_USER_GROUP.INFO') }}
+                </p>
+            </div>
+            <div class="w-full overflow py-4 flex flex-wrap gap-2">
+                <p-select-button v-for="selectedDay in state.days.value"
+                                 :key="selectedDay.name"
+                                 v-model="selectedDays"
+                                 multi-selectable
+                                 :value="selectedDay.name"
+                >
+                    <!--                                 @change="handleUpdateDays(selectedDay)"-->
+                    {{ selectedDay.label }}
+                </p-select-button>
+            </div>
+            <div class="flex items-center gap-2">
+                <p-select-dropdown :menu="[{name: 'nine', label: '9:00'}]"
+                                   placeholder="9:00"
+                />
+                <span>to</span>
+                <p-select-dropdown :menu="[{name: 'eighteen', label: '18:00'}]"
+                                   placeholder="18:00"
+                />
+            </div>
+        </p-field-group>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.user-group-schedule-setting-wrapper {
+    @apply flex flex-col bg-white border border-primary-3 rounded-md;
+    padding: 0.75rem;
+}
+</style>