improve(ui): add product detail page

composables/use-product.ts

@@ -1,6 +1,6 @@
 import type { FormRules } from 'naive-ui';
 import { DELETE_PRODUCT, INSERT_PRODUCT, UPDATE_PRODUCT } from '~/gql/mutate';
-import { PRODUCTS_QUERY } from '~/gql/query';
+import { PRODUCTS_QUERY, PRODUCT_QUERY } from '~/gql/query';
 import type { Product, ProductInput, Variable } from '~/types';
 
 export const useProduct = () => {
@@ -61,6 +61,27 @@ export const useProduct = () => {
     }
   }
 
+  async function fetchProduct(id: string) {
+    try {
+      const { data, errors } = await client.query({
+        query: PRODUCT_QUERY,
+        variables: {
+          id,
+        },
+      });
+      if (errors) {
+        throw new Error(`[useProduct]: fetchProduct errors: ${errors}`);
+      }
+
+      return {
+        product: data?.product as Product,
+        errors,
+      };
+    } catch (error) {
+      throw new Error(`[useProduct]: fetchProduct error: ${error}`);
+    }
+  }
+
   async function fetchProducts(variables?: Partial<Variable>) {
     try {
       const { items, errors } = await getProducts(variables);
@@ -155,5 +176,6 @@ export const useProduct = () => {
     update,
     remove,
     fetchProducts,
+    fetchProduct,
   };
 };

gql/query/product-query.ts

@@ -38,3 +38,36 @@ export const PRODUCTS_QUERY = gql`
     }
   }
 `;
+
+export const PRODUCT_QUERY = gql`
+  query products($id: uuid!) {
+    product: products_by_pk(id: $id) {
+      id
+      name
+      sku
+      barcode
+      description
+      cost
+      unitPrice: unit_price
+      stockQuantity: stock_quantity
+      stockTrackable: stock_trackable
+      typeId: type_id
+      categoryId: category_id
+      unitId: unit_id
+      parentId: parent_id
+      thumbnail
+      createdAt: created_at
+      updatedAt: updated_at
+      category: term {
+        id
+        name
+      }
+      type: termByTypeId {
+        name
+      }
+      unit: termByUnitId {
+        name
+      }
+    }
+  }
+`;

locales/en-US.json

@@ -34,6 +34,9 @@
   "confirm": "Confirm",
   "confirm_delete": "Are you sure to delete?",
   "confirm_delete_multiple": "Are you sure to delete all selected items?",
+  "detail": "Detail",
+  "no": "No",
+  "yes": "Yes",
   "auth": {
     "invalid_credentials": "Invalid credentials",
     "signin_failed": "Sign in failed",

pages/products/[id]/edit.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>Edit</div>
+</template>
+
+<script setup lang="ts"></script>

pages/products/[id]/index.vue

@@ -1,5 +1,79 @@
 <template>
-  <div> Product ID </div>
+  <div>
+    <n-descriptions label-placement="top">
+      <template #header>
+        <div class="flex justify-between">
+          <span>{{ $t('detail') }}</span>
+          <nav>
+            <nuxt-link :to="`/products/${id}/edit`">
+              <n-button circle quaternary type="primary">
+                <template #icon>
+                  <Icon name="system-uicons:pen" />
+                </template>
+              </n-button>
+            </nuxt-link>
+            <n-button circle quaternary type="error">
+              <template #icon>
+                <Icon name="system-uicons:trash" />
+              </template>
+            </n-button>
+          </nav>
+        </div>
+      </template>
+      <n-descriptions-item>
+        <n-avatar size="large" :src="frm.thumbnail" />
+      </n-descriptions-item>
+      <n-descriptions-item :label="$t('name')" :span="2">
+        {{ frm.name }}
+      </n-descriptions-item>
+      <n-descriptions-item :label="$t('category')">
+        {{ frm.category?.name }}
+      </n-descriptions-item>
+      <n-descriptions-item :label="$t('type')">
+        {{ frm.type?.name }}
+      </n-descriptions-item>
+      <n-descriptions-item :label="$t('unit')">
+        {{ frm.unit?.name }}
+      </n-descriptions-item>
+      <n-descriptions-item :label="$t('products.price')">
+        {{ $n(frm.unitPrice || 0) }}
+      </n-descriptions-item>
+      <n-descriptions-item :label="$t('products.cost')">
+        {{ $n(frm.cost || 0) }}
+      </n-descriptions-item>
+      <n-descriptions-item :label="$t('products.stock')">
+        {{ $n(frm.stockQuantity || 0) }}
+      </n-descriptions-item>
+      <n-descriptions-item :label="$t('products.stock_trackable')">
+        {{ frm.stockTrackable ? $t('yes') : $t('no') }}
+      </n-descriptions-item>
+
+      <n-descriptions-item :label="$t('description')" :span="3">
+        {{ frm.description || '-' }}
+      </n-descriptions-item>
+      <n-descriptions-item :label="$t('products.sku')">
+        {{ frm.sku || '-' }}
+      </n-descriptions-item>
+      <n-descriptions-item :label="$t('products.barcode')">
+        {{ frm.sku || '-' }}
+      </n-descriptions-item>
+    </n-descriptions>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const { frm, fetchProduct } = useProduct();
+
+const { id } = useRoute().params;
+
+const { errors, product } = await fetchProduct(`${id}`);
+if (!errors) {
+  frm.value = {
+    ...product,
+  };
+
+  useHead({
+    title: `${product.name}`,
+  });
+}
+</script>

pages/products/index.vue

@@ -98,16 +98,13 @@
               <td>{{ $n(item.cost || 0) }}</td>
               <td>
                 <div class="invisible flex justify-end group-hover:visible">
-                  <n-button
-                    circle
-                    quaternary
-                    type="primary"
-                    @click="setEdit(item)"
-                  >
-                    <template #icon>
-                      <Icon name="system-uicons:pen" />
-                    </template>
-                  </n-button>
+                  <nuxt-link :to="`/products/${item.id}/edit`">
+                    <n-button circle quaternary type="primary">
+                      <template #icon>
+                        <Icon name="system-uicons:pen" />
+                      </template>
+                    </n-button>
+                  </nuxt-link>
                   <n-button
                     circle
                     quaternary