Merge branch 'dev' into feat/class-functionality

This commit is contained in:
laurejablonski 2025-04-19 11:58:25 +02:00
commit 4dd053edfb
8 changed files with 172 additions and 62 deletions

View file

@ -12,7 +12,7 @@
"format": "prettier --write src/", "format": "prettier --write src/",
"format-check": "prettier --check src/", "format-check": "prettier --check src/",
"lint": "eslint . --fix", "lint": "eslint . --fix",
"pretest:unit": "npm run build", "pretest:unit": "tsx ../docs/api/generate.ts && npm run build",
"test:unit": "vitest --run" "test:unit": "vitest --run"
}, },
"dependencies": { "dependencies": {

View file

@ -21,7 +21,14 @@ const vueConfig = defineConfigWithVueTs(
{ {
name: "app/files-to-ignore", name: "app/files-to-ignore",
ignores: ["**/dist/**", "**/dist-ssr/**", "**/coverage/**", "prettier.config.js"], ignores: [
"**/dist/**",
"**/dist-ssr/**",
"**/coverage/**",
"prettier.config.js",
"**/test-results/**",
"**/playwright-report/**",
],
}, },
pluginVue.configs["flat/essential"], pluginVue.configs["flat/essential"],

View file

@ -80,13 +80,14 @@
> >
{{ t("classes") }} {{ t("classes") }}
</v-btn> </v-btn>
<v-btn <!-- TODO Re-enable this button when the discussion page is ready -->
class="menu_item" <!-- <v-btn-->
variant="text" <!-- class="menu_item"-->
to="/user/discussion" <!-- variant="text"-->
> <!-- to="/user/discussion"-->
{{ t("discussions") }} <!-- >-->
</v-btn> <!-- {{ t("discussions") }}-->
<!-- </v-btn>-->
<v-menu open-on-hover> <v-menu open-on-hover>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-btn <v-btn

View file

@ -15,16 +15,35 @@ import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
import type { QueryClient } from "@tanstack/react-query"; import type { QueryClient } from "@tanstack/react-query";
import { invalidateAllSubmissionKeys } from "./submissions"; import { invalidateAllSubmissionKeys } from "./submissions";
function assignmentsQueryKey(classid: string, full: boolean) { type AssignmentsQueryKey = ["assignments", string, boolean];
function assignmentsQueryKey(classid: string, full: boolean): AssignmentsQueryKey {
return ["assignments", classid, full]; return ["assignments", classid, full];
} }
function assignmentQueryKey(classid: string, assignmentNumber: number) {
type AssignmentQueryKey = ["assignment", string, number];
function assignmentQueryKey(classid: string, assignmentNumber: number): AssignmentQueryKey {
return ["assignment", classid, assignmentNumber]; return ["assignment", classid, assignmentNumber];
} }
function assignmentSubmissionsQueryKey(classid: string, assignmentNumber: number, full: boolean) {
type AssignmentSubmissionsQueryKey = ["assignment-submissions", string, number, boolean];
function assignmentSubmissionsQueryKey(
classid: string,
assignmentNumber: number,
full: boolean,
): AssignmentSubmissionsQueryKey {
return ["assignment-submissions", classid, assignmentNumber, full]; return ["assignment-submissions", classid, assignmentNumber, full];
} }
function assignmentQuestionsQueryKey(classid: string, assignmentNumber: number, full: boolean) {
type AssignmentQuestionsQueryKey = ["assignment-questions", string, number, boolean];
function assignmentQuestionsQueryKey(
classid: string,
assignmentNumber: number,
full: boolean,
): AssignmentQuestionsQueryKey {
return ["assignment-questions", classid, assignmentNumber, full]; return ["assignment-questions", classid, assignmentNumber, full];
} }
@ -32,13 +51,15 @@ export async function invalidateAllAssignmentKeys(
queryClient: QueryClient, queryClient: QueryClient,
classid?: string, classid?: string,
assignmentNumber?: number, assignmentNumber?: number,
) { ): Promise<void> {
const keys = ["assignment", "assignment-submissions", "assignment-questions"]; const keys = ["assignment", "assignment-submissions", "assignment-questions"];
for (const key of keys) { await Promise.all(
const queryKey = [key, classid, assignmentNumber].filter((arg) => arg !== undefined); keys.map(async (key) => {
await queryClient.invalidateQueries({ queryKey: queryKey }); const queryKey = [key, classid, assignmentNumber].filter((arg) => arg !== undefined);
} return queryClient.invalidateQueries({ queryKey: queryKey });
}),
);
await queryClient.invalidateQueries({ queryKey: ["assignments", classid].filter((arg) => arg !== undefined) }); await queryClient.invalidateQueries({ queryKey: ["assignments", classid].filter((arg) => arg !== undefined) });
} }
@ -50,12 +71,20 @@ function checkEnabled(
): boolean { ): boolean {
return Boolean(classid) && !isNaN(Number(groupNumber)) && !isNaN(Number(assignmentNumber)); return Boolean(classid) && !isNaN(Number(groupNumber)) && !isNaN(Number(assignmentNumber));
} }
interface Values {
cid: string | undefined;
an: number | undefined;
gn: number | undefined;
f: boolean;
}
function toValues( function toValues(
classid: MaybeRefOrGetter<string | undefined>, classid: MaybeRefOrGetter<string | undefined>,
assignmentNumber: MaybeRefOrGetter<number | undefined>, assignmentNumber: MaybeRefOrGetter<number | undefined>,
groupNumber: MaybeRefOrGetter<number | undefined>, groupNumber: MaybeRefOrGetter<number | undefined>,
full: MaybeRefOrGetter<boolean>, full: MaybeRefOrGetter<boolean>,
) { ): Values {
return { cid: toValue(classid), an: toValue(assignmentNumber), gn: toValue(groupNumber), f: toValue(full) }; return { cid: toValue(classid), an: toValue(assignmentNumber), gn: toValue(groupNumber), f: toValue(full) };
} }

View file

@ -19,32 +19,51 @@ import type { TeacherInvitationsResponse } from "@/controllers/teacher-invitatio
const classController = new ClassController(); const classController = new ClassController();
/* Query cache keys */ /* Query cache keys */
function classesQueryKey(full: boolean) { type ClassesQueryKey = ["classes", boolean];
function classesQueryKey(full: boolean): ClassesQueryKey {
return ["classes", full]; return ["classes", full];
} }
function classQueryKey(classid: string) {
type ClassQueryKey = ["class", string];
function classQueryKey(classid: string): ClassQueryKey {
return ["class", classid]; return ["class", classid];
} }
function classStudentsKey(classid: string, full: boolean) {
type ClassStudentsKey = ["class-students", string, boolean];
function classStudentsKey(classid: string, full: boolean): ClassStudentsKey {
return ["class-students", classid, full]; return ["class-students", classid, full];
} }
function classTeachersKey(classid: string, full: boolean) {
type ClassTeachersKey = ["class-teachers", string, boolean];
function classTeachersKey(classid: string, full: boolean): ClassTeachersKey {
return ["class-teachers", classid, full]; return ["class-teachers", classid, full];
} }
function classTeacherInvitationsKey(classid: string, full: boolean) {
type ClassTeacherInvitationsKey = ["class-teacher-invitations", string, boolean];
function classTeacherInvitationsKey(classid: string, full: boolean): ClassTeacherInvitationsKey {
return ["class-teacher-invitations", classid, full]; return ["class-teacher-invitations", classid, full];
} }
function classAssignmentsKey(classid: string, full: boolean) {
type ClassAssignmentsKey = ["class-assignments", string, boolean];
function classAssignmentsKey(classid: string, full: boolean): ClassAssignmentsKey {
return ["class-assignments", classid, full]; return ["class-assignments", classid, full];
} }
export async function invalidateAllClassKeys(queryClient: QueryClient, classid?: string) { export async function invalidateAllClassKeys(queryClient: QueryClient, classid?: string): Promise<void> {
const keys = ["class", "class-students", "class-teachers", "class-teacher-invitations", "class-assignments"]; const keys = ["class", "class-students", "class-teachers", "class-teacher-invitations", "class-assignments"];
for (const key of keys) { await Promise.all(
const queryKey = [key, classid].filter((arg) => arg !== undefined); keys.map(async (key) => {
await queryClient.invalidateQueries({ queryKey: queryKey }); const queryKey = [key, classid].filter((arg) => arg !== undefined);
} return queryClient.invalidateQueries({ queryKey: queryKey });
}),
);
await queryClient.invalidateQueries({ queryKey: ["classes"] }); await queryClient.invalidateQueries({ queryKey: ["classes"] });
} }

View file

@ -1,4 +1,3 @@
import type { ClassesResponse } from "@/controllers/classes";
import { GroupController, type GroupResponse, type GroupsResponse } from "@/controllers/groups"; import { GroupController, type GroupResponse, type GroupsResponse } from "@/controllers/groups";
import type { QuestionsResponse } from "@/controllers/questions"; import type { QuestionsResponse } from "@/controllers/questions";
import type { SubmissionsResponse } from "@/controllers/submissions"; import type { SubmissionsResponse } from "@/controllers/submissions";
@ -6,25 +5,45 @@ import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
import { import {
QueryClient, QueryClient,
useMutation, useMutation,
type UseMutationReturnType,
useQuery, useQuery,
useQueryClient, useQueryClient,
type UseMutationReturnType,
type UseQueryReturnType, type UseQueryReturnType,
} from "@tanstack/vue-query"; } from "@tanstack/vue-query";
import { computed, toValue, type MaybeRefOrGetter } from "vue"; import { computed, type MaybeRefOrGetter, toValue } from "vue";
import { invalidateAllAssignmentKeys } from "./assignments";
import { invalidateAllSubmissionKeys } from "./submissions"; import { invalidateAllSubmissionKeys } from "./submissions";
export function groupsQueryKey(classid: string, assignmentNumber: number, full: boolean) { type GroupsQueryKey = ["groups", string, number, boolean];
export function groupsQueryKey(classid: string, assignmentNumber: number, full: boolean): GroupsQueryKey {
return ["groups", classid, assignmentNumber, full]; return ["groups", classid, assignmentNumber, full];
} }
function groupQueryKey(classid: string, assignmentNumber: number, groupNumber: number) {
type GroupQueryKey = ["group", string, number, number];
function groupQueryKey(classid: string, assignmentNumber: number, groupNumber: number): GroupQueryKey {
return ["group", classid, assignmentNumber, groupNumber]; return ["group", classid, assignmentNumber, groupNumber];
} }
function groupSubmissionsQueryKey(classid: string, assignmentNumber: number, groupNumber: number, full: boolean) {
type GroupSubmissionsQueryKey = ["group-submissions", string, number, number, boolean];
function groupSubmissionsQueryKey(
classid: string,
assignmentNumber: number,
groupNumber: number,
full: boolean,
): GroupSubmissionsQueryKey {
return ["group-submissions", classid, assignmentNumber, groupNumber, full]; return ["group-submissions", classid, assignmentNumber, groupNumber, full];
} }
function groupQuestionsQueryKey(classid: string, assignmentNumber: number, groupNumber: number, full: boolean) {
type GroupQuestionsQueryKey = ["group-questions", string, number, number, boolean];
function groupQuestionsQueryKey(
classid: string,
assignmentNumber: number,
groupNumber: number,
full: boolean,
): GroupQuestionsQueryKey {
return ["group-questions", classid, assignmentNumber, groupNumber, full]; return ["group-questions", classid, assignmentNumber, groupNumber, full];
} }
@ -33,13 +52,14 @@ export async function invalidateAllGroupKeys(
classid?: string, classid?: string,
assignmentNumber?: number, assignmentNumber?: number,
groupNumber?: number, groupNumber?: number,
) { ): Promise<void> {
const keys = ["group", "group-submissions", "group-questions"]; const keys = ["group", "group-submissions", "group-questions"];
await Promise.all(
for (const key of keys) { keys.map(async (key) => {
const queryKey = [key, classid, assignmentNumber, groupNumber].filter((arg) => arg !== undefined); const queryKey = [key, classid, assignmentNumber, groupNumber].filter((arg) => arg !== undefined);
await queryClient.invalidateQueries({ queryKey: queryKey }); return queryClient.invalidateQueries({ queryKey: queryKey });
} }),
);
await queryClient.invalidateQueries({ await queryClient.invalidateQueries({
queryKey: ["groups", classid, assignmentNumber].filter((arg) => arg !== undefined), queryKey: ["groups", classid, assignmentNumber].filter((arg) => arg !== undefined),
@ -53,12 +73,20 @@ function checkEnabled(
): boolean { ): boolean {
return Boolean(classid) && !isNaN(Number(groupNumber)) && !isNaN(Number(assignmentNumber)); return Boolean(classid) && !isNaN(Number(groupNumber)) && !isNaN(Number(assignmentNumber));
} }
interface Values {
cid: string | undefined;
an: number | undefined;
gn: number | undefined;
f: boolean;
}
function toValues( function toValues(
classid: MaybeRefOrGetter<string | undefined>, classid: MaybeRefOrGetter<string | undefined>,
assignmentNumber: MaybeRefOrGetter<number | undefined>, assignmentNumber: MaybeRefOrGetter<number | undefined>,
groupNumber: MaybeRefOrGetter<number | undefined>, groupNumber: MaybeRefOrGetter<number | undefined>,
full: MaybeRefOrGetter<boolean>, full: MaybeRefOrGetter<boolean>,
) { ): Values {
return { cid: toValue(classid), an: toValue(assignmentNumber), gn: toValue(groupNumber), f: toValue(full) }; return { cid: toValue(classid), an: toValue(assignmentNumber), gn: toValue(groupNumber), f: toValue(full) };
} }

View file

@ -10,10 +10,25 @@ import {
} from "@tanstack/vue-query"; } from "@tanstack/vue-query";
import { computed, toValue, type MaybeRefOrGetter } from "vue"; import { computed, toValue, type MaybeRefOrGetter } from "vue";
function submissionsQueryKey(classid: string, assignmentNumber: number, groupNumber: number, full: boolean) { type SubmissionsQueryKey = ["submissions", string, number, number, boolean];
function submissionsQueryKey(
classid: string,
assignmentNumber: number,
groupNumber: number,
full: boolean,
): SubmissionsQueryKey {
return ["submissions", classid, assignmentNumber, groupNumber, full]; return ["submissions", classid, assignmentNumber, groupNumber, full];
} }
function submissionQueryKey(classid: string, assignmentNumber: number, groupNumber: number, submissionNumber: number) {
type SubmissionQueryKey = ["submission", string, number, number, number];
function submissionQueryKey(
classid: string,
assignmentNumber: number,
groupNumber: number,
submissionNumber: number,
): SubmissionQueryKey {
return ["submission", classid, assignmentNumber, groupNumber, submissionNumber]; return ["submission", classid, assignmentNumber, groupNumber, submissionNumber];
} }
@ -23,15 +38,17 @@ export async function invalidateAllSubmissionKeys(
assignmentNumber?: number, assignmentNumber?: number,
groupNumber?: number, groupNumber?: number,
submissionNumber?: number, submissionNumber?: number,
) { ): Promise<void> {
const keys = ["submission"]; const keys = ["submission"];
for (const key of keys) { await Promise.all(
const queryKey = [key, classid, assignmentNumber, groupNumber, submissionNumber].filter( keys.map(async (key) => {
(arg) => arg !== undefined, const queryKey = [key, classid, assignmentNumber, groupNumber, submissionNumber].filter(
); (arg) => arg !== undefined,
await queryClient.invalidateQueries({ queryKey: queryKey }); );
} return queryClient.invalidateQueries({ queryKey: queryKey });
}),
);
await queryClient.invalidateQueries({ await queryClient.invalidateQueries({
queryKey: ["submissions", classid, assignmentNumber, groupNumber].filter((arg) => arg !== undefined), queryKey: ["submissions", classid, assignmentNumber, groupNumber].filter((arg) => arg !== undefined),
@ -57,13 +74,22 @@ function checkEnabled(
!isNaN(Number(submissionNumber)) !isNaN(Number(submissionNumber))
); );
} }
interface Values {
cid: string | undefined;
an: number | undefined;
gn: number | undefined;
sn: number | undefined;
f: boolean;
}
function toValues( function toValues(
classid: MaybeRefOrGetter<string | undefined>, classid: MaybeRefOrGetter<string | undefined>,
assignmentNumber: MaybeRefOrGetter<number | undefined>, assignmentNumber: MaybeRefOrGetter<number | undefined>,
groupNumber: MaybeRefOrGetter<number | undefined>, groupNumber: MaybeRefOrGetter<number | undefined>,
submissionNumber: MaybeRefOrGetter<number | undefined>, submissionNumber: MaybeRefOrGetter<number | undefined>,
full: MaybeRefOrGetter<boolean>, full: MaybeRefOrGetter<boolean>,
) { ): Values {
return { return {
cid: toValue(classid), cid: toValue(classid),
an: toValue(assignmentNumber), an: toValue(assignmentNumber),
@ -93,7 +119,7 @@ export function useSubmissionQuery(
assignmentNumber: MaybeRefOrGetter<number | undefined>, assignmentNumber: MaybeRefOrGetter<number | undefined>,
groupNumber: MaybeRefOrGetter<number | undefined>, groupNumber: MaybeRefOrGetter<number | undefined>,
): UseQueryReturnType<SubmissionResponse, Error> { ): UseQueryReturnType<SubmissionResponse, Error> {
const { cid, an, gn, sn, f } = toValues(classid, assignmentNumber, groupNumber, 1, true); const { cid, an, gn, sn } = toValues(classid, assignmentNumber, groupNumber, 1, true);
return useQuery({ return useQuery({
queryKey: computed(() => submissionQueryKey(cid!, an!, gn!, sn!)), queryKey: computed(() => submissionQueryKey(cid!, an!, gn!, sn!)),

View file

@ -6,7 +6,6 @@ import NotFound from "@/components/errors/NotFound.vue";
import CreateAssignment from "@/views/assignments/CreateAssignment.vue"; import CreateAssignment from "@/views/assignments/CreateAssignment.vue";
import CreateDiscussion from "@/views/discussions/CreateDiscussion.vue"; import CreateDiscussion from "@/views/discussions/CreateDiscussion.vue";
import CallbackPage from "@/views/CallbackPage.vue"; import CallbackPage from "@/views/CallbackPage.vue";
import UserDiscussions from "@/views/discussions/UserDiscussions.vue";
import UserClasses from "@/views/classes/UserClasses.vue"; import UserClasses from "@/views/classes/UserClasses.vue";
import UserAssignments from "@/views/classes/UserAssignments.vue"; import UserAssignments from "@/views/classes/UserAssignments.vue";
import authState from "@/services/auth/auth-service.ts"; import authState from "@/services/auth/auth-service.ts";
@ -56,11 +55,12 @@ const router = createRouter({
name: "UserClasses", name: "UserClasses",
component: UserClasses, component: UserClasses,
}, },
{ // TODO Re-enable this route when the discussion page is ready
path: "discussion", // {
name: "UserDiscussions", // Path: "discussion",
component: UserDiscussions, // Name: "UserDiscussions",
}, // Component: UserDiscussions,
// },
], ],
}, },