@esri/solutions-components 0.10.12 → 0.10.13
Sign up to get free protection for your applications and to get access to all the features.
- 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;
|