diff --git a/aleksis/apps/alsijil/static/js/vue/alsijil/LoadComponents.js b/aleksis/apps/alsijil/static/js/vue/alsijil/LoadComponents.js
index 614d9e40480d2529f82c93e09dcef09133cefa80..6c71a3d7b34ef6d56f9d510f34d0ff804750849c 100644
--- a/aleksis/apps/alsijil/static/js/vue/alsijil/LoadComponents.js
+++ b/aleksis/apps/alsijil/static/js/vue/alsijil/LoadComponents.js
@@ -1,5 +1,7 @@
+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
diff --git a/aleksis/apps/alsijil/static/js/vue/components/alsijil/CourseBook.js b/aleksis/apps/alsijil/static/js/vue/components/alsijil/CourseBook.js
index 0fe2ed84b8da83e7ae3ad5e2b1eb02dc3f36c42d..276e844da613ac75ea6b7816205fc48ab49b6620 100644
--- a/aleksis/apps/alsijil/static/js/vue/components/alsijil/CourseBook.js
+++ b/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>
diff --git a/aleksis/apps/alsijil/static/js/vue/components/alsijil/LessonDocumentation.js b/aleksis/apps/alsijil/static/js/vue/components/alsijil/LessonDocumentation.js
index ee36a857bce9b57821116d4c3d5e9a8117ec89a1..357d827b9bec3f94e8960670065cce277247ec62 100644
--- a/aleksis/apps/alsijil/static/js/vue/components/alsijil/LessonDocumentation.js
+++ b/aleksis/apps/alsijil/static/js/vue/components/alsijil/LessonDocumentation.js
@@ -1,9 +1,8 @@
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>
diff --git a/aleksis/apps/alsijil/static/js/vue/components/alsijil/PersonalNotes.js b/aleksis/apps/alsijil/static/js/vue/components/alsijil/PersonalNotes.js
new file mode 100644
index 0000000000000000000000000000000000000000..54ce0095118fab7f0e35c61a2c33b034078f86a7
--- /dev/null
+++ b/aleksis/apps/alsijil/static/js/vue/components/alsijil/PersonalNotes.js
@@ -0,0 +1,122 @@
+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