add geticon and getClass for send type from transaction request

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>

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()
       }
     },
   },

frontend/src/views/Pages/AccountOverview/GddTransactionList.vue

@@ -8,37 +8,21 @@
       >
         <div class="d-flex">
           <div style="width: 10%">
-            <b-icon
+            <b-icon :icon="getIcon(item)" :class="getClass(item)" />
-              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>
           </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>
+          <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>
             <b-list-group>
@@ -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;