Skip to content

Commit

Permalink
Merge pull request #494 from Esri/CT-Rporter-AGOL-2024.R01
Browse files Browse the repository at this point in the history 
Updated Reporter code
  • Loading branch information
@jmhauck
jmhauck authored Jan 18, 2024
2 parents fa1492b + dec211f commit cf7de14
Show file tree
Hide file tree
Showing 11 changed files with 398 additions and 191 deletions.
19 changes: 19 additions & 0 deletions src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1260,6 +1260,10 @@ export interface BufferToolsCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLBufferToolsElement;
}
export interface CrowdsourceReporterCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLCrowdsourceReporterElement;
}
export interface DeductCalculatorCustomEvent<T> extends CustomEvent<T> {
detail: T;
target: HTMLDeductCalculatorElement;
Expand Down Expand Up @@ -1396,7 +1400,18 @@ declare global {
prototype: HTMLCrowdsourceManagerElement;
new (): HTMLCrowdsourceManagerElement;
};
interface HTMLCrowdsourceReporterElementEventMap {
"togglePanel": boolean;
}
interface HTMLCrowdsourceReporterElement extends Components.CrowdsourceReporter, HTMLStencilElement {
addEventListener<K extends keyof HTMLCrowdsourceReporterElementEventMap>(type: K, listener: (this: HTMLCrowdsourceReporterElement, ev: CrowdsourceReporterCustomEvent<HTMLCrowdsourceReporterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
removeEventListener<K extends keyof HTMLCrowdsourceReporterElementEventMap>(type: K, listener: (this: HTMLCrowdsourceReporterElement, ev: CrowdsourceReporterCustomEvent<HTMLCrowdsourceReporterElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
}
var HTMLCrowdsourceReporterElement: {
prototype: HTMLCrowdsourceReporterElement;
Expand Down Expand Up @@ -2234,6 +2249,10 @@ declare namespace LocalJSX {
* esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
*/
"mapView"?: __esri.MapView;
/**
* Emitted when toggle panel button is clicked in reporter
*/
"onTogglePanel"?: (event: CrowdsourceReporterCustomEvent<boolean>) => void;
/**
* string: The word(s) to display in the reports submit button
*/
Expand Down
21 changes: 0 additions & 21 deletions src/components/crowdsource-reporter/crowdsource-reporter.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,27 +44,6 @@
border: 1px solid var(--calcite-color-border-3);
}

.map-container {
position: absolute;
width: calc(100% - 390px);
left: 390px;
}

.side-panel {
padding: 2px;
width: 390px;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 60;
}

.error-msg{
padding: 10px;
}

.collapsed-side-panel {
top: calc(100% - 55px);
height: 54px;
}
96 changes: 64 additions & 32 deletions src/components/crowdsource-reporter/crowdsource-reporter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
* limitations under the License.
*/

import { Component, Element, Host, h, Prop, VNode, State, Watch } from "@stencil/core";
import { Component, Element, Host, h, Prop, VNode, State, Watch, Event, EventEmitter } from "@stencil/core";
import { IMapChange, IMapInfo, ISearchConfiguration, theme } from "../../utils/interfaces";
import { getLocaleComponentStrings } from "../../utils/locale";
import CrowdsourceReporter_T9n from "../../assets/t9n/crowdsource-reporter/resources.json";
Expand Down Expand Up @@ -222,9 +222,7 @@ export class CrowdsourceReporter {
*/
@Watch("isMobile")
async isMobileWatchHandler(): Promise<void> {
if (this.isMobile) {
this._sidePanelCollapsed = false;
}
}

/**
Expand All @@ -249,6 +247,11 @@ export class CrowdsourceReporter {
//
//--------------------------------------------------------------------------

/**
* Emitted when toggle panel button is clicked in reporter
*/
@Event() togglePanel: EventEmitter<boolean>;

//--------------------------------------------------------------------------
//
// Functions (lifecycle)
Expand Down Expand Up @@ -299,20 +302,15 @@ export class CrowdsourceReporter {
case "feature-list":
renderLists.push(this.getFeatureListFlowItem(this._selectedLayerId, this._selectedLayerName));
break;
case "feature-details":
renderLists.push(this.getFeatureDetailsFlowItem());
break;
case "feature-details":
renderLists.push(this.getFeatureDetailsFlowItem());
break;

}
});
let sidePanelClass = "side-panel";
//in case of mobile handle for collapsed styles of the panel
if (this.isMobile && this._sidePanelCollapsed) {
sidePanelClass += " collapsed-side-panel";
}
const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
return (
<calcite-panel class={sidePanelClass + " width-full " + themeClass}>
<calcite-panel class={"width-full " + themeClass}>
{this.mapView
? <calcite-flow>
{renderLists?.length > 0 && renderLists}
Expand All @@ -329,17 +327,30 @@ export class CrowdsourceReporter {
*/
protected getLayerListFlowItem(): Node {
return (
<calcite-flow-item collapsed={this.isMobile && this._sidePanelCollapsed} heading={this.reportsHeader}>
{this._hasValidLayers && <calcite-action icon="sort-ascending-arrow" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.sort} text-enabled={this.isMobile} />}
{this._hasValidLayers && <calcite-action icon="filter" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.filter} text-enabled={this.isMobile} />}
<calcite-flow-item
collapsed={this.isMobile && this._sidePanelCollapsed}
heading={this.reportsHeader}>
{this._hasValidLayers &&
<calcite-action
icon="sort-ascending-arrow"
slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.sort} text-enabled={this.isMobile} />}
{this._hasValidLayers &&
<calcite-action
icon="filter"
slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.filter} text-enabled={this.isMobile} />}
{this.isMobile && this.getActionToExpandCollapsePanel()}
{this._hasValidLayers && this.enableNewReports && <calcite-button appearance="secondary" slot="footer" width="full">
{this.reportButtonText}
</calcite-button>}
{this._hasValidLayers && this.enableNewReports &&
<calcite-button
appearance="secondary"
slot="footer"
width="full">
{this.reportButtonText}
</calcite-button>}
<calcite-panel full-height full-width>
<layer-list class="height-full"
<layer-list
class="height-full"
layers={this.layers}
mapView={this.mapView}
noLayerErrorMsg={this._translations.noLayerToDisplayErrorMsg}
Expand Down Expand Up @@ -385,6 +396,7 @@ export class CrowdsourceReporter {
*/
protected toggleSidePanel(): void {
this._sidePanelCollapsed = !this._sidePanelCollapsed;
this.togglePanel.emit(this._sidePanelCollapsed)
}

/**
Expand All @@ -404,22 +416,34 @@ export class CrowdsourceReporter {
*/
protected getFeatureListFlowItem(layerId: string, layerName: string): Node {
return (
<calcite-flow-item collapsed={this.isMobile && this._sidePanelCollapsed} heading={layerName} onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
<calcite-action icon="sort-ascending-arrow" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
<calcite-flow-item
collapsed={this.isMobile && this._sidePanelCollapsed}
heading={layerName}
onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
<calcite-action
icon="sort-ascending-arrow"
slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.sort} text-enabled={this.isMobile} />
<calcite-action icon="filter" slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
<calcite-action
icon="filter"
slot={this.isMobile ? "header-menu-actions" : "header-actions-end"}
text={this._translations.filter} text-enabled={this.isMobile} />
{this.isMobile && this.getActionToExpandCollapsePanel()}
{this.enableNewReports && <calcite-button appearance="secondary" slot="footer" width="full">
{this.reportButtonText}
</calcite-button>}
{this.enableNewReports &&
<calcite-button
appearance="secondary"
slot="footer"
width="full">
{this.reportButtonText}
</calcite-button>}
<calcite-panel full-height>
{<feature-list class="height-full"
{<feature-list
class="height-full"
highlightOnMap
mapView={this.mapView}
noFeaturesFoundMsg={this._translations.featureErrorMsg}
onFeatureSelect={this.onFeatureSelectFromList.bind(this)}
pageSize={100}
pageSize={30}
selectedLayerId={layerId}
/>}
</calcite-panel>
Expand All @@ -432,9 +456,15 @@ export class CrowdsourceReporter {
*/
protected getFeatureDetailsFlowItem(): Node {
return (
<calcite-flow-item collapsed={this.isMobile && this._sidePanelCollapsed} heading={this._selectedLayerName} onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
<calcite-flow-item
collapsed={this.isMobile && this._sidePanelCollapsed}
heading={this._selectedLayerName}
onCalciteFlowItemBack={this.backFromFeatureList.bind(this)}>
{this.isMobile && this.getActionToExpandCollapsePanel()}
<calcite-action icon="share" slot={"header-actions-end"} text={this._translations.share} />
<calcite-action
icon="share"
slot={"header-actions-end"}
text={this._translations.share} />
<calcite-panel full-height>
<info-card
allowEditing={false}
Expand All @@ -454,7 +484,9 @@ export class CrowdsourceReporter {
*/
protected getActionToExpandCollapsePanel(): Node {
return (
<calcite-action icon={this._sidePanelCollapsed ? "chevrons-up" : "chevrons-down"} onClick={this.toggleSidePanel.bind(this)} slot="header-actions-end"
<calcite-action
icon={this._sidePanelCollapsed ? "chevrons-up" : "chevrons-down"}
onClick={this.toggleSidePanel.bind(this)} slot="header-actions-end"
text={this._sidePanelCollapsed ? this._translations.expand : this._translations.collapse} />
);
}
Expand Down
Loading

0 comments on commit cf7de14

Please sign in to comment.