From a38cb71da597f668aa3181725cea218163c2b2a8 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 7 Dec 2022 10:32:44 +0100
Subject: [PATCH] hideAmount style for GDD and GDD

---
 .../Template/ContentHeader/GddAmount.vue      | 32 ++++++++------
 .../Template/ContentHeader/GdtAmount.vue      | 31 +++++++------
 frontend/src/store/store.js                   |  8 ++--
 frontend/src/store/store.test.js              | 43 ++++++++++++++++++-
 4 files changed, 82 insertions(+), 32 deletions(-)

diff --git a/frontend/src/components/Template/ContentHeader/GddAmount.vue b/frontend/src/components/Template/ContentHeader/GddAmount.vue
index 55d698785..8257826a5 100644
--- a/frontend/src/components/Template/ContentHeader/GddAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GddAmount.vue
@@ -28,19 +28,25 @@
           </div>
         </b-col> -->
       </b-row>
-      <div class="pointer">
-        <b-icon
-          :icon="hideAmount ? 'eye' : 'eye-slash'"
-          class="mr-3 gradido-global-border-color-accent"
-          @click="$store.commit('hideAmountGDD', !hideAmount)"
-        ></b-icon>
-        <span v-if="hideAmount" class="font-weight-bold gradido-global-color-accent">
-          {{ $t('asterisks') }}
-        </span>
-        <span v-else class="font-weight-bold gradido-global-color-accent">
-          {{ balance | GDD }}
-        </span>
-      </div>
+
+      <b-row>
+        <b-col cols="10">
+          <b-icon icon="layers" class="mr-3 gradido-global-border-color-accent"></b-icon>
+          <span v-if="hideAmount" class="font-weight-bold gradido-global-color-accent">
+            {{ $t('asterisks') }}
+          </span>
+          <span v-else class="font-weight-bold gradido-global-color-accent">
+            {{ balance | GDD }}
+          </span>
+        </b-col>
+        <b-col cols="2" class="border-left border-light">
+          <b-icon
+            :icon="hideAmount ? 'eye' : 'eye-slash'"
+            class="mr-3 gradido-global-border-color-accent"
+            @click="$store.commit('hideAmountGDD', !hideAmount)"
+          ></b-icon>
+        </b-col>
+      </b-row>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/Template/ContentHeader/GdtAmount.vue b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
index c55f1d363..8d9557e49 100644
--- a/frontend/src/components/Template/ContentHeader/GdtAmount.vue
+++ b/frontend/src/components/Template/ContentHeader/GdtAmount.vue
@@ -25,19 +25,24 @@
           </div>
         </b-col> -->
       </b-row>
-      <div class="pointer">
-        <b-icon
-          :icon="hideAmount ? 'eye' : 'eye-slash'"
-          class="mr-3 gradido-global-border-color-accent"
-          @click="$store.commit('hideAmountGDT', !hideAmount)"
-        ></b-icon>
-        <span v-if="hideAmount" class="font-weight-bold gradido-global-color-accent">
-          {{ $t('asterisks') }}
-        </span>
-        <span v-else class="font-weight-bold gradido-global-color-accent">
-          {{ $n(GdtBalance, 'decimal') }} {{ $t('GDT') }}
-        </span>
-      </div>
+      <b-row>
+        <b-col cols="10">
+          <b-icon icon="layers" class="mr-3 gradido-global-border-color-accent"></b-icon>
+          <span v-if="hideAmount" class="font-weight-bold gradido-global-color-accent">
+            {{ $t('asterisks') }}
+          </span>
+          <span v-else class="font-weight-bold gradido-global-color-accent">
+            {{ $n(GdtBalance, 'decimal') }} {{ $t('GDT') }}
+          </span>
+        </b-col>
+        <b-col cols="2" class="border-left border-light">
+          <b-icon
+            :icon="hideAmount ? 'eye' : 'eye-slash'"
+            class="mr-3 gradido-global-border-color-accent"
+            @click="$store.commit('hideAmountGDT', !hideAmount)"
+          ></b-icon>
+        </b-col>
+      </b-row>
     </div>
   </div>
 </template>
