@phila/layerboard 1.1.13 → 2.0.1

package/.github/workflows/node.js.yml

@@ -0,0 +1,24 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Publish to npmjs
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

package/README.md

@@ -19,6 +19,20 @@ See the examples [Openmaps](https://openmaps.phila.gov) and [StreetSmartPHL](htt
 
 ## Release Notes
 
+### 2.0.1 - 9/9/2022
+
+* uses upgraded @phila packages
+* ran package upgrade
+
+### 2.0.0 - 7/26/2021
+
+* uses @phila packages that use npm for package commands
+* requires using npm for all package commands
+
+### 1.1.14 - 10/27/2020
+
+* uses github actions for pushing to npmjs, uses vue router
+
 ### 1.1.13 - 10/7/2020
 
 * uses upgraded vue libraries:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@phila/layerboard",
   "description": "A Vue.js component for creating an app from an ESRI web map",
-  "version": "1.1.13",
+  "version": "2.0.1",
   "author": "City of Philadelphia <maps@phila.gov>",
   "repository": "https://github.com/cityofphiladelphia/layerboard",
   "license": "MIT",
@@ -13,20 +13,23 @@
     "lintFix": "vue-cli-service lint --fix"
   },
   "dependencies": {
-    "@phila/vue-comps": "2.1.15",
-    "@phila/vue-datafetch": "1.4.3",
-    "@phila/vue-mapping": "2.2.9",
-    "vue": "^2.6.10",
+    "@phila/vue-comps": "3.0.5",
+    "@phila/vue-datafetch": "2.2.9",
+    "@phila/vue-mapping": "3.1.9",
+    "esri-leaflet": "2.3.1",
+    "leaflet": "1.5.1",
+    "vue": "^2.7.10",
+    "vue-router": "^3.6.5",
     "vuex": "^3.1.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.1",
-    "@vue/cli-plugin-eslint": "^4.1.1",
-    "@vue/cli-service": "^4.1.1",
+    "@vue/cli-plugin-babel": "^4.5.19",
+    "@vue/cli-plugin-eslint": "^4.5.19",
+    "@vue/cli-service": "^4.5.19",
     "babel-eslint": "^10.0.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.0.1",
-    "vue-template-compiler": "^2.6.10",
+    "vue-template-compiler": "^2.7.10",
     "webpack-visualizer-plugin": "^0.1.11"
   },
   "postcss": {
@@ -38,5 +41,8 @@
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "engines": {
+    "yarn": "YARN NO LONGER USED - use npm instead."
+  }
 }

package/src/components/MapPanel.vue

@@ -477,6 +477,7 @@ export default {
       return config || {};
     },
     activeTopicLayers() {
+      console.log('activeTopicLayers computed');
       if (!this.topics) {
         // if there are no topics, return all layers
         let titles = [];
@@ -493,15 +494,17 @@ export default {
       for (let component of activeTopicConfigComponents) {
         if (component.type === 'checkbox-set' || component.type === 'radio-button-set') {
           topicLayers = component.options.topicLayers;
+          // console.log('in activeTopicLayers computed, topicLayers:', topicLayers);
         }
       }
       let topicLayersKeys = [];
-      console.log('topicLayers:', topicLayers);
       if (topicLayers) {
         for (let topicLayer of topicLayers) {
-          topicLayersKeys.push(topicLayer.title);
+          // topicLayersKeys.push(topicLayer.title);
+          topicLayersKeys.push(this.evaluateSlot(topicLayer.title));
         }
       }
+      // console.log('topicLayers:', topicLayers, 'topicLayersKeys:', topicLayersKeys);
       return topicLayersKeys;
     },
     mapPanelContainerClass() {
@@ -696,6 +699,45 @@ export default {
     // this.handleWindowResize(25);
   },
   methods: {
+    evaluateSlot(valOrGetter, transforms = [], nullValue = '') {
+      console.log('evaluateSlot is running, this.item:', this.item, 'valOrGetter:', valOrGetter);
+      // check for null val/getter
+      if (!valOrGetter) {
+        return valOrGetter;
+      }
+
+      const valOrGetterType = typeof valOrGetter;
+      let val;
+
+      // fn
+      if (valOrGetterType === 'function') {
+        const state = this.$store.state;
+        const controller = this.$controller;
+        const getter = valOrGetter;
+
+        // const getterText = String(getter);
+        // const depsRe = /state(\.\w+)+/g;
+        // const depsText = getterText.match(depsRe);
+        // const deps = depsText.map(eval);
+
+        const item = this.item;
+        // console.log('in evaluateSlot, item:', item);
+
+        // if this comp is associated with an "item" (generally some object
+        // from a list of things, e.g. dor parcels), pass the item itself
+        // as well when evaluating
+        if (item) {
+          val = getter(state, item, controller);
+        } else {
+          // console.log('evaluateSlot, about to get value');
+          val = getter(state);
+          // console.log('state:', state, 'val:', val);
+        }
+      } else {
+        val = valOrGetter;
+      }
+      return val;
+    },
     // shouldShowTiledLayer(key) {
     //   let value;
     //   if (!activeTopicConfig.tiledLayers) {

package/src/main.js

@@ -7,6 +7,7 @@
         \/    \/\/         \/          \/           \/           \/
 */
 
+
 import Vue from 'vue';
 import axios from 'axios';
 import createStore from './store';
@@ -20,6 +21,8 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import controllerMixin from '@phila/vue-datafetch/src/controller.js';
 
+import Router from 'vue-router';
+
 import * as L from 'leaflet';
 import * as esri from 'esri-leaflet';
 L.esri = esri;
@@ -44,14 +47,27 @@ function initLayerboard(clientConfig, secondFile) {
       config = mergeDeep(config, secondFile);
     }
 
+    config.router.pattern = 'address-and-topic';
+
     // make config accessible from each component via this.$config
     Vue.use(configMixin, config);
 
     // create store
     const store = createStore(config);
 
+    Vue.use(Router);
+    let router = new Router({
+      mode: 'history',
+      routes: [
+        {
+          path: '/:address',
+          name: 'address-only',
+        },
+      ],
+    });
+
     // mix in controller
-    Vue.use(controllerMixin, { config, store });
+    Vue.use(controllerMixin, { config, store, router });
 
     Vue.component('font-awesome-icon', FontAwesomeIcon);
 
@@ -65,6 +81,7 @@ function initLayerboard(clientConfig, secondFile) {
     const vm = new Vue({
       el: config.el || '#layerboard',
       render: (h) => h(App),
+      router,
       store,
     });
 

package/.travis.yml

@@ -1,27 +0,0 @@
-language: node_js
-node_js:
-  - node
-before_install:
-  - printf "@fortawesome:registry=https://npm.fontawesome.com/\n//npm.fontawesome.com/:_authToken=${FA_AUTH_TOKEN}" >> ~/.npmrc
-script: npm run build
-before_deploy:
-  - rm -rf node_modules
-#   - source ./.travis/s3_utils.sh
-#   - S3_BUCKET=$(get_s3_bucket)
-#   - echo "Will push to S3 bucket $S3_BUCKET."
-deploy:
-  # - provider: s3
-  #   access_key_id: $AWS_ACCESS_KEY_ID
-  #   secret_access_key: $AWS_SECRET_ACCESS_KEY
-  #   bucket: $S3_BUCKET
-  #   skip_cleanup: true
-  #   on:
-  #     branch: develop
-      # TODO add a condition to make sure the bucket exists using `aws s3 ls`
-  - provider: npm
-    email: "phillypackage@gmail.com"
-    api_key: $NPM_AUTH_TOKEN
-    skip_cleanup: true
-    on:
-      tags: true
-env: