Merge branch 'feat/add-device-page' of github.com:LabSyncro/LabSyncro into feat/devops

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/Checkout/DeviceSearchBox.vue

@@ -5,6 +5,8 @@ const emits = defineEmits<{
   'device-select': [string],
 }>();
 
+const { lab } = useLab();
+
 const searchText = ref('');
 const { isActive: isDropdownActive, setInactive } = useClick(useTemplateRef('dropdown'));
 
@@ -17,7 +19,7 @@ watch(searchText, async () => {
     searchItems.value = [];
     return;
   }
-  const data = await deviceKindService.getDeviceKinds(0, numberOfSearchItemsShown, { searchText: searchText.value || undefined, searchFields: ['device_name', 'device_id'] });
+  const data = await deviceKindService.getDeviceKindsByLabId(lab.value.id, 0, numberOfSearchItemsShown, { searchText: searchText.value || undefined, searchFields: ['device_name', 'device_id'] });
   searchItems.value = data.deviceKinds.map(({ name, mainImage, id }) => ({ id, name, image: mainImage }));
 });
 function focusNextSearchItem () {
@@ -41,18 +43,26 @@ function unfocusSearchItem () {
   <div ref="dropdown" class="relative">
     <div class="relative">
       <input
-        v-model="searchText"
+v-model="searchText"
         class="bg-white text-primary-light placeholder:text-primary-light border-2 h-11 w-[100%] pl-10 pr-3 rounded-md text-md placeholder:text-normal"
-        type="search" placeholder="Tên/Mã loại thiết bị" @keydown.down="focusNextSearchItem" @keydown.up="focusPrevSearchItem" @keydown.enter="focusedSearchItemIndex !== null && goToSearchItem(searchItems[focusedSearchItemIndex!].id)" @keydown.esc="unfocusSearchItem">
+        type="search" placeholder="Tên/Mã loại thiết bị" @keydown.down="focusNextSearchItem"
+        @keydown.up="focusPrevSearchItem"
+        @keydown.enter="focusedSearchItemIndex !== null && goToSearchItem(searchItems[focusedSearchItemIndex!].id)"
+        @keydown.esc="unfocusSearchItem">
       <Icon
-        aria-hidden class="absolute left-3 top-[12px] text-xl text-primary-dark"
+aria-hidden class="absolute left-3 top-[12px] text-xl text-primary-dark"
         name="i-heroicons-magnifying-glass" />
     </div>
 
-    <div :class="`${isDropdownActive && searchItems.length ? 'flex' : 'hidden'} flex-col gap-1 absolute bg-white p-1 mt-1 w-[120%] z-50 shadow-[0_0px_16px_-3px_rgba(0,0,0,0.3)]`">
-      <a v-for="(item, index) in searchItems" :key="item.id" :class="`px-2 text-normal p-1 flex justify-start gap-2 hover:bg-gray-100 ${focusedSearchItemIndex === index ? 'bg-secondary-light' : ''}`" @click="goToSearchItem(searchItems[index].id)">
+    <div
+      :class="`${isDropdownActive && searchItems.length ? 'flex' : 'hidden'} flex-col gap-1 absolute bg-white p-1 mt-1 w-[120%] z-50 shadow-[0_0px_16px_-3px_rgba(0,0,0,0.3)]`">
+      <a
+v-for="(item, index) in searchItems" :key="item.id"
+        :class="`px-2 text-normal p-1 flex justify-start gap-2 hover:bg-gray-100 ${focusedSearchItemIndex === index ? 'bg-secondary-light' : ''}`"
+        @click="goToSearchItem(searchItems[index].id)">
         <img :src="item.image" class="h-6 w-6 block">
-        <p class="p-1 px-2 text-nowrap bg-gray-100 border border-gray-300 rounded-md text-normal font-normal leading-none">
+        <p
+          class="p-1 px-2 text-nowrap bg-gray-100 border border-gray-300 rounded-md text-normal font-normal leading-none">
           {{ item.id.toUpperCase() }}
         </p>
         <HighlightText class="line-clamp-1" :text="item.name" :match-text="searchText || undefined" />

components/app/Checkout/DeviceSelectModal.vue

@@ -7,6 +7,8 @@ const props = defineProps<{
   selectedDevices: string[];
 }>();
 
+const { lab } = useLab();
+
 const emits = defineEmits<{
   'close-modal': [],
   'device-add': [{ kind: string, id: string }],
@@ -16,24 +18,31 @@ const emits = defineEmits<{
 const deviceKindMeta = ref<null | DeviceKindResourceDto>(null);
 watch(() => [props.kindId], async () => {
   if (props.kindId) {
-    deviceKindMeta.value = await deviceKindService.getById(props.kindId);
+    deviceKindMeta.value = await deviceKindService.getById(props.kindId, lab.value.id);
     return;
   }
   deviceKindMeta.value = null;
 });
 </script>
 
 <template>
-  <div v-if="deviceKindMeta && kindId" class="fixed z-50 top-0 left-0 w-[100vw] h-[100vh] flex justify-center items-center">
+  <div
+v-if="deviceKindMeta && kindId"
+    class="fixed z-50 top-0 left-0 w-[100vw] h-[100vh] flex justify-center items-center">
     <div class="bg-white shadow-[0_0px_16px_1px_rgba(0,0,0,0.3)] w-[400px] sm:w-[90vw] p-6">
       <div class="flex justify-between gap-3 items-center">
         <h2 class="text-lg"> {{ deviceKindMeta.name }} </h2>
-        <div class="border border-slate text-slate rounded-full flex justify-center items-center p-2 hover:cursor-pointer" @click="emits('close-modal')">
+        <div
+          class="border border-slate text-slate rounded-full flex justify-center items-center p-2 hover:cursor-pointer"
+          @click="emits('close-modal')">
           <Icon class="text-lg" aria-hidden name="i-heroicons-x-mark" />
         </div>
       </div>
       <div class="mt-6">
-        <CheckoutDeviceSelectTable :selected-devices="selectedDevices" :kind-id="kindId" @device-add="(id) => emits('device-add', { kind: props.kindId!, id })" @device-delete="(id) => emits('device-delete', { kind: props.kindId!, id})" />
+        <CheckoutDeviceSelectTable
+:selected-devices="selectedDevices" :kind-id="kindId"
+          @device-add="(id) => emits('device-add', { kind: props.kindId!, id })"
+          @device-delete="(id) => emits('device-delete', { kind: props.kindId!, id })" />
       </div>
     </div>
   </div>

components/app/Checkout/DeviceSelectTable/index.vue

@@ -13,8 +13,10 @@ const emits = defineEmits<{
   'device-delete': [string],
 }>();
 
+const { lab } = useLab();
+
 async function fetchData (offset: number, length: number, options: { desc?: boolean, sortField?: string, searchText?: string, searchFields?: string[] }): Promise<{ data: unknown[], totalPages: number }> {
-  const res = await deviceService.getByKind(props.kindId, offset, length, { searchText: options.searchText, searchFields: ['device_id'], sortField: options.sortField as any, desc: options.desc });
+  const res = await deviceService.getByKind(props.kindId, offset, length, { searchText: options.searchText, searchFields: ['device_id'], sortField: options.sortField as any, desc: options.desc }, lab.value.id);
   return {
     data: res.devices,
     totalPages: res.totalPages,
@@ -31,5 +33,7 @@ async function borrowDevice (id: string) {
 </script>
 
 <template>
-  <DataTable :selectable="false" :searchable="true" :qrable="true" :fetch-fn="fetchData" :columns="createColumns(props.selectedDevices, { deleteDevice, borrowDevice }) as AugmentedColumnDef<unknown>[]" />
+  <DataTable
+:selectable="false" :searchable="true" :qrable="true" :fetch-fn="fetchData"
+    :columns="createColumns(props.selectedDevices, { deleteDevice, borrowDevice }) as AugmentedColumnDef<unknown>[]" />
 </template>

components/app/DeviceNew/PrintQRCode.vue

@@ -26,7 +26,7 @@ const generateDevices = async (): Promise<{ id: string; url: string; name: strin
   return props.listDeviceIds.map(deviceId => {
     return {
       id: `${deviceKindId.toLowerCase()}/${deviceId}`,
-      url: `http://localhost:3000/devices/${deviceKindId.toLowerCase()}`,
+      url: `http://localhost:3000/devices/${deviceKindId.toLowerCase()}?id=${deviceId}`,
       name: deviceKindName,
     };
   });

components/app/DeviceTable/index.vue

@@ -3,6 +3,8 @@ import { deviceKindService } from '~/services';
 import { columns } from './column';
 import type { AugmentedColumnDef } from '~/components/common/DataTable/column';
 
+const router = useRouter();
+
 async function deleteData (ids: string[]) {
   await deviceKindService.deleteByIds(ids);
 }
@@ -17,5 +19,8 @@ async function fetchData (offset: number, length: number, options: { desc?: bool
 </script>
 
 <template>
-  <DataTable :selectable="true" :searchable="true" :qrable="true" :add-trigger-fn="() => {}" :fetch-fn="fetchData" :delete-fn="deleteData" :columns="columns as AugmentedColumnDef<unknown>[]" />
+  <DataTable
+:selectable="true" :searchable="true" :qrable="true"
+    :add-trigger-fn="() => { router.push('/admin/devices/new') }" :fetch-fn="fetchData" :delete-fn="deleteData"
+    :columns="columns as AugmentedColumnDef<unknown>[]" />
 </template>

components/app/LabAdminTable/column.ts

@@ -0,0 +1,113 @@
+import type { LabManagedByAdmin } from './schema';
+import type { AugmentedColumnDef } from '~/components/common/DataTable/column';
+import { Icon, Button } from '#components';
+
+const formatTimetable = (timetable: Record<string, string[]>) => {
+  const days: Record<string, string> = {
+    '2': 'Thứ 2',
+    '3': 'Thứ 3',
+    '4': 'Thứ 4',
+    '5': 'Thứ 5',
+    '6': 'Thứ 6',
+    '7': 'Thứ 7',
+    '8': 'Chủ nhật',
+  };
+
+  return Object.entries(timetable || {}).map(([day, slots]) => {
+    return h('div', { class: 'mb-1' }, [
+      h('span', { class: 'font-medium' }, `${days[day]}: `),
+      h('span', {}, slots.join(', ')),
+    ]);
+  });
+};
+
+export const columns: AugmentedColumnDef<LabManagedByAdmin>[] = [
+  {
+    id: 'name',
+    title: 'Tên phòng',
+    cell: ({ row }) =>
+      h(
+        'div',
+        {
+          class: 'flex items-center gap-2',
+        },
+        [
+          h(Icon, {
+            name: 'i-heroicons-beaker',
+            class: 'w-5 h-5 text-blue-500',
+          }),
+          h('span', { class: 'text-gray-700 font-medium' }, row.original.name),
+        ],
+      ),
+    enableSorting: true,
+  },
+  {
+    id: 'room',
+    title: 'Phòng',
+    cell: ({ row }) => h('span', { class: 'text-gray-600' }, row.original.room),
+    enableSorting: true,
+  },
+  {
+    id: 'faculty',
+    title: 'Khoa',
+    cell: ({ row }) =>
+      h('span', { class: 'text-gray-600' }, row.original.faculty),
+    enableSorting: true,
+  },
+  {
+    id: 'branch',
+    title: 'Cơ sở',
+    cell: ({ row }) =>
+      h('span', { class: 'text-gray-600' }, row.original.branch),
+    enableSorting: true,
+  },
+  {
+    id: 'timetable',
+    title: 'Lịch hoạt động',
+    cell: ({ row }) =>
+      h(
+        'div',
+        { class: 'text-sm text-gray-600' },
+        row.original.timetable
+          ? formatTimetable(row.original.timetable)
+          : 'Chưa có lịch',
+      ),
+  },
+  {
+    id: 'actions',
+    title: 'Thao tác',
+    cell: ({ row }) =>
+      h('div', { class: 'flex items-center gap-2' }, [
+        h(
+          Button,
+          {
+            variant: 'ghost',
+            size: 'icon',
+            onClick: () => console.log('Edit:', row.original),
+            class: 'hover:text-blue-500',
+          },
+          [
+            h(Icon, {
+              name: 'i-heroicons-pencil-square',
+              class: 'w-5 h-5',
+            }),
+          ],
+        ),
+        h(
+          Button,
+          {
+            variant: 'ghost',
+            size: 'icon',
+            onClick: () => console.log('Delete:', row.original),
+            class: 'hover:text-red-500',
+          },
+          [
+            h(Icon, {
+              name: 'i-heroicons-trash',
+              class: 'w-5 h-5',
+            }),
+          ],
+        ),
+      ]),
+  },
+];

components/app/LabAdminTable/index.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { laboratoryService } from '~/services';
+import { columns } from './column';
+import type { AugmentedColumnDef } from '~/components/common/DataTable/column';
+
+async function fetchData (offset: number, length: number, options: { desc?: boolean, sortField?: string, searchText?: string, searchFields?: string[] }): Promise<{ data: unknown[], totalPages: number }> {
+  const res = await laboratoryService.getLabsManagedByAdmin(offset, length, { searchText: options.searchText, searchFields: ['lab_name', 'location'], sortField: options.sortField as any, desc: options.desc });
+  return {
+    data: res.labs,
+    totalPages: res.totalPages,
+  };
+}
+</script>
+
+<template>
+  <DataTable
+:selectable="true" :searchable="true" :qrable="true" :fetch-fn="fetchData"
+    :columns="columns as AugmentedColumnDef<unknown>[]" />
+</template>