@esri/solutions-components 0.8.8 → 0.8.9

package/dist/collection/components/feature-details/feature-details.js

@@ -0,0 +1,500 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { h } from "@stencil/core";
+import { loadModules } from "../../utils/loadModules";
+export class FeatureDetails {
+    constructor() {
+        /**
+         * string[]: Valid field types for like and dislike
+         */
+        this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"];
+        this.mapView = undefined;
+        this.graphics = undefined;
+        this.reportingOptions = undefined;
+        this._likeFieldAvailable = false;
+        this._likeCount = 0;
+        this._disLikeCount = 0;
+        this._dislikeFieldAvailable = false;
+        this._isLikeBtnClicked = false;
+        this._isDislikeBtnClicked = false;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Called each time the graphics prop is changed
+     */
+    async graphicsWatchHandler() {
+        await this.getCompleteGraphic(this.graphics[0]);
+        this.checkLikeDislikeFields();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    /**
+     * Refresh the features comments which will fetch like, dislike and update the component
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh(graphic) {
+        if (this.isLikeDislikeConfigured(graphic.layer)) {
+            // in case of multiple features selected fetch complete feature and update like dislike for current feature 
+            if (graphic && this.graphics.length > 1) {
+                await this.getCompleteGraphic(graphic);
+                this.checkLikeDislikeFields();
+            }
+        }
+        else {
+            this._likeFieldAvailable = false;
+            this._dislikeFieldAvailable = false;
+        }
+    }
+    /**
+     * Go to the previous feature in the features widget
+     */
+    async back() {
+        void this._infoCard.back();
+    }
+    /**
+     * Go to the next feature in the features widget
+     */
+    async next() {
+        void this._infoCard.next();
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    async toggleListView() {
+        void this._infoCard.toggleListView();
+    }
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._initModules();
+        await this.getCompleteGraphic(this.graphics[0]);
+        this.checkLikeDislikeFields();
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable) &&
+            h("div", { class: 'buttons' }, this._likeFieldAvailable &&
+                h("calcite-button", { appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_b = (_a = this._likeCount) !== null && _a !== void 0 ? _a : this._selectedGraphic.attributes[this._likeField]) !== null && _b !== void 0 ? _b : 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_d = (_c = this._disLikeCount) !== null && _c !== void 0 ? _c : this._selectedGraphic.attributes[this._dislikeField]) !== null && _d !== void 0 ? _d : 0))));
+    }
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [Graphic] = await loadModules([
+            "esri/Graphic"
+        ]);
+        this.Graphic = Graphic;
+    }
+    /**
+     * Get complete graphic with complete attributes
+     * @param graphic selected feature graphic
+     * @protected
+     */
+    async getCompleteGraphic(graphic) {
+        const layer = graphic.layer;
+        const query = layer.createQuery();
+        query.objectIds = [graphic.getObjectId()];
+        const completeGraphic = await layer.queryFeatures(query);
+        this._selectedGraphic = completeGraphic.features[0];
+    }
+    /**
+     * Checks if the layers is configured for like dislike or not
+     * @param selectedLayer Feature layer
+     * @returns boolean
+     * @protected
+     */
+    isLikeDislikeConfigured(selectedLayer) {
+        let likeFieldAvailable = false;
+        let dislikeFieldAvailable = false;
+        // check if reporting options are configured for the current selected feature's layer
+        if (this.reportingOptions && this.reportingOptions[selectedLayer.id]) {
+            //return false if both like and dislike are disabled for the layer
+            if (!this.reportingOptions[selectedLayer.id].like && !this.reportingOptions[selectedLayer.id].dislike) {
+                return false;
+            }
+            const likeField = this.reportingOptions[selectedLayer.id].likeField;
+            const dislikeField = this.reportingOptions[selectedLayer.id].dislikeField;
+            //if both fields are not configured return false
+            if (!likeField && !dislikeField) {
+                return false;
+            }
+            //Check if selected layer have the configured like and dislike field and it is of integer types
+            ;
+            selectedLayer.fields.forEach((eachField) => {
+                if (this._validFieldTypes.indexOf(eachField.type) > -1) {
+                    if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {
+                        likeFieldAvailable = true;
+                    }
+                    else if (eachField.name === dislikeField && this.reportingOptions[selectedLayer.id].dislike) {
+                        dislikeFieldAvailable = true;
+                    }
+                }
+            });
+        }
+        return likeFieldAvailable || dislikeFieldAvailable;
+    }
+    /**
+     * Check if configured like or dislike fields are available in the selected layer
+     * @protected
+     */
+    checkLikeDislikeFields() {
+        this._likeFieldAvailable = false;
+        this._dislikeFieldAvailable = false;
+        this._isLikeBtnClicked = false;
+        this._isDislikeBtnClicked = false;
+        this._likeCount = 0;
+        this._disLikeCount = 0;
+        const selectedLayer = this._selectedGraphic.layer;
+        // check if reporting options are configured for the current selected feature's layer
+        if (this.reportingOptions && this.reportingOptions[selectedLayer.id]) {
+            this._likeField = this.reportingOptions[selectedLayer.id].likeField;
+            this._dislikeField = this.reportingOptions[selectedLayer.id].dislikeField;
+            //if both fields are not found return
+            if (!this._likeField && !this._dislikeField) {
+                return;
+            }
+            //Check if selected layer have the configured like and dislike fields
+            //also, get the current value for like and dislike field from the attributes
+            selectedLayer.fields.forEach((eachField) => {
+                if (this._validFieldTypes.indexOf(eachField.type) > -1) {
+                    if (eachField.name === this._likeField && this.reportingOptions[this._selectedGraphic.layer.id].like) {
+                        this._likeFieldAvailable = true;
+                        this._likeCount = this._selectedGraphic.attributes[eachField.name];
+                    }
+                    else if (eachField.name === this._dislikeField && this.reportingOptions[this._selectedGraphic.layer.id].dislike) {
+                        this._dislikeFieldAvailable = true;
+                        this._disLikeCount = this._selectedGraphic.attributes[eachField.name];
+                    }
+                }
+            });
+            this.getFromLocalStorage();
+        }
+    }
+    /**
+     * On like button click highlight the like button and update the feature
+     * @protected
+     */
+    onLikeButtonClick() {
+        this.loadingStatus.emit(true);
+        if (this._isDislikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].dislike) {
+            this.onDislikeButtonClick();
+        }
+        this._isLikeBtnClicked = !this._isLikeBtnClicked;
+        if (this._isLikeBtnClicked) {
+            this._likeCount++;
+        }
+        else {
+            this._likeCount--;
+        }
+        void this.updateFeaturesLikeDislikeField(this._likeField, this._isLikeBtnClicked);
+    }
+    /**
+     * On dislike button click highlight the dislike button and update the feature
+     * @protected
+     */
+    onDislikeButtonClick() {
+        this.loadingStatus.emit(true);
+        if (this._isLikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].like) {
+            this.onLikeButtonClick();
+        }
+        this._isDislikeBtnClicked = !this._isDislikeBtnClicked;
+        if (this._isDislikeBtnClicked) {
+            this._disLikeCount++;
+        }
+        else {
+            this._disLikeCount--;
+        }
+        void this.updateFeaturesLikeDislikeField(this._dislikeField, this._isDislikeBtnClicked);
+    }
+    /**
+     * Update the feature if user click on like or dislike button
+     * @param fieldName field name of the feature for like or dislike attribute
+     * @param buttonClicked is like or dislike button clicked
+     * @protected
+     */
+    async updateFeaturesLikeDislikeField(fieldName, buttonClicked) {
+        const attributesToUpdate = {};
+        const selectedLayer = this._selectedGraphic.layer;
+        //Increment the value if button is clicked or else decrement it
+        const selectFeatureAttr = this._selectedGraphic;
+        if (buttonClicked) {
+            selectFeatureAttr.attributes[fieldName] = Number(selectFeatureAttr.attributes[fieldName]) + 1;
+        }
+        else {
+            selectFeatureAttr.attributes[fieldName] = Number(selectFeatureAttr.attributes[fieldName]) - 1;
+        }
+        //use the oid and like/dislike field value to update 
+        attributesToUpdate[selectedLayer.objectIdField] = selectFeatureAttr.attributes[selectedLayer.objectIdField];
+        attributesToUpdate[fieldName] = selectFeatureAttr.attributes[fieldName];
+        const newGraphicInstance = new this.Graphic();
+        newGraphicInstance.attributes = attributesToUpdate;
+        // Update the feature attribute in the feature layer
+        const param = { updateFeatures: [newGraphicInstance] };
+        await selectedLayer.applyEdits(param).then(() => {
+            this._selectedGraphic = selectFeatureAttr;
+            //update the current graphics in info card so that, the updated values are reflected in popup content
+            if (this._infoCard) {
+                void this._infoCard.updateCurrentGraphic(this._selectedGraphic);
+            }
+            //store the like dislike value for the current selected graphic in local storage
+            this.setInLocalStorage();
+            this.loadingStatus.emit(false);
+        }, (err) => {
+            this.loadingStatus.emit(false);
+            console.log(err);
+        });
+    }
+    /**
+     * Gets the like/dislike information form local storage and updates the like and dislike button states
+     * @protected
+     */
+    getFromLocalStorage() {
+        const uniqueLayerId = this._selectedGraphic.layer.id;
+        //get the data from local storage and check current feature is liked or disliked 
+        const localStorageUser = localStorage[uniqueLayerId];
+        if (localStorageUser) {
+            const parseArr = JSON.parse(localStorageUser);
+            const res = parseArr.filter((arr) => arr.id === this._selectedGraphic.getObjectId());
+            if (res.length > 0) {
+                this._isLikeBtnClicked = res[0].like;
+                this._isDislikeBtnClicked = res[0].dislike;
+            }
+        }
+    }
+    /**
+     * Sets the like/dislike information for the current selected graphic in local storage
+     * @protected
+     */
+    setInLocalStorage() {
+        const uniqueLayerId = this._selectedGraphic.layer.id;
+        const localStorageInfo = localStorage[uniqueLayerId];
+        let information = [];
+        //if information for the current layer found in local storage update it
+        //else add new information for the current layer in the local storage
+        if (localStorageInfo) {
+            information = JSON.parse(localStorageInfo);
+            const index = information.findIndex((arr) => arr.id === this._selectedGraphic.getObjectId());
+            //if information for current objectid found delete it, so that we always have info for each oid in a layer only once
+            if (index >= 0) {
+                information.splice(index, 1);
+            }
+        }
+        //add the information for current selected graphic
+        information.push({
+            id: this._selectedGraphic.getObjectId(),
+            like: this._isLikeBtnClicked && this._likeCount !== 0,
+            dislike: this._isDislikeBtnClicked && this._disLikeCount !== 0
+        });
+        localStorage.setItem(uniqueLayerId, JSON.stringify(information));
+    }
+    static get is() { return "feature-details"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["feature-details.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["feature-details.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mapView": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "__esri.MapView",
+                    "resolved": "MapView",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html"
+                }
+            },
+            "graphics": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "__esri.Graphic[]",
+                    "resolved": "Graphic[]",
+                    "references": {
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html"
+                }
+            },
+            "reportingOptions": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "IReportingOptions",
+                    "resolved": "IReportingOptions",
+                    "references": {
+                        "IReportingOptions": {
+                            "location": "import",
+                            "path": "../../components",
+                            "id": "src/components.d.ts::IReportingOptions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "IReportingOptions: Key options for reporting"
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_likeFieldAvailable": {},
+            "_likeCount": {},
+            "_disLikeCount": {},
+            "_dislikeFieldAvailable": {},
+            "_isLikeBtnClicked": {},
+            "_isDislikeBtnClicked": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "loadingStatus",
+                "name": "loadingStatus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when like or dislike button is clicked"
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "refresh": {
+                "complexType": {
+                    "signature": "(graphic?: __esri.Graphic) => Promise<void>",
+                    "parameters": [{
+                            "name": "graphic",
+                            "type": "Graphic",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "___esri": {
+                            "location": "global",
+                            "id": "global::___esri"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Refresh the features comments which will fetch like, dislike and update the component",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Promise that resolves when the operation is complete"
+                        }]
+                }
+            },
+            "back": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to the previous feature in the features widget",
+                    "tags": []
+                }
+            },
+            "next": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Go to the next feature in the features widget",
+                    "tags": []
+                }
+            },
+            "toggleListView": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggle the visibility of the features list view",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "graphics",
+                "methodName": "graphicsWatchHandler"
+            }];
+    }
+}

package/dist/collection/components/feature-details/test/feature-details.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { newE2EPage } from "@stencil/core/testing";
+xdescribe('feature-details', () => {
+    it('renders', async () => {
+        const page = await newE2EPage();
+        await page.setContent('<feature-details></feature-details>');
+        const element = await page.find('feature-details');
+        expect(element).toHaveClass('hydrated');
+    });
+});

package/dist/collection/components/feature-details/test/feature-details.spec.js

@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { FeatureDetails } from "../feature-details";
+xdescribe('feature-details', () => {
+    it('renders', async () => {
+        const page = await newSpecPage({
+            components: [FeatureDetails],
+            html: `<feature-details></feature-details>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <feature-details>
+        <mock:shadow-root>
+          <slot></slot>
+        </mock:shadow-root>
+      </feature-details>
+    `);
+    });
+});

package/dist/collection/components/feature-list/feature-list.js

@@ -148,7 +148,20 @@ export class FeatureList {
             const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
             this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
         }
-        this.featureSelect.emit(selectedFeature);
+        await this.emitSelectedFeature(selectedFeature);
+    }
+    /**
+     * Emit selected feature with its complete graphics and attributes
+     * @param graphic selected feature graphic
+     * @protected
+     */
+    async emitSelectedFeature(graphic) {
+        const layer = graphic.layer;
+        const query = layer.createQuery();
+        query.returnGeometry = true;
+        query.objectIds = [graphic.getObjectId()];
+        const completeGraphic = await layer.queryFeatures(query);
+        this.featureSelect.emit(completeGraphic.features[0]);
     }
     /**
      * On feature hover in feature list highlight the feature on the map

package/dist/collection/components/info-card/info-card.css

@@ -40,12 +40,16 @@
   overflow: auto;
 }
 
+.feature-node {
+  position: relative !important;
+}
+
 .feature-node .esri-features__footer {
   display: none !important;
 }
 
 .button-container {
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
 }
 
@@ -53,10 +57,6 @@
   border-top: 1px solid var(--calcite-color-border-1);
 }
 
-.min-width-100 {
-  min-width: 100px;
-}
-
 .width-100 {
   width: 100%;
 }
@@ -95,3 +95,13 @@
 .border-width-0 {
   border-width: 0px;
 }
+
+.pagination-action {
+  position: relative;
+  left: 3px;
+}
+
+.pagination-count {
+  color: var(--calcite-color-brand);
+  border-bottom: 1px solid var(--calcite-color-brand);
+}