init task history

src/main.ts

@@ -3,12 +3,13 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { createApp } from 'vue'
 import App from './App.vue'
 import { router } from './router'
+import VueDiff from 'vue-diff'
 
 import './assets/main.scss'
+import 'vue-diff/dist/index.css'
 
-const app = createApp(App)
+createApp(App)
-
+  .use(createPinia().use(piniaPluginPersistedstate))
-app.use(createPinia().use(piniaPluginPersistedstate))
+  .use(router)
-app.use(router)
+  .use(VueDiff)
-
+  .mount('#app')
-app.mount('#app')

src/router/index.ts

@@ -37,6 +37,12 @@ export const router = createRouter({
       props: true,
       component: () => import('../views/task/DuplicateTask.vue')
     },
+    {
+      path: '/task/:id/history',
+      name: 'history-task',
+      props: true,
+      component: () => import('../views/task/TaskHistory.vue')
+    },
     {
       path: '/task/:taskId/record',
       name: 'record-view',

src/views/task/TaskHistory.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { adaptStepsToTextarea } from '@/modules/task/infra/adaptStepsToTextarea'
+import { useTaskStore } from '@/modules/task/stores/useTask.store'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  id: string
+}>()
+const taskStore = useTaskStore()
+
+const task = computed(() => taskStore.getTask(props.id))
+const prev = computed(() =>
+  adaptStepsToTextarea(task.value?.stepHistory[0] || [])
+)
+const current = computed(() =>
+  adaptStepsToTextarea(task.value?.stepHistory[1] || [])
+)
+</script>
+
+<template>
+  <div v-if="task" class="task-history">
+    <Diff
+      v-if="task.stepHistory.length > 1"
+      mode="split"
+      theme="dark"
+      language="markdown"
+      :prev="prev"
+      :current="current"
+    />
+    <div v-else>No history yet.</div>
+  </div>
+</template>
+
+<!-- <style scoped lang="scss">
+.task-history {
+}
+</style> -->

src/views/task/TaskView.vue

@@ -7,7 +7,6 @@ import { useTaskStore } from '@/modules/task/stores/useTask.store'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import RecordStepTable from '@/modules/record/components/RecordStepTable.vue'
-import StepTable from '@/modules/step/components/StepTable.vue'
 
 const props = defineProps<{
   id: string
@@ -86,10 +85,16 @@ const { canShareTask, taskCopied, shareTask } = useCopyRecord(task)
       </h2>
       <task-record-preview :task-id="id" />
       <record-step-table :id="id" :steps="task.steps" />
-      <details v-if="task.initialPlan && task.wasUpdated">
+      <router-link
-        <summary>Initial plan</summary>
+        :to="{
-        <step-table :id="id" :steps="task.initialPlan" />
+          name: 'history-task',
-      </details>
+          params: {
+            id
+          }
+        }"
+        class="button"
+        >View history</router-link
+      >
     </div>
   </div>
   <task-not-found v-else />