Transaction list style edited

frontend/src/components/Contributions/ContributionListItem.vue

@@ -32,7 +32,7 @@
           </b-col>
           <b-col cols="3">
             <div class="small">{{ $t('creation') }}</div>
-            <div class="font-weight-bold h2">{{ amount | GDD }}</div>
+            <div class="font-weight-bold">{{ amount | GDD }}</div>
           </b-col>
           <b-col cols="1" @click="visible = !visible">
             <collapse-icon class="text-right" :visible="visible" v-if="messagesCount > 0" />

frontend/src/components/GddTransactionList.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="gdd-transaction-list">
-    <div class="list-group">
+    <div class="list-group mt-5">
       <div v-if="!transactions" class="test-no-transactionlist text-right">
         <b-icon icon="exclamation-triangle" class="mr-2" variant="danger"></b-icon>
         <small>
@@ -12,8 +12,9 @@
         <small>{{ $t('error.empty-transactionlist') }}</small>
       </div>
 
-      <div v-for="({ id, typeId }, index) in transactions" :key="id">
+      <div v-for="({ id, typeId }, index) in transactions" :key="`l1-` + id">
         <transaction-list-item
+          v-if="typeId === 'DECAY'"
           :typeId="typeId"
           class="pointer mb-3 bg-white appBoxShadow gradido-border-radius p-4 test-list-group-item"
         >
@@ -23,7 +24,15 @@
               :previousBookedBalance="previousBookedBalance(index)"
             />
           </template>
-
+        </transaction-list-item>
+      </div>
+      <div class="h4 m-3">{{ $t('lastMonth') }}</div>
+      <div v-for="({ id, typeId }, index) in transactions" :key="`l2-` + id">
+        <transaction-list-item
+          v-if="typeId !== 'DECAY'"
+          :typeId="typeId"
+          class="pointer mb-3 bg-white appBoxShadow gradido-border-radius p-4 test-list-group-item"
+        >
           <template #SEND>
             <transaction-send
               v-bind="transactions[index]"

frontend/src/components/Transactions/TransactionCreation.vue

@@ -6,12 +6,12 @@
       </b-col>
       <b-col>
         <div>{{ linkedUser.firstName }} {{ linkedUser.lastName }}</div>
-        <div class="small">{{ balanceDate }}</div>
-        <div class="small">{{ balanceDate }}</div>
+        <div class="small">{{ this.$d(new Date(balanceDate), 'short') }}</div>
+        <div class="small">{{ this.$d(new Date(balanceDate), 'time') }}</div>
       </b-col>
       <b-col cols="3">
         <div class="small">{{ $t('decay.types.receive') }}</div>
-        <div class="small">{{ amount | GDD }}</div>
+        <div class="font-weight-bold">{{ amount | GDD }}</div>
       </b-col>
       <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
     </b-row>

frontend/src/components/Transactions/TransactionLinkSummary.vue

@@ -10,7 +10,7 @@
       </b-col>
       <b-col cols="3">
         <div class="small">{{ $t('send_per_link') }}</div>
-        <div class="small">{{ amount | GDD }}</div>
+        <div class="font-weight-bold">{{ amount | GDD }}</div>
       </b-col>
       <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
     </b-row>

frontend/src/components/Transactions/TransactionReceive.vue

@@ -14,12 +14,12 @@
             :transactionLinkId="transactionLinkId"
           />
         </div>
-        <div class="small">{{ balanceDate }}</div>
-        <div class="small">{{ balanceDate }}</div>
+        <div class="small">{{ this.$d(new Date(balanceDate), 'short') }}</div>
+        <div class="small">{{ this.$d(new Date(balanceDate), 'time') }}</div>
       </b-col>
       <b-col cols="3">
         <div class="small">{{ $t('decay.types.receive') }}</div>
-        <div class="small">{{ amount | GDD }}</div>
+        <div class="font-weight-bold">{{ amount | GDD }}</div>
       </b-col>
       <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
     </b-row>

frontend/src/components/Transactions/TransactionSend.vue

@@ -14,12 +14,12 @@
             :transactionLinkId="transactionLinkId"
           />
         </div>
-        <div class="small">{{ balanceDate }}</div>
-        <div class="small">{{ balanceDate }}</div>
+        <div class="small">{{ this.$d(new Date(balanceDate), 'short') }}</div>
+        <div class="small">{{ this.$d(new Date(balanceDate), 'time') }}</div>
       </b-col>
       <b-col cols="3">
         <div class="small">{{ $t('decay.types.send') }}</div>
-        <div class="small">{{ amount | GDD }}</div>
+        <div class="font-weight-bold">{{ amount | GDD }}</div>
       </b-col>
       <b-col cols="1"><collapse-icon class="text-right" :visible="visible" /></b-col>
     </b-row>

frontend/src/i18n.js

@@ -115,6 +115,10 @@ const dateTimeFormats = {
       month: 'long',
       year: 'numeric',
     },
+    time: {
+      hour: 'numeric',
+      minute: 'numeric',
+    },
   },
   de: {
     short: {
@@ -143,6 +147,10 @@ const dateTimeFormats = {
       month: 'long',
       year: 'numeric',
     },
+    time: {
+      hour: 'numeric',
+      minute: 'numeric',
+    },
   },
   es: {
     short: {
@@ -171,6 +179,10 @@ const dateTimeFormats = {
       month: 'long',
       year: 'numeric',
     },
+    time: {
+      hour: 'numeric',
+      minute: 'numeric',
+    },
   },
   fr: {
     short: {
@@ -199,6 +211,10 @@ const dateTimeFormats = {
       month: 'long',
       year: 'numeric',
     },
+    time: {
+      hour: 'numeric',
+      minute: 'numeric',
+    },
   },
   nl: {
     short: {
@@ -227,6 +243,10 @@ const dateTimeFormats = {
       month: 'long',
       year: 'numeric',
     },
+    time: {
+      hour: 'numeric',
+      minute: 'numeric',
+    },
   },
 }
 

frontend/src/locales/de.json

@@ -309,6 +309,7 @@
     }
   },
   "success": "Erfolg",
+  "lastMonth":"letzter Monat",
   "time": {
     "days": "Tage",
     "hours": "Stunden",

frontend/src/locales/en.json

@@ -29,6 +29,7 @@
     "openContributionLinkText": "The following {count} automatic creations are currently provided by the \"{name}\" community.",
     "submitContribution": "Submit contribution"
   },
+  "lastMonth":"Last month",
   "contact": "Contact",
   "contribution": {
     "activity": "Activity",