jws-frontend/src/pages/05_quotation/MainPage.vue

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { productTreeDecoration } from './constants';
import useProductServiceStore from 'src/stores/product-service';

import {
  ProductGroup,
  ProductList,
  Service,
} from 'src/stores/product-service/types';

import QuotationForm from './QuotationForm.vue';
import TreeView from 'src/components/shared/TreeView.vue';
import { AddButton } from 'src/components/button';
import MainButton from 'src/components/button/MainButton.vue';

const dialog = ref(true);

const nodes = ref([
  {
    title: 'กลุ่มสินค้าและบริการที่ 1',
    subtitle: 'TG01000000001',
    selected: false,
    children: [
      {
        title: 'งานที่ 1',
        subtitle: 'TG01000000001',
        selected: false,
        children: [
          {
            title: 'สินค้า 1',
            subtitle: 'TG01000000001',
            selected: false,
          },
          {
            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',
            subtitle: 'TG01000000001',
            selected: false,
          },
        ],
      },
    ],
  },
]);
const productServiceStore = useProductServiceStore();

type ProductGroupId = string;

const productGroup = ref<ProductGroup[]>([]);
const productList = ref<Partial<Record<ProductGroupId, ProductList[]>>>({});
const serviceList = ref<Partial<Record<ProductGroupId, Service[]>>>({});

type Id = string;
const product = ref<Record<Id, ProductList>>({});
const service = ref<Record<Id, Service>>({});

const selectedGroup = ref<ProductGroup | null>(null);
const selectedGroupSub = ref<'product' | 'service' | null>(null);
const selectedProductServiceId = ref('');

onMounted(async () => {
  const ret = await productServiceStore.fetchListProductService({
    page: 1,
    pageSize: 9999,
  });
  if (ret) productGroup.value = ret.result;
});

async function getAllProduct(
  groupId: string,
  opts?: { force?: false; page?: number; pageSize?: number },
) {
  selectedGroupSub.value = 'product';
  if (!opts?.force && productList.value[groupId] !== undefined) return;
  const ret = await productServiceStore.fetchListProduct({
    page: opts?.page ?? 1,
    pageSize: opts?.pageSize ?? 9999,
    productGroupId: groupId,
  });
  if (ret) productList.value[groupId] = ret.result;
}

async function getAllService(
  groupId: string,
  opts?: { force?: false; page?: number; pageSize?: number },
) {
  selectedGroupSub.value = 'service';
  if (!opts?.force && serviceList.value[groupId] !== undefined) return;
  const ret = await productServiceStore.fetchListService({
    page: opts?.page ?? 1,
    pageSize: opts?.pageSize ?? 9999,
    productGroupId: groupId,
  });
  if (ret) serviceList.value[groupId] = ret.result;
}

async function getProduct(id: string, force = false) {
  selectedGroupSub.value = 'product';
  selectedProductServiceId.value = id;
  if (!force && product.value[id] !== undefined) return;
  const ret = await productServiceStore.fetchListProductById(id);
  if (ret) product.value[id] = ret;
}

async function getService(id: string, force = false) {
  selectedGroupSub.value = 'service';
  selectedProductServiceId.value = id;
  if (!force && service.value[id] !== undefined) return;
  const ret = await productServiceStore.fetchListServiceById(id);
  if (ret) service.value[id] = ret;
}

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
}
</script>

<template>
  <div v-for="item in productGroup" class="row items-center">
    {{ item.name }}
    {{ item.code }}
    <AddButton icon-only @click="selectedGroup = item" />
  </div>

  <template v-if="selectedGroup">
    <MainButton
      icon="mdi-check"
      color="var(--blue-6-hsl)"
      @click="getAllProduct(selectedGroup.id)"
    >
      Product
    </MainButton>
    <MainButton
      icon="mdi-check"
      color="var(--blue-6-hsl)"
      @click="getAllService(selectedGroup.id)"
    >
      Service
    </MainButton>

    <div
      v-if="productList[selectedGroup.id]"
      v-for="item in productList[selectedGroup.id]"
      class="row items-center"
    >
      {{ item.name }}
      {{ item.code }}
      <AddButton icon-only @click="getProduct(item.id)" />
    </div>

    <div
      v-if="serviceList[selectedGroup.id]"
      v-for="item in serviceList[selectedGroup.id]"
      class="row items-center"
    >
      {{ item.name }}
      {{ item.code }}
      <AddButton icon-only @click="getService(item.id)" />
    </div>

    <template
      v-if="selectedGroupSub === 'service' && service[selectedProductServiceId]"
    >
      {{ service[selectedProductServiceId] }}
    </template>
    <template
      v-if="selectedGroupSub === 'product' && product[selectedProductServiceId]"
    >
      {{ product[selectedProductServiceId] }}
    </template>
  </template>

  <div class="surface-1 rounded full-height q-pa-md">
    <TreeView
      :decoration="productTreeDecoration"
      v-model:nodes="nodes"
      expandable
    />
  </div>
  <!-- <ImageUploadDialog
    v-model:dialog-state="isOpen"
    v-model:file="file"
    ref="imageUploadDialog"
    clear-button
  >
    <template #error>
      <div style="display: flex; align-items: center; justify-content: center">
        <h1>Fallback</h1>
      </div>
    </template>
  </ImageUploadDialog>

  <button @click="isOpen = !isOpen">Open</button>
  <button @click="imageUploadDialog?.browse()">Click Me</button>
  <div
    style="
      height: 100vh;
      background: green;
      width: 100%;
      color: white;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    "
    id="aaa"
  >
    My AAA
  </div>
  <div
    style="
      height: 100vh;
      background: red;
      width: 100%;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
    "
    id="my-anchor"
  >
    My Menu
  </div> -->
  <QuotationForm v-model:dialog-state="dialog" readonly />
</template>

<style scoped></style>