diff --git a/src/assets/t9n/layer-table/resources.json b/src/assets/t9n/layer-table/resources.json index c0c0dffcf..bc3d2229d 100644 --- a/src/assets/t9n/layer-table/resources.json +++ b/src/assets/t9n/layer-table/resources.json @@ -19,5 +19,6 @@ "showAll": "Show all", "recordsSelected": "Total: {{total}} | Selection: {{selected}}", "cancel": "Cancel", - "moreOptions": "More table options" + "moreOptions": "More table options", + "showHideColumns": "Show/hide columns" } diff --git a/src/assets/t9n/layer-table/resources_en.json b/src/assets/t9n/layer-table/resources_en.json index c0c0dffcf..bc3d2229d 100644 --- a/src/assets/t9n/layer-table/resources_en.json +++ b/src/assets/t9n/layer-table/resources_en.json @@ -19,5 +19,6 @@ "showAll": "Show all", "recordsSelected": "Total: {{total}} | Selection: {{selected}}", "cancel": "Cancel", - "moreOptions": "More table options" + "moreOptions": "More table options", + "showHideColumns": "Show/hide columns" } diff --git a/src/components/crowdsource-manager/readme.md b/src/components/crowdsource-manager/readme.md index 6ffae1412..f31cd8ed2 100644 --- a/src/components/crowdsource-manager/readme.md +++ b/src/components/crowdsource-manager/readme.md @@ -121,10 +121,10 @@ graph TD; layer-table --> calcite-action-bar layer-table --> map-layer-picker layer-table --> calcite-dropdown - layer-table --> calcite-action - layer-table --> calcite-button layer-table --> calcite-dropdown-group layer-table --> calcite-dropdown-item + layer-table --> calcite-action + layer-table --> calcite-button layer-table --> calcite-tooltip layer-table --> calcite-modal map-layer-picker --> calcite-tooltip diff --git a/src/components/layer-table/layer-table.tsx b/src/components/layer-table/layer-table.tsx index f8283f325..84b86e148 100644 --- a/src/components/layer-table/layer-table.tsx +++ b/src/components/layer-table/layer-table.tsx @@ -21,7 +21,7 @@ import { getLocaleComponentStrings } from "../../utils/locale"; import { getLayerOrTable, goToSelection } from "../../utils/mapViewUtils"; import { queryAllIds, queryFeaturesByGlobalID } from "../../utils/queryUtils"; import * as downloadUtils from "../../utils/downloadUtils"; -import { IExportInfos, ILayerInfo, IMapClick, IMapInfo, IToolInfo, IToolSizeInfo } from "../../utils/interfaces"; +import { IColumnsInfo, IExportInfos, ILayerInfo, IMapClick, IMapInfo, IToolInfo, IToolSizeInfo } from "../../utils/interfaces"; @Component({ tag: "layer-table", @@ -138,6 +138,11 @@ export class LayerTable { */ @State() _selectedIndexes: number[] = []; + /** + * boolean: When true the show/hide fields list is forced open + */ + @State() _showHideOpen = false; + /** * boolean: When true only selected records will be shown in the table */ @@ -170,6 +175,11 @@ export class LayerTable { */ protected _allIds: number[] = []; + /** + * IColumnsInfo: Key/value pair with fieldname/(visible in table) + */ + protected _columnsInfo: IColumnsInfo; + /** * boolean: When false alerts will be shown to indicate that the layer must have editing enabled for edit actions */ @@ -215,6 +225,16 @@ export class LayerTable { */ protected _selectAllElement: HTMLCalciteCheckboxElement; + /** + * HTMLCalciteDropdownElement: Dropdown the will support show/hide of table columns + */ + protected _showHideDropdown: HTMLCalciteDropdownElement; + + /** + * HTMLCalciteDropdownElement: Dropdown the will support overflow tools that won't fit in the current display + */ + protected _moreDropdown: HTMLCalciteDropdownElement; + /** * esri/widgets/FeatureTable: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable.html */ @@ -489,6 +509,7 @@ export class LayerTable { */ async componentDidLoad(): Promise { this._resizeObserver.observe(this._toolbar); + document.onclick = (e) => this._handleDocumentClick(e); } /** @@ -598,11 +619,53 @@ export class LayerTable { prev.push( cur.isDanger ? this._getDangerAction(cur.icon, cur.label, cur.func, cur.disabled) : + cur.isSublist ? ( + this._forceShowHide()} + ref={(el) => this._showHideDropdown = el} + > + {this._getAction(this._showHideOpen ? "chevron-down" : cur.icon, cur.label, cur.func, cur.disabled, "trigger")} + {this._showHideOpen ? this._getFieldlist() : undefined} + + ) : this._getAction(cur.icon, cur.label, cur.func, cur.disabled) ) } return prev; - }, []) + }, []); + } + + _getFieldlist(): VNode { + return this._columnsInfo ? ( + + { + Object.keys(this._columnsInfo).map(k => { + const selected = this._columnsInfo[k]; + return ( + { + const target = e.target; + this._columnsInfo[target.id] = target.selected; + if (!target.selected) { + this._table.hideColumn(target.id); + } else { + this._table.showColumn(target.id); + } + }} + selected={selected} + > + {k} + + ) + }) + } + + ) : undefined; } /** @@ -693,7 +756,14 @@ export class LayerTable { label: this._translations.exportCSV, disabled: featuresEmpty, isOverflow: false - } : undefined]; + } : undefined, { + icon: this._showHideOpen ? "chevron-down" : "chevron-right", + func: () => this._toggleShowHide(), + label: this._translations.showHideColumns, + disabled: false, + isOverflow: false, + isSublist: true + }]; this._defaultVisibleToolSizeInfos = undefined; } @@ -799,7 +869,7 @@ export class LayerTable { if (skipControls.indexOf(n.id) < 0 && !update) { update = this._controlsThatFit.map(c => c.id).indexOf(n.id) < 0; } - }) + }); if (update) { this._controlsThatFit = [...controlsThatFit]; } @@ -862,11 +932,18 @@ export class LayerTable { ): VNode { const dropdownItems = this._getDropdownItems(); return dropdownItems.length > 0 ? ( - + this._forceShowHide()} + ref={(el) => this._moreDropdown = el} + > this._closeShowHide()} slot="trigger" text="" > @@ -883,7 +960,8 @@ export class LayerTable { dropdownItems.map(item => { return ( {item.label} @@ -892,6 +970,7 @@ export class LayerTable { }) } + {this._showHideOpen ? this._getFieldlist() : undefined} ) : undefined; } @@ -919,11 +998,12 @@ export class LayerTable { icon: string, label: string, func: any, - disabled: boolean + disabled: boolean, + slot?: string ): VNode { const _disabled = this._layer === undefined ? true : disabled; return ( -
+
{ @@ -1117,6 +1199,7 @@ export class LayerTable { await this._table.when(async () => { this._table.highlightIds.removeAll(); this._table.clearSelectionFilter(); + this._initColumnsInfo(); if (!this._defaultOidHonored && this.defaultOid?.length > 0 && this.defaultOid[0] > -1) { this._selectDefaultFeature(this.defaultOid); @@ -1138,6 +1221,18 @@ export class LayerTable { await this._sortTable(); } + /** + * Store the column names and current hidden status to support show/hide of columns + * + * @returns void + */ + protected _initColumnsInfo(): void { + this._columnsInfo = this._table.columns.reduce((prev, cur: any) => { + prev[cur.name] = !cur.hidden; + return prev; + }, {}); + } + /** * Select the feature that was specified via url params * @@ -1183,6 +1278,50 @@ export class LayerTable { } } + /** + * Open show/hide dropdown + */ + protected _forceShowHide(): void { + if(this._showHideDropdown) { + this._showHideDropdown.open = this._showHideOpen; + } + if(this._moreDropdown) { + this._moreDropdown.open = this._showHideOpen; + } + } + + /** + * Toggle show/hide dropdown + */ + protected _toggleShowHide(): void { + this._showHideOpen = !this._showHideOpen; + } + + /** + * Open show/hide dropdown + */ + protected _closeShowHide(): void { + this._showHideOpen = false; + } + + /** + * Close show/hide dropdown when the user clicks outside of it + */ + protected _handleDocumentClick( + e: MouseEvent + ): void { + const id = (e.target as any)?.id; + if (this._showHideOpen && Object.keys(this._columnsInfo).indexOf(id) < 0 && id !== "solutions-subset-list" && id !== "chevron-right"){ + this._closeShowHide(); + if (this._moreDropdown) { + this._moreDropdown.open = false; + } + if (this._showHideDropdown) { + this._showHideDropdown.open = false; + } + } + } + /** * Show delete confirmation message * diff --git a/src/components/layer-table/readme.md b/src/components/layer-table/readme.md index 3698a0398..2a621c536 100644 --- a/src/components/layer-table/readme.md +++ b/src/components/layer-table/readme.md @@ -45,10 +45,10 @@ - calcite-action-bar - [map-layer-picker](../map-layer-picker) - calcite-dropdown -- calcite-action -- calcite-button - calcite-dropdown-group - calcite-dropdown-item +- calcite-action +- calcite-button - calcite-tooltip - calcite-modal @@ -61,10 +61,10 @@ graph TD; layer-table --> calcite-action-bar layer-table --> map-layer-picker layer-table --> calcite-dropdown - layer-table --> calcite-action - layer-table --> calcite-button layer-table --> calcite-dropdown-group layer-table --> calcite-dropdown-item + layer-table --> calcite-action + layer-table --> calcite-button layer-table --> calcite-tooltip layer-table --> calcite-modal calcite-panel --> calcite-action diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts index 02c9a6e62..f625e7964 100644 --- a/src/utils/interfaces.ts +++ b/src/utils/interfaces.ts @@ -488,9 +488,14 @@ export interface IToolInfo { disabled: boolean; isDanger?: boolean; isOverflow: boolean; + isSublist?: boolean; } export interface IToolSizeInfo { id: string; width: number; } + +export interface IColumnsInfo { + [key: string]: boolean; +}