From d4ea461e9fd414ff88e8fac23a8332e9e50bc3d6 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Tue, 12 Nov 2024 11:20:30 +0100
Subject: [PATCH] Move statistics card to bottomsheet on mobile

---
 .../statistics/StatisticsForPersonPage.vue    | 19 +++++++++++++++++++
 .../apps/alsijil/frontend/messages/de.json    |  3 ++-
 .../apps/alsijil/frontend/messages/en.json    |  3 ++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue
index fa058f23c..09e5355d3 100644
--- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue
+++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonPage.vue
@@ -32,6 +32,16 @@
                 {{ $t("alsijil.personal_notes.personal_notes") }}
               </v-btn>
             </v-btn-toggle>
+            <v-btn
+              v-if="$vuetify.breakpoint.mobile"
+              rounded
+              dense
+              outlined
+              text
+              @click="statisticsBottomSheet = !statisticsBottomSheet"
+            >
+              {{ $t("alsijil.personal_notes.statistics.person_page.summary") }}
+            </v-btn>
           </template>
           <template #default="{ items }">
             <v-list-item v-for="item in items" :key="item.id" ripple>
@@ -114,11 +124,19 @@
         </c-r-u-d-iterator>
       </div>
       <statistics-for-person-card
+        v-if="!$vuetify.breakpoint.mobile"
         class="flex-shrink-1"
         :compact="false"
         :person="{ id: personId }"
         :school-term="{ id: schoolTermId }"
       />
+      <v-bottom-sheet v-model="statisticsBottomSheet" v-else>
+        <statistics-for-person-card
+          :compact="false"
+          :person="{ id: personId }"
+          :school-term="{ id: schoolTermId }"
+        />
+      </v-bottom-sheet>
     </div>
     <template #actions="{ toolbar }">
       <!-- TODO: add functionality -->
@@ -197,6 +215,7 @@ export default {
   data() {
     return {
       mode: MODE.PARTICIPATIONS,
+      statisticsBottomSheet: false,
     };
   },
   computed: {
diff --git a/aleksis/apps/alsijil/frontend/messages/de.json b/aleksis/apps/alsijil/frontend/messages/de.json
index 64d53a19e..e8fff940a 100644
--- a/aleksis/apps/alsijil/frontend/messages/de.json
+++ b/aleksis/apps/alsijil/frontend/messages/de.json
@@ -96,7 +96,8 @@
           "title": "Kursbuch · Statistiken"
         },
         "person_page": {
-          "title": "Kursbuch · Statistiken · {fullName}"
+          "title": "Kursbuch · Statistiken · {fullName}",
+          "summary": "Zusammenfassung"
         },
         "title_plural": "Statistiken"
       }
diff --git a/aleksis/apps/alsijil/frontend/messages/en.json b/aleksis/apps/alsijil/frontend/messages/en.json
index e1af3ea7c..474a039e6 100644
--- a/aleksis/apps/alsijil/frontend/messages/en.json
+++ b/aleksis/apps/alsijil/frontend/messages/en.json
@@ -154,7 +154,8 @@
           "title": "Coursebook · Statistics"
         },
         "person_page": {
-          "title": "Coursebook · Statistics · {fullName}"
+          "title": "Coursebook · Statistics · {fullName}",
+          "summary": "Summary"
         },
         "person_view_details": "Details",
         "title_plural": "Statistics"
-- 
GitLab