From f5fe88cffcbfaa768f32c08ad261b6d5807a962b Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Thu, 12 Jan 2023 15:41:41 +0100
Subject: [PATCH 1/3] setup slots for content header and right side

---
 frontend/src/layouts/DashboardLayout.vue      | 148 ++++++++++++++++-
 .../src/layouts/templates/ContentHeader.vue   | 105 +-----------
 frontend/src/layouts/templates/RightSide.vue  | 156 ++----------------
 3 files changed, 157 insertions(+), 252 deletions(-)

diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index e5bf394f2..1f37d872a 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -35,7 +35,87 @@
                     :balance="balance"
                     :GdtBalance="GdtBalance"
                     :totalUsers="totalUsers"
-                  />
+                  >
+                    <template #overview>
+                      <b-row>
+                        <b-col cols="12" lg="5">
+                          <div>
+                            <gdd-amount :balance="balance" :showStatus="false" :badgeShow="false" />
+                          </div>
+                        </b-col>
+                        <b-col cols="12" lg="7">
+                          <div>
+                            <community-member :totalUsers="totalUsers" />
+                          </div>
+                        </b-col>
+                      </b-row>
+                    </template>
+                    <template #send>
+                      <b-row>
+                        <b-col cols="12" lg="6">
+                          <div>
+                            <gdd-amount
+                              :balance="balance"
+                              :badge="true"
+                              :showStatus="true"
+                              :badgeShow="false"
+                            />
+                          </div>
+                        </b-col>
+                        <b-col cols="12" lg="6">
+                          <div>
+                            <router-link to="gdt">
+                              <gdt-amount :GdtBalance="GdtBalance" :badgeShow="false" />
+                            </router-link>
+                          </div>
+                        </b-col>
+                      </b-row>
+                    </template>
+                    <template #transactions>
+                      <b-row>
+                        <b-col cols="12" lg="6">
+                          <div>
+                            <router-link to="transactions">
+                              <gdd-amount :balance="balance" :showStatus="true" />
+                            </router-link>
+                          </div>
+                        </b-col>
+                        <b-col cols="12" lg="6">
+                          <div>
+                            <router-link to="gdt">
+                              <gdt-amount :GdtBalance="GdtBalance" />
+                            </router-link>
+                          </div>
+                        </b-col>
+                      </b-row>
+                    </template>
+                    <template #gdt>
+                      <b-row>
+                        <b-col cols="12" lg="6">
+                          <div>
+                            <router-link to="transactions">
+                              <gdd-amount :balance="balance" :showStatus="false" />
+                            </router-link>
+                          </div>
+                        </b-col>
+                        <b-col cols="12" lg="6">
+                          <div>
+                            <router-link to="gdt">
+                              <gdt-amount
+                                :badge="true"
+                                :showStatus="true"
+                                :GdtBalance="GdtBalance"
+                              />
+                            </router-link>
+                          </div>
+                        </b-col>
+                      </b-row>
+                    </template>
+                    <template #community>
+                      <nav-community />
+                    </template>
+                    <template #settings></template>
+                  </content-header>
                 </b-col>
               </b-row>
             </b-col>
@@ -46,7 +126,32 @@
                 :transactionCount="transactionCount"
                 :transactionLinkCount="transactionLinkCount"
                 @set-tunneled-email="setTunneledEmail"
-              />
+              >
+                <template #transactions>
+                  <b-container>
+                    <b-row>
+                      <b-col>
+                        <div>
+                          <last-transactions
+                            :transactions="transactions"
+                            :transactionCount="transactionCount"
+                            :transactionLinkCount="transactionLinkCount"
+                            v-on="$listeners"
+                          />
+                        </div>
+                      </b-col>
+                    </b-row>
+                  </b-container>
+                </template>
+                <template #community>
+                  <b-container>
+                    <contribution-info />
+                  </b-container>
+                </template>
+                <template #empty>
+                  <b-container />
+                </template>
+              </right-side>
             </b-col>
             <b-col cols="12">
               <!-- router-view -->
@@ -75,7 +180,32 @@
             :transactionCount="transactionCount"
             :transactionLinkCount="transactionLinkCount"
             @set-tunneled-email="setTunneledEmail"
-          />
+          >
+            <template #transactions>
+              <b-container>
+                <b-row>
+                  <b-col>
+                    <div>
+                      <last-transactions
+                        :transactions="transactions"
+                        :transactionCount="transactionCount"
+                        :transactionLinkCount="transactionLinkCount"
+                        v-on="$listeners"
+                      />
+                    </div>
+                  </b-col>
+                </b-row>
+              </b-container>
+            </template>
+            <template #community>
+              <b-container>
+                <contribution-info />
+              </b-container>
+            </template>
+            <template #empty>
+              <b-container />
+            </template>
+          </right-side>
         </b-col>
       </b-row>
       <b-row>
