Implement first working draft of ManageStudentsDialog.vue

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

+<script>
+import BackButton from "aleksis.core/components/generic/BackButton.vue";
+import CancelButton from "aleksis.core/components/generic/buttons/CancelButton.vue";
+import MobileFullscreenDialog from "aleksis.core/components/generic/dialogs/MobileFullscreenDialog.vue";
+import documentationPartMixin from "../documentation/documentationPartMixin";
+import LessonInformation from "../documentation/LessonInformation.vue";
+import SlideIterator from "aleksis.core/components/generic/SlideIterator.vue";
+
+export default {
+  name: "ManageStudentsDialog",
+  extends: MobileFullscreenDialog,
+  components: {
+    BackButton,
+    CancelButton,
+    LessonInformation,
+    MobileFullscreenDialog,
+    SlideIterator,
+  },
+  mixins: [ documentationPartMixin ],
+  data() {
+    return {
+      dialog: false,
+      search: "",
+      selected: [],
+      isExpanded: false,
+    }
+  },
+  computed: {
+    items() {
+      return this.documentation.participations;
+    }
+  },
+};
+</script>
+
+<template>
+  <mobile-fullscreen-dialog
+    scrollable
+    v-bind="$attrs"
+    v-on="$listeners"
+    v-model="dialog"
+  >
+    <template #activator="activator">
+      <slot name="activator" v-bind="activator" />
+    </template>
+
+    <template #title>
+      <lesson-information v-bind="documentationPartProps" />
+      <v-slide-x-transition leave-absolute>
+        <v-text-field
+          v-show="!isExpanded"
+          type="search"
+          v-model="search"
+          clearable
+          rounded
+          filled
+          hide-details
+          single-line
+          prepend-inner-icon="$search"
+          dense
+          outlined
+          :placeholder="$t('actions.search')"
+          class="pt-4"
+        />
+      </v-slide-x-transition>
+    </template>
+    <template #content>
+      <slide-iterator
+        v-model="selected"
+        :items="items"
+        :search="search"
+        :item-key-getter="item => 'documentation-' + documentation.id + '-student-' + item.id"
+        :is-expanded.sync="isExpanded"
+        >
+        <template #listItemContent="{ item }">
+          <v-list-item-title>
+            {{ item.person.fullName }}
+          </v-list-item-title>
+          <v-list-item-subtitle v-if="item.absenceReason">
+            <v-chip dense>
+              {{ item.absenceReason.name }}
+            </v-chip>
+          </v-list-item-subtitle>
+        </template>
+
+        <template #expandedItem="{ item, close }">
+          <v-card-title>
+            <v-tooltip bottom>
+              <template v-slot:activator="{ on, attrs }">
+                <v-btn
+                  v-bind="attrs"
+                  v-on="on"
+                  icon
+                  @click="close"
+                >
+                  <v-icon>$prev</v-icon>
+                </v-btn>
+              </template>
+              <span v-t="'actions.back_to_overview'" />
+            </v-tooltip>
+            {{ item.person.fullName }}
+          </v-card-title>
+          <v-card-text>
+            <v-chip>TODO</v-chip>
+            <v-chip>TODO</v-chip>
+            <v-chip>TODO</v-chip>
+          </v-card-text>
+        </template>
+      </slide-iterator>
+    </template>
+
+    <template #actions>
+      <cancel-button @click="dialog = false" i18n-key="actions.close" v-show="$vuetify.breakpoint.mobile" />
+    </template>
+  </mobile-fullscreen-dialog>
+</template>
+
+<style scoped>
+
+</style>

aleksis/apps/alsijil/frontend/components/coursebook/coursebook.graphql

@@ -70,6 +70,18 @@ query documentationsForCoursebook(
       colourFg
       colourBg
     }
+    participations {
+      id
+      person {
+        id
+        fullName
+      }
+      absenceReason {
+        id
+        name
+        shortName
+      }
+    }
     topic
     homework
     groupNote

aleksis/apps/alsijil/frontend/components/coursebook/documentation/LessonNotes.vue

@@ -27,18 +27,24 @@
       >
       Hausaufgaben vergessen
     </v-chip>
-    <v-chip dense color="primary" outlined>
-      <v-icon>$edit</v-icon>
-    </v-chip>
     <!-- eslint-enable @intlify/vue-i18n/no-raw-text -->
+    <manage-students-dialog v-bind="documentationPartProps">
+      <template #activator="{ attrs, on }">
+        <v-chip dense color="primary" outlined v-bind="attrs" v-on="on">
+          <v-icon>$edit</v-icon>
+        </v-chip>
+      </template>
+    </manage-students-dialog>
   </div>
 </template>
 
 <script>
 import documentationPartMixin from "./documentationPartMixin";
+import ManageStudentsDialog from "../absences/ManageStudentsDialog.vue";
 
 export default {
   name: "LessonNotes",
+  components: {ManageStudentsDialog},
   mixins: [documentationPartMixin],
 };
 </script>

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

@@ -77,5 +77,8 @@
     "week": {
       "menu_title": "Aktuelle Woche"
     }
+  },
+  "actions": {
+    "back_to_overview": "Zurück zur Übersicht"
   }
 }

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

@@ -77,5 +77,8 @@
       "no_data": "No lessons for the selected groups and courses in this period",
       "no_results": "No search results for {search}"
     }
+  },
+  "actions": {
+    "back_to_overview": "Back to overview"
   }
 }