HTWK/htwkalender
1
1
Fork 0
mirror of https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git synced 2025-08-10 13:43:49 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat:#15 added selection in datatable to store and removed selectAll

Browse Source
This commit is contained in:
masterElmar
2023-11-29 01:51:20 +01:00
parent 6666faf802
commit d41e6f4a3c
6 changed files with 56 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
frontend/src/view/AdditionalModules.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import { defineAsyncComponent, ref, Ref } from "vue";
import { defineAsyncComponent, ref, Ref, watch} from "vue";
import { Module } from "../model/module.ts";
import { fetchAllModules } from "../api/fetchCourse.ts";
import moduleStore from "../store/moduleStore.ts";
@@ -17,6 +17,11 @@ const fetchedModules = async () => {
};
const store = moduleStore();
const selectedModules: Ref<Module[]> = ref(
store.getAllModules()
);
const modules: Ref<Module[]> = ref([]);
const filters = ref({
course: {
@@ -41,13 +46,29 @@ fetchedModules().then(
(modules.value = data.map((module: Module) => {
return module;
})),
);
).finally(() => {
// init selected modules from store with fetched modules and set selected modules
selectedModules.value = store.getAllModules().filter((module: Module) => {
return modules.value.some((m: Module) => m.uuid === module.uuid);
});
});
watch(selectedModules, () => {
//add missing modules to store
selectedModules.value.forEach((module: Module) => {
if (!store.getAllModules().some((m: Module) => m.uuid === module.uuid)) {
store.addModule(module);
}
});
//remove modules from store that are not selected anymore
store.getAllModules().forEach((module: Module) => {
if (!selectedModules.value.some((m: Module) => m.uuid === module.uuid)) {
store.removeModule(module);
}
});
});
async function nextStep() {
//selectedModules.value.forEach((module: Module) => {
// moduleStore().addModule(module);
//});
await router.push("/rename-modules");
}
@@ -75,59 +96,6 @@ async function showInfo(module: Module) {
},
});
}
/*
const display = (module: Module) => module.name + " (" + module.course + ")";
const selectAll = ref(false);
const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
if (event.checked) {
additionalModules.value = new Map(
modules.value
.filter((module: Module) => !store.hasModule(module))
.map((module: Module) => [module.uuid, module]),
);
store.overwriteModules(modules.value);
} else {
store.overwriteModules(
store.getAllModules().filter(
(module: Module) => !additionalModules.value.has(module.uuid)
)
);
additionalModules.value.clear();
}
selectAll.value = event.checked;
};
function selectChange(event : MultiSelectChangeEvent) {
let wasSelected: boolean = additionalModules.value.has(event.value.uuid);
if (event.originalEvent.target.) {
additionalModules.value.set(event.value.uuid, event.value);
} else {
additionalModules.value.delete(event.value.uuid);
}
selectAll.value = store.countModules() === modules.value.length;
}
function itemsLabel(selectedModules: Module[]): string {
return (selectedModules ? selectedModules.length : 0) != 1
? t("additionalModules.modules")
: t("additionalModules.module");
}
function itemsLabelWithNumber(selectedModules: Module[]): string {
return (
selectedModules.length.toString() +
" " +
itemsLabel(selectedModules) +
" " +
t("additionalModules.dropDownFooterSelected")
);
}
*/
</script>
<template>
@@ -141,6 +109,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
<DynamicDialog />
<DataTable
v-model:filters="filters"
v-model:selection="selectedModules"
:value="modules"
data-key="uuid"
paginator
@@ -153,9 +122,11 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
loading-icon="pi pi-spinner"
:show-gridlines="true"
:striped-rows="true"
:select-all="false"
class="w-10"
>
<Column selection-mode="multiple"> </Column>
<Column selection-mode="multiple">
</Column>
<Column
field="course"
@@ -223,60 +194,7 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
</div>
</template>
</DataTable>
<!--
<MultiSelect
:model-value="store.getAllModules()"
@update:model-value="store.overwriteModules($event.value)"
:max-selected-labels="1"
:option-label="display"
:options="modules"
:select-all="selectAll"
:virtual-scroller-options="{ itemSize: 70 }"
class="custom-multiselect"
filter
:placeholder="$t('additionalModules.dropDown')"
:auto-filter-focus="true"
:show-toggle-all="false"
:selected-items-label="itemsLabelWithNumber(selectedModules)"
@change="selectChange()"
placeholder="Select additional modules"
@change="selectChange($event)"
@selectall-change="onSelectAllChange($event)"
>
<template #option="slotProps">
<div class="flex justify-content-between w-full">
<div class="flex align-items-center justify-content-center">
<p class="text-1xl white-space-normal p-mb-0">
{{ display(slotProps.option) }}
</p>
</div>
<div class="flex align-items-center justify-content-center ml-2">
<Button
class="small-button"
icon="pi pi-info"
severity="secondary"
rounded
outlined
aria-label="Information"
class="small-button"
@click.stop="showInfo(slotProps.option)"
></Button>
<DynamicDialog />
</div>
</div>
</template>
<template #footer>
<div class="py-2 px-3">
<b>{{ selectedModules ? selectedModules.length : 0 }}</b>
item{{
(selectedModules ? selectedModules.length : 0) > 1 ? "s" : ""
}}
selected.
</div>
</template>
</MultiSelect>
--></div>
</div>
<div class="flex align-items-center justify-content-center h-4rem m-2">
<Button @click="nextStep()">{{
$t("additionalModules.nextStep")
@@ -299,4 +217,8 @@ function itemsLabelWithNumber(selectedModules: Module[]): string {
height: 2rem;
padding: 0;
}
:deep(.p-filter-column .p-checkbox .p-component) {
display: none !important;
}
</style>