feat: add more function

src/pages/05_quotation/MainPage.vue

@@ -12,6 +12,8 @@ import {
 
 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);
 
@@ -69,6 +71,14 @@ 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,
@@ -81,10 +91,12 @@ 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;
 }
@@ -93,16 +105,93 @@ 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"