feat: add workflow template fields (#63)

* feat: add type detail

* feat: option => agencies type

* feat: agencies i18n

* fix: workflow => add institution type

* refactor: map option specific category, key

* feat: select menu with search components

* feat: workflow => add field step description & agencies

* fix: workflow => table page

* refactor: workflow => floating dialog submit

---------

Co-authored-by: Methapon Metanipat <methapon@frappet.com>

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
   >
     <div
       class="col surface-1 rounded bordered scroll row relative-position"
@@ -79,6 +82,18 @@ async function addStep() {
         'q-mx-md q-my-sm': !$q.screen.gt.sm,
       }"
     >
+      <div
+        class="rounded row"
+        style="position: absolute; z-index: 999; right: 0; top: 0"
+        :class="{
+          'q-py-md q-px-lg': $q.screen.gt.sm,
+          'q-py-sm q-px-lg': !$q.screen.gt.sm,
+        }"
+      >
+        <div class="surface-1 row rounded">
+          <SaveButton id="btn-info-basic-save" icon-only type="submit" />
+        </div>
+      </div>
       <section
         class="col"
         style="height: 100%; max-height: 100; overflow-y: auto"

src/pages/04_flow-managment/MainPage.vue

@@ -211,9 +211,10 @@ function assignFormData(workflowData: WorkflowTemplate) {
       return {
         id: s.id,
         name: s.name,
-        // type: s.type,
+        detail: s.detail,
         value: s.value || [],
         responsiblePersonId: s.responsiblePerson.map((p) => p.userId),
+        responsibleInstitution: s.responsibleInstitution,
       };
     }),
   };
@@ -395,6 +396,7 @@ watch(() => pageState.inputSearch, fetchWorkflowList);
             hide-pagination
             :columns="columns"
             :rows="workflowData"
+            :rows-per-page-options="[0]"
           >
             <template #header="{ cols }">
               <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
@@ -428,7 +430,6 @@ watch(() => pageState.inputSearch, fetchWorkflowList);
                   'status-active': props.row.status !== 'INACTIVE',
                   'status-inactive': props.row.status === 'INACTIVE',
                 }"
-                :props="props"
                 :style="
                   props.rowIndex % 2 !== 0
                     ? $q.dark.isActive
@@ -552,3 +553,16 @@ watch(() => pageState.inputSearch, fetchWorkflowList);
     v-model:register-branch-id="registeredBranchId"
   />
 </template>
+
+<style scoped>
+.status-active {
+  --_branch-status-color: var(--green-6-hsl);
+}
+
+.status-inactive {
+  --_branch-status-color: var(--stone-5-hsl);
+  --_branch-badge-bg: var(--stone-5-hsl);
+  filter: grayscale(0.5);
+  opacity: 0.5;
+}
+</style>