htwkalender/frontend/src/view/professor/ProfessorDashboard.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { pb } from "../../service/pocketbase";
import { Module } from "../../model/module";
import { useI18n } from "vue-i18n";
import Button from "primevue/button";
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import Skeleton from "primevue/skeleton";
import InputText from "primevue/inputtext";
import { FilterMatchMode } from "primevue/api";
import { useRouter } from "vue-router";

const { t } = useI18n({ useScope: "global" });
const router = useRouter();
import { fetchProfessorModules, type ApiModule } from "../../api/fetchProfessorModules";

type ModuleWithScore = Module & { confidenceScore: number };

const modules = ref<Module[]>(new Array(10));
const selectedModules = ref<Module[]>([]);
const loading = ref(true);

const filters = ref({
  name: {
    value: null,
    matchMode: FilterMatchMode.CONTAINS,
  },
  prof: {
    value: null,
    matchMode: FilterMatchMode.CONTAINS,
  },
});

onMounted(async () => {
  try {
    // Check if user is authenticated
    if (!pb.authStore.isValid || !pb.authStore.token) {
      console.error("User is not authenticated");
      router.push("/");
      return;
    }

    const result = await fetchProfessorModules();
    
    // Convert API response to Module instances with all required fields
    const moduleObjects = result.map((apiModule: ApiModule) => new Module(
      apiModule.uuid,
      apiModule.name,
      apiModule.course,
      apiModule.eventType || "",
      apiModule.name, // userDefinedName defaults to module name
      apiModule.prof,
      apiModule.semester,
      false, // reminder defaults to false
      [] // events defaults to empty array
    ));
    
    // Sort modules by confidence score (highest first)
    // Note: confidenceScore is not part of Module class, so we need to preserve it
    const sortedModules = moduleObjects.map((module: Module, index: number) => {
      const originalData = result[index];
      return {
        ...module,
        confidenceScore: originalData.confidenceScore || 0
      };
    }).sort((a: ModuleWithScore, b: ModuleWithScore) => {
      return (b.confidenceScore || 0) - (a.confidenceScore || 0); // Descending order
    });
    
    // Clear temporary entries and set actual modules
    modules.value = sortedModules;
    
    // Pre-select modules with confidence score >= 0.7 (good match or better)
    selectedModules.value = sortedModules.filter((m: ModuleWithScore) => (m.confidenceScore || 0) >= 0.7);
    
    console.log("Modules loaded:", modules.value.length, "Pre-selected:", selectedModules.value.length);
  } catch (error: unknown) {
    console.error("Failed to fetch modules", error);
    const err = error as { status?: number; message?: string };
    // Clear temporary entries on error
    modules.value = [];
    // If unauthorized, redirect to home
    if (err.status === 401 || err.message?.includes("401")) {
      pb.authStore.clear();
      router.push("/");
    }
  } finally {
    // Always disable loading animation
    loading.value = false;
  }
});

const createCalendar = () => {
  // Similar to course selection, we want to proceed to rename or just view calendar
  // We can store the selected modules in the store and redirect
  // But wait, the store is for the "current" calendar creation session.
  // If we want to use the existing flow:
  
  // 1. Clear store? Or just add?
  // Let's assume we want to start fresh or add to existing.
  // For now, let's just construct the URL parameters or use the store.
  
  // Actually, the user wants "custom calendar creation process ... selection of modules and the renaming".
  // So we can redirect to /rename-modules with the selected modules pre-filled in the store.
  
  import("../../store/moduleStore").then(({ default: useModuleStore }) => {
    const store = useModuleStore();
    store.removeAllModules();
    store.setProfessorFeed(true);
    selectedModules.value.forEach((m) => store.addModule(m));
    router.push("/rename-modules");
  });
};
</script>

<template>
  <div class="card">
    <h1>{{ t("professor.dashboard") }}</h1>
    <p>{{ t("professor.intro") }}</p>


    <DataTable
      v-model:selection="selectedModules"
      v-model:filters="filters"
      :value="modules"
      dataKey="uuid"
      responsiveLayout="scroll"
      paginator
      :rows="10"
      :rows-per-page-options="[5, 10, 20, 50]"
      filter-display="row"
      :show-gridlines="true"
      :striped-rows="true"
    >
      <Column selectionMode="multiple" headerStyle="width: 3em">
        <template v-if="loading" #body>
          <Skeleton></Skeleton>
        </template>
      </Column>
      <Column 
        field="name" 
        :header="t('professor.name')"
        :show-filter-menu="false"
        :show-clear-button="false"
      >
        <template #filter="{ filterModel, filterCallback }">
          <InputText
            v-model="filterModel.value"
            type="text"
            class="p-column-filter"
            :placeholder="t('professor.searchByName')"
            @input="filterCallback()"
          />
        </template>
        <template v-if="loading" #body>
          <Skeleton></Skeleton>
        </template>
      </Column>
      <Column 
        field="prof" 
        :header="t('professor.professor')"
        :show-filter-menu="false"
        :show-clear-button="false"
      >
        <template #filter="{ filterModel, filterCallback }">
          <InputText
            v-model="filterModel.value"
            type="text"
            class="p-column-filter"
            :placeholder="t('professor.searchByProfessor')"
            @input="filterCallback()"
          />
        </template>
        <template v-if="loading" #body>
          <Skeleton></Skeleton>
        </template>
      </Column>
      <Column field="course" :header="t('professor.course')">
        <template v-if="loading" #body>
          <Skeleton></Skeleton>
        </template>
      </Column>
      <Column field="semester" :header="t('professor.semester')">
        <template v-if="loading" #body>
          <Skeleton></Skeleton>
        </template>
      </Column>
      <Column field="confidenceScore" :header="t('professor.match')" sortable>
        <template #body="slotProps">
          <div v-if="loading">
            <Skeleton></Skeleton>
          </div>
          <div v-else>
            <span v-if="slotProps.data.confidenceScore >= 0.9" style="color: green; font-weight: bold;">
              {{ Math.round(slotProps.data.confidenceScore * 100) }}%
            </span>
            <span v-else-if="slotProps.data.confidenceScore >= 0.7" style="color: #4CAF50;">
              {{ Math.round(slotProps.data.confidenceScore * 100) }}%
            </span>
            <span v-else-if="slotProps.data.confidenceScore >= 0.5" style="color: orange;">
              {{ Math.round(slotProps.data.confidenceScore * 100) }}%
            </span>
            <span v-else style="color: #999;">
              {{ Math.round(slotProps.data.confidenceScore * 100) }}%
            </span>
          </div>
        </template>
      </Column>
    </DataTable>

    <div class="flex justify-content-end mt-4">
      <Button
        :label="t('professor.nextStep')"
        icon="pi pi-arrow-right"
        @click="createCalendar"
        :disabled="selectedModules.length === 0"
      />
    </div>
  </div>
</template>

<style scoped>
.card {
  padding: 2rem;
}
</style>