WIP: Week documentation

aleksis/apps/alsijil/assets/components/coursebook/CourseBook.vue

@@ -13,7 +13,7 @@
           <v-subheader>{{ data.lesson.subject.name }}</v-subheader>
           <v-row>
             <v-col cols="12">
-              <lesson-documentations
+              <lesson-documentations-week
                 :lessonDocumentations="data.lessonDocumentations"
                 :plannedLessonperiodsDatetimes="data.lesson.plannedLessonperiodsDatetimes"
                 :groups="data.lesson.groups"
@@ -40,11 +40,13 @@
 import {CHANGES, SAVED, UPDATING} from "../../UpdateStatuses.js";
 import UpdateIndicator from "./UpdateIndicator.vue";
 import LessonDocumentations from "./LessonDocumentations.vue";
+import LessonDocumentationsWeek from "./LessonDocumentationsWeek.vue";
 
 export default {
     components: {
         UpdateIndicator,
-        LessonDocumentations
+        LessonDocumentations,
+        LessonDocumentationsWeek,
     },
     props: [ "documentlessontopicsbyweek" ],
     methods: {
@@ -67,7 +69,10 @@ export default {
             setTimeout(() => {
                 this.status = SAVED;
             }, 500)
-        }
+        },
+        weekView() {
+          return this.documentlessontopicsbyweek === "True"
+        },
     },
     name: "course-book",
     data: () => {

aleksis/apps/alsijil/assets/components/coursebook/LessonDocumentations.vue

@@ -36,7 +36,7 @@
   </v-dialog>
   <v-data-table
     :headers="headers"
-    :items="computedLessonDocumentations"
+    :items="lessonDocumentations"
     @click:row="editLessonDocumentation"
     class="elevation-1"
     :expanded.sync="expanded"
@@ -84,20 +84,8 @@
         let currentDatetime = new Date()
         return this.plannedLessonperiodsDatetimes.filter(lp => new Date(lp.datetimeStart) > currentDatetime)
       },
