Commit 8075be56 authored by Matija Obreza's avatar Matija Obreza
Browse files

Merge branch '166-copy-kpi-observations-to-clipboard' into 'master'

Resolve "Copy KPI observations to clipboard"

Closes #166

See merge request genesys-pgr/genesys-ui!170
parents a8e4c839 f85aa56e
......@@ -37,7 +37,9 @@
"unpublish": "Unpublish",
"view": "View",
"write": "Write",
"acceptAndPublish": "ACCEPT AND PUBLISH"
"acceptAndPublish": "ACCEPT AND PUBLISH",
"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';
......@@ -21,6 +22,7 @@ import Grid from '@material-ui/core/Grid/Grid';
import Button from '@material-ui/core/Button';
import RunTable from './c/RunTable';
import ExecutionDialog from './ExecutionDialog';
import FileCopyIcon from '@material-ui/icons/FileCopy';
// import { parse } from 'query-string';
......@@ -33,6 +35,7 @@ interface IExecutionProps extends React.ClassAttributes<any> {
getExecution: any;
executeExecution: any;
deleteExecution: any;
showSnackbar: any;
}
class ExecutionDisplay extends React.Component<IExecutionProps, any> {
......@@ -60,6 +63,32 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
console.log(`Loading execution ${shortName}`);
getExecution(shortName);
}
// Bind event listener
// document.addEventListener('copy', this.copyRunTable, false);
}
// Unbind event listener
public componentWillUnmount() {
// document.removeEventListener('copy', this.copyRunTable, false);
}
private copyRunTable = (e) => {
// 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 = () => {
......@@ -151,7 +180,14 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
</Grid>
<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> }>
<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={ this.copyRunTable }>
{ t('common:action.copyToClipboard') }&nbsp;&nbsp;
<FileCopyIcon fontSize="small"/>
</Button>
}
>
<RunTable execution={ execution } runInfo={ currentRun || lastRun } />
</PageSection>
</Grid>
......@@ -184,6 +220,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
getExecution,
executeExecution,
deleteExecution,
showSnackbar,
}, dispatch);
......
......@@ -42,7 +42,7 @@ class RunTable extends React.Component<any> {
public render() {
const {execution, runInfo, classes} = this.props;
return (
<table className={ classes.root }>
<table className={ classes.root } id="runTable">
{ runInfo &&
<thead className={ `${classes.header} back-green` }>
<tr>
......
......@@ -49,6 +49,10 @@ const styles = (theme) => ({
fontSize: '1.3rem',
// color: 'Red',
},
sectionAction: {
margin: 0,
alignSelf: 'center' as 'center',
},
});
interface ILayoutProps extends React.Props<any> {
......@@ -84,9 +88,9 @@ const Section1 = ({classes, className = '', title, children = null}) => children
</Card>
);
const Section2 = ({classes, title, children = null}) => children && (
const Section2 = ({classes, title, action = null, children = null}) => children && (
<Card className={ classes.section }>
<CardHeader classes={ { title: classes.sectionTitle } } title={ title } />
<CardHeader classes={ { title: classes.sectionTitle, action: classes.sectionAction } } title={ title } action={ action } />
<CardContent>{ children }</CardContent>
</Card>
);
......
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