From 63ee06f347095800a3492b62c3c63c8a2330ba78 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 21 Nov 2022 05:28:53 +0100
Subject: [PATCH] Structure of the community prepared

---
 frontend/src/assets/scss/gradido-template.scss |  6 +++++-
 .../Contributions/OpenCreationsAmount.vue      | 18 ++++++++++++++++++
 .../Template/ContentHeader/GdtAmount.vue       |  5 ++++-
 .../Template/ContentHeader/MyCommunity.vue     | 14 --------------
 .../Template/ContentHeader/NavCommunity.vue    | 14 ++++++++++++++
 .../src/layouts/templates/ContentHeader.vue    |  6 +++---
 frontend/src/pages/Community.vue               | 11 ++++++-----
 7 files changed, 50 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/components/Contributions/OpenCreationsAmount.vue
 delete mode 100644 frontend/src/components/Template/ContentHeader/MyCommunity.vue
 create mode 100644 frontend/src/components/Template/ContentHeader/NavCommunity.vue

diff --git a/frontend/src/assets/scss/gradido-template.scss b/frontend/src/assets/scss/gradido-template.scss
index 3422fe01d..f10284285 100644
--- a/frontend/src/assets/scss/gradido-template.scss
+++ b/frontend/src/assets/scss/gradido-template.scss
@@ -113,7 +113,11 @@ a:hover,
   height: 50px;
 }
 
-.rounded-right {
+// .rounded-right-17 {
+//   border-top-right-radius: 17px !important;
+//   border-bottom-right-radius: 17px !important;
+// }
+.input-group .rounded-right {
   border-top-right-radius: 17px !important;
   border-bottom-right-radius: 17px !important;
 }
diff --git a/frontend/src/components/Contributions/OpenCreationsAmount.vue b/frontend/src/components/Contributions/OpenCreationsAmount.vue
new file mode 100644
index 000000000..4760280b4
--- /dev/null
+++ b/frontend/src/components/Contributions/OpenCreationsAmount.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="open-creations-amount">
+    <b-table striped hover :items="items"></b-table>
+  </div>
+</template>
+<script>
+export default {
+  name: 'OpenCreationsAmount',
+  data() {
+    return {
+      items: [
+        { monat: 'Oktober', status: 'Max. erreicht', eingereicht: '50 h', stundenOffen: '0 h' },
+        { monat: 'November', status: 'einreichen', eingereicht: '20 h', stundenOffen: '30 h' },
+      ],
+    }
+  },
+}
+</script>
diff --git a/frontend/src/components/Template/ContentHeader/GdtAmount.vue b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
index fb26bde90..ff4d949fe 100644
--- a/frontend/src/components/Template/ContentHeader/GdtAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="wallet-amount">GDT Amount components</div>
+  <div class="wallet-amount">
+    <div>GDT Amount components</div>
+    <div>0.00 GDT</div>
+  </div>
 </template>
 <script>
 export default {
diff --git a/frontend/src/components/Template/ContentHeader/MyCommunity.vue b/frontend/src/components/Template/ContentHeader/MyCommunity.vue
deleted file mode 100644
index 5768cb9e2..000000000
--- a/frontend/src/components/Template/ContentHeader/MyCommunity.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="my-community">
-    <div class="d-flex">
-      <b-button block variant="gradido" class="rounded-right" to="#edit">Schreiben</b-button>
-      <b-button block variant="gradido" class="rounded-0" to="#my">Meine Beiträge</b-button>
-      <b-button block variant="gradido" class="rounded-left" to="#all">Community</b-button>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  name: 'MyCommunity',
-}
-</script>
diff --git a/frontend/src/components/Template/ContentHeader/NavCommunity.vue b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
new file mode 100644
index 000000000..a16c5747b
--- /dev/null
+++ b/frontend/src/components/Template/ContentHeader/NavCommunity.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="nav-community">
+    <div class="d-flex justify-content-center">
+      <b-button variant="gradido" class="rounded-right" to="#edit">Schreiben</b-button>
+      <b-button variant="gradido" class="rounded-0" to="#my">Meine Beiträge</b-button>
+      <b-button variant="gradido" class="rounded-left" to="#all">Community</b-button>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'NavCommunity',
+}
+</script>
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index 37c4f3e92..bba8e9904 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -61,7 +61,7 @@
           </b-col>
         </b-row>
       </b-container>
-      <b-container v-if="path === '/community'"><my-community /></b-container>
+      <b-container v-if="path === '/community'"><nav-community /></b-container>
       <b-container v-if="path === '/settings'">settings content header</b-container>
     </div>
   </div>
@@ -71,14 +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'
+import NavCommunity from '@/components/Template/ContentHeader/NavCommunity.vue'
 export default {
   name: 'ContentHeader',
   components: {
     GddAmount,
     GdtAmount,
     CommunityMember,
-    MyCommunity,
+    NavCommunity,
   },
   props: {
     balance: { type: Number, required: true },
diff --git a/frontend/src/pages/Community.vue b/frontend/src/pages/Community.vue
index e5902d130..2e378525f 100644
--- a/frontend/src/pages/Community.vue
+++ b/frontend/src/pages/Community.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="community-page">
+    <open-creations-amount v-if="hashLink === '#edit'" />
     <div>
       <b-tabs no-nav-style v-model="tabIndex" content-class="mt-3" align="center">
         <b-tab>
@@ -43,6 +44,7 @@
 import ContributionForm from '@/components/Contributions/ContributionForm.vue'
 import ContributionList from '@/components/Contributions/ContributionList.vue'
 import ContributionListInfo from '@/components/Contributions/ContributionListInfo.vue'
+import OpenCreationsAmount from '@/components/Contributions/OpenCreationsAmount.vue'
 import { createContribution, updateContribution, deleteContribution } from '@/graphql/mutations'
 import { listContributions, listAllContributions, verifyLogin } from '@/graphql/queries'
 
@@ -52,9 +54,11 @@ export default {
     ContributionListInfo,
     ContributionForm,
     ContributionList,
+    OpenCreationsAmount,
   },
   data() {
     return {
+      hashLink: '',
       tabLinkHashes: ['#edit', '#my', '#all'],
       tabIndex: 0,
       items: [],
@@ -73,19 +77,16 @@ export default {
       updateAmount: '',
     }
   },
-  computed: {
-    hashLink() {
-      return this.$root.hash
-    },
-  },
   mounted() {
     this.$nextTick(() => {
       this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === this.$route.hash)
+      this.hashLink = this.$route.hash
     })
   },
   watch: {
     $route(to, from) {
       this.tabIndex = this.tabLinkHashes.findIndex((hashLink) => hashLink === to.hash)
+      this.hashLink = to.hash
     },
   },
   methods: {