feat: set settings per tasks and make them reactive

src/composables/task-properties.js

@@ -0,0 +1,55 @@
+import { useViewSettings } from '@/composables/view-settings'
+
+export function useTaskProperties() {
+  const { SORT_TYPE_KEY } = useViewSettings()
+
+  const propertyItem = ({
+    key,
+    icon = null,
+    sortable = false,
+    sortingKey = null,
+    sortingType = SORT_TYPE_KEY.ALPHA,
+    required = false
+  }) => ({
+    key,
+    icon,
+    sortingKey,
+    sortingType,
+    sortable,
+    required
+  })
+  const propertyId = propertyItem({
+    key: 'id',
+    icon: 'image',
+    sortable: true
+  })
+  const propertyName = propertyItem({
+    icon: 'image',
+    key: 'name',
+    sortable: true,
+    required: true
+  })
+  const propertyCreatedAt = propertyItem({
+    icon: 'image',
+    key: 'createdAt',
+    sortingKey: 'creationDate',
+    sortingType: SORT_TYPE_KEY.DATE,
+    sortable: true
+  })
+  const propertyProgress = propertyItem({
+    icon: 'image',
+    key: 'progress',
+    sortingType: SORT_TYPE_KEY.NUMBER,
+    sortable: true
+  })
+  const propertyState = propertyItem({
+    icon: 'image',
+    key: 'state',
+    type: SORT_TYPE_KEY.NUMBER,
+    sortable: false
+  })
+
+  const propertyItems = [propertyId, propertyName, propertyCreatedAt, propertyProgress, propertyState]
+
+  return { propertyItems }
+}

src/composables/view-settings.js

@@ -4,6 +4,7 @@ const SORT_ORDER_KEY = Object.freeze({
   ASC: 'asc',
   DESC: 'desc'
 })
