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 } from "vue";
import ModuleTemplateDialog from "./ModuleTemplateDialog.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" },
]);

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>
      <ModuleTemplateDialog />
    </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>