feat: Update LuggageView with resizable table component and API integ…

…ration

web/src/views/home/GoodsView.vue

@@ -1,13 +1,12 @@
 <script lang="tsx" setup>
-import { createOrderAPI } from "@/apis/orders";
 import { getTypesCountStatistic } from "@/apis/statistic";
-import { getTicketResponse } from "@/types/ticket";
 import { Pagination } from "@/types/types";
 import { getHeightWithoutHeader } from "@/utils/responsive";
 import { onMounted, ref, Ref } from "vue";
 import ResizableTableComp from "@/components/ResizableTableComp.vue";
 import { TableV2FixedDir } from "element-plus";
 import { buyGoodsAPI, getGoodsListAPI } from "@/apis/goods";
+import { getGoodsResponse } from "@/types/goods";
 
 const columns = [
   {
@@ -72,7 +71,7 @@ const columns = [
   },
 ];
 
-const data: Ref<getTicketResponse[]> = ref<getTicketResponse[]>([]);
+const data: Ref<getGoodsResponse[]> = ref<getGoodsResponse[]>([]);
 const page = ref(1);
 const allCount = ref(0);
 

web/src/views/home/LuggageView.vue

@@ -1,3 +1,107 @@
-<script lang="ts" setup></script>
+<script lang="tsx" setup>
+import { getTypesCountStatistic } from "@/apis/statistic";
+import { Pagination } from "@/types/types";
+import { getHeightWithoutHeader } from "@/utils/responsive";
+import { onMounted, ref, Ref } from "vue";
+import ResizableTableComp from "@/components/ResizableTableComp.vue";
+import { getMyLuggagesListAPI } from "@/apis/luggages";
+import { getLuggageResponse } from "@/types/luggage";
+import { DateRender } from "@/utils/date";
 
-<template></template>
+const columns = [
+  {
+    key: "id",
+    title: "ID",
+    dataKey: "id",
+    width: 50,
+    align: "center",
+  },
+  {
+    key: "weight",
+    title: "Weight",
+    dataKey: "weight",
+    width: 100,
+    align: "center",
+  },
+  {
+    key: "staffId",
+    title: "Staff ID",
+    dataKey: "staffId",
+    width: 100,
+    align: "center",
+  },
+  {
+    key: "createdAt",
+    title: "Created At",
+    dataKey: "createdAt",
+    width: 150,
+    align: "center",
+    cellRenderer: ({
+      cellData: dateOfDeparture,
+    }: {
+      cellData: string;
+    }): string => DateRender(dateOfDeparture),
+  },
+  {
+    key: "updatedAt",
+    title: "Updated At",
+    dataKey: "updatedAt",
+    width: 150,
+    align: "center",
+    cellRenderer: ({
+      cellData: dateOfDeparture,
+    }: {
+      cellData: string;
+    }): string => DateRender(dateOfDeparture),
+  },
+];
+
+const data: Ref<getLuggageResponse[]> = ref<getLuggageResponse[]>([]);
+const page = ref(1);
+const allCount = ref(0);
+
+const getData = async (page: number) => {
+  const pagination: Pagination = {
+    page: page - 1,
+    count: 10,
+  };
+  const res = await getMyLuggagesListAPI(pagination);
+  if (!res || res.length === 0) return;
+  data.value = res;
+};
+
+onMounted(async () => {
+  allCount.value = await getTypesCountStatistic("luggage");
+  console.log(allCount.value);
+  getData(page.value);
+});
+const headerlessHeight = ref(0);
+onMounted(async () => {
+  headerlessHeight.value = getHeightWithoutHeader();
+  window.addEventListener("resize", () => {
+    headerlessHeight.value = getHeightWithoutHeader();
+  });
+});
+const paginationChange = (v: number) => {
+  getData(v);
+  page.value = v;
+};
+</script>
+
+<template>
+  <div :style="'height:' + headerlessHeight + 'px'" class="ml-72 p-8">
+    <div
+      class="mx-auto p-8 max-w-screen-xl w-full h-full shadow-lg rounded-lg flex flex-col space-y-4"
+    >
+      <h1 class="text-2xl font-bold">Luggage Details</h1>
+      <div class="flex-grow h-full w-full">
+        <ResizableTableComp
+          :columns="columns"
+          :data="data"
+          :total="allCount"
+          @paginationChange="paginationChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>