✨ Implement duplication and deletion of timetables

src/components/settings/timetable-card.vue

@@ -1,14 +1,24 @@
 <script setup>
+import { ref, watch } from "vue";
 import {
   CircleIcon,
   CheckCircleIcon,
   Edit2Icon,
   TrashIcon,
+  AlertCircleIcon,
   CopyIcon,
 } from "lucide-vue-next";
 
 defineProps(["timetable", "editable", "selected"]);
 defineEmits(["click", "edit", "delete", "copy"]);
+
+const deleteConfirm = ref(false);
+
+watch(deleteConfirm, (value) => {
+  if (value) {
+    setTimeout(() => (deleteConfirm.value = false), 2000);
+  }
+});
 </script>
 
 <template>
@@ -27,8 +37,16 @@ defineEmits(["click", "edit", "delete", "copy"]);
 
     <div class="buttons">
       <Edit2Icon v-if="editable" @click="$emit('edit')" />
-      <TrashIcon v-if="editable" @click="$emit('delete')" />
-      <CopyIcon v-if="!editable" @click="$emit('copy')" />
+      <CopyIcon @click="$emit('copy')" />
+      <TrashIcon
+        v-if="editable && !deleteConfirm"
+        @click="deleteConfirm = true"
+      />
+      <AlertCircleIcon
+        v-if="editable && deleteConfirm"
+        color="red"
+        @click="$emit('delete')"
+      />
     </div>
   </div>
 </template>

src/views/settings/TimetableSettings.vue

@@ -1,6 +1,14 @@
 <script setup>
 import TimetableCard from "@/components/settings/timetable-card.vue";
 import { timetables, localTimetables, timetableId } from "@/store";
+import { toRaw } from "vue";
+
+function copyTimetable(timetable) {
+  const newTimetable = structuredClone(toRaw(timetable));
+  newTimetable.title = "Copy of " + timetable.title;
+  newTimetable.id = new Date().getTime();
+  localTimetables.value.push(newTimetable);
+}
 </script>
 
 <template>
@@ -13,6 +21,13 @@ import { timetables, localTimetables, timetableId } from "@/store";
       :selected="timetableId == timetable.id"
       :editable="true"
       @click="timetableId = timetable.id"
+      @copy="copyTimetable(timetable)"
+      @delete="
+        localTimetables.splice(
+          localTimetables.findIndex((e) => e.id == timetable.id),
+          1
+        )
+      "
     />
   </div>
   <h2>{{ $t("settings.heading.remoteTimetables") }}</h2>
@@ -24,6 +39,7 @@ import { timetables, localTimetables, timetableId } from "@/store";
       :selected="timetableId == timetable.id"
       :editable="false"
       @click="timetableId = timetable.id"
+      @copy="copyTimetable(timetable)"
     />
   </div>
 </template>