🚸 Improve UX in timetable editor

src/components/lesson-card.vue

@@ -2,7 +2,7 @@
 import { getSubstitutionColor } from "@/util";
 import { times } from "@/store";
 import { ref, watch } from "vue";
-import { TrashIcon } from "lucide-vue-next";
+import { MinusIcon } from "lucide-vue-next";
 
 const props = defineProps(["lesson", "index", "edit", "buttons"]);
 const emit = defineEmits(["change", "delete"]);
@@ -84,6 +84,7 @@ function getTime(index) {
         spellcheck="false"
         data-ph="Subject"
         ref="subjectElement"
+        @keydown.enter.prevent
         @input="update"
       >
         {{ lesson.subject }}
@@ -102,6 +103,7 @@ function getTime(index) {
           spellcheck="false"
           data-ph="Teacher"
           ref="teacherElement"
+          @keydown.enter.prevent
           @input="update"
         >
           {{ lesson.teacher }}</span
@@ -118,6 +120,7 @@ function getTime(index) {
             spellcheck="false"
             data-ph="Room"
             ref="roomElement"
+            @keydown.enter.prevent
             @input="update"
             >{{ lesson.room }}</span
           ></span
@@ -133,7 +136,7 @@ function getTime(index) {
       <span>{{ getTime(index).end }}</span>
     </div>
     <div class="buttons" v-if="edit && buttons">
-      <TrashIcon @click="$emit('delete')" />
+      <MinusIcon @click="$emit('delete')" />
     </div>
   </div>
 </template>
@@ -190,6 +193,9 @@ function getTime(index) {
   cursor: pointer;
 }
 
+[contenteditable="true"]:focus {
+  padding: 0px 5px;
+}
 [contenteditable="true"]:empty:before {
   content: attr(data-ph);
   opacity: 0.4;

src/components/lesson-group-list.vue

@@ -6,7 +6,7 @@ import {
   ArrowDownIcon,
   SettingsIcon,
   TrashIcon,
-  PlusIcon,
+  ListPlusIcon,
 } from "lucide-vue-next";
 
 const props = defineProps(["lesson", "index", "edit"]);
@@ -43,19 +43,20 @@ function lessonChanged(index, data) {
 function lessonDeleted(index) {
   let newLesson = structuredClone(toRaw(props.lesson));
   newLesson.splice(index, 1);
+  if (newLesson.length == 1) delete newLesson[0].group;
   if (newLesson.length == 0) emit("delete");
   else emit("change", newLesson);
 }
 </script>
 
 <template>
-  <div class="lessonList">
+  <div class="lessonList" :key="lesson.length">
     <div class="buttons" v-if="edit">
       <ArrowUpIcon @click="$emit('move', 'up')" />
       <ArrowDownIcon @click="$emit('move', 'down')" />
       <SettingsIcon @click="advancedOptions = !advancedOptions" />
       <TrashIcon @click="$emit('delete')" />
-      <PlusIcon @click="appendOption" />
+      <ListPlusIcon @click="appendOption" />
     </div>
     <LessonCard
       v-for="(option, groupIndex) in lesson"
@@ -92,7 +93,8 @@ function lessonDeleted(index) {
   opacity: 0.7;
   cursor: pointer;
   display: flex;
-  gap: 3px;
+  gap: 5px;
+  padding: 3px 0px;
 }
 
 input {

src/store.js

@@ -224,7 +224,7 @@ export const possibleTimetableGroups = computed(() => {
   // found in the current timetable
   for (const day of timetable.value.data) {
     for (const lesson of day) {
-      if (Array.isArray(lesson)) {
+      if (Array.isArray(lesson) && lesson.length > 1) {
         for (const group of lesson) {
           if (group.group && !foundTimetableGroups.includes(group.group)) {
             foundTimetableGroups.push(group.group);

src/views/settings/TimetableSettings.vue

@@ -33,6 +33,7 @@ function importTimetable(event) {
       if (!data.data) throw "Invalid data";
       localTimetables.value.push(data);
     } catch (e) {
+      console.log(e.stack);
       alert("Import failed! Check your timetable file!");
     }
   };