@esri/solutions-components 0.8.33 → 0.8.35
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/basemap-gallery_7.cjs.entry.js +1 -17
- package/dist/cjs/calcite-flow_6.cjs.entry.js +22 -19
- package/dist/cjs/crowdsource-reporter.cjs.entry.js +29 -6
- package/dist/collection/components/create-feature/create-feature.js +13 -12
- package/dist/collection/components/create-related-feature/create-related-feature.js +23 -3
- package/dist/collection/components/crowdsource-reporter/crowdsource-reporter.js +31 -8
- package/dist/collection/components/feature-details/feature-details.js +0 -4
- package/dist/collection/components/floor-filter/floor-filter.js +1 -17
- package/dist/collection/demos/crowdsource-reporter.html +32 -8
- package/dist/components/create-feature2.js +13 -12
- package/dist/components/create-related-feature2.js +9 -3
- package/dist/components/crowdsource-reporter.js +29 -6
- package/dist/components/feature-details2.js +0 -4
- package/dist/components/floor-filter2.js +1 -17
- package/dist/esm/basemap-gallery_7.entry.js +1 -17
- package/dist/esm/calcite-flow_6.entry.js +22 -19
- package/dist/esm/crowdsource-reporter.entry.js +29 -6
- package/dist/solutions-components/demos/crowdsource-reporter.html +32 -8
- package/dist/solutions-components/p-0ce36a4a.entry.js +17 -0
- package/dist/solutions-components/p-5c5e3745.entry.js +6 -0
- package/dist/solutions-components/p-6e260ca3.entry.js +6 -0
- package/dist/solutions-components/solutions-components.esm.js +1 -1
- package/dist/types/components/create-related-feature/create-related-feature.d.ts +4 -0
- package/dist/types/components/crowdsource-reporter/crowdsource-reporter.d.ts +16 -3
- package/dist/types/components.d.ts +7 -2
- package/dist/types/preact.d.ts +2 -1
- package/package.json +1 -1
- package/dist/solutions-components/p-21cbb55d.entry.js +0 -6
- package/dist/solutions-components/p-4ae34862.entry.js +0 -17
- package/dist/solutions-components/p-90c3bc54.entry.js +0 -6
@@ -140,17 +140,12 @@ const FloorFilter = class {
|
|
140
140
|
* Watch for changes to the mapView and re-init the floor filter
|
141
141
|
*/
|
142
142
|
async mapViewWatchHandler() {
|
143
|
-
console.log("mapViewWatchHandler");
|
144
|
-
console.log(`this.mapView: ${this.mapView}`);
|
145
143
|
await this._initFloorFilter(this.mapView);
|
146
144
|
}
|
147
145
|
/**
|
148
146
|
* Watch for changes to the enabled property and re-init or destroy the floor filter
|
149
147
|
*/
|
150
148
|
async enabledWatchHandler() {
|
151
|
-
console.log("enabledWatchHandler");
|
152
|
-
console.log(`this.enabled: ${this.enabled}`);
|
153
|
-
console.log(`this.mapView: ${this.mapView}`);
|
154
149
|
if (this.enabled) {
|
155
150
|
await this._initFloorFilter(this.mapView);
|
156
151
|
}
|
@@ -173,9 +168,7 @@ const FloorFilter = class {
|
|
173
168
|
* Renders the component.
|
174
169
|
*/
|
175
170
|
render() {
|
176
|
-
|
177
|
-
console.log(`this._floorFilterElement: ${this._floorFilterElement}`);
|
178
|
-
return (index.h(index.Host, { key: '01b71c71af2a183b85c8620c338512fd338f19ef' }, index.h("div", { key: '752d397c6e3b6a2257d0a8a05051ed821eca4b94', ref: (el) => { this._floorFilterElement = el; } })));
|
171
|
+
return (index.h(index.Host, { key: 'c80a8d46fb48f3789d9fa09c2400faad49e2e236' }, index.h("div", { key: '82919a3ba061a17c8aeaa0d2f6f4f13bc428b519', ref: (el) => { this._floorFilterElement = el; } })));
|
179
172
|
}
|
180
173
|
//--------------------------------------------------------------------------
|
181
174
|
//
|
@@ -203,7 +196,6 @@ const FloorFilter = class {
|
|
203
196
|
* @protected
|
204
197
|
*/
|
205
198
|
_destroyWidget() {
|
206
|
-
console.log("_destroyWidget");
|
207
199
|
if (this.floorFilterWidget) {
|
208
200
|
this.floorFilterWidget.destroy();
|
209
201
|
this.floorFilterWidget = undefined;
|
@@ -218,7 +210,6 @@ const FloorFilter = class {
|
|
218
210
|
* @protected
|
219
211
|
*/
|
220
212
|
_initContainer() {
|
221
|
-
console.log("_initContainer");
|
222
213
|
this._destroyWidget();
|
223
214
|
this._floorFilterElement = document.createElement("div");
|
224
215
|
}
|
@@ -226,16 +217,9 @@ const FloorFilter = class {
|
|
226
217
|
* Initialize the floor filter or reset the current view if it already exists
|
227
218
|
*/
|
228
219
|
async _initFloorFilter(view) {
|
229
|
-
console.log("_initFloorFilter");
|
230
220
|
const webMap = view === null || view === void 0 ? void 0 : view.map;
|
231
221
|
await webMap.when(() => {
|
232
222
|
var _a, _b, _c;
|
233
|
-
console.log("webMap.when");
|
234
|
-
console.log("_initFloorFilter");
|
235
|
-
console.log(`view: ${view}`);
|
236
|
-
console.log(`this.enabled: ${this.enabled}`);
|
237
|
-
console.log(`this.FloorFilter: ${this.FloorFilter}`);
|
238
|
-
console.log(`webMap?.floorInfo: ${webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo}`);
|
239
223
|
if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
|
240
224
|
this._initContainer();
|
241
225
|
this.floorFilterWidget = new this.FloorFilter({
|
@@ -522,14 +522,23 @@ const CreateFeature = class {
|
|
522
522
|
}
|
523
523
|
});
|
524
524
|
this._editor.viewModel.addHandles(handle);
|
525
|
+
//Add handle to watch featureFormViewModel ready state
|
526
|
+
const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
|
527
|
+
if (state === 'ready') {
|
528
|
+
this._showSearchWidget = false;
|
529
|
+
this.progressStatus.emit(1);
|
530
|
+
this.drawComplete.emit();
|
531
|
+
}
|
532
|
+
});
|
533
|
+
this._editor.viewModel.addHandles(formHandle);
|
525
534
|
//Add handle to watch editor viewmodel state and then show the search widget
|
526
|
-
const
|
535
|
+
const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
|
527
536
|
if (state === 'creating-features') {
|
528
537
|
this._editorLoading = true;
|
529
538
|
this._showSearchWidget = true;
|
530
539
|
}
|
531
540
|
});
|
532
|
-
this._editor.viewModel.addHandles(
|
541
|
+
this._editor.viewModel.addHandles(createFeatureHandle);
|
533
542
|
}
|
534
543
|
/**
|
535
544
|
* Start creating the feature
|
@@ -547,14 +556,6 @@ const CreateFeature = class {
|
|
547
556
|
setTimeout(() => {
|
548
557
|
//on form submit
|
549
558
|
this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
|
550
|
-
//on sketch complete emit the event
|
551
|
-
this._editor.viewModel.sketchViewModel.on("create", (evt) => {
|
552
|
-
if (evt.state === "complete") {
|
553
|
-
this._showSearchWidget = false;
|
554
|
-
this.progressStatus.emit(1);
|
555
|
-
this.drawComplete.emit();
|
556
|
-
}
|
557
|
-
});
|
558
559
|
//hides the header and footer elements in editor widget
|
559
560
|
this.hideEditorsElements().then(() => {
|
560
561
|
resolve({});
|
@@ -668,13 +669,13 @@ const CreateFeature = class {
|
|
668
669
|
* @protected
|
669
670
|
*/
|
670
671
|
async hideEditorsElements() {
|
671
|
-
var _a;
|
672
|
+
var _a, _b;
|
672
673
|
if (!this.customizeSubmit) {
|
673
674
|
return;
|
674
675
|
}
|
675
676
|
await this.timeout(700);
|
676
677
|
//hides the header and footer on the featureForm
|
677
|
-
(_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null ||
|
678
|
+
(_b = (_a = this.el.querySelector('.esri-editor')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-flow-item')) === null || _b === void 0 ? void 0 : _b.forEach((flowItem) => {
|
678
679
|
var _a, _b, _c, _d, _e;
|
679
680
|
const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
|
680
681
|
//hide the header
|
@@ -742,6 +743,7 @@ const CreateRelatedFeature = class {
|
|
742
743
|
this.success = index.createEvent(this, "success", 7);
|
743
744
|
this.fail = index.createEvent(this, "fail", 7);
|
744
745
|
this.isActionPending = index.createEvent(this, "isActionPending", 7);
|
746
|
+
this.formReady = index.createEvent(this, "formReady", 7);
|
745
747
|
/**
|
746
748
|
* boolean: Flag to maintain form submission using submit button
|
747
749
|
*/
|
@@ -834,7 +836,7 @@ const CreateRelatedFeature = class {
|
|
834
836
|
}
|
835
837
|
render() {
|
836
838
|
const loaderClass = this._editorLoading ? "" : "display-none";
|
837
|
-
return (index.h("calcite-loader", { key: '
|
839
|
+
return (index.h("calcite-loader", { key: '5302b1166a175b0605604792cd40b9d3fbfabd02', class: loaderClass, label: "", scale: "s" }));
|
838
840
|
}
|
839
841
|
/**
|
840
842
|
* StencilJS: Called once just after the component is fully loaded and the first render() occurs.
|
@@ -882,6 +884,13 @@ const CreateRelatedFeature = class {
|
|
882
884
|
}
|
883
885
|
});
|
884
886
|
this._editor.viewModel.addHandles(attachmentHandle);
|
887
|
+
//Add handle to watch featureFormViewModel ready state
|
888
|
+
const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
|
889
|
+
if (state === 'ready') {
|
890
|
+
this.formReady.emit();
|
891
|
+
}
|
892
|
+
});
|
893
|
+
this._editor.viewModel.addHandles(formHandle);
|
885
894
|
}
|
886
895
|
/**
|
887
896
|
* Start creating the feature feature form
|
@@ -907,8 +916,6 @@ const CreateRelatedFeature = class {
|
|
907
916
|
await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
|
908
917
|
//hides the header and footer elements in editor widget
|
909
918
|
await this.hideEditorsElements();
|
910
|
-
// Emit an event to show submit cancel buttons
|
911
|
-
this.isActionPending.emit(false);
|
912
919
|
this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
|
913
920
|
}
|
914
921
|
/**
|
@@ -1316,10 +1323,6 @@ const FeatureDetails = class {
|
|
1316
1323
|
const param = { updateFeatures: [newGraphicInstance] };
|
1317
1324
|
await selectedLayer.applyEdits(param).then(() => {
|
1318
1325
|
this._selectedGraphic = selectFeatureAttr;
|
1319
|
-
//update the current graphics in info card so that, the updated values are reflected in popup content
|
1320
|
-
if (this._infoCard) {
|
1321
|
-
void this._infoCard.updateCurrentGraphic(this._selectedGraphic);
|
1322
|
-
}
|
1323
1326
|
//store the like dislike value for the current selected graphic in local storage
|
1324
1327
|
this.setInLocalStorage();
|
1325
1328
|
this._updating = false;
|
@@ -113,7 +113,7 @@ const CrowdsourceReporter = class {
|
|
113
113
|
*/
|
114
114
|
render() {
|
115
115
|
const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
|
116
|
-
return (index.h(index.Host, { key: '
|
116
|
+
return (index.h(index.Host, { key: 'e512e2693a586f8a6da7bcfa171feb60da26aee3' }, this._reportSubmitted && index.h("calcite-alert", { key: 'e5805ba948f1dc43eba2a78716af452cf71a8222', "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: '95b9accf1f09186c09c81cfb02a8939c4869ae8d', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && index.h("calcite-alert", { key: 'cab7f0e0f0d882612b4fa6f00799be9870aea6c5', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, index.h("div", { key: 'b9453672d85e26cf7bdeae0923cd36020d259d49', slot: "title" }, this._translations.error), index.h("div", { key: '5084315857bc88b8f80aaa411ac3fd5e4493e918', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && index.h("calcite-alert", { key: '62b7d9818913c3331ca9c8e4ed23c7f0c48a7946', "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: '5f18444fd375657db0c2a403cb453ead75536181', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && index.h("calcite-alert", { key: '732f08960095fc9fefcc79fc8df387a5a4c3f781', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, index.h("div", { key: '16415430cf33ce53c0d49cab19dce2c3e34257d6', slot: "title" }, this._translations.error), index.h("div", { key: '83e5918e00902bd49512165f4aa62813cecb4619', slot: "message" }, this._translations.addingCommentFailedMsg)), index.h("div", { key: '3e9dadd880319708e64e717ba7e7adaddf97b935' }, index.h("calcite-shell", { key: 'c72664d361b3904bc191668207c3ad31ff1f98c9', "content-behind": true }, this._getReporter())), this.filterModal()));
|
117
117
|
}
|
118
118
|
//--------------------------------------------------------------------------
|
119
119
|
//
|
@@ -290,7 +290,7 @@ const CrowdsourceReporter = class {
|
|
290
290
|
* @protected
|
291
291
|
*/
|
292
292
|
getFeatureCreateFlowItem() {
|
293
|
-
return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), 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, mapView: this.mapView, onDrawComplete: this.
|
293
|
+
return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), 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, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
|
294
294
|
}
|
295
295
|
/**
|
296
296
|
* Update the progress bar status when editor panel changes
|
@@ -301,10 +301,12 @@ const CrowdsourceReporter = class {
|
|
301
301
|
this._updatedProgressBarStatus = evt.detail;
|
302
302
|
}
|
303
303
|
/**
|
304
|
-
* When
|
304
|
+
* When form is ready then show submit and cancel button
|
305
305
|
* @protected
|
306
306
|
*/
|
307
|
-
|
307
|
+
onFormReady() {
|
308
|
+
// update the form state when form is ready
|
309
|
+
this.updateFormState(true);
|
308
310
|
this._showSubmitCancelButton = true;
|
309
311
|
}
|
310
312
|
/**
|
@@ -331,6 +333,10 @@ const CrowdsourceReporter = class {
|
|
331
333
|
if (this._createFeature) {
|
332
334
|
void this._createFeature.close();
|
333
335
|
}
|
336
|
+
//on back form will be closed, so update the form state
|
337
|
+
if (this.isFormOpen) {
|
338
|
+
this.updateFormState(false);
|
339
|
+
}
|
334
340
|
this.backFromSelectedPanel();
|
335
341
|
}
|
336
342
|
/**
|
@@ -351,6 +357,10 @@ const CrowdsourceReporter = class {
|
|
351
357
|
void this._createRelatedFeature.close();
|
352
358
|
this._showSubmitCancelButton = false;
|
353
359
|
}
|
360
|
+
//on back form will be closed, so update the form state
|
361
|
+
if (this.isFormOpen) {
|
362
|
+
this.updateFormState(false);
|
363
|
+
}
|
354
364
|
this.backFromSelectedPanel();
|
355
365
|
}
|
356
366
|
/**
|
@@ -367,6 +377,10 @@ const CrowdsourceReporter = class {
|
|
367
377
|
* @protected
|
368
378
|
*/
|
369
379
|
onReportSubmitted() {
|
380
|
+
//on report submit form will be closed, so update the form state
|
381
|
+
if (this.isFormOpen) {
|
382
|
+
this.updateFormState(false);
|
383
|
+
}
|
370
384
|
this._reportSubmitted = true;
|
371
385
|
void this.navigateToHomePage();
|
372
386
|
}
|
@@ -503,7 +517,16 @@ const CrowdsourceReporter = class {
|
|
503
517
|
*/
|
504
518
|
toggleSidePanel() {
|
505
519
|
this._sidePanelCollapsed = !this._sidePanelCollapsed;
|
506
|
-
this.togglePanel.emit(this._sidePanelCollapsed);
|
520
|
+
this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
|
521
|
+
}
|
522
|
+
/**
|
523
|
+
* Hide map when form open in case of mobile
|
524
|
+
* @param isFormOpen updated form state
|
525
|
+
* @protected
|
526
|
+
*/
|
527
|
+
updateFormState(isFormOpen) {
|
528
|
+
this.isFormOpen = isFormOpen;
|
529
|
+
this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
|
507
530
|
}
|
508
531
|
/**
|
509
532
|
* When feature is selected from list store that and show feature details
|
@@ -598,7 +621,7 @@ const CrowdsourceReporter = class {
|
|
598
621
|
* @returns Node
|
599
622
|
*/
|
600
623
|
getAddCommentFlowItem() {
|
601
|
-
return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), index.h("calcite-panel", null, index.h("create-related-feature", { customizeSubmit: true, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
|
624
|
+
return (index.h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), index.h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && index.h("div", { class: "width-full", slot: "footer" }, index.h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), index.h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), index.h("calcite-panel", null, index.h("create-related-feature", { customizeSubmit: true, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
|
602
625
|
}
|
603
626
|
/**
|
604
627
|
* Sets the selected features and updates the first feature as the current selected feature
|
@@ -194,14 +194,23 @@ export class CreateFeature {
|
|
194
194
|
}
|
195
195
|
});
|
196
196
|
this._editor.viewModel.addHandles(handle);
|
197
|
+
//Add handle to watch featureFormViewModel ready state
|
198
|
+
const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
|
199
|
+
if (state === 'ready') {
|
200
|
+
this._showSearchWidget = false;
|
201
|
+
this.progressStatus.emit(1);
|
202
|
+
this.drawComplete.emit();
|
203
|
+
}
|
204
|
+
});
|
205
|
+
this._editor.viewModel.addHandles(formHandle);
|
197
206
|
//Add handle to watch editor viewmodel state and then show the search widget
|
198
|
-
const
|
207
|
+
const createFeatureHandle = this.reactiveUtils.watch(() => this._editor.viewModel.state, (state) => {
|
199
208
|
if (state === 'creating-features') {
|
200
209
|
this._editorLoading = true;
|
201
210
|
this._showSearchWidget = true;
|
202
211
|
}
|
203
212
|
});
|
204
|
-
this._editor.viewModel.addHandles(
|
213
|
+
this._editor.viewModel.addHandles(createFeatureHandle);
|
205
214
|
}
|
206
215
|
/**
|
207
216
|
* Start creating the feature
|
@@ -219,14 +228,6 @@ export class CreateFeature {
|
|
219
228
|
setTimeout(() => {
|
220
229
|
//on form submit
|
221
230
|
this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
|
222
|
-
//on sketch complete emit the event
|
223
|
-
this._editor.viewModel.sketchViewModel.on("create", (evt) => {
|
224
|
-
if (evt.state === "complete") {
|
225
|
-
this._showSearchWidget = false;
|
226
|
-
this.progressStatus.emit(1);
|
227
|
-
this.drawComplete.emit();
|
228
|
-
}
|
229
|
-
});
|
230
231
|
//hides the header and footer elements in editor widget
|
231
232
|
this.hideEditorsElements().then(() => {
|
232
233
|
resolve({});
|
@@ -340,13 +341,13 @@ export class CreateFeature {
|
|
340
341
|
* @protected
|
341
342
|
*/
|
342
343
|
async hideEditorsElements() {
|
343
|
-
var _a;
|
344
|
+
var _a, _b;
|
344
345
|
if (!this.customizeSubmit) {
|
345
346
|
return;
|
346
347
|
}
|
347
348
|
await this.timeout(700);
|
348
349
|
//hides the header and footer on the featureForm
|
349
|
-
(_a = this.el.querySelector('.esri-editor').querySelectorAll('calcite-flow-item')) === null ||
|
350
|
+
(_b = (_a = this.el.querySelector('.esri-editor')) === null || _a === void 0 ? void 0 : _a.querySelectorAll('calcite-flow-item')) === null || _b === void 0 ? void 0 : _b.forEach((flowItem) => {
|
350
351
|
var _a, _b, _c, _d, _e;
|
351
352
|
const article = (_c = (_b = (_a = flowItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('calcite-panel')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('article');
|
352
353
|
//hide the header
|
@@ -114,7 +114,7 @@ export class CreateRelatedFeature {
|
|
114
114
|
}
|
115
115
|
render() {
|
116
116
|
const loaderClass = this._editorLoading ? "" : "display-none";
|
117
|
-
return (h("calcite-loader", { key: '
|
117
|
+
return (h("calcite-loader", { key: '5302b1166a175b0605604792cd40b9d3fbfabd02', class: loaderClass, label: "", scale: "s" }));
|
118
118
|
}
|
119
119
|
/**
|
120
120
|
* StencilJS: Called once just after the component is fully loaded and the first render() occurs.
|
@@ -162,6 +162,13 @@ export class CreateRelatedFeature {
|
|
162
162
|
}
|
163
163
|
});
|
164
164
|
this._editor.viewModel.addHandles(attachmentHandle);
|
165
|
+
//Add handle to watch featureFormViewModel ready state
|
166
|
+
const formHandle = this.reactiveUtils.watch(() => { var _a; return (_a = this._editor.viewModel.featureFormViewModel) === null || _a === void 0 ? void 0 : _a.state; }, (state) => {
|
167
|
+
if (state === 'ready') {
|
168
|
+
this.formReady.emit();
|
169
|
+
}
|
170
|
+
});
|
171
|
+
this._editor.viewModel.addHandles(formHandle);
|
165
172
|
}
|
166
173
|
/**
|
167
174
|
* Start creating the feature feature form
|
@@ -187,8 +194,6 @@ export class CreateRelatedFeature {
|
|
187
194
|
await this._editor.startCreateFeaturesWorkflowAtFeatureCreation(creationInfo);
|
188
195
|
//hides the header and footer elements in editor widget
|
189
196
|
await this.hideEditorsElements();
|
190
|
-
// Emit an event to show submit cancel buttons
|
191
|
-
this.isActionPending.emit(false);
|
192
197
|
this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
|
193
198
|
}
|
194
199
|
/**
|
@@ -422,6 +427,21 @@ export class CreateRelatedFeature {
|
|
422
427
|
"resolved": "boolean",
|
423
428
|
"references": {}
|
424
429
|
}
|
430
|
+
}, {
|
431
|
+
"method": "formReady",
|
432
|
+
"name": "formReady",
|
433
|
+
"bubbles": true,
|
434
|
+
"cancelable": true,
|
435
|
+
"composed": true,
|
436
|
+
"docs": {
|
437
|
+
"tags": [],
|
438
|
+
"text": "Emitted on demand when form is ready"
|
439
|
+
},
|
440
|
+
"complexType": {
|
441
|
+
"original": "void",
|
442
|
+
"resolved": "void",
|
443
|
+
"references": {}
|
444
|
+
}
|
425
445
|
}];
|
426
446
|
}
|
427
447
|
static get methods() {
|
@@ -118,7 +118,7 @@ export class CrowdsourceReporter {
|
|
118
118
|
*/
|
119
119
|
render() {
|
120
120
|
const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
|
121
|
-
return (h(Host, { key: '
|
121
|
+
return (h(Host, { key: 'e512e2693a586f8a6da7bcfa171feb60da26aee3' }, this._reportSubmitted && h("calcite-alert", { key: 'e5805ba948f1dc43eba2a78716af452cf71a8222', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '95b9accf1f09186c09c81cfb02a8939c4869ae8d', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'cab7f0e0f0d882612b4fa6f00799be9870aea6c5', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'b9453672d85e26cf7bdeae0923cd36020d259d49', slot: "title" }, this._translations.error), h("div", { key: '5084315857bc88b8f80aaa411ac3fd5e4493e918', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '62b7d9818913c3331ca9c8e4ed23c7f0c48a7946', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '5f18444fd375657db0c2a403cb453ead75536181', slot: "message" }, this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '732f08960095fc9fefcc79fc8df387a5a4c3f781', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '16415430cf33ce53c0d49cab19dce2c3e34257d6', slot: "title" }, this._translations.error), h("div", { key: '83e5918e00902bd49512165f4aa62813cecb4619', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '3e9dadd880319708e64e717ba7e7adaddf97b935' }, h("calcite-shell", { key: 'c72664d361b3904bc191668207c3ad31ff1f98c9', "content-behind": true }, this._getReporter())), this.filterModal()));
|
122
122
|
}
|
123
123
|
//--------------------------------------------------------------------------
|
124
124
|
//
|
@@ -295,7 +295,7 @@ export class CrowdsourceReporter {
|
|
295
295
|
* @protected
|
296
296
|
*/
|
297
297
|
getFeatureCreateFlowItem() {
|
298
|
-
return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.
|
298
|
+
return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("calcite-notice", { class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { slot: "message" }, this._translations.featureEditFormInfoMsg)), h("create-feature", { customizeSubmit: true, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId }))));
|
299
299
|
}
|
300
300
|
/**
|
301
301
|
* Update the progress bar status when editor panel changes
|
@@ -306,10 +306,12 @@ export class CrowdsourceReporter {
|
|
306
306
|
this._updatedProgressBarStatus = evt.detail;
|
307
307
|
}
|
308
308
|
/**
|
309
|
-
* When
|
309
|
+
* When form is ready then show submit and cancel button
|
310
310
|
* @protected
|
311
311
|
*/
|
312
|
-
|
312
|
+
onFormReady() {
|
313
|
+
// update the form state when form is ready
|
314
|
+
this.updateFormState(true);
|
313
315
|
this._showSubmitCancelButton = true;
|
314
316
|
}
|
315
317
|
/**
|
@@ -336,6 +338,10 @@ export class CrowdsourceReporter {
|
|
336
338
|
if (this._createFeature) {
|
337
339
|
void this._createFeature.close();
|
338
340
|
}
|
341
|
+
//on back form will be closed, so update the form state
|
342
|
+
if (this.isFormOpen) {
|
343
|
+
this.updateFormState(false);
|
344
|
+
}
|
339
345
|
this.backFromSelectedPanel();
|
340
346
|
}
|
341
347
|
/**
|
@@ -356,6 +362,10 @@ export class CrowdsourceReporter {
|
|
356
362
|
void this._createRelatedFeature.close();
|
357
363
|
this._showSubmitCancelButton = false;
|
358
364
|
}
|
365
|
+
//on back form will be closed, so update the form state
|
366
|
+
if (this.isFormOpen) {
|
367
|
+
this.updateFormState(false);
|
368
|
+
}
|
359
369
|
this.backFromSelectedPanel();
|
360
370
|
}
|
361
371
|
/**
|
@@ -372,6 +382,10 @@ export class CrowdsourceReporter {
|
|
372
382
|
* @protected
|
373
383
|
*/
|
374
384
|
onReportSubmitted() {
|
385
|
+
//on report submit form will be closed, so update the form state
|
386
|
+
if (this.isFormOpen) {
|
387
|
+
this.updateFormState(false);
|
388
|
+
}
|
375
389
|
this._reportSubmitted = true;
|
376
390
|
void this.navigateToHomePage();
|
377
391
|
}
|
@@ -508,7 +522,16 @@ export class CrowdsourceReporter {
|
|
508
522
|
*/
|
509
523
|
toggleSidePanel() {
|
510
524
|
this._sidePanelCollapsed = !this._sidePanelCollapsed;
|
511
|
-
this.togglePanel.emit(this._sidePanelCollapsed);
|
525
|
+
this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
|
526
|
+
}
|
527
|
+
/**
|
528
|
+
* Hide map when form open in case of mobile
|
529
|
+
* @param isFormOpen updated form state
|
530
|
+
* @protected
|
531
|
+
*/
|
532
|
+
updateFormState(isFormOpen) {
|
533
|
+
this.isFormOpen = isFormOpen;
|
534
|
+
this.togglePanel.emit({ panelState: this._sidePanelCollapsed, isFormOpen: this.isFormOpen });
|
512
535
|
}
|
513
536
|
/**
|
514
537
|
* When feature is selected from list store that and show feature details
|
@@ -603,7 +626,7 @@ export class CrowdsourceReporter {
|
|
603
626
|
* @returns Node
|
604
627
|
*/
|
605
628
|
getAddCommentFlowItem() {
|
606
|
-
return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
|
629
|
+
return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
|
607
630
|
}
|
608
631
|
/**
|
609
632
|
* Sets the selected features and updates the first feature as the current selected feature
|
@@ -1425,8 +1448,8 @@ export class CrowdsourceReporter {
|
|
1425
1448
|
"text": "Emitted when toggle panel button is clicked in reporter"
|
1426
1449
|
},
|
1427
1450
|
"complexType": {
|
1428
|
-
"original": "boolean",
|
1429
|
-
"resolved": "boolean",
|
1451
|
+
"original": "{panelState: boolean, isFormOpen: boolean}",
|
1452
|
+
"resolved": "{ panelState: boolean; isFormOpen: boolean; }",
|
1430
1453
|
"references": {}
|
1431
1454
|
}
|
1432
1455
|
}];
|
@@ -329,10 +329,6 @@ export class FeatureDetails {
|
|
329
329
|
const param = { updateFeatures: [newGraphicInstance] };
|
330
330
|
await selectedLayer.applyEdits(param).then(() => {
|
331
331
|
this._selectedGraphic = selectFeatureAttr;
|
332
|
-
//update the current graphics in info card so that, the updated values are reflected in popup content
|
333
|
-
if (this._infoCard) {
|
334
|
-
void this._infoCard.updateCurrentGraphic(this._selectedGraphic);
|
335
|
-
}
|
336
332
|
//store the like dislike value for the current selected graphic in local storage
|
337
333
|
this.setInLocalStorage();
|
338
334
|
this._updating = false;
|
@@ -35,17 +35,12 @@ export class FloorFilter {
|
|
35
35
|
* Watch for changes to the mapView and re-init the floor filter
|
36
36
|
*/
|
37
37
|
async mapViewWatchHandler() {
|
38
|
-
console.log("mapViewWatchHandler");
|
39
|
-
console.log(`this.mapView: ${this.mapView}`);
|
40
38
|
await this._initFloorFilter(this.mapView);
|
41
39
|
}
|
42
40
|
/**
|
43
41
|
* Watch for changes to the enabled property and re-init or destroy the floor filter
|
44
42
|
*/
|
45
43
|
async enabledWatchHandler() {
|
46
|
-
console.log("enabledWatchHandler");
|
47
|
-
console.log(`this.enabled: ${this.enabled}`);
|
48
|
-
console.log(`this.mapView: ${this.mapView}`);
|
49
44
|
if (this.enabled) {
|
50
45
|
await this._initFloorFilter(this.mapView);
|
51
46
|
}
|
@@ -68,9 +63,7 @@ export class FloorFilter {
|
|
68
63
|
* Renders the component.
|
69
64
|
*/
|
70
65
|
render() {
|
71
|
-
|
72
|
-
console.log(`this._floorFilterElement: ${this._floorFilterElement}`);
|
73
|
-
return (h(Host, { key: '01b71c71af2a183b85c8620c338512fd338f19ef' }, h("div", { key: '752d397c6e3b6a2257d0a8a05051ed821eca4b94', ref: (el) => { this._floorFilterElement = el; } })));
|
66
|
+
return (h(Host, { key: 'c80a8d46fb48f3789d9fa09c2400faad49e2e236' }, h("div", { key: '82919a3ba061a17c8aeaa0d2f6f4f13bc428b519', ref: (el) => { this._floorFilterElement = el; } })));
|
74
67
|
}
|
75
68
|
//--------------------------------------------------------------------------
|
76
69
|
//
|
@@ -98,7 +91,6 @@ export class FloorFilter {
|
|
98
91
|
* @protected
|
99
92
|
*/
|
100
93
|
_destroyWidget() {
|
101
|
-
console.log("_destroyWidget");
|
102
94
|
if (this.floorFilterWidget) {
|
103
95
|
this.floorFilterWidget.destroy();
|
104
96
|
this.floorFilterWidget = undefined;
|
@@ -113,7 +105,6 @@ export class FloorFilter {
|
|
113
105
|
* @protected
|
114
106
|
*/
|
115
107
|
_initContainer() {
|
116
|
-
console.log("_initContainer");
|
117
108
|
this._destroyWidget();
|
118
109
|
this._floorFilterElement = document.createElement("div");
|
119
110
|
}
|
@@ -121,16 +112,9 @@ export class FloorFilter {
|
|
121
112
|
* Initialize the floor filter or reset the current view if it already exists
|
122
113
|
*/
|
123
114
|
async _initFloorFilter(view) {
|
124
|
-
console.log("_initFloorFilter");
|
125
115
|
const webMap = view === null || view === void 0 ? void 0 : view.map;
|
126
116
|
await webMap.when(() => {
|
127
117
|
var _a, _b, _c;
|
128
|
-
console.log("webMap.when");
|
129
|
-
console.log("_initFloorFilter");
|
130
|
-
console.log(`view: ${view}`);
|
131
|
-
console.log(`this.enabled: ${this.enabled}`);
|
132
|
-
console.log(`this.FloorFilter: ${this.FloorFilter}`);
|
133
|
-
console.log(`webMap?.floorInfo: ${webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo}`);
|
134
118
|
if (view && this.enabled && this.FloorFilter && (webMap === null || webMap === void 0 ? void 0 : webMap.floorInfo)) {
|
135
119
|
this._initContainer();
|
136
120
|
this.floorFilterWidget = new this.FloorFilter({
|