115 refactor AdditionalModuleTable and add when editing

frontend/src/components/AdditionalModuleTable.vue

@@ -0,0 +1,200 @@
+<script lang="ts" setup>
+import { defineAsyncComponent, inject, 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();
+};
+
+const store = moduleStore();
+if (store.isEmpty()) {
+  router.replace("/");
+}
+
+const mobilePage = inject("mobilePage") as Ref<boolean>;
+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,
+  },
+});
+
+fetchedModules().then(
+  (data) =>
+    (modules.value = data.map((module: Module) => {
+      return module;
+    })),
+);
+
+const ModuleInformation = defineAsyncComponent(
+  () => import("./ModuleInformation.vue"),
+);
+
+async function showInfo(module: Module) {
+  await fetchModule(module).then((data) => {
+    module = data;
+  });
+  dialog.open(ModuleInformation, {
+    class: "w-full m-0",
+    props: {
+        style: {
+          width: "80vw",
+        },
+        breakpoints: {
+          "992px": "100vw",
+          "640px": "100vw",
+        },
+        modal: true,
+      },
+    data: {
+      module: module,
+    },
+  });
+}
+
+function selectModule(event: DataTableRowSelectEvent) {
+  store.addModule(event.data);
+}
+
+function unselectModule(event: DataTableRowUnselectEvent) {
+  store.removeModule(event.data);
+}
+
+</script>
+
+<template>
+  <div class="m-2 lg:w-10 w-full">
+    <DynamicDialog />
+    <DataTable
+      id="dt-responsive-table"
+      v-model:filters="filters"
+      :selection="store.getAllModules()"
+      :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="
+        $t('additionalModules.paginator.from') +
+        '{first}' + 
+        $t('additionalModules.paginator.to') + 
+        '{last}' + 
+        $t('additionalModules.paginator.of') + 
+        '{totalRecords}'
+      "
+      filter-display="row"
+      :loading="!modules.length"
+      loading-icon="pi pi-spinner"
+      :show-gridlines="true"
+      :striped-rows="true"
+      :select-all="false"
+      :size="mobilePage ? 'small' : 'large'"
+      @row-select="selectModule"
+      @row-unselect="unselectModule"
+    >
+      <Column selection-mode="multiple">
+      </Column>
+
+      <Column
+        field="course"
+        :header="$t('additionalModules.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="$t('additionalModules.module')"
+        :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="$t('additionalModules.professor')"
+        :show-clear-button="false"
+        :show-filter-menu="false"
+      >
+      </Column>
+      <Column 
+        :header="$t('additionalModules.info')"
+      >
+        <template #body="slotProps">
+          <Button
+            icon="pi pi-info"
+            severity="secondary"
+            rounded
+            outlined
+            :aria-label="$t('additionalModules.info-long')"
+            class="small-button"
+            @click.stop="showInfo(slotProps.data)"
+          ></Button>
+        </template>
+      </Column>
+      <template #footer>
+        <div class="py-2 px-3">
+          {{ 
+            t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
+          }} 
+        </div>
+      </template>
+    </DataTable>
+  </div>
+</template>
+
+<style scoped>
+:deep(.custom-multiselect) {
+  width: 50rem;
+}
+
+:deep(.custom-multiselect li) {
+  height: unset;
+}
+
+.small-button.p-button {
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+}
+
+:deep(.p-filter-column .p-checkbox .p-component) {
+  display: none !important;
+}
+</style>

frontend/src/components/editCalendar/EditAdditionalModules.vue

@@ -1,152 +0,0 @@
-<script lang="ts" setup>
-import { defineAsyncComponent, ref, Ref } from "vue";
-import { Module } from "../../model/module.ts";
-import { fetchAllModules } from "../../api/fetchCourse.ts";
-import moduleStore from "../../store/moduleStore";
-import { MultiSelectAllChangeEvent } from "primevue/multiselect";
-import router from "../../router";
-import { fetchModule } from "../../api/fetchModule.ts";
-import { useDialog } from "primevue/usedialog";
-import { useI18n } from "vue-i18n";
-
-const dialog = useDialog();
-const { t } = useI18n({ useScope: "global" });
-
-const fetchedModules = async () => {
-  return await fetchAllModules();
-};
-
-const modules: Ref<Module[]> = ref([]);
-
-const selectedModules: Ref<Module[]> = ref([] as Module[]);
-
-fetchedModules().then(
-  (data) =>
-    (modules.value = data.map((module: Module) => {
-      return module;
-    })),
-);
-
-async function nextStep() {
-  selectedModules.value.forEach((module: Module) => {
-    moduleStore().addModule(module);
-  });
-
-  await router.push("/edit-calendar");
-}
-
-const ModuleInformation = defineAsyncComponent(
-  () => import("../ModuleInformation.vue"),
-);
-
-async function showInfo(module: Module) {
-  await fetchModule(module).then((data: Module) => {
-    dialog.open(ModuleInformation, {
-      props: {
-        style: {
-          width: "50vw",
-        },
-        breakpoints: {
-          "960px": "75vw",
-          "640px": "90vw",
-        },
-        modal: true,
-      },
-      data: {
-        module: data,
-      },
-    });
-  });
-}
-
-const display = (module: Module) => module.name + " (" + module.course + ")";
-
-const selectAll = ref(false);
-
-const onSelectAllChange = (event: MultiSelectAllChangeEvent) => {
-  selectedModules.value = event.checked
-    ? modules.value.map((module) => module)
-    : [];
-  selectAll.value = event.checked;
-};
-
-function selectChange() {
-  selectAll.value = selectedModules.value.length === modules.value.length;
-}
-</script>
-
-<template>
-  <div class="flex flex-column">
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <h3>
-        {{ $t("additionalModules.subTitle") }}
-      </h3>
-    </div>
-    <div class="card flex align-items-center justify-content-center m-2">
-      <MultiSelect
-        v-model="selectedModules"
-        :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="$t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 })"
-        @change="selectChange()"
-        @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"
-                @click.stop="showInfo(slotProps.option)"
-              ></Button>
-              <DynamicDialog />
-            </div>
-          </div>
-        </template>
-        <template #footer>
-          <div class="py-2 px-3">
-            {{ t('additionalModules.footerModulesSelected', { count: selectedModules.length ?? 0 }) }}
-          </div>
-        </template>
-      </MultiSelect>
-    </div>
-    <div class="flex align-items-center justify-content-center h-4rem m-2">
-      <Button @click="nextStep()">{{
-        $t("additionalModules.nextStep")
-      }}</Button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-:deep(.custom-multiselect) {
-  width: 50rem;
-}
-
-:deep(.custom-multiselect li) {
-  height: unset;
-}
-
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
-</style>

frontend/src/router/index.ts

@@ -8,8 +8,8 @@ const PrivacyPolicy = () => import("../view/PrivacyPolicy.vue");
 const RenameModules = () => import("../components/RenameModules.vue");
 const RoomFinder = () => import("../view/RoomFinder.vue");
 const EditCalendarView = () => import("../view/EditCalendarView.vue");
-const EditAdditionalModules = () => import("../components/editCalendar/EditAdditionalModules.vue");
-const EditModules = () => import("../components/editCalendar/EditModules.vue");
+const EditAdditionalModules = () => import("../view/editCalendar/EditAdditionalModules.vue");
+const EditModules = () => import("../view/editCalendar/EditModules.vue");
 const CourseSelection = () => import("../view/CourseSelection.vue");
 
 import i18n from "../i18n";

frontend/src/view/AdditionalModules.vue

@@ -1,89 +1,16 @@
 <script lang="ts" setup>
-import { defineAsyncComponent, inject, 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();
-};
+import { defineAsyncComponent } from 'vue';
+import moduleStore from '../store/moduleStore';
+import router from '../router';
 
 const store = moduleStore();
