diff --git a/src/components/crowdsource-manager/readme.md b/src/components/crowdsource-manager/readme.md index 20eb62f6f..3da8003a1 100644 --- a/src/components/crowdsource-manager/readme.md +++ b/src/components/crowdsource-manager/readme.md @@ -202,6 +202,7 @@ graph TD; calcite-flow-item --> calcite-panel create-feature --> calcite-notice create-feature --> calcite-loader + layer-table --> calcite-scrim layer-table --> calcite-shell layer-table --> calcite-panel layer-table --> calcite-input diff --git a/src/components/layer-table/layer-table.tsx b/src/components/layer-table/layer-table.tsx index bd507a47a..883458369 100644 --- a/src/components/layer-table/layer-table.tsx +++ b/src/components/layer-table/layer-table.tsx @@ -236,6 +236,11 @@ export class LayerTable { */ @State() _size: number = 0; + /** + * boolean: When true a loading indicator will be shown in place of the layer table + */ + @State() _queryingData = false; + //-------------------------------------------------------------------------- // // Properties (protected) @@ -825,53 +830,58 @@ export class LayerTable { render() { const tableNodeClass = this._fetchingData ? "display-none" : ""; const loadingClass = this._fetchingData ? "" : "display-none"; + const scrimClass = this._queryingData ? "" : "display-none"; const total = this._size.toString(); const selected = this.selectedIds.length.toString(); const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted"; const showSearch = this._canShowFullTextSearch(); this._validateActiveActions(); + console.log("real2") return ( - - {this._getTableControlRow("header")} -
- - {showSearch && -
- void this._searchTextChanged(evt)} - placeholder={this._searchPlaceHolder} - title={this._searchPlaceHolder} - type="search" /> -
} - - -
- -
- { - !this.isMobile ? ( -
- { - this._translations.recordsSelected - .replace("{{total}}", total) - .replace("{{selected}}", selected) - } -
- ) : undefined - } - - {this.createFilterModal && this._filterModal()} +
+ + + {this._getTableControlRow("header")} +
+ + {showSearch && +
+ void this._searchTextChanged(evt)} + placeholder={this._searchPlaceHolder} + title={this._searchPlaceHolder} + type="search" /> +
} + + +
+ +
+ { + !this.isMobile ? ( +
+ { + this._translations.recordsSelected + .replace("{{total}}", total) + .replace("{{selected}}", selected) + } +
+ ) : undefined + } + + {this.createFilterModal && this._filterModal()} +
); } @@ -1668,7 +1678,7 @@ export class LayerTable { protected _showDelete(): void { this.showDelete.emit({ ids: this._getIds() - }) + }); } /** @@ -1922,7 +1932,17 @@ export class LayerTable { return prev; }, []); + // when dealing with a feature layer with many features shift-select can take a very long time. + // don't allow the user to make additional interactions with the table if it takes more than 500 miliseconds + let queryComplete = false; + setTimeout(() => { + if (!queryComplete) { + this._queryingData = true; + } + }, 500); const oids = await queryAllOidsWithQueryFeatures(0, this._layer, [], orderBy); + queryComplete = true; + this._queryingData = false; let isBetween = false; const _start = this._table.viewModel.getObjectIdIndex(this._previousCurrentId); @@ -2017,7 +2037,6 @@ export class LayerTable { // When this issue occurs we will wait for 1 second and attempt to finish the loading process setTimeout(() => { if (!this._loaded) { - console.log(`table.state: ${this._table.state}`) void this.finishLoading(); } }, 1000); diff --git a/src/components/layer-table/readme.md b/src/components/layer-table/readme.md index 03fafa051..31c2f9f49 100644 --- a/src/components/layer-table/readme.md +++ b/src/components/layer-table/readme.md @@ -99,6 +99,7 @@ Type: `Promise` ### Depends on +- calcite-scrim - calcite-shell - calcite-panel - calcite-input @@ -118,6 +119,7 @@ Type: `Promise` ### Graph ```mermaid graph TD; + layer-table --> calcite-scrim layer-table --> calcite-shell layer-table --> calcite-panel layer-table --> calcite-input @@ -133,6 +135,7 @@ graph TD; layer-table --> calcite-tooltip layer-table --> calcite-modal layer-table --> instant-apps-filter-list + calcite-scrim --> calcite-loader calcite-panel --> calcite-action calcite-panel --> calcite-action-menu calcite-panel --> calcite-scrim @@ -142,7 +145,6 @@ graph TD; calcite-action-menu --> calcite-popover calcite-popover --> calcite-action calcite-popover --> calcite-icon - calcite-scrim --> calcite-loader calcite-input --> calcite-progress calcite-input --> calcite-icon calcite-action-bar --> calcite-action-group