From dbbdd52d31236942d503aa5830eeface744a2754 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 20 Apr 2024 18:30:47 +0200
Subject: [PATCH] init task history

---
 src/main.ts                    | 13 ++++++------
 src/router/index.ts            |  6 ++++++
 src/views/task/TaskHistory.vue | 37 ++++++++++++++++++++++++++++++++++
 src/views/task/TaskView.vue    | 15 +++++++++-----
 4 files changed, 60 insertions(+), 11 deletions(-)
 create mode 100644 src/views/task/TaskHistory.vue

diff --git a/src/main.ts b/src/main.ts
index aa8388b..04ff1e1 100644
--- a/src/main.ts
+++ b/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)
-
-app.use(createPinia().use(piniaPluginPersistedstate))
-app.use(router)
-
-app.mount('#app')
+createApp(App)
+  .use(createPinia().use(piniaPluginPersistedstate))
+  .use(router)
+  .use(VueDiff)
+  .mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
index b4ee536..1601698 100644
--- a/src/router/index.ts
+++ b/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',
diff --git a/src/views/task/TaskHistory.vue b/src/views/task/TaskHistory.vue
new file mode 100644
index 0000000..c42e679
--- /dev/null
+++ b/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> -->
diff --git a/src/views/task/TaskView.vue b/src/views/task/TaskView.vue
index d5d9932..af9bb1e 100644
--- a/src/views/task/TaskView.vue
+++ b/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">
-        <summary>Initial plan</summary>
-        <step-table :id="id" :steps="task.initialPlan" />
-      </details>
+      <router-link
+        :to="{
+          name: 'history-task',
+          params: {
+            id
+          }
+        }"
+        class="button"
+        >View history</router-link
+      >
     </div>
   </div>
   <task-not-found v-else />