15 refactor module selection to use store

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>