tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

Merge fix/progress-bar into feat/232-assignments-pagina-ui-ux

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-05-17 01:44:37 +02:00
commit 368130c431
149 changed files with 4429 additions and 1120 deletions
Download patch file Download diff file Expand all files Collapse all files

59
frontend/src/components/BrowseThemes.vue
View file

@ -5,6 +5,7 @@
import { AGE_TO_THEMES, THEMESITEMS } from "@/utils/constants.ts";
import { useThemeQuery } from "@/queries/themes.ts";
import type { Theme } from "@/data-objects/theme.ts";
import authService from "@/services/auth/auth-service";
const props = defineProps({
selectedTheme: { type: String, required: true },
@ -33,6 +34,8 @@
cards.value = themes;
}
});
const isTeacher = computed(() => authService.authState.activeRole === "teacher");
</script>
<template>
@ -57,6 +60,39 @@
</div>
<v-row v-else>
<v-col
cols="12"
sm="6"
md="4"
lg="4"
class="d-flex"
>
<ThemeCard
path="/learningPath/search"
:is-absolute-path="true"
:title="t('searchAllLearningPathsTitle')"
:description="t('searchAllLearningPathsDescription')"
icon="mdi-magnify"
class="fill-height grey-bg-card"
/>
</v-col>
<v-col
v-if="isTeacher"
cols="12"
sm="6"
md="4"
lg="4"
class="d-flex"
>
<ThemeCard
path="/my-content"
:is-absolute-path="true"
:title="t('ownLearningContentTitle')"
:description="t('ownLearningContentDescription')"
icon="mdi-pencil"
class="fill-height grey-bg-card"
/>
</v-col>
<v-col
v-for="card in cards"
:key="card.key"
@ -74,24 +110,13 @@
class="fill-height"
/>
</v-col>
<v-col
cols="12"
sm="6"
md="4"
lg="4"
class="d-flex"
>
<ThemeCard
path="/learningPath/search"
:is-absolute-path="true"
:title="t('searchAllLearningPathsTitle')"
:description="t('searchAllLearningPathsDescription')"
icon="mdi-magnify"
class="fill-height"
/>
</v-col>
</v-row>
</v-container>
</template>
<style scoped></style>
<style scoped>
.grey-bg-card {
background-color: #f6faf2;
border: 2px solid #0e6942;
}
</style>

63
frontend/src/components/ButtonWithConfirmation.vue Normal file
View file

@ -0,0 +1,63 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
const props = defineProps<{
text: string;
prependIcon?: string;
appendIcon?: string;
confirmQueryText: string;
variant?: "flat" | "text" | "elevated" | "tonal" | "outlined" | "plain" | undefined;
color?: string;
disabled?: boolean;
}>();
const emit = defineEmits<{ (e: "confirm"): void }>();
const { t } = useI18n();
function confirm(): void {
emit("confirm");
}
</script>
<template>
<v-dialog max-width="500">
<template v-slot:activator="{ props: activatorProps }">
<v-btn
v-bind="activatorProps"
:text="props.text"
:prependIcon="props.prependIcon"
:appendIcon="props.appendIcon"
:variant="props.variant"
:color="color"
:disabled="props.disabled"
></v-btn>
</template>
<template v-slot:default="{ isActive }">
<v-card :title="t('confirmDialogTitle')">
<v-card-text>
{{ props.confirmQueryText }}
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
:text="t('yes')"
@click="
confirm();
isActive.value = false;
"
></v-btn>
<v-btn
:text="t('cancel')"
@click="isActive.value = false"
></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</template>
<style scoped></style>

7
frontend/src/components/LearningPathSearchField.vue
View file

@ -31,4 +31,9 @@
></v-text-field>
</template>
<style scoped></style>
<style scoped>
.search-field {
width: 25%;
min-width: 300px;
}
</style>

4
frontend/src/components/LearningPathsGrid.vue
View file

@ -53,9 +53,9 @@
white-space: normal;
}
.results-grid {
margin: 20px;
margin: 20px auto;
display: flex;
align-items: stretch;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
}

110
frontend/src/components/MenuBar.vue
View file

