Merge pull request #176 from SELab-2/feat/pagina-overzicht-klassen-voor-student
feat: Overzicht klassen voor student
This commit is contained in:
Laure Jablonski
GitHub
commit
20aea78c70
28 changed files with 1244 additions and 60 deletions
|
|
@ -7,7 +7,7 @@
|
|||
"main": "dist/app.js",
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production tsc --build",
|
||||
"dev": "cross-env NODE_ENV=development tsx watch --env-file=.env.development.local src/app.ts",
|
||||
"dev": "cross-env NODE_ENV=development tsx tool/seed.ts; tsx watch --env-file=.env.development.local src/app.ts",
|
||||
"start": "cross-env NODE_ENV=production node --env-file=.env dist/app.js",
|
||||
"format": "prettier --write src/",
|
||||
"format-check": "prettier --check src/",
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export async function createClassHandler(req: Request, res: Response): Promise<v
|
|||
return;
|
||||
}
|
||||
|
||||
res.status(201).json(cls);
|
||||
res.status(201).json({ class: cls });
|
||||
}
|
||||
|
||||
export async function getClassHandler(req: Request, res: Response): Promise<void> {
|
||||
|
|
@ -40,7 +40,7 @@ export async function getClassHandler(req: Request, res: Response): Promise<void
|
|||
return;
|
||||
}
|
||||
|
||||
res.json(cls);
|
||||
res.json({ class: cls });
|
||||
}
|
||||
|
||||
export async function getClassStudentsHandler(req: Request, res: Response): Promise<void> {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
import { EntityManager, MikroORM } from '@mikro-orm/core';
|
||||
import { EntityManager, IDatabaseDriver, MikroORM } from '@mikro-orm/core';
|
||||
import config from './mikro-orm.config.js';
|
||||
import { envVars, getEnvVar } from './util/envVars.js';
|
||||
import { getLogger, Logger } from './logging/initalize.js';
|
||||
|
||||
let orm: MikroORM | undefined;
|
||||
export async function initORM(testingMode = false): Promise<void> {
|
||||
export async function initORM(testingMode = false): Promise<MikroORM<IDatabaseDriver, EntityManager>> {
|
||||
const logger: Logger = getLogger();
|
||||
|
||||
logger.info('Initializing ORM');
|
||||
|
|
@ -25,6 +25,8 @@ export async function initORM(testingMode = false): Promise<void> {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
return orm;
|
||||
}
|
||||
export function forkEntityManager(): EntityManager {
|
||||
if (!orm) {
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@ describe('Student controllers', () => {
|
|||
|
||||
it('Get join request by student and class', async () => {
|
||||
req = {
|
||||
params: { username: 'PinkFloyd', classId: 'id02' },
|
||||
params: { username: 'PinkFloyd', classId: '34d484a1-295f-4e9f-bfdc-3e7a23d86a89' },
|
||||
};
|
||||
|
||||
await getStudentRequestHandler(req as Request, res as Response);
|
||||
|
|
@ -201,7 +201,7 @@ describe('Student controllers', () => {
|
|||
it('Create join request', async () => {
|
||||
req = {
|
||||
params: { username: 'Noordkaap' },
|
||||
body: { classId: 'id02' },
|
||||
body: { classId: '34d484a1-295f-4e9f-bfdc-3e7a23d86a89' },
|
||||
};
|
||||
|
||||
await createStudentRequestHandler(req as Request, res as Response);
|
||||
|
|
@ -212,7 +212,7 @@ describe('Student controllers', () => {
|
|||
it('Create join request duplicate', async () => {
|
||||
req = {
|
||||
params: { username: 'Tool' },
|
||||
body: { classId: 'id02' },
|
||||
body: { classId: '34d484a1-295f-4e9f-bfdc-3e7a23d86a89' },
|
||||
};
|
||||
|
||||
await expect(async () => createStudentRequestHandler(req as Request, res as Response)).rejects.toThrow(ConflictException);
|
||||
|
|
@ -220,7 +220,7 @@ describe('Student controllers', () => {
|
|||
|
||||
it('Delete join request', async () => {
|
||||
req = {
|
||||
params: { username: 'Noordkaap', classId: 'id02' },
|
||||
params: { username: 'Noordkaap', classId: '34d484a1-295f-4e9f-bfdc-3e7a23d86a89' },
|
||||
};
|
||||
|
||||
await deleteClassJoinRequestHandler(req as Request, res as Response);
|
||||
|
|
|
|||
|
|
@ -104,9 +104,9 @@ describe('Teacher controllers', () => {
|
|||
const result = jsonMock.mock.lastCall?.[0];
|
||||
|
||||
const teacherUsernames = result.teachers.map((s: TeacherDTO) => s.username);
|
||||
expect(teacherUsernames).toContain('FooFighters');
|
||||
expect(teacherUsernames).toContain('testleerkracht1');
|
||||
|
||||
expect(result.teachers).toHaveLength(4);
|
||||
expect(result.teachers).toHaveLength(5);
|
||||
});
|
||||
|
||||
it('Deleting non-existent student', async () => {
|
||||
|
|
@ -117,7 +117,7 @@ describe('Teacher controllers', () => {
|
|||
|
||||
it('Get teacher classes', async () => {
|
||||
req = {
|
||||
params: { username: 'FooFighters' },
|
||||
params: { username: 'testleerkracht1' },
|
||||
query: { full: 'true' },
|
||||
};
|
||||
|
||||
|
|
@ -132,7 +132,7 @@ describe('Teacher controllers', () => {
|
|||
|
||||
it('Get teacher students', async () => {
|
||||
req = {
|
||||
params: { username: 'FooFighters' },
|
||||
params: { username: 'testleerkracht1' },
|
||||
query: { full: 'true' },
|
||||
};
|
||||
|
||||
|
|
@ -169,7 +169,7 @@ describe('Teacher controllers', () => {
|
|||
it('Get join requests by class', async () => {
|
||||
req = {
|
||||
query: { username: 'LimpBizkit' },
|
||||
params: { classId: 'id02' },
|
||||
params: { classId: '34d484a1-295f-4e9f-bfdc-3e7a23d86a89' },
|
||||
};
|
||||
|
||||
await getStudentJoinRequestHandler(req as Request, res as Response);
|
||||
|
|
@ -184,7 +184,7 @@ describe('Teacher controllers', () => {
|
|||
it('Update join request status', async () => {
|
||||
req = {
|
||||
query: { username: 'LimpBizkit', studentUsername: 'PinkFloyd' },
|
||||
params: { classId: 'id02' },
|
||||
params: { classId: '34d484a1-295f-4e9f-bfdc-3e7a23d86a89' },
|
||||
body: { accepted: 'true' },
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ describe('AssignmentRepository', () => {
|
|||
});
|
||||
|
||||
it('should return the requested assignment', async () => {
|
||||
const class_ = await classRepository.findById('id02');
|
||||
const class_ = await classRepository.findById('34d484a1-295f-4e9f-bfdc-3e7a23d86a89');
|
||||
const assignment = await assignmentRepository.findByClassAndId(class_!, 2);
|
||||
|
||||
expect(assignment).toBeTruthy();
|
||||
|
|
@ -23,7 +23,7 @@ describe('AssignmentRepository', () => {
|
|||
});
|
||||
|
||||
it('should return all assignments for a class', async () => {
|
||||
const class_ = await classRepository.findById('id02');
|
||||
const class_ = await classRepository.findById('34d484a1-295f-4e9f-bfdc-3e7a23d86a89');
|
||||
const assignments = await assignmentRepository.findAllAssignmentsInClass(class_!);
|
||||
|
||||
expect(assignments).toBeTruthy();
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ describe('GroupRepository', () => {
|
|||
});
|
||||
|
||||
it('should return the requested group', async () => {
|
||||
const class_ = await classRepository.findById('id01');
|
||||
const class_ = await classRepository.findById('8764b861-90a6-42e5-9732-c0d9eb2f55f9');
|
||||
const assignment = await assignmentRepository.findByClassAndId(class_!, 1);
|
||||
|
||||
const group = await groupRepository.findByAssignmentAndGroupNumber(assignment!, 1);
|
||||
|
|
@ -27,7 +27,7 @@ describe('GroupRepository', () => {
|
|||
});
|
||||
|
||||
it('should return all groups for assignment', async () => {
|
||||
const class_ = await classRepository.findById('id01');
|
||||
const class_ = await classRepository.findById('8764b861-90a6-42e5-9732-c0d9eb2f55f9');
|
||||
const assignment = await assignmentRepository.findByClassAndId(class_!, 1);
|
||||
|
||||
const groups = await groupRepository.findAllGroupsForAssignment(assignment!);
|
||||
|
|
@ -37,7 +37,7 @@ describe('GroupRepository', () => {
|
|||
});
|
||||
|
||||
it('should not find removed group', async () => {
|
||||
const class_ = await classRepository.findById('id02');
|
||||
const class_ = await classRepository.findById('34d484a1-295f-4e9f-bfdc-3e7a23d86a89');
|
||||
const assignment = await assignmentRepository.findByClassAndId(class_!, 2);
|
||||
|
||||
await groupRepository.deleteByAssignmentAndGroupNumber(assignment!, 1);
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@ describe('SubmissionRepository', () => {
|
|||
|
||||
it('should find the most recent submission for a group', async () => {
|
||||
const id = new LearningObjectIdentifier('id03', Language.English, 1);
|
||||
const class_ = await classRepository.findById('id01');
|
||||
const class_ = await classRepository.findById('8764b861-90a6-42e5-9732-c0d9eb2f55f9');
|
||||
const assignment = await assignmentRepository.findByClassAndId(class_!, 1);
|
||||
const group = await groupRepository.findByAssignmentAndGroupNumber(assignment!, 1);
|
||||
const submission = await submissionRepository.findMostRecentSubmissionForGroup(id, group!);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ describe('ClassJoinRequestRepository', () => {
|
|||
});
|
||||
|
||||
it('should list all requests to a single class', async () => {
|
||||
const class_ = await cassRepository.findById('id02');
|
||||
const class_ = await cassRepository.findById('34d484a1-295f-4e9f-bfdc-3e7a23d86a89');
|
||||
const requests = await classJoinRequestRepository.findAllOpenRequestsTo(class_!);
|
||||
|
||||
expect(requests).toBeTruthy();
|
||||
|
|
@ -35,7 +35,7 @@ describe('ClassJoinRequestRepository', () => {
|
|||
|
||||
it('should not find a removed request', async () => {
|
||||
const student = await studentRepository.findByUsername('SmashingPumpkins');
|
||||
const class_ = await cassRepository.findById('id03');
|
||||
const class_ = await cassRepository.findById('80dcc3e0-1811-4091-9361-42c0eee91cfa');
|
||||
await classJoinRequestRepository.deleteBy(student!, class_!);
|
||||
|
||||
const request = await classJoinRequestRepository.findAllRequestsBy(student!);
|
||||
|
|
|
|||
|
|
@ -18,16 +18,16 @@ describe('ClassRepository', () => {
|
|||
});
|
||||
|
||||
it('should return requested class', async () => {
|
||||
const classVar = await classRepository.findById('id01');
|
||||
const classVar = await classRepository.findById('8764b861-90a6-42e5-9732-c0d9eb2f55f9');
|
||||
|
||||
expect(classVar).toBeTruthy();
|
||||
expect(classVar?.displayName).toBe('class01');
|
||||
});
|
||||
|
||||
it('class should be gone after deletion', async () => {
|
||||
await classRepository.deleteById('id04');
|
||||
await classRepository.deleteById('33d03536-83b8-4880-9982-9bbf2f908ddf');
|
||||
|
||||
const classVar = await classRepository.findById('id04');
|
||||
const classVar = await classRepository.findById('33d03536-83b8-4880-9982-9bbf2f908ddf');
|
||||
|
||||
expect(classVar).toBeNull();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ describe('ClassRepository', () => {
|
|||
});
|
||||
|
||||
it('should return all invitations for a class', async () => {
|
||||
const class_ = await classRepository.findById('id02');
|
||||
const class_ = await classRepository.findById('34d484a1-295f-4e9f-bfdc-3e7a23d86a89');
|
||||
const invitations = await teacherInvitationRepository.findAllInvitationsForClass(class_!);
|
||||
|
||||
expect(invitations).toBeTruthy();
|
||||
|
|
@ -42,7 +42,7 @@ describe('ClassRepository', () => {
|
|||
});
|
||||
|
||||
it('should not find a removed invitation', async () => {
|
||||
const class_ = await classRepository.findById('id01');
|
||||
const class_ = await classRepository.findById('8764b861-90a6-42e5-9732-c0d9eb2f55f9');
|
||||
const sender = await teacherRepository.findByUsername('FooFighters');
|
||||
const receiver = await teacherRepository.findByUsername('LimpBizkit');
|
||||
await teacherInvitationRepository.deleteBy(class_!, sender!, receiver!);
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ import { Student } from '../../../src/entities/users/student.entity';
|
|||
import { Teacher } from '../../../src/entities/users/teacher.entity';
|
||||
|
||||
export function makeTestClasses(em: EntityManager, students: Student[], teachers: Teacher[]): Class[] {
|
||||
const studentsClass01 = students.slice(0, 7);
|
||||
const teacherClass01: Teacher[] = teachers.slice(0, 1);
|
||||
const studentsClass01 = students.slice(0, 8);
|
||||
const teacherClass01: Teacher[] = teachers.slice(4, 5);
|
||||
|
||||
const class01 = em.create(Class, {
|
||||
classId: 'id01',
|
||||
classId: '8764b861-90a6-42e5-9732-c0d9eb2f55f9',
|
||||
displayName: 'class01',
|
||||
teachers: teacherClass01,
|
||||
students: studentsClass01,
|
||||
|
|
@ -18,7 +18,7 @@ export function makeTestClasses(em: EntityManager, students: Student[], teachers
|
|||
const teacherClass02: Teacher[] = teachers.slice(1, 2);
|
||||
|
||||
const class02 = em.create(Class, {
|
||||
classId: 'id02',
|
||||
classId: '34d484a1-295f-4e9f-bfdc-3e7a23d86a89',
|
||||
displayName: 'class02',
|
||||
teachers: teacherClass02,
|
||||
students: studentsClass02,
|
||||
|
|
@ -28,7 +28,7 @@ export function makeTestClasses(em: EntityManager, students: Student[], teachers
|
|||
const teacherClass03: Teacher[] = teachers.slice(2, 3);
|
||||
|
||||
const class03 = em.create(Class, {
|
||||
classId: 'id03',
|
||||
classId: '80dcc3e0-1811-4091-9361-42c0eee91cfa',
|
||||
displayName: 'class03',
|
||||
teachers: teacherClass03,
|
||||
students: studentsClass03,
|
||||
|
|
@ -38,7 +38,7 @@ export function makeTestClasses(em: EntityManager, students: Student[], teachers
|
|||
const teacherClass04: Teacher[] = teachers.slice(2, 3);
|
||||
|
||||
const class04 = em.create(Class, {
|
||||
classId: 'id04',
|
||||
classId: '33d03536-83b8-4880-9982-9bbf2f908ddf',
|
||||
displayName: 'class04',
|
||||
teachers: teacherClass04,
|
||||
students: studentsClass04,
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ export const TEST_STUDENTS = [
|
|||
{ username: 'TheDoors', firstName: 'Jim', lastName: 'Morisson' },
|
||||
// ⚠️ Deze mag niet gebruikt worden in elke test!
|
||||
{ username: 'Nirvana', firstName: 'Kurt', lastName: 'Cobain' },
|
||||
// Makes sure when logged in as leerling1, there exists a corresponding user
|
||||
{ username: 'testleerling1', firstName: 'Gerald', lastName: 'Schmittinger' },
|
||||
];
|
||||
|
||||
// 🏗️ Functie die ORM entities maakt uit de data array
|
||||
|
|
|
|||
|
|
@ -27,5 +27,12 @@ export function makeTestTeachers(em: EntityManager): Teacher[] {
|
|||
lastName: 'Cappelle',
|
||||
});
|
||||
|
||||
return [teacher01, teacher02, teacher03, teacher04];
|
||||
// Makes sure when logged in as testleerkracht1, there exists a corresponding user
|
||||
const teacher05 = em.create(Teacher, {
|
||||
username: 'testleerkracht1',
|
||||
firstName: 'Bob',
|
||||
lastName: 'Dylan',
|
||||
});
|
||||
|
||||
return [teacher01, teacher02, teacher03, teacher04, teacher05];
|
||||
}
|
||||
|
|
|
|||
72
backend/tool/seed.ts
Normal file
72
backend/tool/seed.ts
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import { forkEntityManager, initORM } from '../src/orm.js';
|
||||
import dotenv from 'dotenv';
|
||||
import { makeTestAssignemnts } from '../tests/test_assets/assignments/assignments.testdata.js';
|
||||
import { makeTestGroups } from '../tests/test_assets/assignments/groups.testdata.js';
|
||||
import { makeTestSubmissions } from '../tests/test_assets/assignments/submission.testdata.js';
|
||||
import { makeTestClassJoinRequests } from '../tests/test_assets/classes/class-join-requests.testdata.js';
|
||||
import { makeTestClasses } from '../tests/test_assets/classes/classes.testdata.js';
|
||||
import { makeTestTeacherInvitations } from '../tests/test_assets/classes/teacher-invitations.testdata.js';
|
||||
import { makeTestAttachments } from '../tests/test_assets/content/attachments.testdata.js';
|
||||
import { makeTestLearningObjects } from '../tests/test_assets/content/learning-objects.testdata.js';
|
||||
import { makeTestLearningPaths } from '../tests/test_assets/content/learning-paths.testdata.js';
|
||||
import { makeTestAnswers } from '../tests/test_assets/questions/answers.testdata.js';
|
||||
import { makeTestQuestions } from '../tests/test_assets/questions/questions.testdata.js';
|
||||
import { makeTestStudents } from '../tests/test_assets/users/students.testdata.js';
|
||||
import { makeTestTeachers } from '../tests/test_assets/users/teachers.testdata.js';
|
||||
import { getLogger, Logger } from '../src/logging/initalize.js';
|
||||
|
||||
const logger: Logger = getLogger();
|
||||
|
||||
export async function seedDatabase(): Promise<void> {
|
||||
dotenv.config({ path: '.env.development.local' });
|
||||
const orm = await initORM();
|
||||
await orm.schema.clearDatabase();
|
||||
|
||||
const em = forkEntityManager();
|
||||
|
||||
logger.info('seeding database...');
|
||||
|
||||
const students = makeTestStudents(em);
|
||||
const teachers = makeTestTeachers(em);
|
||||
const learningObjects = makeTestLearningObjects(em);
|
||||
const learningPaths = makeTestLearningPaths(em);
|
||||
const classes = makeTestClasses(em, students, teachers);
|
||||
const assignments = makeTestAssignemnts(em, classes);
|
||||
const groups = makeTestGroups(em, students, assignments);
|
||||
|
||||
assignments[0].groups = groups.slice(0, 3);
|
||||
assignments[1].groups = groups.slice(3, 4);
|
||||
|
||||
const teacherInvitations = makeTestTeacherInvitations(em, teachers, classes);
|
||||
const classJoinRequests = makeTestClassJoinRequests(em, students, classes);
|
||||
const attachments = makeTestAttachments(em, learningObjects);
|
||||
|
||||
learningObjects[1].attachments = attachments;
|
||||
|
||||
const questions = makeTestQuestions(em, students);
|
||||
const answers = makeTestAnswers(em, teachers, questions);
|
||||
const submissions = makeTestSubmissions(em, students, groups);
|
||||
|
||||
// Persist all entities
|
||||
await em.persistAndFlush([
|
||||
...students,
|
||||
...teachers,
|
||||
...learningObjects,
|
||||
...learningPaths,
|
||||
...classes,
|
||||
...assignments,
|
||||
...groups,
|
||||
...teacherInvitations,
|
||||
...classJoinRequests,
|
||||
...attachments,
|
||||
...questions,
|
||||
...answers,
|
||||
...submissions,
|
||||
]);
|
||||
|
||||
logger.info('Development database seeded successfully!');
|
||||
|
||||
await orm.close();
|
||||
}
|
||||
|
||||
seedDatabase().catch(logger.error);
|
||||
|
|
@ -10,7 +10,7 @@ export abstract class BaseController {
|
|||
}
|
||||
|
||||
private static assertSuccessResponse(response: AxiosResponse<unknown, unknown>): void {
|
||||
if (response.status / 100 !== 2) {
|
||||
if (response.status < 200 || response.status >= 300) {
|
||||
throw new HttpErrorResponseException(response);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { ThemeController } from "@/controllers/themes.ts";
|
||||
import { LearningObjectController } from "@/controllers/learning-objects.ts";
|
||||
import { LearningPathController } from "@/controllers/learning-paths.ts";
|
||||
import { ClassController } from "@/controllers/classes.ts";
|
||||
|
||||
export function controllerGetter<T>(factory: new () => T): () => T {
|
||||
let instance: T | undefined;
|
||||
|
|
@ -16,3 +17,4 @@ export function controllerGetter<T>(factory: new () => T): () => T {
|
|||
export const getThemeController = controllerGetter(ThemeController);
|
||||
export const getLearningObjectController = controllerGetter(LearningObjectController);
|
||||
export const getLearningPathController = controllerGetter(LearningPathController);
|
||||
export const getClassController = controllerGetter(ClassController);
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@ export class StudentController extends BaseController {
|
|||
}
|
||||
|
||||
async createJoinRequest(username: string, classId: string): Promise<JoinRequestResponse> {
|
||||
return this.post<JoinRequestResponse>(`/${username}/joinRequests}`, classId);
|
||||
return this.post<JoinRequestResponse>(`/${username}/joinRequests`, { classId });
|
||||
}
|
||||
|
||||
async deleteJoinRequest(username: string, classId: string): Promise<JoinRequestResponse> {
|
||||
|
|
|
|||
|
|
@ -17,6 +17,11 @@
|
|||
"inclusive": "Inclusiv",
|
||||
"sociallyRelevant": "Gesellschaftlich relevant",
|
||||
"translate": "übersetzen",
|
||||
"joinClass": "Klasse beitreten",
|
||||
"JoinClassExplanation": "Geben Sie den Code ein, den Ihnen die Lehrkraft mitgeteilt hat, um der Klasse beizutreten.",
|
||||
"invalidFormat": "Ungültiges Format",
|
||||
"submitCode": "senden",
|
||||
"members": "Mitglieder",
|
||||
"themes": "Themen",
|
||||
"choose-theme": "Wähle ein thema",
|
||||
"choose-age": "Alter auswählen",
|
||||
|
|
@ -51,5 +56,24 @@
|
|||
"noLearningPathsFoundDescription": "Es gibt keine Lernpfade, die zu Ihrem Suchbegriff passen.",
|
||||
"legendNotCompletedYet": "Noch nicht fertig",
|
||||
"legendCompleted": "Fertig",
|
||||
"legendTeacherExclusive": "Information für Lehrkräfte"
|
||||
"legendTeacherExclusive": "Information für Lehrkräfte",
|
||||
"code": "code",
|
||||
"class": "Klasse",
|
||||
"invitations": "Einladungen",
|
||||
"createClass": "Klasse erstellen",
|
||||
"createClassInstructions": "Geben Sie einen Namen für Ihre Klasse ein und klicken Sie auf „Erstellen“. Es erscheint ein Fenster mit einem Code, den Sie kopieren können. Geben Sie diesen Code an Ihre Schüler weiter und sie können Ihrer Klasse beitreten.",
|
||||
"classname": "Klassenname",
|
||||
"EnterNameOfClass": "einen Klassennamen eingeben.",
|
||||
"create": "erstellen",
|
||||
"sender": "Absender",
|
||||
"nameIsMandatory": "Der Klassenname ist ein Pflichtfeld",
|
||||
"onlyUse": "nur Buchstaben, Zahlen, Bindestriche (-) und Unterstriche (_) verwenden",
|
||||
"close": "schließen",
|
||||
"copied": "kopiert!",
|
||||
"accept": "akzeptieren",
|
||||
"deny": "ablehnen",
|
||||
"sent": "sent",
|
||||
"failed": "gescheitert",
|
||||
"wrong": "etwas ist schief gelaufen",
|
||||
"created": "erstellt"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,11 @@
|
|||
"sociallyRelevant": "Socially relevant",
|
||||
"login": "log in",
|
||||
"translate": "translate",
|
||||
"joinClass": "Join class",
|
||||
"JoinClassExplanation": "Enter the code the teacher has given you to join the class.",
|
||||
"invalidFormat": "Invalid format.",
|
||||
"submitCode": "submit",
|
||||
"members": "members",
|
||||
"themes": "Themes",
|
||||
"choose-theme": "Select a theme",
|
||||
"choose-age": "Select age",
|
||||
|
|
@ -51,5 +56,24 @@
|
|||
"high-school": "16-18 years old",
|
||||
"older": "18 and older"
|
||||
},
|
||||
"read-more": "Read more"
|
||||
"read-more": "Read more",
|
||||
"code": "code",
|
||||
"class": "class",
|
||||
"invitations": "invitations",
|
||||
"createClass": "create class",
|
||||
"classname": "classname",
|
||||
"EnterNameOfClass": "Enter a classname.",
|
||||
"create": "create",
|
||||
"sender": "sender",
|
||||
"nameIsMandatory": "classname is mandatory",
|
||||
"onlyUse": "only use letters, numbers, dashes (-) and underscores (_)",
|
||||
"close": "close",
|
||||
"copied": "copied!",
|
||||
"accept": "accept",
|
||||
"deny": "deny",
|
||||
"createClassInstructions": "Enter a name for your class and click on create. A window will appear with a code that you can copy. Give this code to your students and they will be able to join.",
|
||||
"sent": "sent",
|
||||
"failed": "failed",
|
||||
"wrong": "something went wrong",
|
||||
"created": "created"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,11 @@
|
|||
"inclusive": "Inclusif",
|
||||
"sociallyRelevant": "Socialement pertinent",
|
||||
"translate": "traduire",
|
||||
"joinClass": "Rejoindre une classe",
|
||||
"JoinClassExplanation": "Entrez le code que l'enseignant vous a donné pour rejoindre la classe.",
|
||||
"invalidFormat": "Format non valide.",
|
||||
"submitCode": "envoyer",
|
||||
"members": "membres",
|
||||
"themes": "Thèmes",
|
||||
"choose-theme": "Choisis un thème",
|
||||
"choose-age": "Choisis un âge",
|
||||
|
|
@ -51,5 +56,24 @@
|
|||
"high-school": "16-18 ans",
|
||||
"older": "18 et plus"
|
||||
},
|
||||
"read-more": "En savoir plus"
|
||||
"read-more": "En savoir plus",
|
||||
"code": "code",
|
||||
"class": "classe",
|
||||
"invitations": "invitations",
|
||||
"createClass": "créer une classe",
|
||||
"createClassInstructions": "Entrez un nom pour votre classe et cliquez sur créer. Une fenêtre apparaît avec un code que vous pouvez copier. Donnez ce code à vos élèves et ils pourront rejoindre votre classe.",
|
||||
"classname": "nom de classe",
|
||||
"EnterNameOfClass": "saisir un nom de classe.",
|
||||
"create": "créer",
|
||||
"sender": "expéditeur",
|
||||
"nameIsMandatory": "le nom de classe est obligatoire",
|
||||
"onlyUse": "n'utiliser que des lettres, des chiffres, des tirets (-) et des traits de soulignement (_)",
|
||||
"close": "fermer",
|
||||
"copied": "copié!",
|
||||
"accept": "accepter",
|
||||
"deny": "refuser",
|
||||
"sent": "envoyé",
|
||||
"failed": "échoué",
|
||||
"wrong": "quelque chose n'a pas fonctionné",
|
||||
"created": "créé"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,6 +29,11 @@
|
|||
"sociallyRelevant": "Maatschappelijk relevant",
|
||||
"login": "log in",
|
||||
"translate": "vertalen",
|
||||
"joinClass": "Word lid van een klas",
|
||||
"JoinClassExplanation": "Voer de code in die je van de docent hebt gekregen om lid te worden van de klas.",
|
||||
"invalidFormat": "Ongeldig formaat.",
|
||||
"submitCode": "verzenden",
|
||||
"members": "leden",
|
||||
"themes": "Lesthema's",
|
||||
"choose-theme": "Kies een thema",
|
||||
"choose-age": "Kies een leeftijd",
|
||||
|
|
@ -51,5 +56,24 @@
|
|||
"high-school": "3e graad secundair",
|
||||
"older": "Hoger onderwijs"
|
||||
},
|
||||
"read-more": "Lees meer"
|
||||
"read-more": "Lees meer",
|
||||
"code": "code",
|
||||
"class": "klas",
|
||||
"invitations": "uitnodigingen",
|
||||
"createClass": "klas aanmaken",
|
||||
"createClassInstructions": "Voer een naam in voor je klas en klik op create. Er verschijnt een venster met een code die je kunt kopiëren. Geef deze code aan je leerlingen en ze kunnen deelnemen aan je klas.",
|
||||
"classname": "klasnaam",
|
||||
"EnterNameOfClass": "Geef een klasnaam op.",
|
||||
"create": "aanmaken",
|
||||
"sender": "afzender",
|
||||
"nameIsMandatory": "klasnaam is verplicht",
|
||||
"onlyUse": "gebruik enkel letters, cijfers, dashes (-) en underscores (_)",
|
||||
"close": "sluiten",
|
||||
"copied": "gekopieerd!",
|
||||
"accept": "accepteren",
|
||||
"deny": "weigeren",
|
||||
"sent": "verzonden",
|
||||
"failed": "mislukt",
|
||||
"wrong": "er ging iets verkeerd",
|
||||
"created": "gecreëerd"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import type { AssignmentsResponse } from "@/controllers/assignments.ts";
|
|||
import type { GroupsResponse } from "@/controllers/groups.ts";
|
||||
import type { SubmissionsResponse } from "@/controllers/submissions.ts";
|
||||
import type { QuestionsResponse } from "@/controllers/questions.ts";
|
||||
import type { StudentDTO } from "@dwengo-1/interfaces/student";
|
||||
import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
|
||||
|
||||
const studentController = new StudentController();
|
||||
|
||||
|
|
@ -179,7 +179,7 @@ export function useCreateJoinRequestMutation(): UseMutationReturnType<
|
|||
mutationFn: async ({ username, classId }) => studentController.createJoinRequest(username, classId),
|
||||
onSuccess: async (newJoinRequest) => {
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: studentJoinRequestsQueryKey(newJoinRequest.request.requester),
|
||||
queryKey: studentJoinRequestsQueryKey(newJoinRequest.request.requester.username),
|
||||
});
|
||||
},
|
||||
});
|
||||
|
|
@ -196,7 +196,7 @@ export function useDeleteJoinRequestMutation(): UseMutationReturnType<
|
|||
return useMutation({
|
||||
mutationFn: async ({ username, classId }) => studentController.deleteJoinRequest(username, classId),
|
||||
onSuccess: async (deletedJoinRequest) => {
|
||||
const username = deletedJoinRequest.request.requester;
|
||||
const username = deletedJoinRequest.request.requester.username;
|
||||
const classId = deletedJoinRequest.request.class;
|
||||
await queryClient.invalidateQueries({ queryKey: studentJoinRequestsQueryKey(username) });
|
||||
await queryClient.invalidateQueries({ queryKey: studentJoinRequestQueryKey(username, classId) });
|
||||
|
|
|
|||
|
|
@ -1,11 +1,17 @@
|
|||
import { computed, toValue } from "vue";
|
||||
import type { MaybeRefOrGetter } from "vue";
|
||||
import { useMutation, useQuery, useQueryClient, UseMutationReturnType, UseQueryReturnType } from "@tanstack/vue-query";
|
||||
import {
|
||||
useMutation,
|
||||
useQuery,
|
||||
useQueryClient,
|
||||
type UseMutationReturnType,
|
||||
type UseQueryReturnType,
|
||||
} from "@tanstack/vue-query";
|
||||
import { TeacherController, type TeacherResponse, type TeachersResponse } from "@/controllers/teachers.ts";
|
||||
import type { ClassesResponse } from "@/controllers/classes.ts";
|
||||
import type { JoinRequestResponse, JoinRequestsResponse, StudentsResponse } from "@/controllers/students.ts";
|
||||
import type { QuestionsResponse } from "@/controllers/questions.ts";
|
||||
import type { TeacherDTO } from "@dwengo-1/interfaces/teacher";
|
||||
import type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher";
|
||||
import { studentJoinRequestQueryKey, studentJoinRequestsQueryKey } from "@/queries/students.ts";
|
||||
|
||||
const teacherController = new TeacherController();
|
||||
|
|
|
|||
|
|
@ -1,7 +1,224 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import authState from "@/services/auth/auth-service.ts";
|
||||
import { onMounted, ref } from "vue";
|
||||
import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
|
||||
import { useRoute } from "vue-router";
|
||||
import { ClassController, type ClassResponse } from "@/controllers/classes";
|
||||
import type { StudentsResponse } from "@/controllers/students";
|
||||
import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
// Username of logged in teacher
|
||||
const username = ref<string | undefined>(undefined);
|
||||
const classController: ClassController = new ClassController();
|
||||
|
||||
// Find class id from route
|
||||
const route = useRoute();
|
||||
const classId: string = route.params.id as string;
|
||||
|
||||
const isLoading = ref(true);
|
||||
const currentClass = ref<ClassDTO | undefined>(undefined);
|
||||
const students = ref<StudentDTO[]>([]);
|
||||
|
||||
// Find the username of the logged in user so it can be used to fetch other information
|
||||
// When loading the page
|
||||
onMounted(async () => {
|
||||
const userObject = await authState.loadUser();
|
||||
username.value = userObject?.profile?.preferred_username ?? undefined;
|
||||
|
||||
// Get class of which information should be shown
|
||||
const classResponse: ClassResponse = await classController.getById(classId);
|
||||
if (classResponse && classResponse.class) {
|
||||
currentClass.value = classResponse.class;
|
||||
isLoading.value = false;
|
||||
}
|
||||
|
||||
// Fetch all students of the class
|
||||
const studentsResponse: StudentsResponse = await classController.getStudents(classId);
|
||||
if (studentsResponse && studentsResponse.students) students.value = studentsResponse.students as StudentDTO[];
|
||||
});
|
||||
|
||||
// TODO: Boolean that handles visibility for dialogs
|
||||
// Popup to verify removing student
|
||||
const dialog = ref(false);
|
||||
const selectedStudent = ref<StudentDTO | null>(null);
|
||||
|
||||
function showPopup(s: StudentDTO): void {
|
||||
selectedStudent.value = s;
|
||||
dialog.value = true;
|
||||
}
|
||||
|
||||
// Remove student from class
|
||||
function removeStudentFromclass(): void {
|
||||
dialog.value = false;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<main></main>
|
||||
</template>
|
||||
<main>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="text-center py-10"
|
||||
>
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
color="primary"
|
||||
/>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1 class="title">{{ currentClass!.displayName }}</h1>
|
||||
<v-container
|
||||
fluid
|
||||
class="ma-4"
|
||||
>
|
||||
<v-row
|
||||
no-gutters
|
||||
fluid
|
||||
>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="6"
|
||||
>
|
||||
<v-table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="header">{{ t("students") }}</th>
|
||||
<th class="header"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="s in students"
|
||||
:key="s.id"
|
||||
>
|
||||
<td>
|
||||
{{ s.firstName + " " + s.lastName }}
|
||||
</td>
|
||||
<td>
|
||||
<v-btn @click="showPopup"> {{ t("remove") }} </v-btn>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
max-width="400px"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="headline">{{ t("areusure") }}</v-card-title>
|
||||
|
||||
<style scoped></style>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
text
|
||||
@click="dialog = false"
|
||||
>
|
||||
{{ t("cancel") }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
text
|
||||
@click="removeStudentFromclass"
|
||||
>{{ t("yes") }}</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</main>
|
||||
</template>
|
||||
<style scoped>
|
||||
.header {
|
||||
font-weight: bold !important;
|
||||
background-color: #0e6942;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
table thead th:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.table thead th:last-child {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
.table tbody tr:nth-child(odd) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.table tbody tr:nth-child(even) {
|
||||
background-color: #f6faf2;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 1px solid #0e6942;
|
||||
border-top: 1px solid #0e6942;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 90%;
|
||||
padding-top: 10px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #0e6942;
|
||||
text-transform: uppercase;
|
||||
font-weight: bolder;
|
||||
padding-top: 2%;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #0e6942;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.join {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #0b75bb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
h1 {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.join {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sheet {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,380 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import authState from "@/services/auth/auth-service.ts";
|
||||
import { computed, onMounted, ref, type ComputedRef } from "vue";
|
||||
import { validate, version } from "uuid";
|
||||
import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
|
||||
import { useCreateJoinRequestMutation, useStudentClassesQuery } from "@/queries/students";
|
||||
import type { StudentDTO } from "@dwengo-1/common/interfaces/student";
|
||||
import { StudentController } from "@/controllers/students";
|
||||
import type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher";
|
||||
import { TeacherController } from "@/controllers/teachers";
|
||||
|
||||
const { t } = useI18n();
|
||||
const studentController: StudentController = new StudentController();
|
||||
const teacherController: TeacherController = new TeacherController();
|
||||
|
||||
// Username of logged in student
|
||||
const username = ref<string | undefined>(undefined);
|
||||
|
||||
// Find the username of the logged in user so it can be used to fetch other information
|
||||
// When loading the page
|
||||
onMounted(async () => {
|
||||
const userObject = await authState.loadUser();
|
||||
username.value = userObject?.profile?.preferred_username ?? undefined;
|
||||
});
|
||||
|
||||
// Fetch all classes of the logged in student
|
||||
const { data: classesResponse, isLoading, error } = useStudentClassesQuery(username);
|
||||
|
||||
// Empty list when classes are not yet loaded, else the list of classes of the user
|
||||
const classes: ComputedRef<ClassDTO[]> = computed(() => {
|
||||
// The classes are not yet fetched
|
||||
if (!classesResponse.value) {
|
||||
return [];
|
||||
}
|
||||
// The user has no classes
|
||||
if (classesResponse.value.classes.length === 0) {
|
||||
return [];
|
||||
}
|
||||
return classesResponse.value.classes as ClassDTO[];
|
||||
});
|
||||
|
||||
// Students of selected class are shown when logged in student presses on the member count
|
||||
const selectedClass = ref<ClassDTO | null>(null);
|
||||
const students = ref<StudentDTO[]>([]);
|
||||
const teachers = ref<TeacherDTO[]>([]);
|
||||
const getStudents = ref(false);
|
||||
|
||||
// Boolean that handles visibility for dialogs
|
||||
// Clicking on membercount will show a dialog with all members
|
||||
const dialog = ref(false);
|
||||
|
||||
// Function to display all members of a class in a dialog
|
||||
async function openStudentDialog(c: ClassDTO): Promise<void> {
|
||||
selectedClass.value = c;
|
||||
|
||||
// Clear previous value
|
||||
getStudents.value = true;
|
||||
students.value = [];
|
||||
dialog.value = true;
|
||||
|
||||
// Fetch students from their usernames to display their full names
|
||||
const studentDTOs: (StudentDTO | null)[] = await Promise.all(
|
||||
c.students.map(async (uid) => {
|
||||
try {
|
||||
const res = await studentController.getByUsername(uid);
|
||||
return res.student;
|
||||
} catch (_) {
|
||||
return null;
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
// Only show students that are not fetched ass *null*
|
||||
students.value = studentDTOs.filter(Boolean) as StudentDTO[];
|
||||
}
|
||||
|
||||
async function openTeacherDialog(c: ClassDTO): Promise<void> {
|
||||
selectedClass.value = c;
|
||||
|
||||
// Clear previous value
|
||||
getStudents.value = false;
|
||||
teachers.value = [];
|
||||
dialog.value = true;
|
||||
|
||||
// Fetch names of teachers
|
||||
const teacherDTOs: (TeacherDTO | null)[] = await Promise.all(
|
||||
c.teachers.map(async (uid) => {
|
||||
try {
|
||||
const res = await teacherController.getByUsername(uid);
|
||||
return res.teacher;
|
||||
} catch (_) {
|
||||
return null;
|
||||
}
|
||||
}),
|
||||
);
|
||||
|
||||
teachers.value = teacherDTOs.filter(Boolean) as TeacherDTO[];
|
||||
}
|
||||
|
||||
// Hold the code a student gives in to join a class
|
||||
const code = ref<string>("");
|
||||
|
||||
// The code a student sends in to join a class needs to be formatted as v4 to be valid
|
||||
// These rules are used to display a message to the user if they use a code that has an invalid format
|
||||
const codeRules = [
|
||||
(value: string | undefined): string | boolean => {
|
||||
if (value === undefined || value === "") {
|
||||
return true;
|
||||
} else if (value !== undefined && validate(value) && version(value) === 4) {
|
||||
return true;
|
||||
}
|
||||
return t("invalidFormat");
|
||||
},
|
||||
];
|
||||
|
||||
// Used to send the actual class join request
|
||||
const { mutate } = useCreateJoinRequestMutation();
|
||||
|
||||
// Function called when a student submits a code to join a class
|
||||
function submitCode(): void {
|
||||
// Check if the code is valid
|
||||
if (code.value !== undefined && validate(code.value) && version(code.value) === 4) {
|
||||
mutate(
|
||||
{ username: username.value!, classId: code.value },
|
||||
{
|
||||
onSuccess: () => {
|
||||
showSnackbar(t("sent"), "success");
|
||||
},
|
||||
onError: (e) => {
|
||||
showSnackbar(t("failed") + ": " + e.message, "error");
|
||||
},
|
||||
},
|
||||
);
|
||||
code.value = "";
|
||||
}
|
||||
}
|
||||
|
||||
const snackbar = ref({
|
||||
visible: false,
|
||||
message: "",
|
||||
color: "success",
|
||||
});
|
||||
|
||||
function showSnackbar(message: string, color: string): void {
|
||||
snackbar.value.message = message;
|
||||
snackbar.value.color = color;
|
||||
snackbar.value.visible = true;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<main></main>
|
||||
</template>
|
||||
<main>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="text-center py-10"
|
||||
>
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
color="primary"
|
||||
/>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
<style scoped></style>
|
||||
<div
|
||||
v-else-if="error"
|
||||
class="text-center py-10 text-error"
|
||||
>
|
||||
<v-icon large>mdi-alert-circle</v-icon>
|
||||
<p>Error loading: {{ error.message }}</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1 class="title">{{ t("classes") }}</h1>
|
||||
<v-container
|
||||
fluid
|
||||
class="ma-4"
|
||||
>
|
||||
<v-row
|
||||
no-gutters
|
||||
fluid
|
||||
>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="6"
|
||||
>
|
||||
<v-table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="header">{{ t("classes") }}</th>
|
||||
<th class="header">{{ t("teachers") }}</th>
|
||||
<th class="header">{{ t("members") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="c in classes"
|
||||
:key="c.id"
|
||||
>
|
||||
<td>{{ c.displayName }}</td>
|
||||
<td
|
||||
class="link"
|
||||
@click="openTeacherDialog(c)"
|
||||
>
|
||||
{{ c.teachers.length }}
|
||||
</td>
|
||||
<td
|
||||
class="link"
|
||||
@click="openStudentDialog(c)"
|
||||
>
|
||||
{{ c.students.length }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
width="400"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title> {{ selectedClass?.displayName }} </v-card-title>
|
||||
<v-card-text>
|
||||
<ul v-if="getStudents">
|
||||
<li
|
||||
v-for="student in students"
|
||||
:key="student.username"
|
||||
>
|
||||
{{ student.firstName + " " + student.lastName }}
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-else>
|
||||
<li
|
||||
v-for="teacher in teachers"
|
||||
:key="teacher.username"
|
||||
>
|
||||
{{ teacher.firstName + " " + teacher.lastName }}
|
||||
</li>
|
||||
</ul>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-btn
|
||||
color="primary"
|
||||
@click="dialog = false"
|
||||
>Close</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<div>
|
||||
<div class="join">
|
||||
<h2>{{ t("joinClass") }}</h2>
|
||||
<p>{{ t("JoinClassExplanation") }}</p>
|
||||
|
||||
<v-sheet
|
||||
class="pa-4 sheet"
|
||||
max-width="400"
|
||||
>
|
||||
<v-form @submit.prevent>
|
||||
<v-text-field
|
||||
label="CODE"
|
||||
v-model="code"
|
||||
placeholder="XXXXXXXX-XXXX-4XXX-XXXX-XXXXXXXXXXXX"
|
||||
:rules="codeRules"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
class="mt-4"
|
||||
color="#f6faf2"
|
||||
type="submit"
|
||||
@click="submitCode"
|
||||
block
|
||||
>{{ t("submitCode") }}</v-btn
|
||||
>
|
||||
</v-form>
|
||||
</v-sheet>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<v-snackbar
|
||||
v-model="snackbar.visible"
|
||||
:color="snackbar.color"
|
||||
timeout="3000"
|
||||
>
|
||||
{{ snackbar.message }}
|
||||
</v-snackbar>
|
||||
</main>
|
||||
</template>
|
||||
<style scoped>
|
||||
.header {
|
||||
font-weight: bold !important;
|
||||
background-color: #0e6942;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
table thead th:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.table thead th:last-child {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
.table tbody tr:nth-child(odd) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.table tbody tr:nth-child(even) {
|
||||
background-color: #f6faf2;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 1px solid #0e6942;
|
||||
border-top: 1px solid #0e6942;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 90%;
|
||||
padding-top: 10px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #0e6942;
|
||||
text-transform: uppercase;
|
||||
font-weight: bolder;
|
||||
padding-top: 2%;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #0e6942;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.join {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #0b75bb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
h1 {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.join {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sheet {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,404 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from "vue-i18n";
|
||||
import authState from "@/services/auth/auth-service.ts";
|
||||
import { computed, onMounted, ref, type ComputedRef } from "vue";
|
||||
import type { TeacherDTO } from "@dwengo-1/common/interfaces/teacher";
|
||||
import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
|
||||
import type { TeacherInvitationDTO } from "@dwengo-1/common/interfaces/teacher-invitation";
|
||||
import { useTeacherClassesQuery } from "@/queries/teachers";
|
||||
import { ClassController, type ClassResponse } from "@/controllers/classes";
|
||||
|
||||
const { t } = useI18n();
|
||||
const classController = new ClassController();
|
||||
|
||||
// Username of logged in teacher
|
||||
const username = ref<string | undefined>(undefined);
|
||||
|
||||
// Find the username of the logged in user so it can be used to fetch other information
|
||||
// When loading the page
|
||||
onMounted(async () => {
|
||||
const userObject = await authState.loadUser();
|
||||
username.value = userObject?.profile?.preferred_username ?? undefined;
|
||||
});
|
||||
|
||||
// Fetch all classes of the logged in teacher
|
||||
const { data: classesResponse, isLoading, error, refetch } = useTeacherClassesQuery(username, true);
|
||||
|
||||
// Empty list when classes are not yet loaded, else the list of classes of the user
|
||||
const classes: ComputedRef<ClassDTO[]> = computed(() => {
|
||||
// The classes are not yet fetched
|
||||
if (!classesResponse.value) {
|
||||
return [];
|
||||
}
|
||||
// The user has no classes
|
||||
if (classesResponse.value.classes.length === 0) {
|
||||
return [];
|
||||
}
|
||||
return classesResponse.value.classes as ClassDTO[];
|
||||
});
|
||||
|
||||
// Boolean that handles visibility for dialogs
|
||||
// Creating a class will generate a popup with the generated code
|
||||
const dialog = ref(false);
|
||||
|
||||
// Code generated when new class was created
|
||||
const code = ref<string>("");
|
||||
|
||||
// TODO: waiting on frontend controllers
|
||||
const invitations = ref<TeacherInvitationDTO[]>([]);
|
||||
|
||||
// Function to handle a accepted invitation request
|
||||
function acceptRequest(): void {
|
||||
//TODO: avoid linting issues when merging by filling the function
|
||||
invitations.value = [];
|
||||
}
|
||||
|
||||
// Function to handle a denied invitation request
|
||||
function denyRequest(): void {
|
||||
//TODO: avoid linting issues when merging by filling the function
|
||||
invitations.value = [];
|
||||
}
|
||||
|
||||
// Teacher should be able to set a displayname when making a class
|
||||
const className = ref<string>("");
|
||||
|
||||
// The name can only contain dash, underscore letters and numbers
|
||||
// These rules are used to display a message to the user if the name is not valid
|
||||
const nameRules = [
|
||||
(value: string | undefined): string | boolean => {
|
||||
if (!value) return true;
|
||||
if (value && /^[a-zA-Z0-9_-]+$/.test(value)) return true;
|
||||
return t("onlyUse");
|
||||
},
|
||||
];
|
||||
|
||||
// Function called when a teacher creates a class
|
||||
async function createClass(): Promise<void> {
|
||||
// Check if the class name is valid
|
||||
if (className.value && className.value.length > 0 && /^[a-zA-Z0-9_-]+$/.test(className.value)) {
|
||||
try {
|
||||
const classDto: ClassDTO = {
|
||||
id: "",
|
||||
displayName: className.value,
|
||||
teachers: [username.value!],
|
||||
students: [],
|
||||
joinRequests: [],
|
||||
};
|
||||
const classResponse: ClassResponse = await classController.createClass(classDto);
|
||||
const createdClass: ClassDTO = classResponse.class;
|
||||
code.value = createdClass.id;
|
||||
dialog.value = true;
|
||||
showSnackbar(t("created"), "success");
|
||||
|
||||
// Reload the table with classes so the new class appears
|
||||
await refetch();
|
||||
} catch (_) {
|
||||
showSnackbar(t("wrong"), "error");
|
||||
}
|
||||
}
|
||||
if (!className.value || className.value === "") {
|
||||
showSnackbar(t("name is mandatory"), "error");
|
||||
}
|
||||
}
|
||||
|
||||
const snackbar = ref({
|
||||
visible: false,
|
||||
message: "",
|
||||
color: "success",
|
||||
});
|
||||
|
||||
function showSnackbar(message: string, color: string): void {
|
||||
snackbar.value.message = message;
|
||||
snackbar.value.color = color;
|
||||
snackbar.value.visible = true;
|
||||
}
|
||||
|
||||
// Show the teacher, copying of the code was a successs
|
||||
const copied = ref(false);
|
||||
|
||||
// Copy the generated code to the clipboard
|
||||
async function copyToClipboard(): Promise<void> {
|
||||
await navigator.clipboard.writeText(code.value);
|
||||
copied.value = true;
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<main></main>
|
||||
</template>
|
||||
<main>
|
||||
<div
|
||||
v-if="isLoading"
|
||||
class="text-center py-10"
|
||||
>
|
||||
<v-progress-circular
|
||||
indeterminate
|
||||
color="primary"
|
||||
/>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
|
||||
<style scoped></style>
|
||||
<div
|
||||
v-else-if="error"
|
||||
class="text-center py-10 text-error"
|
||||
>
|
||||
<v-icon large>mdi-alert-circle</v-icon>
|
||||
<p>Error loading: {{ error.message }}</p>
|
||||
</div>
|
||||
<div v-else>
|
||||
<h1 class="title">{{ t("classes") }}</h1>
|
||||
<v-container
|
||||
fluid
|
||||
class="ma-4"
|
||||
>
|
||||
<v-row
|
||||
no-gutters
|
||||
fluid
|
||||
>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="6"
|
||||
>
|
||||
<v-table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="header">{{ t("classes") }}</th>
|
||||
<th class="header">
|
||||
{{ t("code") }}
|
||||
</th>
|
||||
<th class="header">{{ t("members") }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="c in classes"
|
||||
:key="c.id"
|
||||
>
|
||||
<td>
|
||||
<v-btn
|
||||
:to="`/class/${c.id}`"
|
||||
variant="text"
|
||||
>
|
||||
{{ c.displayName }}
|
||||
<v-icon end> mdi-menu-right </v-icon>
|
||||
</v-btn>
|
||||
</td>
|
||||
<td>{{ c.id }}</td>
|
||||
<td>{{ c.students.length }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="6"
|
||||
>
|
||||
<div>
|
||||
<h2>{{ t("createClass") }}</h2>
|
||||
|
||||
<v-sheet
|
||||
class="pa-4 sheet"
|
||||
max-width="600px"
|
||||
>
|
||||
<p>{{ t("createClassInstructions") }}</p>
|
||||
<v-form @submit.prevent>
|
||||
<v-text-field
|
||||
class="mt-4"
|
||||
:label="`${t('classname')}`"
|
||||
v-model="className"
|
||||
:placeholder="`${t('EnterNameOfClass')}`"
|
||||
:rules="nameRules"
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
<v-btn
|
||||
class="mt-4"
|
||||
color="#f6faf2"
|
||||
type="submit"
|
||||
@click="createClass"
|
||||
block
|
||||
>{{ t("create") }}</v-btn
|
||||
>
|
||||
</v-form>
|
||||
</v-sheet>
|
||||
<v-container>
|
||||
<v-dialog
|
||||
v-model="dialog"
|
||||
max-width="400px"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="headline">code</v-card-title>
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
v-model="code"
|
||||
readonly
|
||||
append-inner-icon="mdi-content-copy"
|
||||
@click:append-inner="copyToClipboard"
|
||||
></v-text-field>
|
||||
<v-slide-y-transition>
|
||||
<div
|
||||
v-if="copied"
|
||||
class="text-center mt-2"
|
||||
>
|
||||
{{ t("copied") }}
|
||||
</div>
|
||||
</v-slide-y-transition>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn
|
||||
text
|
||||
@click="
|
||||
dialog = false;
|
||||
copied = false;
|
||||
"
|
||||
>
|
||||
{{ t("close") }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<h1 class="title">
|
||||
{{ t("invitations") }}
|
||||
</h1>
|
||||
<v-table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="header">{{ t("class") }}</th>
|
||||
<th class="header">{{ t("sender") }}</th>
|
||||
<th class="header"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="i in invitations"
|
||||
:key="(i.class as ClassDTO).id"
|
||||
>
|
||||
<td>
|
||||
{{ (i.class as ClassDTO).displayName }}
|
||||
</td>
|
||||
<td>{{ (i.sender as TeacherDTO).firstName + " " + (i.sender as TeacherDTO).lastName }}</td>
|
||||
<td class="text-right">
|
||||
<div>
|
||||
<v-btn
|
||||
color="green"
|
||||
@click="acceptRequest"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ t("accept") }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="red"
|
||||
@click="denyRequest"
|
||||
>
|
||||
{{ t("deny") }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-table>
|
||||
</div>
|
||||
<v-snackbar
|
||||
v-model="snackbar.visible"
|
||||
:color="snackbar.color"
|
||||
timeout="3000"
|
||||
>
|
||||
{{ snackbar.message }}
|
||||
</v-snackbar>
|
||||
</main>
|
||||
</template>
|
||||
<style scoped>
|
||||
.header {
|
||||
font-weight: bold !important;
|
||||
background-color: #0e6942;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
table thead th:first-child {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.table thead th:last-child {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
|
||||
.table tbody tr:nth-child(odd) {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.table tbody tr:nth-child(even) {
|
||||
background-color: #f6faf2;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
border-bottom: 1px solid #0e6942;
|
||||
border-top: 1px solid #0e6942;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 90%;
|
||||
padding-top: 10px;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #0e6942;
|
||||
text-transform: uppercase;
|
||||
font-weight: bolder;
|
||||
padding-top: 2%;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #0e6942;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.join {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #0b75bb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
main {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
h1 {
|
||||
text-align: center;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.join {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sheet {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import authState from "@/services/auth/auth-service.ts";
|
||||
import TeacherClasses from "./TeacherClasses.vue";
|
||||
import StudentClasses from "./StudentClasses.vue";
|
||||
|
||||
// Determine if role is student or teacher to render correct view
|
||||
const role: string = authState.authState.activeRole!;
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main></main>
|
||||
<main>
|
||||
<TeacherClasses v-if="role === 'teacher'"></TeacherClasses>
|
||||
<StudentClasses v-else></StudentClasses>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue