From 6d7da9b8eb55d42e2f78ba6efc35917fd53c48bf Mon Sep 17 00:00:00 2001
From: chriscauley <chris@lablackey.com>
Date: Mon, 23 Aug 2021 19:07:26 +0000
Subject: [PATCH 1/2] Explore pane now set from route

---
 resources/js/Pages/Explore.vue      | 31 ++---------------------------
 resources/js/Pages/Explore/panes.js | 27 +++++++++++++++++++++++++
 resources/js/store/index.js         |  8 +++++++-
 3 files changed, 36 insertions(+), 30 deletions(-)
 create mode 100644 resources/js/Pages/Explore/panes.js

diff --git a/resources/js/Pages/Explore.vue b/resources/js/Pages/Explore.vue
index ee41fa9..c2ac977 100644
--- a/resources/js/Pages/Explore.vue
+++ b/resources/js/Pages/Explore.vue
@@ -64,12 +64,7 @@ import Layout from '../Shared/Layouts/Layout.vue';
 import MapSheetLayout from '../Shared/Layouts/MapSheetLayout.vue';
 import LPBottomSheet from '../Shared/LPBottomSheet.vue';
 
-// panes
-import Alteration from './Explore/Alteration.vue';
-import NewConstruction from './Explore/NewConstruction.vue';
-import SalePrices from './Explore/SalePrices.vue';
-import Zoning from './Explore/Zoning.vue';
-import Layers from './Explore/Layers.vue';
+import panes from './Explore/panes';
 
 export default {
   components: {
@@ -79,29 +74,7 @@ export default {
   layout: [Layout, MapSheetLayout],
 
   data() {
-    return {
-      panes: [{
-        title: 'Sale Prices',
-        component: SalePrices,
-        route: 'sales',
-      }, {
-        title: 'Zoning',
-        component: Zoning,
-        route: 'zoning',
-      }, {
-        title: 'New Construction Permits',
-        component: NewConstruction,
-        route: 'construction',
-      }, {
-        title: 'Alteration Permits',
-        component: Alteration,
-        route: 'alteration',
-      }, {
-        title: 'Planning Overlays',
-        component: Layers,
-        route: 'layers',
-      }],
-    };
+    return { panes };
   },
 
   computed: {
diff --git a/resources/js/Pages/Explore/panes.js b/resources/js/Pages/Explore/panes.js
new file mode 100644
index 0000000..4d2f544
--- /dev/null
+++ b/resources/js/Pages/Explore/panes.js
@@ -0,0 +1,27 @@
+import Alteration from './Alteration.vue';
+import NewConstruction from './NewConstruction.vue';
+import SalePrices from './SalePrices.vue';
+import Zoning from './Zoning.vue';
+import Layers from './Layers.vue';
+
+export default [{
+  title: 'Sale Prices',
+  component: SalePrices,
+  route: 'sales',
+}, {
+  title: 'Zoning',
+  component: Zoning,
+  route: 'zoning',
+}, {
+  title: 'New Construction Permits',
+  component: NewConstruction,
+  route: 'construction',
+}, {
+  title: 'Alteration Permits',
+  component: Alteration,
+  route: 'alteration',
+}, {
+  title: 'Planning Overlays',
+  component: Layers,
+  route: 'layers',
+}];
diff --git a/resources/js/store/index.js b/resources/js/store/index.js
index 88958d2..3e080ad 100644
--- a/resources/js/store/index.js
+++ b/resources/js/store/index.js
@@ -2,9 +2,15 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import { getField, updateField } from 'vuex-map-fields';
 import { parse } from 'papaparse';
+import panes from '../Pages/Explore/panes';
 
 Vue.use(Vuex);
 
+const getInitialPane = () => {
+  const { pane } = route().params;
+  return panes.findIndex((p) => p.route === pane);
+};
+
 export default new Vuex.Store({
   strict: true,
   state: {
@@ -28,7 +34,7 @@ export default new Vuex.Store({
     // from letsplanorg
     exploreIsExpanded: false,
     layersIsExpanded: true,
-    exploreCurrentPane: 0,
+    exploreCurrentPane: getInitialPane(),
     tourShown: false,
   },
   mutations: {

From 2f13a3869e2ec0a6e2a0c703aec7591f566f5048 Mon Sep 17 00:00:00 2001
From: chriscauley <chris@lablackey.com>
Date: Mon, 23 Aug 2021 20:07:00 +0000
Subject: [PATCH 2/2] using inertia route as sole source of truth for which
 pane is visible via route().params.pane

---
 resources/js/Pages/Explore.vue                | 92 ++++++++++---------
 .../js/Shared/Layouts/MapSheetLayout.vue      | 15 ++-
 resources/js/store/index.js                   |  7 --
 3 files changed, 56 insertions(+), 58 deletions(-)

diff --git a/resources/js/Pages/Explore.vue b/resources/js/Pages/Explore.vue
index c2ac977..eb21a3b 100644
--- a/resources/js/Pages/Explore.vue
+++ b/resources/js/Pages/Explore.vue
@@ -6,7 +6,7 @@
       <v-card-title class="px-1">
         <v-btn
           icon
-          @click="goToPrevPane"
+          @click="() => currentPane--"
         >
           <span class="d-sr-only">Previous data</span>
           <v-icon>mdi-chevron-left</v-icon>
@@ -16,7 +16,7 @@
           style="flex: 1 1 0"
         >
           <v-window
-            v-model="exploreCurrentPane"
+            v-model="currentPane"
             vertical
           >
             <v-window-item
@@ -31,7 +31,7 @@
         </div>
         <v-btn
           icon
-          @click="goToNextPane"
+          @click="() => currentPane++"
         >
           <span class="d-sr-only">Next data</span>
           <v-icon>mdi-chevron-right</v-icon>
@@ -41,7 +41,7 @@
 
     <template #sheet-expanded>
       <v-window
-        v-model="exploreCurrentPane"
+        v-model="currentPane"
         class="mt-n6"
       >
         <v-window-item
@@ -64,7 +64,12 @@ import Layout from '../Shared/Layouts/Layout.vue';
 import MapSheetLayout from '../Shared/Layouts/MapSheetLayout.vue';
 import LPBottomSheet from '../Shared/LPBottomSheet.vue';
 
-import panes from './Explore/panes';
+// panes
+import Alteration from './Explore/Alteration.vue';
+import NewConstruction from './Explore/NewConstruction.vue';
+import SalePrices from './Explore/SalePrices.vue';
+import Zoning from './Explore/Zoning.vue';
+import Layers from './Explore/Layers.vue';
 
 export default {
   components: {
@@ -74,59 +79,60 @@ export default {
   layout: [Layout, MapSheetLayout],
 
   data() {
-    return { panes };
+    return {
+      panes: [{
+        title: 'Sale Prices',
+        component: SalePrices,
+        route: 'sales',
+      }, {
+        title: 'Zoning',
+        component: Zoning,
+        route: 'zoning',
+      }, {
+        title: 'New Construction Permits',
+        component: NewConstruction,
+        route: 'construction',
+      }, {
+        title: 'Alteration Permits',
+        component: Alteration,
+        route: 'alteration',
+      }, {
+        title: 'Planning Overlays',
+        component: Layers,
+        route: 'layers',
+      }],
+    };
   },
 
   computed: {
-    currentPaneRoute() {
-      return this.panes[this.exploreCurrentPane].route;
-    },
-
     paneCount() {
       return this.panes.length;
     },
 
+    currentPane: {
+      get() {
+        const { pane } = route().params;
+        return this.panes.findIndex((p) => p.route === pane);
+      },
+      set(value) {
+        let index = value;
+        if (index < 0) {
+          index = this.panes.length - 1;
+        } else if (index >= this.panes.length) {
+          index = 0;
+        }
+        this.$inertia.visit(`/explore/${this.panes[index].route}`, { replace: true });
+      },
+    },
+
     ...mapFields([
       'exploreIsExpanded',
-      'exploreCurrentPane',
     ]),
   },
-
-  watch: {
-    exploreCurrentPane() {
-      this.handleNewPane();
-    },
-  },
-
   methods: {
-    handleNewPane() {
-      window.history.pushState(null, null, `/explore/${this.currentPaneRoute}`);
-      this.$parent.$emit('new-pane', this.currentPaneRoute);
-    },
-
     handleToggle(newState) {
       this.exploreIsExpanded = newState;
     },
-
-    goToNextPane() {
-      if (this.exploreCurrentPane + 1 < this.paneCount) {
-        this.exploreCurrentPane += 1;
-      } else {
-        this.exploreCurrentPane = 0;
-      }
-
-      this.handleNewPane();
-    },
-
-    goToPrevPane() {
-      if (this.exploreCurrentPane > 0) {
-        this.exploreCurrentPane -= 1;
-      } else {
-        this.exploreCurrentPane = this.paneCount - 1;
-      }
-
-      this.handleNewPane();
-    },
   },
 };
 </script>
diff --git a/resources/js/Shared/Layouts/MapSheetLayout.vue b/resources/js/Shared/Layouts/MapSheetLayout.vue
index b342abe..969a64e 100644
--- a/resources/js/Shared/Layouts/MapSheetLayout.vue
+++ b/resources/js/Shared/Layouts/MapSheetLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <lp-bottom-sheet @new-pane="handleNewPane">
+  <lp-bottom-sheet>
     <mapbox-map
       ref="mapboxmap"
       :tiles="mapTiles"
@@ -57,11 +57,13 @@ export default {
   computed: {
     ...mapFields([
       'exploreIsExpanded',
-      'exploreCurrentPane',
       'shownTour',
     ]),
   },
   mounted() {
+    this.$inertia.on('finish', () => {
+      this.mapTiles = route().params.pane;
+    });
     // if already shown before then do not show again
     if (this.shownTour) { return; }
     this.$nextTick(() => {
@@ -232,9 +234,6 @@ export default {
     });
   },
   methods: {
-    handleNewPane(pane) {
-      this.mapTiles = pane;
-    },
 
     sourceDataLoaded(event) {
       // we should not mess with the parcel color
@@ -317,7 +316,7 @@ export default {
         filter: ['==', 'parcel_id', '441425'],
       });
       const coordinates = { lat: 39.9534051531393, lng: -75.20876878307995 };
-      const parcel = feature[0].properties;
+      const parcel = feature[0] ? feature[0].properties : undefined;
       this.showPopup({ properties: parcel, coords: coordinates, feature: feature[0] });
     },
     triggerExpanded() {
@@ -327,10 +326,10 @@ export default {
       this.exploreIsExpanded = false;
     },
     triggerPlanningOverlays() {
-      this.exploreCurrentPane = 4;
+      this.$inertia.visit('/explore/layers', { replace: true });
     },
     triggerSales() {
-      this.exploreCurrentPane = 0;
+      this.$inertia.visit('/explore/sales', { replace: true });
     },
   },
 };
diff --git a/resources/js/store/index.js b/resources/js/store/index.js
index 3e080ad..d60b6dd 100644
--- a/resources/js/store/index.js
+++ b/resources/js/store/index.js
@@ -2,15 +2,9 @@ import Vue from 'vue';
 import Vuex from 'vuex';
 import { getField, updateField } from 'vuex-map-fields';
 import { parse } from 'papaparse';
-import panes from '../Pages/Explore/panes';
 
 Vue.use(Vuex);
 
-const getInitialPane = () => {
-  const { pane } = route().params;
-  return panes.findIndex((p) => p.route === pane);
-};
-
 export default new Vuex.Store({
   strict: true,
   state: {
@@ -34,7 +28,6 @@ export default new Vuex.Store({
     // from letsplanorg
     exploreIsExpanded: false,
     layersIsExpanded: true,
-    exploreCurrentPane: getInitialPane(),
     tourShown: false,
   },
   mutations: {