Commit f85aa56e authored by Matija Obreza's avatar Matija Obreza

Update: Copy to clipboard using selection

- Chrome on macos doesn't like the `e.clipboardData.setData('text/html', ...)`
parent 0d3803c1
......@@ -38,7 +38,8 @@
"view": "View",
"write": "Write",
"acceptAndPublish": "ACCEPT AND PUBLISH",
"copyToClipboard": "Copy to clipboard"
"copyToClipboard": "Copy to clipboard",
"copiedToClipboard": "Copied to clipboard"
},
"csv": {
"autoDetect": "Auto-detect ",
......
......@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next';
// Actions
import { deleteExecution, executeExecution, getExecution, listDimensions, listParameters } from 'kpi/actions/admin';
import { showSnackbar } from 'actions/snackbar';
// Models
import ExecutionDetails from 'model/kpi/ExecutionDetails';
import ExecutionRun from 'model/kpi/ExecutionRun';
......@@ -34,6 +35,7 @@ interface IExecutionProps extends React.ClassAttributes<any> {
getExecution: any;
executeExecution: any;
deleteExecution: any;
showSnackbar: any;
}
class ExecutionDisplay extends React.Component<IExecutionProps, any> {
......@@ -63,20 +65,30 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
}
// Bind event listener
document.addEventListener('copy', this.copyRunTable, false);
// document.addEventListener('copy', this.copyRunTable, false);
}
// Unbind event listener
public componentWillUnmount() {
document.removeEventListener('copy', this.copyRunTable, false);
// document.removeEventListener('copy', this.copyRunTable, false);
}
private copyRunTable = (e) => {
if (e.currentTarget.activeElement.id === 'copyBtn') {
e.clipboardData.setData('text/html', document.getElementById('runTable').innerHTML);
console.log('Table copied to clipboard.');
// if (e.currentTarget.activeElement.id === 'copyBtn') {
// e.clipboardData.setData('text/html', document.getElementById('runTable').innerHTML);
e.preventDefault();
}
const table: any = document.querySelector('#runTable');
window.getSelection().removeAllRanges();
const range = document.createRange();
range.selectNode(table);
window.getSelection().addRange(range);
console.log('Table copied to clipboard.');
document.execCommand('copy');
window.getSelection().removeAllRanges();
const { showSnackbar, t } = this.props;
showSnackbar(t('common:action.copiedToClipboard'));
// window.getSelection().removeAllRanges();
// }
}
private execute = () => {
......@@ -170,7 +182,7 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
<Grid item sm={ 12 } md={ 6 }>
<PageSection title={ currentRun === null ? t('kpi.admin.p.executionDisplay.lastRun') : <span>{ t('kpi.admin.p.executionDisplay.runFrom') }<PrettyDate value={ currentRun.timestamp }/></span> }
action={
<Button id="copyBtn" onClick={ () => document.execCommand('copy') }>
<Button id="copyBtn" onClick={ this.copyRunTable }>
{ t('common:action.copyToClipboard') }&nbsp;&nbsp;
<FileCopyIcon fontSize="small"/>
</Button>
......@@ -208,6 +220,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
getExecution,
executeExecution,
deleteExecution,
showSnackbar,
}, dispatch);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment