projects
/
arvados.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Merge branch '21386-project-loading-view'
[arvados.git]
/
services
/
workbench2
/
src
/
components
/
data-table
/
data-table.tsx
diff --git
a/services/workbench2/src/components/data-table/data-table.tsx
b/services/workbench2/src/components/data-table/data-table.tsx
index f9ab7f0a25c9927ab905af0dd20a3ee221bfd26d..7b787994577305ea5725b80fcfd942d42f34f360 100644
(file)
--- a/
services/workbench2/src/components/data-table/data-table.tsx
+++ b/
services/workbench2/src/components/data-table/data-table.tsx
@@
-29,6
+29,7
@@
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 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>>;
export type DataColumns<I, R> = Array<DataColumn<I, R>>;
@@
-54,7
+55,7
@@
export interface DataTableDataProps<I> {
toggleMSToolbar: (isVisible: boolean) => void;
setCheckedListOnStore: (checkedList: TCheckedList) => void;
checkedList: TCheckedList;
toggleMSToolbar: (isVisible: boolean) => void;
setCheckedListOnStore: (checkedList: TCheckedList) => void;
checkedList: TCheckedList;
-
n
otFound?: boolean;
+
isN
otFound?: boolean;
}
type CssRules =
}
type CssRules =
@@
-141,6
+142,7
@@
export type TCheckedList = Record<string, boolean>;
type DataTableState = {
isSelected: boolean;
type DataTableState = {
isSelected: boolean;
+ isLoaded: boolean;
};
type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
};
type DataTableProps<T> = DataTableDataProps<T> & WithStyles<CssRules>;
@@
-149,6
+151,7
@@
export const DataTable = withStyles(styles)(
class Component<T> extends React.Component<DataTableProps<T>> {
state: DataTableState = {
isSelected: false,
class Component<T> extends React.Component<DataTableProps<T>> {
state: DataTableState = {
isSelected: false,
+ isLoaded: false,
};
componentDidMount(): void {
};
componentDidMount(): void {
@@
-166,6
+169,12
@@
export const DataTable = withStyles(styles)(
if (prevProps.currentRoute !== this.props.currentRoute) {
this.initializeCheckedList([])
}
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 {
}
componentWillUnmount(): void {
@@
-286,7
+295,8
@@
export const DataTable = withStyles(styles)(
};
render() {
};
render() {
- const { items, classes, working, columns, notFound } = 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 (
if (columns[0].name === this.checkBoxColumn.name) columns.shift();
columns.unshift(this.checkBoxColumn);
return (
@@
-296,32
+306,35
@@
export const DataTable = withStyles(styles)(
<TableHead>
<TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>
</TableHead>
<TableHead>
<TableRow>{this.mapVisibleColumns(this.renderHeadCell)}</TableRow>
</TableHead>
- <TableBody className={classes.tableBody}>{(
!working && !n
otFound) && items.map(this.renderBodyRow)}</TableBody>
+ <TableBody className={classes.tableBody}>{(
isLoaded && !isN
otFound) && items.map(this.renderBodyRow)}</TableBody>
</Table>
</Table>
- {(
working || notFound
) && this.renderNoItemsPlaceholder(this.props.columns)}
+ {(
!isLoaded || isNotFound || items.length === 0
) && this.renderNoItemsPlaceholder(this.props.columns)}
</div>
</div>
);
}
renderNoItemsPlaceholder = (columns: DataColumns<T, any>) => {
</div>
</div>
);
}
renderNoItemsPlaceholder = (columns: DataColumns<T, any>) => {
- const { working, notFound } = this.props;
+ const { isLoaded } = this.state;
+ const { working, isNotFound } = this.props;
const dirty = columns.some(column => getTreeDirty("")(column.filters));
const dirty = columns.some(column => getTreeDirty("")(column.filters));
- if (
working
) {
+ if (
isNotFound && isLoaded
) {
return (
<DataTableDefaultView
icon={this.props.defaultViewIcon}
return (
<DataTableDefaultView
icon={this.props.defaultViewIcon}
- messages={["
Loading data, please wait
"]}
+ messages={["
No items found
"]}
/>
);
/>
);
- } else if (notFound) {
+ } else
+ if (isLoaded === false || working === true) {
return (
<DataTableDefaultView
return (
<DataTableDefaultView
- icon={
this.props.defaultView
Icon}
- messages={["
Project not found
"]}
+ icon={
Pending
Icon}
+ messages={["
Loading data, please wait
"]}
/>
);
} else {
/>
);
} else {
+ // isLoaded && !working && !isNotFound
return (
<DataTableDefaultView
icon={this.props.defaultViewIcon}
return (
<DataTableDefaultView
icon={this.props.defaultViewIcon}