-      computedLessonDocumentations() {
-        return this.lessonDocumentations.filter(ld => this.recordDocumentation(ld))
-      },
     },
     methods: {
-      recordDocumentation(item) {
-        if (this.documentLessonTopicsByWeek === "True") {
-          if (this.recordedWeeks.includes(item.week)) {
-            return false
-          }
-          this.recordedWeeks.push(item.week)
-        }
-        return true
-      },
       async loadLessonDocumentation(item) {
         const result = await this.$apollo.mutate({
           mutation: require("./LessonDocumentation.graphql"),

aleksis/apps/alsijil/assets/components/coursebook/LessonDocumentationsWeek.vue

+<template><div>
+  <v-dialog
+    v-model="dialog"
+    max-width="800"
+  >
+    <template v-slot:activator="{ on, attrs }">
+      <v-row>
+        <v-col cols="6">
+          <v-select
+            :items="emptyLessonperiods"
+            label="Choose Lesson date"
+            :item-text="getLessonText"
+            v-model="selectedLessonperiodDatetime"
+            return-object
+          ></v-select>
+        </v-col>
+        <v-col>
+          <v-btn
+            color="primary"
+            dark
+            v-bind="attrs"
+            v-on="on"
+            @click="createLessonDocumentation()"
+          >
+            Create Lesson Documentation
+          </v-btn>
+        </v-col>
+      </v-row>
+    </template>
+    <lesson-documentation
+      :lessonDocumentationEdit="lessonDocumentationEdit"
+      :groups="groups"
+      :excuse-types="excuseTypes"
+      :extra-marks="extraMarks"
+    />
+  </v-dialog>
+  <v-data-table
+    :headers="headers"
+    :items="lessonDocumentationGroups"
+    @click:row="editLessonDocumentation"
+    class="elevation-1"
+    :expanded.sync="expanded"
+    show-expand
+  >
+    <template v-slot:item.period="{ item }">
+      <span class="text-no-wrap">{{ item.date }} Period {{ item.period }}</span>
+    </template>
+    <template v-slot:expanded-item="{ headers, item }">
+      <td :colspan="headers.length" v-for="ld in item.documentations">
+        <template v-for="personalNote in ld.personalNotes">
+          <v-chip class="ma-1" close v-if="personalNoteString(personalNote)">
+            {{ personalNote.person.fullName }}: {{ personalNoteString(personalNote) }}
+          </v-chip>
+        </template>
+      </td>
+    </template>
+</v-data-table>
+</div></template>
+
+<script>
+  import LessonDocumentation from "./LessonDocumentation.vue";
+  export default {
+    components: { LessonDocumentation },
+    props: [ "lessonDocumentations","plannedLessonperiodsDatetimes",  "groups", "excuseTypes", "extraMarks" ],
+    name: "lesson-documentations",
+    data () {
+      return {
+        dialog: false,
+        expanded: [],
+        headers: [
+          { text: "Period", value: "period" },
+          { text: "Topic", value: "topic" },
+          { text: "Homework", value: "homework" },
+          { text: "Group note", value: "groupNote" },
+          { text: "Personal notes", value: "data-table-expand" }
+        ],
+        lessonDocumentationEdit: {},
+        selectedLessonperiodDatetime: {},
+        recordedWeeks: [],
+      }
+    },
+    computed: {
+      emptyLessonperiods() {
+        let currentDatetime = new Date()
+        let groups = {}
+        let lpdts = this.plannedLessonperiodsDatetimes.filter(lp => new Date(lp.datetimeStart > currentDatetime))
+        for (let ldIndex in lpdts) {
+          let ld = lpdts[ldIndex]
+          if (ld.week in groups) {
+            groups[ld.week]["planned"].push(ld)
+          } else {
+            groups[ld.week] = {
+              "year": ld.year,
+              "week": ld.week,
+              "datetimeStart": ld.datetimeStart,
+              "lessonPeriod": ld.lessonPeriod,
+              "planned": [ld]
+            }
+          }
+        }
+        return Object.values(groups) // FIXME sort by date
+      },
+      lessonDocumentationGroups() {
+        let groups = {}
+        for (let ldIndex in this.lessonDocumentations) {
+          let ld = this.lessonDocumentations[ldIndex]
+          if (ld.week in groups) {
+            groups[ld.week]["documentations"].push(ld)
+          } else {
+            groups[ld.week] = {
+              "id": ld.id,
+              "date": ld.date,
+              "period": ld.period,
+              "topic": ld.topic,
+              "homework": ld.homework,
+              "groupNote": ld.groupNote,
+              "documentations": [ld]
+            }
+          }
+        }
+        return Object.values(groups)
+      },
+    },
+    methods: {
+      recordDocumentation(item) {
+        if (this.recordedWeeks.includes(item.week)) {
+          return false
+        }
+        this.recordedWeeks.push(item.week)
+        return true
+      },
+      async loadLessonDocumentation(item) {
+        const result = await this.$apollo.mutate({
+          mutation: require("./LessonDocumentation.graphql"),
+          variables: {
+            year: item.year,
+            week: item.week,
+            lessonPeriodId: item.lessonPeriod ? item.lessonPeriod.id : null,
+            eventId: item.event ? item.event.id : null,
+            extraLessonId: item.extraLesson ? item.extraLesson.id : null,
+          },
+        })
+        let lessonDocumentation = result.data.updateOrCreateLessonDocumentation.lessonDocumentation
+        this.lessonDocumentationEdit = {
+          id: lessonDocumentation.id,
+          year: item.year,
+          week: item.week,
+          date: lessonDocumentation.date,
+          lessonPeriodId: item.lessonPeriod ? item.lessonPeriod.id : null,
+          eventId: item.event ? item.event.id : null,
+          extraLessonId: item.extraLesson ? item.extraLesson.id : null,
+          topic: lessonDocumentation.topic,
+          homework: lessonDocumentation.homework,
+          groupNote: lessonDocumentation.groupNote,
+          personalNotes: lessonDocumentation.personalNotes,
+        }
+      },
+
+      editLessonDocumentation(item) {
+        this.loadLessonDocumentation(item)
+        this.dialog = true
+      },
+
+      createLessonDocumentation() { // FIXME: Update cache to show newly created LessonDocumentation in table
+        let lessonDocumentation = this.selectedLessonperiodDatetime
+        lessonDocumentation["event"] = null
+        lessonDocumentation["extraLesson"] = null
+        this.loadLessonDocumentation(lessonDocumentation)
+        this.dialog = true
+      },
+
+      getLessonText(item) {
+          let date_obj = new Date(item.datetimeStart)
+          let period = item.lessonPeriod ? ", Period " + item.lessonPeriod.period.period : "" // FIXME: Cases without lessonPeriod
+          return date_obj.toLocaleDateString(this.$root.languageCode) + period
+      },
+      personalNoteString(personalNote) {
+          let personalNoteString = "";
+          if (personalNote.late > 0) {
+              personalNoteString += personalNote.late + " min. ";
+          }
+          if (personalNote.absent) {
+              personalNoteString += "abwesend ";
+          }
+          if (personalNote.excused) {
+              personalNoteString += "entschuldigt ";
+          }
+          if (personalNote.excuseType) {
+              personalNoteString += personalNote.excuseType.name;
+          }
+          if (personalNote.extraMarks.length > 0) {
+              personalNoteString += " (";
+              personalNote.extraMarks.forEach(item => {
+                  personalNoteString += item.name + ", ";
+              });
+              personalNoteString = personalNoteString.substring(0, personalNoteString.length - 2);
+              personalNoteString += ") ";
+          }
+          if (personalNote.remarks) {
+              personalNoteString += "\"" + personalNote.remarks + "\" ";
+          }
+          return personalNoteString;
+      },
+    }
+  }
+</script>