diff --git a/frontend/src/store/store.js b/frontend/src/store/store.js
index 25162ea0e..e2805cf28 100644
--- a/frontend/src/store/store.js
+++ b/frontend/src/store/store.js
@@ -84,8 +84,8 @@ export const actions = {
     commit('publisherId', null)
     commit('isAdmin', false)
     commit('creation', null)
-    commit('hideAmountGDD', true)
-    commit('hideAmountGDT', true)
+    commit('hideAmountGDD', false)
+    commit('hideAmountGDT', false)
     localStorage.clear()
   },
 }
@@ -112,8 +112,8 @@ try {
       hasElopage: false,
       publisherId: null,
       creation: null,
-      hideAmountGDD: true,
-      hideAmountGDT: true,
+      hideAmountGDD: false,
+      hideAmountGDT: false,
     },
     getters: {},
     // Syncronous mutation of the state
diff --git a/frontend/src/store/store.test.js b/frontend/src/store/store.test.js
index 651a3ccc5..157056b7e 100644
--- a/frontend/src/store/store.test.js
+++ b/frontend/src/store/store.test.js
@@ -31,6 +31,8 @@ const {
   isAdmin,
   hasElopage,
   creation,
+  hideAmountGDD,
+  hideAmountGDT,
 } = mutations
 const { login, logout } = actions
 
@@ -148,6 +150,22 @@ describe('Vuex store', () => {
         expect(state.creation).toEqual(true)
       })
     })
+
+    describe('hideAmountGDD', () => {
+      it('sets the state of hideAmountGDD', () => {
+        const state = { hideAmountGDD: true }
+        creation(state, true)
+        expect(state.hideAmountGDD).toEqual(true)
+      })
+    })
+
+    describe('hideAmountGDT', () => {
+      it('sets the state of hideAmountGDT', () => {
+        const state = { hideAmountGDT: true }
+        creation(state, true)
+        expect(state.hideAmountGDT).toEqual(true)
+      })
+    })
   })
 
   describe('actions', () => {
@@ -166,11 +184,13 @@ describe('Vuex store', () => {
         publisherId: 1234,
         isAdmin: true,
         creation: ['1000', '1000', '1000'],
+        hideAmountGDD: true,
+        hideAmountGDT: true,
       }
 
       it('calls nine commits', () => {
         login({ commit, state }, commitedData)
-        expect(commit).toHaveBeenCalledTimes(9)
+        expect(commit).toHaveBeenCalledTimes(11)
       })
 
       it('commits email', () => {
@@ -217,6 +237,16 @@ describe('Vuex store', () => {
         login({ commit, state }, commitedData)
         expect(commit).toHaveBeenNthCalledWith(9, 'creation', ['1000', '1000', '1000'])
       })
+
+      it('commits hideAmountGDD', () => {
+        login({ commit, state }, hideAmountGDD)
+        expect(commit).toHaveBeenNthCalledWith(10, 'hideAmountGDD', true)
+      })
+
+      it('commits hideAmountGDT', () => {
+        login({ commit, state }, hideAmountGDT)
+        expect(commit).toHaveBeenNthCalledWith(11, 'hideAmountGDT', true)
+      })
     })
 
     describe('logout', () => {
@@ -225,7 +255,7 @@ describe('Vuex store', () => {
 
       it('calls nine commits', () => {
         logout({ commit, state })
-        expect(commit).toHaveBeenCalledTimes(9)
+        expect(commit).toHaveBeenCalledTimes(11)
       })
 
       it('commits token', () => {
@@ -273,6 +303,15 @@ describe('Vuex store', () => {
         expect(commit).toHaveBeenNthCalledWith(9, 'creation', null)
       })
 
+      it('commits hideAmountGDD', () => {
+        logout({ commit, state })
+        expect(commit).toHaveBeenNthCalledWith(10, 'hideAmountGDD', true)
+      })
+
+      it('commits hideAmountGDT', () => {
+        logout({ commit, state })
+        expect(commit).toHaveBeenNthCalledWith(11, 'hideAmountGDT', true)
+      })
       // how to get this working?
       it.skip('calls localStorage.clear()', () => {
         const clearStorageMock = jest.fn()