Web: Files: added download files upload with progress

products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadContent.js

@@ -18,38 +18,10 @@ const DownloadContent = (props) => {
     onRowSelect,
     getItemIcon,
     titleFormat,
+    getTitleLabel,
     type
   } = props;
 
-  const getTitleLabel = (format) => {
-    switch (format) {
-      case 0:
-        return t("OriginalFormat");
-      case 1:
-        return ".txt";
-      case 2:
-        return ".docx";
-      case 3:
-        return ".odt";
-      case 4:
-        return ".ods";
-      case 5:
-        return ".odp";
-      case 6:
-        return ".pdf";
-      case 7:
-        return ".rtf";
-      case 8:
-        return ".xlsx";
-      case 9:
-        return ".pptx";
-      case 10:
-        return t("CustomFormat");
-      default:
-        return "";
-    }
-  };
-
   const getFormats = item => {
 
     const documentFormats = [

products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js

@@ -14,7 +14,7 @@ import {
 import { ReactSVG } from "react-svg";
 import { withTranslation } from "react-i18next";
 import i18n from "./i18n";
-import { utils } from "asc-web-common";
+import { utils, api } from "asc-web-common";
 import {
   getFileIcon,
   getFolderIcon,
@@ -92,35 +92,84 @@ class DownloadDialogComponent extends React.Component {
     };
   }
 
-  onDownload = () => {
+  getTitleLabel = (format) => {
+    switch (format) {
+      case 0:
+        return this.props.t("OriginalFormat");
+      case 1:
+        return ".txt";
+      case 2:
+        return ".docx";
+      case 3:
+        return ".odt";
+      case 4:
+        return ".ods";
+      case 5:
+        return ".odp";
+      case 6:
+        return ".pdf";
+      case 7:
+        return ".rtf";
+      case 8:
+        return ".xlsx";
+      case 9:
+        return ".pptx";
+      case 10:
+        return this.props.t("CustomFormat");
+      default:
+        return "";
+    }
+  };
+
+  getDownloadItems = () => {
     const { documents, spreadsheets, presentations, other } = this.state;
-    const folderIds = [];
+    const items = [];
-    const fileIds = [];
 
     for (let item of documents) {
       if (item.checked) {
-        fileIds.push(item.id);
+        const format = item.format === 0 ? item.fileExst : this.getTitleLabel(item.format);
+        items.push({key: item.id, value: format});
       }
     }
 
     for (let item of spreadsheets) {
       if (item.checked) {
-        fileIds.push(item.id);
+        const format = item.format === 0 ? item.fileExst : this.getTitleLabel(item.format);
+        items.push({key: item.id, value: format});
       }
     }
 
     for (let item of presentations) {
       if (item.checked) {
-        fileIds.push(item.id);
+        const format = item.format === 0 ? item.fileExst : this.getTitleLabel(item.format);
+        items.push({key: item.id, value: format});
       }
     }
 
     for (let item of other) {
       if (item.checked) {
-        folderIds.push(item.id);
+        if(item.fileExst) {
+          const format = item.format === 0 ? item.fileExst : this.getTitleLabel(item.format);
+          items.push({key: item.id, value: format});
+        } else {
+          items.push({key: item.id});
+        }
       }
     }
-    toastr.success("onDownload click");
+
+    return items;
+  }
+
+  onDownload = () => {
+    const { startUploadSession, closeUploadSession, onDownloadProgress } = this.props;
+
+    const fileConvertIds = this.getDownloadItems();
+    startUploadSession();
+
+    api.files
+      .downloadFormatFiles(fileConvertIds)
+      .then(() => onDownloadProgress(false))
+      .catch(err => closeUploadSession(err));
   };
 
   getItemIcon = (item) => {
@@ -411,6 +460,7 @@ class DownloadDialogComponent extends React.Component {
                   onSelectFormat={this.onSelectFormat}
                   onRowSelect={this.onRowSelect}
                   getItemIcon={this.getItemIcon}
+                  getTitleLabel={this.getTitleLabel}
                   titleFormat={documentsTitleFormat}
                   type="document"
                 />
@@ -426,6 +476,7 @@ class DownloadDialogComponent extends React.Component {
                   onSelectFormat={this.onSelectFormat}
                   onRowSelect={this.onRowSelect}
                   getItemIcon={this.getItemIcon}
+                  getTitleLabel={this.getTitleLabel}
                   titleFormat={spreadsheetsTitleFormat}
                   type="spreadsheet"
                 />
@@ -441,6 +492,7 @@ class DownloadDialogComponent extends React.Component {
                   onSelectFormat={this.onSelectFormat}
                   onRowSelect={this.onRowSelect}
                   getItemIcon={this.getItemIcon}
+                  getTitleLabel={this.getTitleLabel}
                   titleFormat={presentationsTitleFormat}
                   type="presentation"
                 />

products/ASC.Files/Client/src/components/pages/Home/Section/Header/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { withRouter } from "react-router";
-import { constants, Headline, store } from "asc-web-common";
+import { constants, Headline, store, api } from "asc-web-common";
 import { connect } from "react-redux";
 import { withTranslation } from "react-i18next";
 import {
@@ -166,7 +166,55 @@ class SectionHeaderContent extends React.Component {
 
   copyAction = () => toastr.info("copyAction click");
 
-  downloadAction = () => toastr.info("downloadAction click");
+  startUploadSession = () => {
+    const { onLoading, t, setProgressLabel, setProgressVisible} = this.props;
+    onLoading(true);
+    setProgressLabel(t("ArchivingData"));
+    setProgressVisible(true);
+  }
+
+  closeUploadSession = (err) => {
+    err && toastr.error(err);
+    this.props.onLoading(false);
+    this.props.setProgressVisible(false);
+  }
+
+  loop = url => {
+    api.files.getProgress().then(res => {
+      if(!url) {
+        this.props.setProgressValue(res[0].progress);
+        setTimeout(() => this.loop(res[0].url), 1000);
+      } else {
+        this.closeUploadSession();
+        return window.open(url, "_blank");
+      }
+    }).catch((err) => this.closeUploadSession(err));
+  }
+
+  downloadAction = () => {
+    const fileIds = [];
+    const folderIds = [];
+    const items = [];
+
+    for(let item of this.props.selection) {
+      if(item.fileExst) {
+        fileIds.push(item.id);
+        items.push({id: item.id, fileExst: item.fileExst});
+      } else {
+        folderIds.push(item.id);
+        items.push({id: item.id});
+      }
+    }
+
+    this.startUploadSession();
+
+    api.files
+      .downloadFiles(fileIds, folderIds)
+      .then(() => {
+        this.loop(false);
+      })
+      .catch((err) => this.closeUploadSession(err));
+  }
 
   downloadAsAction = () => this.setState({ showDownloadDialog: !this.state.showDownloadDialog });
 
@@ -441,6 +489,9 @@ class SectionHeaderContent extends React.Component {
           <DownloadDialog 
             visible={showDownloadDialog}
             onClose={this.downloadAsAction}
+            startUploadSession={this.startUploadSession}
+            closeUploadSession={this.closeUploadSession}
+            onDownloadProgress={this.loop}
           />
         )}
       </StyledContainer>

products/ASC.Files/Client/src/components/pages/Home/index.js

@@ -171,7 +171,6 @@ class PureHome extends React.Component {
               onLoading={this.onLoading}
               setProgressVisible={this.setProgressVisible}
               setProgressValue={this.setProgressValue}
-              setProgressContent={this.setProgressContent}
               setProgressLabel={this.setProgressLabel}
             />}
           articleBodyContent={<ArticleBodyContent  onLoading={this.onLoading} isLoading={isLoading} />}
@@ -184,6 +183,9 @@ class PureHome extends React.Component {
               onSelect={this.onSectionHeaderContentSelect}
               onClose={this.onClose}
               onLoading={this.onLoading}
+              setProgressVisible={this.setProgressVisible}
+              setProgressValue={this.setProgressValue}
+              setProgressLabel={this.setProgressLabel}
             />
           }
           sectionFilterContent={<SectionFilterContent onLoading={this.onLoading} />}

products/ASC.Files/Client/src/components/pages/Home/locales/en/translation.json

@@ -71,5 +71,6 @@
   "Filter": "Filter",
   "OverwriteSetting": "Overwrite existing file with the same name",
   "UploadOriginalFormatSetting": "Upload the documents in original format as well",
-  "HideWindowSetting": "Show this window minimized"
+  "HideWindowSetting": "Show this window minimized",
+  "ArchivingData": "Archiving data"
 }

products/ASC.Files/Client/src/components/pages/Home/locales/ru/translation.json

@@ -71,5 +71,6 @@
   "Filter": "Фильтр",
   "OverwriteSetting": "Перезаписывать существующий файл с таким же именем",
   "UploadOriginalFormatSetting": "Сохранять также копию файла в исходном формате",
-  "HideWindowSetting": "Показывать это окно минимизированным"
+  "HideWindowSetting": "Показывать это окно минимизированным",
+  "ArchivingData": "Архивирование данных"
 }

web/ASC.Web.Common/src/api/files/index.js

@@ -322,3 +322,17 @@ export function startUploadSession(folderId, fileName, fileSize, relativePath) {
 export function uploadFile(url, data) {
   return axios.post(url, data);
 }
+
+export function downloadFiles(fileIds, folderIds) {
+  const data = { fileIds, folderIds };
+  return request({ method: "put", url: "/files/fileops/bulkdownload", data });
+}
+
+export function downloadFormatFiles(fileConvertIds) {
+  const data = { fileConvertIds };
+  return request({ method: "put", url: "/files/fileops/bulkdownload", data });
+}
+
+export function getProgress() {
+  return request({ method: "get", url: "/files/fileops" });
+}