feat(project-board): keep active tab when reloading page

bimdata · Jun 25, 2021 · 5621195 · 5621195
1 parent c179762
commit 5621195
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/src/components/generic/mapbox-wrapper/MapboxWrapper.vue b/src/components/generic/mapbox-wrapper/MapboxWrapper.vue
@@ -8,6 +8,8 @@
 import mapboxgl from "mapbox-gl";
 import { onMounted, watchEffect } from "vue";
 
+const CONTAINER_ID = "mapbox-container";
+
 export default {
   props: {
     longitude: {
@@ -23,9 +25,10 @@ export default {
     mapboxgl.accessToken = process.env.VUE_APP_MAPBOX_TOKEN;
 
     const loadMap = (longitude, latitude) => {
-      if (longitude && latitude) {
+      const container = document.getElementById(CONTAINER_ID);
+      if (container && longitude && latitude) {
         const map = new mapboxgl.Map({
-          container: "mapbox-container",
+          container: CONTAINER_ID,
           style: "mapbox://styles/mapbox/light-v10",
           center: [longitude, latitude],
           zoom: 15.5,
@@ -76,7 +79,7 @@ export default {
           );
         });
 
-        new mapboxgl.Marker({ color: "#2F374A" })
+        new mapboxgl.Marker({ color: "#2F374A" /* color primary */ })
           .setLngLat([longitude, latitude])
           .addTo(map);
       }

diff --git a/src/views/project-board/ProjectBoard.vue b/src/views/project-board/ProjectBoard.vue
@@ -10,8 +10,8 @@
           height="32px"
           tabSize="100px"
           :tabs="tabs"
-          :selected="0"
-          @tab-click="changeView($event.view)"
+          :selected="currentTab.id"
+          @tab-click="changeView($event.id)"
         />
       </template>
       <template #right>
@@ -30,8 +30,9 @@
 </template>
 
 <script>
-import { ref, watch } from "vue";
+import { onBeforeMount, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
 // Components
 import AppSlot from "@/components/generic/app-slot/AppSlot";
 import ViewHeader from "@/components/generic/view-header/ViewHeader";
@@ -40,10 +41,22 @@ import ProjectBcf from "./project-bcf/ProjectBcf";
 import ProjectFiles from "./project-files/ProjectFiles";
 import ProjectOverview from "./project-overview/ProjectOverview";
 
+const viewsDef = {
+  overview: "ProjectOverview",
+  files: "ProjectFiles",
+  bcf: "ProjectBcf"
+};
+
 const tabsDef = [
-  { id: "overview", view: "ProjectOverview" },
-  { id: "files", view: "ProjectFiles" },
-  { id: "bcf", view: "ProjectBcf" }
+  {
+    id: "overview"
+  },
+  {
+    id: "files"
+  },
+  {
+    id: "bcf"
+  }
 ];
 
 export default {
@@ -56,6 +69,7 @@ export default {
     ProjectOverview
   },
   setup() {
+    const route = useRoute();
     const { locale, t } = useI18n();
 
     const tabs = ref([]);
@@ -70,13 +84,26 @@ export default {
       { immediate: true }
     );
 
-    const currentView = ref(tabsDef[0].view);
-    const changeView = view => {
-      currentView.value = view;
+    const currentTab = ref(tabsDef[0]);
+    const currentView = ref(viewsDef["overview"]);
+    const changeView = id => {
+      const view = viewsDef[id] ? id : "overview";
+
+      const url = new URL(window.location);
+      url.hash = view;
+      history.replaceState(history.state, "", url);
+
+      currentTab.value = { id: view };
+      currentView.value = viewsDef[view];
     };
 
+    onBeforeMount(() => {
+      changeView(route.hash.slice(1));
+    });
+
     return {
       // References
+      currentTab,
       currentView,
       tabs,
       // Methods