fix: handle virtual device

Author: ngyngcphu

components/app/Checkout/DeviceKindTable/column.ts

@@ -5,36 +5,51 @@ import type { AugmentedColumnDef } from '~/components/common/DataTable/column';
 export function createColumns ({
   onDeviceKindLinkClick,
 }: {
-  onDeviceKindLinkClick: (id: string) => void,
+  onDeviceKindLinkClick: (id: string) => void;
 }): AugmentedColumnDef<DeviceKindInCartList>[] {
   return [
     {
       id: 'id',
       title: 'Mã loại thiết bị',
       cell: ({ row }) =>
-        h(
-          'p',
-          { class: 'text-normal pl-3' },
-          [row.original.id.toUpperCase()],
-        ),
+        h('p', { class: 'text-normal pl-3' }, [row.original.id.toUpperCase()]),
     },
     {
       id: 'name',
       title: 'Tên loại thiết bị',
       cell: ({ row }) =>
         h(
           'p',
-          { class: 'line-clamp-2 text-slate-500 text-normal leading-6 font-normal' },
+          {
+            class:
+              'line-clamp-2 text-slate-500 text-normal leading-6 font-normal',
+          },
           row.original.name,
         ),
     },
+    {
+      id: 'category',
+      title: 'Phân nhóm',
+      cell: ({ row }) =>
+        h(
+          'p',
+          {
+            class:
+              'line-clamp-2 text-slate-500 text-normal leading-6 font-normal',
+          },
+          row.original.category,
+        ),
+    },
     {
       id: 'quantity',
       title: 'SL',
       cell: ({ row }) =>
         h(
           'p',
-          { class: 'line-clamp-2 text-slate-500 text-right text-normal leading-6 font-normal' },
+          {
+            class:
+              'line-clamp-2 text-slate-500 text-center text-normal leading-6 font-normal',
+          },
           row.original.quantity,
         ),
     },
@@ -44,7 +59,10 @@ export function createColumns ({
       cell: ({ row }) =>
         h(
           'div',
-          { class: 'flex justify-end items-center text-lg hover:cursor-pointer', onClick: () => onDeviceKindLinkClick(row.original.id) },
+          {
+            class: 'flex justify-end items-center text-lg hover:cursor-pointer',
+            onClick: () => onDeviceKindLinkClick(row.original.id),
+          },
           h(Icon, { name: 'i-heroicons-arrow-top-right-on-square' }),
         ),
     },

components/app/Checkout/DeviceKindTable/index.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
   cart: {
     id: string;
     name: string;
+    category: string;
     deviceIds: string[];
   }[],
 }>();
@@ -28,6 +29,7 @@ async function fetchData (offset: number, length: number, options: { desc?: bool
   let deviceKinds = props.cart.map((deviceKind) => ({
     id: deviceKind.id,
     name: deviceKind.name,
+    category: deviceKind.category,
     quantity: deviceKind.deviceIds.length,
   }));
   if (options.sortField) {
@@ -45,5 +47,8 @@ async function fetchData (offset: number, length: number, options: { desc?: bool
 </script>
 
 <template>
-  <DataTable :key="cart.flatMap(({ deviceIds }) => deviceIds).join('-')" :selectable="false" :searchable="false" :qrable="false" :fetch-fn="fetchData" :delete-fn="deleteData" :columns="createColumns({ onDeviceKindLinkClick }) as AugmentedColumnDef<unknown>[]" />
+  <DataTable
+:key="cart.flatMap(({ deviceIds }) => deviceIds).join('-')" :selectable="false" :searchable="false"
+    :qrable="false" :fetch-fn="fetchData" :delete-fn="deleteData"
+    :columns="createColumns({ onDeviceKindLinkClick }) as AugmentedColumnDef<unknown>[]" />
 </template>

components/app/Checkout/DeviceKindTable/schema.ts

@@ -4,6 +4,7 @@ import type { Static } from '@sinclair/typebox';
 export const DeviceKindInCartList = Type.Object({
   id: Type.String(),
   name: Type.String(),
+  category: Type.String(),
   quantity: Type.Number(),
 });
 

components/app/NavBar.vue

@@ -1,8 +1,11 @@
 <template>
   <nav
     class="bg-tertiary-darker flex justify-center md:justify-start md:pl-28 text-white items-stretch text-normal md:text-lg">
-    <NuxtLink class="flex items-center cursor-pointer h-16 px-2 sm:px-5 hover:bg-primary-darker" href="/devices"> Thiết bị </NuxtLink>
-    <button class="cursor-pointer h-16 px-2 sm:px-5 hover:bg-primary-darker"> Phòng thí nghiệm </button>
+    <NuxtLink class="flex items-center cursor-pointer h-16 px-2 sm:px-5 hover:bg-primary-darker" href="/devices"> Thiết
+      bị </NuxtLink>
+    <NuxtLink class="flex items-center cursor-pointer h-16 px-2 sm:px-5 hover:bg-primary-darker" href="/admin/labs">
+      Phòng thí nghiệm
+    </NuxtLink>
     <button class="cursor-pointer h-16 px-2.5 sm:px-5 hover:bg-primary-darker"> Bài viết </button>
     <button class="cursor-pointer h-16 px-2.5 sm:px-5 hover:bg-primary-darker"> Quy định </button>
     <button class="cursor-pointer h-16 px-2.5 sm:px-5 hover:bg-primary-darker"> Liên hệ </button>

composables/states.ts

@@ -1,6 +1,6 @@
 export const useLab = () => {
   const lab = useState<{ id: string }>('lab', () => ({
-    id: '015bd698-f8fb-4672-a43e-4e6fa64305ea',
+    id: '16824ad6-5ffd-4c90-80d2-a1d70f068cf1',
   }));
 
   return {

nuxt.config.ts

@@ -17,7 +17,8 @@ export default defineNuxtConfig({
   auth: {
     isEnabled: true,
     disableServerSideAuth: false,
-    baseURL: 'http://localhost:3000/api/auth',
+    baseURL:
+      'https://scoring-sponsored-newark-driven.trycloudflare.com/api/auth',
     provider: {
       type: 'authjs',
     },
@@ -73,4 +74,7 @@ export default defineNuxtConfig({
       title: 'Labsyncro',
     },
   },
+  devServer: {
+    host: '0.0.0.0',
+  },
 });

pages/admin/borrows/form.vue

@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import moment from 'moment';
-import { deviceKindService, receiptService, userService } from '~/services';
+import { deviceKindService, receiptService, userService, deviceService } from '~/services';
 
 const route = useRoute();
 
+const { lab } = useLab();
+
 const currentDeviceKindId = ref<string | null>(null);
 
 const devicesInCart = ref<{
   id: string;
   name: string;
+  category: string;
   deviceIds: string[];
 }[]>([]);
 
@@ -40,6 +43,7 @@ async function addDevice ({ kind, id }: { kind: string, id: string }) {
   devicesInCart.value.push({
     id: kind,
     name: deviceKindMeta.name,
+    category: deviceKindMeta.categoryName,
     deviceIds: [id],
   });
 }
@@ -126,9 +130,11 @@ const handleVirtualKeyboardDetection = async (input: string, type?: 'userId' | '
   } else if (type === 'device') {
     const deviceKindId = input.match(/\/devices\/([a-fA-F0-9]+)/)?.[1];
     const deviceId = input.match(/[?&]id=([a-fA-F0-9]+)/)![1];
+    console.log(deviceKindId, deviceId);
     const { id, status } = await deviceService.checkDevice(deviceId, lab.value.id);
     if (status === 'borrowing') {
     } else if (status === 'healthy') {
+      await addDevice({ kind: deviceKindId!, id: deviceId });
     }
   }
 };