Merge pull request #462 from gradido/437-Bug-Mobile-Transaction-List-is-not-easy-to-read

437 bug mobile transaction list is not easy to read

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/locales/de.json

@@ -18,6 +18,7 @@
     "de": "Deutsch",
     "en": "English"
   },
+  "decay": "Vergänglichkeit",
   "form": {
     "cancel":"Abbrechen",
     "reset": "Zurücksetzen",

frontend/src/locales/en.json

@@ -18,6 +18,7 @@
     "de": "Deutsch",
     "en": "English"
   },
+  "decay": "Decay",
   "form": {
     "cancel":"Cancel",
     "reset": "Reset",

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

frontend/src/views/Pages/AccountOverview.spec.js

@@ -28,7 +28,7 @@ describe('AccountOverview', () => {
     })
 
     it('has a transactions table', () => {
-      expect(wrapper.find('gdd-table-stub').exists()).toBeTruthy()
+      expect(wrapper.find('gdd-transaction-list-stub').exists()).toBeTruthy()
     })
   })
 })

frontend/src/views/Pages/AccountOverview.vue

@@ -28,7 +28,7 @@
         </template>
       </gdd-send>
       <hr />
-      <gdd-table
+      <gdd-transaction-list
         v-if="showContext"
         :transactions="transactions"
         :max="5"
@@ -36,15 +36,15 @@
         :transactionCount="transactionCount"
         @update-transactions="$emit('update-transactions')"
       />
-      <gdd-table-footer v-if="showContext" :count="transactionCount" />
+      <gdd-transaction-list-footer v-if="showContext" :count="transactionCount" />
     </b-container>
   </div>
 </template>
 <script>
 import GddStatus from './AccountOverview/GddStatus.vue'
 import GddSend from './AccountOverview/GddSend.vue'
-import GddTable from './AccountOverview/GddTable.vue'
-import GddTableFooter from './AccountOverview/GddTableFooter.vue'
+import GddTransactionList from './AccountOverview/GddTransactionList.vue'
+import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
 import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue'
 import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue'
 import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue'
@@ -62,8 +62,8 @@ export default {
   components: {
     GddStatus,
     GddSend,
-    GddTable,
-    GddTableFooter,
+    GddTransactionList,
+    GddTransactionListFooter,
     TransactionForm,
     TransactionConfirmation,
     TransactionResult,

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

@@ -6,47 +6,26 @@
         :key="item.id"
         style="background-color: #ebebeba3 !important"
       >
-        <div class="d-flex w-100 justify-content-between">
-          <b-icon
-            v-if="item.type === 'send'"
-            icon="arrow-left-circle"
-            class="m-1 text-danger"
-            font-scale="2"
-            style="color: red"
-          ></b-icon>
-          <b-icon
-            v-else-if="item.type === 'receive'"
-            icon="arrow-right-circle"
-            class="m-1"
-            font-scale="2"
-            style="color: green"
-          ></b-icon>
-          <b-icon
-            v-else-if="item.type === 'creation'"
-            icon="gift"
-            class="m-1"
-            font-scale="2"
-            style="color: orange"
-          ></b-icon>
-          <b-icon
-            v-else
-            icon="droplet-half"
-            class="m-1"
-            font-scale="2"
-            style="color: orange"
-          ></b-icon>
-          <h1 class="">
-            <span v-if="item.type === 'receive' || item.type === 'creation'">+</span>
-            <span v-else>-</span>
+        <div class="d-flex" v-b-toggle="'a' + item.date + ''">
+          <div style="width: 8%">
+            <b-icon :icon="getIcon(item)" :class="getClass(item)" />
+          </div>
+          <div class="font1_2em pr-2 text-right" style="width: 22%">
+            <span>{{ getOperator(item) }}</span>
             {{ $n(item.balance) }}
-            <small>GDD</small>
-          </h1>
-          <h2 class="text-muted">{{ item.name }}</h2>
-          <b-button v-b-toggle="'a' + item.transaction_id" variant="secondary">
-            <b>i</b>
-          </b-button>
+          </div>
+          <div class="font1_2em text-left pl-2" style="width: 65%">
+            {{ item.name }}
+            <small>{{ item.name ? '' : $t('decay') }}</small>
+            <div class="text-sm">{{ $moment(item.date).format('DD.MM.YYYY - HH:mm:ss') }}</div>
+          </div>
+          <div class="text-right" style="width: 5%">
+            <b-button class="btn-sm">
+              <b>i</b>
+            </b-button>
+          </div>
         </div>
-        <b-collapse :id="'a' + item.transaction_id" class="mt-2">
+        <b-collapse :id="'a' + item.date + ''" class="mt-2">
           <b-card>
             <b-list-group>
               <b-list-group-item v-if="item.type === 'send'">
@@ -79,16 +58,16 @@
                 {{ item.memo }}
               </b-list-group-item>
             </b-list-group>
-            <b-button v-b-toggle="'collapse-1-inner' + item.transaction_id" variant="secondary">
+            <b-button v-b-toggle="'collapse-1-inner' + item.date" variant="secondary">
               {{ $t('transaction.more') }}
             </b-button>
-            <b-collapse :id="'collapse-1-inner' + item.transaction_id" class="mt-2">
+            <b-collapse :id="'collapse-1-inner' + item.date" class="mt-2">
               <b-card>{{ item }}</b-card>
             </b-collapse>
           </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>
@@ -96,8 +75,15 @@
 </template>
 
 <script>
+const iconsByType = {
+  send: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '-' },
+  receive: { icon: 'arrow-right-circle', classes: 'gradido-global-color-accent', operator: '+' },
+  creation: { icon: 'gift', classes: 'gradido-global-color-accent', operator: '+' },
+  decay: { icon: 'droplet-half', classes: 'gradido-global-color-gray', operator: '-' },
+}
+
 export default {
-  name: 'GddTable',
+  name: 'gdd-transaction-list',
   props: {
     transactions: { default: [] },
     max: { type: Number, default: 1000 },
@@ -121,6 +107,24 @@ 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()
+    },
+    getOperator(item) {
+      const icon = iconsByType[item.type]
+      if (icon) return icon.operator
+      const thing = new Error('no item to given type')
+      thing()
+    },
   },
 }
 </script>

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

@@ -13,7 +13,7 @@
 
 <script>
 export default {
-  name: 'GddTableFooter',
+  name: 'GddTransactionListFooter',
   props: {
     count: { count: Number },
   },

frontend/src/views/Pages/UserProfileTransactionList.vue

@@ -1,29 +1,24 @@
 <template>
   <div>
     <div
-      class="header pb-8 pt-lg-4 d-flex align-items-center profile-header"
+      class="header pb-sm-1 pb-md-7 d-flex align-items-center profile-header"
       style="max-height: 200px"
     ></div>
-    <b-container fluid class="mt--6">
-      <b-row>
-        <b-col class="order-xl-1">
-          <gdd-table
-            :timestamp="timestamp"
-            :transactionCount="transactionCount"
-            :transactions="transactions"
-            @update-transactions="updateTransactions"
-          />
-        </b-col>
-      </b-row>
-    </b-container>
+
+    <gdd-transaction-list
+      :timestamp="timestamp"
+      :transactionCount="transactionCount"
+      :transactions="transactions"
+      @update-transactions="updateTransactions"
+    />
   </div>
 </template>
 <script>
-import GddTable from '../../views/Pages/AccountOverview/GddTable.vue'
+import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 
 export default {
   components: {
-    GddTable,
+    GddTransactionList,
   },
   props: {
     transactions: {