mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2026-01-18 12:32:26 +01:00
feat: Add new data-manager service for professor and module management and a new frontend application with i18n and a professor dashboard.
This commit is contained in:
Elmar Kresse
233
frontend/src/view/professor/ProfessorDashboard.vue
Normal file
233
frontend/src/view/professor/ProfessorDashboard.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<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();
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
console.log("Auth token:", pb.authStore.token); // Debug
|
||||
|
||||
// Make request with explicit Authorization header
|
||||
const response = await fetch("/api/professor/modules", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Authorization": pb.authStore.token,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
// Convert API response to Module instances with all required fields
|
||||
const moduleObjects = result.map((apiModule: any) => 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: any, b: any) => {
|
||||
return (b.confidenceScore || 0) - (a.confidenceScore || 0); // Descending order
|
||||
});
|
||||
|
||||
modules.value = sortedModules;
|
||||
|
||||
// Pre-select modules with confidence score >= 0.7 (good match or better)
|
||||
selectedModules.value = sortedModules.filter((m: any) => (m.confidenceScore || 0) >= 0.7);
|
||||
|
||||
console.log("Modules loaded:", modules.value.length, "Pre-selected:", selectedModules.value.length);
|
||||
} catch (error: any) {
|
||||
console.error("Failed to fetch modules", error);
|
||||
// If unauthorized, redirect to home
|
||||
if (error.status === 401 || error.message?.includes("401")) {
|
||||
pb.authStore.clear();
|
||||
router.push("/");
|
||||
}
|
||||
} finally {
|
||||
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();
|
||||
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>
|
||||
Reference in New Issue
Block a user