import { DataTableMultiselectPopover } from "../data-table-multiselect-popover/data-table-multiselect-popover";
import { DataTableFiltersPopover } from "../data-table-filters/data-table-filters-popover";
import { countNodes, getTreeDirty } from "models/tree";
-import { IconType, PendingIcon } from "components/icon/icon";
+import { IconType } from "components/icon/icon";
import { SvgIconProps } from "@material-ui/core/SvgIcon";
import ArrowDownwardIcon from "@material-ui/icons/ArrowDownward";
import { createTree } from "models/tree";
import { DataTableMultiselectOption } from "../data-table-multiselect-popover/data-table-multiselect-popover";
+import { PendingIcon } from "components/icon/icon";
export type DataColumns<I, R> = Array<DataColumn<I, R>>;
toggleMSToolbar: (isVisible: boolean) => void;
setCheckedListOnStore: (checkedList: TCheckedList) => void;
checkedList: TCheckedList;
+ isNotFound?: boolean;
}
type CssRules =
| "noItemsInfo"
| "checkBoxHead"
| "checkBoxCell"
+ | "clickBox"
| "checkBox"
| "firstTableCell"
| "tableCell"
| "arrow"
| "arrowButton"
- | "tableCellWorkflows"
- | "loader";
+ | "tableCellWorkflows";
const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
root: {
tableBody: {
background: theme.palette.background.paper,
},
- loader: {
- left: "50%",
- marginLeft: "-84px",
- position: "absolute",
- },
noItemsInfo: {
textAlign: "center",
padding: theme.spacing.unit,
checkBoxHead: {
padding: "0",
display: "flex",
+ width: '2rem',
+ height: "1.5rem",
+ paddingLeft: '0.9rem',
+ marginRight: '0.5rem'
},
checkBoxCell: {
padding: "0",
- paddingLeft: "10px",
+ },
+ clickBox: {
+ display: 'flex',
+ width: '1.6rem',
+ height: "1.5rem",
+ paddingLeft: '0.35rem',
+ paddingTop: '0.1rem',
+ marginLeft: '0.5rem',
+ cursor: "pointer",
},
checkBox: {
cursor: "pointer",
type DataTableState = {
isSelected: boolean;
+ isLoaded: boolean;
};
type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
class Component<T> extends React.Component<DataTableProps<T>> {
state: DataTableState = {
isSelected: false,
+ isLoaded: false,
};
componentDidMount(): void {
- this.initializeCheckedList(this.props.items);
+ this.initializeCheckedList([]);
}
componentDidUpdate(prevProps: Readonly<DataTableProps<T>>, prevState: DataTableState) {
if (items.length) this.initializeCheckedList(items);
else setCheckedListOnStore({});
}
+ if (prevProps.currentRoute !== this.props.currentRoute) {
+ this.initializeCheckedList([])
+ }
+ if(prevProps.working === true && this.props.working === false) {
+ this.setState({ isLoaded: true });
+ }
+ if((this.props.items.length > 0) && !this.state.isLoaded) {
+ this.setState({ isLoaded: true });
+ }
+ }
+
+ componentWillUnmount(): void {
+ this.initializeCheckedList([])
}
checkBoxColumn: DataColumn<any, any> = {
render: uuid => {
const { classes, checkedList } = this.props;
return (
- <input
- type="checkbox"
- name={uuid}
- className={classes.checkBox}
- checked={checkedList && checkedList[uuid] ? checkedList[uuid] : false}
- onChange={() => this.handleSelectOne(uuid)}
- onDoubleClick={ev => ev.stopPropagation()}></input>
+ <div
+ className={classes.clickBox}
+ onClick={(ev) => {
+ ev.stopPropagation()
+ this.handleSelectOne(uuid)
+ }}
+ onDoubleClick={(ev) => ev.stopPropagation()}
+ >
+ <input
+ data-cy={`multiselect-checkbox-${uuid}`}
+ type='checkbox'
+ name={uuid}
+ className={classes.checkBox}
+ checked={checkedList && checkedList[uuid] ? checkedList[uuid] : false}
+ onChange={() => this.handleSelectOne(uuid)}
+ onDoubleClick={(ev) => ev.stopPropagation()}
+ ></input>
+ </div>
);
},
};
};
render() {
- const { items, classes, working, columns } = this.props;
+ const { items, classes, columns, isNotFound } = this.props;
+ const { isLoaded } = this.state;
if (columns[0].name === this.checkBoxColumn.name) columns.shift();
columns.unshift(this.checkBoxColumn);
return (
<TableHead>
<TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>
</TableHead>
- <TableBody className={classes.tableBody}>{!working && items.map(this.renderBodyRow)}</TableBody>
+ <TableBody className={classes.tableBody}>{(isLoaded && !isNotFound) && items.map(this.renderBodyRow)}</TableBody>
</Table>
- {!!working && (
- <div className={classes.loader}>
- <DataTableDefaultView
- icon={PendingIcon}
- messages={["Loading data, please wait."]}
- />
- </div>
- )}
- {items.length === 0 && !working && this.renderNoItemsPlaceholder(this.props.columns)}
+ {(!isLoaded || isNotFound || items.length === 0) && this.renderNoItemsPlaceholder(this.props.columns)}
</div>
</div>
);
}
renderNoItemsPlaceholder = (columns: DataColumns<T, any>) => {
+ const { isLoaded } = this.state;
+ const { working, isNotFound } = this.props;
const dirty = columns.some(column => getTreeDirty("")(column.filters));
- return (
- <DataTableDefaultView
- icon={this.props.defaultViewIcon}
- messages={this.props.defaultViewMessages}
- filtersApplied={dirty}
- />
- );
+ if (isNotFound && isLoaded) {
+ return (
+ <DataTableDefaultView
+ icon={this.props.defaultViewIcon}
+ messages={["No items found"]}
+ />
+ );
+ } else
+ if (isLoaded === false || working === true) {
+ return (
+ <DataTableDefaultView
+ icon={PendingIcon}
+ messages={["Loading data, please wait"]}
+ />
+ );
+ } else {
+ // isLoaded && !working && !isNotFound
+ return (
+ <DataTableDefaultView
+ icon={this.props.defaultViewIcon}
+ messages={this.props.defaultViewMessages}
+ filtersApplied={dirty}
+ />
+ );
+ }
};
renderHeadCell = (column: DataColumn<T, any>, index: number) => {
const { onRowClick, onRowDoubleClick, extractKey, classes, currentItemUuid, currentRoute } = this.props;
return (
<TableRow
+ data-cy={'data-table-row'}
hover
key={extractKey ? extractKey(item) : index}
onClick={event => onRowClick && onRowClick(event, item)}