insert steps to existing task

src/modules/record/components/RecordControls.vue

@@ -83,8 +83,12 @@ const addStepsForm = () => {
 }
 
 const addSteps = (steps: Stepable[]) => {
-  console.log(steps)
+  if (!record.value.currentStepId) {
+    return
+  }
+
   isAddingSteps.value = false
+  taskStore.addStepsToTask(props.taskId, steps, record.value.currentStepId)
 }
 
 const activeElement = useActiveElement()
@@ -157,9 +161,14 @@ onUnmounted(() => {
         </button>
       </template>
 
-      <button class="button is-primary is-light" @click="addStepsForm">
+      <button
+        v-if="!record.end && record.currentStepId"
+        class="button is-primary is-light"
+        @click="addStepsForm"
+      >
         <img src="/icons/plus.svg" alt="plus" />
       </button>
+
       <button
         v-if="hasStarted"
         class="button is-warning"
@@ -168,6 +177,7 @@ onUnmounted(() => {
         <img src="/icons/recycle.svg" alt="reset" />
       </button>
     </div>
+
     <div class="column message">
       <p><kbd>s</kbd>: start record</p>
       <p><kbd>n</kbd>: next step</p>

src/modules/task/components/NewStepsForm.vue

@@ -12,16 +12,15 @@ const emits = defineEmits<{
 }>()
 const steps = ref<Stepable[]>([])
 
-const submit = () => {
+const save = () => {
   emits('submit', steps.value)
-  emits('close')
   steps.value = []
 }
 </script>
 
 <template>
   <div class="modal" :class="{ 'is-active': isActive }">
-    <div class="modal-background"></div>
+    <div class="modal-background" @click="$emit('close')"></div>
     <div class="new-step-form modal-card">
       <header class="modal-card-head">
         <p class="modal-card-title">New steps</p>
@@ -32,17 +31,12 @@ const submit = () => {
         ></button>
       </header>
       <section class="modal-card-body">
-        <step-input v-model="steps" size="small" />
+        <step-input v-if="isActive" v-model="steps" size="small" />
       </section>
       <footer class="modal-card-foot">
-        <button class="button is-primary" @click="submit">Save changes</button>
+        <button class="button is-primary" @click="save">add</button>
-        <button class="button" @click="$emit('close')">Cancel</button>
+        <button class="button" @click="$emit('close')">cancel</button>
       </footer>
     </div>
   </div>
 </template>
-
-<style scoped lang="scss">
-.new-step-form {
-}
-</style>

src/modules/task/stores/useTask.store.ts

@@ -17,6 +17,27 @@ export const useTaskStore = defineStore('task-store', {
       this.remove(task.id)
       this.tasks.push(task)
     },
+    addStepsToTask(taskId: string, steps: Stepable[], fromStepId: string) {
+      const task = this.tasks.find((t) => t.id === taskId)
+
+      if (!task) {
+        return
+      }
+
+      const fromStepIndex = task.steps.findIndex((s) => s.id === fromStepId)
+
+      if (fromStepIndex < 0) {
+        return
+      }
+
+      const newSteps = [
+        ...task.steps.slice(0, fromStepIndex + 1),
+        ...steps,
+        ...task.steps.slice(fromStepIndex + 1)
+      ]
+
+      task.steps = newSteps
+    },
     reset() {
       this.tasks = []
     },