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 @@ ...@@ -37,7 +37,9 @@
"unpublish": "Unpublish", "unpublish": "Unpublish",
"view": "View", "view": "View",
"write": "Write", "write": "Write",
"acceptAndPublish": "ACCEPT AND PUBLISH" "acceptAndPublish": "ACCEPT AND PUBLISH",
"copyToClipboard": "Copy to clipboard",
"copiedToClipboard": "Copied to clipboard"
}, },
"csv": { "csv": {
"autoDetect": "Auto-detect ", "autoDetect": "Auto-detect ",
......
...@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux'; ...@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
import { translate } from 'react-i18next'; import { translate } from 'react-i18next';
// Actions // Actions
import { deleteExecution, executeExecution, getExecution, listDimensions, listParameters } from 'kpi/actions/admin'; import { deleteExecution, executeExecution, getExecution, listDimensions, listParameters } from 'kpi/actions/admin';
import { showSnackbar } from 'actions/snackbar';
// Models // Models
import ExecutionDetails from 'model/kpi/ExecutionDetails'; import ExecutionDetails from 'model/kpi/ExecutionDetails';
import ExecutionRun from 'model/kpi/ExecutionRun'; import ExecutionRun from 'model/kpi/ExecutionRun';
...@@ -21,6 +22,7 @@ import Grid from '@material-ui/core/Grid/Grid'; ...@@ -21,6 +22,7 @@ import Grid from '@material-ui/core/Grid/Grid';
import Button from '@material-ui/core/Button'; import Button from '@material-ui/core/Button';
import RunTable from './c/RunTable'; import RunTable from './c/RunTable';
import ExecutionDialog from './ExecutionDialog'; import ExecutionDialog from './ExecutionDialog';
import FileCopyIcon from '@material-ui/icons/FileCopy';
// import { parse } from 'query-string'; // import { parse } from 'query-string';
...@@ -33,6 +35,7 @@ interface IExecutionProps extends React.ClassAttributes<any> { ...@@ -33,6 +35,7 @@ interface IExecutionProps extends React.ClassAttributes<any> {
getExecution: any; getExecution: any;
executeExecution: any; executeExecution: any;
deleteExecution: any; deleteExecution: any;
showSnackbar: any;
} }
class ExecutionDisplay extends React.Component<IExecutionProps, any> { class ExecutionDisplay extends React.Component<IExecutionProps, any> {
...@@ -60,6 +63,32 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> { ...@@ -60,6 +63,32 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
console.log(`Loading execution ${shortName}`); console.log(`Loading execution ${shortName}`);
getExecution(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 = () => { private execute = () => {
...@@ -151,7 +180,14 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> { ...@@ -151,7 +180,14 @@ class ExecutionDisplay extends React.Component<IExecutionProps, any> {
</Grid> </Grid>
<Grid item sm={ 12 } md={ 6 }> <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 } /> <RunTable execution={ execution } runInfo={ currentRun || lastRun } />
</PageSection> </PageSection>
</Grid> </Grid>
...@@ -184,6 +220,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({ ...@@ -184,6 +220,7 @@ const mapDispatchToProps = (dispatch) => bindActionCreators({
getExecution, getExecution,
executeExecution, executeExecution,
deleteExecution, deleteExecution,
showSnackbar,
}, dispatch); }, dispatch);
......
...@@ -42,7 +42,7 @@ class RunTable extends React.Component<any> { ...@@ -42,7 +42,7 @@ class RunTable extends React.Component<any> {
public render() { public render() {
const {execution, runInfo, classes} = this.props; const {execution, runInfo, classes} = this.props;
return ( return (
<table className={ classes.root }> <table className={ classes.root } id="runTable">
{ runInfo && { runInfo &&
<thead className={ `${classes.header} back-green` }> <thead className={ `${classes.header} back-green` }>
<tr> <tr>
......
...@@ -49,6 +49,10 @@ const styles = (theme) => ({ ...@@ -49,6 +49,10 @@ const styles = (theme) => ({
fontSize: '1.3rem', fontSize: '1.3rem',
// color: 'Red', // color: 'Red',
}, },
sectionAction: {
margin: 0,
alignSelf: 'center' as 'center',
},
}); });
interface ILayoutProps extends React.Props<any> { interface ILayoutProps extends React.Props<any> {
...@@ -84,9 +88,9 @@ const Section1 = ({classes, className = '', title, children = null}) => children ...@@ -84,9 +88,9 @@ const Section1 = ({classes, className = '', title, children = null}) => children
</Card> </Card>
); );
const Section2 = ({classes, title, children = null}) => children && ( const Section2 = ({classes, title, action = null, children = null}) => children && (
<Card className={ classes.section }> <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> <CardContent>{ children }</CardContent>
</Card> </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