From 53db9c1969e58fcf9a774b73dcd29edee55a6e1c Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Sat, 30 Nov 2024 19:12:08 +0100
Subject: [PATCH] Use expansion panel for statistics list
---
.../statistics/StatisticsForPersonPage.vue | 189 ++++++++++--------
1 file changed, 109 insertions(+), 80 deletions(-)
diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue
index c5a8ed51e..cd968ba43 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue
@@ -41,87 +41,113 @@
</v-btn>
</template>
<template #default="{ items }">
- <v-list>
- <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>
+ <v-expansion-panels focusable>
+ <v-expansion-panel
+ v-for="item in items"
+ :key="item.id"
+ ripple
+ :readonly="!item.canEdit"
+ >
+ <v-expansion-panel-header
+ :hide-actions="!item.canEdit"
+ disable-icon-rotate
+ >
+ <template #actions>
+ <v-icon> $edit </v-icon>
+ </template>
+ <v-row class="mr-4">
+ <v-col cols="12" md="6" class="pa-0">
+ <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>
- </v-list-item-title>
- <v-list-item-subtitle class="overflow-scroll">
- <!-- 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-subtitle>
- </v-list-item-content>
- <v-list-item-action>
- <!-- chips: absences & extraMarks -->
- <absence-reason-chip
- v-if="item.absenceReason"
- :absence-reason="item.absenceReason"
- />
- <extra-mark-chip
- v-if="item.extraMark"
- :extra-mark="item.extraMark"
- />
- <div v-if="item.note">
- {{ item.note }}
- </div>
- </v-list-item-action>
- </v-list-item>
- </v-list>
+ <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>
+ </v-list-item-title>
+ <v-list-item-subtitle class="overflow-scroll">
+ <!-- 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-subtitle>
+ </v-list-item-content>
+ </v-col>
+ <v-col cols="12" md="6" class="pa-0">
+ <v-list-item-action class="full-width justify-md-end">
+ <!-- chips: absences & extraMarks -->
+ <absence-reason-chip
+ v-if="item.absenceReason"
+ :absence-reason="item.absenceReason"
+ />
+ <extra-mark-chip
+ v-if="item.extraMark"
+ :extra-mark="item.extraMark"
+ />
+ <personal-note-chip
+ v-if="item.note"
+ :note="{ note: item.note }"
+ />
+ </v-list-item-action>
+ </v-col>
+ </v-row>
+ </v-expansion-panel-header>
+ <v-expansion-panel-content>
+ <!-- FIXME -->
+ </v-expansion-panel-content>
+ </v-expansion-panel>
+ </v-expansion-panels>
<v-divider></v-divider>
</template>
</c-r-u-d-iterator>
@@ -129,6 +155,7 @@
<statistics-for-person-card
v-if="!$vuetify.breakpoint.mobile"
class="flex-shrink-1"
+ style="min-width: 15vw"
:compact="false"
:person="{ id: personId }"
/>
@@ -171,10 +198,12 @@ import {
} from "./statistics.graphql";
import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue";
import { MODE } from "./modes.js";
+import PersonalNoteChip from "../personal_notes/PersonalNoteChip.vue";
export default {
name: "StatisticsForPersonPage",
components: {
+ PersonalNoteChip,
ActiveSchoolTermSelect,
ExtraMarkChip,
AbsenceReasonChip,
--
GitLab