@@ -102,6 +232,12 @@ import { logout } from '@/graphql/mutations'
 import ContentFooter from '@/components/ContentFooter.vue'
 import { FadeTransition } from 'vue2-transitions'
 import CONFIG from '@/config'
+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 NavCommunity from '@/components/Template/ContentHeader/NavCommunity.vue'
+import LastTransactions from '@/components/Template/RightSide/LastTransactions.vue'
+import ContributionInfo from '@/components/Template/RightSide/ContributionInfo.vue'
 
 export default {
   name: 'DashboardLayout',
@@ -116,6 +252,12 @@ export default {
     ContentFooter,
     FadeTransition,
     Breadcrumb,
+    GddAmount,
+    GdtAmount,
+    CommunityMember,
+    NavCommunity,
+    LastTransactions,
+    ContributionInfo,
   },
   data() {
     return {
diff --git a/frontend/src/layouts/templates/ContentHeader.vue b/frontend/src/layouts/templates/ContentHeader.vue
index 58ba90cae..407d8dcad 100644
--- a/frontend/src/layouts/templates/ContentHeader.vue
+++ b/frontend/src/layouts/templates/ContentHeader.vue
@@ -1,116 +1,15 @@
 <template>
   <div>
-    <div v-if="path === '/overview'">
-      <b-row>
-        <b-col cols="12" lg="5">
-          <div>
-            <gdd-amount :balance="balance" :showStatus="false" :path="path" :badgeShow="false" />
-          </div>
-        </b-col>
-        <b-col cols="12" lg="7">
-          <div>
-            <community-member :totalUsers="totalUsers" />
-          </div>
-        </b-col>
-      </b-row>
-    </div>
-    <!-- <div v-if="path === '/storys'"></div>
-    <div v-if="path === '/addresses'"></div> -->
-    <div v-if="path === '/send'">
-      <b-row>
-        <b-col cols="12" lg="6">
-          <div>
-            <gdd-amount :balance="balance" :badge="true" :showStatus="true" :badgeShow="false" />
-          </div>
-        </b-col>
-        <b-col cols="12" lg="6">
-          <div>
-            <router-link to="gdt">
-              <gdt-amount :GdtBalance="GdtBalance" :badgeShow="false" />
-            </router-link>
-          </div>
-        </b-col>
-      </b-row>
-    </div>
-    <div v-if="path === '/transactions'">
-      <b-row>
-        <b-col cols="12" lg="6">
-          <div>
-            <router-link to="transactions">
-              <gdd-amount :balance="balance" :showStatus="true" />
-            </router-link>
-          </div>
-        </b-col>
-        <b-col cols="12" lg="6">
-          <div>
-            <router-link to="gdt">
-              <gdt-amount :GdtBalance="GdtBalance" />
-            </router-link>
-          </div>
-        </b-col>
-      </b-row>
-    </div>
-    <div v-if="path === '/gdt'">
-      <b-row>
-        <b-col cols="12" lg="6">
-          <div>
-            <router-link to="transactions">
-              <gdd-amount :balance="balance" :showStatus="false" />
-            </router-link>
-          </div>
-        </b-col>
-        <b-col cols="12" lg="6">
-          <div>
-            <router-link to="gdt">
-              <gdt-amount :badge="true" :showStatus="true" :GdtBalance="GdtBalance" />
-            </router-link>
-          </div>
-        </b-col>
-      </b-row>
-    </div>
-    <!-- <div v-if="path === '/profile'">
-      <b-row>
-        <b-col>
-          <div class="p-4 bg-white appBoxShadow gradido-border-radius">
-            <b-row>
-              <b-col cols="8" class="h3">Zeige deiner Community wer du bist.</b-col>
-              <b-col cols="4" class="text-small text-muted">vor 4 Stunden geändert</b-col>
-            </b-row>
-            <b-row>
-              <b-col cols="2" class=""><b-avatar size="72px" rounded="lg"></b-avatar></b-col>
-              <b-col cols="10" class="">Text</b-col>
-            </b-row>
-          </div>
-        </b-col>
-      </b-row>
-    </div> -->
-    <div v-if="path === '/community'"><nav-community /></div>
-    <div v-if="path === '/settings'"></div>
+    <slot :name="path" />
   </div>
 </template>
 
 <script>
-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 NavCommunity from '@/components/Template/ContentHeader/NavCommunity.vue'
 export default {
   name: 'ContentHeader',
-  components: {
-    GddAmount,
-    GdtAmount,
-    CommunityMember,
-    NavCommunity,
-  },
-  props: {
-    balance: { type: Number, required: true },
-    GdtBalance: { type: Number, required: true },
-    totalUsers: { type: Number, required: true },
-  },
-
   computed: {
     path() {
-      return this.$route.path
+      return this.$route.path.replace(/^\//, '')
     },
   },
 }
diff --git a/frontend/src/layouts/templates/RightSide.vue b/frontend/src/layouts/templates/RightSide.vue
index 8ee92b117..779a4e5c8 100644
--- a/frontend/src/layouts/templates/RightSide.vue
+++ b/frontend/src/layouts/templates/RightSide.vue
@@ -1,157 +1,21 @@
 <template>
   <div class="right-side mt-3 mt-lg-0">
-    <b-container v-if="path === '/overview'" fluid="md">
-      <!-- <b-row>
-        <b-col>
-          <div class="p-4">
-            <favourites />
-          </div>
-        </b-col>
-      </b-row> -->
-      <b-row>
-        <b-col>
-          <div>
-            <last-transactions
-              :transactions="transactions"
-              :transactionCount="transactionCount"
-              :transactionLinkCount="transactionLinkCount"
-              v-on="$listeners"
-            />
-          </div>
-        </b-col>
-      </b-row>
-    </b-container>
-    <!-- <b-container v-if="path === '/storys'">
-      <b-row>
-        <b-col>
-          <div class="p-4">
-            <favourites />
-          </div>
-        </b-col>
-      </b-row>
-      <b-row class="mt-3 mt-lg-5">
-        <b-col>
-          <div class="p-4 h-100">
-            <top-storys-by-month />
-          </div>
-        </b-col>
-      </b-row>
-    </b-container> -->
-    <!-- <b-container v-if="path === '/addresses'">favourites ride side</b-container> -->
-    <b-container v-if="path === '/send'">
-      <!-- <b-row>
-        <b-col>
-          <div class="p-4">
-            <favourites />
-          </div>
-        </b-col>
-      </b-row> -->
-      <b-row>
-        <b-col>
-          <div>
-            <last-transactions
-              :transactions="transactions"
-              :transactionCount="transactionCount"
-              :transactionLinkCount="transactionLinkCount"
-              v-on="$listeners"
-            />
-          </div>
-        </b-col>
-      </b-row>
-    </b-container>
-    <b-container v-if="path === '/transactions'">
-      <!-- <b-row>
-        <b-col>
-          <div class="p-4">
-            <favourites />
-          </div>
-        </b-col>
-      </b-row> -->
-      <b-row>
-        <b-col>
-          <div>
-            <last-transactions
-              :transactions="transactions"
-              :transactionCount="transactionCount"
-              :transactionLinkCount="transactionLinkCount"
-              v-on="$listeners"
-            />
-          </div>
-        </b-col>
-      </b-row>
-    </b-container>
-    <b-container v-if="path === '/gdt'">
-      <!-- <b-row>
-        <b-col>
-          <div class="p-4">
-            <favourites />
-          </div>
-        </b-col>
-      </b-row> -->
-      <b-row>
-        <b-col>
-          <div>
-            <last-transactions
-              :transactions="transactions"
-              :transactionCount="transactionCount"
-              :transactionLinkCount="transactionLinkCount"
-              v-on="$listeners"
-            />
-          </div>
-        </b-col>
-      </b-row>
-    </b-container>
-    <!-- <b-container v-if="path === '/profile'">
-      <b-row>
-        <b-col>
-          <div class="p-4">
-            <favourites />
-          </div>
-        </b-col>
-      </b-row>
-      <b-row class="mt-3 mt-lg-5">
-        <b-col>
-          <div class="p-4 h-100">
-            <your-overview />
-          </div>
-        </b-col>
-      </b-row>
-    </b-container> -->
-    <b-container v-if="path === '/community'">
-      <contribution-info />
-      <!-- <last-contributions class="mt-5" /> -->
-    </b-container>
-    <b-container v-if="path === '/settings'"></b-container>
+    <slot :name="name" />
   </div>
 </template>
 <script>
-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 ContributionInfo from '@/components/Template/RightSide/ContributionInfo.vue'
-// import LastContributions from '@/components/Template/RightSide/LastContributions.vue'
-// import YourOverview from '@/components/Template/RightSide/YourOverview.vue'
-
 export default {
   name: 'RightSide',
-  components: {
-    LastTransactions,
-    // Favourites,
-    // TopStorysByMonth,
-    // LastContributions,
-    ContributionInfo,
-    // YourOverview,
-  },
-  props: {
-    transactions: {
-      default: () => [],
-    },
-    transactionCount: { type: Number, default: 0 },
-    transactionLinkCount: { type: Number, default: 0 },
-  },
   computed: {
-    path() {
-      return this.$route.path
+    name() {
+      switch (this.$route.path.replace(/^\//, '')) {
+        case 'settings':
+          return 'empty'
+        case 'community':
+          return 'community'
+        default:
+          return 'transactions'
+      }
     },
   },
 }

From 031da1b028a5ee63fe2fd4d1f8be28c821d4c925 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Fri, 13 Jan 2023 15:24:54 +0100
Subject: [PATCH 2/3] more compact right side

---
 frontend/src/layouts/DashboardLayout.vue     | 56 ++++++--------------
 frontend/src/layouts/templates/RightSide.vue |  4 +-
 2 files changed, 19 insertions(+), 41 deletions(-)

diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index 1f37d872a..148a0cb59 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -128,29 +128,17 @@
                 @set-tunneled-email="setTunneledEmail"
               >
                 <template #transactions>
-                  <b-container>
-                    <b-row>
-                      <b-col>
-                        <div>
-                          <last-transactions
-                            :transactions="transactions"
-                            :transactionCount="transactionCount"
-                            :transactionLinkCount="transactionLinkCount"
-                            v-on="$listeners"
-                          />
-                        </div>
-                      </b-col>
-                    </b-row>
-                  </b-container>
+                  <last-transactions
+                    :transactions="transactions"
+                    :transactionCount="transactionCount"
+                    :transactionLinkCount="transactionLinkCount"
+                    v-on="$listeners"
+                  />
                 </template>
                 <template #community>
-                  <b-container>
-                    <contribution-info />
-                  </b-container>
-                </template>
-                <template #empty>
-                  <b-container />
+                  <contribution-info />
                 </template>
+                <template #empty />
               </right-side>
             </b-col>
             <b-col cols="12">
@@ -182,29 +170,17 @@
             @set-tunneled-email="setTunneledEmail"
           >
             <template #transactions>
-              <b-container>
-                <b-row>
-                  <b-col>
-                    <div>
-                      <last-transactions
-                        :transactions="transactions"
-                        :transactionCount="transactionCount"
-                        :transactionLinkCount="transactionLinkCount"
-                        v-on="$listeners"
-                      />
-                    </div>
-                  </b-col>
-                </b-row>
-              </b-container>
+              <last-transactions
+                :transactions="transactions"
+                :transactionCount="transactionCount"
+                :transactionLinkCount="transactionLinkCount"
+                v-on="$listeners"
+              />
             </template>
             <template #community>
-              <b-container>
-                <contribution-info />
-              </b-container>
-            </template>
-            <template #empty>
-              <b-container />
+              <contribution-info />
             </template>
+            <template #empty />
           </right-side>
         </b-col>
       </b-row>
diff --git a/frontend/src/layouts/templates/RightSide.vue b/frontend/src/layouts/templates/RightSide.vue
index 779a4e5c8..0a92cb1a1 100644
--- a/frontend/src/layouts/templates/RightSide.vue
+++ b/frontend/src/layouts/templates/RightSide.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="right-side mt-3 mt-lg-0">
-    <slot :name="name" />
+    <b-container>
+      <slot :name="name" />
+    </b-container>
   </div>
 </template>
 <script>

From 82a6c616331c94dfdba143bd91e879a4ee07ea86 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Mon, 16 Jan 2023 11:37:13 +0100
Subject: [PATCH 3/3] mock replace in route.path, stub last transactions

---
 frontend/src/layouts/DashboardLayout.spec.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/layouts/DashboardLayout.spec.js b/frontend/src/layouts/DashboardLayout.spec.js
index efed52c78..68fcb5ad5 100644
--- a/frontend/src/layouts/DashboardLayout.spec.js
+++ b/frontend/src/layouts/DashboardLayout.spec.js
@@ -15,6 +15,7 @@ const routerPushMock = jest.fn()
 const stubs = {
   RouterLink: RouterLinkStub,
   RouterView: true,
+  LastTransactions: true,
 }
 
 const mocks = {
@@ -29,6 +30,9 @@ const mocks = {
     meta: {
       hideFooter: false,
     },
+    path: {
+      replace: jest.fn(),
+    },
   },
   $router: {
     push: routerPushMock,