Start work on PersonalNote Component

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

@@ -5,6 +5,38 @@ export default {
     data: () => {
         return {
             dialog: false,
+            // Absent versp. exc. type hw note
+            headers: [
+                {
+                    text: window.django.gettext('Name'),
+                    align: 'start',
+                    value: 'student.full_name',
+                },
+                {
+                    text: window.django.gettext('Absent'),
+                    value: 'absent',
+                },
+                {
+                    text: window.django.gettext('Tardiness'),
+                    value: 'tardiness',
+                },
+                {
+                    text: window.django.gettext('Excused'),
+                    value: 'excused',
+                },
+                {
+                    text: window.django.gettext('Excuse Type'),
+                    value: 'excuse_type',
+                },
+                {
+                    text: window.django.gettext('Extra Marks'),
+                    value: 'extra_marks',
+                },
+                {
+                    text: window.django.gettext('Remarks'),
+                    value: 'remarks',
+                },
+            ],
         }
     },
     template: `
@@ -21,6 +53,7 @@ export default {
           v-on="on"
         >
           Open Dialog
+          {{personalNotes}}
         </div>
       </template>
       <v-card>
@@ -29,75 +62,43 @@ export default {
         </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-data-table
+              :headers="headers"
+              :items="personalNotes"
+              class="elevation-1"
+              disable-filtering="true"
+              disable-pagination="true"
+              disable-items-per-page="true"
+            >
+              <template v-slot:item.student.full_name="props">
+                <v-edit-dialog
+                  :return-value.sync="props.item.student.full_name"
+                  @save="save"
+                  @cancel="cancel"
+                  @open="open"
+                  @close="close"
+                >
+                  {{ props.item.student.full_name }}
+                  <template v-slot:input>
+                    <v-text-field
+                      v-model="props.item.student.full_name"
+                      :rules="[max25chars]"
+                      label="Edit"
+                      single-line
+                      counter
+                    ></v-text-field>
+                  </template>
+                </v-edit-dialog>
+              </template>
+              <template v-slot:item.absent="{ item }">
+                <v-simple-checkbox v-model="item.absent"  ></v-simple-checkbox>
+              </template>
+              <template v-slot:item.excused="{ item }">
+                <v-simple-checkbox v-model="item.excused"  ></v-simple-checkbox>
+              </template>
+            </v-data-table>
           </v-container>
-          <small>*indicates required field</small>
+<!--          <small>*indicates required field</small>-->
         </v-card-text>
         <v-card-actions>
           <v-spacer></v-spacer>