@esri/solutions-components 0.0.2 → 0.0.4

package/dist/collection/components/solution-spatial-ref/solution-spatial-ref.js

@@ -18,11 +18,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from '@stencil/core';
 import '@esri/calcite-components';
 import { wkids } from './spatialreferences';
 import state from '../../utils/editStore';
-import { getProp, nodeListToArray } from '../../utils/common';
+import { nodeListToArray } from '../../utils/common';
 export class SolutionSpatialRef {
   //--------------------------------------------------------------------------
   //
@@ -40,6 +40,11 @@ export class SolutionSpatialRef {
     */
     this.defaultWkid = 102100;
     /**
+    * Indicates if the control has been enabled.
+    * The first time Spatial Reference has been enabled it should enable all feature services.
+    */
+    this.loaded = false;
+    /**
     * When true, all but the main switch are disabled to prevent interaction.
     */
     this.locked = true;
@@ -78,16 +83,6 @@ export class SolutionSpatialRef {
   }
   //--------------------------------------------------------------------------
   //
-  //  Event Listeners
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
-  //  Events
-  //
-  //--------------------------------------------------------------------------
-  //--------------------------------------------------------------------------
-  //
   //  Public Methods (async)
   //
   //--------------------------------------------------------------------------
@@ -161,8 +156,28 @@ export class SolutionSpatialRef {
   _updateLocked(event) {
     this.locked = !event.detail.switched;
     this._updateStore();
+    if (!this.loaded) {
+      // when this is switched on when loading we have reloaded a solution that
+      // has a custom wkid param and we should honor the settings they already have in the templates
+      if (event.detail.switched) {
+        // By default enable all Feature Services on first load
+        this._setFeatureServiceDefaults(this.services);
+      }
+      this.loaded = true;
+    }
   }
   ;
+  /**
+   * Enable spatial reference variable for all feature services.
+   *
+   * @param services list of service names
+   */
+  _setFeatureServiceDefaults(services) {
+    // switch all spatial-ref-item-switch
+    const fsNodes = nodeListToArray(this.el.getElementsByClassName("spatial-ref-item-switch"));
+    fsNodes.forEach((node) => node.checked = true);
+    services.forEach(name => this._updateEnabledServices({ detail: { switched: true } }, name));
+  }
   /**
    * Stores the wkid as the components value.
    */
@@ -200,67 +215,17 @@ export class SolutionSpatialRef {
   _updateStore() {
     state.spatialReferenceInfo["enabled"] = !this.locked;
     state.spatialReferenceInfo["spatialReference"] = this.spatialRef;
-    this._updateEditModels();
   }
   /**
    * Updates the enabled/disabled state of the service in spatialReferenceInfo.
    */
   _updateEnabledServices(event, name) {
     state.spatialReferenceInfo["services"][name] = event.detail.switched;
-    this._updateEditModels(name);
-  }
-  /**
-   * When the spatial reference param is enabled/disabled..we need to handle all feature services that
-   * are listed in state.services.
-   * When an individual service is enabled/disabled we only need to handle it.
-   *
-   * @param services List of feature services
-   */
-  _updateEditModels(name) {
-    Object.keys(state.models || {}).forEach(k => {
-      var _a;
-      const m = state.models[k];
-      const nameMatch = name && name === m.name;
-      const serviceMatch = name === undefined &&
-        Object.keys(state.spatialReferenceInfo["services"]).indexOf(m.name) > -1;
-      if (nameMatch || serviceMatch) {
-        const updateModel = (_a = m.propsModel) === null || _a === void 0 ? void 0 : _a.getValue();
-        if (updateModel) {
-          const active = getProp(state, `spatialReferenceInfo.services.${m === null || m === void 0 ? void 0 : m.name}`) || false;
-          const enabled = getProp(state, 'spatialReferenceInfo.enabled') || false;
-          m.propsModel.setValue(JSON.stringify(this._updateData(updateModel, enabled, active, m.spatialReference), null, '\t'));
-          m.propsDiffOriginValue = JSON.stringify(this._updateData(m.propsDiffOriginValue, enabled, active, m.spatialReference));
-        }
-      }
+    this.featureServiceSpatialReferenceChange.emit({
+      name,
+      enabled: event.detail.switched
     });
   }
-  /**
-   * Updates the services spatial reference by setting the wkid param value and removing latestWkid when enabled and active
-   * OR
-   * Sets the spatial reference back to the original spatialReference when disabled
-   *
-   * @param updateModel The model to update
-   * @param enabled Is the param enabled
-   * @param active Is the service enabled
-   * @param spatialReference The original source spatial reference
-   */
-  _updateData(updateModel, enabled, active, spatialReference) {
-    var _a;
-    const data = typeof (updateModel) === "string" ? JSON.parse(updateModel) : updateModel;
-    if (enabled && active) {
-      const wkid = this.spatialRef.wkid;
-      if (wkid) {
-        data.service.spatialReference.wkid = `{{params.wkid||${wkid}}}`;
-        if (data.service.spatialReference.latestWkid) {
-          delete (data.service.spatialReference.latestWkid);
-        }
-      }
-    }
-    else if ((_a = data.service) === null || _a === void 0 ? void 0 : _a.spatialReference) {
-      data.service.spatialReference = spatialReference;
-    }
-    return data;
-  }
   /**
    * Select the first child on Enter key click
    * OR
@@ -371,6 +336,24 @@ export class SolutionSpatialRef {
       "reflect": true,
       "defaultValue": "102100"
     },
+    "loaded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates if the control has been enabled.\r\nThe first time Spatial Reference has been enabled it should enable all feature services."
+      },
+      "attribute": "loaded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "locked": {
       "type": "boolean",
       "mutable": true,
@@ -446,6 +429,22 @@ export class SolutionSpatialRef {
     "spatialRef": {},
     "_srSearchText": {}
   }; }
+  static get events() { return [{
+      "method": "featureServiceSpatialReferenceChange",
+      "name": "featureServiceSpatialReferenceChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get methods() { return {
     "createSpatialRefDisplay": {
       "complexType": {
@@ -462,7 +461,8 @@ export class SolutionSpatialRef {
             "location": "global"
           },
           "ISpatialRefRepresentation": {
-            "location": "local"
+            "location": "import",
+            "path": "../../utils/interfaces"
           }
         },
         "return": "Promise<ISpatialRefRepresentation>"
@@ -487,7 +487,8 @@ export class SolutionSpatialRef {
             "location": "global"
           },
           "ISpatialRefRepresentation": {
-            "location": "local"
+            "location": "import",
+            "path": "../../utils/interfaces"
           }
         },
         "return": "Promise<ISpatialRefRepresentation>"
@@ -532,4 +533,3 @@ export class SolutionSpatialRef {
       "methodName": "valueChanged"
     }]; }
 }
-//# sourceMappingURL=solution-spatial-ref.js.map

package/dist/collection/components/solution-spatial-ref/spatialreferences.js

@@ -18,7 +18,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-;
 export const wkids = {
   2000: {
     "label": "Anguilla 1957 British West Indies Grid",
@@ -21045,4 +21044,3 @@ export const wkids = {
     "defaultExtent": "{\"xmin\": -179.9999885408437, \"ymin\": -85.05112779126247, \"xmax\": 179.9999885408437, \"ymax\": 85.05112779126246}"
   }
 };
-//# sourceMappingURL=spatialreferences.js.map

package/dist/collection/components/solution-template-data/solution-template-data.js

@@ -153,7 +153,8 @@ export class SolutionTemplateData {
         "resolved": "ITemplateData",
         "references": {
           "ITemplateData": {
-            "location": "local"
+            "location": "import",
+            "path": "../../utils/interfaces"
           }
         }
       },
@@ -228,7 +229,7 @@ export class SolutionTemplateData {
         "references": {
           "IVariableItem": {
             "location": "import",
-            "path": "../solution-variables/solution-variables"
+            "path": "../../utils/interfaces"
           }
         }
       },
@@ -249,7 +250,7 @@ export class SolutionTemplateData {
         "references": {
           "IOrganizationVariableItem": {
             "location": "import",
-            "path": "../solution-organization-variables/solution-organization-variables"
+            "path": "../../utils/interfaces"
           }
         }
       },
@@ -282,4 +283,3 @@ export class SolutionTemplateData {
   }; }
   static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=solution-template-data.js.map

package/dist/collection/components/solution-variables/solution-variables.js

@@ -113,7 +113,8 @@ export class SolutionVariables {
         "resolved": "IVariableItem[]",
         "references": {
           "IVariableItem": {
-            "location": "local"
+            "location": "import",
+            "path": "../../utils/interfaces"
           }
         }
       },
@@ -144,4 +145,3 @@ export class SolutionVariables {
     }]; }
   static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=solution-variables.js.map

package/dist/collection/components/store-manager/store-manager.js

@@ -31,6 +31,7 @@
 import { Component, Element, Event, Prop } from '@stencil/core';
 import state from '../../utils/editStore';
 import { getModels, getFeatureServices, getSpatialReferenceInfo } from '../../utils/templates';
+import { getItemDataAsJson } from '@esri/solution-common';
 export class StoreManager {
   constructor() {
     //--------------------------------------------------------------------------
@@ -43,6 +44,10 @@ export class StoreManager {
      *
      */
     this.value = "";
+    /**
+     * Templates for the current solution
+     */
+    this.templates = [];
   }
   //--------------------------------------------------------------------------
   //
@@ -62,10 +67,14 @@ export class StoreManager {
         if (mutation.type === 'attributes' && mutation.attributeName === "value" &&
           newValue !== mutation.oldValue && newValue !== "") {
           const v = JSON.parse(newValue);
-          state.models = getModels(Array.isArray(v) ? v : [v]);
-          state.featureServices = getFeatureServices(Array.isArray(v) ? v : [v]);
-          state.spatialReferenceInfo = getSpatialReferenceInfo(state.featureServices);
-          this.stateLoaded.emit(state);
+          // eslint-disable-next-line @typescript-eslint/no-floating-promises
+          getItemDataAsJson(v, this.authentication).then(data => {
+            state.models = getModels(Array.isArray(v) ? v : [v]);
+            state.featureServices = getFeatureServices(Array.isArray(v) ? v : [v]);
+            state.spatialReferenceInfo = getSpatialReferenceInfo(state.featureServices, data);
+            this.templates = v;
+            this.stateLoaded.emit(state);
+          });
           return true;
         }
       });
@@ -91,6 +100,42 @@ export class StoreManager {
       "attribute": "value",
       "reflect": true,
       "defaultValue": "\"\""
+    },
+    "templates": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "any[]",
+        "resolved": "any[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Templates for the current solution"
+      },
+      "defaultValue": "[]"
+    },
+    "authentication": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "UserSession",
+        "resolved": "UserSession",
+        "references": {
+          "UserSession": {
+            "location": "import",
+            "path": "@esri/solution-common"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Credentials for requests"
+      }
     }
   }; }
   static get events() { return [{
@@ -111,4 +156,3 @@ export class StoreManager {
     }]; }
   static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=store-manager.js.map

package/dist/collection/demos/browse-solutions.html

@@ -40,6 +40,29 @@
   .combo-list {
     width: 330px;
   }
+  .section-title {
+    margin-bottom: 12px;
+  }
+  .align-baseline {
+    align-items: baseline;
+  }
+  .labeled-item {
+    display: inline-flex;
+    margin: 0 8px 0 0;
+  }
+  .margin-top-1 {
+    margin-top: 1rem;
+  }
+  .margin-bottom-1 {
+    margin-bottom: 1rem;
+  }
+  .margin-side-1 {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+  .not-visible {
+    visibility: hidden;
+  }
   </style>
   <script src="https://polyfill.io/v3/polyfill.min.js?features=es5%2Cfetch%2CPromise"></script>
   <script src="https://unpkg.com/@esri/arcgis-rest-request@3.1.1/dist/umd/request.umd.js"></script>
@@ -50,23 +73,49 @@
 </head>
 
 <body>
-  <div class="list flex">
+  <div class="margin-top-1 margin-side-1">
+    <div class="labeled-item align-baseline">
+      <label for="username">Username:&nbsp;</label>
+      <input type="text" id="username" placeholder="anonymous">
+    </div>
+    <div class="labeled-item align-baseline">
+      <label for="password">Password:&nbsp;</label>
+      <input type="password" id="password">
+    </div>
+    <div class="labeled-item align-baseline">
+      <label for="portal">Portal:&nbsp;</label>
+      <input type="text" id="portal" style="width:256px" placeholder="https://www.arcgis.com">
+    </div>
+    <div class="labeled-item align-baseline">
+      <label for="group">Group ID:&nbsp;</label>
+      <input type="text" id="group" style="width:256px" placeholder="aa0b71e70e5b464187879db8fad7d939">
+    </div>
+    <button id="connectBtn fader" onclick="connectFcn()">Connect</button>
+  </div>
+  <div class="list flex not-visible margin-bottom-1 margin-side-1" id="componentContainer">
     <calcite-select
       id="solution-ids"
       label="demo combobox"
       placeholder="Select Solution ID"
       scale="m"
-      class="combo-list"
+      class="combo-list labeled-item"
     >
     </calcite-select>
     <calcite-button
       color="blue"
       appearance="solid"
-      onClick="getAllEdits()"
-      class="demo-button"
+      onClick="showAllEdits()"
+      class="demo-button labeled-item"
     >Get All Edits</calcite-button>
+    <calcite-button
+      color="blue"
+      appearance="solid"
+      onClick="save()"
+      class="demo-button labeled-item"
+      id="saveBtn"
+    >Save</calcite-button>
   </div>
-  <main id="appContainer">
+  <main class="not-visible" id="appContainer">
     <div class="content full-height">
       <solution-configuration id="demo"></solution-configuration>
     </div>
@@ -76,65 +125,89 @@
   <script src="./libs/setLocale.js"></script>
   <script src="./monacoConfig.js"></script>
   <script>
+    let continueFcn, authentication;
     require(["i18n!../assets/nls/strings", 'vs/editor/editor.main'],
     function (translations) {
-      // Initialize the configuration content
-      let demo = document.getElementById("demo");
-      demo.translations = translations.configuration_modal.configuration;
-
-      const portal = "https://www.arcgis.com/sharing/rest"
-      // get the user session
-      const authentication = new arcgisRest.UserSession({
-        portal
-      });
 
-      const groupId = "478e18c821f547978fb401105af4fad1";
-      const q = "type:Solution typekeywords:Solution,Template ";
-      const params = {
-        sortField:"relevance",
-        sortOrder:"desc",
-        num: 100
-      };
-
-      const opts = {
-        groupId,
-        q,
-        params,
-        authentication,
-        portal
-      };
-
-      // set the data
-      arcgisRest.searchGroupContent(opts)
-        .then(jsonResults => {
-          const idList = document.getElementById("solution-ids");
-
-          jsonResults.results.forEach(result => {
-            const i = document.createElement("calcite-option");
-            i.setAttribute("value", result.id);
-            i.setAttribute("label", result.title);
-            i.setAttribute("dir", "ltr");
-            i.setAttribute("scale", "m");
-            idList.appendChild(i);
-          });
+      connectFcn = getSolutions;
 
-          idList.addEventListener("calciteSelectChange", (event) => this.itemChanged(event, authentication, portal, idList));
-          document.getElementById("appContainer").style.opacity = "1";
+      authentication = null;
+
+      function getSolutions() {
+        const portal = (document.getElementById("portal").value || "https://www.arcgis.com") + "/sharing/rest";
+        authentication = new arcgisRest.UserSession({
+          username: document.getElementById("username").value || undefined,
+          password: document.getElementById("password").value || undefined,
+          portal 
         });
+
+        // Initialize the configuration content
+        let demo = document.getElementById("demo");
+        demo.translations = translations.configuration_modal.configuration;
+        demo.authentication = authentication;
+
+        // DO NOT USE REAL SOLUTION ITEMS WHILE SAVE EDITS WORK IS IN PROGRESS...CAN DESTROY THE SOLUTION ITEM
+        const groupId = document.getElementById("group").value;
+
+        const q = "type:Solution typekeywords:Solution,Template ";
+        const params = {
+          sortField:"relevance",
+          sortOrder:"desc",
+          num: 100
+        };
+
+        const opts = {
+          groupId,
+          q,
+          params,
+          authentication,
+          portal
+        };
+
+        // set the data
+        arcgisRest.searchGroupContent(opts)
+          .then(jsonResults => {
+            const idList = document.getElementById("solution-ids");
+
+            let value = undefined;
+            jsonResults.results.forEach(result => {
+              const i = document.createElement("calcite-option");
+              i.setAttribute("value", result.id);
+              i.setAttribute("label", result.title);
+              i.setAttribute("dir", "ltr");
+              i.setAttribute("scale", "m");
+              idList.appendChild(i);
+              if (!value) {
+                value = result.id
+              }
+            });
+
+            idList.addEventListener("calciteSelectChange", (event) => this.itemChanged(event, authentication, portal, idList));
+
+            // select the first one
+            if (value) {
+              this.itemChanged({}, authentication, portal, {
+                selectedOption: { value }
+              });
+            }
+
+            // show the components
+            const componentContainer = document.getElementById("componentContainer");
+            componentContainer.classList.remove("not-visible");
+
+            const appContainer = document.getElementById("appContainer");
+            appContainer.style.opacity = "1";
+            appContainer.classList.remove("not-visible")
+          });
+      }
     });
 
     function itemChanged(event, authentication, portal, self) {
-      arcgisRest.getItemData(self.selectedOption.value, {
-        authentication,
-        portal
-      }).then(r => {
-        const demo = document.getElementById("demo");
-        demo.solutionItemId = self.selectedOption.value
-        demo.templates = JSON.stringify(r.templates);
-      });
+      const demo = document.getElementById("demo");
+      demo.itemid = self.selectedOption.value;
     }
 
-    async function getAllEdits() {
+    async function showAllEdits() {
       let hasChanges = false;
       let hasDataErrors = false;
       let hasPropsErrors = false;
@@ -213,6 +286,15 @@
         alert(`Add this to the solution item: ${JSON.stringify(paramToAdd)}`);
       }
     }
+
+    async function save() {
+      const saveBtn = document.getElementById("saveBtn");
+      saveBtn.setAttribute("loading", true);
+      const demo = document.getElementById("demo");
+      demo.save().then(() => {
+        saveBtn.removeAttribute("loading");
+      });
+    }
   </script>
 </body>
 </html>