From e02fedfe39be46242ad3e9953b4fa79293cee0be Mon Sep 17 00:00:00 2001 From: arabcoders Date: Fri, 20 Jun 2025 00:21:02 +0300 Subject: [PATCH] Improve tasks page for mass operations. --- ui/components/ConfirmDialog.vue | 7 +- ui/pages/tasks.vue | 232 ++++++++++++++++++++++++++++++-- ui/utils/index.js | 3 + 3 files changed, 229 insertions(+), 13 deletions(-) diff --git a/ui/components/ConfirmDialog.vue b/ui/components/ConfirmDialog.vue index 19998c26..04f2afe6 100644 --- a/ui/components/ConfirmDialog.vue +++ b/ui/components/ConfirmDialog.vue @@ -8,7 +8,8 @@
-

{{ message }}

+

{{ message }}

+
@@ -51,6 +52,10 @@ const props = defineProps({ type: String, default: 'Are you sure?' }, + html_message: { + type: String, + default: '' + }, options: { type: Array as () => Array<{ key: string; label: string, checked?: boolean }>, default: () => [] diff --git a/ui/pages/tasks.vue b/ui/pages/tasks.vue index e8ed4049..8ac122b4 100644 --- a/ui/pages/tasks.vue +++ b/ui/pages/tasks.vue @@ -71,6 +71,42 @@ div.is-centered {
+ +
+
+ +
+ +
+ +
+ +
+ +
+ +
+ +
@@ -242,7 +314,7 @@ div.is-centered { import moment from 'moment' import { useStorage } from '@vueuse/core' import { CronExpressionParser } from 'cron-parser' -import { request } from '~/utils/index' +import { request, sleep } from '~/utils/index' import { encode } from '~/utils/importer' import type { task_item, exported_task, error_response } from '~/@types/tasks' @@ -250,6 +322,7 @@ const box = useConfirm() const toast = useNotification() const config = useConfigStore() const socket = useSocketStore() +const display_style = useStorage("tasks_display_style", "cards") const tasks = ref>([]) const task = ref({}) @@ -258,8 +331,24 @@ const toggleForm = ref(false) const isLoading = ref(true) const initialLoad = ref(true) const addInProgress = ref(false) -const display_style = useStorage("tasks_display_style", "cards") +const selectedElms = ref>([]) +const masterSelectAll = ref(false) +const massRun = ref(false) +const massDelete = ref(false) + +const reset_dialog = () => ({ + visible: false, + title: 'Confirm Action', + confirm: (opts: any) => { }, + message: '', + html_message: '', + options: [], +}); + +const dialog_confirm = ref(reset_dialog()) + const remove_keys = ['in_progress'] + const query = ref() const toggleFilter = ref(false) @@ -269,6 +358,21 @@ watch(toggleFilter, () => { } }); +watch(query, () => { + masterSelectAll.value = false + selectedElms.value = [] +}) + +watch(masterSelectAll, (value) => { + for (const key in filteredTasks.value) { + const element = filteredTasks.value[key] + if (value) { + selectedElms.value.push(element.id) + } else { + selectedElms.value = [] + } + } +}) watch(() => config.app.basic_mode, async () => { if (!config.app.basic_mode) { @@ -358,6 +462,54 @@ const updateTasks = async (items: Array) => { } } +const deleteConfirm = () => { + if (selectedElms.value.length < 1) { + toast.error('No tasks selected.') + return + } + dialog_confirm.value.visible = true + dialog_confirm.value.title = 'Delete Selected Tasks' + dialog_confirm.value.message = `Delete ${selectedElms.value.length} task/s?` + dialog_confirm.value.confirm = async () => await deleteSelected() +} + +const deleteSelected = async () => { + if (selectedElms.value.length < 1) { + toast.error('No tasks selected.') + return + } + + massDelete.value = true + dialog_confirm.value = reset_dialog() + + const itemsToDelete = tasks.value.filter(t => selectedElms.value.includes(t.id)) + if (itemsToDelete.length < 1) { + toast.error('No tasks found to delete.') + return + } + + for (const item of itemsToDelete) { + const index = tasks.value.findIndex(t => t?.id === item.id) + if (index > -1) { + tasks.value.splice(index, 1) + } + } + + await nextTick() + const status = await updateTasks(tasks.value) + selectedElms.value = [] + + if (!status) { + return + } + + toast.success('Tasks deleted.') + setTimeout(async () => { + await nextTick() + massDelete.value = false + }, 500) +} + const deleteItem = async (item: task_item) => { if (true !== box.confirm(`Delete '${item.name}' task?`, true)) { return @@ -432,12 +584,57 @@ const tryParse = (expression: string) => { } } -const runNow = async (item: task_item) => { - if (true !== box.confirm(`Run '${item.name}' now? it will also run at the scheduled time.`)) { +const runConfirm = () => { + if (selectedElms.value.length < 1) { + toast.error('No tasks selected.') + return + } + dialog_confirm.value.visible = true + dialog_confirm.value.title = 'Run Selected Tasks' + + dialog_confirm.value.html_message = `Run the following tasks?
    ` + selectedElms.value.map(id => { + const item = tasks.value.find(t => t.id === id) + return item ? `
  • ${item.name}
    • ` : '' + }).join('') + `
` + + dialog_confirm.value.confirm = async () => await runSelected() +} + +const runSelected = async () => { + if (selectedElms.value.length < 1) { + toast.error('No tasks selected.') return } - item.in_progress = true + dialog_confirm.value = reset_dialog() + + massRun.value = true + + for (const id of selectedElms.value) { + const item = tasks.value.find(t => t.id === id) + if (!item) { + continue + + } + await runNow(item, true) + } + + selectedElms.value = [] + toast.success('Dispatched selected tasks.') + setTimeout(async () => { + await nextTick() + massRun.value = false + }, 500) +} + +const runNow = async (item: task_item, mass: boolean = false) => { + if (!mass && true !== box.confirm(`Run '${item.name}' now? it will also run at the scheduled time.`)) { + return + } + + if (false === mass) { + item.in_progress = true + } let data = { url: item.url, @@ -458,6 +655,10 @@ const runNow = async (item: task_item) => { socket.emit('add_url', data) + if (true === mass) { + return + } + setTimeout(async () => { await nextTick() item.in_progress = false @@ -500,4 +701,11 @@ const exportItem = async (item: task_item) => { return copyText(encode(data)); } +const get_tags = (name: string): Array => { + const regex = /\[(.*?)\]/g; + const matches = name.match(regex); + return !matches ? [] : matches.map(tag => tag.replace(/[\[\]]/g, '').trim()); +} + +const remove_tags = (name: string): string => name.replace(/\[(.*?)\]/g, '').trim(); diff --git a/ui/utils/index.js b/ui/utils/index.js index 20a27c32..9d4a4d2c 100644 --- a/ui/utils/index.js +++ b/ui/utils/index.js @@ -490,6 +490,8 @@ const formatTime = seconds => { return `${secs}` } +const sleep = (seconds) => new Promise(resolve => setTimeout(resolve, seconds * 1000)) + export { ag_set, ag, @@ -517,4 +519,5 @@ export { cleanObject, uri, formatTime, + sleep, }