diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue index 4a2ab128cbd..a4cacad4719 100644 --- a/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue +++ b/kolibri/plugins/device/assets/src/views/ManageTasksPage/TaskPanel.vue @@ -94,6 +94,7 @@ import bytesForHumans from 'kolibri.utils.bytesForHumans'; import { TaskStatuses, TaskTypes } from 'kolibri.utils.syncTaskUtils'; + import commonDeviceStrings from '../commonDeviceStrings'; const typeToTrMap = { [TaskTypes.REMOTECONTENTIMPORT]: 'importChannelPartial', @@ -130,7 +131,7 @@ export default { name: 'TaskPanel', - mixins: [commonCoreStrings], + mixins: [commonCoreStrings, commonDeviceStrings], setup() { const { windowIsSmall } = useKResponsiveWindow(); return { @@ -248,7 +249,7 @@ }, statusText() { const trName = statusToTrMap[this.task.status]; - return this.$tr(trName); + return this.deviceString(trName); }, startedByText() { return this.$tr('startedByUser', { @@ -256,6 +257,7 @@ }); }, }, + methods: { handleClick() { if (this.taskIsCompleted || this.taskIsFailed) { @@ -279,31 +281,6 @@ message: 'Exported size: ({bytesText})', context: 'Indicates the number of resources and their size.', }, - - statusInProgress: { - message: 'In-progress', - context: 'Label indicating that a task is in progress.', - }, - statusInQueue: { - message: 'Waiting', - context: 'Label indicating that a task is queued.\n', - }, - statusComplete: { - message: 'Finished', - context: 'Label indicating that the *task* was completed successfully.', - }, - statusFailed: { - message: 'Failed', - context: 'Label indicating that a task failed, i.e. it has not been completed.', - }, - statusCanceled: { - message: 'Canceled', - context: 'Refers to a canceled task in the task manager section.', - }, - statusCanceling: { - message: 'Canceling', - context: 'Refers to a task being canceled in the task manager section.', - }, importChannelWhole: { message: `Import '{channelName}'`, context: diff --git a/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue b/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue index 4699084cb1b..c3c78d7ab61 100644 --- a/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue +++ b/kolibri/plugins/device/assets/src/views/ManageTasksPage/index.vue @@ -35,9 +35,11 @@ :key="task.id" :task="task" class="task-panel" + :appBarTitle="$tr('appBarTitle')" :style="{ borderBottomColor: $themePalette.grey.v_200 }" @clickclear="handleClickClear(task)" @clickcancel="handleClickCancel(task)" + @update-title="updateAppBarTitle" /> @@ -74,7 +76,7 @@ name: 'ManageTasksPage', metaInfo() { return { - title: this.$tr('appBarTitle'), + title: this.pageTitle, }; }, components: { @@ -93,6 +95,7 @@ data() { return { loading: true, + pageTitle: this.$tr('appBarTitle'), }; }, computed: { @@ -120,10 +123,9 @@ }, }, watch: { - managedTasks(val) { - if (val.length > 0) { - this.loading = false; - } + managedTasks: { + handler: 'updateManagedTasks', + deep: true, }, }, mounted() { @@ -135,6 +137,59 @@ } }, methods: { + formattedPercentage(val) { + return this.$formatNumber(val, { style: 'percent' }); + }, + formattedNumber(val) { + return this.$formatNumber(val); + }, + + updateManagedTasks(val) { + if (val.length > 0) { + this.loading = false; + } + // Additional logic or updates related to managedTasks + this.updateAppBarTitle(); + }, + updateAppBarTitle() { + const inProgressTasks = this.managedTasks.filter(task => task.status === 'RUNNING'); + const failedTasks = this.managedTasks.filter(task => task.status === 'FAILED'); + const canceledTasks = this.managedTasks.filter(task => task.status === 'CANCELED'); + const totalTasks = this.managedTasks.length; + const completedTasks = this.managedTasks.filter(task => task.status === 'COMPLETED'); + + if (failedTasks.length === 1) { + this.pageTitle = `${this.deviceString('statusFailed')} - ${ + failedTasks[0].extra_metadata.channel_name + } `; + } else if (failedTasks.length > 1) { + this.pageTitle = `${this.formattedNumber(failedTasks.length)} - ${this.deviceString( + 'statusFailed' + )}`; + } else if (totalTasks === 1 && inProgressTasks.length === 1) { + const inProgressTask = inProgressTasks[0]; + this.pageTitle = `${this.formattedPercentage(inProgressTask.percentage)} - ${ + inProgressTask.extra_metadata.channel_name + } `; + } else if (totalTasks > 1 && inProgressTasks.length >= 1) { + const averageProgress = + inProgressTasks.reduce((sum, task) => sum + task.percentage, 0) / + inProgressTasks.length; + if (averageProgress === 1) { + this.pageTitle = this.deviceString('statusComplete'); + } else { + this.pageTitle = `${this.formattedPercentage(averageProgress)} - ${this.deviceString( + 'statusInProgress' + )}`; + } + } else if (totalTasks > 0 && completedTasks.length === totalTasks) { + this.pageTitle = this.deviceString('statusComplete'); + } else if (canceledTasks.length > 0) { + this.pageTitle = this.deviceString('statusCanceled'); + } else { + this.pageTitle = this.$tr('appBarTitle'); + } + }, handleClickClear(task) { TaskResource.clear(task.id).catch(() => { // error silently diff --git a/kolibri/plugins/device/assets/src/views/commonDeviceStrings.js b/kolibri/plugins/device/assets/src/views/commonDeviceStrings.js index 4b65899af34..77ada105324 100644 --- a/kolibri/plugins/device/assets/src/views/commonDeviceStrings.js +++ b/kolibri/plugins/device/assets/src/views/commonDeviceStrings.js @@ -43,6 +43,30 @@ const deviceStrings = createTranslator('CommonDeviceStrings', { message: 'Newly downloaded resources will be added to the primary storage location', context: 'Label for primary storage location.', }, + statusInProgress: { + message: 'In-progress', + context: 'Label indicating that a task is in progress.', + }, + statusInQueue: { + message: 'Waiting', + context: 'Label indicating that a task is queued.\n', + }, + statusComplete: { + message: 'Finished', + context: 'Label indicating that the *task* was completed successfully.', + }, + statusFailed: { + message: 'Failed', + context: 'Label indicating that a task failed, i.e. it has not been completed.', + }, + statusCanceled: { + message: 'Canceled', + context: 'Refers to a canceled task in the task manager section.', + }, + statusCanceling: { + message: 'Canceling', + context: 'Refers to a task being canceled in the task manager section.', + }, }); /**