Add selection for planned lessons in coursebook

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

@@ -15,6 +15,17 @@ query CourseBook($lessonId: ID!) {
     subject {
       name
     }
+    plannedLessonperiodsDatetimes {
+      year
+      week
+      datetimeStart
+      lessonPeriod{
+        id
+        period{
+          period
+        }
+      }
+    }
   }
   lessonDocumentations: lessonDocumentationsByLessonId(id: $lessonId) {
     id

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

@@ -11,6 +11,18 @@
         <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-col v-for="item in data.lessonDocumentations" cols="12" v-bind:key="item.id">
               <lesson-documentation
@@ -20,19 +32,19 @@
                 :excuse-types="data.excuseTypes"
                 :extra-marks="data.extraMarks"
                 :period="item.period"
-                 
+
                 :personal-notes="item.personalNotes"
                 @change-personal-notes="processDataChange"
-                 
+
                 :date="item.date"
                 @change-date="processDataChange"
-                 
+
                 :topic="item.topic"
                 @change-topic="processDataChange"
-                 
+
                 :homework="item.homework"
                 @change-homework="processDataChange"
-                 
+
                 :group-note="item.groupNote"
                 @change-group-note="processDataChange"
               ></lesson-documentation>
@@ -63,6 +75,10 @@ export default {
         LessonDocumentation
     },
     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");