fix(Vue-vuex): add createTask vuex mutation

packages/vue-trello/src/App.vue

@@ -17,7 +17,7 @@
   }
 
   .btn {
-    @apply inline-flex items-center px-4 py-2 rounded-3xl cursor-pointer;
+    @apply inline-flex items-center min-w-min max-w-max px-4 py-2 rounded-3xl cursor-pointer;
     @apply bg-green-500 text-white font-bold hover:bg-green-400 transition duration-500;
   }
 

packages/vue-trello/src/store/index.ts

@@ -1,7 +1,8 @@
 import { InjectionKey } from 'vue';
 import { createStore, useStore, Store } from 'vuex';
-import { getDefaultBoard } from 'src/services';
+import { getDefaultBoard, TaskType } from 'src/services';
 import type { BoardType } from 'src/services';
+import { nanoid } from 'nanoid';
 
 interface State {
   board: BoardType;
@@ -37,7 +38,11 @@ const store = createStore<State>({
       }
     },
   },
-  mutations: {},
+  mutations: {
+    createTask(state, { name, tasks }: { name: string; tasks: TaskType[] }) {
+      tasks.push({ id: nanoid(), name, description: '' });
+    },
+  },
   actions: {},
   plugins: [saveStatePlugin],
   modules: {},

packages/vue-trello/src/views/Board.vue

@@ -11,7 +11,15 @@ const columns = computed(() => store.state.board.columns);
 const isTaskOpen = computed(() => route.name === 'task');
 const goToTask = (task: TaskType) =>
   router.push({ name: 'task', params: { id: task.id } });
-const closeTask = () => router.push({ name: 'board' });
+const close = () => router.push({ name: 'board' });
+const createTask = (event: Event, tasks: TaskType[]) => {
+  const inputElement = event.target as HTMLInputElement;
+  store.commit('createTask', {
+    name: inputElement.value,
+    tasks,
+  });
+  inputElement.value = '';
+};
 </script>
 
 <template>
@@ -35,10 +43,16 @@ const closeTask = () => router.push({ name: 'board' });
               {{ task.description }}
             </p>
           </div>
+          <input
+            type="text"
+            class="task-input"
+            placeholder="+ Enter new task ..."
+            @keyup.enter="createTask($event, column.tasks)"
+          />
         </div>
       </div>
     </div>
-    <div v-if="isTaskOpen" class="task-modal" @click.self="closeTask">
+    <div v-if="isTaskOpen" class="task-modal" @click.self="close">
       <router-view />
     </div>
   </div>
@@ -64,4 +78,9 @@ const closeTask = () => router.push({ name: 'board' });
 .task-modal {
   @apply absolute inset-0 bg-black bg-opacity-50;
 }
+
+.task-input {
+  @apply block w-full p-2 bg-transparent border border-transparent outline-none;
+  @apply focus:border-green-500;
+}
 </style>

packages/vue-trello/src/views/Task.vue

@@ -7,24 +7,38 @@ const props = defineProps<{ id: string }>();
 const router = useAppRouter();
 const store = useAppStore();
 const task = computed(() => store.getters.getTask(props.id));
-const closeTask = () => router.push({ name: 'board' });
+const close = () => router.push({ name: 'board' });
 </script>
 
 <template>
   <div class="task-view">
     <div class="task-item">
       {{ task.name }}
     </div>
-    <button class="btn btn-sm mr-1" @click="closeTask">Close Task</button>
+    <textarea
+      id="task-description"
+      name="task-description"
+      class="task-description"
+      placeholder="Task description here ..."
+      :rows="10"
+      :cols="30"
+      :value="task.description"
+    />
+    <button class="btn btn-sm h-8" @click="close">Close Task</button>
   </div>
 </template>
 
 <style lang="postcss" scoped>
 .task-view {
-  @apply relative inset-0 flex flex-row max-w-3xl m-32 mx-auto py-4 text-left bg-white rounded shadow-2xl;
+  @apply relative inset-0 flex flex-col max-w-3xl m-32 mx-auto px-2 py-4 text-left bg-white rounded shadow-2xl;
 }
 
 .task-item {
-  @apply flex flex-col flex-grow items-start justify-center px-4;
+  @apply flex flex-col flex-grow items-start justify-between;
+}
+
+.task-description {
+  @apply relative my-2 p-2 h-64 border bg-transparent;
+  @apply focus:border-green-500 focus:outline-none;
 }
 </style>