diff --git a/public/option/option.json b/public/option/option.json index 623d6ff4..79d36b0d 100644 --- a/public/option/option.json +++ b/public/option/option.json @@ -958,6 +958,45 @@ "label": "Processing Fee", "value": "processingFee" } + ], + + "agenciesType": [ + { + "label": "Agency", + "value": "AGE" + }, + { + "label": "Department of Employment", + "value": "DOE" + }, + { + "label": "Dhipaya Insurance", + "value": "INS" + }, + { + "label": "Embassy", + "value": "EMB" + }, + { + "label": "Government Agencies", + "value": "GA" + }, + { + "label": "Hospital", + "value": "HOS" + }, + { + "label": "Immigration Bureau", + "value": "IMB" + }, + { + "label": "Immigration Checkpoint", + "value": "IMC" + }, + { + "label": "Ministry of Labour", + "value": "MOL" + } ] }, @@ -1919,6 +1958,45 @@ "label": "ค่าดำเนินงาน", "value": "processingFee" } + ], + + "agenciesType": [ + { + "label": "เอเจนซี่ / หน่วยงาน", + "value": "AGE" + }, + { + "label": "จัดหางานพื้นที่", + "value": "DOE" + }, + { + "label": "ทิพยประกันภัย", + "value": "INS" + }, + { + "label": "สถานทูต", + "value": "EMB" + }, + { + "label": "หน่วยงานราชการ", + "value": "GA" + }, + { + "label": "โรงพยาบาล", + "value": "HOS" + }, + { + "label": "สำนักงานตรวจคนเข้าเมือง", + "value": "IMB" + }, + { + "label": "ด่านตรวจคนเข้าเมือง", + "value": "IMC" + }, + { + "label": "กรมแรงงาน", + "value": "MOL" + } ] } } diff --git a/src/components/04_flow-management/FormFlow.vue b/src/components/04_flow-management/FormFlow.vue index 725883d1..72304fd1 100644 --- a/src/components/04_flow-management/FormFlow.vue +++ b/src/components/04_flow-management/FormFlow.vue @@ -13,18 +13,18 @@ import { } from 'src/stores/workflow-template/types'; import { User } from 'src/stores/user/types'; +import SelectMenuWithSearch from '../shared/SelectMenuWithSearch.vue'; import SelectInput from '../shared/SelectInput.vue'; import ToggleButton from 'src/components/button/ToggleButton.vue'; -import { DeleteButton } from '../button'; +import NoData from '../NoData.vue'; -const props = defineProps<{ +defineProps<{ readonly?: boolean; onDrawer?: boolean; }>(); const userStore = useUserStore(); const optionStore = useOptionStore(); - const modelByArea = ref(false); const userInTable = defineModel('userInTable', { @@ -40,6 +40,7 @@ const flowData = defineModel('flowData', { }, }); +const options = ref(optionStore.globalOption?.agenciesType); const role = ref([]); const userList = ref([]); const responsiblePersonSearch = ref(''); @@ -56,6 +57,12 @@ const columns = [ label: 'flow.responsiblePerson', field: 'responsiblePerson', }, + { + name: 'responsiblePerson', + align: 'center', + label: 'general.agencies', + field: 'responsiblePerson', + }, { name: 'action', align: 'right', @@ -112,6 +119,31 @@ function selectResponsiblePerson(stepIndex: number, responsiblePerson: User) { } } +function selectItem( + val: Record, + responsibleInstitution?: string[], +) { + if (!responsibleInstitution) return; + const existIndex = responsibleInstitution.findIndex((p) => p === val.value); + if (existIndex === -1) { + responsibleInstitution.push(val.value as string); + } else { + responsibleInstitution.splice(Number(existIndex), 1); + } +} + +function optionSearch(val: string | null) { + if (val === '') { + options.value = optionStore.globalOption?.agenciesType; + return; + } + + const needle = val ? val.toLowerCase() : ''; + options.value = optionStore.globalOption?.agenciesType.filter( + (v: { label: string }) => v.label.toLowerCase().indexOf(needle) > -1, + ); +} + defineEmits<{ (e: 'moveUp'): void; (e: 'moveDown'): void; @@ -163,21 +195,25 @@ onMounted(async () => { -
+
{ {{ $t(`flow.processStep`) }}
-
- - +
+ +
-
@@ -506,4 +721,21 @@ onMounted(async () => { height: 36px; font-size: 12px; } + +:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) { + color: hsl(var(--text-mute)); +} + +:deep( + i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon.q-expansion-item__toggle-icon--rotated + ) { + color: var(--brand-1); +} + +:deep( + .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.expansion-rounded.surface-2 + .q-focus-helper + ) { + visibility: hidden; +} diff --git a/src/components/shared/SelectMenuWithSearch.vue b/src/components/shared/SelectMenuWithSearch.vue new file mode 100644 index 00000000..631a2609 --- /dev/null +++ b/src/components/shared/SelectMenuWithSearch.vue @@ -0,0 +1,105 @@ + + + diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts index 398680d3..95fcf890 100644 --- a/src/i18n/eng.ts +++ b/src/i18n/eng.ts @@ -120,6 +120,7 @@ export default { area: 'Area by area', byArea: 'By area', company: 'Company', + agencies: 'Agencies', form: 'Form', designForm: 'design a form', }, diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts index 5bc3b0f2..9da5ff12 100644 --- a/src/i18n/tha.ts +++ b/src/i18n/tha.ts @@ -120,6 +120,7 @@ export default { area: 'เขตพื้นที่', byArea: 'ตามเขตพื้นที่', company: 'บริษัท', + agencies: 'หน่วยงาน', form: 'แบบฟอร์ม', designForm: 'ออกแบบฟอร์ม', }, diff --git a/src/pages/04_flow-managment/FlowDialog.vue b/src/pages/04_flow-managment/FlowDialog.vue index 8c3115d4..fc2593e0 100644 --- a/src/pages/04_flow-managment/FlowDialog.vue +++ b/src/pages/04_flow-managment/FlowDialog.vue @@ -52,8 +52,10 @@ defineEmits<{ async function addStep() { flowData.value.step.push({ + responsibleInstitution: [], responsiblePersonId: [], value: [], + detail: '', name: '', }); @@ -71,6 +73,7 @@ async function addStep() { v-model:modal="model" :submit="() => $emit('submit')" :close="() => $emit('close')" + hide-footer >
+
+
+ +
+
p.userId), + responsibleInstitution: s.responsibleInstitution, }; }), }; @@ -395,6 +396,7 @@ watch(() => pageState.inputSearch, fetchWorkflowList); hide-pagination :columns="columns" :rows="workflowData" + :rows-per-page-options="[0]" > + + diff --git a/src/stores/options/index.ts b/src/stores/options/index.ts index bbe2a66b..5fba098f 100644 --- a/src/stores/options/index.ts +++ b/src/stores/options/index.ts @@ -7,7 +7,13 @@ const useOptionStore = defineStore('optionStore', () => { const globalOption = ref(); const rawOption = ref(); - function mapOption(value: string) { + function mapOption(value: string, categoryKey?: string) { + if (categoryKey) { + const option = globalOption.value[categoryKey].find( + (opt: { value: string }) => opt.value === value, + ); + if (option) return option.label; + } for (const category in globalOption.value) { if (globalOption.value.hasOwnProperty(category)) { const option = globalOption.value[category].find( diff --git a/src/stores/workflow-template/types.ts b/src/stores/workflow-template/types.ts index f643a6fe..060cb33d 100644 --- a/src/stores/workflow-template/types.ts +++ b/src/stores/workflow-template/types.ts @@ -4,6 +4,7 @@ export type WorkflowStep = { id: string; order: number; name: string; + detail?: string; type: string | null; // NOTE: for list like type only @@ -14,11 +15,13 @@ export type WorkflowStep = { userId: string; user: CreatedBy; }[]; + responsibleInstitution: string[]; }; export type WorkflowTemplate = { id: string; name: string; + detail: string | null; registeredBranchId: string; step: WorkflowStep[]; status: Status; @@ -36,8 +39,10 @@ export type WorkflowTemplatePayload = { step: { name: string; type?: string | null; + detail?: string | null; value?: string[]; responsiblePersonId?: string[]; + responsibleInstitution?: string[]; }[]; };