+
 const SORT_TYPE_KEY = Object.freeze({
   DEFAULT: 'default',
   ALPHA: 'alpha',

src/lang/en.json

@@ -908,7 +908,15 @@
         "info":"Entity recognitions are tasks that you run in order to recognize and to list the entities in your documents.",
         "searchPlaceholder": "Search task",
         "empty": "You have not yet started any tasks. <a href=\"{howToLink}\" target=\"_blank\">Read more.</a>",
-        "noResults": "No search results. Try adjusting the query or filters."
+        "noResults": "No search results. Try adjusting the query or filters.",
+        "properties": {
+          "id": "Id",
+          "name":"Name",
+          "createdAt": "Creation date",
+          "progress":"Progress",
+          "result": "Result",
+          "state":"State"
+        }
       },
       "new": {
         "title":"Find entities"

src/store/modules/app.js

@@ -27,6 +27,26 @@ export const state = () => ({
         perPage: 10,
         properties: ['id', 'name', 'createdAt', 'progress', 'result', 'state']
       },
+      entities: {
+        orderBy: ['name', 'desc'],
+        perPage: 10,
+        properties: ['id', 'name', 'createdAt', 'progress', 'result', 'state']
+      },
+      documents: {
+        orderBy: ['name', 'desc'],
+        perPage: 10,
+        properties: ['id', 'name', 'createdAt', 'progress', 'result', 'state']
+      },
+      'batch-download': {
+        orderBy: ['name', 'desc'],
+        perPage: 10,
+        properties: ['id', 'name', 'createdAt', 'progress', 'result', 'state']
+      },
+      'batch-search': {
+        orderBy: ['name', 'desc'],
+        perPage: 10,
+        properties: ['id', 'name', 'createdAt', 'progress', 'result', 'state']
+      },
       documentView: {
         tab: 'text'
       },
@@ -44,6 +64,25 @@ export const state = () => ({
 })
 
 export const mutations = {
+  taskSettingsCreated(
+    state,
+    {
+      name = 'task',
+      settings: {
+        orderBy = ['name', 'desc'],
+        perPage = 10,
+        properties = ['id', 'name', 'createdAt', 'progress', 'result', 'state']
+      }
+    }
+  ) {
+    if (!state.settings[name]) {
+      state.settings[name] = {
+        orderBy,
+        perPage,
+        properties
+      }
+    }
+  },
   sidebarCompact(state, compact) {
     state.sidebar.compact = compact
   },
@@ -82,6 +121,11 @@ export const getters = {
       return get(state.settings.views, [view, name].join('.'))
     }
   },
+  getTaskSettings(state) {
+    return (view, name) => {
+      return get(state.settings.views.task, [view, 'task', name].join('.'))
+    }
+  },
   isProjectPinned(state) {
     return (name) => state.pins.projects.includes(name)
   }

src/views/Task/BatchDownload/TaskBatchDownloadList.vue

@@ -4,9 +4,9 @@ import TaskList from '@/components/Task/TaskList'
 import DisplayStatus from '@/components/Display/DisplayStatus'
 import DisplayDatetimeFromNow from '@/components/Display/DisplayDatetimeFromNow'
 import DisplayProgress from '@/components/Display/DisplayProgress'
-import { useTaskProperties } from '@/views/Task/task-properties'
-const settingName = 'task'
-const { propertiesModelValueOptions } = useTaskProperties(settingName)
+import { useTaskSettings } from '@/views/Task/task-settings'
+const settingName = 'batch-download'
+const { propertiesModelValueOptions } = useTaskSettings(settingName)
 </script>
 <template>
   <task

src/views/Task/BatchSearch/TaskBatchSearchList.vue

@@ -4,9 +4,9 @@ import TaskList from '@/components/Task/TaskList'
 import DisplayStatus from '@/components/Display/DisplayStatus'
 import DisplayDatetimeFromNow from '@/components/Display/DisplayDatetimeFromNow'
 import DisplayProgress from '@/components/Display/DisplayProgress'
-import { useTaskProperties } from '@/views/Task/task-properties'
-const settingName = 'task'
-const { propertiesModelValueOptions } = useTaskProperties(settingName)
+import { useTaskSettings } from '@/views/Task/task-settings'
+const settingName = 'batch-search'
+const { propertiesModelValueOptions } = useTaskSettings(settingName)
 </script>
 <template>
   <task

src/views/Task/Documents/TaskDocumentsList.vue

@@ -6,11 +6,11 @@ import TaskList from '@/components/Task/TaskList'
 import DisplayStatus from '@/components/Display/DisplayStatus'
 import DisplayDatetimeFromNow from '@/components/Display/DisplayDatetimeFromNow'
 import DisplayProgress from '@/components/Display/DisplayProgress'
-import { useTaskProperties } from '@/views/Task/task-properties'
 import { getHumanTaskName } from '@/enums/taskNames'
 import ButtonIcon from '@/components/Button/ButtonIcon'
-const settingName = 'task'
-const { propertiesModelValueOptions } = useTaskProperties(settingName)
+import { useTaskSettings } from '@/views/Task/task-settings'
+const settingName = 'documents'
+const { propertiesModelValueOptions } = useTaskSettings(settingName)
 const store = useStore()
 async function stopTask(name) {
   await store.dispatch('indexing/stopTask', name)

src/views/Task/Entities/TaskEntitiesList.vue

@@ -5,9 +5,9 @@ import TaskList from '@/components/Task/TaskList'
 import DisplayStatus from '@/components/Display/DisplayStatus'
 import DisplayProgress from '@/components/Display/DisplayProgress'
 import DisplayDatetimeLong from '@/components/Display/DisplayDatetimeLong'
-import { useTaskProperties } from '@/views/Task/task-properties'
-const settingName = 'task'
-const { propertiesModelValueOptions } = useTaskProperties(settingName)
+import { useTaskSettings } from '@/views/Task/task-settings'
+const settingName = 'entities'
+const { propertiesModelValueOptions } = useTaskSettings(settingName)
 </script>
 <template>
   <task

src/views/Task/Task.vue

@@ -33,7 +33,8 @@ const {
   hasPendingTasks,
   hasDoneTasks,
   stopPendingTasks,
-  deleteDoneTasks
+  deleteDoneTasks,
+  isLoading
 } = useTaskPolling(taskNames)
 const { toAddRoute, searchQuery, page, perPage, searchPlaceholder, displayedTasks, totalRows, sortBy, noTasks } =
   useTaskHeader(props.pageName, props.showAdd, pollingTasks)
@@ -71,23 +72,25 @@ const order = computed({
   </page-header>
   <page-container fluid>
     <dismissable-alert variant="info">{{ $t(`task.${pageName}.list.info`) }}</dismissable-alert>
-    <template v-if="noTasks">
-      <slot name="empty" :empty="noTasks">
-        <empty-state label="Empty" :image="appBuilding" :image-dark="appBuildingDark">
-          <template #label>
-            <span v-html="$t(`task.${pageName}.list.empty`)"></span>
-          </template>
-        </empty-state>
-      </slot>
-    </template>
-    <slot
-      :tasks="displayedTasks"
-      :sort="sort"
-      :order="order"
-      :update-order="(v) => (order = v)"
-      :update-sort="(v) => (sort = v)"
-      :empty="noTasks"
-    >
-    </slot>
+    <b-overlay rounded spinner-small opacity="0.6" :show="isLoading">
+      <template v-if="!isLoading && noTasks">
+        <slot name="empty" :empty="noTasks">
+          <empty-state label="Empty" :image="appBuilding" :image-dark="appBuildingDark">
+            <template #label>
+              <span v-html="$t(`task.${pageName}.list.empty`)"></span>
+            </template>
+          </empty-state>
+        </slot>
+      </template>
+      <slot
+        :tasks="displayedTasks"
+        :sort="sort"
+        :order="order"
+        :update-order="(v) => (order = v)"
+        :update-sort="(v) => (sort = v)"
+        :empty="noTasks"
+      >
+      </slot
+    ></b-overlay>
   </page-container>
 </template>

src/views/Task/TasksListSettings.vue

@@ -1,12 +1,14 @@
 <script setup>
 import { noop } from 'lodash'
+import { useRouter } from 'vue-router'
 
 import PageSettings from '@/components/PageSettings/PageSettings'
 import PageSettingsSection from '@/components/PageSettings/PageSettingsSection'
-import { useTaskProperties } from '@/views/Task/task-properties'
+import { useTaskSettings } from '@/views/Task/task-settings'
+const router = useRouter()
 
-const settingName = 'task'
-const { perPage, sortBy, properties } = useTaskProperties(settingName)
+const pageName = router.currentRoute.value.name.split('.')
+const { perPage, sortBy, properties } = useTaskSettings(pageName[1])
 
 defineProps({
   hide: {

src/views/Task/task-header.js

@@ -5,14 +5,14 @@ import { orderBy as orderArrayBy, property } from 'lodash'
 
 import { useUtils } from '@/composables/utils'
 import { useUrlParam } from '@/composables/url-params'
-import { useTaskProperties } from '@/views/Task/task-properties'
+import { useTaskSettings } from '@/views/Task/task-settings'
 
 export function useTaskHeader(pageName, hasAddButton, tasks) {
   const { t } = useI18n()
 
   const { isServer } = useUtils()
   const settingKey = 'task'
-  const { perPage, sortBy } = useTaskProperties(settingKey)
+  const { perPage, sortBy } = useTaskSettings(settingKey)
 
   const toAddRoute = computed(() => {
     return !isServer.value && hasAddButton ? { name: `task.${pageName}.new` } : null

src/views/Task/task-polling.js

@@ -19,16 +19,20 @@ export function useTaskPolling(taskNames) {
   onMounted(async () => {
     return onShotTask()
   })
+  const loaderId = 'load task-list tasks'
   async function onShotTask() {
     try {
-      wait.start('load task-list tasks')
+      wait.start(loaderId)
       await startPollingTasks()
     } catch (e) {
       throw new Error('load task-list tasks')
     } finally {
-      wait.end('load task-list tasks')
+      wait.end(loaderId)
     }
   }
+  const isLoading = computed(() => {
+    return wait.waiting(loaderId)
+  })
   const hasDoneTasks = computed(() => {
     return store.getters['indexing/hasDoneTasks']
   })
@@ -64,5 +68,5 @@ export function useTaskPolling(taskNames) {
     // Execute the `getTasks` method immediately
     return fn()
   }
-  return { tasks, hasPendingTasks, hasDoneTasks, stopPendingTasks, deleteDoneTasks }
+  return { tasks, hasPendingTasks, hasDoneTasks, stopPendingTasks, deleteDoneTasks, isLoading }
 }