Merge pull request #13 from story2Dev/develop

improve(product): add form validate
story2Dev · Dec 18, 2023 · 6bce70d · 6bce70d
2 parents 21575cf + 989cf49
commit 6bce70d
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 34 deletions.
diff --git a/composables/use-product.ts b/composables/use-product.ts
@@ -1,10 +1,31 @@
+import type { FormRules } from 'naive-ui';
 import { DELETE_PRODUCT, INSERT_PRODUCT, UPDATE_PRODUCT } from '~/gql/mutate';
 import { PRODUCTS_QUERY } from '~/gql/query';
 import type { Product, ProductInput, Variable } from '~/types';
 
 export const useProduct = () => {
   const { client } = useApolloClient();
 
+  const rules: FormRules = {
+    name: {
+      required: true,
+      message: 'Please input product name',
+      trigger: 'blur',
+    },
+    price: {
+      required: true,
+      message: 'Please input price',
+      trigger: ['input'],
+      type: 'number',
+    },
+    cost: {
+      required: true,
+      message: 'Please input cost',
+      trigger: ['input'],
+      type: 'number',
+    },
+  };
+
   const frm = useState<Partial<Product>>('frm', () => ({
     name: '',
     sku: '',
@@ -112,5 +133,6 @@ export const useProduct = () => {
     insert,
     update,
     remove,
+    rules,
   };
 };
diff --git a/locales/en-US.json b/locales/en-US.json
@@ -26,6 +26,7 @@
   "no_data": "No data",
   "sign_out": "Sign out",
   "type": "Type",
+  "success": "Success",
   "auth": {
     "invalid_credentials": "Invalid credentials",
     "signin_failed": "Sign in failed",
@@ -39,6 +40,7 @@
     "stock_trackable": "Stock trackable",
     "price": "Price",
     "cost": "Cost",
-    "stock": "Stock"
+    "stock": "Stock",
+    "add_success": "Add product success"
   }
 }
diff --git a/pages/products/add.vue b/pages/products/add.vue
@@ -2,13 +2,13 @@
   <div>
     <n-card :title="$t('products.add')">
       <div class="grid gap-4 md:grid-cols-2">
-        <article>
+        <n-form ref="formRef" :model="frm" :rules="rules">
           <n-form-item path="name" :label="$t('name')">
             <n-input v-model:value="frm.name" :placeholder="$t('name')" />
           </n-form-item>
 
           <div class="grid grid-cols-2 gap-4">
-            <n-form-item path="price" :label="$t('products.price')">
+            <n-form-item path="unitPrice" :label="$t('products.price')">
               <n-input-number
                 v-model:value="frm.unitPrice"
                 :parse="inputParse"
@@ -80,7 +80,7 @@
             </template>
             {{ $t('more') }}
           </n-button>
-        </article>
+        </n-form>
         <article>
           <h3 class="mb-2">{{ $t('image') }}</h3>
           <ul class="flex gap-4">
@@ -109,43 +109,56 @@
 </template>
 
 <script setup lang="ts">
+import type { FormInst } from 'naive-ui';
 import { TermGroupID } from '~/constants';
 
 useHead({
   title: 'Add Product',
 });
-const { frm, insert } = useProduct();
 
-async function handleAdd() {
-  const {
-    categoryId,
-    typeId,
-    unitPrice = 0,
-    sku = '',
-    barcode = '',
-    description = '',
-    stockQuantity = 0,
-    stockTrackable = false,
-    name = '',
-    cost = 0,
-  } = frm.value;
-  const { errors, product } = await insert({
-    categoryId,
-    typeId,
-    unitPrice,
-    name,
-    sku,
-    barcode,
-    description,
-    stockQuantity,
-    stockTrackable,
-    cost,
-  });
+const notification = useNotification();
+const { t } = useI18n();
+const { frm, insert, rules } = useProduct();
+const formRef = ref<FormInst | null>(null);
 
-  console.log({ errors, product });
+function handleAdd() {
+  formRef.value?.validate(async (errors) => {
+    if (!errors) {
+      const {
+        categoryId,
+        typeId,
+        unitPrice = 0,
+        sku = '',
+        barcode = '',
+        description = '',
+        stockQuantity = 0,
+        stockTrackable = false,
+        name = '',
+        cost = 0,
+      } = frm.value;
+      const { errors, product } = await insert({
+        categoryId,
+        typeId,
+        unitPrice,
+        name,
+        sku,
+        barcode,
+        description,
+        stockQuantity,
+        stockTrackable,
+        cost,
+      });
 
-  if (!errors) {
-    useRouter().push(`/products/${product.id}`);
-  }
+      if (!errors) {
+        notification.success({
+          title: t('success'),
+          description: t('products.add_success'),
+        });
+        useRouter().push(`/products/${product.id}`);
+      }
+    } else {
+      console.log(errors);
+    }
+  });
 }
 </script>