Commmunity page, new tabsystem with hashes

frontend/src/components/Contributions/ContributionListInfo.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="contribution-list-info">
+    <b-alert v-if="list === 'my'" show dismissible fade variant="secondary" class="text-dark">
+      <h4 class="alert-heading">{{ $t('community.myContributions') }}</h4>
+      <p>
+        {{ $t('contribution.alert.myContributionNoteList') }}
+      </p>
+      <ul class="h2">
+        <li>
+          <b-icon icon="bell-fill" variant="primary"></b-icon>
+          {{ $t('contribution.alert.pending') }}
+        </li>
+        <li>
+          <b-icon icon="question-square" variant="warning"></b-icon>
+          {{ $t('contribution.alert.in_progress') }}
+        </li>
+        <li>
+          <b-icon icon="check" variant="success"></b-icon>
+          {{ $t('contribution.alert.confirm') }}
+        </li>
+        <li>
+          <b-icon icon="x-circle" variant="danger"></b-icon>
+          {{ $t('contribution.alert.rejected') }}
+        </li>
+      </ul>
+      <hr />
+    </b-alert>
+    <b-alert v-if="list === 'all'" show dismissible fade variant="secondary" class="text-dark">
+      <h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
+      <p>
+        {{ $t('contribution.alert.communityNoteList') }}
+      </p>
+      <ul class="h2">
+        <li>
+          <b-icon icon="bell-fill" variant="primary"></b-icon>
+          {{ $t('contribution.alert.pending') }}
+        </li>
+        <li>
+          <b-icon icon="check" variant="success"></b-icon>
+          {{ $t('contribution.alert.confirm') }}
+        </li>
+      </ul>
+    </b-alert>
+  </div>
+</template>
+<script>
+export default {
+  name: 'ContributionListInfo',
+  props: {
+    list: { type: String, required: true },
+  },
+}
+</script>

frontend/src/components/Menu/SidebarNew.vue

@@ -16,9 +16,9 @@
             <b-icon icon="card-heading" aria-hidden="true"></b-icon>
             <span class="d-none d-lg-inline ml-2">{{ $t('navigation.topStories') }}</span>
           </b-nav-item>
-          <b-nav-item to="/favourites" class="mb-3">
+          <b-nav-item to="/addresses" class="mb-3">
             <b-icon icon="bookmark" aria-hidden="true"></b-icon>
-            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.favourites') }}</span>
+            <span class="d-none d-lg-inline ml-2">{{ $t('navigation.adresses') }}</span>
           </b-nav-item>
 
           <b-nav-item to="/send" class="mb-3">

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

@@ -0,0 +1,20 @@
+<template>
+  <div class="my-community">
+    <div class="d-flex">
+      <div>
+        <b-button block variant="gradido" class="rounded-right" to="#edit">schreiben</b-button>
+      </div>
+      <div>
+        <b-button block variant="gradido" class="rounded-0" to="#my">Meine Beiträge</b-button>
+      </div>
+      <div>
+        <b-button block variant="gradido" class="rounded-left" to="#all">Community</b-button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'MyCommunity',
+}
+</script>

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

@@ -0,0 +1,18 @@
+<template>
+  <div class="last-contributions">
+    <b-row class="mb-5">
+      <b-col class="h3">Letzte Beiträge</b-col>
+      <b-col cols="1" class="text-right">
+        <b-icon icon="three-dots-vertical"></b-icon>
+      </b-col>
+    </b-row>
+    <b-card class="mb-4">letzter Beitrag</b-card>
+    <b-card class="mb-4">vorletzter Beitrag</b-card>
+    <b-card class="mb-4">vor vorletzter Beitrag</b-card>
+  </div>
+</template>
+<script>
+export default {
+  name: 'LastContributions',
+}
+</script>

frontend/src/layouts/templates/ContentHeader.vue

@@ -16,7 +16,7 @@
         </b-row>
       </b-container>
       <b-container v-if="path === '/storys'"><h2>Deine Community im Überblick</h2></b-container>
