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

added different pages for editing

Browse Source
This commit is contained in:
Elmar Kresse
2023-10-17 21:07:15 +02:00
parent 0923d51b7e
commit 941e95f194
10 changed files with 354 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/src/components/ModuleSelection.vue
View File

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { computed, PropType, Ref, ref, watch } from "vue";
import { computed, ComputedRef, PropType, Ref, ref, watch } from "vue";
import { Module } from "../model/module.ts";
import moduleStore from "../store/moduleStore";
import router from "../router";
@ -11,24 +11,27 @@ const props = defineProps({
},
});
type ModuleWithSelection = { module: Module; selected: boolean };
// array of modules with boolean if selected with getter and setter
const modulesWithSelection: Ref<{ module: Module; selected: boolean }[]> = ref(
props.modules.map((module) => {
return { module: module, selected: false };
const modulesWithSelection: Ref<ModuleWithSelection[]> = ref(
props.modules.map((propModule) => {
return { module: propModule, selected: moduleStore().modules.some((module: Module) =>
module.isEqual ? module.isEqual(propModule) : false,
), };
}),
);
//watch for changes in modules prop and update modulesWithSelection
function selectedModules(): Module[] {
return modulesWithSelection.value
const selectedModules: ComputedRef<Module[]> = computed(() =>
modulesWithSelection.value
.filter((module) => module.selected)
.map((module) => module.module);
}
.map((module) => module.module),
);
const currentModules = computed(() => props.modules);
function selectAllModules(selection: boolean) {
console.debug(props.modules);
modulesWithSelection.value.forEach((module) => {
module.selected = selection;
});
@ -36,10 +39,6 @@ function selectAllModules(selection: boolean) {
const allSelected: Ref<boolean> = ref(true);
computed(() => {
return modulesWithSelection.value.every((module) => module.selected);
});
watch(currentModules, (newValue: Module[]) => {
modulesWithSelection.value = newValue.map((module) => {
return { module: module, selected: false };
@ -47,33 +46,30 @@ watch(currentModules, (newValue: Module[]) => {
});
function nextStep() {
console.log("next step");
selectedModules().forEach((module) => {
selectedModules.value.forEach((module: Module) => {
moduleStore().addModule(module);
});
console.debug(moduleStore().modules);
router.push("/additional-modules");
}
</script>
<template>
<div class="flex flex-column card-container">
<div class="flex flex-column card-container mx-8 mt-2">
<div class="flex align-items-center justify-content-center mb-3">
<Button
:disabled="selectedModules().length < 1"
:disabled="selectedModules.length < 1"
class="col-4 justify-content-center"
@click="nextStep()"
>Next Step
</Button>
</div>
<div class="flex align-items-center justify-content-center">
<DataView :value="modulesWithSelection" data-key="name">
<DataView :value="modulesWithSelection" data-key="module">
<template #header>
<div class="flex justify-content-between flex-wrap">
<div class="flex align-items-center justify-content-center">
<h3>Modules - {{ selectedModules().length }}</h3>
<h3>Modules - {{ selectedModules.length }}</h3>
</div>
<div class="flex align-items-center justify-content-center">
<ToggleButton
@ -96,20 +92,18 @@ function nextStep() {
<template #list="slotProps">
<div class="col-12">
<div
class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4"
class="flex flex-column xl:flex-row xl:align-items-start p-2 gap-4"
>
<div
class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4"
class="flex flex-column sm:flex-row justify-content-between align-items-center flex-1 gap-4"
>
<div
class="flex flex-column align-items-center sm:align-items-start gap-3"
class="flex flex-column align-items-center justify-content-center sm:align-items-start gap-3"
>
<div class="text-2xl">
{{ slotProps.data.module.name }}
</div>
<p class="text-lg">{{ slotProps.data.module.name }}</p>
</div>
<div
class="flex sm:flex-column align-items-center sm:align-items-end gap-3 sm:gap-2"
class="flex sm:flex-column justify-content-center sm:align-items-end gap-3 sm:gap-2"
>
<ToggleButton
v-model="modulesWithSelection[slotProps.index].selected"
@ -135,4 +129,4 @@ function nextStep() {
width: 50rem;
}
}
</style>
</style>