changes

app/components/imports/AddProductForm.vue

@@ -24,9 +24,13 @@ function selected(field, data) {
   else body.value[field] = data.id;
 }
 
+const refreshData = inject("refreshData");
 async function createProduct() {
   isPending.value = true;
   const res = await $insertapi("product", body.value);
+  if (res !== "error") {
+    if (refreshData) refreshData();
+  }
   isPending.value = false;
 }
 </script>

app/components/imports/DeleteProduct.vue

@@ -0,0 +1,49 @@
+<script setup>
+import Modal from "@/components/Modal.vue";
+
+const props = defineProps({
+  product: Object,
+});
+
+const { $deleteapi } = useNuxtApp();
+const showConfirmModal = ref(null);
+
+function displayModal() {
+  showConfirmModal.value = {
+    component: "dialog/Confirm",
+    title: "Xoá sản phẩm",
+    width: "500px",
+    height: "auto",
+    vbind: {
+      content: `Bạn xác nhận xoá sản phẩm <b>${props.product.name}</b>?`,
+      onModalevent: deleteProduct,
+    },
+  };
+}
+
+const refreshData = inject("refreshData");
+async function deleteProduct() {
+  const res = await $deleteapi("product", props.product.id);
+  if (res !== "error") {
+    if (refreshData) refreshData();
+  }
+}
+</script>
+
+<template>
+  <a
+    class="has-text-danger"
+    @click="displayModal"
+  >
+    <span class="icon">
+      <Icon
+        name="material-symbols:delete-outline-rounded"
+        :size="18"
+      />
+    </span>
+    <Modal
+      v-bind="showConfirmModal"
+      @close="showConfirmModal = null"
+    />
+  </a>
+</template>

app/components/imports/DeleteProductVariant.vue

@@ -5,7 +5,6 @@ const props = defineProps({
   variant: Object,
 });
 
-const emit = defineEmits(["dynamicCompEvent"]);
 const { $deleteapi } = useNuxtApp();
 const showConfirmModal = ref(null);
 
@@ -22,11 +21,11 @@ function displayModal() {
   };
 }
 
+const refreshData = inject("refreshData");
 async function deleteVariant() {
   const res = await $deleteapi("Product_Variant", props.variant.id);
   if (res !== "error") {
-    // emit to parent, which is DataTable
-    emit("dynamicCompEvent", { type: "refresh" });
+    if (refreshData) refreshData();
   }
 }
 </script>

app/components/imports/Imports.vue

@@ -1,22 +1,22 @@
 <script setup>
-import AddProductForm from "@/components/imports/AddProductForm.vue";
 import AddProductVariant from "@/components/imports/AddProductVariant.vue";
+import Products from "@/components/imports/Products.vue";
 const menus = [
   {
-    id: "add-product",
-    name: "Tạo sản phẩm",
+    id: "product",
+    name: "Sản phẩm",
   },
   {
-    id: "add-product-variant",
-    name: "Thêm phiên bản",
+    id: "product-variant",
+    name: "Phiên bản",
   },
 ];
-const activeMenu = ref(menus[1]);
+const activeMenu = ref(menus[0]);
 </script>
 <template>
   <div class="fixed-grid has-12-cols">
     <div class="grid is-gap-4">
-      <div class="cell is-col-span-3">
+      <div class="cell is-col-span-2">
         <aside class="menu">
           <ul class="menu-list">
             <li
@@ -25,27 +25,23 @@ const activeMenu = ref(menus[1]);
             >
               <a
                 @click="activeMenu = menu"
-                :class="[
-                  'fs-13',
-                  {
-                    'is-active': activeMenu.id === menu.id,
-                  },
-                ]"
+                :class="[{ 'is-active': activeMenu.id === menu.id }]"
                 >{{ menu.name }}</a
               >
             </li>
           </ul>
         </aside>
       </div>
-      <div class="cell is-col-span-9">
-        <AddProductForm v-if="activeMenu.id === 'add-product'" />
-        <AddProductVariant v-if="activeMenu.id === 'add-product-variant'" />
+      <div class="cell is-col-span-10">
+        <Products v-if="activeMenu.id === 'product'" />
+        <AddProductVariant v-if="activeMenu.id === 'product-variant'" />
       </div>
     </div>
   </div>
 </template>
 <style scoped>
 .menu-list a {
+  font-size: 0.95em;
   --bulma-menu-list-link-padding: 0.75em 1.25em;
 
   &:not(.is-active) {

app/components/imports/Products.vue

@@ -0,0 +1,25 @@
+<script setup>
+import DataView from "@/components/datatable/DataView.vue";
+</script>
+
+<template>
+  <DataView
+    v-bind="{
+      api: 'product',
+      setting: 'products',
+      pagename: 'products',
+      params: {
+        values:
+          'id,code,name,manufacturer,manufacturer__name,os,os__name,battery,battery__code,screen,cpu,cpu__name,gpu,gpu__name,camera_system,camera_system__code,sim,sim__code,network_technology,network_technology__name,charging_technology,charging_technology__code,external_storage,external_storage__max_capacity,ip_rating,ip_rating__code,design,create_time,update_time',
+        sort: 'id',
+      },
+      timeopt: { time: 36000 },
+      modal: {
+        component: 'imports/AddProductForm',
+        title: 'Tạo sản phẩm',
+        width: '75%',
+        height: 'auto',
+      },
+    }"
+  />
+</template>