HTWK/htwkalender-pwa
1
0
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git synced 2025-07-19 11:08:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:#24 added skeleton for datatable

Browse Source
This commit is contained in:
Elmar Kresse
2024-01-17 18:50:52 +01:00
parent b61097dc20
commit f112c8c71c
2 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/components/AdditionalModuleTable.vue
View File

@ -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>