✨ Implement timetable editing

src/components/lesson-card.vue

@@ -1,8 +1,25 @@
 <script setup>
 import { getSubstitutionColor } from "@/util";
 import { times } from "@/store";
+import { ref } from "vue";
+import { TrashIcon } from "lucide-vue-next";
 
-defineProps(["lesson", "index"]);
+const props = defineProps(["lesson", "index", "edit", "buttons"]);
+const emit = defineEmits(["change", "delete"]);
+
+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,
+  });
+}
 
 function isChanged(lesson, key) {
   const substitution = lesson.substitution;
@@ -43,13 +60,21 @@ function getTime(index) {
     <div class="infos">
       <!-- Subject changed -->
       <span class="subject" v-if="isChanged(lesson, 'subject')">
-        <s>{{ lesson.subject }}</s> {{ lesson.substitution.change.subject }}
+        <s>{{ lesson.subject }}</s>
+        {{ lesson.substitution.change.subject }}
       </span>
       <!-- Cancellation -->
       <span class="subject" v-else-if="isCancelled(lesson.substitution)">
         <s>{{ lesson.subject }}</s>
       </span>
-      <span class="subject" v-else>
+      <span
+        class="subject"
+        v-else
+        :contenteditable="edit"
+        data-ph="Subject"
+        ref="subjectElement"
+        @input="update"
+      >
         {{ lesson.subject }}
       </span>
       <div class="info">
@@ -58,22 +83,43 @@ function getTime(index) {
           <s>{{ lesson.teacher }}</s>
           {{ lesson.substitution.change.teacher }}</span
         >
-        <span class="info" v-else> {{ lesson.teacher }}</span>
+        <span
+          class="info"
+          v-else
+          :contenteditable="edit"
+          data-ph="Teacher"
+          ref="teacherElement"
+          @input="update"
+        >
+          {{ lesson.teacher }}</span
+        >
         <!-- Room changed -->
         <span class="info" v-if="isChanged(lesson, 'room')"
           >, <s>{{ lesson.room }}</s> {{ lesson.substitution.change.room }}
         </span>
-        <span class="info" v-else-if="lesson.room">, {{ lesson.room }}</span>
+        <span class="info" v-else-if="lesson.room || edit"
+          >,
+          <span
+            :contenteditable="edit"
+            data-ph="Room"
+            ref="roomElement"
+            @input="update"
+            >{{ lesson.room }}</span
+          ></span
+        >
         <!-- Show notes if available -->
         <span class="info" v-if="getNotes(lesson.substitution)"
           >, {{ $t("timetable.notes") }} {{ getNotes(lesson.substitution) }}
         </span>
       </div>
     </div>
-    <div class="times" v-if="getTime(index).start">
+    <div class="times" v-if="getTime(index).start && !edit">
       <span>{{ getTime(index).start }} -</span>
       <span>{{ getTime(index).end }}</span>
     </div>
+    <div class="buttons" v-if="edit && buttons">
+      <TrashIcon @click="$emit('delete')" />
+    </div>
   </div>
 </template>
 
@@ -119,4 +165,19 @@ function getTime(index) {
   opacity: 0.5;
   font-weight: 300;
 }
+
+.buttons {
+  margin-left: auto;
+  opacity: 0.7;
+  display: grid;
+  gap: 5px;
+  align-items: center;
+  cursor: pointer;
+}
+
+[contenteditable="true"]:empty:before {
+  content: attr(data-ph);
+  opacity: 0.4;
+  cursor: text;
+}
 </style>