diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 45c061151..46726f875 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -115,7 +115,9 @@ "ViewHeader.delete-template": "Delete", "ViewHeader.edit-template": "Edit", "ViewHeader.empty-card": "Empty card", + "ViewHeader.export-complete": "Export complete!", "ViewHeader.export-csv": "Export to CSV", + "ViewHeader.export-failed": "Export failed!", "ViewHeader.filter": "Filter", "ViewHeader.group-by": "Group by: {property}", "ViewHeader.new": "New", diff --git a/webapp/src/components/viewHeader.tsx b/webapp/src/components/viewHeader.tsx index ba22596de..b1a0e53be 100644 --- a/webapp/src/components/viewHeader.tsx +++ b/webapp/src/components/viewHeader.tsx @@ -30,6 +30,7 @@ import ModalWrapper from './modalWrapper' import NewCardButton from './newCardButton' import ShareBoardComponent from './shareBoardComponent' import './viewHeader.scss' +import {sendFlashMessage} from './flashMessages' type Props = { boardTree: BoardTree @@ -68,6 +69,23 @@ class ViewHeader extends React.Component { } } + onExportCsvTrigger(boardTree: BoardTree) { + try { + CsvExporter.exportTableCsv(boardTree) + const exportCompleteMessage = this.props.intl.formatMessage({ + id: 'ViewHeader.export-complete', + defaultMessage: 'Export complete!', + }) + sendFlashMessage({content: exportCompleteMessage, severity: 'normal'}) + } catch (e) { + const exportFailedMessage = this.props.intl.formatMessage({ + id: 'ViewHeader.export-failed', + defaultMessage: 'Export failed!', + }) + sendFlashMessage({content: exportFailedMessage, severity: 'high'}) + } + } + render(): JSX.Element { const {boardTree, showView, withGroupBy, intl} = this.props const {board, activeView} = boardTree @@ -297,7 +315,7 @@ class ViewHeader extends React.Component { CsvExporter.exportTableCsv(boardTree)} + onClick={() => this.onExportCsvTrigger(boardTree)} /> {/*