@esri/solutions-components 0.10.12 → 0.10.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/calcite-alert_4.cjs.entry.js +1 -1
- package/dist/cjs/calcite-flow_6.cjs.entry.js +103 -7
- package/dist/cjs/crowdsource-reporter.cjs.entry.js +173 -43
- package/dist/cjs/feature-list.cjs.entry.js +110 -17
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{popupUtils-92e52dbf.js → popupUtils-47bd97e7.js} +1 -1
- package/dist/cjs/solutions-components.cjs.js +1 -1
- package/dist/collection/assets/t9n/crowdsource-reporter/resources.json +3 -1
- package/dist/collection/assets/t9n/crowdsource-reporter/resources_en.json +3 -1
- package/dist/collection/assets/t9n/feature-list/resources.json +3 -1
- package/dist/collection/assets/t9n/feature-list/resources_en.json +3 -1
- package/dist/collection/components/create-feature/create-feature.js +145 -2
- package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +227 -43
- package/dist/collection/components/feature-list/feature-list.css +16 -1
- package/dist/collection/components/feature-list/feature-list.js +165 -15
- package/dist/collection/components/layer-list/layer-list.js +35 -6
- package/dist/collection/demos/crowdsource-reporter.html +2 -0
- package/dist/collection/utils/popupUtils.js +1 -1
- package/dist/collection/utils/popupUtils.ts +1 -1
- package/dist/components/create-feature2.js +91 -3
- package/dist/components/crowdsource-reporter.js +178 -45
- package/dist/components/feature-list2.js +152 -50
- package/dist/components/layer-list2.js +18 -6
- package/dist/components/popupUtils.js +1 -1
- package/dist/esm/calcite-alert_4.entry.js +1 -1
- package/dist/esm/calcite-flow_6.entry.js +104 -8
- package/dist/esm/crowdsource-reporter.entry.js +173 -43
- package/dist/esm/feature-list.entry.js +110 -17
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{popupUtils-00c655fb.js → popupUtils-349a26e6.js} +1 -1
- package/dist/esm/solutions-components.js +1 -1
- package/dist/solutions-components/assets/t9n/crowdsource-reporter/resources.json +3 -1
- package/dist/solutions-components/assets/t9n/crowdsource-reporter/resources_en.json +3 -1
- package/dist/solutions-components/assets/t9n/feature-list/resources.json +3 -1
- package/dist/solutions-components/assets/t9n/feature-list/resources_en.json +3 -1
- package/dist/solutions-components/demos/crowdsource-reporter.html +2 -0
- package/dist/solutions-components/p-40e305b4.entry.js +17 -0
- package/dist/solutions-components/p-4d44410b.entry.js +6 -0
- package/dist/solutions-components/{p-900fee65.js → p-5a473f0d.js} +1 -1
- package/dist/solutions-components/p-9b83e593.entry.js +6 -0
- package/dist/solutions-components/{p-cde8d6e5.entry.js → p-f6bc95b3.entry.js} +1 -1
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/solutions-components/utils/popupUtils.ts +1 -1
- package/dist/types/components/create-feature/create-feature.d.ts +34 -0
- package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +80 -21
- package/dist/types/components/feature-list/feature-list.d.ts +49 -7
- package/dist/types/components/layer-list/layer-list.d.ts +4 -0
- package/dist/types/components.d.ts +77 -0
- package/package.json +1 -1
- package/dist/solutions-components/p-064e43e0.entry.js +0 -6
- package/dist/solutions-components/p-2d1afda0.entry.js +0 -17
- package/dist/solutions-components/p-c9260b4c.entry.js +0 -6
@@ -17,7 +17,7 @@ const t9n = require('./t9n-42ba6ea3.js');
|
|
17
17
|
const resources = require('./resources-ed5f0434.js');
|
18
18
|
const locale$1 = require('./locale-a09603ee.js');
|
19
19
|
const mapViewUtils = require('./mapViewUtils-8d4da732.js');
|
20
|
-
const popupUtils = require('./popupUtils-
|
20
|
+
const popupUtils = require('./popupUtils-47bd97e7.js');
|
21
21
|
require('./guid-02e5380f.js');
|
22
22
|
require('./resources-dfe71ff2.js');
|
23
23
|
require('./browser-69696af0.js');
|
@@ -368,6 +368,8 @@ const CreateFeature = class {
|
|
368
368
|
this.customizeSubmit = false;
|
369
369
|
this.searchConfiguration = undefined;
|
370
370
|
this.isMobile = undefined;
|
371
|
+
this.floorLevel = undefined;
|
372
|
+
this.formElements = undefined;
|
371
373
|
this._editorLoading = false;
|
372
374
|
this._showSearchWidget = undefined;
|
373
375
|
}
|
@@ -382,6 +384,20 @@ const CreateFeature = class {
|
|
382
384
|
* The Editor constructor
|
383
385
|
*/
|
384
386
|
Editor;
|
387
|
+
/**
|
388
|
+
* esri/form/ExpressionInfo: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-ExpressionInfo.html
|
389
|
+
* The ExpressionInfo constructor
|
390
|
+
*/
|
391
|
+
ExpressionInfo;
|
392
|
+
/**
|
393
|
+
* esri/form/elements/FieldElement: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-elements-FieldElement.html
|
394
|
+
* The FieldElement constructor
|
395
|
+
*/
|
396
|
+
FieldElement;
|
397
|
+
/**
|
398
|
+
* esri/form/FormTemplate: https://developers.arcgis.com/javascript/latest/api-reference/esri-form-FormTemplate.html
|
399
|
+
*/
|
400
|
+
FormTemplate;
|
385
401
|
/**
|
386
402
|
* esri/widgets/Editor: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Editor.html
|
387
403
|
* The Editor instance
|
@@ -487,6 +503,15 @@ const CreateFeature = class {
|
|
487
503
|
this._editor.viewModel.featureFormViewModel.submit();
|
488
504
|
}
|
489
505
|
}
|
506
|
+
/**
|
507
|
+
* refresh the feature form
|
508
|
+
* @returns Promise that resolves when the operation is complete
|
509
|
+
*/
|
510
|
+
async refresh(floorLevel) {
|
511
|
+
if (this._editor) {
|
512
|
+
void this._setFloorLevel(floorLevel);
|
513
|
+
}
|
514
|
+
}
|
490
515
|
//--------------------------------------------------------------------------
|
491
516
|
//
|
492
517
|
// Events (public)
|
@@ -542,7 +567,7 @@ const CreateFeature = class {
|
|
542
567
|
const loaderClass = this._editorLoading ? "" : "display-none";
|
543
568
|
const featureFormClass = this._editorLoading ? "display-none" : "";
|
544
569
|
const mobileMapClass = this.isMobile ? "show-map" : "display-none";
|
545
|
-
return (index.h(index.Fragment, { key: '
|
570
|
+
return (index.h(index.Fragment, { key: '47d29e529402482acf3811c37c0cd5a426ed40ed' }, index.h("calcite-loader", { key: '283b2c6a0f1722c9a8d955e11390e65e6041b247', class: loaderClass, label: "", scale: "s" }), index.h("div", { key: 'bb596467d5da22882932259db6a9e8029717850b', class: featureFormClass, id: "feature-form" }), index.h("div", { key: 'c3887f5c5aa92efdcf588da4918933dadb87937f', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), index.h("div", { key: '566069a6202053468a3cf7a221feb071491eabb4', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
|
546
571
|
}
|
547
572
|
//--------------------------------------------------------------------------
|
548
573
|
//
|
@@ -565,15 +590,21 @@ const CreateFeature = class {
|
|
565
590
|
* @protected
|
566
591
|
*/
|
567
592
|
async initModules() {
|
568
|
-
const [Editor, reactiveUtils, Search, MapView] = await locale$1.loadModules([
|
593
|
+
const [Editor, reactiveUtils, Search, ExpressionInfo, FieldElement, FormTemplate, MapView] = await locale$1.loadModules([
|
569
594
|
"esri/widgets/Editor",
|
570
595
|
"esri/core/reactiveUtils",
|
571
596
|
"esri/widgets/Search",
|
597
|
+
"esri/form/ExpressionInfo",
|
598
|
+
"esri/form/elements/FieldElement",
|
599
|
+
"esri/form/FormTemplate",
|
572
600
|
"esri/views/MapView"
|
573
601
|
]);
|
574
602
|
this.Editor = Editor;
|
575
603
|
this.reactiveUtils = reactiveUtils;
|
576
604
|
this.Search = Search;
|
605
|
+
this.ExpressionInfo = ExpressionInfo;
|
606
|
+
this.FieldElement = FieldElement;
|
607
|
+
this.FormTemplate = FormTemplate;
|
577
608
|
this.MapView = MapView;
|
578
609
|
}
|
579
610
|
/**
|
@@ -664,6 +695,7 @@ const CreateFeature = class {
|
|
664
695
|
const formHandle = this.reactiveUtils.watch(() => this._editor.viewModel.featureFormViewModel?.state, (state) => {
|
665
696
|
if (state === 'ready') {
|
666
697
|
this._mapViewContainer?.classList?.replace("show-map", "hide-map");
|
698
|
+
void this._setFloorLevel(this.floorLevel);
|
667
699
|
this._showSearchWidget = false;
|
668
700
|
this.progressStatus.emit(1);
|
669
701
|
this.drawComplete.emit();
|
@@ -808,6 +840,59 @@ const CreateFeature = class {
|
|
808
840
|
}
|
809
841
|
return searchConfiguration;
|
810
842
|
}
|
843
|
+
/**
|
844
|
+
* Add the floor level value to form
|
845
|
+
* @param level selected floor level
|
846
|
+
*
|
847
|
+
* @protected
|
848
|
+
*/
|
849
|
+
async _setFloorLevel(level) {
|
850
|
+
if (!level) {
|
851
|
+
return;
|
852
|
+
}
|
853
|
+
const layer = await mapViewUtils.getLayerOrTable(this._updatedMapView, this.selectedLayerId);
|
854
|
+
if (layer?.floorInfo?.floorField) {
|
855
|
+
const layerField = layer.fields.find((field) => field.name === layer.floorInfo.floorField);
|
856
|
+
// if layer field is present and form template is not present only then we can set value of floorfield into feature form otherwise create a mannual formtemplate to add the floorfeild element
|
857
|
+
if (layerField && !layer?.formTemplate) {
|
858
|
+
this._editor.viewModel.featureFormViewModel.setValue(layerField.name, level);
|
859
|
+
layerField.editable = false;
|
860
|
+
}
|
861
|
+
else if (layer.formTemplate && this.formElements) {
|
862
|
+
const floorInfoExpression = new this.ExpressionInfo({
|
863
|
+
expression: `"${level}"`,
|
864
|
+
name: "floor-info-test",
|
865
|
+
title: "Floor Info",
|
866
|
+
returnType: "string"
|
867
|
+
});
|
868
|
+
const levelIdFieldElement = new this.FieldElement({
|
869
|
+
label: layer.floorInfo.floorField,
|
870
|
+
editableExpression: 'false',
|
871
|
+
fieldName: layer.floorInfo.floorField,
|
872
|
+
input: {
|
873
|
+
type: "text-box",
|
874
|
+
maxLength: 50,
|
875
|
+
minLength: 0
|
876
|
+
},
|
877
|
+
valueExpression: floorInfoExpression.name
|
878
|
+
});
|
879
|
+
this._updatedMapView.map.editableLayers.forEach((layer) => {
|
880
|
+
const orgElements = this.formElements.orgElements;
|
881
|
+
const orgExpressionInfos = this.formElements.orgExpressionInfos;
|
882
|
+
const elements = [...orgElements];
|
883
|
+
elements.push(levelIdFieldElement);
|
884
|
+
// Creating formtemplate
|
885
|
+
const floorInfoTemplate = new this.FormTemplate({
|
886
|
+
title: layer.formTemplate.title,
|
887
|
+
description: layer.formTemplate.description,
|
888
|
+
elements,
|
889
|
+
expressionInfos: [floorInfoExpression].concat(orgExpressionInfos)
|
890
|
+
});
|
891
|
+
layer.formTemplate = floorInfoTemplate;
|
892
|
+
});
|
893
|
+
}
|
894
|
+
}
|
895
|
+
}
|
811
896
|
/**
|
812
897
|
* Hides the elements of editor widget
|
813
898
|
* @protected
|
@@ -1636,6 +1721,7 @@ const LayerList = class {
|
|
1636
1721
|
this.layers = undefined;
|
1637
1722
|
this.showFeatureCount = true;
|
1638
1723
|
this.showNextIcon = false;
|
1724
|
+
this.applyLayerViewFilter = false;
|
1639
1725
|
this._noLayersToDisplay = false;
|
1640
1726
|
this._mapLayerIds = [];
|
1641
1727
|
this._isLoading = false;
|
@@ -1706,9 +1792,9 @@ const LayerList = class {
|
|
1706
1792
|
* Renders the component.
|
1707
1793
|
*/
|
1708
1794
|
render() {
|
1709
|
-
return (index.h(index.Fragment, { key: '
|
1710
|
-
index.h("calcite-notice", { key: '
|
1711
|
-
index.h("calcite-list", { key: '
|
1795
|
+
return (index.h(index.Fragment, { key: '19f68b9a5d0b6c85832544e4281e1c4a1707ba86' }, this._isLoading && index.h("calcite-loader", { key: 'c908f311165f8f520f267a0dcde0bd954863ba6b', label: "", scale: "m" }), !this._isLoading && this.mapView && this._noLayersToDisplay &&
|
1796
|
+
index.h("calcite-notice", { key: '56dfb252f998333ed6a671cccddd5683f08ad63d', class: "error-msg", icon: "layers-reference", kind: "danger", open: true }, index.h("div", { key: 'a27ad45ac2b1984152af5a80da36583f7c375be6', slot: "title" }, this._translations.error), index.h("div", { key: 'a9466cb560b6ee2c72ebd18130ce21371f9e7cdf', slot: "message" }, this._translations.noLayerToDisplayErrorMsg)), !this._isLoading && this.mapView &&
|
1797
|
+
index.h("calcite-list", { key: '40e54ba92d2f48a97dd0987808f4b7fdefd266bb', "selection-appearance": "border", "selection-mode": "none" }, this.renderLayerList())));
|
1712
1798
|
}
|
1713
1799
|
//--------------------------------------------------------------------------
|
1714
1800
|
//
|
@@ -1735,10 +1821,20 @@ const LayerList = class {
|
|
1735
1821
|
this._layerItemsHash = await mapViewUtils.getMapLayerHash(this.mapView, true);
|
1736
1822
|
const allMapLayers = await mapViewUtils.getAllLayers(this.mapView);
|
1737
1823
|
// eslint-disable-next-line @typescript-eslint/no-misused-promises
|
1738
|
-
|
1824
|
+
for (const eachLayer of allMapLayers) {
|
1739
1825
|
if (eachLayer?.type === "feature") {
|
1740
1826
|
if (this.showFeatureCount) {
|
1741
1827
|
const q = eachLayer.createQuery();
|
1828
|
+
//if layer has definitionExpression append it to the where clause
|
1829
|
+
if (eachLayer?.definitionExpression) {
|
1830
|
+
q.where = q.where + ' AND ' + eachLayer.definitionExpression;
|
1831
|
+
}
|
1832
|
+
if (this.applyLayerViewFilter) {
|
1833
|
+
const featureLayerView = await mapViewUtils.getFeatureLayerView(this.mapView, eachLayer.id);
|
1834
|
+
if (featureLayerView?.filter?.where) {
|
1835
|
+
q.where = q.where ? q.where + ' AND ' + featureLayerView.filter.where : featureLayerView.filter.where;
|
1836
|
+
}
|
1837
|
+
}
|
1742
1838
|
const result = eachLayer.queryFeatureCount(q);
|
1743
1839
|
def.push(result);
|
1744
1840
|
void result.then(async (resCount) => {
|
@@ -1751,7 +1847,7 @@ const LayerList = class {
|
|
1751
1847
|
});
|
1752
1848
|
}
|
1753
1849
|
}
|
1754
|
-
}
|
1850
|
+
}
|
1755
1851
|
await Promise.all(def).then(() => {
|
1756
1852
|
const editableLayerIds = this.getLayersToBeShownInList(this._layerItemsHash);
|
1757
1853
|
this._mapLayerIds = editableLayerIds.reverse();
|
@@ -47,11 +47,13 @@ const CrowdsourceReporter = class {
|
|
47
47
|
this.searchConfiguration = undefined;
|
48
48
|
this.showComments = undefined;
|
49
49
|
this.showUserImageInCommentsList = false;
|
50
|
+
this.showFeatureSymbol = false;
|
51
|
+
this.showMyReportsOnly = false;
|
50
52
|
this.theme = "light";
|
51
53
|
this.zoomToScale = undefined;
|
54
|
+
this.floorLevel = undefined;
|
52
55
|
this._featureCreationFailedErrorMsg = undefined;
|
53
56
|
this._filterActive = false;
|
54
|
-
this._filterOpen = false;
|
55
57
|
this._flowItems = [];
|
56
58
|
this._hasValidLayers = false;
|
57
59
|
this._loadingFeatureDetails = undefined;
|
@@ -146,6 +148,11 @@ const CrowdsourceReporter = class {
|
|
146
148
|
* esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
|
147
149
|
*/
|
148
150
|
reactiveUtils;
|
151
|
+
/**
|
152
|
+
* "esri/layers/support/FeatureFilter": https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-FeatureFilter.html
|
153
|
+
* Esri FeatureFilter
|
154
|
+
*/
|
155
|
+
FeatureFilter;
|
149
156
|
/**
|
150
157
|
* __esri.Graphic: The selected feature
|
151
158
|
*/
|
@@ -182,6 +189,22 @@ const CrowdsourceReporter = class {
|
|
182
189
|
* boolean: when true allow panel to show in full height
|
183
190
|
*/
|
184
191
|
_showFullPanel;
|
192
|
+
/**
|
193
|
+
* string: The current floor expression
|
194
|
+
*/
|
195
|
+
_floorExpression;
|
196
|
+
/**
|
197
|
+
* _esri.Element: form elements of the selected layer
|
198
|
+
*/
|
199
|
+
_formElements = [];
|
200
|
+
/**
|
201
|
+
* string[]: URL params set by using filters.
|
202
|
+
*/
|
203
|
+
_filterUrlParams;
|
204
|
+
/**
|
205
|
+
* FilterInitState: filter's init state
|
206
|
+
*/
|
207
|
+
_filterInitState;
|
185
208
|
//--------------------------------------------------------------------------
|
186
209
|
//
|
187
210
|
// Watch handlers
|
@@ -201,6 +224,30 @@ const CrowdsourceReporter = class {
|
|
201
224
|
await this.setMapView();
|
202
225
|
});
|
203
226
|
}
|
227
|
+
/**
|
228
|
+
* Called each time the floorLevel prop is changed.
|
229
|
+
*/
|
230
|
+
async floorLevelWatchHandler() {
|
231
|
+
if (this._editableLayerIds) {
|
232
|
+
// updates all layer's defination expression when floorLevel is changed
|
233
|
+
// then refresh the components to update features
|
234
|
+
for (const layerId of this._editableLayerIds) {
|
235
|
+
const layer = await mapViewUtils.getLayerOrTable(this.mapView, layerId);
|
236
|
+
if (layer.floorInfo?.floorField) {
|
237
|
+
this._updateFloorDefinitionExpression(layer);
|
238
|
+
}
|
239
|
+
}
|
240
|
+
}
|
241
|
+
if (this._layerList) {
|
242
|
+
await this._layerList.refresh();
|
243
|
+
}
|
244
|
+
if (this._featureList) {
|
245
|
+
void this._featureList.refresh();
|
246
|
+
}
|
247
|
+
if (this._createFeature) {
|
248
|
+
void this._createFeature.refresh(this.floorLevel);
|
249
|
+
}
|
250
|
+
}
|
204
251
|
//--------------------------------------------------------------------------
|
205
252
|
//
|
206
253
|
// Methods (public)
|
@@ -242,7 +289,7 @@ const CrowdsourceReporter = class {
|
|
242
289
|
*/
|
243
290
|
render() {
|
244
291
|
const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
|
245
|
-
return (index.h(index.Host, { key: '
|
292
|
+
return (index.h(index.Host, { key: '57ea463ae2d3eac3a23e63ed8702f5fde3743e09' }, this._reportSubmitted && index.h("calcite-alert", { key: '4082ad71fa4d6c3a01ec0ac6477e81b3d3bc40e1', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '9e042989b10a7d68347b7f34b9f31957ede3ca37', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: '573dc6a472b00191a1822c95ba0ee2192c486612', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: 'f3799e01a09ccbeec651762833783d3200729f1b', slot: "title" }, this._translations.error), index.h("div", { key: 'cd80f9a2c8df9a4c7b5b517a9e98ce4622e230c2', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.h("calcite-alert", { key: '1137ce7794f36419d20a5b5d2d1f390e72713155', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, index.h("div", { key: '24a0604c3be1cab965c48ab46435c349a7d67f65', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '86112e4c449e1061fa436822670dc93cb3bfe949', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: '94be8a14c1bf22127f8018dfe3a92304870ce70d', slot: "title" }, this._translations.error), index.h("div", { key: '6b30463e2ee941834fcad93e4cbe32e5a65d592d', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: '9b928eab61af6ed84a0059dbc04c633c131f879b' }, index.h("calcite-shell", { key: 'e07ac5d7d6d8e8c8fd0001586448ab13733e2ed5', "content-behind": true }, this._getReporter()))));
|
246
293
|
}
|
247
294
|
//--------------------------------------------------------------------------
|
248
295
|
//
|
@@ -257,10 +304,12 @@ const CrowdsourceReporter = class {
|
|
257
304
|
* @protected
|
258
305
|
*/
|
259
306
|
async _initModules() {
|
260
|
-
const [reactiveUtils] = await locale.loadModules([
|
261
|
-
"esri/core/reactiveUtils"
|
307
|
+
const [reactiveUtils, FeatureFilter] = await locale.loadModules([
|
308
|
+
"esri/core/reactiveUtils",
|
309
|
+
"esri/layers/support/FeatureFilter"
|
262
310
|
]);
|
263
311
|
this.reactiveUtils = reactiveUtils;
|
312
|
+
this.FeatureFilter = FeatureFilter;
|
264
313
|
}
|
265
314
|
/**
|
266
315
|
* Set the selected layer id and layer name
|
@@ -299,6 +348,10 @@ const CrowdsourceReporter = class {
|
|
299
348
|
case "feature-list":
|
300
349
|
renderLists.push(this.getFeatureListFlowItem(this._selectedLayerId, this._selectedLayerName));
|
301
350
|
break;
|
351
|
+
case "filter-panel":
|
352
|
+
renderLists.push(this.getFilterPanel());
|
353
|
+
void this._restoreFilters();
|
354
|
+
break;
|
302
355
|
case "feature-details":
|
303
356
|
renderLists.push(this.getFeatureDetailsFlowItem());
|
304
357
|
break;
|
@@ -321,32 +374,6 @@ const CrowdsourceReporter = class {
|
|
321
374
|
? index.h("calcite-flow", null, renderLists?.length > 0 && renderLists)
|
322
375
|
: index.h("calcite-loader", { label: "", scale: "m" })));
|
323
376
|
}
|
324
|
-
/**
|
325
|
-
* Show filter component in modal
|
326
|
-
* @returns node to interact with any configured filters for the current layer
|
327
|
-
*/
|
328
|
-
filterModal() {
|
329
|
-
//get layer expression for current selected layer
|
330
|
-
const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
|
331
|
-
return (currentLayersExpressions.length > 0 &&
|
332
|
-
index.h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, index.h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName)), index.h("div", { slot: "content" }, index.h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => void this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
|
333
|
-
}
|
334
|
-
/**
|
335
|
-
* Close the filter modal
|
336
|
-
* @protected
|
337
|
-
*/
|
338
|
-
_closeFilter() {
|
339
|
-
if (this._filterOpen) {
|
340
|
-
this._filterOpen = false;
|
341
|
-
}
|
342
|
-
}
|
343
|
-
/**
|
344
|
-
* When true the filter modal will be displayed
|
345
|
-
* @protected
|
346
|
-
*/
|
347
|
-
_toggleFilter() {
|
348
|
-
this._filterOpen = !this._filterOpen;
|
349
|
-
}
|
350
377
|
/**
|
351
378
|
* On sort option click update the sort field and sort order
|
352
379
|
* @param sortField sort field
|
@@ -371,14 +398,27 @@ const CrowdsourceReporter = class {
|
|
371
398
|
index.h(index.Fragment, null, index.h("calcite-list-item", { label: this._translations.sortHighestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "desc", "sortHighestVoted"); }, selected: this._updatedSortOption === "sortHighestVoted", value: "sortHighestVoted" }), index.h("calcite-list-item", { label: this._translations.sortLowestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "asc", "sortLowestVoted"); }, selected: this._updatedSortOption === "sortLowestVoted", value: "sortLowestVoted" })))));
|
372
399
|
}
|
373
400
|
/**
|
374
|
-
*
|
401
|
+
* Restores the applied filters
|
402
|
+
* @protected
|
403
|
+
*/
|
404
|
+
_restoreFilters() {
|
405
|
+
// call the restore function when instant-apps-filter-list is ready
|
406
|
+
setTimeout(() => {
|
407
|
+
const canRestoreFilter = this._filterList && this._filterUrlParams && this._filterInitState;
|
408
|
+
if (canRestoreFilter) {
|
409
|
+
void this._filterList.restoreFilters(this._filterUrlParams[0], this._filterInitState);
|
410
|
+
}
|
411
|
+
}, 200);
|
412
|
+
}
|
413
|
+
/**
|
414
|
+
* Reset the filter
|
375
415
|
* @protected
|
376
416
|
*/
|
377
|
-
_handleFilterListReset() {
|
378
|
-
//on reset filter list reset the filter
|
417
|
+
async _handleFilterListReset() {
|
418
|
+
//on reset filter list reset the filter states
|
379
419
|
this._filterActive = false;
|
380
|
-
|
381
|
-
|
420
|
+
this._filterUrlParams = null;
|
421
|
+
this._filterInitState = null;
|
382
422
|
}
|
383
423
|
/**
|
384
424
|
* Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
|
@@ -388,8 +428,7 @@ const CrowdsourceReporter = class {
|
|
388
428
|
//if filter are applied the url params will be generated
|
389
429
|
//set the filter active state based on the length of applied filters
|
390
430
|
this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
|
391
|
-
|
392
|
-
void this._featureList.refresh();
|
431
|
+
this._filterUrlParams = this._filterList.urlParams.getAll('filter');
|
393
432
|
}
|
394
433
|
/**
|
395
434
|
* Get the feature layer list
|
@@ -398,7 +437,7 @@ const CrowdsourceReporter = class {
|
|
398
437
|
*/
|
399
438
|
getLayerListFlowItem() {
|
400
439
|
return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
|
401
|
-
index.h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("layer-list", { class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
|
440
|
+
index.h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
|
402
441
|
}
|
403
442
|
/**
|
404
443
|
* Get the layer list for creating a report
|
@@ -417,7 +456,7 @@ const CrowdsourceReporter = class {
|
|
417
456
|
* @protected
|
418
457
|
*/
|
419
458
|
getFeatureCreateFlowItem() {
|
420
|
-
return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.h("create-feature", { customizeSubmit: true, isMobile: this.isMobile, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
|
459
|
+
return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), index.h("calcite-panel", { "full-height": true, "full-width": true }, index.h("div", { class: "progress-bar" }, index.h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), index.h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, index.h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), index.h("create-feature", { customizeSubmit: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
|
421
460
|
}
|
422
461
|
/**
|
423
462
|
* Update the progress bar status when editor panel changes
|
@@ -554,8 +593,10 @@ const CrowdsourceReporter = class {
|
|
554
593
|
*/
|
555
594
|
async navigateToCreateFeature(evt) {
|
556
595
|
if (evt.detail.layerId && evt.detail.layerName) {
|
557
|
-
|
596
|
+
await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
|
558
597
|
}
|
598
|
+
// get the form template elements to pass in create-feature to create a LEVELID field in feature-form
|
599
|
+
this._getFormElements();
|
559
600
|
this._showSubmitCancelButton = false;
|
560
601
|
this.updatePanelState(false, true);
|
561
602
|
this._flowItems = [...this._flowItems, "feature-create"];
|
@@ -612,6 +653,15 @@ const CrowdsourceReporter = class {
|
|
612
653
|
void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
|
613
654
|
this._flowItems = [...this._flowItems, "feature-list"];
|
614
655
|
}
|
656
|
+
/**
|
657
|
+
* On back from filter panel get the filter's init state
|
658
|
+
* @protected
|
659
|
+
*/
|
660
|
+
async backFromFilterPanel() {
|
661
|
+
this._filterInitState = await this._filterList.getFilterInitState();
|
662
|
+
void this._featureList.refresh();
|
663
|
+
this.backFromSelectedPanel();
|
664
|
+
}
|
615
665
|
/**
|
616
666
|
* On back from selected panel navigate to the previous panel
|
617
667
|
* @protected
|
@@ -629,6 +679,10 @@ const CrowdsourceReporter = class {
|
|
629
679
|
(updatedFlowItems[0] === 'feature-list' || updatedFlowItems[updatedFlowItems.length - 2] === 'feature-list'))) {
|
630
680
|
this.updatePanelState(this._sidePanelCollapsed, false);
|
631
681
|
}
|
682
|
+
// Coming back from feature details refresh the feature list to update the like count
|
683
|
+
if (this.reportingOptions && this.reportingOptions[this._selectedLayerId]?.like && updatedFlowItems[updatedFlowItems.length - 1] === 'feature-details') {
|
684
|
+
void this._featureList.refresh();
|
685
|
+
}
|
632
686
|
updatedFlowItems.pop();
|
633
687
|
//Back to layer list, and return as the flowItems will be reset in navigateToHomePage
|
634
688
|
if (updatedFlowItems.length === 1 && updatedFlowItems[0] === 'layer-list') {
|
@@ -716,8 +770,19 @@ const CrowdsourceReporter = class {
|
|
716
770
|
const layerExpressions = this.layerExpressions?.filter((exp) => exp.id === this._selectedLayerId);
|
717
771
|
const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
|
718
772
|
const showFilterIcon = layerExpressions?.length > 0;
|
719
|
-
return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), index.h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && index.h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: this.
|
720
|
-
index.h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true }, index.h("feature-list", { class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, selectedLayerId: layerId, sortingInfo: this._updatedSorting }))));
|
773
|
+
return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this) }, this._toggleSort(), index.h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && index.h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
|
774
|
+
index.h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), index.h("calcite-panel", { "full-height": true }, index.h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", highlightOnHover: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, reportingOptions: this.reportingOptions, selectedLayerId: layerId, showFeatureSymbol: this.showFeatureSymbol, sortingInfo: this._updatedSorting }))));
|
775
|
+
}
|
776
|
+
/**
|
777
|
+
* Get Filter page for apllying filter
|
778
|
+
* @param layerId Layer id
|
779
|
+
* @param layerName Layer name
|
780
|
+
* @returns feature list node
|
781
|
+
* @protected
|
782
|
+
*/
|
783
|
+
getFilterPanel() {
|
784
|
+
const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
|
785
|
+
return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("div", { class: "width-full", slot: "footer" }, index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), index.h("calcite-panel", { "full-height": true }, index.h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
|
721
786
|
}
|
722
787
|
/**
|
723
788
|
* Returns the calcite-flow item for feature details
|
@@ -821,6 +886,8 @@ const CrowdsourceReporter = class {
|
|
821
886
|
*/
|
822
887
|
async setMapView() {
|
823
888
|
await this.getLayersToShowInList();
|
889
|
+
// filter/update the feature(s) if any filter/condition is already applied
|
890
|
+
await this._updateFeatures();
|
824
891
|
// if only one valid layer is present then directly render features list
|
825
892
|
if (this._editableLayerIds?.length === 1) {
|
826
893
|
await this.renderFeaturesList();
|
@@ -922,6 +989,39 @@ const CrowdsourceReporter = class {
|
|
922
989
|
const messages = await locale.getLocaleComponentStrings(this.el);
|
923
990
|
this._translations = messages[0];
|
924
991
|
}
|
992
|
+
/**
|
993
|
+
* Applies a definition expression when floor field and level are available
|
994
|
+
*
|
995
|
+
* @returns boolean
|
996
|
+
* @protected
|
997
|
+
*/
|
998
|
+
_updateFloorDefinitionExpression(layer) {
|
999
|
+
const floorField = layer.floorInfo.floorField;
|
1000
|
+
// update the layer defination expression
|
1001
|
+
const floorExp = `${floorField} = '${this.floorLevel}'`;
|
1002
|
+
const defExp = layer.definitionExpression;
|
1003
|
+
layer.definitionExpression = defExp?.indexOf(this._floorExpression) > -1 ?
|
1004
|
+
defExp.replace(this._floorExpression, floorExp) : floorExp;
|
1005
|
+
this._floorExpression = floorExp;
|
1006
|
+
}
|
1007
|
+
/**
|
1008
|
+
* Gets the form template elements
|
1009
|
+
* @protected
|
1010
|
+
*/
|
1011
|
+
_getFormElements() {
|
1012
|
+
const layer = this._selectedLayer;
|
1013
|
+
const floorField = layer?.floorInfo?.floorField;
|
1014
|
+
if (floorField && this.floorLevel && layer?.formTemplate) {
|
1015
|
+
const formElement = this._formElements.find((elm) => elm.id === layer.id);
|
1016
|
+
if (this._formElements.length === 0 || !formElement) {
|
1017
|
+
this._formElements.push({
|
1018
|
+
id: layer.id,
|
1019
|
+
orgElements: layer.formTemplate.elements,
|
1020
|
+
orgExpressionInfos: layer.formTemplate.expressionInfos
|
1021
|
+
});
|
1022
|
+
}
|
1023
|
+
}
|
1024
|
+
}
|
925
1025
|
/**
|
926
1026
|
* Returns the ids of all OR configured layers that support edits with the update capability
|
927
1027
|
* @param hash each layer item details
|
@@ -939,6 +1039,35 @@ const CrowdsourceReporter = class {
|
|
939
1039
|
return prev;
|
940
1040
|
}, []);
|
941
1041
|
}
|
1042
|
+
/**
|
1043
|
+
* updates the features for layer/feature list
|
1044
|
+
* @protected
|
1045
|
+
*/
|
1046
|
+
async _updateFeatures() {
|
1047
|
+
for (const eachLayerId of this._editableLayerIds) {
|
1048
|
+
const featureLayerView = await mapViewUtils.getFeatureLayerView(this.mapView, eachLayerId);
|
1049
|
+
// In case of show my features add filter for Featurelayerview
|
1050
|
+
await this._showMyFeaturesOnly(featureLayerView);
|
1051
|
+
const floorField = featureLayerView.layer?.floorInfo?.floorField;
|
1052
|
+
if (floorField && this.floorLevel) {
|
1053
|
+
// Update the layer's defination as per selected floor level from map for all editable layers
|
1054
|
+
this._updateFloorDefinitionExpression(featureLayerView.layer);
|
1055
|
+
}
|
1056
|
+
}
|
1057
|
+
}
|
1058
|
+
/**
|
1059
|
+
* Show only loggedIn user's features
|
1060
|
+
* @protected
|
1061
|
+
*/
|
1062
|
+
async _showMyFeaturesOnly(featureLayerView) {
|
1063
|
+
const loggedInUserName = this.mapView.map.portalItem.portal?.credential?.userId;
|
1064
|
+
if (loggedInUserName) {
|
1065
|
+
const creatorField = featureLayerView.layer.editFieldsInfo?.creatorField.toLowerCase();
|
1066
|
+
featureLayerView.filter = this.showMyReportsOnly && creatorField ? new this.FeatureFilter({
|
1067
|
+
where: creatorField + "='" + loggedInUserName + "'"
|
1068
|
+
}) : null;
|
1069
|
+
}
|
1070
|
+
}
|
942
1071
|
/**
|
943
1072
|
* Creates the list of layers to be listed in layer list
|
944
1073
|
* @protected
|
@@ -1026,7 +1155,8 @@ const CrowdsourceReporter = class {
|
|
1026
1155
|
}
|
1027
1156
|
static get watchers() { return {
|
1028
1157
|
"isMobile": ["isMobileWatchHandler"],
|
1029
|
-
"mapView": ["mapViewWatchHandler"]
|
1158
|
+
"mapView": ["mapViewWatchHandler"],
|
1159
|
+
"floorLevel": ["floorLevelWatchHandler"]
|
1030
1160
|
}; }
|
1031
1161
|
};
|
1032
1162
|
CrowdsourceReporter.style = CrowdsourceReporterStyle0;
|