@ -7,13 +7,17 @@
// Import assets
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
import { useLocale } from "vuetify";
const { t, locale } = useI18n();
const { current: vuetifyLocale } = useLocale();
const role = auth.authState.activeRole;
const _router = useRouter(); // Zonder '_' gaf dit een linter error voor unused variable
const name: string = auth.authState.user!.profile.name!;
const username = auth.authState.user!.profile.preferred_username!;
const email = auth.authState.user!.profile.email;
const initials: string = name
.split(" ")
.map((n) => n[0])
@ -30,6 +34,7 @@
// Logic to change the language of the website to the selected language
function changeLanguage(langCode: string): void {
locale.value = langCode;
vuetifyLocale.value = langCode;
localStorage.setItem("user-lang", langCode);
}
@ -90,31 +95,34 @@
<!-- >-->
<!-- {{ t("discussions") }}-->
<!-- </v-btn>-->
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon
variant="text"
>
<v-icon
icon="mdi-translate"
size="small"
color="#0e6942"
></v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(language, index) in languages"
:key="index"
@click="changeLanguage(language.code)"
>
<v-list-item-title>{{ language.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-toolbar-items>
<v-menu
open-on-hover
open-on-click
>
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon
variant="text"
>
<v-icon
icon="mdi-translate"
size="small"
color="#0e6942"
></v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(language, index) in languages"
:key="index"
@click="changeLanguage(language.code)"
>
<v-list-item-title>{{ language.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-spacer></v-spacer>
<v-dialog max-width="500">
<template v-slot:activator="{ props: activatorProps }">
@ -158,12 +166,48 @@
</v-card>
</template>
</v-dialog>
<v-avatar
size="large"
color="#0e6942"
class="user-button"
>{{ initials }}</v-avatar
>
<v-menu min-width="200px">
<template v-slot:activator="{ props }">
<v-btn
icon
v-bind="props"
>
<v-avatar
color="#0e6942"
size="large"
class="user-button"
>
<span>{{ initials }}</span>
</v-avatar>
</v-btn>
</template>
<v-card>
<v-card-text>
<div class="mx-auto text-center">
<v-avatar
color="#0e6942"
size="large"
class="user-button mb-3"
>
<span>{{ initials }}</span>
</v-avatar>
<h3>{{ name }}</h3>
<p class="text-caption mt-1">{{ username }}</p>
<p class="text-caption mt-1">{{ email }}</p>
<v-divider class="my-3"></v-divider>
<v-btn
variant="text"
rounded
append-icon="mdi-logout"
@click="performLogout"
to="/login"
>{{ t("logout") }}</v-btn
>
<v-divider class="my-3"></v-divider>
</div>
</v-card-text>
</v-card>
</v-menu>
</v-app-bar>
<v-navigation-drawer
v-model="drawer"
@ -248,6 +292,12 @@
text-transform: none;
}
.translate-button {
z-index: 1;
position: relative;
margin-left: 10px;
}
@media (max-width: 700px) {
.menu {
display: none;

3
frontend/src/components/SingleQuestion.vue
View file

@ -6,6 +6,7 @@
import type { AnswersResponse } from "@/controllers/answers";
import type { AnswerData, AnswerDTO } from "@dwengo-1/common/interfaces/answer";
import authService from "@/services/auth/auth-service";
import { AccountType } from "@dwengo-1/common/util/account-types";
const props = defineProps<{
question: QuestionDTO;
@ -80,7 +81,7 @@
{{ question.content }}
</div>
<div
v-if="authService.authState.activeRole === 'teacher'"
v-if="authService.authState.activeRole === AccountType.Teacher"
class="answer-input-container"
>
<input

2
frontend/src/components/UsingQueryResult.vue
View file

@ -27,7 +27,7 @@
<div v-if="isError">
<v-empty-state
icon="mdi-alert-circle-outline"
:text="errorMessage"
:text="t(errorMessage)"
:title="t('error_title')"
></v-empty-state>
</div>

59
frontend/src/components/assignments/DeadlineSelector.vue
View file

@ -1,49 +1,30 @@
<script setup lang="ts">
import { ref, computed } from "vue";
import { ref, watch } from "vue";
import { deadlineRules } from "@/utils/assignment-rules.ts";
const date = ref("");
const time = ref("23:59");
const emit = defineEmits(["update:deadline"]);
const emit = defineEmits<(e: "update:deadline", value: Date) => void>();
const formattedDeadline = computed(() => {
if (!date.value || !time.value) return "";
return `${date.value} ${time.value}`;
});
const datetime = ref("");
function updateDeadline(): void {
if (date.value && time.value) {
emit("update:deadline", formattedDeadline.value);
// Watch the datetime value and emit the update
watch(datetime, (val) => {
const newDate = new Date(val);
if (!isNaN(newDate.getTime())) {
emit("update:deadline", newDate);
}
}
});
</script>
<template>
<div>
<v-card-text>
<v-text-field
v-model="date"
label="Select Deadline Date"
type="date"
variant="outlined"
density="compact"
:rules="deadlineRules"
required
@update:modelValue="updateDeadline"
></v-text-field>
</v-card-text>
<v-card-text>
<v-text-field
v-model="time"
label="Select Deadline Time"
type="time"
variant="outlined"
density="compact"
@update:modelValue="updateDeadline"
></v-text-field>
</v-card-text>
</div>
<v-card-text>
<v-text-field
v-model="datetime"
type="datetime-local"
label="Select Deadline"
variant="outlined"
density="compact"
:rules="deadlineRules"
required
/>
</v-card-text>
</template>
<style scoped></style>