diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue index 9dddbaa84a2a04959107636c52f85489776149eb..92f85cbd4896d381f56578feb300c2cbb581c090 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue @@ -1,126 +1,129 @@ <template> - <div class="d-flex" style="gap: 4em"> - <!-- TODO: header (close, title, print) --> - <!-- TODO: flex-grow-1 does a little & flex-shrink-1 does nothing --> - <div class="flex-grow-1"> - <!-- school-term-select --> - <school-term-field v-model="schoolTerm" :enable-create="false" /> - <!-- documentations for person list --> - <c-r-u-d-iterator - i18n-key="TODO" - :gql-query="gqlQuery" - :gql-additional-query-args="gqlQueryArgs" - :enable-create="false" - :enable-edit="false" - :elevated="false" - > - <template #additionalActions> - <v-btn-toggle - v-model="mode" - mandatory - color="secondary" - rounded - dense - > - <v-btn outlined :value="MODE.PARTICIPATIONS"> - {{ $t("alsijil.coursebook.absences.absences") }} - </v-btn> - <v-btn outlined :value="MODE.PERSONAL_NOTES"> - {{ $t("alsijil.personal_notes.personal_notes") }} - </v-btn> - </v-btn-toggle> - </template> - <template #default="{ items }"> - <v-list-item v-for="item in items" :key="item.id" ripple> - <v-list-item-content> - <v-list-item-title> - <!-- date & timeslot --> - <time - :datetime="item.relatedDocumentation.datetimeStart" - class="text-no-wrap" - > - {{ - $d( - $parseISODate(item.relatedDocumentation.datetimeStart), - "short", - ) - }} - </time> + <fullscreen-dialog-page> + <div class="d-flex" style="gap: 4em"> + <!-- TODO: header (close, title, print) --> + <!-- TODO: flex-grow-1 does a little & flex-shrink-1 does nothing --> + <div class="flex-grow-1"> + <!-- school-term-select --> + <school-term-field v-model="schoolTerm" :enable-create="false" /> + <!-- documentations for person list --> + <c-r-u-d-iterator + i18n-key="TODO" + :gql-query="gqlQuery" + :gql-additional-query-args="gqlQueryArgs" + :enable-create="false" + :enable-edit="false" + :elevated="false" + > + <template #additionalActions> + <v-btn-toggle + v-model="mode" + mandatory + color="secondary" + rounded + dense + > + <v-btn outlined :value="MODE.PARTICIPATIONS"> + {{ $t("alsijil.coursebook.absences.absences") }} + </v-btn> + <v-btn outlined :value="MODE.PERSONAL_NOTES"> + {{ $t("alsijil.personal_notes.personal_notes") }} + </v-btn> + </v-btn-toggle> + </template> + <template #default="{ items }"> + <v-list-item v-for="item in items" :key="item.id" ripple> + <v-list-item-content> + <v-list-item-title> + <!-- date & timeslot --> + <time + :datetime="item.relatedDocumentation.datetimeStart" + class="text-no-wrap" + > + {{ + $d( + $parseISODate(item.relatedDocumentation.datetimeStart), + "short", + ) + }} + </time> - <time - :datetime="item.relatedDocumentation.datetimeStart" - class="text-no-wrap" - > - {{ - $d( - $parseISODate(item.relatedDocumentation.datetimeStart), - "shortTime", - ) - }} - </time> - <span>-</span> - <time - :datetime="item.relatedDocumentation.datetimeEnd" - class="text-no-wrap" - > - {{ - $d( - $parseISODate(item.relatedDocumentation.datetimeEnd), - "shortTime", - ) - }} - </time> - <!-- teacher --> - <person-chip - v-for="teacher in item.relatedDocumentation.teachers" - :key="teacher.id" - :person="teacher" - no-link - small + <time + :datetime="item.relatedDocumentation.datetimeStart" + class="text-no-wrap" + > + {{ + $d( + $parseISODate(item.relatedDocumentation.datetimeStart), + "shortTime", + ) + }} + </time> + <span>-</span> + <time + :datetime="item.relatedDocumentation.datetimeEnd" + class="text-no-wrap" + > + {{ + $d( + $parseISODate(item.relatedDocumentation.datetimeEnd), + "shortTime", + ) + }} + </time> + <!-- teacher --> + <person-chip + v-for="teacher in item.relatedDocumentation.teachers" + :key="teacher.id" + :person="teacher" + no-link + small + /> + <!-- group --> + <span> + {{ item.groupShortName }} + </span> + <!-- subject --> + <subject-chip + :subject="item.relatedDocumentation.subject" + small + /> + </v-list-item-title> + <v-list-item-subtitle> + {{ item.note }} + </v-list-item-subtitle> + </v-list-item-content> + <v-list-item-action> + <!-- chips: absences & extraMarks --> + <absence-reason-chip + v-if="item.absenceReason" + :absenceReason="item.absenceReason" /> - <!-- group --> - <span> - {{ item.groupShortName }} - </span> - <!-- subject --> - <subject-chip - :subject="item.relatedDocumentation.subject" - small + <extra-mark-chip + v-if="item.extraMark" + :extra-mark="item.extraMark" /> - </v-list-item-title> - <v-list-item-subtitle> - {{ item.note }} - </v-list-item-subtitle> - </v-list-item-content> - <v-list-item-action> - <!-- chips: absences & extraMarks --> - <absence-reason-chip - v-if="item.absenceReason" - :absenceReason="item.absenceReason" - /> - <extra-mark-chip - v-if="item.extraMark" - :extra-mark="item.extraMark" - /> - </v-list-item-action> - </v-list-item> - <v-divider></v-divider> - </template> - </c-r-u-d-iterator> + </v-list-item-action> + </v-list-item> + <v-divider></v-divider> + </template> + </c-r-u-d-iterator> + </div> + <statistics-for-person-card + class="flex-shrink-1" + :compact="false" + :person="{ id: personId }" + :school-term="{ id: schoolTermId }" + /> </div> - <statistics-for-person-card - class="flex-shrink-1" - :compact="false" - :person="{ id: personId }" - :school-term="{ id: schoolTermId }" - /> - </div> + </fullscreen-dialog-page> </template> <script> import AbsenceReasonChip from "aleksis.apps.kolego/components/AbsenceReasonChip.vue"; import SchoolTermField from "aleksis.core/components/school_term/SchoolTermField.vue"; import CRUDIterator from "aleksis.core/components/generic/CRUDIterator.vue"; +import FullscreenDialogPage from "aleksis.core/components/generic/dialogs/FullscreenDialogPage.vue"; import PersonChip from "aleksis.core/components/person/PersonChip.vue"; import SubjectChip from "aleksis.apps.cursus/components/SubjectChip.vue"; import StatisticsForPersonCard from "./StatisticsForPersonCard.vue"; @@ -144,6 +147,7 @@ export default { AbsenceReasonChip, SchoolTermField, CRUDIterator, + FullscreenDialogPage, PersonChip, SubjectChip, StatisticsForPersonCard,