refactor(frontend): community routes

frontend/src/components/Template/ContentHeader/NavCommunity.vue

@@ -2,19 +2,19 @@
   <div class="nav-community container">
     <b-row class="nav-row">
       <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn active-class="btn-active" block variant="link" to="/community#edit">
+        <b-btn active-class="btn-active" block variant="link" @click="handleClick(0)">
           <b-icon icon="pencil" class="mr-2" />
           {{ $t('community.submitContribution') }}
         </b-btn>
       </b-col>
       <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn active-class="btn-active" block variant="link" to="/community#my">
+        <b-btn active-class="btn-active" block variant="link" @click="handleClick(1)">
           <b-icon icon="person" class="mr-2" />
           {{ $t('community.myContributions') }}
         </b-btn>
       </b-col>
       <b-col cols="12" lg="4" md="4" class="px-0">
-        <b-btn active-class="btn-active" block variant="link" to="/community#all">
+        <b-btn active-class="btn-active" block variant="link" @click="handleClick(2)">
           <b-icon icon="people" class="mr-2" />
           {{ $t('community.community') }}
         </b-btn>
@@ -23,9 +23,22 @@
   </div>
 </template>
 <script>
-export default {
+ export default {
    name: 'NavCommunity',
-}
+   methods: {
+     handleClick(tab) {
+       console.log('handleClick', tab)
+       if (this.$route.params && this.$route.params.tab && Number(this.$route.params.tab) !== tab) {
+         this.$router.push({ params: { tab } })
+       }
+     },
+   },
+   watch: {
+     '$route.params.tab'(tab) {
+       this.handleClick(tab)
+     },
+   },
+ }
 </script>
 <style scoped>
 .nav-row {

frontend/src/components/Template/RightSide/ContributionInfo.vue

@@ -65,12 +65,18 @@
   </div>
 </template>
 <script>
-export default {
+ export default {
    name: 'ContributionInfo',
    computed: {
      hash() {
        return this.$route.hash
      },
+     currentTab() {
+       console.log('ROUTE', this.$route)
+       if (this.$route.from && this.$route.from.params && this.$route.from.params.tab)
+         return this.$route.from.params.tab
+       return 0
      },
-}
+   },
+ }
 </script>

frontend/src/layouts/templates/ContentHeader.vue

@@ -5,12 +5,13 @@
 </template>
 
 <script>
-export default {
+ export default {
    name: 'ContentHeader',
    computed: {
      path() {
-      return this.$route.path.replace(/^\//, '')
+       console.log('ContentHeader', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
+       return this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')
      },
    },
-}
+ }
 </script>

frontend/src/layouts/templates/RightSide.vue

@@ -6,19 +6,21 @@
   </div>
 </template>
 <script>
-export default {
+ export default {
    name: 'RightSide',
    computed: {
      name() {
-      switch (this.$route.path.replace(/^\//, '')) {
+       console.log('RightSide', this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1'))
+       switch (this.$route.path.replace(/^\/(.+?)(\/.+)?$/, '$1')) {
          case 'settings':
            return 'empty'
          case 'community':
+           console.log('-----------')
            return 'community'
          default:
            return 'transactions'
        }
      },
    },
-}
+ }
 </script>

frontend/src/pages/Community.vue

@@ -58,13 +58,13 @@
   </div>
 </template>
 <script>
-import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
+ import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
-import ContributionForm from '@/components/Contributions/ContributionForm.vue'
+ import ContributionForm from '@/components/Contributions/ContributionForm.vue'
-import ContributionList from '@/components/Contributions/ContributionList.vue'
+ import ContributionList from '@/components/Contributions/ContributionList.vue'
-import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
+ import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
-import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
+ import { listContributions, listAllContributions, openCreations } from '@/graphql/queries'
 
-export default {
+ export default {
    name: 'Community',
    components: {
      ContributionForm,
@@ -73,9 +73,7 @@ export default {
    },
    data() {
      return {
-      hashLink: '',
+       tabIndex: 1,
-      tabLinkHashes: ['#edit', '#my', '#all'],
-      tabIndex: 0,
        items: [],
        itemsAll: [],
        currentPage: 1,
@@ -97,10 +95,7 @@ export default {
      }
    },
    mounted() {
-    this.$nextTick(() => {
+     this.updateTabIndex(Number(this.$route.params.tab))
-      this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === this.$route.hash)
-      this.hashLink = this.$route.hash
-    })
    },
    apollo: {
      OpenCreations: {
@@ -153,9 +148,6 @@ export default {
          this.items = listContributions.contributionList
          if (this.items.find((item) => item.state === 'IN_PROGRESS')) {
            this.tabIndex = 1
-          if (this.$route.hash !== '#my') {
-            this.$router.push({ path: '/community#my' })
-          }
            this.toastInfo(this.$t('contribution.alert.answerQuestionToast'))
          }
        },
@@ -165,21 +157,8 @@ export default {
      },
    },
    watch: {
-    $route(to, from) {
+     '$route.params.tab'(tab) {
-      this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === to.hash)
+       this.updateTabIndex(tab)
-      this.hashLink = to.hash
-      this.closeAllOpenCollapse()
-    },
-    tabIndex(num) {
-      if (num !== 0) {
-        this.form = {
-          id: null,
-          date: new Date(),
-          memo: '',
-          hours: 0,
-          amount: '',
-        }
-      }
      },
    },
    computed: {
@@ -211,6 +190,13 @@ export default {
      },
    },
    methods: {
+     updateTabIndex(tab) {
+       console.log('updateTabIndex', tab)
+       if (Number(tab) !== this.tabIndex) {
+         this.tabIndex = Number(tab)
+         this.closeAllOpenCollapse()
+       }
+     },
      closeAllOpenCollapse() {
        this.$el.querySelectorAll('.collapse.show').forEach((value) => {
          this.$root.$emit('bv::toggle::collapse', value.id)
@@ -294,7 +280,6 @@ export default {
        this.form.amount = item.amount
        this.form.hours = item.amount / 20
        this.updateAmount = item.amount
-      this.$router.push({ path: '#edit' })
        this.tabIndex = 0
      },
      updateTransactions(pagination) {
@@ -306,10 +291,8 @@ export default {
    },
    created() {
      this.updateTransactions(0)
-    this.tabIndex = 0
-    this.$router.push({ path: '/community#edit' })
    },
-}
+ }
 </script>
 <style scoped>
 .tab-content {

frontend/src/routes/routes.js

@@ -58,6 +58,17 @@ const routes = [
       requiresAuth: true,
       pageTitle: 'community',
     },
+    redirect: (to) => {
+      return { path: '/community/1' }
+    },
+  },
+  {
+    path: '/community/:tab',
+    component: () => import('@/pages/Community.vue'),
+    meta: {
+      requiresAuth: true,
+      pageTitle: 'community',
+    },
   },
   {
     path: '/information',