From 08b3b06089b7211b074acc6522d2f1a1b9c401ab Mon Sep 17 00:00:00 2001
From: klemek <klemek.dev@proton.me>
Date: Tue, 14 Jul 2026 18:17:50 +0200
Subject: [PATCH] feat: better task item name input

---
 resources/ts/components/TaskItem.vue | 67 +++++++++++++++++++---------
 1 file changed, 46 insertions(+), 21 deletions(-)

diff --git a/resources/ts/components/TaskItem.vue b/resources/ts/components/TaskItem.vue
index f637167..3d8b63a 100644
--- a/resources/ts/components/TaskItem.vue
+++ b/resources/ts/components/TaskItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, ref, watch, computed, defineAsyncComponent } from "vue";
+import { onBeforeMount, ref, watch, computed, defineAsyncComponent, nextTick } from "vue";
 import type { Task } from "@/types";
 import { CopyIcon, TrashIcon, SaveIcon, XIcon } from "@lucide/vue";
 import { updateTask } from "@/api/tasks";
@@ -11,7 +11,8 @@ import { relativeTime } from "@/lib/dates";
 import { useAlertStore } from "@/stores/alerts";
 import { useI18n } from "vue-i18n";
 
-const emit = defineEmits<(e: "clone" | "delete" | "updated", task: Task) => void>();
+const emit =
+    defineEmits<(e: "clone" | "delete" | "updated", task: Task) => void>();
 
 const task = defineModel<Task>({ required: true });
 defineProps<{ showLastChecked: boolean; showNextReset: boolean }>();
@@ -20,6 +21,7 @@ const editMode = ref<boolean>(false);
 const editName = ref<string>("");
 const editCron = ref<string | null>(null);
 const refreshKey = ref<number>(0);
+const editNameInput = ref<HTMLInputElement | null>(null);
 
 const checked = computed<boolean>(() => taskCompleted(task.value));
 const nextReset = computed<Date | null>(() => taskNextReset(task.value));
@@ -28,26 +30,36 @@ const i18n = useI18n();
 
 const { alertSuccess, alertError } = useAlertStore();
 
+async function onOpen() {
+    editMode.value = true;
+    await nextTick();
+    editNameInput.value?.focus();
+}
+
 function onClose() {
+    editName.value = task.value.name;
+    editCron.value = task.value.reset_cron;
     editMode.value = false;
 }
 
 function onSave() {
-    updateTask(task.value.id, {
-        name: editName.value,
-        reset_cron: editCron.value,
-    })
-        .then((newTask) => {
-            task.value = newTask;
-            emit("updated", newTask);
-            alertSuccess(i18n.t("alerts.task_updated"));
+    if (editName.value.trim()) {
+        updateTask(task.value.id, {
+            name: editName.value.trim(),
+            reset_cron: editCron.value,
         })
-        .catch(() => {
-            alertError(i18n.t("alerts.task_update_error"));
-        });
-    task.value.name = editName.value;
-    task.value.reset_cron = editCron.value;
-    editMode.value = false;
+            .then((newTask) => {
+                task.value = newTask;
+                emit("updated", newTask);
+                alertSuccess(i18n.t("alerts.task_updated"));
+            })
+            .catch(() => {
+                alertError(i18n.t("alerts.task_update_error"));
+            });
+        task.value.name = editName.value;
+        task.value.reset_cron = editCron.value;
+        editMode.value = false;
+    }
 }
 
 function onCheck() {
@@ -105,7 +117,7 @@ watch(task, () => {
 
 <template>
     <div class="list-row text-left">
-        <template  v-if="!editMode">
+        <template v-if="!editMode">
             <div class="content-center">
                 <input
                     :id="refreshKey.toFixed(0)"
@@ -117,7 +129,7 @@ watch(task, () => {
             </div>
             <div
                 class="cursor-pointer text-lg select-none"
-                @click.prevent="editMode = true"
+                @click.prevent="onOpen"
             >
                 <div>{{ task.name }}</div>
                 <div
@@ -131,7 +143,8 @@ watch(task, () => {
                     v-if="showNextReset && checked && nextReset"
                     class="font-light text-xs italic"
                 >
-                    {{ $t("resets") }} {{ relativeTime(nextReset, $i18n.locale) }}
+                    {{ $t("resets") }}
+                    {{ relativeTime(nextReset, $i18n.locale) }}
                 </div>
             </div>
         </template>
@@ -141,7 +154,13 @@ watch(task, () => {
                     <button class="btn btn-square me-1" @click="onClose">
                         <x-icon />
                     </button>
-                    <button class="btn btn-square me-1" @click="onSave">
+                    <button
+                        class="btn btn-square me-1"
+                        :class="
+                            editName.trim().length === 0 ? 'btn-disabled' : ''
+                        "
+                        @click="onSave"
+                    >
                         <save-icon />
                     </button>
                     <button class="btn btn-square me-1" @click="onClone">
@@ -151,7 +170,13 @@ watch(task, () => {
                         <trash-icon />
                     </button>
                 </div>
-                <input v-model="editName" type="text" class="input w-full" />
+                <input
+                    ref="editNameInput"
+                    v-model="editName"
+                    type="text"
+                    class="input w-full"
+                    @keyup.enter="onSave"
+                />
                 <cron-input v-model="editCron" :edit-mode="editMode" />
             </div>
         </template>