From 9f8abd2a8642a2f10a99f98b567c9781bb101cf7 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Thu, 20 May 2021 09:44:56 +0200
Subject: [PATCH] add geticon and getClass for send type from transaction
 request

---
 frontend/src/App.vue                          | 33 +++++++----
 frontend/src/routes/routes.js                 |  4 +-
 .../AccountOverview/GddTransactionList.vue    | 59 +++++++++----------
 .../{UserProfileCard.vue => UserProfile.vue}  |  0
 4 files changed, 50 insertions(+), 46 deletions(-)
 rename frontend/src/views/Pages/{UserProfileCard.vue => UserProfile.vue} (100%)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d44d64ab3..a6613bec1 100755
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -49,40 +49,49 @@ a,
 .copyright {
   color: #5a7b02;
 }
-gradido-global-color-text {
+.font1_2em {
+  font-size: 1.2em;
+}
+.font2em {
+  font-size: 1.5em;
+}
+.gradido-global-color-text {
   color: #3d443b;
 }
-gradido-global-color-accent {
+.gradido-global-color-accent {
   color: #047006;
 }
-gradido-global-color-6e0a9c9e {
+.gradido-global-color-6e0a9c9e {
   color: #000;
 }
-gradido-global-color-2d0fb154 {
+.gradido-global-color-2d0fb154 {
   color: #047006;
 }
-gradido-global-color-16efe88c {
+.gradido-global-color-16efe88c {
   color: #7ebc55;
 }
-gradido-global-color-1939326 {
+.gradido-global-color-1939326 {
   color: #f6fff6;
 }
-gradido-global-color-9d79fc1 {
+.gradido-global-color-9d79fc1 {
   color: #047006;
 }
-gradido-global-color-6347f4d {
+.gradido-global-color-6347f4d {
   color: #5a7b02;
 }
-gradido-global-color-4fbc19a {
+.gradido-global-color-4fbc19a {
   color: #014034;
 }
-gradido-global-color-d341874 {
+.gradido-global-color-d341874 {
   color: #b6d939;
 }
-gradido-global-color-619d338 {
+.gradido-global-color-619d338 {
   color: #8ebfb1;
 }
-gradido-global-color-44819a9 {
+.gradido-global-color-44819a9 {
   color: #026873;
 }
+.gradido-global-color-gray {
+  color: #858383;
+}
 </style>
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 0021aa1ed..d96f4fb62 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -16,7 +16,7 @@ const routes = [
   },
   {
     path: '/profile',
-    component: () => import('../views/Pages/UserProfileCard.vue'),
+    component: () => import('../views/Pages/UserProfile.vue'),
     meta: {
       requiresAuth: true,
     },
@@ -53,8 +53,6 @@ const routes = [
       const validFrom = ['/password', '/reset', '/register']
       if (!validFrom.includes(from.path)) {
         next({ path: '/login' })
-      } else {
-        next()
       }
     },
   },
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index 7a7c5cb7f..cd12c4e5a 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -8,36 +8,20 @@
       >
         <div class="d-flex">
           <div style="width: 10%">
-            <b-icon
-              v-if="item.type === 'send'"
-              icon="arrow-left-circle"
-              class="m-mb-1 text-danger font2em"
-            ></b-icon>
-            <b-icon
-              v-else-if="item.type === 'receive'"
-              icon="arrow-right-circle"
-              class="m-md-1 text-success font2em"
-            ></b-icon>
-            <b-icon
-              v-else-if="item.type === 'creation'"
-              icon="gift"
-              class="m-md-1 font2em"
-              style="color: green"
-            ></b-icon>
-            <b-icon v-else icon="droplet-half" class="m-md-1 font2em" style="color: gray"></b-icon>
+            <b-icon :icon="getIcon(item)" :class="getClass(item)" />
           </div>
-          <div class="font1_2em pl-2" style="width: 30%">
+          <div class="font1_2em pl-2" style="width: 20%">
             {{ $n(item.balance) }}
-            <span v-if="item.type === 'receive' || item.type === 'creation'">+</span>
-            <span v-else>-</span>
           </div>
-          <div class="font1_2em" style="width: 50%">
+          <div class="font1_2em text-left pl-2" style="width: 65%">
             {{ item.name }} -
             <div class="text-sm">{{ $moment(item.date).format('DD.MM.YYYY - HH:mm:ss') }}</div>
           </div>
-          <b-button v-b-toggle="'a' + item.transaction_id" class="btn-sm">
-            <b>i</b>
-          </b-button>
+          <div class="font1_2em text-right" style="width: 5%">
+            <b-button v-b-toggle="'a' + item.transaction_id" class="btn-sm">
+              <b>i</b>
+            </b-button>
+          </div>
         </div>
         <b-collapse :id="'a' + item.transaction_id" class="mt-2">
           <b-card>
@@ -81,7 +65,7 @@
           </b-card>
         </b-collapse>
       </b-list-group-item>
-      <div v-if="transactions.length === 0" class="mt-lg-4 text-center">
+      <div v-if="transactions.length !== 0" class="mt-4 text-center">
         <span>{{ $t('transaction.nullTransactions') }}</span>
       </div>
     </b-list-group>
@@ -89,6 +73,13 @@
 </template>
 
 <script>
+const iconsByType = {
+  send: { icon: 'arrow-left-circle', classes: 'text-danger' },
+  receive: { icon: 'arrow-right-circle', classes: 'gradido-global-color-accent' },
+  creation: { icon: 'gift', classes: 'gradido-global-color-accent' },
+  decay: { icon: 'droplet-half', classes: 'gradido-global-color-gray' },
+}
+
 export default {
   name: 'gdd-transaction-list',
   props: {
@@ -114,16 +105,22 @@ export default {
     updateTransactions() {
       this.$emit('update-transactions')
     },
+    getIcon(item) {
+      const icon = iconsByType[item.type]
+      if (icon) return icon.icon
+      const thing = new Error('no item to given type')
+      thing()
+    },
+    getClass(item) {
+      const icon = iconsByType[item.type]
+      if (icon) return icon.classes + ' m-mb-1 font2em'
+      const thing = new Error('no item to given type')
+      thing()
+    },
   },
 }
 </script>
 <style>
-.font1_2em {
-  font-size: 1.2em;
-}
-.font2em {
-  font-size: 1.5em;
-}
 .el-table .cell {
   padding-left: 0px;
   padding-right: 0px;
diff --git a/frontend/src/views/Pages/UserProfileCard.vue b/frontend/src/views/Pages/UserProfile.vue
similarity index 100%
rename from frontend/src/views/Pages/UserProfileCard.vue
rename to frontend/src/views/Pages/UserProfile.vue