Add switching between coursebook modes

aleksis/apps/alsijil/frontend/components/coursebook/Coursebook.vue

@@ -18,10 +18,7 @@
     </template>
 
     <template #item="{ item, lastQuery }">
-      <documentation-modal
-        :documentation="item"
-        :affected-query="lastQuery"
-      />
+      <component :is="itemComponent" :documentation="item" :affectedQuery="lastQuery" />
     </template>
 
     <template #loading>
@@ -56,6 +53,7 @@ import CoursebookFilters from "./CoursebookFilters.vue";
 import CoursebookLoader from "./CoursebookLoader.vue";
 import CoursebookEmptyMessage from "./CoursebookEmptyMessage.vue";
 import DocumentationModal from "./documentation/DocumentationModal.vue";
+import DocumentationAbsencesModal from "./absences/DocumentationAbsencesModal.vue";
 
 export default {
   name: "Coursebook",
@@ -64,6 +62,7 @@ export default {
     CoursebookFilters,
     CoursebookLoader,
     DocumentationModal,
+    DocumentationAbsencesModal,
     InfiniteScrollingDateSortedCRUDIterator,
   },
   props: {
@@ -81,6 +80,11 @@ export default {
       required: false,
       default: null,
     },
+    pageType: {
+      type: String,
+      required: false,
+      default: "documentations",
+    },
     /**
      * Number of consecutive to load at once
      * This number of days is initially loaded and loaded
@@ -136,6 +140,7 @@ export default {
           objId: this.objId,
           filterType: this.filterType,
           incomplete: this.incomplete,
+          pageType: this.pageType,
         };
       },
       set(selectedFilters) {
@@ -144,7 +149,8 @@ export default {
         } else if (
           Object.hasOwn(selectedFilters, "filterType") ||
           Object.hasOwn(selectedFilters, "objId") ||
-          Object.hasOwn(selectedFilters, "objType")
+          Object.hasOwn(selectedFilters, "objType") ||
+          Object.hasOwn(selectedFilters, "pageType")
         ) {
           this.$router.push({
             name: "alsijil.coursebook",
@@ -154,6 +160,9 @@ export default {
                 : this.filterType,
               objType: selectedFilters.objType,
               objId: selectedFilters.objId,
+              pageType: selectedFilters.pageType
+                ? selectedFilters.pageType
+                : this.pageType,
             },
             hash: this.$route.hash,
           });
@@ -165,6 +174,13 @@ export default {
         }
       },
     },
+    itemComponent() {
+      if (this.pageType === 'documentations') {
+        return "DocumentationModal";
+      } else {
+        return "DocumentationAbsencesModal";
+      }
+    },
   },
 };
 </script>

aleksis/apps/alsijil/frontend/components/coursebook/CoursebookFilters.vue

@@ -15,7 +15,7 @@
       @click:clear="selectObject"
       class="max-width"
     />
-    <div class="ml-6">
+    <div class="mx-6">
       <v-switch
         :loading="selectLoading"
         :label="$t('alsijil.coursebook.filter.own')"
@@ -39,6 +39,14 @@
         hide-details
       />
     </div>
+    <v-btn
+      outlined
+      color="primary"
+      :loading="selectLoading"
+      @click="togglePageType()"
+    >
+      {{ pageTypeButtonText }}
+    </v-btn>
   </div>
 </template>
 
@@ -95,6 +103,13 @@ export default {
           o.id === this.value.objId,
       );
     },
+    pageTypeButtonText() {
+      if (this.value.pageType === "documentations") {
+        return this.$t("alsijil.coursebook.filter.page_type.absences");
+      } else {
+        return this.$t("alsijil.coursebook.filter.page_type.documentations");
+      }
+    },
   },
   methods: {
     selectObject(selection) {
@@ -110,6 +125,13 @@ export default {
         objId: this.value.objId,
       });
     },
+    togglePageType() {
+      this.$emit("input", {
+        pageType: this.value.pageType === "documentations" ? "absences" : "documentations",
+        objType: this.value.objType,
+        objId: this.value.objId,
+      });
+    },
   },
 };
 </script>

aleksis/apps/alsijil/frontend/components/coursebook/absences/DocumentationAbsences.vue

+<template>
+  <v-card :class="{ 'my-1 full-width': true, 'd-flex flex-column': !compact }">
+    <v-card-title v-if="!compact">
+      <lesson-information v-bind="documentationPartProps" />
+    </v-card-title>
+
+    <v-card-text
+      class="full-width main-body"
+      :class="{
+        vertical: !compact || $vuetify.breakpoint.mobile,
+        'pa-2': compact,
+      }"
+    >
+      <lesson-information v-if="compact" v-bind="documentationPartProps" />
+      <div>
+        <div v-for="participation in documentation.participations">
+          {{ participation }}
+        </div>
+      </div>
+      <lesson-notes v-bind="documentationPartProps" />
+    </v-card-text>
+    <v-spacer />
+    <v-divider />
+    <v-card-actions v-if="!compact">
+      <v-spacer />
+      <cancel-button
+        v-if="documentation.canEdit"
+        @click="$emit('close')"
+        :disabled="loading"
+      />
+      <save-button
+        v-if="documentation.canEdit"
+        @click="save"
+        :loading="loading"
+      />
+      <cancel-button
+        v-if="!documentation.canEdit"
+        i18n-key="actions.close"
+        @click="$emit('close')"
+      />
+    </v-card-actions>
+  </v-card>
+</template>
+
+<script>
+import LessonInformation from "../documentation/LessonInformation.vue";
+import LessonNotes from "../documentation/LessonNotes.vue";
+
+import SaveButton from "aleksis.core/components/generic/buttons/SaveButton.vue";
+import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
+
+import { createOrUpdateDocumentations } from "../coursebook.graphql";
+
+import documentationPartMixin from "../documentation/documentationPartMixin";
+
+export default {
+  name: "DocumentationAbsences",
+  components: {
+    LessonInformation,
+    LessonNotes,
+    SaveButton,
+    CancelButton,
+  },
+  emits: ["open", "close"],
+  mixins: [documentationPartMixin],
+  data() {
+    return {
+      loading: false,
+      documentationsMutation: createOrUpdateDocumentations,
+    };
+  },
+  methods: {
+    save() {
+      this.$refs.summary.save();
+      this.$emit("close");
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main-body {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1em;
+}
+.vertical {
+  grid-template-columns: 1fr;
+}
+</style>

aleksis/apps/alsijil/frontend/components/coursebook/absences/DocumentationAbsencesModal.vue

+<!-- Wrapper around DocumentationAbsences.vue -->
+<!-- That uses it either as list item or as editable modal dialog. -->
+<template>
+  <mobile-fullscreen-dialog v-model="popup" max-width="500px">
+    <template #activator="activator">
+      <!-- list view -> activate dialog -->
+      <documentation-absences compact v-bind="$attrs" :dialog-activator="activator" />
+    </template>
+    <!-- dialog view -> deactivate dialog -->
+    <!-- cancel | save (through lesson-summary) -->
+    <documentation-absences v-bind="$attrs" @close="popup = false" />
+  </mobile-fullscreen-dialog>
+</template>
+
+<script>
+import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
+import DocumentationAbsences from "./DocumentationAbsences.vue";
+
+export default {
+  name: "DocumentationAbsencesModal",
+  components: {
+    MobileFullscreenDialog,
+    DocumentationAbsences,
+  },
+  data() {
+    return {
+      popup: false,
+    };
+  },
+};
+</script>

aleksis/apps/alsijil/frontend/index.js

@@ -63,6 +63,7 @@ export default {
           name: "alsijil.coursebook",
           params: {
             filterType: "my",
+            pageType: "documentations"
           },
           hash: "#" + DateTime.now().toISODate(),
         };
@@ -79,7 +80,7 @@ export default {
       },
       children: [
         {
-          path: ":filterType(my|all)/:objType(group|course|teacher)?/:objId(\\d+)?/",
+          path: ":pageType(documentations|absences)/:filterType(my|all)/:objType(group|course|teacher)?/:objId(\\d+)?/",
           component: () => import("./components/coursebook/Coursebook.vue"),
           name: "alsijil.coursebook",
           meta: {

aleksis/apps/alsijil/frontend/messages/en.json

@@ -72,7 +72,11 @@
         "missing": "Only show incomplete lessons",
         "groups": "Groups",
         "courses": "Courses",
-        "filter_for_obj": "Filter for group and course"
+        "filter_for_obj": "Filter for group and course",
+        "page_type": {
+          "documentations": "Show documentations",
+          "absences": "Show absences"
+        }
       },
       "present_number": "{present}/{total} present",
       "no_data": "No lessons for the selected groups and courses in this period",