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;
- is404?: boolean;
+ isNotFound?: boolean;
}
type CssRules =
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 {
};
render() {
- const { items, classes, working, columns, is404 } = 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);
<TableHead>
<TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>
</TableHead>
- <TableBody className={classes.tableBody}>{(isLoaded && !is404) && items.map(this.renderBodyRow)}</TableBody>
+ <TableBody className={classes.tableBody}>{(isLoaded && !isNotFound) && items.map(this.renderBodyRow)}</TableBody>
</Table>
- {(!isLoaded || is404 || items.length === 0) && 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));
- if (this.state.isLoaded === false) {
+ if (isNotFound && isLoaded) {
return (
<DataTableDefaultView
icon={this.props.defaultViewIcon}
- messages={["Loading data, please wait"]}
+ messages={["No items found"]}
/>
);
- } else if (this.props.is404) {
+ } else
+ if (isLoaded === false || working === true) {
return (
<DataTableDefaultView
- icon={this.props.defaultViewIcon}
- messages={["Project not found"]}
+ icon={PendingIcon}
+ messages={["Loading data, please wait"]}
/>
);
} else {
+ // isLoaded && !working && !isNotFound
return (
<DataTableDefaultView
icon={this.props.defaultViewIcon}
key={key || index}
className={classes.checkBoxCell}>
<div className={classes.checkBoxHead}>
- <Tooltip title={this.state.isSelected ? "Deselect All" : "Select All"}>
+ <Tooltip title={this.state.isSelected ? "Deselect all" : "Select all"}>
<input
type="checkbox"
className={classes.checkBox}