Commit d4587793 authored by hh1966's avatar hh1966
Browse files

Fix copy paste and static view in research plan detail

parent a9fa245d
...@@ -23,11 +23,9 @@ const defaultParsePaste = str => ( ...@@ -23,11 +23,9 @@ const defaultParsePaste = str => (
class FixedReactDataGrid extends ReactDataGrid { class FixedReactDataGrid extends ReactDataGrid {
componentDidMount() { componentDidMount() {
this._mounted = true; this._mounted = true;
// store the data grid, assumes only one react datagrid component exists
this.dataGridComponent = document.getElementsByClassName('react-grid-Container')[0]
window.addEventListener('resize', this.metricsUpdated); window.addEventListener('resize', this.metricsUpdated);
if (this.props.cellRangeSelection) { if (this.props.cellRangeSelection) {
this.dataGridComponent.addEventListener('mouseup', this.onWindowMouseUp); this.grid.addEventListener('mouseup', this.onWindowMouseUp);
} }
this.metricsUpdated(); this.metricsUpdated();
} }
...@@ -35,7 +33,7 @@ class FixedReactDataGrid extends ReactDataGrid { ...@@ -35,7 +33,7 @@ class FixedReactDataGrid extends ReactDataGrid {
componentWillUnmount() { componentWillUnmount() {
this._mounted = false; this._mounted = false;
window.removeEventListener('resize', this.metricsUpdated); window.removeEventListener('resize', this.metricsUpdated);
this.dataGridComponent.removeEventListener('mouseup', this.onWindowMouseUp); this.grid.removeEventListener('mouseup', this.onWindowMouseUp);
} }
} }
...@@ -58,6 +56,8 @@ export default class ResearchPlanDetailsFieldTable extends Component { ...@@ -58,6 +56,8 @@ export default class ResearchPlanDetailsFieldTable extends Component {
document.addEventListener('copy', this.handleCopy.bind(this)) document.addEventListener('copy', this.handleCopy.bind(this))
document.addEventListener('paste', this.handlePaste.bind(this)) document.addEventListener('paste', this.handlePaste.bind(this))
this.ref = React.createRef()
this.handleCellSelected = this.handleCellSelected.bind(this) this.handleCellSelected = this.handleCellSelected.bind(this)
this.handleCellDeSelected = this.handleCellDeSelected.bind(this) this.handleCellDeSelected = this.handleCellDeSelected.bind(this)
} }
...@@ -195,53 +195,57 @@ export default class ResearchPlanDetailsFieldTable extends Component { ...@@ -195,53 +195,57 @@ export default class ResearchPlanDetailsFieldTable extends Component {
} }
handlePaste(event) { handlePaste(event) {
event.preventDefault(); if (this.ref.current.grid.contains(document.activeElement)) {
event.preventDefault();
const { field, onChange } = this.props
const { selected } = this.state; const { field, onChange } = this.props
const { selected } = this.state;
const newRows = [];
const pasteData = defaultParsePaste(event.clipboardData.getData('text/plain')); const newRows = [];
const pasteData = defaultParsePaste(event.clipboardData.getData('text/plain'));
const colIdx = selected.idx
const rowIdx = selected.rowIdx const colIdx = selected.idx
const rowIdx = selected.rowIdx
pasteData.forEach((row) => {
const rowData = {}; pasteData.forEach((row) => {
// Merge the values from pasting and the keys from the columns const rowData = {};
field.value.columns.slice(colIdx, colIdx + row.length).forEach((col, j) => { // Merge the values from pasting and the keys from the columns
// Create the key-value pair for the row field.value.columns.slice(colIdx, colIdx + row.length).forEach((col, j) => {
rowData[col.key] = row[j]; // Create the key-value pair for the row
}); rowData[col.key] = row[j];
// Push the new row to the changes });
newRows.push(rowData); // Push the new row to the changes
}); newRows.push(rowData);
});
for (let i = 0; i < newRows.length; i++) {
if (rowIdx + i < field.value.rows.length) { for (let i = 0; i < newRows.length; i++) {
field.value.rows[rowIdx + i] = { ...field.value.rows[rowIdx + i], ...newRows[i] }; if (rowIdx + i < field.value.rows.length) {
field.value.rows[rowIdx + i] = { ...field.value.rows[rowIdx + i], ...newRows[i] };
}
} }
}
onChange(field.value, field.id) onChange(field.value, field.id)
}
} }
handleCopy(event) { handleCopy(event) {
event.preventDefault(); if (this.ref.current.grid.contains(document.activeElement)) {
event.preventDefault();
const { columns } = this.props.field.value
const { selection } = this.state; const { columns } = this.props.field.value
const { selection } = this.state;
// Loop through each row
const text = range(selection.topLeft.rowIdx, selection.bottomRight.rowIdx + 1).map( // Loop through each row
// Loop through each column const text = range(selection.topLeft.rowIdx, selection.bottomRight.rowIdx + 1).map(
rowIdx => columns.slice(selection.topLeft.idx, selection.bottomRight.idx + 1).map( // Loop through each column
// Grab the row values and make a text string rowIdx => columns.slice(selection.topLeft.idx, selection.bottomRight.idx + 1).map(
col => this.rowGetter(rowIdx)[col.key], // Grab the row values and make a text string
).join('\t'), col => this.rowGetter(rowIdx)[col.key],
).join('\n') ).join('\t'),
).join('\n')
event.clipboardData.setData('text/plain', text);
event.clipboardData.setData('text/plain', text);
}
} }
handleSchemaModalShow() { handleSchemaModalShow() {
...@@ -296,6 +300,7 @@ export default class ResearchPlanDetailsFieldTable extends Component { ...@@ -296,6 +300,7 @@ export default class ResearchPlanDetailsFieldTable extends Component {
<div> <div>
<div className="research-plan-table-grid"> <div className="research-plan-table-grid">
<FixedReactDataGrid <FixedReactDataGrid
ref={this.ref}
columns={columns} columns={columns}
rowGetter={this.rowGetter.bind(this)} rowGetter={this.rowGetter.bind(this)}
rowsCount={rows.length} rowsCount={rows.length}
......
...@@ -31,12 +31,45 @@ export default class ResearchPlanDetailsStatic extends Component { ...@@ -31,12 +31,45 @@ export default class ResearchPlanDetailsStatic extends Component {
break; break;
case 'image': case 'image':
let src = '/images/research_plans/' + field.value.public_name const src = '/images/research_plans/' + field.value.public_name
html = ( html = (
<div className="image-container"> <div className="image-container">
<img src={src} alt={field.value.file_name} /> <img src={src} alt={field.value.file_name} />
</div> </div>
) )
break;
case 'table':
const { columns, rows } = field.value
const column_html = columns.map(column => {
return <th key={column.key}>{column.name}</th>
})
const rows_html = rows.map((row, index) => {
const row_html = columns.map(column => {
return <td key={column.key}>{row[column.key]}</td>
})
return (
<tr key={index}>
{row_html}
</tr>
)
})
html = (
<table className="table table-bordered">
<thead>
<tr>
{column_html}
</tr>
</thead>
<tbody>
{rows_html}
</tbody>
</table>
)
break;
} }
return ( return (
......
Supports Markdown
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