-      <b-container v-if="path === '/favourites'">Deine Favoriten im Überblick</b-container>
+      <b-container v-if="path === '/addresses'">Deine Favoriten im Überblick</b-container>
       <b-container v-if="path === '/send'">
         <b-row>
           <b-col cols="6">
@@ -61,7 +61,7 @@
           </b-col>
         </b-row>
       </b-container>
-      <b-container v-if="path === '/community'">community content header</b-container>
+      <b-container v-if="path === '/community'"><my-community /></b-container>
       <b-container v-if="path === '/settings'">settings content header</b-container>
     </div>
   </div>
@@ -71,12 +71,14 @@
 import GddAmount from '@/components/Template/ContentHeader/GddAmount.vue'
 import GdtAmount from '@/components/Template/ContentHeader/GdtAmount.vue'
 import CommunityMember from '@/components/Template/ContentHeader/CommunityMember.vue'
+import MyCommunity from '@/components/Template/ContentHeader/MyCommunity.vue'
 export default {
   name: 'ContentHeader',
   components: {
     GddAmount,
     GdtAmount,
     CommunityMember,
+    MyCommunity,
   },
   props: {
     balance: { type: Number, required: true },

frontend/src/layouts/templates/RightSide.vue

@@ -36,7 +36,7 @@
         </b-col>
       </b-row>
     </b-container>
-    <b-container v-if="path === '/favourites'">favourites ride side</b-container>
+    <b-container v-if="path === '/addresses'">favourites ride side</b-container>
     <b-container v-if="path === '/send'">
       <b-row>
         <b-col>
@@ -85,7 +85,9 @@
         </b-col>
       </b-row>
     </b-container>
-    <b-container v-if="path === '/community'">community ride side</b-container>
+    <b-container v-if="path === '/community'">
+      <last-contributions />
+    </b-container>
     <b-container v-if="path === '/settings'">settings ride side</b-container>
   </div>
 </template>
@@ -93,6 +95,7 @@
 import LastTransactions from '@/components/Template/RightSide/LastTransactions.vue'
 import Favourites from '@/components/Template/RightSide/Favourites.vue'
 import TopStorysByMonth from '@/components/Template/RightSide/TopStorysByMonth.vue'
+import LastContributions from '@/components/Template/RightSide/LastContributions.vue'
 import YourOverview from '@/components/Template/RightSide/YourOverview.vue'
 
 export default {
@@ -101,6 +104,7 @@ export default {
     LastTransactions,
     Favourites,
     TopStorysByMonth,
+    LastContributions,
     YourOverview,
   },
   props: {

frontend/src/locales/de.json

@@ -229,6 +229,7 @@
   },
   "navigation": {
     "admin_area": "Adminbereich",
+    "adresses": "Addressen",
     "community": "Gemeinschaft",
     "favourites": "Favoriten",
     "info": "Information",

frontend/src/locales/en.json

@@ -229,6 +229,7 @@
   },
   "navigation": {
     "admin_area": "Admin Area",
+    "adresses": "Addresses",
     "community": "Community",
     "favourites": "Favourites",
     "info": "Information",

frontend/src/pages/Addresses.vue

@@ -1,19 +1,19 @@
 <template>
   <div>
     <b-card v-if="skeleton">
-      {{ $t('favourites') }}
+      {{ $t('addresses') }}
       <b-skeleton animation="wave" width="85%"></b-skeleton>
       <b-skeleton animation="wave" width="55%"></b-skeleton>
       <b-skeleton animation="wave" width="70%"></b-skeleton>
     </b-card>
     <b-card v-else>
-      {{ $t('favourites') }}
+      {{ $t('addresses') }}
     </b-card>
   </div>
 </template>
 <script>
 export default {
-  name: 'Favourites',
+  name: 'Addresses',
   data() {
     return {
       skeleton: true,

frontend/src/pages/Community.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="community-page">
     <div>
-      <b-tabs v-model="tabIndex" content-class="mt-3" align="center">
-        <b-tab :title="$t('community.submitContribution')">
+      <b-tabs no-nav-style v-model="tabIndex" content-class="mt-3" align="center">
+        <b-tab>
           <contribution-form
             @set-contribution="setContribution"
             @update-contribution="updateContribution"
@@ -10,34 +10,8 @@
             :updateAmount="updateAmount"
           />
         </b-tab>
-        <b-tab :title="$t('community.myContributions')">
-          <div>
-            <b-alert show dismissible fade variant="secondary" class="text-dark">
-              <h4 class="alert-heading">{{ $t('community.myContributions') }}</h4>
-              <p>
-                {{ $t('contribution.alert.myContributionNoteList') }}
-              </p>
-              <ul class="h2">
-                <li>
-                  <b-icon icon="bell-fill" variant="primary"></b-icon>
-                  {{ $t('contribution.alert.pending') }}
-                </li>
-                <li>
-                  <b-icon icon="question-square" variant="warning"></b-icon>
-                  {{ $t('contribution.alert.in_progress') }}
-                </li>
-                <li>
-                  <b-icon icon="check" variant="success"></b-icon>
-                  {{ $t('contribution.alert.confirm') }}
-                </li>
-                <li>
-                  <b-icon icon="x-circle" variant="danger"></b-icon>
-                  {{ $t('contribution.alert.rejected') }}
-                </li>
-              </ul>
-              <hr />
-            </b-alert>
-          </div>
+        <b-tab>
+          <contribution-list-info list="my" />
           <contribution-list
             :items="items"
             @update-list-contributions="updateListContributions"
@@ -49,23 +23,8 @@
             :pageSize="pageSize"
           />
         </b-tab>
-        <b-tab :title="$t('navigation.community')">
-          <b-alert show dismissible fade variant="secondary" class="text-dark">
-            <h4 class="alert-heading">{{ $t('navigation.community') }}</h4>
-            <p>
-              {{ $t('contribution.alert.communityNoteList') }}
-            </p>
-            <ul class="h2">
-              <li>
-                <b-icon icon="bell-fill" variant="primary"></b-icon>
-                {{ $t('contribution.alert.pending') }}
-              </li>
-              <li>
-                <b-icon icon="check" variant="success"></b-icon>
-                {{ $t('contribution.alert.confirm') }}
-              </li>
-            </ul>
-          </b-alert>
+        <b-tab>
+          <contribution-list-info list="all" />
           <contribution-list
             :items="itemsAll"
             @update-list-contributions="updateListAllContributions"
@@ -83,17 +42,20 @@
 <script>
 import ContributionForm from '@/components/Contributions/ContributionForm.vue'
 import ContributionList from '@/components/Contributions/ContributionList.vue'
+import ContributionListInfo from '@/components/Contributions/ContributionListInfo.vue'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions, verifyLogin } from '@/graphql/queries'
 
 export default {
   name: 'Community',
   components: {
+    ContributionListInfo,
     ContributionForm,
     ContributionList,
   },
   data() {
     return {
+      tabLinkHashes: ['#edit', '#my', '#all'],
       tabIndex: 0,
       items: [],
       itemsAll: [],
@@ -111,6 +73,21 @@ export default {
       updateAmount: '',
     }
   },
+  computed: {
+    hashLink() {
+      return this.$root.hash
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === this.$route.hash)
+    })
+  },
+  watch: {
+    $route(to, from) {
+      this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === to.hash)
+    },
+  },
   methods: {
     setContribution(data) {
       this.$apollo
@@ -268,6 +245,7 @@ export default {
       this.items.find((item) => item.id === id).state = 'PENDING'
     },
   },
+
   created() {
     // verifyLogin is important at this point so that creation is updated on reload if they are deleted in a session in the admin area.
     this.verifyLogin()

frontend/src/routes/routes.js

@@ -69,8 +69,8 @@ const routes = [
     },
   },
   {
-    path: '/favourites',
-    component: () => import('@/pages/Favourites.vue'),
+    path: '/addresses',
+    component: () => import('@/pages/Addresses.vue'),
     meta: {
       requiresAuth: true,
     },