Skip to content
Snippets Groups Projects
Verified Commit 34ebc53c authored by Hangzhi Yu's avatar Hangzhi Yu Committed by Jonathan Weth
Browse files

Add read-only view for lesson participants

parent e80ee055
No related branches found
No related tags found
1 merge request!398Resolve "Respect permissions in coursebook frontend"
<script setup> <script setup>
import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue"; import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue";
import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue"; import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue";
import ExtraMarksNote from "../personal_notes/ExtraMarksNote.vue";
import TardinessChip from "../absences/TardinessChip.vue"; import TardinessChip from "../absences/TardinessChip.vue";
import PersonalNoteChip from "../personal_notes/PersonalNoteChip.vue"; import PersonalNoteChip from "../personal_notes/PersonalNoteChip.vue";
import TextNoteCard from "../personal_notes/TextNoteCard.vue";
</script> </script>
<template> <template>
<div <div>
class="d-flex align-center justify-space-between justify-md-end flex-wrap gap" <div
> class="d-flex align-center justify-space-between justify-md-end flex-wrap gap"
<v-chip v-if="compact || documentation.canViewParticipationStatus"
dense
color="success"
outlined
v-if="total > 0 && documentation.canViewParticipationStatus"
> >
{{ <v-chip
$t("alsijil.coursebook.participations.present_number", {
present,
total,
})
}}
</v-chip>
<v-chip
dense
color="success"
outlined
@click="$emit('open')"
v-bind="dialogActivator.attrs"
v-on="dialogActivator.on"
v-else-if="
total == 1 && present == 1 && !documentation.canViewParticipationStatus
"
>
{{ $t("alsijil.coursebook.participations.present") }}
</v-chip>
<template v-if="documentation.canViewParticipationStatus">
<absence-reason-chip
v-for="[reasonId, participations] in Object.entries(absences)"
:key="'reason-' + reasonId"
:absence-reason="participations[0].absenceReason"
dense dense
color="success"
outlined
v-if="total > 0 && documentation.canViewParticipationStatus"
> >
<template #append> {{
<span $t("alsijil.coursebook.participations.present_number", {
>: present,
<span> total,
{{ })
participations }}
.slice(0, 5) </v-chip>
.map((participation) => participation.person.firstName) <v-chip
.join(", ")
}}
</span>
<span v-if="participations.length > 5">
<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+{{ participations.length - 5 }}
<!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
</span>
</span>
</template>
</absence-reason-chip>
</template>
<template v-else>
<absence-reason-chip
v-for="[reasonId, participations] in Object.entries(absences)"
:key="'reason-' + reasonId"
:absence-reason="participations[0].absenceReason"
dense dense
color="success"
outlined
@click="$emit('open')" @click="$emit('open')"
v-bind="dialogActivator.attrs" v-bind="dialogActivator.attrs"
v-on="dialogActivator.on" v-on="dialogActivator.on"
/> v-else-if="
</template> total == 1 &&
present == 1 &&
<template v-if="documentation.canViewParticipationStatus"> !documentation.canViewParticipationStatus
<extra-mark-chip "
v-for="[markId, [mark, ...participations]] in Object.entries(
extraMarkChips,
)"
:key="'extra-mark-' + markId"
:extra-mark="mark"
dense
> >
<template #append> {{ $t("alsijil.coursebook.participations.present") }}
<span </v-chip>
>:
<span> <template v-if="documentation.canViewParticipationStatus">
<absence-reason-chip
v-for="[reasonId, participations] in Object.entries(absences)"
:key="'reason-' + reasonId"
:absence-reason="participations[0].absenceReason"
dense
>
<template #append>
<span
>:
<span>
{{
participations
.slice(0, 5)
.map((participation) => participation.person.firstName)
.join(", ")
}}
</span>
<span v-if="participations.length > 5">
<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+{{ participations.length - 5 }}
<!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
</span>
</span>
</template>
</absence-reason-chip>
</template>
<template v-else>
<absence-reason-chip
v-for="[reasonId, participations] in Object.entries(absences)"
:key="'reason-' + reasonId"
:absence-reason="participations[0].absenceReason"
dense
@click="$emit('open')"
v-bind="dialogActivator.attrs"
v-on="dialogActivator.on"
/>
</template>
<template v-if="documentation.canViewParticipationStatus">
<extra-mark-chip
v-for="[markId, [mark, ...participations]] in Object.entries(
extraMarkChips,
)"
:key="'extra-mark-' + markId"
:extra-mark="mark"
dense
>
<template #append>
<span
>:
<span>
{{
participations
.slice(0, 5)
.map((participation) => participation.person.firstName)
.join(", ")
}}
</span>
<span v-if="participations.length > 5">
<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+{{ participations.length - 5 }}
<!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
</span>
</span>
</template>
</extra-mark-chip>
</template>
<template v-else>
<extra-mark-chip
v-for="[markId, [mark, ...participations]] in Object.entries(
extraMarkChips,
)"
:key="'extra-mark-' + markId"
:extra-mark="mark"
dense
@click="$emit('open')"
v-bind="dialogActivator.attrs"
v-on="dialogActivator.on"
/>
</template>
<template v-if="documentation.canViewParticipationStatus">
<tardiness-chip v-if="tardyParticipations.length > 0">
<template #default>
{{ $t("alsijil.personal_notes.late") }}
</template>
<template #append>
<span
>:
{{ {{
participations tardyParticipations
.slice(0, 5) .slice(0, 5)
.map((participation) => participation.person.firstName) .map((participation) => participation.person.firstName)
.join(", ") .join(", ")
}} }}
</span>
<span v-if="participations.length > 5">
<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+{{ participations.length - 5 }}
<!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
</span>
</span>
</template>
</extra-mark-chip>
</template>
<template v-else>
<extra-mark-chip
v-for="[markId, [mark, ...participations]] in Object.entries(
extraMarkChips,
)"
:key="'extra-mark-' + markId"
:extra-mark="mark"
dense
@click="$emit('open')"
v-bind="dialogActivator.attrs"
v-on="dialogActivator.on"
/>
</template>
<template v-if="documentation.canViewParticipationStatus">
<tardiness-chip v-if="tardyParticipations.length > 0">
<template #default>
{{ $t("alsijil.personal_notes.late") }}
</template>
<template #append> <span v-if="tardyParticipations.length > 5">
<span <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
>: +{{ tardyParticipations.length - 5 }}
{{ <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
tardyParticipations </span>
.slice(0, 5)
.map((participation) => participation.person.firstName)
.join(", ")
}}
<span v-if="tardyParticipations.length > 5">
<!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+{{ tardyParticipations.length - 5 }}
<!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
</span> </span>
</span> </template>
</template> </tardiness-chip>
</tardiness-chip> </template>
</template> <template v-else>
<template v-else> <tardiness-chip
<tardiness-chip v-if="tardyParticipations.length > 0"
v-if="tardyParticipations.length > 0" :tardiness="
:tardiness=" tardyParticipations.length == 1
tardyParticipations.length == 1 ? tardyParticipations[0].tardiness
? tardyParticipations[0].tardiness : undefined
: undefined "
" @click="$emit('open')"
@click="$emit('open')" v-bind="dialogActivator.attrs"
v-bind="dialogActivator.attrs" v-on="dialogActivator.on"
v-on="dialogActivator.on" />
/> </template>
</template>
<template v-if="!documentation.canViewParticipationStatus && total == 1"> <template v-if="!documentation.canViewParticipationStatus && total == 1">
<personal-note-chip <personal-note-chip
v-for="note in documentation?.participations[0]?.notesWithNote" v-for="note in documentation?.participations[0]?.notesWithNote"
:key="'text-note-note-' + note.id" :key="'text-note-note-' + note.id"
:note="note" :note="note"
@click="$emit('open')" @click="$emit('open')"
v-bind="dialogActivator.attrs" v-bind="dialogActivator.attrs"
v-on="dialogActivator.on" v-on="dialogActivator.on"
/>
</template>
<manage-students-trigger
v-if="documentation.canEditParticipationStatus"
:label-key="manageStudentsLabelKey"
v-bind="documentationPartProps"
/> />
</template> </div>
<manage-students-trigger <!-- not compact -->
v-if="documentation.canEditParticipationStatus" <div class="main-body" v-else>
:label-key="manageStudentsLabelKey" <template
v-bind="documentationPartProps" v-if="
/> tardyParticipations.length > 0 || Object.entries(absences).length > 0
"
>
<v-divider />
<div
class="d-flex align-center justify-space-between justify-md-end flex-wrap gap"
>
<tardiness-chip
v-if="tardyParticipations.length > 0"
:tardiness="
tardyParticipations.length == 1
? tardyParticipations[0].tardiness
: undefined
"
/>
<absence-reason-chip
v-for="[reasonId, participations] in Object.entries(absences)"
:key="'reason-' + reasonId"
:absence-reason="participations[0].absenceReason"
dense
/>
</div>
</template>
<template v-if="total == 1">
<v-divider />
<extra-marks-note
v-bind="documentationPartProps"
:participation="documentation?.participations[0]"
:value="documentation?.participations[0].notesWithExtraMark"
:disabled="true"
/>
</template>
<template
v-if="
total == 1 &&
documentation?.participations[0]?.notesWithNote.length > 0
"
>
<v-divider />
<div>
<text-note-card
v-for="note in documentation?.participations[0]?.notesWithNote"
:key="'text-note-note-' + note.id"
:note="note"
/>
</div>
</template>
</div>
</div> </div>
</template> </template>
...@@ -257,4 +317,9 @@ export default { ...@@ -257,4 +317,9 @@ export default {
.gap { .gap {
gap: 0.25em; gap: 0.25em;
} }
.main-body {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1em;
}
</style> </style>
...@@ -88,7 +88,7 @@ export default { ...@@ -88,7 +88,7 @@ export default {
:label="value.name" :label="value.name"
:value="value.id" :value="value.id"
v-model="model" v-model="model"
:disabled="loading" :disabled="$attrs?.disabled || loading"
:true-value="true" :true-value="true"
:false-value="false" :false-value="false"
> >
......
...@@ -20,7 +20,7 @@ export default { ...@@ -20,7 +20,7 @@ export default {
<extra-mark-note-checkbox <extra-mark-note-checkbox
v-for="extraMark in extraMarks" v-for="extraMark in extraMarks"
:key="'checkbox-extramark-' + extraMark.id" :key="'checkbox-extramark-' + extraMark.id"
v-bind="personalNoteRelatedProps" v-bind="{ ...personalNoteRelatedProps, ...$attrs }"
:value="extraMark" :value="extraMark"
:personal-note="value.find((pn) => pn.extraMark.id === extraMark.id)" :personal-note="value.find((pn) => pn.extraMark.id === extraMark.id)"
/> />
......
<template>
<v-card
outlined
dense
rounded="lg"
class="mb-2"
v-bind="$attrs"
v-on="$listeners"
>
<v-card-title class="text-subtitle-2 pb-1 font-weight-medium">
{{ $t("alsijil.personal_notes.card.title") }}
</v-card-title>
<v-card-text>{{ note.note || "" }}</v-card-text>
</v-card>
</template>
<script>
export default {
name: "TextNoteCard",
props: {
note: {
type: Object,
required: true,
},
},
};
</script>
...@@ -123,6 +123,9 @@ ...@@ -123,6 +123,9 @@
} }
}, },
"personal_notes": { "personal_notes": {
"card": {
"title": "Personal note"
},
"note": "Note", "note": "Note",
"create_personal_note": "Add another note", "create_personal_note": "Add another note",
"tardiness": "Tardiness", "tardiness": "Tardiness",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment