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 @@
</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,
......
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