115 refactor AdditionalModuleTable and add when editing

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

@@ -0,0 +1,215 @@
+<script lang="ts" setup>
+import { computed, inject, Ref, ref } from "vue";
+import { Module } from "../../model/module.ts";
+import moduleStore from "../../store/moduleStore";
+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 "../../components/ModuleTemplateDialog.vue";
+import { onlyWhitespace } from "../../helpers/strings.ts";
+import { useI18n } from "vue-i18n";
+import { useToast } from "primevue/usetoast";
+const { t } = useI18n({ useScope: "global" });
+
+const toast = useToast();
+const visible = ref(false);
+
+const store = moduleStore();
+
+const tableData = computed(() =>
+  store.getAllModules().map((module: Module) => {
+    return {
+      Course: module.course,
+      Module: module,
+    };
+  }),
+);
+const mobilePage = inject("mobilePage") as Ref<boolean>;
+
+const columns = computed(() => [
+  { field: "Course", header: t("moduleInformation.course") },
+  { field: "Module", header: t("moduleInformation.module") },
+  { field: "Reminder", header: t("renameModules.reminder") },
+]);
+
+const fetchedModules = async () => {
+  return await fetchAllModules();
+};
+
+function deleteModule(module: Module) {
+  console.debug(module);
+  moduleStore().removeModule(module);
+}
+
+const modules: Ref<Module[]> = ref([]);
+
+fetchedModules().then(
+  (data) =>
+    (modules.value = data.map((module: Module) => {
+      return module;
+    })),
+);
+
+async function finalStep() {
+  await saveIndividualFeed(tokenStore().token, store.getAllModules());
+  await router.push("/calendar-link");
+}
+
+async function deleteFeed() {
+  deleteIndividualFeed(tokenStore().token).then(
+    () => {
+      toast.add({
+        severity: "success",
+        summary: t('editCalendarView.toast.success'),
+        detail: t('editCalendarView.toast.successDetail'),
+        life: 3000,
+      });
+      visible.value = false;
+      router.push("/");
+
+    },
+    () => {
+      toast.add({
+        severity: "error",
+        summary: t('editCalendarView.toast.error'),
+        detail: t('editCalendarView.toast.errorDetail'),
+        life: 3000,
+      });
+    },
+  );
+}
+
+</script>
+
+<template>
+  <div class="flex flex-column align-items-center mb-7">
+    <div class="flex align-items-center justify-content-center m-2 gap-2">
+      <h3>{{ $t("renameModules.subTitle") }}</h3>
+      <ModuleTemplateDialog />
+    </div>
+    <div class="w-full lg:w-8 flex flex-column">
+      <div
+        class="card flex align-items-center justify-content-center my-2"
+      >
+        <DataTable
+          :value="tableData"
+          edit-mode="cell"
+          table-class="editable-cells-table"
+          responsive-layout="scroll"
+          :size="mobilePage ? 'small' : 'large'"
+          class="w-full"
+        >
+          <template #header>
+            <div class="flex align-items-center justify-content-end">
+              {{ $t("renameModules.enableAllNotifications") }}
+              <InputSwitch
+                class="mx-4"
+                :model-value="
+                  tableData.reduce(
+                    (acc, curr) => acc && curr.Module.reminder,
+                    true,
+                  )
+                "
+                @update:model-value="
+                  tableData.forEach((module) => (module.Module.reminder = $event))
+                "
+              />
+            </div>
+          </template>
+          <Column
+            v-for="col of columns"
+            :key="col.field"
+            :field="col.field"
+            :header="col.header"
+            :class="col.field === 'Reminder' ? 'text-center' : ''"
+          >
+            <!-- Text Body -->
+            <template #body="{ data, field }">
+              <template v-if="field === 'Module'">
+                {{
+                  onlyWhitespace(data[field].userDefinedName)
+                    ? data[field].name
+                    : data[field].userDefinedName
+                }}
+              </template>
+              <template v-else-if="field === 'Reminder'">
+                <Button
+                  icon="pi pi-bell"
+                  :severity="data.Module.reminder ? 'warning' : 'secondary'"
+                  rounded
+                  outlined
+                  class="small-button"
+                  @click="data.Module.reminder = !data.Module.reminder"
+                ></Button>
+              </template>
+              <template v-else>
+                {{ data[field] }}
+              </template>
+            </template>
+            <!-- Editor Body -->
+            <template #editor="{ data, field }">
+              <template v-if="field === 'Module'">
+                <InputText
+                  v-model="data[field].userDefinedName"
+                  class="w-full"
+                  autofocus
+                />
+              </template>
+              <template v-else-if="field === 'Reminder'">
+                <Button
+                  icon="pi pi-bell"
+                  :severity="data.Module.reminder ? 'warning' : 'secondary'"
+                  rounded
+                  outlined
+                  class="small-button"
+                  @click="data.Module.reminder = !data.Module.reminder"
+                ></Button>
+              </template>
+              <template v-else>
+                {{ data[field] }}
+              </template>
+            </template>
+          </Column>
+          <Column>
+            <template #body="{ data }">
+              <Button
+                icon="pi pi-trash"
+                class="small-button"
+                severity="danger"
+                outlined
+                rounded
+                aria-label="Cancel"
+                @click="deleteModule(data['Module'])"
+              />
+            </template>
+          </Column>
+          <template #footer>
+            <div
+                class="flex flex-column sm:flex-row flex-wrap justify-content-between gap-2 w-full"
+            >
+              <Button type="button" severity="danger" outlined @click="visible = true" icon="pi pi-trash" :label="$t('editCalendarView.delete')"/>
+              <Button type="button" severity="info" outlined @click="router.push('edit-additional-modules')" icon="pi pi-plus" :label="$t('editCalendarView.addModules')"/>
+              <Button type="button" severity="success" outlined @click="finalStep()" icon="pi pi-save" :label="$t('editCalendarView.save')"/>
+            </div>
+          </template>
+        </DataTable>
+      </div>
+    </div>
+  </div>
+  <div class="card flex justify-content-center">
+    <Dialog v-model:visible="visible" modal header="Header" :style="{ width: '50rem' }" :breakpoints="{ '1199px': '75vw', '575px': '90vw' }">
+      <template #header>
+        <div class="inline-flex align-items-center justify-content-center gap-2">
+          <span class="font-bold white-space-nowrap">{{ $t('editCalendarView.dialog.headline') }}</span>
+        </div>
+      </template>
+      <p class="m-0">{{ $t('editCalendarView.dialog.subTitle') }}</p>
+      <template #footer>
+        <Button :label="$t('editCalendarView.dialog.delete')" severity="danger" icon="pi pi-trash" @click="deleteFeed()" autofocus />
+      </template>
+    </Dialog>
+  </div>
+</template>
+
+<style scoped></style>