Merge branch 'master' into change-css-mobile

.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/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/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', () => {

frontend/src/views/Pages/AccountOverview.vue

@@ -24,9 +24,9 @@
   </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',

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/GddTable.vue

@@ -88,7 +88,7 @@
 
 <script>
 import axios from 'axios'
-import communityAPI from '../../apis/communityAPI'
+import communityAPI from '../../../apis/communityAPI'
 
 export default {
   name: 'GddTable',

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

@@ -14,7 +14,7 @@
   </div>
 </template>
 <script>
-import GddTable from '../../views/KontoOverview/GddTable.vue'
+import GddTable from '../../views/Pages/AccountOverview/GddTable.vue'
 
 export default {
   components: {