updated column titles

Author: danielkellyio

src/components/BoardDragAndDrop.vue

@@ -40,7 +40,7 @@ function addColumn() {
 watch(columns, () => {
   emit(
     "update",
-    cloneDeep({ ...board, order: JSON.stringify(toRaw(columns)) })
+    cloneDeep({ ...props.board, order: JSON.stringify(toRaw(columns)) })
   );
 });
 
@@ -69,7 +69,15 @@ async function addTask({ column, title }: { column: Column; title: string }) {
           class="column bg-gray-100 flex flex-col justify-between rounded-lg px-3 py-3 rounded mr-4 w-[300px]"
         >
           <div>
-            <h3>{{ column.title }}</h3>
+            <h3>
+              <input
+                type="text"
+                :value="column.title"
+                class="bg-transparent mb-2"
+                @keydown.enter="($event.target as HTMLInputElement).blur()"
+                @blur="column.title = ($event.target as HTMLInputElement).value"
+              />
+            </h3>
             <draggable
               :list="column.taskIds"
               group="tasks"

src/pages/boards/[id].vue

@@ -36,19 +36,12 @@ const board = computed(() => boardData.value?.board || null);
 const tasks = computed(() => board.value?.tasks?.items);
 
 // handle board updates
-const updatingTitle = ref(false);
 const { mutate: updateBoard, onDone: onBoardUpdated } =
   useMutation(updateBoardMutation);
-onBoardUpdated(() => {
-  if (updatingTitle.value) {
-    alerts.success("Board successfully updated!");
-  }
-});
-const updateBoardTitle = async (title: string) => {
+onBoardUpdated(() => alerts.success("Board successfully updated!"));
+const updateBoardTitle = (title: string) => {
   if (board.value.title === title) return;
-  updatingTitle.value = true;
-  await updateBoard({ id: boardId.value, title });
-  updatingTitle.value = false;
+  updateBoard({ id: boardId.value, title });
 };
 
 //handle delete board
@@ -100,7 +93,6 @@ function addTask(task: Task) {
 }
 
 onErrorCreatingTask((error) => {
-  console.log(error);
   taskReject(error);
   alerts.error("Error creating task");
 });