changes

app/components/imports/AddProductVariantForm.vue

@@ -1,20 +1,33 @@
 <script setup>
 import InputNumber from "@/components/common/InputNumber.vue";
+import { omitBy } from "es-toolkit";
 
-const { $insertapi } = useNuxtApp();
+const props = defineProps({
+  productId: Number,
+});
 
+const emit = defineEmits(["created"]);
+
+const { $empty, $insertapi } = useNuxtApp();
 const isPending = ref(false);
 const body = ref({
-  product: null,
+  product: props.productId,
   price: null,
   internal_storage: null,
   ram: null,
   color: null,
-  note: null,
+  note: "",
 });
 
+watch(
+  () => props.productId,
+  (newVal) => {
+    body.value.product = props.productId;
+  },
+);
+
 function selected(field, data) {
-  if (field === "price") {
+  if (data === null || field === "price") {
     body.value[field] = data;
   } else {
     body.value[field] = data.id;
@@ -23,38 +36,21 @@ function selected(field, data) {
 
 async function createProductVariant() {
   isPending.value = true;
-  const res = await $insertapi("Product_Variant", body.value);
+  const trimmedBody = omitBy(body.value, $empty);
+  const res = await $insertapi("Product_Variant", trimmedBody);
   isPending.value = false;
+  if (res !== "error") {
+    emit("created");
+  }
 }
 </script>
 
 <template>
   <div>
-    <h1 class="subtitle is-4">AddProductVariantForm</h1>
+    <h1 class="subtitle">Thêm phiên bản</h1>
     <form class="fixed-grid has-12-cols">
       <div class="grid">
-        <div class="cell is-col-span-8">
-          <div class="field">
-            <label class="label">Sản phẩm</label>
-            <SearchBox
-              v-bind="{
-                api: 'product',
-                field: 'name',
-                column: ['name'],
-                first: true,
-                placeholder: 'Sản phẩm',
-                addon: {
-                  component: 'imports/AddProductForm',
-                  width: '90%',
-                  height: 'auto',
-                  title: 'Thêm sản phẩm',
-                },
-              }"
-              @option="selected('product', $event)"
-            />
-          </div>
-        </div>
-        <div class="cell is-col-span-4">
+        <div class="cell is-col-span-3">
           <div class="field">
             <label class="label">Đơn giá</label>
             <div class="control">
@@ -70,15 +66,16 @@ async function createProductVariant() {
             </div>
           </div>
         </div>
-        <div class="cell is-col-span-4">
+        <div class="cell is-col-span-3">
           <div class="field">
             <label class="label">Màu sắc</label>
             <SearchBox
               v-bind="{
-                api: 'color',
+                api: 'Color',
                 field: 'name',
                 column: ['name'],
                 first: true,
+                clearable: true,
                 placeholder: 'Màu sắc',
                 addon: {
                   component: 'imports/addons/AddColor',
@@ -91,7 +88,7 @@ async function createProductVariant() {
             />
           </div>
         </div>
-        <div class="cell is-col-span-4">
+        <div class="cell is-col-span-3">
           <div class="field">
             <label class="label">RAM</label>
             <SearchBox
@@ -100,6 +97,7 @@ async function createProductVariant() {
                 field: 'code',
                 column: ['code'],
                 first: true,
+                clearable: true,
                 placeholder: 'RAM',
                 addon: {
                   component: 'imports/addons/AddRAM',
@@ -112,7 +110,7 @@ async function createProductVariant() {
             />
           </div>
         </div>
-        <div class="cell is-col-span-4">
+        <div class="cell is-col-span-3">
           <div class="field">
             <label class="label">Bộ nhớ trong</label>
             <SearchBox
@@ -121,6 +119,7 @@ async function createProductVariant() {
                 field: 'code',
                 column: ['code'],
                 first: true,
+                clearable: true,
                 placeholder: 'Bộ nhớ trong',
                 addon: {
                   component: 'imports/addons/AddInternalStorage',
@@ -148,11 +147,14 @@ async function createProductVariant() {
         <div class="cell is-col-span-12">
           <button
             :class="['button is-primary', { 'is-loading': isPending }]"
-            :disabled="Object.values(body).every((v) => v === null)"
+            :disabled="Object.values(body).every($empty)"
             @click.prevent="createProductVariant"
           >
             <span class="icon">
-              <Icon name="material-symbols:add-2-rounded" />
+              <Icon
+                name="material-symbols:add-rounded"
+                :size="18"
+              />
             </span>
             <span>Thêm phiên bản</span>
           </button>