Add export size to export wizard

Author: jonboiser

kolibri/plugins/management/assets/src/views/manage-content-page/wizard-export.vue

@@ -10,6 +10,10 @@
     <div class="main">
       <template v-if="!drivesLoading">
         <div class="modal-message">
+          <p>
+            {{ $tr('exportPromptPrefix', { numChannels: allChannels.length }) }}
+            ({{ exportContentSize }})
+          </p>
           <drive-list
             :value="selectedDrive"
             :drives="wizardState.driveList"
@@ -53,15 +57,19 @@
   import kButton from 'kolibri.coreVue.components.kButton';
   import loadingSpinner from 'kolibri.coreVue.components.loadingSpinner';
   import driveList from './wizards/drive-list';
+  import sumBy from 'lodash/sumBy';
+
   export default {
     name: 'wizardExport',
     $trs: {
-      title: 'Export to a Local Drive',
-      available: 'Available Storage:',
-      notWritable: 'Not writable',
+      available: 'available',
       cancel: 'Cancel',
       export: 'Export',
+      exportPromptPrefix: 'You are about to export {numChannels, number} {numChannels, plural, one {channel} other {channels}}',
+      notWritable: 'Not writable',
       refresh: 'Refresh',
+      title: 'Export to where?',
+      waitForTotalSize: 'Calculating total size...',
     },
     components: {
       coreModal,
@@ -77,10 +85,18 @@
       canSubmit() {
         return !this.drivesLoading && !this.wizardState.busy && this.selectedDrive !== '';
       },
+      exportContentSize() {
+        const allChannelsHaveStats = this.allChannels.length === Object.keys(this.channelsWithStats).length;
+        if (allChannelsHaveStats) {
+          const totalSize = sumBy(Object.values(this.channelsWithStats), 'totalFileSizeInBytes');
+          return bytesForHumans(totalSize);
+        }
+        return this.$tr('waitForTotalSize');
+      },
     },
     methods: {
       formatEnabledMsg(drive) {
-        return `${this.$tr('available')} ${bytesForHumans(drive.freespace)}`;
+        return `${bytesForHumans(drive.freespace)} ${this.$tr('available')}`;
       },
       driveIsEnabled(drive) {
         return drive.writable;
@@ -100,7 +116,11 @@
       },
     },
     vuex: {
-      getters: { wizardState: state => state.pageState.wizardState },
+      getters: {
+        allChannels: (state) => state.core.channels.list,
+        channelsWithStats: state => state.pageState.channelFileSummaries,
+        wizardState: state => state.pageState.wizardState,
+      },
       actions: {
         transitionWizardPage: manageContentActions.transitionWizardPage,
         updateWizardLocalDriveList: actions.updateWizardLocalDriveList,

kolibri/plugins/management/assets/src/views/manage-content-page/wizards/drive-list.vue

@@ -13,15 +13,15 @@
       <k-radio-button
         v-for="drive in enabledDrives"
         :key="drive.id"
-        :label="genEnabledDriveLabel(drive)"
+        :label="enabledDriveLabel(drive)"
         :radiovalue="drive.id"
         v-model="selectedDrive"
         @change="$emit('change', drive.id)"
       />
       <k-radio-button
         v-for="drive in disabledDrives"
         :key="drive.id"
-        :label="genDisabledDriveLabel(drive)"
+        :label="disabledDriveLabel(drive)"
         :radiovalue="drive.id"
         :disabled="true"
         v-model="selectedDrive"
@@ -37,6 +37,7 @@
   import kRadioButton from 'kolibri.coreVue.components.kRadioButton';
 
   export default {
+    name: 'wizardDriveList',
     components: { kRadioButton },
     props: {
       value: {
@@ -69,20 +70,19 @@
       },
     },
     methods: {
-      genEnabledDriveLabel(drive) {
+      enabledDriveLabel(drive) {
         let driveLabel = drive.name;
         if (this.enabledMsg) {
           driveLabel += ` (${this.enabledMsg(drive)})`;
         }
         return driveLabel;
       },
-      genDisabledDriveLabel(drive) {
+      disabledDriveLabel(drive) {
         return `${drive.name} (${this.disabledMsg})`;
       },
     },
-    name: 'wizardDriveList',
     $trs: {
-      drivesFound: 'Drives found:',
+      drivesFound: 'Drives found',
       noDrivesDetected: 'No drives were detected',
     },
   };