-if (store.isEmpty()) {
-  router.replace("/");
-}
-
-const mobilePage = inject("mobilePage") as Ref<boolean>;
-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,
-  },
-});
-
-fetchedModules().then(
-  (data) =>
-    (modules.value = data.map((module: Module) => {
-      return module;
-    })),
+const AdditionalModuleTable = defineAsyncComponent(
+  () => import("../components/AdditionalModuleTable.vue"),
 );
 
 async function nextStep() {
   await router.push("/rename-modules");
 }
-
-const ModuleInformation = defineAsyncComponent(
-  () => import("../components/ModuleInformation.vue"),
-);
-
-async function showInfo(module: Module) {
-  await fetchModule(module).then((data) => {
-    module = data;
-  });
-  dialog.open(ModuleInformation, {
-    class: "w-full m-0",
-    props: {
-        style: {
-          width: "80vw",
-        },
-        breakpoints: {
-          "992px": "100vw",
-          "640px": "100vw",
-        },
-        modal: true,
-      },
-    data: {
-      module: module,
-    },
-  });
-}
-
-function selectModule(event: DataTableRowSelectEvent) {
-  store.addModule(event.data);
-}
-
-function unselectModule(event: DataTableRowUnselectEvent) {
-  store.removeModule(event.data);
-}
-
 </script>
 
 <template>
@@ -93,100 +20,7 @@ function unselectModule(event: DataTableRowUnselectEvent) {
         {{ $t("additionalModules.subTitle") }}
       </h3>
     </div>
-    <div class="m-2 lg:w-10 w-full">
-      <DynamicDialog />
-      <DataTable
-        id="dt-responsive-table"
-        v-model:filters="filters"
-        :selection="store.getAllModules()"
-        :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="
-          $t('additionalModules.paginator.from') +
-          '{first}' + 
-          $t('additionalModules.paginator.to') + 
-          '{last}' + 
-          $t('additionalModules.paginator.of') + 
-          '{totalRecords}'
-        "
-        filter-display="row"
-        :loading="!modules.length"
-        loading-icon="pi pi-spinner"
-        :show-gridlines="true"
-        :striped-rows="true"
-        :select-all="false"
-        :size="mobilePage ? 'small' : 'large'"
-        @row-select="selectModule"
-        @row-unselect="unselectModule"
-      >
-        <Column selection-mode="multiple">
-        </Column>
-
-        <Column
-          field="course"
-          :header="$t('additionalModules.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="$t('additionalModules.module')"
-          :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="$t('additionalModules.professor')"
-          :show-clear-button="false"
-          :show-filter-menu="false"
-        >
-        </Column>
-        <Column 
-          :header="$t('additionalModules.info')"
-        >
-          <template #body="slotProps">
-            <Button
-              icon="pi pi-info"
-              severity="secondary"
-              rounded
-              outlined
-              :aria-label="$t('additionalModules.info-long')"
-              class="small-button"
-              @click.stop="showInfo(slotProps.data)"
-            ></Button>
-          </template>
-        </Column>
-        <template #footer>
-          <div class="py-2 px-3">
-            {{ 
-              t('additionalModules.footerModulesSelected', { count: store?.countModules() ?? 0 })
-            }} 
-          </div>
-        </template>
-      </DataTable>
-    </div>
+    <AdditionalModuleTable />
     <div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
       <Button 
         :disabled="store.isEmpty()"
@@ -198,23 +32,3 @@ function unselectModule(event: DataTableRowUnselectEvent) {
     </div>
   </div>
 </template>
-
-<style scoped>
-:deep(.custom-multiselect) {
-  width: 50rem;
-}
-
-:deep(.custom-multiselect li) {
-  height: unset;
-}
-
-.small-button.p-button {
-  width: 2rem;
-  height: 2rem;
-  padding: 0;
-}
-
-:deep(.p-filter-column .p-checkbox .p-component) {
-  display: none !important;
-}
-</style>

frontend/src/view/editCalendar/EditAdditionalModules.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { defineAsyncComponent } from "vue";
+import moduleStore from "../../store/moduleStore";
+import router from "../../router";
+
+const store = moduleStore();
+const AdditionalModuleTable = defineAsyncComponent(
+  () => import("../../components/AdditionalModuleTable.vue"),
+);
+
+async function nextStep() {
+  await router.push("/edit-calendar");
+}
+</script>
+
+<template>
+  <div class="flex flex-column align-items-center w-full mb-7">
+    <div class="flex align-items-center justify-content-center m-2">
+      <h3>
+        {{ $t("additionalModules.subTitle") }}
+      </h3>
+    </div>
+    <AdditionalModuleTable />
+    <div class="flex align-items-center justify-content-end h-4rem m-2 w-full lg:w-10">
+      <Button
+        :disabled="store.isEmpty()"
+        @click="nextStep()"
+        class="col-12 md:col-4 mb-3 align-self-end"
+        icon="pi pi-arrow-right"
+        :label="$t('additionalModules.nextStep')"
+      />
+    </div>
+  </div>
+</template>

frontend/src/view/editCalendar/EditModules.vue

@@ -6,7 +6,7 @@ import { fetchAllModules } from "../../api/fetchCourse.ts";
 import {deleteIndividualFeed, saveIndividualFeed} from "../../api/createFeed.ts";
 import tokenStore from "../../store/tokenStore";
 import router from "../../router";
-import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
+import ModuleTemplateDialog from "../../components/ModuleTemplateDialog.vue";
 import { onlyWhitespace } from "../../helpers/strings.ts";
 import { useI18n } from "vue-i18n";
 import { useToast } from "primevue/usetoast";