htwkalender/frontend/src/components/editCalendar/EditModules.vue

<script lang="ts" setup>
import { computed, Ref, ref } from "vue";
import { Module } from "../../model/module";
import moduleStore from "../../store/moduleStore";
import { fetchAllModules } from "../../api/fetchCourse";
import { saveIndividualFeed } from "../../api/createFeed";
import tokenStore from "../../store/tokenStore";
import router from "../../router";
import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";

const store = moduleStore();
const tableData = computed(() =>
  store.getAllModules().map((module: Module) => {
    return {
      Course: module.course,
      Module: module,
    };
  }),
);

const columns = ref([
  { field: "Course", header: "Course" },
  { field: "Module", header: "Module" },
  { field: "Reminder", header: "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");
}
</script>

<template>
  <div class="flex flex-column card-container mx-8 mt-2">
    <div class="flex align-items-center justify-content-center h-4rem m-2">
      <h3>Rename your selected Modules to your liking.</h3>
      <ModuleTemplateDialog />
    </div>
    <div
      class="card flex align-items-center justify-content-center border-round m-2"
    >
      <DataTable
        :value="tableData"
        edit-mode="cell"
        table-class="editable-cells-table"
        responsive-layout="scroll"
      >
        <template #header>
          <div class="flex align-items-center justify-content-end">
            Enable all notifications:
            <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'">
              {{ data[field].userDefinedName }}
            </template>
            <template v-else-if="field === 'Reminder'">
              <Button
                :icon="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
                :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="data.Module.reminder ? 'pi pi-bell' : 'pi pi-times'"
                :severity="data.Module.reminder ? 'warning' : 'secondary'"
                rounded
                outlined
                class="small-button"
                @click="data.Module.reminder = !data.Module.reminder"
              ></Button>
            </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>
      </DataTable>
    </div>
    <div
      class="flex align-items-center justify-content-center border-round m-2"
    >
      <Button label="Save Calendar" @click="finalStep()" />
    </div>
  </div>
</template>

<style scoped>
</style>