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
-const modulesWithSelection: Ref<ModuleWithSelection[]> = ref(
-  props.modules.map((propModule) => {
-    return {
-      module: propModule,
-      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) {
+function toggleAllModules(){
+  if (allSelected.value) {
+    store.removeAllModules();
+  } else {
+    store.overwriteModules(props.modules);
+  }
   console.debug(props.modules);
-  modulesWithSelection.value.forEach((module) => {
-    module.selected = selection;
-  });
 }
 
-const allSelected: Ref<boolean> = ref(true);
-
-watch(currentModules, (newValue: Module[]) => {
-  modulesWithSelection.value = newValue.map((module) => {
-    return { module: module, selected: false };
-  });
-});
-
-// TODO: Refactor and directly use store hashmap
-watch(selectedModules, (newValue: Module[]) => {
-  store.overwriteModules(newValue);
-});
+function toggleModule(module: Module) {
+  if (store.hasModule(module)) {
+    store.removeModule(module);
+  } else {
+    store.addModule(module);
+  }
+}
 
 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
-                v-model="allSelected"
-                class="w-12rem"
-                off-icon="pi pi-times"
-                :off-label="$t('moduleSelection.deselectAll')"
-                on-icon="pi pi-check"
-                :on-label="$t('moduleSelection.selectAll')"
-                @click="selectAllModules(!allSelected)"
+              {{ allSelected ? $t('moduleSelection.deselectAll') : $t('moduleSelection.selectAll')}}
+              <InputSwitch
+                class="mx-4"
+                :disabled="modules.length === 0"
+                :model-value="allSelected"
+                @update:model-value="toggleAllModules()"
               />
             </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>