🐛 Fix bugs in timetable editor

- Turn off autocorrect / spellcheck
- Prevent some browsers from jumping to the start of the text field
- Correctly handle lesson lengths

src/components/lesson-card.vue

@@ -1,23 +1,32 @@
 <script setup>
 import { getSubstitutionColor } from "@/util";
 import { times } from "@/store";
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { TrashIcon } from "lucide-vue-next";
 
 const props = defineProps(["lesson", "index", "edit", "buttons"]);
 const emit = defineEmits(["change", "delete"]);
 
+// Only make the card reactive if not in edit mode
+// to prevent some browsers to jump to the start
+// of the text field on change
+const lesson = ref(props.lesson);
+watch(
+  () => props.lesson,
+  (value) => {
+    if (!props.edit) lesson.value = value;
+  }
+);
+
 const subjectElement = ref();
 const teacherElement = ref();
 const roomElement = ref();
-const lessonLength = ref(props.lesson.length || 1);
 
 function update() {
   emit("change", {
     subject: subjectElement.value.innerText,
     teacher: teacherElement.value.innerText,
     room: roomElement.value.innerText,
-    length: lessonLength.value,
   });
 }
 
@@ -71,6 +80,8 @@ function getTime(index) {
         class="subject"
         v-else
         :contenteditable="edit"
+        autocorrect="false"
+        spellcheck="false"
         data-ph="Subject"
         ref="subjectElement"
         @input="update"
@@ -87,6 +98,8 @@ function getTime(index) {
           class="info"
           v-else
           :contenteditable="edit"
+          autocorrect="false"
+          spellcheck="false"
           data-ph="Teacher"
           ref="teacherElement"
           @input="update"
@@ -101,6 +114,8 @@ function getTime(index) {
           >,
           <span
             :contenteditable="edit"
+            autocorrect="false"
+            spellcheck="false"
             data-ph="Room"
             ref="roomElement"
             @input="update"

src/components/lesson-group-list.vue

@@ -10,11 +10,11 @@ import {
 } from "lucide-vue-next";
 
 const props = defineProps(["lesson", "index", "edit"]);
-const emit = defineEmits(["change", "move"]);
+const emit = defineEmits(["change", "move", "delete"]);
 
 const advancedOptions = ref(false);
 
-const lessonLength = ref(1);
+const lessonLength = ref(props.lesson[0].length);
 function updateLength() {
   let newLesson = structuredClone(toRaw(props.lesson));
   for (let entry of newLesson) {
@@ -33,6 +33,7 @@ function appendOption() {
 function lessonChanged(index, data) {
   let newLesson = structuredClone(toRaw(props.lesson));
   newLesson[index] = data;
+  newLesson[index].length = lessonLength.value;
   if (newLesson.length > 1)
     newLesson[index].group = `${data.subject}: ${data.teacher}`;
   else delete newLesson[index].group;

src/views/settings/TimetableEditor.vue

@@ -47,6 +47,9 @@ function arrayMove(arr, fromIndex, toIndex) {
   arr.splice(fromIndex, 1);
   arr.splice(toIndex, 0, element);
 }
+
+// Increment this variable to rerender all lesson lists
+const forceUpdate = ref(0);
 </script>
 
 <template>
@@ -70,7 +73,7 @@ function arrayMove(arr, fromIndex, toIndex) {
       >
         <swiper-slide :key="day" v-for="day in 5">
           <ScrollableContainer>
-            <div class="list">
+            <div class="list" :key="forceUpdate">
               <div
                 class="lesson"
                 v-for="(lesson, index) in timetableClone.data[day - 1]"
@@ -82,7 +85,12 @@ function arrayMove(arr, fromIndex, toIndex) {
                   :lesson="lesson"
                   :edit="true"
                   @change="(e) => (timetableClone.data[day - 1][index] = e)"
-                  @delete="timetableClone.data[day - 1].splice(index, 1)"
+                  @delete="
+                    () => {
+                      timetableClone.data[day - 1].splice(index, 1);
+                      forceUpdate++;
+                    }
+                  "
                   @move="
                     (direction) => {
                       if (direction == 'up' && index > 0) {
@@ -101,6 +109,7 @@ function arrayMove(arr, fromIndex, toIndex) {
                           index + 1
                         );
                       }
+                      forceUpdate++;
                     }
                   "
                 />