From 9afae9b2ccddd9c55eb8e7e56a0edd3ebb7ea070 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Mon, 19 Jun 2023 16:14:10 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20bugs=20in=20timetable=20ed?=
 =?UTF-8?q?itor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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         | 21 ++++++++++++++++++---
 src/components/lesson-group-list.vue   |  5 +++--
 src/views/settings/TimetableEditor.vue | 13 +++++++++++--
 3 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/components/lesson-card.vue b/src/components/lesson-card.vue
index fe80f7c..5d3347d 100644
--- a/src/components/lesson-card.vue
+++ b/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"
diff --git a/src/components/lesson-group-list.vue b/src/components/lesson-group-list.vue
index 9db783f..677dba6 100644
--- a/src/components/lesson-group-list.vue
+++ b/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;
diff --git a/src/views/settings/TimetableEditor.vue b/src/views/settings/TimetableEditor.vue
index 44452e4..a86c251 100644
--- a/src/views/settings/TimetableEditor.vue
+++ b/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++;
                     }
                   "
                 />