refactor: quotation product tree

2024-09-30 16:35:41 +07:00 · 2024-09-30 16:35:41 +07:00 · 66b30b9e3f
commit 66b30b9e3f
parent 5d1d1f36e0
5 changed files with 251 additions and 154 deletions
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/src/components/04_product-service/FormServiceWork.vue
@ -38,7 +38,6 @@ const nodes = ref([
  {
    title: props.service?.name,
    subtitle: props.service?.code || ' ',
-    selected: false,
    opened: true,
    children: (function () {
      const noNameObjects = workItems.value
@ -99,7 +98,6 @@ watch(
      {
        title: props.service?.name,
        subtitle: props.service?.code || ' ',
-        selected: false,
        opened: true,
        children: (function () {
          const noNameObjects = workItems.value
--- a/src/components/shared/TreeView.vue
+++ b/src/components/shared/TreeView.vue
@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue';
-import { computed, ref } from 'vue';
+import { computed } from 'vue';

 type Node = {
  [key: string]: any;
@ -9,6 +9,7 @@ type Node = {
  bg?: string;
  fg?: string;
  icon?: string;
+  displayDropIcon?: boolean;
  children?: Node[];
 };

@ -36,6 +37,7 @@ const nodes = defineModel<Node[]>('nodes', { required: true });
 const emits = defineEmits<{
  (e: 'checked'): void;
  (e: 'select', node: Node, ancestor?: Node[]): void;
+  (e: 'open', node: Node, ancestor?: Node[]): void;
 }>();

 const dec = props.decoration?.find((v) => v.level === (props.level || 0));
@ -59,8 +61,9 @@ function toggleCheck(node: Node) {
  if (node.checked === true) emits('checked');
 }

-function toggleExpand(node: Node) {
+function toggleExpand(node: Node, ancestor?: []) {
  node.opened = !node.opened;
+  emits('open', node, ancestor);
 }
 </script>

@ -98,13 +101,25 @@ function toggleExpand(node: Node) {
          <div
            v-if="level !== maxLevel"
            class="q-mr-md"
-            :style="`color: ${node.children?.length === 0 || !node.children ? 'transparent' : 'var(--stone-4)'}`"
+            :style="`color: ${
+              !node.displayDropIcon &&
+              (!node.children || node.children.length === 0)
+                ? 'transparent'
+                : $q.dark.isActive
+                  ? 'var(--gray-7)'
+                  : 'var(--gray-4)'
+            }`"
          >
            <q-icon
              name="mdi-chevron-down-circle"
              size="sm"
              :style="`transform: rotate(${node.opened ? '180deg' : '0'}); transition: transform 0.3s ease;`"
-              @click.stop="toggleExpand(node)"
+              @click.stop="
+                !node.displayDropIcon &&
+                (!node.children || node.children.length === 0)
+                  ? $emit('select', node)
+                  : toggleExpand(node)
+              "
            />
          </div>

@ -125,6 +140,7 @@ function toggleExpand(node: Node) {
            :style="`background: ${node.bg || dec?.bg}; color: ${node.fg || dec?.fg}; height: ${iconSize}; width: ${iconSize}`"
          >
            <div
+              class="flex items-center justify-center"
              :style="`height: calc(${iconSize} - 40%); width: calc(${iconSize} - 40%)`"
            >
              <Icon
@ -157,16 +173,38 @@ function toggleExpand(node: Node) {
            class="item__children"
            v-if="node.children"
            v-model:nodes="node.children"
+            @open="
+              (n) => {
+                $emit(
+                  'open',
+                  n,
+                  !props.ancestorNode || props.ancestorNode.length === 0
+                    ? [node]
+                    : [...props.ancestorNode, node],
+                );
+              }
+            "
            @checked="
              () => {
                node.checked = true;
                $emit('checked');
              }
            "
-            @select="(v) => $emit('select', v, props.ancestorNode)"
+            @select="
+              (v) =>
+                $emit(
+                  'select',
+                  v,
+                  !props.ancestorNode || props.ancestorNode.length === 0
+                    ? [node]
+                    : [...props.ancestorNode, node],
+                )
+            "
            :level="(level || 0) + 1"
            :ancestorNode="
-              !props.ancestorNode ? [node] : [...props.ancestorNode, node]
+              !props.ancestorNode || props.ancestorNode.length === 0
+                ? [node]
+                : [...props.ancestorNode, node]
            "
            :expandable
            :decoration
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@ -65,6 +65,17 @@ import { useQuotationStore } from 'src/stores/quotations';
 import QuotationView from './QuotationView.vue';
 import { watch } from 'vue';

+type Node = {
+  [key: string]: any;
+  opened?: boolean;
+  checked?: boolean;
+  bg?: string;
+  fg?: string;
+  icon?: string;
+  displayDropIcon?: boolean;
+  children?: Node[];
+};
+
 const flowStore = useFlowStore();
 const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
  {
@ -91,49 +102,92 @@ const { state: customerFormState, currentFormData: customerFormData } =
 const { state: employeeFormState, currentFromDataEmployee } =
  storeToRefs(employeeFormStore);

-const test1 = ref(true);
-const test2 = ref(true);
+const test1 = ref(false);
+const test2 = ref(false);
 const dialog = ref(true);
-const nodes = ref([
+const nodes = ref<Node[]>([
  {
    title: 'กลุ่มสินค้าและบริการที่ 1',
    subtitle: 'TG01000000001',
    selected: false,
+    type: 'group',
    children: [
      {
-        title: 'งานที่ 1',
+        title:
+          'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
        subtitle: 'TG01000000001',
        selected: false,
+        type: 'type',
        children: [
          {
-            title: 'สินค้า 1',
+            title: 'งาน 1',
            subtitle: 'TG01000000001',
            selected: false,
+            type: 'work',
+            children: [
+              {
+                title: 'สินค้า 1',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+              {
+                title: 'สินค้า 2',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+              {
+                title: 'สินค้า 3',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+            ],
          },
+        ],
+      },
+    ],
+  },
+
+  {
+    title: 'กลุ่มสินค้าและบริการที่ 2',
+    subtitle: 'TG01000000001',
+    selected: false,
+    type: 'group',
+    children: [
+      {
+        title:
+          'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
+        subtitle: 'TG01000000001',
+        selected: false,
+        type: 'type',
+        children: [
          {
-            title: 'สินค้า 2',
-            subtitle: 'TG01000000001',
-            selected: false,
-          },
-          {
-            title: 'สินค้า 3',
-            subtitle: 'TG01000000001',
-            selected: false,
-          },
-          {
-            title: 'สินค้า 4',
-            subtitle: 'TG01000000001',
-            selected: false,
-          },
-          {
-            title: 'สินค้า 5',
-            subtitle: 'TG01000000001',
-            selected: false,
-          },
-          {
-            title: 'สินค้า 6',
+            title: 'งาน 1',
            subtitle: 'TG01000000001',
            selected: false,
+            type: 'work',
+            children: [
+              {
+                title: 'สินค้า 1',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+              {
+                title: 'สินค้า 2',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+              {
+                title: 'สินค้า 3',
+                subtitle: 'TG01000000001',
+                selected: false,
+                type: 'product',
+              },
+            ],
          },
        ],
      },
@ -288,8 +342,75 @@ async function getService(id: string, force = false) {
 }

 function convertToTree() {
-  // TODO: convert product or service into selectable tree
-  // NOTE: this is meant to be used inside getService() and getProduct() before return and after return
+  const node = productGroup.value.map((g) => ({
+    id: g.id,
+    title: g.name,
+    subtitle: g.code,
+    detail: g.detail,
+    remark: g.remark,
+    type: 'group',
+    displayDropIcon: g._count.service + g._count.product !== 0,
+  }));
+  nodes.value = node;
+}
+
+async function openProductServiceTree(node: Node, anchestor?: Node[]) {
+  if (node.type === 'group') {
+    const curGroupNode = nodes.value.find((v) => v.id === node.id);
+    await getAllService(node.id);
+    if (!curGroupNode) return;
+
+    curGroupNode.children = serviceList.value[curGroupNode.id]?.map((t) => ({
+      id: t.id,
+      title: t.name,
+      subtitle: t.code,
+      detail: t.detail,
+      type: 'type',
+      displayDropIcon: t.work.length > 0,
+    }));
+  }
+
+  if (node.type === 'type' && anchestor && anchestor[0].children) {
+    const curTypeNode = anchestor[0].children.find((v) => v.id === node.id);
+    const curType = serviceList.value[anchestor[0].id]?.find(
+      (v) => v.id === node.id,
+    );
+    if (!curTypeNode) return;
+    const noNameWork = curType.work
+      .filter((v) => !v.name)
+      .flatMap((v) =>
+        v.productOnWork.map((p) => ({
+          id: p.product.id,
+          title: p.product.name,
+          subtitle: p.product.code,
+          detail: p.product.detail,
+          remark: p.product.remark,
+          type: 'product',
+          icon: 'mdi-shopping-outline',
+          bg: 'hsla(var(--teal-10-hsl)/0.1)',
+          fg: 'var(--teal-10)',
+        })),
+      );
+    const withNameWork = curType.work
+      .filter((v) => v.name)
+      .flatMap((w) => ({
+        id: w.id,
+        title: w.name,
+        subtitle: ' ',
+        attributes: w.attributes,
+        type: 'work',
+        displayDropIcon: w.productOnWork.length > 0,
+        children: w.productOnWork.map((p) => ({
+          id: p.product.id,
+          title: p.product.name,
+          subtitle: p.product.code,
+          detail: p.product.detail,
+          remark: p.product.remark,
+          type: 'product',
+        })),
+      }));
+    curTypeNode.children = noNameWork.concat(withNameWork);
+  }
 }

 const quotationStore = useQuotationStore();
@ -354,6 +475,7 @@ watch(
 </script>

 <template>
+  {{ convertToTree() }}
  <div class="column full-height no-wrap">
    <!-- SEC: stat -->
    <section class="text-body-2 q-mb-xs flex items-center">
@ -618,8 +740,8 @@ watch(
                :date="new Date(n.createdAt).toLocaleString()"
                :amount="n.workerCount"
                :customer-name="
-                  n.customerBranch.registerName ||
-                  `${n.customerBranch.firstName || '-'} ${n.customerBranch.lastName}`
+                  n.customerBranch?.registerName ||
+                  `${n.customerBranch?.firstName || '-'} ${n.customerBranch?.lastName || ''}`
                "
                :reporter="n.actorName"
                :total-price="n.totalPrice"
@ -1252,6 +1374,8 @@ watch(

  <ProductServiceForm
    v-model="pageState.productServiceModal"
+    v-model:nodes="nodes"
+    @open="openProductServiceTree"
  ></ProductServiceForm>
 </template>

--- a/src/pages/05_quotation/ProductServiceForm.vue
+++ b/src/pages/05_quotation/ProductServiceForm.vue
@ -1,8 +1,14 @@
 <script lang="ts" setup>
 import DialogForm from 'src/components/DialogForm.vue';
-import { ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import TreeView from 'src/components/shared/TreeView.vue';

+import {
+  ProductGroup,
+  ProductList,
+  Service,
+} from 'src/stores/product-service/types';
+
 type Node = {
  [key: string]: any;
  opened?: boolean;
@ -13,114 +19,25 @@ type Node = {
  children?: Node[];
 };

+defineEmits<{
+  (e: 'open', node: Node, ancestorNode?: Node[]): void;
+}>();
+
 const model = defineModel<boolean>();
 const inputSearch = defineModel<string>('inputSearch');
+const nodes = defineModel<Node[]>('nodes', { default: [] });

 const splitterModel = ref(20);
-const subSplitterModel = ref(100);
+const infoDrawer = ref(false);
 const currentTab = ref('1');
 const currentSelectedType = ref<'group' | 'type' | 'work' | 'product' | ''>('');
 const currentSelectedNode = ref<Node[]>([]);

-const nodes = ref([
-  {
-    title: 'กลุ่มสินค้าและบริการที่ 1',
-    subtitle: 'TG01000000001',
-    selected: false,
-    type: 'group',
-    children: [
-      {
-        title:
-          'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
-        subtitle: 'TG01000000001',
-        selected: false,
-        type: 'type',
-        children: [
-          {
-            title: 'งาน 1',
-            subtitle: 'TG01000000001',
-            selected: false,
-            type: 'work',
-            children: [
-              {
-                title: 'สินค้า 1',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 2',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 3',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-
-  {
-    title: 'กลุ่มสินค้าและบริการที่ 2',
-    subtitle: 'TG01000000001',
-    selected: false,
-    type: 'group',
-    children: [
-      {
-        title:
-          'บริการค่าบริการและค่าดำเนินงานยื่นแบบคำร้องขอนำเข้า MOU (Demand)',
-        subtitle: 'TG01000000001',
-        selected: false,
-        type: 'type',
-        children: [
-          {
-            title: 'งาน 1',
-            subtitle: 'TG01000000001',
-            selected: false,
-            type: 'work',
-            children: [
-              {
-                title: 'สินค้า 1',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 2',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-              {
-                title: 'สินค้า 3',
-                subtitle: 'TG01000000001',
-                selected: false,
-                type: 'product',
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-]);
-
 function triggerInfo() {
-  if (subSplitterModel.value === 100) {
-    subSplitterModel.value = 60;
-  } else {
-    subSplitterModel.value = 100;
-  }
+  infoDrawer.value = !infoDrawer.value;
 }

-function toggleSelected(node: Node) {
+function toggleSelected(node: Node, ancestorNode?: Node[]) {
  if (currentSelectedNode.value.includes(node)) {
    currentSelectedNode.value = [];
  } else {
@ -143,6 +60,7 @@ watch(
 <template>
  <div>
    <DialogForm
+      bg-color="var(--surface-2)"
      v-model:modal="model"
      :title="$t('general.list', { msg: $t('productService.title') })"
      :submit-label="$t('general.select', { msg: $t('productService.title') })"
@ -206,17 +124,10 @@ watch(
            </header>

            <article class="col">
-              <q-splitter
-                disable
-                v-model="subSplitterModel"
-                :limits="[0, 100]"
-                before-class="overflow-hidden"
-                after-class="overflow-hidden"
-                style="height: 100%"
-              >
+              <div style="height: 100%" class="relative-position scroll">
                <!-- SEC: tree view body -->
-                <template v-slot:before>
-                  <section class="full-height column">
+                <section>
+                  <div class="full-height column">
                    <span
                      v-if="false"
                      class="col column items-center justify-center app-text-muted"
@ -232,13 +143,18 @@ watch(
                        })
                      }}
                    </span>
-                    <article>
+                    <article v-else>
                      <TreeView
                        class="full-width q-pt-sm"
                        v-model:nodes="nodes"
                        expandable
                        selectable
                        :selected-node="currentSelectedNode"
+                        @open="
+                          (n, ancestor) => {
+                            $emit('open', n, ancestor);
+                          }
+                        "
                        @select="toggleSelected"
                        :decoration="[
                          {
@ -268,12 +184,16 @@ watch(
                        ]"
                      />
                    </article>
-                  </section>
-                </template>
+                  </div>
+                </section>

                <!-- SEC: info -->
-                <template v-slot:after>
-                  <section class="column no-wrap surface-1 full-height">
+                <transition name="info-slide">
+                  <div
+                    v-if="infoDrawer"
+                    class="column no-wrap surface-1 full-height absolute-right"
+                    style="z-index: 1; width: 20vw"
+                  >
                    <span
                      v-if="currentSelectedType === ''"
                      class="col column items-center justify-center app-text-muted"
@ -381,9 +301,9 @@ watch(
                        </span>
                      </div>
                    </article>
-                  </section>
-                </template>
-              </q-splitter>
+                  </div>
+                </transition>
+              </div>
            </article>
          </section>
        </template>
@ -391,3 +311,19 @@ watch(
    </DialogForm>
  </div>
 </template>
+<style scoped>
+.info-slide-enter-from {
+  transform: translate(100%, 0);
+}
+
+.info-slide-enter-active {
+  transition: all 0.1s ease-in-out;
+}
+
+.info-slide-leave-active {
+  transition: all 0.1s ease-in-out;
+}
+.info-slide-leave-to {
+  transform: translate(100%, 0);
+}
+</style>
--- a/src/stores/product-service/types.ts
+++ b/src/stores/product-service/types.ts
@ -35,6 +35,7 @@ export interface WorkCreate {
 }

 export interface Work {
+  productOnWork: ProductOnWork[];
  id: string;
  order: number;
  name: string;