feat: CRUD ProductType

src/pages/04_product-service/MainPage.vue

@@ -1,24 +1,32 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
+import AddButton from 'components/AddButton.vue';
 import ProductCardComponent from 'src/components/04_product-service/ProductCardComponent.vue';
 import StatCard from 'components/StatCardComponent.vue';
 import NewProductCardCompoent from 'components/04_product-service/NewProductCardComponent.vue';
 import DrawerInfo from 'src/components/DrawerInfo.vue';
 import BasicInformation from 'src/components/04_product-service/BasicInformation.vue';
 import FormDialog from 'src/components/FormDialog.vue';
+import TooltipComponent from 'components/TooltipComponent.vue';
+
 import { dialog } from 'src/stores/utils';
 
 import useProductServiceStore from 'src/stores/product-service';
 import {
-  ProductGroup,
+  Product,
-  ProductGroupCreate,
+  ProductCreate,
-  ProductGroupUpdate,
+  ProductUpdate,
 } from 'src/stores/product-service/types';
 
 const productServiceStore = useProductServiceStore();
 
 const {
+  createProductServiceType,
+  editProductServiceType,
+  deleteProductServiceType,
+  fetchListProductServiceType,
+
   fetchStatsProductGroup,
   fetchListProductService,
   createProductService,
@@ -49,12 +57,13 @@ const stat = ref<
   {
     count: number;
     label: string;
-    color: 'pink' | 'purple' | 'green';
+    color: 'pink' | 'purple' | 'green' | 'orange';
   }[]
 >([
-  { count: 5, label: 'branchHQLabel', color: 'pink' },
+  { count: 0, label: 'productAndService', color: 'pink' },
-  { count: 4, label: 'branchLabel', color: 'purple' },
+  { count: 0, label: 'productAndServiceType', color: 'purple' },
-  { count: 12, label: 'branchLabel', color: 'green' },
+  { count: 0, label: 'service', color: 'orange' },
+  { count: 0, label: 'service', color: 'green' },
 ]);
 
 import { useI18n } from 'vue-i18n';
@@ -71,11 +80,12 @@ const groupName = ref<string>('งาน MOU');
 const dialogProductServiceType = ref<boolean>(false);
 const dialogTotalProduct = ref<boolean>(false);
 const productMode = ref<'group' | 'type' | 'service' | 'product'>('group');
-const productGroup = ref<ProductGroup[]>();
+const productGroup = ref<Product[]>();
+const productType = ref<Product[]>();
 
 const previousValue = ref();
 
-const formData = ref<ProductGroupCreate>({
+const formData = ref<ProductCreate>({
   remark: '',
   detail: '',
   name: '',
@@ -83,9 +93,39 @@ const formData = ref<ProductGroupCreate>({
 });
 
 const currentId = ref<string>('');
+const currentIdType = ref<string>('');
+
+async function fetchListType() {
+  const res = await fetchListProductServiceType({
+    productGroupId: currentId.value,
+  });
+
+  if (res) {
+    productType.value = res;
+  }
+}
+
+async function fetchListGroups() {
+  const res = await fetchListProductService();
+
+  if (res) {
+    productGroup.value = res;
+  }
+}
 
 async function submitType() {
-  console.log(formData.value);
+  if (drawerInfo.value) {
+    await editProductServiceType(currentIdType.value, {
+      ...formData.value,
+      productGroupId: currentId.value,
+    });
+    drawerInfo.value = false;
+  } else {
+    dialogInputForm.value = false;
+    await createProductServiceType(currentId.value, formData.value);
+  }
+
+  await fetchListType();
 }
 
 const itemCard = [
@@ -112,12 +152,16 @@ async function deleteProductById() {
     action: async () => {
       if (productMode.value === 'type') {
         // Product Type
+        await deleteProductServiceType(currentIdType.value);
+        await fetchListType();
       } else {
         // Product Group
-        await deleteProductService(currentId.value);
+        const res = await deleteProductService(currentId.value);
+        if (res) {
+          stat.value[0].count = stat.value[0].count - 1;
+        }
         await fetchListGroups();
       }
-      console.log('deleted');
       drawerInfo.value = false;
     },
     cancel: () => {},
@@ -125,8 +169,6 @@ async function deleteProductById() {
 }
 
 function undoProductGroup() {
-  console.log('dasd');
-
   formData.value = {
     remark: previousValue.value.remark,
     detail: previousValue.value.detail,
@@ -136,7 +178,7 @@ function undoProductGroup() {
   isEdit.value = false;
 }
 
-function assignFormData(data: ProductGroup) {
+function assignFormData(data: Product) {
   previousValue.value = data;
 
   formData.value = {
@@ -162,28 +204,56 @@ async function submitGroup() {
   if (drawerInfo.value) {
     await editProductService(currentId.value, formData.value);
   } else {
-    await createProductService(formData.value);
+    const res = await createProductService(formData.value);
+
+    if (res) {
+      stat.value[0].count = stat.value[0].count + 1;
+    }
   }
 
   await fetchListGroups();
   clearForm();
 }
 
-async function fetchListGroups() {
-  const res = await fetchListProductService();
-
-  if (res) {
-    productGroup.value = res;
-  }
-}
-
 onMounted(async () => {
+  const resStatsGroup = await fetchStatsProductGroup();
+  stat.value[0].count = resStatsGroup ?? 0;
+
   await fetchListGroups();
 });
 </script>
 
 <template>
-  <div v class="column q-pb-lg">
+  <div class="column q-pb-lg">
+    <div class="row text-h6 text-weight-bold q-mb-md">
+      {{ $t('productAndService') }}
+    </div>
+
+    <AppBox
+      v-if="productGroup?.length === 0"
+      class="column"
+      :no-padding="productGroup?.length !== 0"
+      bordered
+      style="min-height: 70vh"
+    >
+      <template>
+        <TooltipComponent
+          class="self-end"
+          title="messageTooltipNoProduct"
+          caption="messageTooltipProductCreate"
+          imgSrc="personnel-table-"
+        />
+
+        <div class="row items-center justify-center" style="flex-grow: 1">
+          <AddButton
+            label="productCreate"
+            @trigger="() => (dialogInputForm = true)"
+          />
+        </div>
+      </template>
+    </AppBox>
+
+    <div v-if="productGroup?.length !== 0">
       <div
         v-if="productMode === 'group'"
         class="text-h6 text-weight-bold q-mb-md"
@@ -202,10 +272,13 @@ onMounted(async () => {
         </div>
         <div class="text-h6 app-text-muted q-mx-sm">/</div>
         <div class="text-h6 text-weight-bold">
-        {{ $t('ProductAndServiceType') }}
+          {{ $t('productAndServiceType') }}
         </div>
       </div>
-    <div v-else-if="productMode === 'service'" class="row items-center q-mb-md">
+      <div
+        v-else-if="productMode === 'service'"
+        class="row items-center q-mb-md"
+      >
         <q-btn
           round
           icon="mdi-arrow-left"
@@ -244,13 +317,13 @@ onMounted(async () => {
             v-if="productMode === 'type'"
             class="text-h6 text-weight-bold q-mb-md"
           >
-          {{ $t('ProductAndServiceType') }}
+            {{ $t('productAndServiceType') }}
           </div>
           <div
             v-else-if="productMode === 'group'"
             class="text-h6 text-weight-bold q-mb-md"
           >
-          {{ $t('ProductAndServiceAll') }}
+            {{ $t('productAndServiceAll') }}
           </div>
           <div
             v-if="productMode === 'group' || productMode === 'type'"
@@ -309,25 +382,30 @@ onMounted(async () => {
         <div class="row q-col-gutter-lg">
           <div
             :class="`${$q.screen.gt.sm ? 'col-3' : $q.screen.gt.xs ? 'col-6' : 'col-12'}`"
-          v-for="(v, i) in productMode ? productGroup : productGroup"
+            v-for="(v, i) in productMode === 'type'
+              ? productType
+              : productGroup"
             :key="i"
           >
             <ProductCardComponent
               v-if="productMode === 'type'"
-            :title="cardTypeData.title"
+              :title="v.name"
-            :subtitle="cardTypeData.subtitle"
+              :subtitle="v.code"
-            :date="cardTypeData.date"
+              :date="new Date(v.updatedAt)"
               :status="v.status"
-            :color="cardTypeData.color"
+              color="var(--purple-11)"
               @view-detail="
                 () => {
-                currentId = v.id;
+                  clearForm();
+                  currentIdType = v.id;
+                  assignFormData(v);
+                  isEdit = false;
                   drawerInfo = true;
                 }
               "
               @on-click="
                 () => {
-                currentId = v.id;
+                  currentIdType = v.id;
                   productMode = 'service';
                 }
               "
@@ -341,15 +419,20 @@ onMounted(async () => {
               color="var(--pink-6)"
               @view-detail="
                 () => {
+                  clearForm();
                   assignFormData(v);
+                  isEdit = false;
                   currentId = v.id;
+
                   drawerInfo = true;
                 }
               "
               @on-click="
-              () => {
+                async () => {
                   currentId = v.id;
+                  console.log(v.id);
                   productMode = 'type';
+                  await fetchListType();
                 }
               "
             />
@@ -359,15 +442,25 @@ onMounted(async () => {
           >
             <NewProductCardCompoent
               v-if="productMode === 'type'"
-            :label="$t('ProductAndServiceType')"
+              :label="$t('productAndServiceType')"
               :isType="true"
-            @on-click="() => (dialogInputForm = true)"
+              @on-click="
+                () => {
+                  clearForm();
+                  dialogInputForm = true;
+                }
+              "
             />
             <NewProductCardCompoent
               v-else-if="productMode === 'group'"
-            :label="$t('ProductAndService')"
+              :label="$t('productAndService')"
               :isType="false"
-            @on-click="() => (dialogInputForm = true)"
+              @on-click="
+                () => {
+                  clearForm();
+                  dialogInputForm = true;
+                }
+              "
             />
           </div>
         </div>
@@ -415,16 +508,13 @@ onMounted(async () => {
         </div>
       </AppBox>
     </div>
+  </div>
 
   <FormDialog
     v-model:modal="dialogInputForm"
     noAddress
-    :title="$t('customerEmployerAdd')"
+    :title="$t('addProduct')"
-    :submit="
+    :submit="() => (productMode === 'type' ? submitType() : submitGroup())"
-      () => {
-        submitGroup();
-      }
-    "
     :close="() => {}"
   >
     <template #information>

src/stores/product-service/index.ts

@@ -1,8 +1,119 @@
 import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
-import { ProductGroup, ProductGroupCreate, ProductGroupUpdate } from './types';
+import { Product, ProductCreate, ProductUpdate } from './types';
 
 const useProductServiceStore = defineStore('api-product-service', () => {
+  async function fetchStatsProductType() {
+    const res = await api.get('/product-type/stats');
+
+    if (!res) return false;
+
+    if (res.status === 200) {
+      return res.data;
+    }
+  }
+
+  async function fetchListProductServiceByIdType(groupId: string) {
+    const res = await api.get<Product & { productGroupId: string }>(
+      `/product-type/${groupId}`,
+    );
+
+    if (!res) return false;
+
+    if (res.status === 200) {
+      return res.data;
+    }
+  }
+
+  async function fetchListProductServiceType(
+    opts?: { query?: string; productGroupId?: string },
+    flow?: {
+      sessionId: string;
+      refTransactionId: string;
+      transactionId: string;
+    },
+  ) {
+    const params = new URLSearchParams();
+
+    for (const [k, v] of Object.entries(opts || {})) {
+      v !== undefined && params.append(k, v.toString());
+    }
+
+    const query = params.toString();
+
+    const res = await api.get<(Product & { productGroupId: string })[]>(
+      `/product-type${(params && '?'.concat(query)) || ''}`,
+      {
+        headers: {
+          'X-Session-Id': flow?.sessionId,
+          'X-Rtid': flow?.refTransactionId,
+          'X-Tid': flow?.transactionId,
+        },
+      },
+    );
+
+    if (!res) return false;
+    if (res.status === 200) {
+      return res.data;
+    }
+
+    return false;
+  }
+
+  async function createProductServiceType(id: string, data: ProductCreate) {
+    const { code, ...payload } = data;
+
+    const res = await api.post<ProductCreate & { productGroupId: string }>(
+      '/product-type',
+      {
+        productGroupId: id,
+        ...payload,
+      },
+    );
+
+    if (!res) return false;
+
+    if (res.status === 200) {
+      return res.data;
+    }
+
+    return false;
+  }
+
+  async function editProductServiceType(
+    groupId: string,
+    data: ProductUpdate & { productGroupId: string },
+  ) {
+    const { code, ...payload } = data;
+
+    const res = await api.put<ProductUpdate & { productGroupId: string }>(
+      `/product-type/${groupId}`,
+      {
+        ...payload,
+      },
+    );
+
+    if (!res) return false;
+
+    if (res.status === 200) {
+      return res.data;
+    }
+
+    return false;
+  }
+
+  async function deleteProductServiceType(groupId: string) {
+    const res = await api.delete(`/product-type/${groupId}`);
+
+    if (!res) return false;
+
+    if (res.status === 200) {
+      return res.data;
+    }
+
+    return false;
+  }
+
   async function fetchStatsProductGroup() {
     const res = await api.get('/product-group/stats');
 
@@ -14,7 +125,7 @@ const useProductServiceStore = defineStore('api-product-service', () => {
   }
 
   async function fetchListProductServiceById(groupId: string) {
-    const res = await api.get<ProductGroup>(`/product-group/${groupId}`);
+    const res = await api.get<Product>(`/product-group/${groupId}`);
 
     if (!res) return false;
 
@@ -39,7 +150,7 @@ const useProductServiceStore = defineStore('api-product-service', () => {
 
     const query = params.toString();
 
-    const res = await api.get<ProductGroup[]>(
+    const res = await api.get<Product[]>(
       `/product-group${(params && '?'.concat(query)) || ''}`,
       {
         headers: {
@@ -58,26 +169,26 @@ const useProductServiceStore = defineStore('api-product-service', () => {
     return false;
   }
 
-  async function createProductService(data: ProductGroupCreate) {
+  async function createProductService(data: ProductCreate) {
     const { code, ...payload } = data;
 
-    const res = await api.post<ProductGroupCreate>('/product-group', {
+    const res = await api.post<ProductCreate>('/product-group', {
       ...payload,
     });
 
     if (!res) return false;
 
-    if (res.status === 200) {
+    if (res.status === 201) {
       return res.data;
     }
 
     return false;
   }
 
-  async function editProductService(groupId: string, data: ProductGroupUpdate) {
+  async function editProductService(groupId: string, data: ProductUpdate) {
     const { code, ...payload } = data;
 
-    const res = await api.put<ProductGroupUpdate>(`/product-group/${groupId}`, {
+    const res = await api.put<ProductUpdate>(`/product-group/${groupId}`, {
       ...payload,
     });
 
@@ -103,6 +214,13 @@ const useProductServiceStore = defineStore('api-product-service', () => {
   }
 
   return {
+    fetchStatsProductType,
+    fetchListProductServiceByIdType,
+    fetchListProductServiceType,
+    createProductServiceType,
+    editProductServiceType,
+    deleteProductServiceType,
+
     fetchStatsProductGroup,
     fetchListProductServiceById,
     fetchListProductService,

src/stores/product-service/types.ts

@@ -1,6 +1,6 @@
 import { Status } from '../types';
 
-export type ProductGroup = {
+export type Product = {
   id: string;
   code: string;
   name: string;
@@ -13,14 +13,14 @@ export type ProductGroup = {
   updatedAt: string;
 };
 
-export interface ProductGroupCreate {
+export interface ProductCreate {
   remark: string;
   detail: string;
   name: string;
   code: string;
 }
 
-export interface ProductGroupUpdate {
+export interface ProductUpdate {
   remark: string;
   detail: string;
   name: string;