From 68e32ad2659d9ccd8c7d89aa59b941132a76fcbb Mon Sep 17 00:00:00 2001 From: John Hauck Date: Fri, 8 Nov 2024 11:58:41 -0700 Subject: [PATCH] move delete dialog and adjust z --- src/components.d.ts | 9 +++- .../crowdsource-manager.css | 4 ++ .../crowdsource-manager.tsx | 43 ++++++++++++++++++- src/components/crowdsource-manager/readme.md | 4 +- src/components/delete-button/readme.md | 2 - src/components/delete-dialog/readme.md | 4 +- src/components/layer-table/layer-table.tsx | 43 ++++++------------- src/components/layer-table/readme.md | 27 ++++-------- src/utils/interfaces.ts | 4 ++ 9 files changed, 82 insertions(+), 58 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 6da6d62fb..0ac1393fb 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -5,11 +5,11 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { AppLayout, ButtonType, DistanceUnit, EditType, EDrawMode, IBasemapConfig, IConsentResponse, IExportInfos, IFeatureServiceEnabledStatus, IInventoryItem, ILayerAndTableIds, ILayerExpression, IMapChange, IMapInfo, IReportingOptions, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISortingInfo, ISpatialRefRepresentation, ITemplateInfo, IValueChange, theme } from "./utils/interfaces"; +import { AppLayout, ButtonType, DistanceUnit, EditType, EDrawMode, IBasemapConfig, IConsentResponse, IDeleteIds, IExportInfos, IFeatureServiceEnabledStatus, IInventoryItem, ILayerAndTableIds, ILayerExpression, IMapChange, IMapInfo, IReportingOptions, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISortingInfo, ISpatialRefRepresentation, ITemplateInfo, IValueChange, theme } from "./utils/interfaces"; import { IReportingOptions as IReportingOptions1 } from "./components"; import { ILayerItemsHash } from "./components/layer-list/layer-list"; import { UserSession } from "@esri/solution-common"; -export { AppLayout, ButtonType, DistanceUnit, EditType, EDrawMode, IBasemapConfig, IConsentResponse, IExportInfos, IFeatureServiceEnabledStatus, IInventoryItem, ILayerAndTableIds, ILayerExpression, IMapChange, IMapInfo, IReportingOptions, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISortingInfo, ISpatialRefRepresentation, ITemplateInfo, IValueChange, theme } from "./utils/interfaces"; +export { AppLayout, ButtonType, DistanceUnit, EditType, EDrawMode, IBasemapConfig, IConsentResponse, IDeleteIds, IExportInfos, IFeatureServiceEnabledStatus, IInventoryItem, ILayerAndTableIds, ILayerExpression, IMapChange, IMapInfo, IReportingOptions, ISearchConfiguration, ISelectionSet, ISketchGraphicsChange, ISolutionSpatialReferenceInfo, ISortingInfo, ISpatialRefRepresentation, ITemplateInfo, IValueChange, theme } from "./utils/interfaces"; export { IReportingOptions as IReportingOptions1 } from "./components"; export { ILayerItemsHash } from "./components/layer-list/layer-list"; export { UserSession } from "@esri/solution-common"; @@ -2351,6 +2351,7 @@ declare global { interface HTMLLayerTableElementEventMap { "featureSelectionChange": number[]; "toggleFilter": void; + "showDelete": IDeleteIds; } interface HTMLLayerTableElement extends Components.LayerTable, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLLayerTableElement, ev: LayerTableCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; @@ -3727,6 +3728,10 @@ declare namespace LocalJSX { * Emitted on demand when a layer is selected */ "onFeatureSelectionChange"?: (event: LayerTableCustomEvent) => void; + /** + * Emitted on demand when when the delete dialog should be shown + */ + "onShowDelete"?: (event: LayerTableCustomEvent) => void; /** * Emitted on demand when filter action is clicked */ diff --git a/src/components/crowdsource-manager/crowdsource-manager.css b/src/components/crowdsource-manager/crowdsource-manager.css index 6af1e5ee1..5fc0f3225 100644 --- a/src/components/crowdsource-manager/crowdsource-manager.css +++ b/src/components/crowdsource-manager/crowdsource-manager.css @@ -222,4 +222,8 @@ .z-index-0 { z-index: 0 !important; +} + +.z-index-1 { + z-index: 1 !important; } \ No newline at end of file diff --git a/src/components/crowdsource-manager/crowdsource-manager.tsx b/src/components/crowdsource-manager/crowdsource-manager.tsx index d51156f0a..bd6180947 100644 --- a/src/components/crowdsource-manager/crowdsource-manager.tsx +++ b/src/components/crowdsource-manager/crowdsource-manager.tsx @@ -242,6 +242,11 @@ export class CrowdsourceManager { // //-------------------------------------------------------------------------- + /** + * boolean: When true the delete dialog will be shown + */ + @State() _deleteDialogOpen = false; + /** * boolean: when true the users can have the option to create features */ @@ -346,6 +351,11 @@ export class CrowdsourceManager { */ protected _defaultLevelHonored = false; + /** + * number[]: the ids to be deleted + */ + protected _deleteIds: number[]; + /** * HTMLLayerTableElement: The layer table element */ @@ -517,6 +527,17 @@ export class CrowdsourceManager { }); } + /** + * Get the feature ids and open the delete dialog + */ + @Listen("showDelete", { target: "window" }) + async showDelete( + evt: CustomEvent + ): Promise { + this._deleteIds = evt.detail.ids; + this._deleteDialogOpen = true; + } + /** * Get the layer ids from the map */ @@ -562,6 +583,7 @@ export class CrowdsourceManager { {/* create a filter modal from manager to keep a comman modal for both layer-table and map-card and maintain state while switchig from one component to other*/} {this._filterModal()} + {this._deleteModal()} ); } @@ -829,7 +851,7 @@ export class CrowdsourceManager { const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen, hideTable); const borderRight = !this._isPortraitMobile && this._isMobile ? "border-right" : ""; return ( -
+
{this._getMapNode(panelOpen)} {this._getPopupExpandNode()}
@@ -904,7 +926,7 @@ export class CrowdsourceManager { * @protected */ protected _getPopupExpandNode(): VNode { - const popupNodeClass = this._isMobile ? "height-full" : "height-full position-relative z-index-0"; + const popupNodeClass = this._isMobile ? "height-full" : "height-full position-relative"; const headerClass = this._isPortraitMobile && this._showInformationHeader ? "display-none height-0" : ""; const headerTheme = this.popupHeaderColor ? "" : !this._isPortraitMobile ? "calcite-mode-dark" : "calcite-mode-light"; const containerClass = this._isPortraitMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isPortraitMobile ? "display-none height-0" : ""; @@ -1128,6 +1150,23 @@ export class CrowdsourceManager { ) } + /** + * Show delete dialog + * + * @returns node that will support delete or keep of the features + * @protected + */ + protected _deleteModal(): VNode { + return ( this._deleteDialogOpen = false} + open={this._deleteDialogOpen} + />); + } + /** * Show filter component in modal * diff --git a/src/components/crowdsource-manager/readme.md b/src/components/crowdsource-manager/readme.md index 75744e316..20eb62f6f 100644 --- a/src/components/crowdsource-manager/readme.md +++ b/src/components/crowdsource-manager/readme.md @@ -72,6 +72,7 @@ - [layer-table](../layer-table) - calcite-action - calcite-tooltip +- [delete-dialog](../delete-dialog) - calcite-modal - instant-apps-filter-list @@ -89,6 +90,7 @@ graph TD; crowdsource-manager --> layer-table crowdsource-manager --> calcite-action crowdsource-manager --> calcite-tooltip + crowdsource-manager --> delete-dialog crowdsource-manager --> calcite-modal crowdsource-manager --> instant-apps-filter-list calcite-panel --> calcite-action @@ -204,7 +206,6 @@ graph TD; layer-table --> calcite-panel layer-table --> calcite-input layer-table --> calcite-loader - layer-table --> delete-dialog layer-table --> calcite-action-bar layer-table --> map-layer-picker layer-table --> calcite-dropdown @@ -214,7 +215,6 @@ graph TD; layer-table --> calcite-button layer-table --> instant-apps-social-share layer-table --> calcite-tooltip - layer-table --> delete-button layer-table --> calcite-modal layer-table --> instant-apps-filter-list instant-apps-filter-list --> calcite-panel diff --git a/src/components/delete-button/readme.md b/src/components/delete-button/readme.md index c4c90ff21..0ad927560 100644 --- a/src/components/delete-button/readme.md +++ b/src/components/delete-button/readme.md @@ -31,7 +31,6 @@ - [crowdsource-manager](../crowdsource-manager) - [info-card](../info-card) - - [layer-table](../layer-table) ### Depends on @@ -58,7 +57,6 @@ graph TD; calcite-scrim --> calcite-loader crowdsource-manager --> delete-button info-card --> delete-button - layer-table --> delete-button style delete-button fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/delete-dialog/readme.md b/src/components/delete-dialog/readme.md index a4d68124e..cc6ea9e09 100644 --- a/src/components/delete-dialog/readme.md +++ b/src/components/delete-dialog/readme.md @@ -27,8 +27,8 @@ ### Used by + - [crowdsource-manager](../crowdsource-manager) - [delete-button](../delete-button) - - [layer-table](../layer-table) ### Depends on @@ -45,8 +45,8 @@ graph TD; calcite-scrim --> calcite-loader calcite-button --> calcite-loader calcite-button --> calcite-icon + crowdsource-manager --> delete-dialog delete-button --> delete-dialog - layer-table --> delete-dialog style delete-dialog fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/src/components/layer-table/layer-table.tsx b/src/components/layer-table/layer-table.tsx index 2d129601d..617d863f3 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 { getFeatureLayerView, getLayerOrTable, goToSelection } from "../../utils/mapViewUtils"; import { queryAllIds, queryAllOidsWithQueryFeatures, queryFeaturesByGlobalID } from "../../utils/queryUtils"; import * as downloadUtils from "../../utils/downloadUtils"; -import { AppLayout, EditType, IColumnsInfo, IExportInfos, ILayerDef, IMapClick, IMapInfo, IToolInfo, IToolSizeInfo, TooltipPlacement } from "../../utils/interfaces"; +import { AppLayout, EditType, IColumnsInfo, IDeleteIds, IExportInfos, ILayerDef, IMapClick, IMapInfo, IToolInfo, IToolSizeInfo, TooltipPlacement } from "../../utils/interfaces"; import "@esri/instant-apps-components/dist/components/instant-apps-social-share"; import { LayerExpression } from "@esri/instant-apps-components"; @@ -200,11 +200,6 @@ export class LayerTable { */ @State() _selectAllActive = false; - /** - * boolean: When true the delete dialog will be shown - */ - @State() _deleteDialogOpen = false; - /** * boolean: When true the show/hide fields list is forced open */ @@ -686,6 +681,11 @@ export class LayerTable { */ @Event() toggleFilter: EventEmitter; + /** + * Emitted on demand when when the delete dialog should be shown + */ + @Event() showDelete: EventEmitter; + /** * Scroll and zoom to the selected feature from the Features widget. * @@ -872,15 +872,6 @@ export class LayerTable { } {this.createFilterModal && this._filterModal()} - this._deleteDialogOpen = false} - open={this._deleteDialogOpen} - ref={(el) => this._deleteDialog = el} - /> ); } @@ -1676,7 +1667,9 @@ export class LayerTable { * */ protected _showDelete(): void { - this._deleteDialogOpen = true; + this.showDelete.emit({ + ids: this._getIds() + }) } /** @@ -1800,24 +1793,14 @@ export class LayerTable { const _disabled = this._layer === undefined ? true : disabled; return (
- {icon === "trash" ? ( - - ) : ( + {( ` | -| `toggleFilter` | Emitted on demand when filter action is clicked | `CustomEvent` | +| Event | Description | Type | +| ------------------------ | ------------------------------------------------------------- | ------------------------- | +| `featureSelectionChange` | Emitted on demand when a layer is selected | `CustomEvent` | +| `showDelete` | Emitted on demand when when the delete dialog should be shown | `CustomEvent` | +| `toggleFilter` | Emitted on demand when filter action is clicked | `CustomEvent` | ## Methods @@ -102,7 +103,6 @@ Type: `Promise` - calcite-panel - calcite-input - calcite-loader -- [delete-dialog](../delete-dialog) - calcite-action-bar - [map-layer-picker](../map-layer-picker) - calcite-dropdown @@ -112,7 +112,6 @@ Type: `Promise` - calcite-button - instant-apps-social-share - calcite-tooltip -- [delete-button](../delete-button) - calcite-modal - instant-apps-filter-list @@ -123,7 +122,6 @@ graph TD; layer-table --> calcite-panel layer-table --> calcite-input layer-table --> calcite-loader - layer-table --> delete-dialog layer-table --> calcite-action-bar layer-table --> map-layer-picker layer-table --> calcite-dropdown @@ -133,7 +131,6 @@ graph TD; layer-table --> calcite-button layer-table --> instant-apps-social-share layer-table --> calcite-tooltip - layer-table --> delete-button layer-table --> calcite-modal layer-table --> instant-apps-filter-list calcite-panel --> calcite-action @@ -148,12 +145,6 @@ graph TD; calcite-scrim --> calcite-loader calcite-input --> calcite-progress calcite-input --> calcite-icon - delete-dialog --> calcite-modal - delete-dialog --> calcite-button - calcite-modal --> calcite-scrim - calcite-modal --> calcite-icon - calcite-button --> calcite-loader - calcite-button --> calcite-icon calcite-action-bar --> calcite-action-group calcite-action-group --> calcite-action-menu calcite-action-group --> calcite-action @@ -177,15 +168,15 @@ graph TD; calcite-combobox --> calcite-icon calcite-combobox-item --> calcite-icon calcite-chip --> calcite-icon + calcite-button --> calcite-loader + calcite-button --> calcite-icon calcite-dropdown-item --> calcite-icon instant-apps-social-share --> calcite-popover instant-apps-social-share --> calcite-button instant-apps-social-share --> calcite-icon instant-apps-social-share --> calcite-action - delete-button --> calcite-button - delete-button --> calcite-action - delete-button --> calcite-tooltip - delete-button --> delete-dialog + calcite-modal --> calcite-scrim + calcite-modal --> calcite-icon instant-apps-filter-list --> calcite-panel instant-apps-filter-list --> calcite-loader instant-apps-filter-list --> calcite-checkbox diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts index a1a4226fa..a53e9df12 100644 --- a/src/utils/interfaces.ts +++ b/src/utils/interfaces.ts @@ -116,6 +116,10 @@ export interface ICsvOptions { addColumnTitle: boolean; } +export interface IDeleteIds { + ids: number[]; +} + export interface IPdfOptions { enabled: boolean; enabledSizeValues: ValidSize[];