Merge pull request learningequality#11696 from GarvitSinghal47/develop

Realtime percentage of tasks in the tab title
jredrejo · Jan 23, 2024 · a65e834 · a65e834
2 parents 66589c6 + 205cb78
commit a65e834
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 32 deletions.
diff --git 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,14 +249,15 @@
       },
       statusText() {
         const trName = statusToTrMap[this.task.status];
-        return this.$tr(trName);
+        return this.deviceString(trName);
       },
       startedByText() {
         return this.$tr('startedByUser', {
           user: this.task.extra_metadata.started_by_username || this.$tr('unknownUsername'),
         });
       },
     },
+
     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
@@ -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"
         />
       </transition-group>
       <BottomAppBar v-if="immersivePage">
@@ -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
@@ -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.',
+  },
 });
 
 /**