WIP: impl progress bars

resource/locales/en-US/translation.json

@@ -766,6 +766,7 @@
 
   "export_management": {
     "beta_warning": "This function is Beta.",
+    "exporting_data_list": "Exporting Data List",
     "exported_data_list": "Exported Data List",
     "export_collections": "Export Collections",
     "check_all": "Check All",

resource/locales/ja/translation.json

@@ -749,6 +749,7 @@
 
   "export_management": {
     "beta_warning": "この機能はベータ版です",
+    "exporting_data_list": "エクスポート中のデータ",
     "exported_data_list": "エクスポートデータリスト",
     "export_collections": "コレクションのエクスポート",
     "check_all": "全てにチェックを付ける",

src/client/js/components/Admin/Export/ExportPage.jsx

@@ -28,6 +28,7 @@ class ExportPage extends React.Component {
     this.onZipFileStatRemove = this.onZipFileStatRemove.bind(this);
     this.openExportModal = this.openExportModal.bind(this);
     this.closeExportModal = this.closeExportModal.bind(this);
+    this.exportingRequestedHandler = this.exportingRequestedHandler.bind(this);
   }
 
   async componentWillMount() {
@@ -111,6 +112,11 @@ class ExportPage extends React.Component {
     this.setState({ isExportModalOpen: false });
   }
 
+  exportingRequestedHandler() {
+    // TODO: implement
+    this.setState({ isExporting: true });
+  }
+
   render() {
     const { t } = this.props;
 
@@ -124,13 +130,11 @@ class ExportPage extends React.Component {
 
         <button type="button" className="btn btn-default" onClick={this.openExportModal}>{t('export_management.create_new_exported_data')}</button>
 
-        <div className="mt-5">
-          <h3>{t('export_management.exported_data_list')}</h3>
-          <ZipFileTable
-            zipFileStats={this.state.zipFileStats}
-            onZipFileStatRemove={this.onZipFileStatRemove}
-          />
-        </div>
+        { this.state.isExporting && (
+          <div className="mt-5">
+            <h3>{t('export_management.exporting_data_list')}</h3>
+          </div>
+        ) }
 
         <div className="mt-5">
           <h3>{t('export_management.exported_data_list')}</h3>
@@ -142,10 +146,9 @@ class ExportPage extends React.Component {
 
         <ExportZipFormModal
           isOpen={this.state.isExportModalOpen}
+          onExportingRequested={this.exportingRequestedHandler}
           onClose={this.closeExportModal}
           collections={this.state.collections}
-          zipFileStats={this.state.zipFileStats}
-          onZipFileStatAdd={this.onZipFileStatAdd}
         />
       </Fragment>
     );

src/client/js/components/Admin/Export/ExportZipFormModal.jsx

@@ -71,6 +71,7 @@ class ExportZipFormModal extends React.Component {
         timeOut: '1200',
         extendedTimeOut: '150',
       });
+      this.props.onExportingRequested();
       this.props.onClose();
 
     }
@@ -150,10 +151,9 @@ ExportZipFormModal.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   isOpen: PropTypes.bool.isRequired,
+  onExportingRequested: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
   collections: PropTypes.arrayOf(PropTypes.string).isRequired,
-  zipFileStats: PropTypes.arrayOf(PropTypes.object).isRequired,
-  onZipFileStatAdd: PropTypes.func.isRequired,
 };
 
 /**