From 25d2614347e774caa6175e43823e597c6c6b5844 Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Sun, 3 Nov 2024 15:13:11 +0100
Subject: [PATCH] Show number of persons instead of names in mobile view of
 lesson notes

---
 .../coursebook/documentation/LessonNotes.vue  | 86 +++++++++++--------
 .../apps/alsijil/frontend/messages/en.json    |  3 +-
 2 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonNotes.vue b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonNotes.vue
index 50ef3347d..4e68379a2 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonNotes.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonNotes.vue
@@ -53,18 +53,23 @@ import TextNoteCard from "../personal_notes/TextNoteCard.vue";
             <template #append>
               <span
                 >:
-                <span>
-                  {{
-                    participations
-                      .slice(0, 5)
-                      .map((participation) => participation.person.firstName)
-                      .join(", ")
-                  }}
-                </span>
-                <span v-if="participations.length > 5">
-                  <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-                  +{{ participations.length - 5 }}
-                  <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+                <template v-if="!$vuetify.breakpoint.mobile">
+                  <span>
+                    {{
+                      participations
+                        .slice(0, 5)
+                        .map((participation) => participation.person.firstName)
+                        .join(", ")
+                    }}
+                  </span>
+                  <span v-if="participations.length > 5">
+                    <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+                    +{{ participations.length - 5 }}
+                    <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+                  </span>
+                </template>
+                <span v-else>
+                  {{ `${participations.length} ${$t('alsijil.coursebook.notes.persons')}` }}
                 </span>
               </span>
             </template>
@@ -95,18 +100,23 @@ import TextNoteCard from "../personal_notes/TextNoteCard.vue";
           <template #append>
             <span
               >:
-              <span>
-                {{
-                  participations
-                    .slice(0, 5)
-                    .map((participation) => participation.person.firstName)
-                    .join(", ")
-                }}
-              </span>
-              <span v-if="participations.length > 5">
-                <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-                +{{ participations.length - 5 }}
-                <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+              <template v-if="!$vuetify.breakpoint.mobile">
+                <span>
+                  {{
+                    participations
+                      .slice(0, 5)
+                      .map((participation) => participation.person.firstName)
+                      .join(", ")
+                  }}
+                </span>
+                <span v-if="participations.length > 5">
+                  <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+                  +{{ participations.length - 5 }}
+                  <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+                </span>
+              </template>
+              <span v-else>
+                {{ `${participations.length} ${$t('alsijil.coursebook.notes.persons')}` }}
               </span>
             </span>
           </template>
@@ -135,17 +145,23 @@ import TextNoteCard from "../personal_notes/TextNoteCard.vue";
           <template #append>
             <span
               >:
-              {{
-                tardyParticipations
-                  .slice(0, 5)
-                  .map((participation) => participation.person.firstName)
-                  .join(", ")
-              }}
-
-              <span v-if="tardyParticipations.length > 5">
-                <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
-                +{{ tardyParticipations.length - 5 }}
-                <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+              <template v-if="!$vuetify.breakpoint.mobile">
+                <span>
+                  {{
+                    tardyParticipations
+                      .slice(0, 5)
+                      .map((participation) => participation.person.firstName)
+                      .join(", ")
+                  }}
+                </span>
+                <span v-if="tardyParticipations.length > 5">
+                  <!-- eslint-disable @intlify/vue-i18n/no-raw-text -->
+                  +{{ tardyParticipations.length - 5 }}
+                  <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+                </span>
+              </template>
+              <span v-else>
+                {{ `${tardyParticipations.length} ${$t('alsijil.coursebook.notes.persons')}` }}
               </span>
             </span>
           </template>
diff --git a/aleksis/apps/alsijil/frontend/messages/en.json b/aleksis/apps/alsijil/frontend/messages/en.json
index 2a82c5c9d..cdf63269d 100644
--- a/aleksis/apps/alsijil/frontend/messages/en.json
+++ b/aleksis/apps/alsijil/frontend/messages/en.json
@@ -78,7 +78,8 @@
       },
       "notes": {
         "show_list": "List of participants",
-        "future": "Lesson is in the future"
+        "future": "Lesson is in the future",
+        "persons": "Persons"
       },
       "notices": {
         "future": "Editing this lesson isn't allowed as this lesson is in the future.",
-- 
GitLab