15 refactor additional modules to table

backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM golang:1.21.3-alpine
+FROM golang:1.21-alpine
 
 # Set the Current Working Directory inside the container
 WORKDIR /app

backend/go.mod

@@ -1,6 +1,6 @@
 module htwkalender
 
-go 1.21.3
+go 1.21
 
 require (
 	github.com/google/uuid v1.3.1

frontend/src/components/AdditionalModules.vue

@@ -3,7 +3,7 @@ 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 { MultiSelectAllChangeEvent } from "primevue/multiselect";
+import { FilterMatchMode } from "primevue/api";
 
 import { useDialog } from "primevue/usedialog";
 const dialog = useDialog();
@@ -15,9 +15,25 @@ const fetchedModules = async () => {
   return await fetchAllModules();
 };
 
+const store = moduleStore();
 const modules: Ref<Module[]> = ref([]);
+const filters = ref({
+  course: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+  name: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  },
+  prof: {
+    value: null,
+    matchMode: FilterMatchMode.CONTAINS,
+  }
+});
 
-const selectedModules: Ref<Module[]> = ref([] as Module[]);
+//const selectedModules: Ref<Module[]> = ref([] as Module[]);
+//const additionalModules: Ref<Map<string, Module>> = ref(new Map());
 
 fetchedModules().then(
   (data) =>
@@ -27,9 +43,9 @@ fetchedModules().then(
 );
 
 async function nextStep() {
-  selectedModules.value.forEach((module: Module) => {
+  //selectedModules.value.forEach((module: Module) => {
-    moduleStore().addModule(module);
+  //  moduleStore().addModule(module);
-  });
+  //});
 
   await router.push("/rename-modules");
 }
@@ -59,20 +75,42 @@ async function showInfo(module: Module) {
   });
 }
 
+/*
 const display = (module: Module) => module.name + " (" + module.course + ")";
 
 const selectAll = ref(false);
 
 const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
-  selectedModules.value = event.checked
+  if (event.checked) {
-    ? modules.value.map((module: Module) => module)
+    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() {
+function selectChange(event : MultiSelectChangeEvent) {
-  selectAll.value = selectedModules.value.length === modules.value.length;
+  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;
 }
+*/
 </script>
 
 <template>
@@ -84,8 +122,103 @@ function selectChange() {
       </h3>
     </div>
     <div class="card flex align-items-center justify-content-center m-2">
+      <DynamicDialog />
+      <DataTable
+        v-model:filters="filters"
+        :value="modules"
+        data-key="uuid"
+        paginator
+        :rows="10"
+        :rows-per-page-options="[5, 10, 20, 50]"
+        paginator-template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink RowsPerPageDropdown"
+        current-page-report-template="{first} to {last} of {totalRecords}"
+        filter-display="row"
+        :loading="!modules.length"
+        loading-icon="pi pi-spinner"
+        :show-gridlines="true"
+        :striped-rows="true"
+        class="w-10"
+        >
+        
+        <Column
+          selection-mode="multiple"
+          >
+        </Column>
+
+        <Column
+          field="course"
+          header="Course"
+          :show-clear-button="false"
+          :show-filter-menu="false"
+          >
+          <template #filter="{ filterModel, filterCallback }">
+            <InputText
+              v-model="filterModel.value"
+              type="text"
+              class="p-column-filter max-w-10rem"
+              @input="filterCallback()"
+            />
+          </template>
+        </Column>
+        <Column
+          field="name"
+          header="Name"
+          :show-clear-button="false"
+          :show-filter-menu="false"
+          >
+          <template #filter="{ filterModel, filterCallback }">
+            <InputText
+              v-model="filterModel.value"
+              type="text"
+              class="p-column-filter"
+              @input="filterCallback()"
+            />
+          </template>
+        </Column>
+        <Column
+          field="prof"
+          header="Professor"
+          :show-clear-button="false"
+          :show-filter-menu="false"
+          >
+          <template #filter="{ filterModel, filterCallback }">
+            <InputText
+              v-model="filterModel.value"
+              type="text"
+              class="p-column-filter"
+              @input="filterCallback()"
+            />
+          </template>
+        </Column>
+        <Column header="Info">
+          <template #body="slotProps">
+            <Button
+              icon="pi pi-info"
+              severity="secondary"
+              rounded
+              outlined
+              aria-label="Information"
+              class="small-button"
+              @click.stop="showInfo(slotProps.data)"
+            ></Button>
+          </template>
+        
+        </Column>
+        <template #footer>
+          <div class="py-2 px-3">
+            <b>{{ store ? store.countModules() : 0 }}</b>
+            item{{
+              (store ? store.countModules() : 0) !== 1 ? "s" : ""
+            }}
+            selected.
+          </div>
+        </template>
+      </DataTable>
+
+      <!--
       <MultiSelect
-        v-model="selectedModules"
+        :model-value="store.getAllModules()"
+        @update:model-value="store.overwriteModules($event.value)"
         :max-selected-labels="1"
         :option-label="display"
         :options="modules"
@@ -94,7 +227,7 @@ function selectChange() {
         class="custom-multiselect"
         filter
         placeholder="Select additional modules"
-        @change="selectChange()"
+        @change="selectChange($event)"
         @selectall-change="onSelectAllChange($event)"
       >
         <template #option="slotProps">
@@ -128,6 +261,7 @@ function selectChange() {
           </div>
         </template>
       </MultiSelect>
+    -->
     </div>
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <Button @click="nextStep()">Next Step</Button>

frontend/src/store/moduleStore.ts

@@ -25,6 +25,9 @@ const moduleStore = defineStore("moduleStore", {
         this.modules.set(module.uuid, module);
       });
     },
+    countModules(): number {
+      return this.modules.size;
+    },
     getAllModules(): Module[] {
       return Array.from(this.modules.values());
     },