Fix navigation bar so it highlights the current tab in details pages …

…(contract show and tender show)
PopulateTools · May 12, 2020 · a146709 · a146709
1 parent 89a55be
commit a146709
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/app/javascript/gobierto_dashboards/webapp/containers/contract/ContractsShow.vue b/app/javascript/gobierto_dashboards/webapp/containers/contract/ContractsShow.vue
@@ -59,9 +59,6 @@ export default {
  labelProcessType: I18n.t('gobierto_dashboards.dashboards.contracts.process_type')
  }
  },
- updated() {
- this.$emit("active-tab", 1);
- },
  created() {
  const itemId = this.$route.params.id;
 

diff --git a/app/javascript/gobierto_dashboards/webapp/containers/shared/Nav.vue b/app/javascript/gobierto_dashboards/webapp/containers/shared/Nav.vue
@@ -4,7 +4,7 @@
  <li
  :class="{ 'is-active': activeTab === 0 }"
  class="dashboards-home-nav--tab"
- @click="activateTab(0)"
+ @click="navigateToTab(0)"
  >
  <i class="fas fa-chart-bar" />
  <i class="far fa-chart-bar" />
@@ -13,7 +13,7 @@
  <li
  :class="{ 'is-active': activeTab === 1 }"
  class="dashboards-home-nav--tab"
- @click="activateTab(1)"
+ @click="navigateToTab(1)"
  >
  <i class="fas fa-clone" />
  <i class="far fa-clone" />
@@ -22,7 +22,7 @@
  <li
  :class="{ 'is-active': activeTab === 2 }"
  class="dashboards-home-nav--tab"
- @click="activateTab(2)"
+ @click="navigateToTab(2)"
  >
  <i class="fas fa-clone" />
  <i class="far fa-clone" />
@@ -48,24 +48,40 @@ export default {
  labelTenders: I18n.t("gobierto_dashboards.dashboards.contracts.tenders")
  }
  },
- routesMapping: ['summary', 'contracts_index', 'tenders_index'],
- created() {
- this.activateTab(this.tabIndexFromRouteName(this.$router.currentRoute.name));
+ routesToNavBarMapping: {
+ 'summary': 0,
+ 'contracts_index': 1,
+ 'contracts_show': 1,
+ 'tenders_index': 2,
+ 'tenders_show': 2
+ },
+ navBarNavigationMapping: [
+ 'summary',
+ 'contracts_index',
+ 'tenders_index'
+ ],
+ created(){
+ const currentTabIndex = this.tabIndexFromRouteName();
+ console.log(currentTabIndex);
+ this.markTabAsActive(currentTabIndex);
  },
  methods: {
- activateTab(index) {
- this.$emit("active-tab", index);
+ navigateToTab(index) {
+ this.markTabAsActive(index);
 
  const newRoute = this.routeNameFromTabIndex(index);
  if (newRoute !== this.$router.currentRoute.name) {
  this.$router.push({ name: newRoute });
  }
  },
+ markTabAsActive(index) {
+ this.$emit("active-tab", index);
+ },
  routeNameFromTabIndex(index){
- return this.$options.routesMapping[index];
+ return this.$options.navBarNavigationMapping[index];
  },
- tabIndexFromRouteName(name){
- return this.$options.routesMapping.indexOf(name);
+ tabIndexFromRouteName(name=this.$router.currentRoute.name){
+ return this.$options.routesToNavBarMapping[name];
  }
  }
 }

diff --git a/app/javascript/gobierto_dashboards/webapp/containers/tender/TendersShow.vue b/app/javascript/gobierto_dashboards/webapp/containers/tender/TendersShow.vue
@@ -45,9 +45,6 @@ export default {
  labelProcessType: I18n.t('gobierto_dashboards.dashboards.contracts.process_type')
  }
  },
- updated() {
- this.$emit("active-tab", 2);
- },
  created() {
  const itemId = this.$route.params.id;