feat: reverse tree convert

src/pages/05_quotation/MainPage.vue

@@ -19,6 +19,7 @@ import { CustomerBranchCreate } from 'stores/customer/types';
 import { Employee } from 'src/stores/employee/types';
 
 // NOTE: Import Components
+import TreeView from 'src/components/shared/TreeView.vue';
 import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -26,7 +27,6 @@ import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import FormAbout from 'src/components/05_quotation/FormAbout.vue';
 import SelectZone from 'src/components/shared/SelectZone.vue';
 import PersonCard from 'src/components/shared/PersonCard.vue';
-import ProductServiceForm from './ProductServiceForm.vue';
 import CreateButton from 'src/components/AddButton.vue';
 import ItemCard from 'src/components/ItemCard.vue';
 import DialogForm from 'components/DialogForm.vue';
@@ -34,11 +34,6 @@ import { AddButton } from 'src/components/button';
 import SideMenu from 'components/SideMenu.vue';
 
 import { dialogCreateCustomerItem } from 'src/pages/03_customer-management/constant';
-import {
-  ProductGroup,
-  Product,
-  Service,
-} from 'src/stores/product-service/types';
 
 import { SaveButton } from 'components/button';
 
@@ -54,6 +49,7 @@ import {
   useEmployeeForm,
 } from 'src/pages/03_customer-management/form';
 import QuotationView from './QuotationView.vue';
+import { quotationProductTree } from './utils';
 
 const quotationFormStore = useQuotationForm();
 const customerFormStore = useCustomerForm();
@@ -633,6 +629,38 @@ watch(() => pageState.currentTab, fetchQuotationList);
               />
             </div>
           </div>
+          (
+          <TreeView
+            v-if="quotationFormData.productServiceList"
+            class="full-width q-py-sm q-px-md"
+            :nodes="quotationProductTree(quotationFormData?.productServiceList)"
+            expandable
+            selectable
+            :selected-node="[]"
+            @select=""
+            @delete=""
+            :decoration="[
+              {
+                level: 0,
+                icon: 'mdi-server-outline',
+                bg: 'hsla(var(--orange-5-hsl)/0.1)',
+                fg: 'var(--orange-5)',
+              },
+              {
+                level: 1,
+                icon: 'mdi-briefcase-outline',
+                bg: 'hsla(var(--violet-11-hsl)/0.1)',
+                fg: 'var(--violet-11)',
+              },
+              {
+                level: 2,
+                icon: 'mdi-shopping-outline',
+                bg: 'hsla(var(--teal-10-hsl)/0.1)',
+                fg: 'var(--teal-10)',
+              },
+            ]"
+          />
+          )
         </article>
 
         <!-- SEC: footer content -->
@@ -1056,33 +1084,6 @@ watch(() => pageState.currentTab, fetchQuotationList);
       </div>
     </div>
   </DialogForm>
-
-  <ProductServiceForm
-    v-model="pageState.productServiceModal"
-    v-model:product-group="productGroup"
-    v-model:product-list="productList"
-    v-model:service-list="serviceList"
-    @select-group="
-      async (id) => {
-        await getAllService(id);
-        await getAllProduct(id);
-      }
-    "
-    @submit="
-      (node) => {
-        const nodeRecursive = (
-          v: (typeof node)[number],
-        ): typeof node | (typeof node)[number] => {
-          if (v.checked && v.children) return v.children.flatMap(nodeRecursive);
-          if (v.checked) return v;
-          return [];
-        };
-
-        const filtered = node.flatMap(nodeRecursive);
-        console.log(JSON.parse(JSON.stringify(filtered.map((v) => v.value))));
-      }
-    "
-  ></ProductServiceForm>
 </template>
 
 <style scoped></style>