Merge branch 'master' into login_fix_wrong_reset_password_email

.github/ISSUE_TEMPLATE/bug_report.md

@@ -6,4 +6,4 @@ title: 🐛 [Bug]
 ---
 
 ## 🐛 Bugreport
-<!-- Describe your issue in detail. Include screenshots if needed. Give us as much information as possible. Use a clear and concise description of what the bug is.--
+<!-- Describe your issue in detail. Include screenshots if needed. Give us as much information as possible. Use a clear and concise description of what the bug is.-->

frontend/src/locales/de.json

@@ -42,12 +42,12 @@
     "scann_code":"<strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners",
     "max_gdd_info":"maximale anzahl GDD zum versenden erreicht!",
     "send_check":"Bestätige deine Zahlung. Prüfe bitte nochmal alle Daten!",
-    "thx":"Danke!",
-    "send_success":"Deine Zahlung wurde erfolgreich versendet."
+    "thx":"Danke,",
+    "send_success":"deine Transaktion wurde erfolgreich ausgeführt"
   },
   "transaction":{
-    "show_part": "Die letzten <strong>{count}</strong> Transaktionen",
     "show_all":"Alle <strong>{count}</strong> Transaktionen ansehen",
+    "nullTransactions":"Du hast noch keine Transaktionen auf deinem Konto.",
     "more": "mehr"
   },
   "site": {

frontend/src/locales/en.json

@@ -42,12 +42,12 @@
     "scann_code":"<strong>QR Code Scanner</strong> - Scanne den QR Code deines Partners",
     "max_gdd_info":"maximale anzahl GDD zum versenden erreicht!",
     "send_check":"Bestätige deine Zahlung. Prüfe bitte nochmal alle Daten!",
-    "thx":"THX",
-    "send_success":"Deine Zahlung wurde erfolgreich versendet."
+    "thx":"Thank you,",
+    "send_success":"your transaction was successfully completed"
   },
   "transaction":{
     "show_part": "The last <strong>{count}</strong> transactions",
-    "show_all":"View all <strong>{count}</strong> transactions",
+    "nullTransactions":"You don't have any transactions on your account yet.",
     "more": "more"
   },
   "site": {

frontend/src/routes/routes.js

@@ -9,7 +9,7 @@ const routes = [
   },
   {
     path: '/overview',
-    component: () => import('../views/Pages/KontoOverview.vue'),
+    component: () => import('../views/Pages/AccountOverview.vue'),
     meta: {
       requiresAuth: true,
     },

frontend/src/views/Layout/DashboardLayout_gdd.vue

@@ -31,7 +31,9 @@
           <router-view
             :balance="balance"
             :gdt-balance="GdtBalance"
+            :transactions="transactions"
             @update-balance="updateBalance"
+            @update-transactions="updateTransactions"
           ></router-view>
         </fade-transition>
       </div>
@@ -76,6 +78,7 @@ export default {
     return {
       balance: 0,
       GdtBalance: 0,
+      transactions: [],
     }
   },
   methods: {
@@ -99,10 +102,11 @@ export default {
         // what to do when loading balance fails?
       }
     },
-    async loadGDTBalance() {
+    async updateTransactions() {
       const result = await communityAPI.transactions(this.$store.state.session_id)
       if (result.success) {
         this.GdtBalance = result.result.data.gdtSum / 10000
+        this.transactions = result.result.data.transactions
       } else {
         // what to do when loading balance fails?
       }
@@ -116,7 +120,7 @@ export default {
   },
   created() {
     this.loadBalance()
-    this.loadGDTBalance()
+    this.updateTransactions()
   },
 }
 </script>

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

@@ -1,9 +1,9 @@
 import { shallowMount } from '@vue/test-utils'
-import KontoOverview from './KontoOverview'
+import AccountOverview from './AccountOverview'
 
 const localVue = global.localVue
 
-describe('KontoOverview', () => {
+describe('AccountOverview', () => {
   let wrapper
 
   let mocks = {
@@ -11,7 +11,7 @@ describe('KontoOverview', () => {
   }
 
   const Wrapper = () => {
-    return shallowMount(KontoOverview, { localVue, mocks })
+    return shallowMount(AccountOverview, { localVue, mocks })
   }
 
   describe('shallow Mount', () => {
@@ -35,12 +35,6 @@ describe('KontoOverview', () => {
       expect(wrapper.find('gdd-table-stub').exists()).toBeTruthy()
     })
 
-    it('updates transctions data when change-transactions is emitted', async () => {
-      wrapper.find('gdd-table-stub').vm.$emit('change-transactions', [0, 1])
-      await wrapper.vm.$nextTick()
-      expect(wrapper.vm.transactions).toEqual(expect.arrayContaining([0, 1]))
-    })
-
     describe('updateBalance method', () => {
       beforeEach(async () => {
         wrapper.find('gdd-send-stub').vm.$emit('update-balance', {

frontend/src/views/Pages/AccountOverview.vue

@@ -2,11 +2,7 @@
   <div>
     <base-header class="pb-6 pb-8 pt-5 pt-md-8 bg-transparent"></base-header>
     <b-container fluid class="mt--7">
-      <gdd-status
-        :balance="balance"
-        :gdt-balance="GdtBalance"
-        :show-transaction-list="showTransactionList"
-      />
+      <gdd-status v-if="showTransactionList" :balance="balance" :gdt-balance="GdtBalance" />
       <br />
       <gdd-send
         :balance="balance"
@@ -16,29 +12,31 @@
       />
       <hr />
       <gdd-table
-        :show-transaction-list="showTransactionList"
+        v-if="showTransactionList"
         :transactions="transactions"
-        @change-transactions="setTransactions"
+        @update-transactions="updateTransactions"
       />
     </b-container>
   </div>
 </template>
 <script>
-import GddStatus from '../KontoOverview/GddStatus.vue'
-import GddSend from '../KontoOverview/GddSend.vue'
-import GddTable from '../KontoOverview/GddTable.vue'
+import GddStatus from './AccountOverview/GddStatus.vue'
+import GddSend from './AccountOverview/GddSend.vue'
+import GddTable from './AccountOverview/GddTable.vue'
 
 export default {
   name: 'Overview',
   data() {
     return {
-      transactions: [],
       showTransactionList: true,
     }
   },
   props: {
     balance: { type: Number, default: 0 },
     GdtBalance: { type: Number, default: 0 },
+    transactions: {
+      default: () => [],
+    },
   },
   components: {
     GddStatus,
@@ -52,8 +50,8 @@ export default {
     updateBalance(data) {
       this.$emit('update-balance', data.ammount)
     },
-    setTransactions(transactions) {
-      this.transactions = transactions
+    updateTransactions() {
+      this.$emit('update-transactions')
     },
   },
 }

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

@@ -0,0 +1,135 @@
+import { mount } from '@vue/test-utils'
+import GddSend from './GddSend'
+import Vuex from 'vuex'
+
+const localVue = global.localVue
+
+describe('GddSend', () => {
+  let wrapper
+
+  let state = {
+    user: {
+      balance: 1234,
+      balance_gdt: 9876,
+    },
+  }
+
+  let store = new Vuex.Store({
+    state,
+  })
+
+  let mocks = {
+    //    $n: jest.fn((n) => n),
+    $t: jest.fn((t) => t),
+    $moment: jest.fn((m) => ({
+      format: () => m,
+    })),
+  }
+
+  const Wrapper = () => {
+    return mount(GddSend, { localVue, store, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.gdd-send').exists()).toBeTruthy()
+    })
+
+    describe('warning messages', () => {
+      it('has a warning message', () => {
+        expect(wrapper.find('div.alert-warning').find('span').text()).toBe('form.attention')
+      })
+
+      it('has a dismiss button', () => {
+        expect(wrapper.find('div.alert-warning').find('button').exists()).toBeTruthy()
+      })
+
+      it('dismisses the warning when button is clicked', async () => {
+        wrapper.find('div.alert-warning').find('button').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('div.alert-warning').exists()).toBeFalsy()
+      })
+    })
+
+    describe('transaction form', () => {
+      describe('email field', () => {
+        it('has an input field of type email', () => {
+          expect(wrapper.find('#input-group-1').find('input').attributes('type')).toBe('email')
+        })
+
+        it('has an envelope icon', () => {
+          expect(wrapper.find('#input-group-1').find('svg').attributes('aria-label')).toBe(
+            'envelope',
+          )
+        })
+
+        it('has a label form.receiver', () => {
+          expect(wrapper.findAll('div.text-left').at(0).text()).toBe('form.receiver')
+        })
+
+        it('has a placeholder "E-Mail"', () => {
+          expect(wrapper.find('#input-group-1').find('input').attributes('placeholder')).toBe(
+            'E-Mail',
+          )
+        })
+      })
+
+      describe('ammount field', () => {
+        it('has an input field of type number', () => {
+          expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('number')
+        })
+
+        it('has an GDD text icon', () => {
+          expect(wrapper.find('#input-group-2').find('div.h3').text()).toBe('GDD')
+        })
+
+        it('has a label form.amount', () => {
+          expect(wrapper.findAll('div.text-left').at(1).text()).toBe('form.amount')
+        })
+
+        it('has a placeholder "0.01"', () => {
+          expect(wrapper.find('#input-group-2').find('input').attributes('placeholder')).toBe(
+            '0.01',
+          )
+        })
+      })
+
+      describe('message text box', () => {
+        it('has an textarea field', () => {
+          expect(wrapper.find('#input-group-3').find('textarea').exists()).toBeTruthy()
+        })
+
+        it('has an chat-right-text icon', () => {
+          expect(wrapper.find('#input-group-3').find('svg').attributes('aria-label')).toBe(
+            'chat right text',
+          )
+        })
+
+        it('has a label form.memo', () => {
+          expect(wrapper.findAll('div.text-left').at(2).text()).toBe('form.memo')
+        })
+      })
+
+      describe('cancel button', () => {
+        it('has a cancel button', () => {
+          expect(wrapper.find('button[type="reset"]').exists()).toBeTruthy()
+        })
+
+        it('has the text "form.cancel"', () => {
+          expect(wrapper.find('button[type="reset"]').text()).toBe('form.cancel')
+        })
+
+        it.skip('clears the email field on click', async () => {
+          wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv')
+          wrapper.find('button[type="reset"]').trigger('click')
+          await wrapper.vm.$nextTick()
+          expect(wrapper.vm.form.email).toBeNull()
+        })
+      })
+    })
+  })
+})

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="gdd-send">
     <b-row v-show="showTransactionList">
       <b-col xl="12" md="12">
         <b-alert show dismissible variant="warning" class="text-center">
@@ -105,8 +105,7 @@
                   ></b-form-input>
                 </b-input-group>
                 <b-col class="text-left p-3 p-sm-1">{{ $t('form.memo') }}</b-col>
-
-                <b-input-group>
+                <b-input-group id="input-group-3">
                   <b-input-group-prepend class="p-3 d-none d-md-block">
                     <b-icon icon="chat-right-text" class="display-3"></b-icon>
                   </b-input-group-prepend>
@@ -194,7 +193,7 @@
 <script>
 import { QrcodeStream, QrcodeDropZone } from 'vue-qrcode-reader'
 import { BIcon } from 'bootstrap-vue'
-import communityAPI from '../../apis/communityAPI.js'
+import communityAPI from '../../../apis/communityAPI.js'
 
 export default {
   name: 'GddSent',

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <b-row v-show="showTransactionList">
+    <b-row>
       <b-col xl="6" md="6">
         <stats-card
           type="gradient-red"
@@ -29,7 +29,6 @@
 export default {
   name: 'GddStatus',
   props: {
-    showTransactionList: { type: Boolean, default: true },
     balance: { type: Number, default: 0 },
     GdtBalance: { type: Number, default: 0 },
   },

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

@@ -2,26 +2,42 @@
   <div>
     <b-list-group v-show="showTransactionList">
       <b-list-group-item
-        v-for="item in filteredItems"
+        v-for="item in transactions"
         :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="box-arrow-left"
-            class="m-1"
+            icon="arrow-left-circle"
+            class="m-1 text-danger"
             font-scale="2"
             style="color: red"
           ></b-icon>
           <b-icon
-            v-else
-            icon="box-arrow-right"
+            v-else-if="item.type === 'receive'"
+            icon="arrow-right-circle"
             class="m-1"
             font-scale="2"
             style="color: green"
           ></b-icon>
-          <h1 class="mb-1">
+          <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>
             {{ $n(item.balance / 10000) }}
             <small>GDD</small>
           </h1>
@@ -73,11 +89,11 @@
         </b-collapse>
       </b-list-group-item>
       <b-list-group-item v-show="this.$route.path == '/overview'">
-        <b-alert v-if="count < 5" show variant="secondary">
-          <span class="alert-text" v-html="$t('transaction.show_part', { count: count })"></span>
+        <b-alert v-if="transactions.length === 0" show variant="secondary">
+          <span class="alert-text">{{ $t('transaction.nullTransactions') }}</span>
         </b-alert>
         <router-link
-          v-else
+          v-else-if="transactions.length > 5"
           to="/transactions"
           v-html="$t('transaction.show_all', { count: count })"
         ></router-link>
@@ -87,13 +103,11 @@
 </template>
 
 <script>
-import axios from 'axios'
-import communityAPI from '../../apis/communityAPI'
-
 export default {
   name: 'GddTable',
   props: {
     showTransactionList: { type: Boolean, default: true },
+    transactions: { default: [] },
   },
   data() {
     return {
@@ -103,16 +117,8 @@ export default {
       count: 0,
     }
   },
-
-  async created() {
-    const result = await communityAPI.transactions(this.$store.state.session_id)
-
-    if (result.success) {
-      this.items = result.result.data.transactions
-      this.count = result.result.data.count
-    } else {
-      //console.log('error', result)
-    }
+  created() {
+    this.$emit('change-transactions')
   },
   computed: {
     filteredItems() {
@@ -128,7 +134,6 @@ export default {
       })
       return result
     },
-
     rowClass(item, type) {
       if (!item || type !== 'row') return
       if (item.type === 'receive') return 'table-success'

frontend/src/views/Pages/UserProfile.vue

@@ -1,51 +0,0 @@
-<template>
-  <div>
-    <div
-      class="header pb-8 pt-5 pt-lg-8 d-flex align-items-center profile-header"
-      style="
-        min-height: 600px;
-        background-image: url(img/theme/profile-cover.jpg);
-        background-size: cover;
-        background-position: center top;
-      "
-    >
-      <b-container fluid>
-        <b-container fluid class="d-flex align-items-center">
-          <b-row>
-            <b-col lg="7" md="10">
-              <h1 class="display-2 text-white">Hello {{ this.$store.state.email }}</h1>
-              <p class="text-white mt-0 mb-5">
-                This is your profile page. You can see the progress you've made with your work and
-                manage your projects or assigned tasks
-              </p>
-              <a href="#!" class="btn btn-info">Edit profile</a>
-            </b-col>
-          </b-row>
-        </b-container>
-      </b-container>
-    </div>
-
-    <b-container fluid class="mt--6">
-      <b-row>
-        <b-col xl="4" class="order-xl-2 mb-5">
-          <user-card></user-card>
-        </b-col>
-        <b-col xl="8" class="order-xl-1">
-          <edit-profile-form></edit-profile-form>
-        </b-col>
-      </b-row>
-    </b-container>
-  </div>
-</template>
-<script>
-import EditProfileForm from './UserProfile/EditProfileForm.vue'
-import UserCard from './UserProfile/UserCard.vue'
-
-export default {
-  components: {
-    EditProfileForm,
-    UserCard,
-  },
-}
-</script>
-<style></style>

frontend/src/views/Pages/UserProfile/UserCard.vue

@@ -36,7 +36,7 @@
             </div>
             <div>
               <span class="heading">
-                {{ $n(this.$store.state.user.balance) }}
+                {{ $n(balance) }}
               </span>
               <span class="description">GDD</span>
             </div>
@@ -60,6 +60,9 @@ export default {
   components: {
     VueQrcode,
   },
+  props: {
+    balance: { type: Number, default: 0 },
+  },
 }
 </script>
 <style></style>

frontend/src/views/Pages/UserProfileActivity.vue

@@ -31,8 +31,8 @@
   </div>
 </template>
 <script>
-import GddWorkTable from '../../views/KontoOverview/GddWorkTable.vue'
-import GddAddWork2 from '../../views/KontoOverview/GddAddWork2.vue'
+import GddWorkTable from '../../views/Pages/AccountOverview/GddWorkTable.vue'
+import GddAddWork2 from '../../views/Pages/AccountOverview/GddAddWork2.vue'
 
 import * as chartConfigs from '@/components/Charts/config'
 import LineChart from '@/components/Charts/LineChart'

frontend/src/views/Pages/UserProfileCard.vue

@@ -7,7 +7,7 @@
     <b-container fluid class="mt--6">
       <b-row>
         <b-col xl="12" class="order-xl-2 mb-5">
-          <user-card></user-card>
+          <user-card :balance="balance"></user-card>
         </b-col>
       </b-row>
     </b-container>
@@ -20,6 +20,9 @@ export default {
   components: {
     UserCard,
   },
+  props: {
+    balance: { type: Number, default: 0 },
+  },
 }
 </script>
 <style></style>

frontend/src/views/Pages/UserProfileTransactionList.vue

@@ -7,19 +7,32 @@
     <b-container fluid class="mt--6">
       <b-row>
         <b-col class="order-xl-1">
-          <gdd-table></gdd-table>
+          <gdd-table :transactions="transactions" @update-transactions="updateTransactions" />
         </b-col>
       </b-row>
+      <b-row class="text-center mb-6" v-if="transactions.length == 0">
+        <b-col class="h2">{{ $t('transaction.nullTransactions') }}</b-col>
+      </b-row>
     </b-container>
   </div>
 </template>
 <script>
-import GddTable from '../../views/KontoOverview/GddTable.vue'
+import GddTable from '../../views/Pages/AccountOverview/GddTable.vue'
 
 export default {
   components: {
     GddTable,
   },
+  props: {
+    transactions: {
+      default: [],
+    },
+  },
+  methods: {
+    updateTransactions() {
+      this.$emit('update-transactions')
+    },
+  },
 }
 </script>
 <style></style>