diff --git a/frontend/src/components/projects/ProjectCard.vue b/frontend/src/components/projects/ProjectCard.vue index 9d2bf936..16fde590 100644 --- a/frontend/src/components/projects/ProjectCard.vue +++ b/frontend/src/components/projects/ProjectCard.vue @@ -4,6 +4,7 @@ import MeterGroup from 'primevue/metergroup'; import Card from 'primevue/card'; import Button from 'primevue/button'; import { type Project } from '@/types/Project.ts'; +import { type Group } from '@/types/Group.ts'; import { PrimeIcons } from 'primevue/api'; import { useI18n } from 'vue-i18n'; import { computed, watch } from 'vue'; @@ -21,6 +22,8 @@ const props = withDefaults( type?: 'small' | 'large'; project: Project; course: Course; + projectGroups: Group[]; + studentGroups: Group[]; }>(), { type: 'large', @@ -60,6 +63,13 @@ const meterItems = computed(() => { const { t } = useI18n(); const { submissionStatus, getSubmissionStatusByProject } = useSubmissionStatus(); +/** + * Return True if the user is in a group in this project. + */ +function isInGroup(): boolean { + return props.studentGroups.some((group) => props.projectGroups.includes(group)); +} + /* Watchers */ watch( props.course, @@ -177,11 +187,13 @@ watch( /> diff --git a/frontend/src/components/projects/ProjectList.vue b/frontend/src/components/projects/ProjectList.vue index 70f0d5e9..adc4a3bf 100644 --- a/frontend/src/components/projects/ProjectList.vue +++ b/frontend/src/components/projects/ProjectList.vue @@ -3,9 +3,13 @@ import moment from 'moment'; import Skeleton from 'primevue/skeleton'; import InputSwitch from 'primevue/inputswitch'; import ProjectCard from '@/components/projects/ProjectCard.vue'; -import { computed, ref } from 'vue'; +import { computed, ref, watch } from 'vue'; import { useI18n } from 'vue-i18n'; import { type Project } from '@/types/Project.ts'; +import { type Group } from '@/types/Group.ts'; +import { storeToRefs } from 'pinia'; +import { useAuthStore } from '@/store/authentication.store.ts'; +import { useStudents } from '@/composables/services/student.service'; /* Props */ const props = withDefaults( @@ -21,10 +25,36 @@ const props = withDefaults( /* Composables */ const { t } = useI18n(); +const { user } = storeToRefs(useAuthStore()); +const { student, getStudentByID } = useStudents(); + +/** + * Get the groups of the corresponding users + */ +function getUserGroups(): Group[] { + if (user.value !== null && user.value?.isStudent()) { + // eslint-disable-next-line @typescript-eslint/prefer-optional-chain + return student.value !== null && student.value.groups !== null ? student.value?.groups : []; + } + return []; +} /* State */ const showPast = ref(false); +/* Watchers */ +watch( + user, + () => { + if (user.value !== null && user.value.isStudent()) { + getStudentByID(user.value.id); + } + }, + { + immediate: true, + }, +); + /* Sorts the projects by deadline */ const sortedProjects = computed(() => { const projects = @@ -68,6 +98,8 @@ const incomingProjects = computed(() => { type="small" :project="project" :course="project.course" + :projectGroups="project.groups" + :studentGroups="getUserGroups()" v-if="project.course !== null" /> @@ -97,6 +129,8 @@ const incomingProjects = computed(() => { class="h-100" :project="project" :course="project.course" + :projectGroups="project.groups" + :studentGroups="getUserGroups()" v-if="project.course !== null" />