htwkalender-pwa/frontend/src/components/RenameModules.vue

<script setup lang="ts">
import moduleStore from "../store/moduleStore.ts";
import { createIndividualFeed } from "../api/createFeed.ts";
import router from "../router";
import tokenStore from "../store/tokenStore.ts";
import { Ref, computed, inject, ref } from "vue";
import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
import { onlyWhitespace } from "../helpers/strings.ts";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });

const store = moduleStore();
const tableData = ref(
  store.getAllModules().map((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") },
]);

async function finalStep() {
  const token: string = await createIndividualFeed(store.getAllModules());
  tokenStore().setToken(token);
  await router.push("/calendar-link");
}
</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 class=""/>
    </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 flex-wrap gap-2 px-2">
              {{ $t("renameModules.enableAllNotifications") }}
              <InputSwitch
                :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>
                <div>{{ data[field] }}</div>
              </template>
            </template>
          </Column>
        </DataTable>
      </div>

      <Button
        :disabled="store.isEmpty()"
        class="col-12 md:col-4 mb-3 align-self-end"
        @click="finalStep()"
        icon="pi pi-save"
        :label="$t('renameModules.nextStep')"
      />
    </div>  
  </div>
</template>

<style scoped></style>