HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2025-08-03 10:19:14 +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> <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 { Module } from "../model/module.ts";
import { fetchAllModules } from "../api/fetchCourse.ts"; import { fetchAllModules } from "../api/fetchCourse.ts";
import moduleStore from "../store/moduleStore.ts"; import moduleStore from "../store/moduleStore.ts";
@@ -16,17 +16,12 @@ import { useI18n } from "vue-i18n";
const dialog = useDialog(); const dialog = useDialog();
const { t } = useI18n({ useScope: "global" }); const { t } = useI18n({ useScope: "global" });
const fetchedModules = async () => {
return await fetchAllModules();
};
const store = moduleStore(); const store = moduleStore();
if (store.isEmpty()) { if (store.isEmpty()) {
router.replace("/"); router.replace("/");
} }
const mobilePage = inject("mobilePage") as Ref<boolean>; const mobilePage = inject("mobilePage") as Ref<boolean>;
const modules: Ref<Module[]> = ref(new Array(10));
const filters = ref({ const filters = ref({
course: { course: {
value: null, value: null,
@@ -46,12 +41,20 @@ const filters = ref({
}, },
}); });
fetchedModules().then( const loadedModules: Ref<Module[]> = ref(new Array(10));
(data) =>
(modules.value = data.map((module: Module) => { const loadingData = ref(true);
return module;
})), onMounted(() => {
); fetchAllModules().then(
(data) =>
(loadedModules.value = data.map((module: Module) => {
return module;
})),
).finally(() => {
loadingData.value = false;
});
});
const ModuleInformation = defineAsyncComponent( const ModuleInformation = defineAsyncComponent(
() => import("./ModuleInformation.vue"), () => import("./ModuleInformation.vue"),
@@ -95,7 +98,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
id="dt-responsive-table" id="dt-responsive-table"
v-model:filters="filters" v-model:filters="filters"
:selection="store.getAllModules()" :selection="store.getAllModules()"
:value="modules" :value="loadedModules"
data-key="uuid" data-key="uuid"
paginator paginator
:rows="10" :rows="10"
@@ -110,8 +113,6 @@ function unselectModule(event: DataTableRowUnselectEvent) {
'{totalRecords}' '{totalRecords}'
" "
filter-display="row" filter-display="row"
:loading="!modules.length"
loading-icon="pi pi-spinner"
:show-gridlines="true" :show-gridlines="true"
:striped-rows="true" :striped-rows="true"
:select-all="false" :select-all="false"
@@ -120,7 +121,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@row-unselect="unselectModule" @row-unselect="unselectModule"
> >
<Column selection-mode="multiple"> <Column selection-mode="multiple">
<template #loading> <template #body v-if="loadingData">
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
@@ -139,7 +140,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@input="filterCallback()" @input="filterCallback()"
/> />
</template> </template>
<template #loading> <template #body v-if="loadingData">
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
@@ -157,7 +158,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@input="filterCallback()" @input="filterCallback()"
/> />
</template> </template>
<template #loading> <template #body v-if="loadingData">
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
@@ -175,7 +176,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@input="filterCallback()" @input="filterCallback()"
/> />
</template> </template>
<template #loading> <template #body v-if="loadingData">
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
@@ -185,7 +186,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
:show-clear-button="false" :show-clear-button="false"
:show-filter-menu="false" :show-filter-menu="false"
> >
<template #loading> <template #body v-if="loadingData">
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>
@@ -201,7 +202,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
@click.stop="showInfo(slotProps.data)" @click.stop="showInfo(slotProps.data)"
></Button> ></Button>
</template> </template>
<template #loading> <template #body v-if="loadingData">
<Skeleton></Skeleton> <Skeleton></Skeleton>
</template> </template>
</Column> </Column>

6
package-lock.json generated Normal file
View File

@@ -0,0 +1,6 @@
{
"name": "htwkalender",
"lockfileVersion": 3,
"requires": true,
"packages": {}
}