Create first draft of the personalnote component

aleksis/apps/alsijil/static/js/vue/alsijil/LoadComponents.js

+import PersonalNotes from "../components/alsijil/PersonalNotes.js";
 import LessonDocumentation from "../components/alsijil/LessonDocumentation.js";
 import CourseBook from '../components/alsijil/CourseBook.js'
 
-Vue.component("lesson-documentation", LessonDocumentation)
-Vue.component("course-book", CourseBook);
\ No newline at end of file
+Vue.component(PersonalNotes.name, PersonalNotes);
+Vue.component(LessonDocumentation.name, LessonDocumentation);
+Vue.component(CourseBook.name, CourseBook);
\ No newline at end of file

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

@@ -13,7 +13,7 @@ export default {
       <v-row>
         <v-col v-for="item in lesson_documentations" cols="12"">
           <lesson-documentation
-             :period="item.period_formatted"
+             :period="item.period_formatted" :personal-notes="item.personal_notes"
             :date="item.date" :topic="item.topic" :homework="item.homework" :group-note="item.group_note"
           ></lesson-documentation>
         </v-col>

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

 export default {
     methods: {},
-    props: ["date", "period", "topic", "homework", "groupNote"],
+    props: ["date", "period", "topic", "homework", "groupNote", "personalNotes"],
     name: "lesson-documentation",
     data: () => {
-        console.log(this);
         return {
             valid: false,
             datePick: "2030-09-29",
@@ -54,6 +53,7 @@ export default {
                     </v-card-title>
                   </template>
                   <v-list>
+                  <!-- Fixme: load valid lessons -->
                     <v-list-item
                       v-for="(item, index) in [1, 2, 3, 4, 5, 6, 7, 8, 9]"
                       :key="index"
@@ -92,7 +92,7 @@ export default {
             ></v-textarea>
           </v-col>
           <v-col sm="12" md="4" lg="3">
-            TBA: Absences & excuses, delays and personal notes
+            <personal-notes :personal-notes="personalNotes"></personal-notes>
           </v-col>
         </v-row>
       </v-form>

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

+export default {
+    methods: {},
+    props: ["personalNotes"],
+    name: "personal-notes",
+    data: () => {
+        return {
+            dialog: false,
+        }
+    },
+    template: `
+    <v-dialog
+      v-model="dialog"
+      persistent
+      max-width="600px"
+    >
+      <template v-slot:activator="{ on, attrs }">
+        <div
+          color="primary"
+          dark
+          v-bind="attrs"
+          v-on="on"
+        >
+          Open Dialog
+        </div>
+      </template>
+      <v-card>
+        <v-card-title>
+          <span class="text-h5">User Profile</span>
+        </v-card-title>
+        <v-card-text>
+          <v-container>
+            <v-row>
+              <v-col
+                cols="12"
+                sm="6"
+                md="4"
+              >
+                <v-text-field
+                  label="Legal first name*"
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col
+                cols="12"
+                sm="6"
+                md="4"
+              >
+                <v-text-field
+                  label="Legal middle name"
+                  hint="example of helper text only on focus"
+                ></v-text-field>
+              </v-col>
+              <v-col
+                cols="12"
+                sm="6"
+                md="4"
+              >
+                <v-text-field
+                  label="Legal last name*"
+                  hint="example of persistent helper text"
+                  persistent-hint
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  label="Email*"
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col cols="12">
+                <v-text-field
+                  label="Password*"
+                  type="password"
+                  required
+                ></v-text-field>
+              </v-col>
+              <v-col
+                cols="12"
+                sm="6"
+              >
+                <v-select
+                  :items="['0-17', '18-29', '30-54', '54+']"
+                  label="Age*"
+                  required
+                ></v-select>
+              </v-col>
+              <v-col
+                cols="12"
+                sm="6"
+              >
+                <v-autocomplete
+                  :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
+                  label="Interests"
+                  multiple
+                ></v-autocomplete>
+              </v-col>
+            </v-row>
+          </v-container>
+          <small>*indicates required field</small>
+        </v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="dialog = false"
+          >
+            Close
+          </v-btn>
+          <v-btn
+            color="blue darken-1"
+            text
+            @click="dialog = false"
+          >
+            Save
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+    `
+}
\ No newline at end of file