Implement creation of LessonDocumentations in Coursebook

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

@@ -11,29 +11,17 @@
         <div v-else-if="data" class="result apollo">
           <update-indicator @manual-update="updateManually()" ref="indicator" :status="status"></update-indicator>
           <v-subheader>{{ data.lesson.subject.name }}</v-subheader>
-          <v-col
-            class="d-flex"
-            cols="12"
-            sm="6"
-          >
-            <v-select
-              :items="data.lesson.plannedLessonperiodsDatetimes"
-              label="Choose Lesson date"
-              :item-text="getLessonText"
-              item-value="datetimeStart"
-            ></v-select>
-          </v-col>
-          <v-row v-if="data.lessonDocumentations.length > 0">
+          <v-row>
             <v-col cols="12">
               <lesson-documentations
                 :lessonDocumentations="data.lessonDocumentations"
+                :plannedLessonperiodsDatetimes="data.lesson.plannedLessonperiodsDatetimes"
                 :groups="data.lesson.groups"
                 :excuseTypes="data.excuseTypes"
                 :extraMarks="data.extraMarks"
               />
             </v-col>
           </v-row>
-          <message-box v-else type="info">No coursebook for you :(</message-box>
         </div>
         <!-- No result or Loading -->
         <div v-else>
@@ -58,10 +46,6 @@ export default {
         LessonDocumentations
     },
     methods: {
-        getLessonText(item) {
-            let date_obj = new Date(item.datetimeStart)
-            return date_obj.toLocaleDateString(this.$root.languageCode) + ", Period " + item.lessonPeriod.period.period
-        },
         processDataChange(event) {
             this.status = CHANGES;
             // alert("Probably save the data");

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

@@ -3,6 +3,30 @@
     v-model="dialog"
     max-width="800"
   >
+    <template v-slot:activator="{ on, attrs }">
+      <v-row>
+        <v-col cols="6">
+          <v-select
+            :items="plannedLessonperiodsDatetimes"
+            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>
     <ApolloMutation
       :mutation="require('./LessonDocumentation.graphql')"
       :variables=lessonDocumentationEdit
@@ -129,7 +153,7 @@
   import PersonalNotes from "./PersonalNotes.vue";
   export default {
     components: { PersonalNotes },
-    props: [ "lessonDocumentations", "groups", "excuseTypes", "extraMarks" ],
+    props: [ "lessonDocumentations","plannedLessonperiodsDatetimes",  "groups", "excuseTypes", "extraMarks" ],
     name: "lesson-documentations",
     data () {
       return {
@@ -141,7 +165,8 @@
           { text: "Homework", value: "homework" },
           { text: "Group note", value: "groupNote" }
         ],
-        lessonDocumentationEdit: {}
+        lessonDocumentationEdit: {},
+        selectedLessonperiodDatetime: {}
       }
     },
     methods: {
@@ -170,14 +195,26 @@
           groupNote: lessonDocumentation.groupNote,
           personalNotes: lessonDocumentation.personalNotes,
         }
-        console.log(result)
-        console.log(this.lessonDocumentationEdit)
       },
 
       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
+      },
     }
   }
 </script>