using inertia route as sole source of truth for which pane is visible…

… via route().params.pane
urbanSpatial · Aug 23, 2021 · 2f13a38 · 2f13a38
1 parent 6d7da9b
commit 2f13a38
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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: {