From 2cc957ffded8a1bf2bc1c6d36b39e3f3525b88e7 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 24 Oct 2024 18:08:05 +0700
Subject: [PATCH] fix: workflow page

---
 src/pages/04_flow-managment/MainPage.vue | 263 +++++++++++++++++++++++
 src/router/routes.ts                     |   5 +
 2 files changed, 268 insertions(+)
 create mode 100644 src/pages/04_flow-managment/MainPage.vue

diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
new file mode 100644
index 00000000..c90d3b8c
--- /dev/null
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -0,0 +1,263 @@
+<script lang="ts" setup>
+import { reactive, ref } from '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';
+
+const pageState = reactive({
+  hideStat: false,
+  inputSearch: '',
+  fieldSelected: [],
+  gridView: true,
+  total: 0,
+
+  addModal: false,
+});
+
+const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
+
+function triggerAddDialog() {
+  pageState.addModal = true;
+}
+</script>
+<template>
+  <div class="column full-height no-wrap">
+    <!-- SEC: stat -->
+    <section class="text-body-2 q-mb-xs flex items-center">
+      {{ $t('general.dataSum') }}
+      <q-badge
+        rounded
+        class="q-ml-sm"
+        style="
+          background-color: hsla(var(--info-bg) / 0.15);
+          color: hsl(var(--info-bg));
+        "
+      >
+        {{ 0 }}
+      </q-badge>
+      <q-btn
+        class="q-ml-sm"
+        icon="mdi-pin-outline"
+        color="primary"
+        size="sm"
+        flat
+        dense
+        rounded
+        @click="pageState.hideStat = !pageState.hideStat"
+        :style="pageState.hideStat ? 'rotate: 90deg' : ''"
+        style="transition: 0.1s ease-in-out"
+      />
+    </section>
+
+    <transition name="slide">
+      <div v-if="!pageState.hideStat" class="scroll q-mb-md">
+        <div style="display: inline-block">
+          <StatCardComponent
+            labelI18n
+            :branch="[
+              {
+                icon: 'mdi-folder-outline',
+                count: 0,
+                label: 'flow.title',
+                color: 'red',
+              },
+            ]"
+            :dark="$q.dark.isActive"
+          />
+        </div>
+      </div>
+    </transition>
+
+    <!-- SEC: header content -->
+    <section class="col surface-1 rounded">
+      <div class="column full-height">
+        <header
+          class="row surface-3 justify-between full-width items-center bordered-b"
+          style="z-index: 1"
+        >
+          <div class="row q-py-sm q-px-md justify-between full-width">
+            <q-input
+              for="input-search"
+              outlined
+              dense
+              :label="$t('general.search')"
+              class="q-mr-md col-12 col-md-3"
+              :bg-color="$q.dark.isActive ? 'dark' : 'white'"
+              v-model="pageState.inputSearch"
+              debounce="200"
+            >
+              <template #prepend>
+                <q-icon name="mdi-magnify" />
+              </template>
+            </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"
+            >
+              <q-select
+                v-model="statusFilter"
+                outlined
+                dense
+                option-value="value"
+                option-label="label"
+                class="col"
+                :class="{ 'offset-md-5': pageState.gridView }"
+                map-options
+                emit-value
+                :for="'field-select-status'"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                :options="[
+                  { label: $t('general.all'), value: 'all' },
+                  { label: $t('general.active'), value: 'statusACTIVE' },
+                  { label: $t('general.inactive'), value: 'statusINACTIVE' },
+                ]"
+              ></q-select>
+
+              <q-select
+                v-if="!pageState.gridView"
+                id="select-field"
+                for="select-field"
+                class="col q-ml-sm"
+                :display-value="$t('general.displayField')"
+                :hide-dropdown-icon="$q.screen.lt.sm"
+                v-model="pageState.fieldSelected"
+                option-label="label"
+                option-value="value"
+                map-options
+                emit-value
+                outlined
+                multiple
+                dense
+              />
+
+              <q-btn-toggle
+                id="btn-mode"
+                v-model="pageState.gridView"
+                dense
+                class="no-shadow bordered rounded surface-1 q-ml-sm"
+                :toggle-color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+                size="xs"
+                :options="[
+                  { value: true, slot: 'folder' },
+                  { value: false, slot: 'list' },
+                ]"
+              >
+                <template v-slot:folder>
+                  <q-icon
+                    name="mdi-view-grid-outline"
+                    size="16px"
+                    class="q-px-sm q-py-xs rounded"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView
+                          ? '#C9D3DB '
+                          : '#787B7C'
+                        : pageState.gridView
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+                <template v-slot:list>
+                  <q-icon
+                    name="mdi-format-list-bulleted"
+                    class="q-px-sm q-py-xs rounded"
+                    size="16px"
+                    :style="{
+                      color: $q.dark.isActive
+                        ? pageState.gridView === false
+                          ? '#C9D3DB'
+                          : '#787B7C'
+                        : pageState.gridView === false
+                          ? '#787B7C'
+                          : '#C9D3DB',
+                    }"
+                  />
+                </template>
+              </q-btn-toggle>
+            </div>
+          </div>
+        </header>
+
+        <!-- SEC: body content -->
+        <article
+          v-if="true"
+          class="col surface-2 flex items-center justify-center"
+        >
+          <NoData
+            v-if="pageState.inputSearch"
+            :not-found="!!pageState.inputSearch"
+          />
+
+          <CreateButton
+            v-if="!pageState.inputSearch"
+            @click="triggerAddDialog"
+            label="general.add"
+            :i18n-args="{ text: $t('flow.title') }"
+          />
+        </article>
+        <article v-else class="col q-pa-md surface-2 scroll"></article>
+
+        <!-- SEC: footer content -->
+        <!-- <footer
+          class="row justify-between items-center q-px-md q-py-sm surface-2"
+          v-if="quotationPageMax > 0"
+        >
+          <div class="col-4">
+            <div class="row items-center no-wrap">
+              <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
+                {{ $t('general.recordPerPage') }}
+              </div>
+              <div>
+                <q-btn-dropdown
+                  dense
+                  unelevated
+                  :label="quotationPageSize"
+                  class="bordered q-pl-md"
+                >
+                  <q-list>
+                    <q-item
+                      v-for="v in [10, 30, 50, 100, 500, 1000]"
+                      :key="v"
+                      clickable
+                      v-close-popup
+                      @click="quotationPageSize = v"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ v }}</q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-btn-dropdown>
+              </div>
+            </div>
+          </div>
+          <div class="col-4 row justify-center app-text-muted">
+            {{
+              $t('general.recordsPage', {
+                resultcurrentPage: quotationData.length,
+                total: pageState.inputSearch
+                  ? quotationData.length
+                  : pageState.total,
+              })
+            }}
+          </div>
+          <nav class="col-4 row justify-end">
+            <PaginationComponent
+              v-model:current-page="quotationPage"
+              v-model:max-page="quotationPageMax"
+              :fetch-data="fetchQuotationList"
+            />
+          </nav>
+        </footer> -->
+      </div>
+    </section>
+  </div>
+
+  <FlowDialog v-model="pageState.addModal" />
+</template>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 92a19dee..120984f3 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -79,6 +79,11 @@ const routes: RouteRecordRaw[] = [
         name: 'Quotation',
         component: () => import('pages/05_quotation/MainPage.vue'),
       },
+      {
+        path: '/workflow',
+        name: 'Workflow',
+        component: () => import('pages/04_flow-managment/MainPage.vue'),
+      },
       {
         path: '/document-management',
         name: 'document-management',