Build LessonDocumentation component

aleksis/apps/alsijil/static/js/vue/components/alsijil/LessonDocumentation.js

+export default {
+    methods: {},
+    props: ["date", "period", "topic", "homework", "groupNote"],
+    name: "lesson-documentation",
+    data: () => {
+        console.log(this);
+        return {
+            valid: false,
+            datePick: "2030-09-29",
+            showPicker: false,
+            // period: 5,
+        }
+    },
+    template: `
+    <v-card elevation="2">
+      <v-form v-model="valid">
+        <v-row class="ma-0">
+          <v-col sm="12" md="4" lg="3" xl="2">
+            <v-hover v-slot="{ hover }">
+              <div>
+                <v-menu
+                  v-model="showPicker"
+                  :close-on-content-click="false"
+                  transition="scale-transition"
+                  offset-y
+                  min-width="auto"
+                >
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-card-title>
+                      <span v-text="new Date(datePick).toLocaleDateString()"></span>
+                      <v-btn right v-bind="attrs" v-on="on" icon><v-icon>mdi-pencil-outline</v-icon></v-btn>
+                    </v-card-title>
+                  </template>
+                  <v-date-picker
+                  scrollable
+                  no-title 
+                  @input="showPicker = false"
+                  v-model="datePick"
+                  ></v-date-picker>
+                </v-menu>
+                <v-menu offset-y>
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-card-title>
+                      <span v-text="period"></span>
+<!--                      (this.$root.django.gettext('%s. Period'), period)-->
+                      <v-btn
+                        right
+                        v-bind="attrs"
+                        v-on="on"
+                        icon
+                      >
+                        <v-icon>mdi-pencil-outline</v-icon>
+                      </v-btn>
+                    </v-card-title>
+                  </template>
+                  <v-list>
+                    <v-list-item
+                      v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
+                      :key="index"
+                    >
+                      <v-list-item-title>{{ item }}</v-list-item-title>
+                    </v-list-item>
+                  </v-list>
+                </v-menu>
+              </div>
+            </v-hover>
+          </v-col>
+          <v-col sm="12" md="4" lg="6" xl="7">
+            <v-textarea
+              name="input-7-1"
+              :label="this.$root.django.gettext('Topic')"
+              rows="1"
+              auto-grow
+              required
+              :value="topic"
+            ></v-textarea>
+            <v-textarea
+              name="input-7-1"
+              :label="this.$root.django.gettext('Homework')"
+              rows="1"
+              auto-grow
+              
+              :value="homework"
+            ></v-textarea>
+            <v-textarea
+              name="input-7-1"
+              :label="this.$root.django.gettext('Group note')"
+              rows="1"
+              auto-grow
+              
+              :value="groupNote"
+            ></v-textarea>
+          </v-col>
+          <v-col sm="12" md="4" lg="3">
+            TBA: Absences & excuses, delays and personal notes
+          </v-col>
+        </v-row>
+      </v-form>
+    </v-card>
+`
+}