Merge pull request #1972 from jonboiser/update-export

Update export-to-local-drive workflow

Author: rtibbles

kolibri/plugins/management/assets/src/state/manageContentActions.js

@@ -20,7 +20,12 @@ export function refreshChannelList() {
  * @returns {Promise}
  */
 export function deleteChannel(store, channelId) {
-  return ChannelResource.getModel(channelId).delete().then(refreshChannelList);
+  return ChannelResource.getModel(channelId)
+    .delete()
+    .then(() => {
+      store.dispatch(mutationTypes.REMOVE_CHANNEL_FILE_SUMMARY, channelId);
+    })
+    .then(refreshChannelList);
 }
 
 /**
@@ -54,6 +59,7 @@ export function addChannelFileSummary(store, channelId) {
  */
 export function addChannelFileSummaries(store, channelIds) {
   channelIds.forEach(channelId => {
+    if (store.state.pageState[channelId]) return;
     addChannelFileSummary(store, channelId);
   });
 }

kolibri/plugins/management/assets/src/state/manageContentMutations.js

@@ -1,22 +1,31 @@
+import Vue from 'vue';
 import { PageNames } from '../constants';
 
 export const mutationTypes = {
   ADD_CHANNEL_FILE_SUMMARY: 'MANAGE_CONTENT_ADD_CHANNEL_FILE_SUMMARY',
+  REMOVE_CHANNEL_FILE_SUMMARY: 'MANAGE_CONTENT_REMOVE_CHANNEL_FILE_SUMMARY',
 };
 
 function isManageContentPage(state) {
   return state.pageName === PageNames.CONTENT_MGMT_PAGE;
 }
 
-const mutations = {
-  MANAGE_CONTENT_ADD_CHANNEL_FILE_SUMMARY: (state, fileSummary) => {
-    if (isManageContentPage(state)) {
-      state.pageState.channelFileSummaries[fileSummary.channel_id] = {
-        totalFileSizeInBytes: fileSummary.total_file_size,
-        numberOfFiles: fileSummary.total_files,
-      };
-    }
-  },
-};
+function MANAGE_CONTENT_ADD_CHANNEL_FILE_SUMMARY(state, fileSummary) {
+  if (isManageContentPage(state)) {
+    state.pageState.channelFileSummaries[fileSummary.channel_id] = {
+      totalFileSizeInBytes: fileSummary.total_file_size,
+      numberOfFiles: fileSummary.total_files,
+    };
+  }
+}
 
-export { mutations as default };
+function MANAGE_CONTENT_REMOVE_CHANNEL_FILE_SUMMARY(state, channelId) {
+  if (isManageContentPage(state)) {
+    Vue.delete(state.pageState.channelFileSummaries, channelId);
+  }
+}
+
+export default {
+  MANAGE_CONTENT_ADD_CHANNEL_FILE_SUMMARY,
+  MANAGE_CONTENT_REMOVE_CHANNEL_FILE_SUMMARY,
+};

kolibri/plugins/management/assets/src/views/manage-content-page/channels-grid.vue

@@ -110,8 +110,8 @@
       this.addChannelFileSummaries(map(this.channelList, 'id'));
     },
     watch: {
-      channelList(val, newVal) {
-        this.addChannelFileSummaries(map(newVal, 'id'));
+      channelList(val) {
+        this.addChannelFileSummaries(map(val, 'id'));
       },
     },
     methods: {

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

@@ -10,6 +10,9 @@
     <div class="main">
       <template v-if="!drivesLoading">
         <div class="modal-message">
+          <p>
+            {{ $tr('exportPrompt', { numChannels: allChannels.length, exportSize }) }}
+          </p>
           <drive-list
             :value="selectedDrive"
             :drives="wizardState.driveList"
@@ -53,15 +56,20 @@
   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',
+      exportPrompt:
+        'You are about to export {numChannels, number} {numChannels, plural, one {channel} other {channels}} ({exportSize})',
+      notWritable: 'Not writable',
       refresh: 'Refresh',
+      title: 'Export to where?',
+      waitForTotalSize: 'Calculating size...',
     },
     components: {
       coreModal,
@@ -77,10 +85,20 @@
       canSubmit() {
         return !this.drivesLoading && !this.wizardState.busy && this.selectedDrive !== '';
       },
+      exportSize() {
+        const allChannelsHaveStats = this.allChannels.reduce((flag, channel) => {
+          return flag && Boolean(this.channelsWithStats[channel.id]);
+        }, true);
+        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 +118,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',
     },
   };