mirror of
https://git.rwth-aachen.de/acs/public/villas/web/
synced 2025-03-09 00:00:01 +01:00
add file buttons for result table
This commit is contained in:
irismarie
parent
352fc67a74
commit
971fe750fa
1 changed files with 40 additions and 29 deletions
|
|
@ -29,7 +29,7 @@ class CustomTable extends Component {
|
|||
|
||||
this.state = {
|
||||
rows: CustomTable.getRows(props),
|
||||
editCell: [ -1, -1 ]
|
||||
editCell: [-1, -1]
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -38,7 +38,7 @@ class CustomTable extends Component {
|
|||
};
|
||||
|
||||
onClick(event, row, column) {
|
||||
this.setState({ editCell: [ column, row ]}); // x, y
|
||||
this.setState({ editCell: [column, row] }); // x, y
|
||||
}
|
||||
|
||||
static addCell(data, index, child) {
|
||||
|
|
@ -71,6 +71,12 @@ class CustomTable extends Component {
|
|||
cell.push(<Link to={child.props.link + data[linkKey]}>{content}</Link>);
|
||||
} else if (child.props.clickable) {
|
||||
cell.push(<Button variant="link" onClick={() => child.props.onClick(index)}>{content}</Button>);
|
||||
} else if (linkKey == 'filebuttons') {
|
||||
content.forEach(element => {
|
||||
cell.push(<OverlayTrigger key={element} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"export"}`}>Download {element}</Tooltip>} >
|
||||
<Button variant='table-control-button' onClick={() => child.props.onDownload(element)} disabled={child.props.onDownload == null}>{element + ' ' }
|
||||
<Icon icon='file-download' /></Button></OverlayTrigger>);
|
||||
});
|
||||
} else {
|
||||
cell.push(content);
|
||||
}
|
||||
|
|
@ -90,8 +96,8 @@ class CustomTable extends Component {
|
|||
cell.push(<span>
|
||||
|
||||
<FormLabel column={false} className={labelStyle}>
|
||||
{labelContent}
|
||||
</FormLabel>
|
||||
{labelContent}
|
||||
</FormLabel>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
|
@ -103,14 +109,14 @@ class CustomTable extends Component {
|
|||
|
||||
// add buttons
|
||||
if (child.props.editButton) {
|
||||
let disable = (typeof data.managedexternally !== "undefined" && data.managedexternally);
|
||||
cell.push(<OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"edit"}`}>{disable? "Externally managed ICs cannot be edited" : "edit"} </Tooltip>} >
|
||||
<Button variant='table-control-button' onClick={() => child.props.onEdit(index)} disabled={disable || child.props.onEdit == null}><Icon icon='edit' /></Button></OverlayTrigger>);
|
||||
let disable = (typeof data.managedexternally !== "undefined" && data.managedexternally);
|
||||
cell.push(<OverlayTrigger key={0} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"edit"}`}>{disable ? "Externally managed ICs cannot be edited" : "edit"} </Tooltip>} >
|
||||
<Button variant='table-control-button' onClick={() => child.props.onEdit(index)} disabled={disable || child.props.onEdit == null}><Icon icon='edit' /></Button></OverlayTrigger>);
|
||||
}
|
||||
|
||||
if (child.props.deleteButton) {
|
||||
cell.push(<OverlayTrigger key={1} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"delete"}`}> Delete </Tooltip>} >
|
||||
<Button variant='table-control-button' onClick={() => child.props.onDelete(index)} disabled={child.props.onDelete == null}><Icon icon='trash' /></Button></OverlayTrigger>);
|
||||
<Button variant='table-control-button' onClick={() => child.props.onDelete(index)} disabled={child.props.onDelete == null}><Icon icon='trash' /></Button></OverlayTrigger>);
|
||||
}
|
||||
|
||||
if (child.props.checkbox) {
|
||||
|
|
@ -121,18 +127,23 @@ class CustomTable extends Component {
|
|||
|
||||
if (child.props.exportButton) {
|
||||
cell.push(<OverlayTrigger key={2} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"export"}`}> Export </Tooltip>} >
|
||||
<Button variant='table-control-button' onClick={() => child.props.onExport(index)} disabled={child.props.onExport == null}><Icon icon='download' /></Button></OverlayTrigger>);
|
||||
<Button variant='table-control-button' onClick={() => child.props.onExport(index)} disabled={child.props.onExport == null}><Icon icon='download' /></Button></OverlayTrigger>);
|
||||
}
|
||||
|
||||
if (child.props.duplicateButton) {
|
||||
cell.push(<OverlayTrigger key={3} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"duplicate"}`}> Duplicate </Tooltip>} >
|
||||
<Button variant='table-control-button' onClick={() => child.props.onDuplicate(index)} disabled={child.props.onDuplicate == null}><Icon icon='copy' /></Button></OverlayTrigger>);
|
||||
<Button variant='table-control-button' onClick={() => child.props.onDuplicate(index)} disabled={child.props.onDuplicate == null}><Icon icon='copy' /></Button></OverlayTrigger>);
|
||||
}
|
||||
|
||||
if (child.props.downloadAllButton) {
|
||||
cell.push(<OverlayTrigger key={4} placement={'bottom'} overlay={<Tooltip id={`tooltip-${"export"}`}>Download All Files</Tooltip>} >
|
||||
<Button variant='table-control-button' onClick={() => child.props.onDownloadAll(index)} disabled={child.props.onDownloadAll == null}><Icon icon='file-download' /></Button></OverlayTrigger>);
|
||||
}
|
||||
|
||||
return cell;
|
||||
} // addCell
|
||||
|
||||
static getDerivedStateFromProps(props, state){
|
||||
static getDerivedStateFromProps(props, state) {
|
||||
const rows = CustomTable.getRows(props);
|
||||
|
||||
return { rows };
|
||||
|
|
@ -147,12 +158,12 @@ class CustomTable extends Component {
|
|||
|
||||
onCellFocus(index) {
|
||||
// When a cell focus is detected, update the current state in order to uncover the input element
|
||||
this.setState({ editCell: [ index.cell, index.row ]});
|
||||
this.setState({ editCell: [index.cell, index.row] });
|
||||
}
|
||||
|
||||
cellLostFocus() {
|
||||
// Reset cell selection state
|
||||
this.setState({ editCell: [ -1, -1 ] });
|
||||
this.setState({ editCell: [-1, -1] });
|
||||
}
|
||||
|
||||
static getRows(props) {
|
||||
|
|
@ -164,7 +175,7 @@ class CustomTable extends Component {
|
|||
// check if multiple columns
|
||||
if (Array.isArray(props.children) === false) {
|
||||
// table only has a single column
|
||||
return [ CustomTable.addCell(data, index, props.children) ];
|
||||
return [CustomTable.addCell(data, index, props.children)];
|
||||
}
|
||||
|
||||
const row = [];
|
||||
|
|
@ -181,7 +192,7 @@ class CustomTable extends Component {
|
|||
// get children
|
||||
let children = this.props.children;
|
||||
if (Array.isArray(this.props.children) === false) {
|
||||
children = [ children ];
|
||||
children = [children];
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -200,28 +211,28 @@ class CustomTable extends Component {
|
|||
|
||||
let isCellInlineEditable = children[cellIndex].props.inlineEditable === true;
|
||||
|
||||
let tabIndex = isCellInlineEditable? 0 : -1;
|
||||
let tabIndex = isCellInlineEditable ? 0 : -1;
|
||||
|
||||
let evtHdls = isCellInlineEditable ? {
|
||||
onCellClick: (event) => this.onClick(event, rowIndex, cellIndex),
|
||||
onCellFocus: () => this.onCellFocus({cell: cellIndex, row: rowIndex}),
|
||||
onCellFocus: () => this.onCellFocus({ cell: cellIndex, row: rowIndex }),
|
||||
onCellBlur: () => this.cellLostFocus()
|
||||
} : {
|
||||
onCellClick: () => {},
|
||||
onCellFocus: () => {},
|
||||
onCellBlur: () => {}
|
||||
};
|
||||
onCellClick: () => { },
|
||||
onCellFocus: () => { },
|
||||
onCellBlur: () => { }
|
||||
};
|
||||
|
||||
return (<td key={cellIndex} tabIndex={tabIndex} onClick={ evtHdls.onCellClick } onFocus={ evtHdls.onCellFocus } onBlur={ evtHdls.onCellBlur }>
|
||||
{(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex ) ? (
|
||||
return (<td key={cellIndex} tabIndex={tabIndex} onClick={evtHdls.onCellClick} onFocus={evtHdls.onCellFocus} onBlur={evtHdls.onCellBlur}>
|
||||
{(this.state.editCell[0] === cellIndex && this.state.editCell[1] === rowIndex) ? (
|
||||
<FormControl as='input' type={children[cellIndex].props.inputType} value={cell} onChange={(event) => children[cellIndex].props.onInlineChange(event, rowIndex, cellIndex)} ref={ref => { this.activeInput = ref; }} />
|
||||
) : (
|
||||
<span>
|
||||
{cell.map((element, elementIndex) => (
|
||||
<span key={elementIndex}>{element}</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
<span>
|
||||
{cell.map((element, elementIndex) => (
|
||||
<span key={elementIndex}>{element}</span>
|
||||
))}
|
||||
</span>
|
||||
)}
|
||||
</td>)
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue