Implement lesson summary (topic, homework, note) interface

Initial version for desktop & edit.
Will update for mobile.

aleksis/apps/alsijil/frontend/components/documentation/LessonSummary.vue

 <template>
   <v-card-text>
-    <div>Lesson Summary Component</div>
-    <div>{{ documentation.topic }}</div>
-    <div>{{ documentation.homework }}</div>
-    <div>{{ documentation.groupnote }}</div>
+    <!-- Are focusout & enter enough trigger? -->
+    <!-- TODO: focusout on enter -->
+    <v-text-field
+      label="Thema"
+      :value="documentation.topic"
+      @input="topic=$event"
+      @focusout="saveTopic"
+      @keydown.enter="saveTopic"
+    />
+    <v-text-field
+      v-if="!compact"
+      label="Hausaufgaben"
+      :value="documentation.homework"
+      @input="homework=$event"
+    />
+    <v-text-field
+      v-if="!compact"
+      label="Gruppennotiz"
+      :value="documentation.groupnote"
+      @input="groupnote=$event"
+      />
+    <v-chip
+      v-if="compact"
+      outlined
+    >
+      Hausaufgaben: {{ truncate(documentation.homework) }}
+    </v-chip>
+    <v-chip
+      v-if="compact"
+      outlined
+    >
+      Gruppennotiz: {{ truncate(documentation.groupnote) }}
+    </v-chip>
   </v-card-text>
 </template>
 
@@ -15,6 +44,25 @@ export default {
       type: Object,
       required: true,
     },
+    compact: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      topic: "",
+    };
+  },
+  methods: {
+    saveTopic() {
+    },
+    truncate(str) {
+      return str ?
+        (str.length > 30) ? str.slice(0, 29) + '&hellip;' : str
+      : "";
+    },
   },
 };
 </script>