From 56a63185a1610da82904627cb52e4e786dba1591 Mon Sep 17 00:00:00 2001 From: puriphatt Date: Thu, 24 Apr 2025 14:31:08 +0700 Subject: [PATCH] feat: update responsibleGroup type to string array and initialize in workflow steps --- .../04_flow-management/FormFlow.vue | 280 +++++++++++++----- src/pages/04_flow-managment/FlowDialog.vue | 2 + src/pages/04_flow-managment/MainPage.vue | 13 +- src/stores/workflow-template/index.ts | 2 +- src/stores/workflow-template/types.ts | 2 +- 5 files changed, 215 insertions(+), 84 deletions(-) diff --git a/src/components/04_flow-management/FormFlow.vue b/src/components/04_flow-management/FormFlow.vue index 3db8aa6f..711526f2 100644 --- a/src/components/04_flow-management/FormFlow.vue +++ b/src/components/04_flow-management/FormFlow.vue @@ -6,12 +6,14 @@ import { useI18n } from 'vue-i18n'; import useUserStore from 'src/stores/user'; import useOptionStore from 'src/stores/options'; +import { useWorkflowTemplate } from 'src/stores/workflow-template'; import { baseUrl } from 'stores/utils'; import { getRole } from 'src/services/keycloak'; import { WorkflowUserInTable, WorkflowTemplatePayload, WorkFlowPayloadStep, + Group, } from 'src/stores/workflow-template/types'; import { User } from 'src/stores/user/types'; @@ -20,6 +22,7 @@ import ToggleButton from 'src/components/button/ToggleButton.vue'; import NoData from '../NoData.vue'; import SelectBranch from '../shared/select/SelectBranch.vue'; import AddButton from '../button/AddButton.vue'; +import { QField } from 'quasar'; defineProps<{ readonly?: boolean; @@ -29,6 +32,7 @@ defineProps<{ const { t } = useI18n(); const userStore = useUserStore(); const optionStore = useOptionStore(); +const workflowStore = useWorkflowTemplate(); const userInTable = defineModel('userInTable', { default: [], @@ -51,7 +55,9 @@ let objectOptions = [ const options = ref(objectOptions); const role = ref([]); const userList = ref([]); +const groupList = ref([]); const responsiblePersonSearch = ref(''); +const responsibleMenu = ref(false); async function getUserList(opts?: { query: string }) { const resUser = await userStore.fetchList({ @@ -60,10 +66,10 @@ async function getUserList(opts?: { query: string }) { if (resUser) userList.value = resUser.result; } -// async function getUserById(responsiblePersonId: string) { -// const resUser = await userStore.fetchById(responsiblePersonId); -// if (resUser) userInTable.value.push(resUser); -// } +async function getGroupList() { + const resGroup = await workflowStore.getGroupList(); + if (resGroup) groupList.value = resGroup; +} function selectResponsiblePerson(stepIndex: number, responsiblePerson: User) { const currStep = flowData.value.step[stepIndex]; @@ -78,6 +84,7 @@ function selectResponsiblePerson(stepIndex: number, responsiblePerson: User) { userInTable.value[stepIndex] = { name: flowData.value.step[stepIndex].name, responsiblePerson: [], + responsibleGroup: [], }; } @@ -101,6 +108,33 @@ function selectResponsiblePerson(stepIndex: number, responsiblePerson: User) { } } +function selectResponsibleGroup(stepIndex: number, responsibleGroup: string) { + const currStep = flowData.value.step[stepIndex]; + const existGroupIndex = currStep.responsibleGroup?.findIndex( + (p) => p === responsibleGroup, + ); + + if (existGroupIndex === -1) { + currStep.responsibleGroup?.push(responsibleGroup); + + if (!userInTable.value[stepIndex]) { + userInTable.value[stepIndex] = { + name: flowData.value.step[stepIndex].name, + responsiblePerson: [], + responsibleGroup: [], + }; + } + + userInTable.value[stepIndex]?.responsibleGroup.push(responsibleGroup); + } else { + currStep.responsibleGroup?.splice(Number(existGroupIndex), 1); + userInTable.value[stepIndex]?.responsibleGroup.splice( + Number(existGroupIndex), + 1, + ); + } +} + function selectItem( val: Record, responsibleInstitution?: string[], @@ -142,6 +176,7 @@ watch( onMounted(async () => { role.value = getRole() || []; await getUserList(); + await getGroupList(); await userStore.fetchHqOption(); }); @@ -467,92 +502,128 @@ onMounted(async () => { - - + - - +
+ {{ $t('general.group') }} +
+ + + + + + {{ group }} + + + + + { {{ $t('general.noData') }} { {{ $t('personnel.MESSENGER') }} { + + + {{ $t('general.group') }} + + + {{ $t('general.noData') }} + + +
+ + + + +
+ {{ group.name }} +
+
+ - + { :deep(.q-dialog.fullscreen.no-pointer-events.q-dialog--modal) { visibility: hidden; } + +.transition-rotate { + transition: transform 0.3s ease; +} +.rotated { + transform: rotate(180deg); +} diff --git a/src/pages/04_flow-managment/FlowDialog.vue b/src/pages/04_flow-managment/FlowDialog.vue index 77d8bd12..e3958ac8 100644 --- a/src/pages/04_flow-managment/FlowDialog.vue +++ b/src/pages/04_flow-managment/FlowDialog.vue @@ -60,6 +60,7 @@ async function addStep() { flowData.value.step.push({ responsibleInstitution: [], responsiblePersonId: [], + responsibleGroup: [], value: [], detail: '', name: '', @@ -166,6 +167,7 @@ function triggerPropertiesDialog(step: WorkFlowPayloadStep) { id="flow-form-dialog" > { - userInTable.value[i] = { name: s.name, responsiblePerson: [] }; + userInTable.value[i] = { + name: s.name, + responsiblePerson: [], + responsibleGroup: [], + }; s.responsiblePerson.forEach((p) => { userInTable.value[i].responsiblePerson.push({ id: p.user.id, @@ -237,12 +242,16 @@ function assignFormData(workflowData: WorkflowTemplate) { code: p.user.code, }); }); + s.responsibleGroup.forEach((g) => { + userInTable.value[i].responsibleGroup.push(g); + }); return { id: s.id, name: s.name, detail: s.detail, messengerByArea: s.messengerByArea || false, value: s.value.length > 0 ? JSON.parse(JSON.stringify(s.value)) : [], + responsibleGroup: s.responsibleGroup.map((g) => g), responsiblePersonId: s.responsiblePerson.map((p) => p.userId), responsibleInstitution: JSON.parse( JSON.stringify(s.responsibleInstitution), diff --git a/src/stores/workflow-template/index.ts b/src/stores/workflow-template/index.ts index 9f186a17..ef1e83d5 100644 --- a/src/stores/workflow-template/index.ts +++ b/src/stores/workflow-template/index.ts @@ -2,7 +2,7 @@ import { ref } from 'vue'; import { defineStore } from 'pinia'; import { api } from 'src/boot/axios'; import { PaginationResult } from 'src/types'; -import { WorkflowTemplate, WorkflowTemplatePayload, Group } from './types'; +import { Group, WorkflowTemplate, WorkflowTemplatePayload } from './types'; import { Status } from '../types'; export const useWorkflowTemplate = defineStore('workflow-store', () => { diff --git a/src/stores/workflow-template/types.ts b/src/stores/workflow-template/types.ts index 7307c2cf..c2c64036 100644 --- a/src/stores/workflow-template/types.ts +++ b/src/stores/workflow-template/types.ts @@ -50,7 +50,7 @@ export type WorkflowTemplatePayload = { export type WorkflowUserInTable = { name: string; - responsibleGroup: Group[]; + responsibleGroup: string[]; responsiblePerson: { id: string; selectedImage?: string;