From f112c8c71cb63c73965ae20d3d58ba20e13af9c2 Mon Sep 17 00:00:00 2001
From: Elmar Kresse <elmar.kresse@stud.htwk-leipzig.de>
Date: Wed, 17 Jan 2024 18:50:52 +0100
Subject: [PATCH] feat:#24 added skeleton for datatable

---
 .../src/components/AdditionalModuleTable.vue  | 43 ++++++++++---------
 package-lock.json                             |  6 +++
 2 files changed, 28 insertions(+), 21 deletions(-)
 create mode 100644 package-lock.json

diff --git a/frontend/src/components/AdditionalModuleTable.vue b/frontend/src/components/AdditionalModuleTable.vue
index d9dec8f..eaf6709 100644
--- a/frontend/src/components/AdditionalModuleTable.vue
+++ b/frontend/src/components/AdditionalModuleTable.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, inject, ref, Ref } from "vue";
+import { defineAsyncComponent, inject, onMounted, ref, Ref } from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
@@ -16,17 +16,12 @@ import { useI18n } from "vue-i18n";
 const dialog = useDialog();
 const { t } = useI18n({ useScope: "global" });
 
-const fetchedModules = async () => {
-  return await fetchAllModules();
-};
-
 const store = moduleStore();
 if (store.isEmpty()) {
   router.replace("/");
 }
 
 const mobilePage = inject("mobilePage") as Ref<boolean>;
-const modules: Ref<Module[]> = ref(new Array(10));
 const filters = ref({
   course: {
     value: null,
@@ -46,12 +41,20 @@ const filters = ref({
   },
 });
 
-fetchedModules().then(
-  (data) =>
-    (modules.value = data.map((module: Module) => {
-      return module;
-    })),
-);
+const loadedModules: Ref<Module[]> = ref(new Array(10));
+
+const loadingData = ref(true);
+
+onMounted(() => {
+  fetchAllModules().then(
+    (data) =>
+      (loadedModules.value = data.map((module: Module) => {
+        return module;
+      })),
+  ).finally(() => {
+    loadingData.value = false;
+  });
+});
 
 const ModuleInformation = defineAsyncComponent(
   () => import("./ModuleInformation.vue"),
@@ -95,7 +98,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       id="dt-responsive-table"
       v-model:filters="filters"
       :selection="store.getAllModules()"
-      :value="modules"
+      :value="loadedModules"
       data-key="uuid"
       paginator
       :rows="10"
@@ -110,8 +113,6 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         '{totalRecords}'
       "
       filter-display="row"
-      :loading="!modules.length"
-      loading-icon="pi pi-spinner"
       :show-gridlines="true"
       :striped-rows="true"
       :select-all="false"
@@ -120,7 +121,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
       @row-unselect="unselectModule"
     >
       <Column selection-mode="multiple">
-        <template #loading>
+        <template #body v-if="loadingData">
           <Skeleton></Skeleton>
         </template>
       </Column>
@@ -139,7 +140,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @input="filterCallback()"
           />
         </template>
-        <template #loading>
+        <template #body v-if="loadingData">
           <Skeleton></Skeleton>
         </template>
       </Column>
@@ -157,7 +158,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @input="filterCallback()"
           />
         </template>
-        <template #loading>
+        <template #body v-if="loadingData">
           <Skeleton></Skeleton>
         </template>
       </Column>
@@ -175,7 +176,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @input="filterCallback()"
           />
         </template>
-        <template #loading>
+        <template #body v-if="loadingData">
           <Skeleton></Skeleton>
         </template>
       </Column>
@@ -185,7 +186,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         :show-clear-button="false"
         :show-filter-menu="false"
       >
-        <template #loading>
+      <template #body v-if="loadingData">
           <Skeleton></Skeleton>
         </template>
       </Column>
@@ -201,7 +202,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
             @click.stop="showInfo(slotProps.data)"
           ></Button>
         </template>
-        <template #loading>
+        <template #body v-if="loadingData">
           <Skeleton></Skeleton>
         </template>
       </Column>
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..e28da59
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "htwkalender",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}