From 74a82a79c3485581f3e196374f05273d69066eed Mon Sep 17 00:00:00 2001
From: Hangzhi Yu <hangzhi@protonmail.com>
Date: Sun, 21 Apr 2024 20:56:35 +0200
Subject: [PATCH] Add info alert with link to absences page of
 AlekSIS-App-Kolego

---
 .../components/SubstitutionOverview.vue       | 140 ++++++++++--------
 .../apps/chronos/frontend/messages/en.json    |   4 +
 2 files changed, 84 insertions(+), 60 deletions(-)

diff --git a/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue b/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue
index fa564b18..a6d0d444 100644
--- a/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue
+++ b/aleksis/apps/chronos/frontend/components/SubstitutionOverview.vue
@@ -15,68 +15,88 @@ import dateSortedIteratorMixin from "../mixins/dateSortedIteratorMixin.js";
 
 <template>
   <c-r-u-d-iterator
-    :gql-query="gqlQuery"
-    :gql-additional-query-args="gqlQueryArgs"
-    :gql-patch-mutation="gqlPatchMutation"
-    :get-patch-data="gqlGetPatchData"
-    i18n-key="chronos.substitutions.overview"
-    :enable-search="true"
-    :enable-create="false"
-    :show-create="false"
-    :enable-delete="false"
-    :enable-edit="true"
-    :elevated="false"
-    :force-model-item-update="true"
-    @lastQuery="lastQuery = $event"
-    fixed-header
-    disable-pagination
-    hide-default-footer
-    use-deep-search
-  >
-    <template #additionalActions="{ attrs, on }">
-      <v-autocomplete
-        :items="groups"
-        item-text="name"
-        clearable
-        return-object
-        filled
-        dense
-        hide-details
-        :placeholder="$t('chronos.substitutions.overview.filter.groups')"
-        :loading="$apollo.queries.groups.loading"
-        :value="currentObj"
-        @input="changeSelection"
-        @click:clear="changeSelection"
-      />
-    </template>
+      :gql-query="gqlQuery"
+      :gql-additional-query-args="gqlQueryArgs"
+      :gql-patch-mutation="gqlPatchMutation"
+      :get-patch-data="gqlGetPatchData"
+      i18n-key="chronos.substitutions.overview"
+      :enable-search="true"
+      :enable-create="false"
+      :show-create="false"
+      :enable-delete="false"
+      :enable-edit="true"
+      :elevated="false"
+      :force-model-item-update="true"
+      @lastQuery="lastQuery = $event"
+      fixed-header
+      disable-pagination
+      hide-default-footer
+      use-deep-search
+    >
+      <template #additionalActions="{ attrs, on }">
+        <v-autocomplete
+          :items="groups"
+          item-text="name"
+          clearable
+          return-object
+          filled
+          dense
+          hide-details
+          :placeholder="$t('chronos.substitutions.overview.filter.groups')"
+          :loading="$apollo.queries.groups.loading"
+          :value="currentObj"
+          @input="changeSelection"
+          @click:clear="changeSelection"
+        />
+        <v-alert type="info" outlined dense class="full-width">
+          <v-row
+            align="center"
+            no-gutters
+          >
+            <v-col class="grow">
+              {{ $t("chronos.substitutions.overview.info_alert.text") }}
+            </v-col>
+            <v-spacer></v-spacer>
+            <v-col class="shrink">
+              <v-btn
+                color="info"
+                outlined
+                :to="{ name: 'kolego.absences' }"
+              >
+                {{ $t("chronos.substitutions.overview.info_alert.button") }}
+              </v-btn>
+            </v-col>
+          </v-row>
+        </v-alert>
+      </template>
 
-    <template #default="{ items }">
-      <substitution-day
-        v-for="{ date, itemsOfDay, first, last } in groupItemsByDay(items)"
-        v-intersect="{
-          handler: intersectHandler(date, first, last),
-          options: {
-            rootMargin: '-' + topMargin + 'px 0px 0px 0px',
-            threshold: [0, 1],
-          },
-        }"
-        :date="date"
-        :substitutions="itemsOfDay"
-        :lastQuery="lastQuery"
-        :focus-on-mount="initDate && initDate.toMillis() === date.toMillis()"
-        @init="transition"
-        :key="'day-' + date"
-        ref="days"
-      />
+      <template #default="{ items }">
+        <substitution-day
+          v-for="{ date, itemsOfDay, first, last } in groupItemsByDay(items)"
+          v-intersect="{
+            handler: intersectHandler(date, first, last),
+            options: {
+              rootMargin: '-' + topMargin + 'px 0px 0px 0px',
+              threshold: [0, 1],
+            },
+          }"
+          :date="date"
+          :substitutions="itemsOfDay"
+          :lastQuery="lastQuery"
+          :focus-on-mount="initDate && initDate.toMillis() === date.toMillis()"
+          @init="transition"
+          :key="'day-' + date"
+          ref="days"
+        />
 
-      <date-select-footer
-        :value="currentDate"
-        @input="gotoDate"
-        @prev="gotoPrev"
-        @next="gotoNext"
-      />
-    </template>
-  </c-r-u-d-iterator>
+        <date-select-footer
+          :value="currentDate"
+          @input="gotoDate"
+          @prev="gotoPrev"
+          @next="gotoNext"
+        />
+      </template>
+    </c-r-u-d-iterator>
 </template>
 
 <script>
diff --git a/aleksis/apps/chronos/frontend/messages/en.json b/aleksis/apps/chronos/frontend/messages/en.json
index c721f95e..685c9704 100644
--- a/aleksis/apps/chronos/frontend/messages/en.json
+++ b/aleksis/apps/chronos/frontend/messages/en.json
@@ -47,6 +47,10 @@
       "overview": {
         "menu_title": "Plan substitution lessons",
         "title_plural": "Plan substitution lessons",
+        "info_alert": {
+          "text": "This page shows all lessons that collide with known absences of their respective teachers. To add or edit absences, use the page provided by the respective app. ",
+          "button": "Add/edit absences"
+        },
         "filter": {
           "groups": "Filter by groups"
         },
-- 
GitLab