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

frontend/src/App.vue

@@ -1,13 +1,24 @@
 <script lang="ts" setup>
 import MenuBar from "./components/MenuBar.vue";
-import { RouterView } from "vue-router";
+import {RouteRecordName, RouterView} from "vue-router";
 import CalendarPreview from "./components/CalendarPreview.vue";
+import moduleStore from "@/store/moduleStore.ts";
+
+const disabledPages = ["room-finder", "faq", "imprint", "privacy-policy", "edit"];
+
+const store = moduleStore();
+
+const isDisabled = (routeName: RouteRecordName | null | undefined) => {
+  return !disabledPages.includes(routeName as string) && store.modules.size > 0
+};
+
 </script>
 
 <template>
   <MenuBar />
   <RouterView />
-  <CalendarPreview />
+  <!-- show CalendarPreview but only on specific router views -->
+  <CalendarPreview v-if="isDisabled($route.name)"/>
 </template>
 
 <style scoped></style>

frontend/src/components/CalendarPreview.vue

@@ -45,8 +45,6 @@ window.addEventListener("resize", updateMobile);
     position="bottomright"
     @update:visible="dialogVisible = $event"
   >
-    Hier könnte Ihre Werbung stehen!
-
     <DataTable
       :value="tableData"
       edit-mode="cell"

frontend/src/components/ModuleSelection.vue

@@ -12,6 +12,8 @@ const props = defineProps({
   },
 });
 
+store.modules.clear();
+
 type ModuleWithSelection = { module: Module; selected: boolean };
 
 // array of modules with boolean if selected with getter and setter

frontend/src/main.ts

@@ -31,6 +31,7 @@ import Column from "primevue/column";
 import DynamicDialog from "primevue/dynamicdialog";
 import DialogService from "primevue/dialogservice";
 import ProgressSpinner from "primevue/progressspinner";
+import Checkbox from "primevue/checkbox";
 import i18n from "./i18n";
 
 const app = createApp(App);
@@ -65,4 +66,5 @@ app.component("DataTable", DataTable);
 app.component("Column", Column);
 app.component("DynamicDialog", DynamicDialog);
 app.component("ProgressSpinner", ProgressSpinner);
+app.component("Checkbox", Checkbox);
 app.mount("#app");

frontend/src/store/moduleStore.ts

@@ -33,6 +33,9 @@ const moduleStore = defineStore("moduleStore", {
     getAllModules(): Module[] {
       return Array.from(this.modules.values());
     },
+    containsModule(module: Module): boolean {
+        return this.modules.has(module.uuid);
+    }
   },
 });
 

frontend/src/view/AdditionalModules.vue

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