toggleMSToolbar: (isVisible: boolean) => void;
setCheckedListOnStore: (checkedList: TCheckedList) => void;
checkedList: TCheckedList;
+ is404?: boolean;
}
type CssRules =
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 {
if (prevProps.currentRoute !== this.props.currentRoute) {
this.initializeCheckedList([])
}
+ if(prevProps.working === true && this.props.working === false) {
+ this.setState({ isLoaded: true });
+ }
}
componentWillUnmount(): void {
};
render() {
- const { items, classes, working, columns } = this.props;
+ const { items, classes, columns, is404 } = 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 && !is404) && items.map(this.renderBodyRow)}</TableBody>
</Table>
- {items.length === 0 && !working && this.renderNoItemsPlaceholder(this.props.columns)}
+ {(!isLoaded || is404 || items.length === 0) && this.renderNoItemsPlaceholder(this.props.columns)}
</div>
</div>
);
renderNoItemsPlaceholder = (columns: DataColumns<T, any>) => {
const dirty = columns.some(column => getTreeDirty("")(column.filters));
- return (
- <DataTableDefaultView
- icon={this.props.defaultViewIcon}
- messages={this.props.defaultViewMessages}
- filtersApplied={dirty}
- />
- );
+ if (this.state.isLoaded === false || this.props.working === true) {
+ return (
+ <DataTableDefaultView
+ icon={this.props.defaultViewIcon}
+ messages={["Loading data, please wait"]}
+ />
+ );
+ } else if (this.props.is404) {
+ return (
+ <DataTableDefaultView
+ icon={this.props.defaultViewIcon}
+ messages={["Item not found"]}
+ />
+ );
+ } else {
+ //if (isLoaded && !working && !is404)
+ return (
+ <DataTableDefaultView
+ icon={this.props.defaultViewIcon}
+ messages={this.props.defaultViewMessages}
+ filtersApplied={dirty}
+ />
+ );
+ }
};
renderHeadCell = (column: DataColumn<T, any>, index: number) => {