From 748cb9e672cee6a0e818a61f3706e7aa26838a8e Mon Sep 17 00:00:00 2001
From: Caroline Desprat <cdesprat@icij.org>
Date: Thu, 14 Nov 2024 16:38:40 +0000
Subject: [PATCH] feat: add table pages for batch download and batch searches

---
 components.d.ts                               |  8 +++++
 src/lang/en.json                              | 19 ++++++++++++
 src/router/index.js                           | 31 ++++---------------
 .../BatchDownload/TaskBatchDownloadList.vue   | 20 ++++++++++++
 .../Task/BatchSearch/TaskBatchSearchList.vue  | 21 +++++++++++++
 .../Task/Documents/TaskDocumentsList.vue      | 15 ++++++++-
 src/views/Task/Entities/TaskEntitiesList.vue  | 18 ++++++++++-
 7 files changed, 105 insertions(+), 27 deletions(-)
 create mode 100644 src/views/Task/BatchDownload/TaskBatchDownloadList.vue
 create mode 100644 src/views/Task/BatchSearch/TaskBatchSearchList.vue

diff --git a/components.d.ts b/components.d.ts
index 2aae722b91..dd8a1f4881 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -132,6 +132,7 @@ declare module 'vue' {
     DisplayStatusProgress: typeof import('./src/components/Display/DisplayStatusProgress.vue')['default']
     DisplayTags: typeof import('./src/components/Display/DisplayTags.vue')['default']
     DisplayTagsSearchParameter: typeof import('./src/components/Display/DisplayTagsSearchParameter.vue')['default']
+    DisplayTaskName: typeof import('./src/components/Display/DisplayTaskName.vue')['default']
     DisplayUser: typeof import('./src/components/Display/DisplayUser.vue')['default']
     DisplayVisibility: typeof import('./src/components/Display/DisplayVisibility.vue')['default']
     DocumentActions: typeof import('./src/components/DocumentActions.vue')['default']
@@ -341,6 +342,9 @@ declare module 'vue' {
     PageSettingsSectionGroup: typeof import('./src/components/PageSettings/PageSettingsSectionGroup.vue')['default']
     PageSettingsTitle: typeof import('./src/components/PageSettings/PageSettingsTitle.vue')['default']
     PageTable: typeof import('./src/components/PageTable/PageTable.vue')['default']
+    PageTableBak: typeof import('./src/components/PageTable/PageTableBak.vue')['default']
+    PageTableNew: typeof import('./src/components/PageTable/PageTableNew.vue')['default']
+    PageTableSimple: typeof import('./src/components/PageTable/PageTableSimple.vue')['default']
     PageTableTdActions: typeof import('./src/components/PageTable/PageTableTdActions.vue')['default']
     PageTableTh: typeof import('./src/components/PageTable/PageTableTh.vue')['default']
     PageTableThSort: typeof import('./src/components/PageTable/PageTableThSort.vue')['default']
@@ -444,9 +448,13 @@ declare module 'vue' {
     TabGroupNavigation: typeof import('./src/components/TabGroup/TabGroupNavigation/TabGroupNavigation.vue')['default']
     TabGroupNavigationEntry: typeof import('./src/components/TabGroup/TabGroupNavigation/TabGroupNavigationEntry.vue')['default']
     TabGroupTitle: typeof import('./src/components/TabGroup/TabGroupTitle.vue')['default']
+    TaskActions: typeof import('./src/components/Task/TaskActions.vue')['default']
     TaskDocumentsForm: typeof import('./src/components/Task/TaskDocuments/TaskDocumentsForm.vue')['default']
     TaskEntitiesForm: typeof import('./src/components/Task/TaskEntities/TaskEntitiesForm.vue')['default']
     TaskItemStatus: typeof import('./src/components/TaskItemStatus.vue')['default']
+    TaskList: typeof import('./src/components/Task/TaskList.vue')['default']
+    TaskList_bak: typeof import('./src/components/Task/TaskList_bak.vue')['default']
+    'TaskList_bak*': typeof import('./src/components/Task/TaskList_bak*.vue')['default']
     TasksList: typeof import('./src/components/TasksList.vue')['default']
     TextTruncate: typeof import('./src/components/Text/TextTruncate.vue')['default']
     UserHistorySaveSearchForm: typeof import('./src/components/UserHistorySaveSearchForm.vue')['default']
diff --git a/src/lang/en.json b/src/lang/en.json
index 573c6aae6c..a814400eb9 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -963,6 +963,25 @@
         "success":"Add document task is launched",
         "error":"An error occurred when creating the task: {error}"
       }
+    },
+    "batch-download": {
+      "title": "Batch downloads",
+      "list": {
+        "title":"All tasks",
+        "searchPlaceholder": "Search task",
+        "empty": "You have not yet started any tasks. <a href=\"{howToLink}\" target=\"_blank\">Read more.</a>"
+      }
+    },
+    "batch-search": {
+      "title": "Batch searches",
+      "list": {
+        "title":"All tasks",
+        "searchPlaceholder": "Search task",
+        "empty": "You have not yet started any tasks. <a href=\"{howToLink}\" target=\"_blank\">Read more.</a>"
+      },
+      "new": {
+        "title":"Run a new batch search"
+      }
     }
   },
   "batchSearch": {
diff --git a/src/router/index.js b/src/router/index.js
index 37ced71ef1..acbcea1bb5 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -198,25 +198,14 @@ export const routes = [
           {
             name: 'task.batch-download',
             path: 'batch-download',
-            component: () => import('@/views/TaskBatchDownload'),
+            meta: { title: 'task.batch-download.title' },
             children: [
               {
                 name: 'task.batch-download.list',
                 path: '',
-                component: () => import('@/views/TaskBatchDownloadList'),
+                component: () => import('@/views/Task/BatchDownload/TaskBatchDownloadList'),
                 meta: {
-                  title: 'batchDownload.title',
-                  docs: [
-                    {
-                      title: 'Add documents to Datashare',
-                      path: '<%- os %>/add-documents-to-datashare-on-<%- os %>',
-                      mode: ['LOCAL', 'EMBEDDED']
-                    },
-                    {
-                      title: 'Analyse documents',
-                      path: 'all/analyze-documents'
-                    }
-                  ]
+                  breadcrumb: false
                 }
               }
             ]
@@ -224,24 +213,16 @@ export const routes = [
           {
             name: 'task.batch-search',
             path: 'batch-search',
-            components: {
-              default: () => import('@/views/TaskBatchSearch')
-            },
+            meta: { title: 'task.batch-search.title' },
             children: [
               {
                 path: '',
                 name: 'task.batch-search.list',
                 components: {
-                  default: () => import('@/views/TaskBatchSearchList')
+                  default: () => import('@/views/Task/BatchSearch/TaskBatchSearchList')
                 },
                 meta: {
-                  title: 'batchSearch.title',
-                  docs: [
-                    {
-                      title: 'How to use batch searches',
-                      path: 'all/batch-search-documents'
-                    }
-                  ]
+                  breadcrumb: false
                 }
               },
               {
diff --git a/src/views/Task/BatchDownload/TaskBatchDownloadList.vue b/src/views/Task/BatchDownload/TaskBatchDownloadList.vue
new file mode 100644
index 0000000000..5254486d37
--- /dev/null
+++ b/src/views/Task/BatchDownload/TaskBatchDownloadList.vue
@@ -0,0 +1,20 @@
+<script setup>
+import Task from '@/views/Task/Task'
+import TaskList from '@/components/Task/TaskList'
+import DisplayStatus from '@/components/Display/DisplayStatus'
+import DisplayDatetimeFromNow from '@/components/Display/DisplayDatetimeFromNow'
+import DisplayProgress from '@/components/Display/DisplayProgress'
+</script>
+<template>
+  <task
+    v-slot="{ tasks, columns }"
+    :task-filter="['org.icij.datashare.tasks.BatchDownloadRunner']"
+    page-name="batch-download"
+  >
+    <task-list :tasks="tasks" :columns="columns" :stoppable="true">
+      <template #cell(state)="{ item }"><display-status :value="item.state" /></template>
+      <template #cell(createdAt)="{ item }"><display-datetime-from-now :value="item.createdAt" /></template>
+      <template #cell(progress)="{ item }"><display-progress :value="item.progress" /></template>
+    </task-list>
+  </task>
+</template>
diff --git a/src/views/Task/BatchSearch/TaskBatchSearchList.vue b/src/views/Task/BatchSearch/TaskBatchSearchList.vue
new file mode 100644
index 0000000000..f7d42c784d
--- /dev/null
+++ b/src/views/Task/BatchSearch/TaskBatchSearchList.vue
@@ -0,0 +1,21 @@
+<script setup>
+import Task from '@/views/Task/Task'
+import TaskList from '@/components/Task/TaskList'
+import DisplayStatus from '@/components/Display/DisplayStatus'
+import DisplayDatetimeFromNow from '@/components/Display/DisplayDatetimeFromNow'
+import DisplayProgress from '@/components/Display/DisplayProgress'
+</script>
+<template>
+  <task
+    v-slot="{ tasks, columns }"
+    :task-filter="['org.icij.datashare.tasks.BatchSearchRunner']"
+    page-name="batch-search"
+    show-add
+  >
+    <task-list :tasks="tasks" :columns="columns" :stoppable="true">
+      <template #cell(state)="{ item }"><display-status :value="item.state" /></template>
+      <template #cell(createdAt)="{ item }"><display-datetime-from-now :value="item.createdAt" /></template>
+      <template #cell(progress)="{ item }"><display-progress :value="item.progress" /></template>
+    </task-list>
+  </task>
+</template>
diff --git a/src/views/Task/Documents/TaskDocumentsList.vue b/src/views/Task/Documents/TaskDocumentsList.vue
index c934d2fd16..e1ab538866 100644
--- a/src/views/Task/Documents/TaskDocumentsList.vue
+++ b/src/views/Task/Documents/TaskDocumentsList.vue
@@ -1,9 +1,22 @@
 <script setup>
 import Task from '@/views/Task/Task'
+import TaskList from '@/components/Task/TaskList'
+import DisplayStatus from '@/components/Display/DisplayStatus'
+import DisplayDatetimeFromNow from '@/components/Display/DisplayDatetimeFromNow'
+import DisplayProgress from '@/components/Display/DisplayProgress'
 </script>
 <template>
   <task
+    v-slot="{ tasks, columns }"
     :task-filter="['org.icij.datashare.tasks.EnqueueFromIndexTask', 'org.icij.datashare.tasks.ScanTask']"
     page-name="documents"
-  />
+    show-add
+  >
+    <task-list :tasks="tasks" :columns="columns" :stoppable="true">
+      <template #cell(state)="{ item }"><display-status :value="item.state" /></template>
+      <template #cell(createdAt)="{ item }"><display-datetime-from-now :value="item.createdAt" /></template>
+      <template #cell(progress)="{ item }"><display-progress :value="item.progress" /></template>
+      <template #cell(name)="{ item }">{{ item.name }}</template>
+    </task-list>
+  </task>
 </template>
diff --git a/src/views/Task/Entities/TaskEntitiesList.vue b/src/views/Task/Entities/TaskEntitiesList.vue
index 17af4b81dd..12e4027341 100644
--- a/src/views/Task/Entities/TaskEntitiesList.vue
+++ b/src/views/Task/Entities/TaskEntitiesList.vue
@@ -1,6 +1,22 @@
 <script setup>
 import Task from '@/views/Task/Task'
+import TaskList from '@/components/Task/TaskList'
+import DisplayStatus from '@/components/Display/DisplayStatus'
+import DisplayProgress from '@/components/Display/DisplayProgress'
+import DisplayDatetimeLong from '@/components/Display/DisplayDatetimeLong'
 </script>
 <template>
-  <task :task-filter="['org.icij.datashare.tasks.ExtractNlpTask']" page-name="entities" />
+  <task
+    v-slot="{ tasks, columns }"
+    :task-filter="['org.icij.datashare.tasks.ExtractNlpTask']"
+    page-name="entities"
+    show-add
+  >
+    <task-list :tasks="tasks" :columns="columns" :stoppable="true">
+      <template #cell(state)="{ item }"><display-status :value="item.state" /></template>
+      <template #cell(createdAt)="{ item }"><display-datetime-long :value="item.createdAt" /></template>
+      <template #cell(progress)="{ item }"><display-progress :value="item.progress" /></template>
+      <template #cell(name)="{ item }">{{ item.name }}</template>
+    </task-list>
+  </task>
 </template>