Skip to content
Snippets Groups Projects
Commit 53db9c19 authored by Julian's avatar Julian
Browse files

Use expansion panel for statistics list

parent 2814bc44
No related branches found
No related tags found
1 merge request!440Resolve "Allow editing of personal notes and participation status from person page widget"
Pipeline #194050 failed
Stage: prepare
Stage: test
Stage: build
Stage: publish
Stage: docker
Hide whitespace changes
Inline Side-by-side
aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue
+ 109
− 80
View file @ 53db9c19
...@@ -41,87 +41,113 @@ ...@@ -41,87 +41,113 @@
</v-btn> </v-btn>
</template> </template>
<template #default="{ items }"> <template #default="{ items }">
<v-list> <v-expansion-panels focusable>
<v-list-item v-for="item in items" :key="item.id" ripple> <v-expansion-panel
<v-list-item-content> v-for="item in items"
<v-list-item-title> :key="item.id"
<!-- date & timeslot --> ripple
<time :readonly="!item.canEdit"
:datetime="item.relatedDocumentation.datetimeStart" >
class="text-no-wrap" <v-expansion-panel-header
> :hide-actions="!item.canEdit"
{{ disable-icon-rotate
$d( >
$parseISODate( <template #actions>
item.relatedDocumentation.datetimeStart, <v-icon> $edit </v-icon>
), </template>
"short", <v-row class="mr-4">
) <v-col cols="12" md="6" class="pa-0">
}} <v-list-item-content>
</time> <v-list-item-title>
<!-- date & timeslot -->
<time
:datetime="item.relatedDocumentation.datetimeStart"
class="text-no-wrap"
>
{{
$d(
$parseISODate(
item.relatedDocumentation.datetimeStart,
),
"short",
)
}}
</time>
<time <time
:datetime="item.relatedDocumentation.datetimeStart" :datetime="item.relatedDocumentation.datetimeStart"
class="text-no-wrap" class="text-no-wrap"
> >
{{ {{
$d( $d(
$parseISODate( $parseISODate(
item.relatedDocumentation.datetimeStart, item.relatedDocumentation.datetimeStart,
), ),
"shortTime", "shortTime",
) )
}} }}
</time> </time>
<span>-</span> <span>-</span>
<time <time
:datetime="item.relatedDocumentation.datetimeEnd" :datetime="item.relatedDocumentation.datetimeEnd"
class="text-no-wrap" class="text-no-wrap"
> >
{{ {{
$d( $d(
$parseISODate(item.relatedDocumentation.datetimeEnd), $parseISODate(
"shortTime", item.relatedDocumentation.datetimeEnd,
) ),
}} "shortTime",
</time> )
</v-list-item-title> }}
<v-list-item-subtitle class="overflow-scroll"> </time>
<!-- teacher --> </v-list-item-title>
<person-chip <v-list-item-subtitle class="overflow-scroll">
v-for="teacher in item.relatedDocumentation.teachers" <!-- teacher -->
:key="teacher.id" <person-chip
:person="teacher" v-for="teacher in item.relatedDocumentation
no-link .teachers"
small :key="teacher.id"
/> :person="teacher"
<!-- group --> no-link
<span> small
{{ item.groupShortName }} />
</span> <!-- group -->
<!-- subject --> <span>
<subject-chip {{ item.groupShortName }}
:subject="item.relatedDocumentation.subject" </span>
small <!-- subject -->
/> <subject-chip
</v-list-item-subtitle> :subject="item.relatedDocumentation.subject"
</v-list-item-content> small
<v-list-item-action> />
<!-- chips: absences & extraMarks --> </v-list-item-subtitle>
<absence-reason-chip </v-list-item-content>
v-if="item.absenceReason" </v-col>
:absence-reason="item.absenceReason" <v-col cols="12" md="6" class="pa-0">
/> <v-list-item-action class="full-width justify-md-end">
<extra-mark-chip <!-- chips: absences & extraMarks -->
v-if="item.extraMark" <absence-reason-chip
:extra-mark="item.extraMark" v-if="item.absenceReason"
/> :absence-reason="item.absenceReason"
<div v-if="item.note"> />
{{ item.note }} <extra-mark-chip
</div> v-if="item.extraMark"
</v-list-item-action> :extra-mark="item.extraMark"
</v-list-item> />
</v-list> <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> <v-divider></v-divider>
</template> </template>
</c-r-u-d-iterator> </c-r-u-d-iterator>
...@@ -129,6 +155,7 @@ ...@@ -129,6 +155,7 @@
<statistics-for-person-card <statistics-for-person-card
v-if="!$vuetify.breakpoint.mobile" v-if="!$vuetify.breakpoint.mobile"
class="flex-shrink-1" class="flex-shrink-1"
style="min-width: 15vw"
:compact="false" :compact="false"
:person="{ id: personId }" :person="{ id: personId }"
/> />
...@@ -171,10 +198,12 @@ import { ...@@ -171,10 +198,12 @@ import {
} from "./statistics.graphql"; } from "./statistics.graphql";
import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue"; import ExtraMarkChip from "../../extra_marks/ExtraMarkChip.vue";
import { MODE } from "./modes.js"; import { MODE } from "./modes.js";
import PersonalNoteChip from "../personal_notes/PersonalNoteChip.vue";
export default { export default {
name: "StatisticsForPersonPage", name: "StatisticsForPersonPage",
components: { components: {
PersonalNoteChip,
ActiveSchoolTermSelect, ActiveSchoolTermSelect,
ExtraMarkChip, ExtraMarkChip,
AbsenceReasonChip, AbsenceReasonChip,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment