From 032150b3c8a7aa64f61a92ce145bda36838b62d0 Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Wed, 22 May 2024 21:29:30 +0200
Subject: [PATCH] Add tooltips to teacher select
---
.../substitutions/SubstitutionCard.vue | 71 +++++++++++--------
.../apps/chronos/frontend/messages/en.json | 7 ++
2 files changed, 49 insertions(+), 29 deletions(-)
diff --git a/aleksis/apps/chronos/frontend/components/substitutions/SubstitutionCard.vue b/aleksis/apps/chronos/frontend/components/substitutions/SubstitutionCard.vue
index 1d09385d..6e38e62e 100644
--- a/aleksis/apps/chronos/frontend/components/substitutions/SubstitutionCard.vue
+++ b/aleksis/apps/chronos/frontend/components/substitutions/SubstitutionCard.vue
@@ -105,37 +105,50 @@ import createOrPatchMixin from "aleksis.core/mixins/createOrPatchMixin.js";
@input="teachersInput"
>
<template #prepend-inner>
- <v-chip
- v-for="teacher in teachersWithStatus.filter(
- (t) => t.status === 'removed',
- )"
- outlined
- color="error"
- class="mb-1"
- small
- >
- <v-icon left>mdi-account-off-outline</v-icon>
- <div class="text-decoration-line-through">
- {{ teacher.fullName }}
- </div>
- </v-chip>
+ <v-tooltip bottom>
+ <template #activator="{ on, attrs }">
+ <v-chip
+ v-for="teacher in teachersWithStatus.filter(
+ (t) => t.status === 'removed',
+ )"
+ outlined
+ color="error"
+ class="mb-1"
+ small
+ v-on="on"
+ v-bind="attrs"
+ >
+ <v-icon left>mdi-account-off-outline</v-icon>
+ <div class="text-decoration-line-through">
+ {{ teacher.fullName }}
+ </div>
+ </v-chip>
+ </template>
+ <span>{{ $t("chronos.substitutions.overview.teacher.status.absent") }}</span>
+ </v-tooltip>
</template>
<template #selection="data">
- <v-chip
- v-bind="data.attrs"
- :input-value="data.selected"
- close
- class="mb-1 mt-1"
- small
- :outlined="getTeacherStatus(data.item) === 'new'"
- :color="getTeacherStatus(data.item) === 'new' ? 'success' : ''"
- @click:close="removeTeacher(data.item)"
- >
- <v-icon left v-if="getTeacherStatus(data.item) === 'new'">
- mdi-account-plus-outline
- </v-icon>
- {{ data.item.fullName }}
- </v-chip>
+ <v-tooltip bottom>
+ <template #activator="{ on, attrs }">
+ <v-chip
+ v-bind="{ ...data.attrs, ...attrs }"
+ :input-value="data.selected"
+ close
+ class="mb-1 mt-1"
+ small
+ :outlined="getTeacherStatus(data.item) === 'new'"
+ :color="getTeacherStatus(data.item) === 'new' ? 'success' : ''"
+ @click:close="removeTeacher(data.item)"
+ v-on="on"
+ >
+ <v-icon left v-if="getTeacherStatus(data.item) === 'new'">
+ mdi-account-plus-outline
+ </v-icon>
+ {{ data.item.fullName }}
+ </v-chip>
+ </template>
+ <span>{{ getTeacherStatus(data.item) === "new" ? $t("chronos.substitutions.overview.teacher.status.new") : $t("chronos.substitutions.overview.teacher.status.regular") }}</span>
+ </v-tooltip>
</template>
</teacher-field>
diff --git a/aleksis/apps/chronos/frontend/messages/en.json b/aleksis/apps/chronos/frontend/messages/en.json
index c3fe8311..689c6834 100644
--- a/aleksis/apps/chronos/frontend/messages/en.json
+++ b/aleksis/apps/chronos/frontend/messages/en.json
@@ -63,6 +63,13 @@
"substituted": "Substituted",
"cancelled": "Cancelled"
},
+ "teacher": {
+ "status": {
+ "absent": "Absent",
+ "regular": "Regular",
+ "new": "Substitution teacher"
+ }
+ },
"comment": "Comment"
}
}
--
GitLab