refactor: flow

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

@@ -1,34 +1,104 @@
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 
+import {
+  WorkflowTemplate,
+  WorkflowTemplatePayload,
+} from 'src/stores/workflow-template/types';
+import { useWorkflowTemplate } from 'src/stores/workflow-template';
+
+import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
 import CreateButton from 'src/components/AddButton.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import FlowDialog from '../04_product-service/FlowDialog.vue';
-import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
+import NoData from 'src/components/NoData.vue';
+import { QTableProps } from 'quasar';
+
+const workflowStore = useWorkflowTemplate();
 
 const pageState = reactive({
   hideStat: false,
   inputSearch: '',
   fieldSelected: [],
-  gridView: true,
+  gridView: false,
   total: 0,
 
   addModal: false,
 });
 
-const formFlowData = ref<WorkflowTemplatePayload>({
+const workflowList = ref<WorkflowTemplate[]>([]);
+const formDataWorkflow = ref<WorkflowTemplatePayload>({
   name: '',
   step: [],
 });
-
+const registeredBranchId = ref('');
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
+const columns = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: 'order',
+  },
+  {
+    name: 'name',
+    align: 'center',
+    label: 'general.name',
+    field: 'name',
+  },
+  {
+    name: 'step',
+    align: 'center',
+    label: 'general.numberOf',
+    field: 'step',
+  },
+  {
+    name: 'action',
+    align: 'center',
+    label: '',
+    field: 'action',
+  },
+] satisfies QTableProps['columns'];
 
 function triggerAddDialog() {
   pageState.addModal = true;
 }
+
+async function submitAdd() {
+  const res = await workflowStore.creatWorkflowTemplate({
+    registeredBranchId: registeredBranchId.value,
+    ...formDataWorkflow.value,
+  });
+  if (res) {
+    pageState.addModal = false;
+    await fetchWorkflowList();
+  }
+}
+
+function resetForm() {
+  formDataWorkflow.value = {
+    name: '',
+    step: [],
+  };
+}
+
+async function fetchWorkflowList() {
+  const res = await workflowStore.getWorkflowTemplateList();
+  if (res) workflowList.value = res.result;
+}
+
+onMounted(async () => {
+  await fetchWorkflowList();
+});
 </script>
 <template>
+  <ButtonAddComponent
+    style="z-index: 999"
+    hide-icon
+    @click="triggerAddDialog"
+  ></ButtonAddComponent>
+
   <div class="column full-height no-wrap">
     <!-- SEC: stat -->
     <section class="text-body-2 q-mb-xs flex items-center">
@@ -100,7 +170,6 @@ function triggerAddDialog() {
             </q-input>
 
             <div
-              v-if="true"
               class="row col-12 col-md-4 justify-end"
               :class="{ 'q-pt-xs': $q.screen.lt.md }"
               style="white-space: nowrap"
@@ -142,6 +211,7 @@ function triggerAddDialog() {
               />
 
               <q-btn-toggle
+                v-if="false"
                 id="btn-mode"
                 v-model="pageState.gridView"
                 dense
@@ -192,7 +262,7 @@ function triggerAddDialog() {
 
         <!-- SEC: body content -->
         <article
-          v-if="true"
+          v-if="workflowList.length === 0 && !pageState.inputSearch"
           class="col surface-2 flex items-center justify-center"
         >
           <NoData
@@ -207,7 +277,58 @@ function triggerAddDialog() {
             :i18n-args="{ text: $t('flow.title') }"
           />
         </article>
-        <article v-else class="col q-pa-md surface-2 scroll"></article>
+        <article v-else class="col q-pa-md surface-2 scroll">
+          <q-table
+            flat
+            bordered
+            hide-pagination
+            :columns="columns"
+            :rows="workflowList"
+          >
+            <template #header="{ cols }">
+              <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
+                <q-th
+                  v-for="v in cols"
+                  :key="v"
+                  :class="{
+                    'text-left': v.name === 'name',
+                    'text-right': v.name === 'step',
+                  }"
+                >
+                  {{
+                    v.label &&
+                    $t(v.label, {
+                      msg:
+                        v.name === 'step'
+                          ? $t('flow.step')
+                          : v.name === 'name'
+                            ? $t('flow.title')
+                            : '',
+                    })
+                  }}
+                </q-th>
+              </q-tr>
+            </template>
+
+            <template #body="props">
+              <q-tr>
+                <q-td class="text-center">{{ props.rowIndex + 1 }}</q-td>
+                <q-td>{{ props.row.name }}</q-td>
+                <q-td class="text-right">{{ props.row.step.length }}</q-td>
+                <q-td class="text-right">
+                  <q-btn
+                    icon="mdi-eye-outline"
+                    size="sm"
+                    dense
+                    round
+                    flat
+                    @click.stop="$emit('view', props.rowIndex)"
+                  />
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </article>
 
         <!-- SEC: footer content -->
         <!-- <footer
@@ -265,5 +386,11 @@ function triggerAddDialog() {
     </section>
   </div>
 
-  <FlowDialog v-model="pageState.addModal" v-model:flow-data="formFlowData" />
+  <FlowDialog
+    @close="resetForm"
+    @submit="submitAdd"
+    v-model="pageState.addModal"
+    v-model:flow-data="formDataWorkflow"
+    v-model:register-branch-id="registeredBranchId"
+  />
 </template>