update packages

EsriPS · Oct 31, 2024 · 7e6b985 · 7e6b985
1 parent fae831d
commit 7e6b985
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 164 deletions.
diff --git a/index.html b/index.html
@@ -8,8 +8,8 @@
   <link rel="icon" href="data:;base64,=" />
 
   <!-- Calcite -->
-  <script type="module" src="https://js.arcgis.com/calcite-components/2.13.0/calcite.esm.js"></script>
-  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.0/calcite.css" />
+  <script type="module" src="https://js.arcgis.com/calcite-components/2.13.2/calcite.esm.js"></script>
+  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/2.13.2/calcite.css" />
 
   <!-- Load app styles -->
   <link rel="stylesheet" href="main.css" />
@@ -48,7 +48,7 @@
             </arcgis-basemap-toggle>
           </arcgis-map>
           <calcite-panel id="panel-table">
-            <arcgis-feature-table related-records-enabled></arcgis-feature-table>
+            <arcgis-feature-table related-records-enabled return-geometry-enabled></arcgis-feature-table>
           </calcite-panel>
         </calcite-panel>
       </div>

diff --git a/main.css b/main.css
@@ -1,7 +1,7 @@
 /* Calcite Dev Summit 2024 Demo Template */
 /* Demo template supporting styles */
 
-@import 'https://js.arcgis.com/4.30/@arcgis/core/assets/esri/themes/light/main.css';
+@import 'https://js.arcgis.com/4.31/@arcgis/core/assets/esri/themes/light/main.css';
 
 html,
 body,
@@ -28,6 +28,11 @@ calcite-action-pad {
   margin-inline-end: 0.5rem;
 }
 
+arcgis-feature-table {
+  width: 100%;
+  height: 100%;
+}
+
 arcgis-editor {
   /* position: absolute;
   bottom: 0;

diff --git a/main.js b/main.js
@@ -20,38 +20,32 @@ import { setAssetPath } from '@esri/calcite-components/dist/components';
 setAssetPath(location.href);
 // #endregion Imports
 
-// Obtain the Map and Editor components
+// Obtain the Map, Editor, and FeatureTable components
 const arcgisMap = document.querySelector('arcgis-map');
 const editor = document.querySelector('arcgis-editor');
 const table = document.querySelector('arcgis-feature-table');
-const filterNeedsReview = document.getElementById('filter-review');
-const stepper = document.querySelector('calcite-stepper');
+// const stepper = document.querySelector('calcite-stepper');
 
-console.log(stepper);
+// Custom workflow handles
+const filterNeedsReview = document.getElementById('filter-review');
 
 arcgisMap.addEventListener('arcgisViewReadyChange', async (event) => {
-  // Find the inspection zones layer and set it in the global context
-
   await reactiveUtils.whenOnce(() => !arcgisMap.view.updating);
 
   const buildingsLayer = arcgisMap.map.layers.find((layer) => {
     return layer.title === 'Buildings';
   });
 
-  const buildingsLayerView = await arcgisMap.view.whenLayerView(buildingsLayer);
-  console.log(buildingsLayerView);
   await reactiveUtils.whenOnce(() => buildingsLayer.loaded);
 
+  // Initialize FeatureTable Component
   table.view = arcgisMap.view;
   table.layer = buildingsLayer;
   table.actionColumnConfig = {
     label: 'Go to feature',
     icon: 'zoom-to-object',
     callback: (params) => {
-      // Todo: figure out why feature.geometry is null here...
-      // view.goTo(params.feature.geometry.extent.expand(1.5));
-
-      view.goTo(params.feature);
+      view.goTo(params.feature.geometry.extent.expand(1.5));
     },
   };
   table.tableTemplate = {
@@ -76,47 +70,6 @@ arcgisMap.addEventListener('arcgisViewReadyChange', async (event) => {
     ],
   };
 
-  // Initialize FeatureTable
-  // const featureTable = new FeatureTable({
-  //   container: document.getElementById('panel-table'),
-  //   view: arcgisMap.view,
-  //   layer: buildingsLayer,
-  //   relatedRecordsEnabled: true,
-
-  //   actionColumnConfig: {
-  //     label: 'Go to feature',
-  //     icon: 'zoom-to-object',
-  //     callback: (params) => {
-  //       // Todo: figure out why feature.geometry is null here...
-  //       // view.goTo(params.feature.geometry.extent.expand(1.5));
-
-  //       view.goTo(params.feature);
-  //     },
-  //   },
-
-  //   tableTemplate: {
-  //     columnTemplates: [
-  //       {
-  //         type: 'field',
-  //         fieldName: 'UID',
-  //         label: 'ID',
-  //         flexGrow: 0,
-  //         width: '170px',
-  //       },
-  //       {
-  //         type: 'field',
-  //         fieldName: 'STATUS',
-  //         label: 'Permit Status',
-  //       },
-  //       {
-  //         type: 'field',
-  //         fieldName: 'BEZGFK',
-  //         label: 'Building Type',
-  //       },
-  //     ],
-  //   },
-  // });
-
   window.subTableTemplate = {
     columnTemplates: [
       {
@@ -136,13 +89,13 @@ arcgisMap.addEventListener('arcgisViewReadyChange', async (event) => {
     label: 'Edit Record',
     icon: 'pencil',
     callback: (params) => {
-      console.log(params);
       editor.classList.remove('hidden');
       editor.startUpdateWorkflowAtFeatureEdit(params.feature);
-      stepper.goToStep(2);
+      // stepper.goToStep(2);
     },
   };
 
+  // Configure "permits" related table
   reactiveUtils.when(
     () => table.relatedTable,
     (relatedTable) => {
@@ -153,14 +106,15 @@ arcgisMap.addEventListener('arcgisViewReadyChange', async (event) => {
     }
   );
 
+  // Stash these in the window for now
   window.buildingsLayer = buildingsLayer;
-  window.buildingsLayerView = buildingsLayerView;
   window.featureTable = table;
   window.editor = editor;
   window.map = arcgisMap;
   window.view = arcgisMap.view;
 });
 
+// #region Custom workflow steps
 filterNeedsReview.addEventListener('click', () => {
   const query = buildingsLayer.createQuery();
   query.where = "STATUS = 'Needs Review'";
@@ -172,7 +126,7 @@ filterNeedsReview.addEventListener('click', () => {
 
       const features = results.features;
       if (features.length > 0) {
-        // Todo: Better for the demo to set objectIds or highlightIds?
+        // Highlight the features where Permit Status is Needs Review
         featureTable.highlightIds.removeAll();
         featureTable.highlightIds.addMany(
           features.map((feature) => feature.attributes.OBJECTID)
@@ -183,6 +137,9 @@ filterNeedsReview.addEventListener('click', () => {
           (feature) => feature.attributes.OBJECTID
         );
 
+        // Add filter-by-selection-enabled to the table element
+        featureTable.filterBySelectionEnabled = true;
+
         const unionedGeometries = geometryEngine.union(
           features.map((feature) => feature.geometry)
         );
@@ -196,3 +153,4 @@ filterNeedsReview.addEventListener('click', () => {
       console.error('Error querying features:', error);
     });
 });
+// #endregion Custom workflow steps