diff --git a/packages/asc-web-common/constants/index.js b/packages/asc-web-common/constants/index.js index 664bafad7a..5b5f731b63 100644 --- a/packages/asc-web-common/constants/index.js +++ b/packages/asc-web-common/constants/index.js @@ -156,18 +156,4 @@ export const TenantTrustedDomainsType = Object.freeze({ All: 2, }); -export const FilesFormats = Object.freeze({ - OriginalFormat: 0, - TxtFormat: 1, - DocxFormat: 2, - OdtFormat: 3, - OdsFormat: 4, - OdpFormat: 5, - PdfFormat: 6, - RtfFormat: 7, - XlsxFormat: 8, - PptxFormat: 9, - CustomFormat: 10, -}); - export const PasswordLimitSpecialCharacters = "!@#$%^&*"; diff --git a/packages/asc-web-components/link-with-dropdown/index.js b/packages/asc-web-components/link-with-dropdown/index.js index 0f089c4c07..5a528d0ac5 100644 --- a/packages/asc-web-components/link-with-dropdown/index.js +++ b/packages/asc-web-components/link-with-dropdown/index.js @@ -45,9 +45,11 @@ class LinkWithDropdown extends React.Component { } } - onClickDropDownItem = (item) => { + onClickDropDownItem = (e) => { + const { key } = e.target.dataset; + const item = this.props.data.find((x) => x.key === key); this.setIsOpen(!this.state.isOpen); - item.onClick && item.onClick(); + item && item.onClick && item.onClick(e); }; shouldComponentUpdate(nextProps, nextState) { @@ -115,7 +117,8 @@ class LinkWithDropdown extends React.Component { className="drop-down-item" key={item.key} {...item} - onClick={this.onClickDropDownItem.bind(this.props, item)} + onClick={this.onClickDropDownItem} + data-key={item.key} /> ))} diff --git a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadContent.js b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadContent.js index 3e7608f35c..3cbdb82d2d 100644 --- a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadContent.js +++ b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/DownloadContent.js @@ -5,7 +5,6 @@ import RowContainer from "@appserver/components/row-container"; import Text from "@appserver/components/text"; import LinkWithDropdown from "@appserver/components/link-with-dropdown"; import styled from "styled-components"; -import { FilesFormats } from "@appserver/common/constants"; const StyledDownloadContent = styled.div` .row_content, @@ -24,222 +23,96 @@ const DownloadContent = (props) => { onRowSelect, getItemIcon, titleFormat, - getTitleLabel, type, + filesConverts, + title, } = props; + const getTitleExtensions = () => { + let arr = []; + for (let item of items) { + const exst = item.fileExst; + const arrayExst = filesConverts.find((f) => f[exst])[exst]; + arr = [...arr, ...arrayExst]; + } + + arr = arr.filter((x, pos) => arr.indexOf(x) !== pos); + arr = arr.filter((x, pos) => arr.indexOf(x) === pos); + + const formats = [ + { + key: "original", + label: t("OriginalFormat"), + onClick: onSelectFormat, + "data-format": t("OriginalFormat"), + "data-type": type, + }, + ]; + + for (let f of arr) { + formats.push({ + key: f, + label: f, + onClick: onSelectFormat, + "data-format": f, + "data-type": type, + }); + } + + formats.push({ + key: "custom", + label: t("CustomFormat"), + onClick: onSelectFormat, + "data-format": t("CustomFormat"), + "data-type": type, + }); + + return formats; + }; + const getFormats = (item) => { - const documentFormats = [ - { - key: "key1", - label: t("OriginalFormat"), - onClick: onSelectFormat.bind( - this, - FilesFormats.OriginalFormat, - item, - "document" - ), - }, - { - key: "key2", - label: ".txt", - onClick: onSelectFormat.bind( - this, - FilesFormats.TxtFormat, - item, - "document" - ), - }, - { - key: "key3", - label: ".docx", - onClick: onSelectFormat.bind( - this, - FilesFormats.DocxFormat, - item, - "document" - ), - }, - { - key: "key4", - label: ".odt", - onClick: onSelectFormat.bind( - this, - FilesFormats.OdtFormat, - item, - "document" - ), - }, - { - key: "key5", - label: ".pdf", - onClick: onSelectFormat.bind( - this, - FilesFormats.PdfFormat, - item, - "document" - ), - }, - { - key: "key6", - label: ".rtf", - onClick: onSelectFormat.bind( - this, - FilesFormats.RtfFormat, - item, - "document" - ), - }, - { - key: "key7", - label: t("CustomFormat"), - onClick: onSelectFormat.bind( - this, - FilesFormats.CustomFormat, - item, - "document" - ), - }, - ]; + const conversionFormats = item + ? filesConverts.find((f) => f[item.fileExst])[item.fileExst] + : []; - const presentationFormats = [ + const formats = [ { - key: "key1", + key: "original", label: t("OriginalFormat"), - onClick: onSelectFormat.bind( - this, - FilesFormats.OriginalFormat, - item, - "presentation" - ), - }, - { - key: "key2", - label: ".odp", - onClick: onSelectFormat.bind( - this, - FilesFormats.OdpFormat, - item, - "presentation" - ), - }, - { - key: "key3", - label: ".pdf", - onClick: onSelectFormat.bind( - this, - FilesFormats.PdfFormat, - item, - "presentation" - ), - }, - { - key: "key4", - label: ".pptx", - onClick: onSelectFormat.bind( - this, - FilesFormats.PptxFormat, - item, - "presentation" - ), - }, - { - key: "key5", - label: t("CustomFormat"), - onClick: onSelectFormat.bind( - this, - FilesFormats.CustomFormat, - item, - "presentation" - ), - }, - ]; - - const spreadsheetFormats = [ - { - key: "key1", - label: t("OriginalFormat"), - onClick: onSelectFormat.bind( - this, - FilesFormats.OriginalFormat, - item, - "spreadsheet" - ), - }, - { - key: "key2", - label: ".odp", - onClick: onSelectFormat.bind( - this, - FilesFormats.OdsFormat, - item, - "spreadsheet" - ), - }, - { - key: "key3", - label: ".pdf", - onClick: onSelectFormat.bind( - this, - FilesFormats.PdfFormat, - item, - "spreadsheet" - ), - }, - { - key: "key4", - label: ".xlsx", - onClick: onSelectFormat.bind( - this, - FilesFormats.XlsxFormat, - item, - "spreadsheet" - ), - }, - { - key: "key5", - label: t("CustomFormat"), - onClick: onSelectFormat.bind( - this, - FilesFormats.CustomFormat, - item, - "spreadsheet" - ), + onClick: onSelectFormat, + "data-format": t("OriginalFormat"), + "data-type": type, + "data-file-id": item.id, }, ]; + for (let f of conversionFormats) { + formats.push({ + key: f, + label: f, + onClick: onSelectFormat, + "data-format": f, + "data-type": type, + "data-file-id": item.id, + }); + } switch (type) { case "document": - return documentFormats; + return formats; case "spreadsheet": - return spreadsheetFormats; + return formats; case "presentation": - return presentationFormats; + return formats; default: return []; } }; - const getTitle = () => { - switch (type) { - case "document": - return t("Common:Documents"); - case "spreadsheet": - return t("Translations:Spreadsheets"); - case "presentation": - return t("Translations:Presentations"); - default: - return ""; - } - }; - - const title = getTitle(); - const length = items.length; const minHeight = length > 2 ? 110 : length * 50; const showTitle = length > 1; - const formats = getFormats(); - const documentsTitle = getTitleLabel(titleFormat); + + const titleData = getTitleExtensions(); return ( @@ -261,13 +134,13 @@ const DownloadContent = (props) => { {checkedTitle || indeterminateTitle ? ( - {documentsTitle} + {titleFormat} ) : ( <> @@ -284,8 +157,6 @@ const DownloadContent = (props) => { {items.map((file) => { const element = getItemIcon(file); let dropdownItems = getFormats(file); - const format = getTitleLabel(file.format); - dropdownItems = dropdownItems.slice(1, -1); dropdownItems = dropdownItems.filter( (x) => x.label !== file.fileExst ); @@ -322,7 +193,7 @@ const DownloadContent = (props) => { directionY="bottom" fontSize="12px" > - {format} + {file.format || t("OriginalFormat")} ) : ( <> diff --git a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js index 0d9778db0f..b8be16c4b5 100644 --- a/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js +++ b/products/ASC.Files/Client/src/components/dialogs/DownloadDialog/index.js @@ -13,12 +13,11 @@ import { downloadFormatFiles } from "@appserver/common/api/files"; import { TIMEOUT } from "../../../helpers/constants"; import DownloadContent from "./DownloadContent"; import { inject, observer } from "mobx-react"; -import { FilesFormats } from "@appserver/common/constants"; class DownloadDialogComponent extends React.Component { constructor(props) { super(props); - const { sortedFiles } = this.props; + const { sortedFiles, t } = this.props; this.state = { documents: sortedFiles.documents, @@ -26,9 +25,9 @@ class DownloadDialogComponent extends React.Component { presentations: sortedFiles.presentations, other: sortedFiles.other, - documentsTitleFormat: FilesFormats.OriginalFormat, - spreadsheetsTitleFormat: FilesFormats.OriginalFormat, - presentationsTitleFormat: FilesFormats.OriginalFormat, + documentsTitleFormat: null, + spreadsheetsTitleFormat: null, + presentationsTitleFormat: null, checkedDocTitle: true, checkedSpreadsheetTitle: true, @@ -44,35 +43,6 @@ class DownloadDialogComponent extends React.Component { onClose = () => this.props.setDownloadDialogVisible(false); - 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 files = []; @@ -83,9 +53,9 @@ class DownloadDialogComponent extends React.Component { if (item.checked) { if (item.fileExst) { const format = - item.format === 0 + item.format === this.props.t("OriginalFormat") ? item.fileExst - : this.getTitleLabel(item.format); + : item.format; const viewUrl = item.viewUrl; files.push({ key: item.id, value: format, viewUrl }); } else { @@ -168,85 +138,62 @@ class DownloadDialogComponent extends React.Component { ); }; - onSelectFormat = (format, file, type) => { - const { documents, spreadsheets, presentations } = this.state; + getNewArrayFiles = (fileId, array, format) => { + //Set all documents format + if (!fileId) { + for (let file of array) { + file.format = + format === this.props.t("CustomFormat") || file.fileExst === format + ? this.props.t("OriginalFormat") + : format; + } - const newDocuments = documents; - const newSpreadsheets = spreadsheets; - const newPresentations = presentations; + return array; + } else { + //Set single document format + const newDoc = array.find((x) => x.id == fileId); + if (newDoc.format !== format) { + newDoc.format = format; + } + return array; + } + }; + + onSelectFormat = (e) => { + const { format, type, fileId } = e.target.dataset; + const { documents, spreadsheets, presentations } = this.state; + const { t } = this.props; + + const newDocuments = documents.slice(); + const newSpreadsheets = spreadsheets.slice(); + const newPresentations = presentations.slice(); if (type === "document") { - //Set all documents format - if (!file) { - for (let file of newDocuments) { - file.format = - format === FilesFormats.CustomFormat || file.fileExst === format - ? FilesFormats.OriginalFormat - : format; - } - this.setState({ - documents: newDocuments, - documentsTitleFormat: format, - }); - } else { - //Set single document format - const newDoc = newDocuments.find((x) => x.id === file.id); - if (newDoc.format !== format) { - newDoc.format = format; - this.setState({ - documents: newDocuments, - documentsTitleFormat: FilesFormats.CustomFormat, - }); - } - } + const documents = this.getNewArrayFiles(fileId, newDocuments, format); + this.setState({ + documents, + documentsTitleFormat: !fileId ? format : t("CustomFormat"), + }); } else if (type === "spreadsheet") { - //Set all spreadsheets format - if (!file) { - for (let file of newSpreadsheets) { - file.format = - format === FilesFormats.CustomFormat || file.fileExst === format - ? FilesFormats.OriginalFormat - : format; - } - this.setState({ - spreadsheets: newSpreadsheets, - spreadsheetsTitleFormat: format, - }); - } else { - //Set single spreadsheet format - const newSpreadsheet = newSpreadsheets.find((x) => x.id === file.id); - if (newSpreadsheet.format !== format) { - newSpreadsheet.format = format; - this.setState({ - spreadsheets: newSpreadsheets, - spreadsheetsTitleFormat: FilesFormats.CustomFormat, - }); - } - } + const spreadsheets = this.getNewArrayFiles( + fileId, + newSpreadsheets, + format + ); + this.setState({ + spreadsheets, + spreadsheetsTitleFormat: !fileId ? format : t("CustomFormat"), + }); } else if (type === "presentation") { - //Set all presentations format - if (!file) { - for (let file of newPresentations) { - file.format = - format === FilesFormats.CustomFormat || file.fileExst === format - ? FilesFormats.OriginalFormat - : format; - } - this.setState({ - presentations: newPresentations, - presentationsTitleFormat: format, - }); - } else { - //Set single presentation format - const newPresentation = newPresentations.find((x) => x.id === file.id); - if (newPresentation.format !== format) { - newPresentation.format = format; - this.setState({ - presentations: newPresentations, - presentationsTitleFormat: FilesFormats.CustomFormat, - }); - } - } + const presentations = this.getNewArrayFiles( + fileId, + newPresentations, + format + ); + this.setState({ + presentations, + presentationsTitleFormat: !fileId ? format : t("CustomFormat"), + }); } }; @@ -396,7 +343,7 @@ class DownloadDialogComponent extends React.Component { }; render() { - const { visible, t, tReady } = this.props; + const { visible, t, tReady, filesConverts } = this.props; const { documentsTitleFormat, spreadsheetsTitleFormat, @@ -438,45 +385,48 @@ class DownloadDialogComponent extends React.Component { {documents.length > 0 && ( )} {spreadsheets.length > 0 && ( )} {presentations.length > 0 && ( )} @@ -551,7 +501,6 @@ class DownloadDialogComponent extends React.Component { size="medium" primary onClick={this.onDownload} - //isLoading={isLoading} />