htwkalender/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";

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>
    </div>
    <div class="card flex align-items-center justify-content-center m-2">
  <DataTable :value="tableData" editMode="cell" tableClass="editable-cells-table" responsiveLayout="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 class="w-full" v-model="data[field].UserDefinedName" 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>