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, ref } from "vue";

const tableData = ref(
  moduleStore().modules.map((module) => {
    return {
      Course: module.course,
      Module: module,
    };
  }),
);

const columns = ref([
  { field: "Course", header: "Course" },
  { field: "Module", header: "Module" },
]);

const helpVisible: Ref<boolean> = ref(false);

const placeholders = ref([
  { placeholder: "%t", description: "Event Type", examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung" },
  { placeholder: "%p", description: "Mandatory", examples: "w = optional, p = mandatory" },
]);

async function finalStep() {
  const token: string = await createIndividualFeed(moduleStore().modules);
  tokenStore().setToken(token);
  await router.push("/calendar-link");
}
</script>

<template>
  <div class="flex flex-column">
    <div class="flex align-items-center justify-content-center h-4rem m-2">
      <h3>Rename your selected Modules to your liking.</h3>
        <i class="shadow-3 hover:shadow-8 pi pi-info-circle m-2" style="font-size: 1.5rem; color: orange" @click="helpVisible = true"></i>
      <Dialog
        v-model:visible="helpVisible"
        header="Module placeholders" 
      >
        <p>
          Here you can rename your modules to your liking. This will be the name
          of the event in your calendar.
        </p>
        <p>
          You can use the following placeholders in your module names:
        </p>
        <DataTable
          :value="placeholders"
        > 
          <Column field="placeholder" header="Placeholder"></Column>
          <Column field="description" header="Description"></Column>
          <Column field="examples" header="Examples"></Column>
        </DataTable>
      </Dialog>
    </div>
    <div class="card flex align-items-center justify-content-center m-2">
      <DataTable
        :value="tableData"
        edit-mode="cell"
        table-class="editable-cells-table"
        responsive-layout="scroll"
      >
        <Column
          v-for="col of columns"
          :key="col.field"
          :field="col.field"
          :header="col.header"
        >
          <template #body="{ data, field }">
            <div>
              {{
                field === "Module" ? data[field].userDefinedName : data[field]
              }}
            </div>
          </template>
          <template #editor="{ data, field }">
            <template v-if="field !== 'Module'">
              <div>{{ data[field] }}</div>
            </template>
            <template v-else>
              <InputText
                v-model="data[field].userDefinedName"
                class="w-full"
                autofocus
              />
            </template>
          </template>
        </Column>
      </DataTable>
    </div>

    <div class="flex align-items-center justify-content-center h-4rem m-2">
      <Button @click="finalStep()">Next Step</Button>
    </div>
  </div>
</template>

<style scoped></style>