15 refactor module selection to use store

frontend/src/components/ModuleSelection.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, ComputedRef, PropType, Ref, ref, watch } from "vue";
+import { computed, ComputedRef, PropType } from "vue";
 import { Module } from "../model/module.ts";
 import moduleStore from "../store/moduleStore";
 import router from "../router";
@@ -12,47 +12,29 @@ const props = defineProps({
   },
 });
 
+const modules : ComputedRef<Module[]> = computed(() => props.modules);
+
 store.modules.clear();
 
-type ModuleWithSelection = { module: Module; selected: boolean };
+const allSelected : ComputedRef<boolean> = 
+  computed(() => props.modules.every((module) => store.hasModule(module)));
 
-// array of modules with boolean if selected with getter and setter
+function toggleAllModules(){
-const modulesWithSelection: Ref<ModuleWithSelection[]> = ref(
+  if (allSelected.value) {
-  props.modules.map((propModule) => {
+    store.removeAllModules();
-    return {
+  } else {
-      module: propModule,
+    store.overwriteModules(props.modules);
-      selected: store.hasModule(propModule),
+  }
-    };
-  }),
-);
-
-const selectedModules: ComputedRef<Module[]> = computed(() =>
-  modulesWithSelection.value
-    .filter((module) => module.selected)
-    .map((module) => module.module),
-);
-
-const currentModules = computed(() => props.modules);
-
-function selectAllModules(selection: boolean) {
   console.debug(props.modules);
-  modulesWithSelection.value.forEach((module) => {
-    module.selected = selection;
-  });
 }
 
-const allSelected: Ref<boolean> = ref(true);
+function toggleModule(module: Module) {
-
+  if (store.hasModule(module)) {
-watch(currentModules, (newValue: Module[]) => {
+    store.removeModule(module);
-  modulesWithSelection.value = newValue.map((module) => {
+  } else {
-    return { module: module, selected: false };
+    store.addModule(module);
-  });
+  }
-});
+}
-
-// TODO: Refactor and directly use store hashmap
-watch(selectedModules, (newValue: Module[]) => {
-  store.overwriteModules(newValue);
-});
 
 function nextStep() {
   router.push("/additional-modules");
@@ -63,31 +45,29 @@ function nextStep() {
   <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="store.isEmpty()"
         class="col-4 justify-content-center"
         @click="nextStep()"
         >{{ $t("moduleSelection.nextStep") }}
       </Button>
     </div>
     <div class="flex align-items-center justify-content-center">
-      <DataView :value="modulesWithSelection" data-key="module">
+      <DataView :value="modules" data-key="uuid">
         <template #header>
           <div class="flex justify-content-between flex-wrap">
             <div class="flex align-items-center justify-content-center">
               <h3>
                 {{ $t("moduleSelection.modules") }} -
-                {{ selectedModules.length }}
+                {{ store.countModules() }}
               </h3>
             </div>
             <div class="flex align-items-center justify-content-center">
-              <ToggleButton
+              {{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
-                v-model="allSelected"
+              <InputSwitch
-                class="w-12rem"
+                class="mx-4"
-                off-icon="pi pi-times"
+                :disabled="modules.length === 0"
-                :off-label="$t('moduleSelection.deselectAll')"
+                :model-value="allSelected"
-                on-icon="pi pi-check"
+                @update:model-value="toggleAllModules()"
-                :on-label="$t('moduleSelection.selectAll')"
-                @click="selectAllModules(!allSelected)"
               />
             </div>
           </div>
@@ -108,18 +88,19 @@ function nextStep() {
                 <div
                   class="flex flex-column align-items-center justify-content-center sm:align-items-start gap-3"
                 >
-                  <p class="text-lg">{{ slotProps.data.module.name }}</p>
+                  <p class="text-lg">{{ slotProps.data.name }}</p>
                 </div>
                 <div
                   class="flex sm:flex-column justify-content-center sm:align-items-end gap-3 sm:gap-2"
                 >
                   <ToggleButton
-                    v-model="modulesWithSelection[slotProps.index].selected"
                     class="w-9rem"
                     off-icon="pi pi-times"
                     :off-label="$t('moduleSelection.unselected')"
                     on-icon="pi pi-check"
                     :on-label="$t('moduleSelection.selected')"
+                    :model-value="store.hasModule(slotProps.data)"
+                    @update:model-value="toggleModule(slotProps.data)"
                   />
                 </div>
               </div>

frontend/src/store/moduleStore.ts

@@ -27,6 +27,9 @@ const moduleStore = defineStore("moduleStore", {
         this.modules.set(module.uuid, module);
       });
     },
+    isEmpty(): boolean {
+      return this.modules.size === 0;
+    },
     countModules(): number {
       return this.modules.size;
     },

frontend/src/view/AdditionalModules.vue

@@ -1,16 +1,15 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, ref, Ref, watch} from "vue";
+import { defineAsyncComponent, ref, Ref} from "vue";
 import { Module } from "../model/module.ts";
 import { fetchAllModules } from "../api/fetchCourse.ts";
 import moduleStore from "../store/moduleStore.ts";
 import { FilterMatchMode } from "primevue/api";
+import { DataTableRowSelectEvent, DataTableRowUnselectEvent } from "primevue/datatable";
 import { useDialog } from "primevue/usedialog";
 import router from "../router";
 import { fetchModule } from "../api/fetchModule.ts";
-import { useI18n } from "vue-i18n";
 
 const dialog = useDialog();
-const { t } = useI18n({ useScope: "global" });
 
 const fetchedModules = async () => {
   return await fetchAllModules();
@@ -18,10 +17,6 @@ const fetchedModules = async () => {
 
 const store = moduleStore();
 
-const selectedModules: Ref<Module[]> = ref(
-   store.getAllModules()
-);
-
 const modules: Ref<Module[]> = ref([]);
 const filters = ref({
   course: {
@@ -38,35 +33,12 @@ const filters = ref({
   },
 });
 
-//const selectedModules: Ref<Module[]> = ref([] as Module[]);
-//const additionalModules: Ref<Map<string, Module>> = ref(new Map());
-
 fetchedModules().then(
   (data) =>
     (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() {
   await router.push("/rename-modules");
@@ -96,6 +68,15 @@ async function showInfo(module: Module) {
     },
   });
 }
+
+function selectModule(event: DataTableRowSelectEvent) {
+  store.addModule(event.data);
+}
+
+function unselectModule(event: DataTableRowUnselectEvent) {
+  store.removeModule(event.data);
+}
+
 </script>
 
 <template>
@@ -109,7 +90,7 @@ async function showInfo(module: Module) {
       <DynamicDialog />
       <DataTable
         v-model:filters="filters"
-        v-model:selection="selectedModules"
+        :selection="store.getAllModules()"
         :value="modules"
         data-key="uuid"
         paginator
@@ -124,6 +105,8 @@ async function showInfo(module: Module) {
         :striped-rows="true"
         :select-all="false"
         class="w-10"
+        @row-select="selectModule"
+        @row-unselect="unselectModule"
       >
         <Column selection-mode="multiple">
         </Column>
@@ -196,7 +179,10 @@ async function showInfo(module: Module) {
       </DataTable>
     </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">{{
+      <Button 
+        :disabled="store.isEmpty()"
+        @click="nextStep()"
+      >{{
         $t("additionalModules.nextStep")
       }}</Button>
     </div>