remove useravatar, add qrcode from user email

frontend/src/views/KontoOverview/GddTable.vue

@@ -20,6 +20,12 @@
               </b-card>
             </b-collapse>
           </b-list-group-item>
+           <b-list-group-item>
+                <b-alert v-if="count < 5" show variant="secondary">
+                  Die letzten <strong>{{count}}</strong> Transaktionen
+                </b-alert>
+              <router-link to="/activity"  > mehr (+ {{count}})</router-link>  
+            </b-list-group-item>
           
  
         </b-list-group>
@@ -36,7 +42,8 @@ export default {
     return {
         form: [],
         fields: [ 'balance', 'date', 'memo', 'name', 'transaction_id', 'type','details'],       
-        items: []
+        items: [],
+        count: 0
     };
   },
     
@@ -54,6 +61,7 @@ export default {
      //commit('transactions', result.data.transactions)
       this.$store.state.user.balance_gdt =  result.data.gdtSum
       this.items = result.data.transactions
+      this.count = result.data.count
      
    }, (error) => {
      console.log(error);
@@ -75,11 +83,8 @@ export default {
       },
       setComma(int){
         return int / 10000
-
       }
-  },
+  } 
-
- 
 };
 </script>
 <style>

frontend/src/views/Layout/DashboardNavbar.vue

@@ -38,7 +38,7 @@
           <b-media no-body class="align-items-center">
             
                   <span class="avatar avatar-sm rounded-circle">
-                    <img alt="Image placeholder" src="img/theme/team-4.jpg">
+                     <vue-qrcode :value="$store.state.email" />
                   </span>
             <b-media-body class="ml-2 d-none d-lg-block">
               <span class="mb-0 text-sm  font-weight-bold">{{this.$store.state.email}}</span>
@@ -84,13 +84,14 @@
 </template>
 <script>
 import { CollapseTransition } from 'vue2-transitions';
-import { BaseNav, Modal } from '@/components';
+import { BaseNav } from '@/components';
+import VueQrcode from 'vue-qrcode'
 
 export default {
   components: {
-    // CollapseTransition,
+   CollapseTransition,
     BaseNav,
-    // Modal
+    VueQrcode
   },
   props: {
     type: {

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

@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <!-- slot for parent component to activate the file changer -->
+    <div @click="launchFilePicker()">
+      <slot name="activator"></slot>
+    </div>
+    <!-- image input: style is set to hidden and assigned a ref so that it can be triggered -->
+    <input type="file"
+       ref="file"
+       :name="uploadFieldName"
+       @change="onFileChange(
+          $event.target.name, $event.target.files)"
+       style="display:none">
+    <!-- error dialog displays any potential errors -->
+    <v-dialog v-model="errorDialog" max-width="300">
+      <v-card>
+        <v-card-text class="subheading">{{errorText}}</v-card-text>
+        <v-card-actions>
+          <v-spacer></v-spacer>
+          <v-btn @click="errorDialog = false" flat>Got it!</v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'avatar-uploader',
+    data: ()=> ({
+      errorDialog: null,
+      errorText: '',
+      uploadFieldName: 'file',
+      maxSize: 1024
+    }),
+    props: {    
+      // Use "value" here to enable compatibility with v-model
+      value: Object,
+    },
+    methods: {
+      launchFilePicker(){
+        this.$refs.file.click();
+      },
+      onFileChange(fieldName, file) {
+        const { maxSize } = this
+        let imageFile = file[0] 
+ 
+        //check if user actually selected a file
+        if (file.length>0) {
+          let size = imageFile.size / maxSize / maxSize
+          if (!imageFile.type.match('image.*')) {
+            // check whether the upload is an image
+            this.errorDialog = true
+            this.errorText = 'Please choose an image file'
+          } else if (size>1) {
+            // check whether the size is greater than the size limit
+            this.errorDialog = true
+            this.errorText = 'Your file is too big! Please select an image under 1MB'
+          } else {
+            // Append file into FormData & turn file into image URL
+            let formData = new FormData()
+            let imageURL = URL.createObjectURL(imageFile)
+            formData.append(fieldName, imageFile)
+            // Emit FormData & image URL to the parent component
+            this.$emit('input', { formData, imageURL })
+          }
+        }
+      }
+    }
+  }
+</script>
+<style></style>

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

@@ -4,7 +4,7 @@
       <b-col lg="3" class="order-lg-2">
         <div class="card-profile-image">
           <a href="#">
-            <b-img src="img/theme/team-4.jpg" rounded="circle" />
+            <vue-qrcode :value="$store.state.email" />
           </a>
         </div>
       </b-col>
@@ -12,8 +12,7 @@
 
     <b-card-header class="text-center border-0 pt-8 pt-md-4 pb-0 pb-md-4">
       <div class="d-flex justify-content-between">
-        <a href="#" class="btn btn-sm btn-info mr-4">Connect</a>
+       <br>
-        <a href="#" class="btn btn-sm btn-default float-right">Message</a>
       </div>
     </b-card-header>
 
@@ -23,15 +22,15 @@
           <div class="card-profile-stats d-flex justify-content-center mt-md-5">
             <div>
               <span class="heading">22</span>
-              <span class="description">Friends</span>
+              <span class="description">Transactions</span>
             </div>
             <div>
               <span class="heading">10</span>
-              <span class="description">Photos</span>
+              <span class="description">Community</span>
             </div>
             <div>
-              <span class="heading">89</span>
+              <span class="heading"> {{ setComma(this.$store.state.user.balance) }} </span>
-              <span class="description">Comments</span>
+              <span class="description">GDD</span>
             </div>
           </div>
         </b-col>
@@ -58,6 +57,19 @@
   </b-card>
 </template>
 <script>
-export default {};
+import VueQrcode from 'vue-qrcode'
+
+export default {
+  name: "profilecard",
+   components: {
+    VueQrcode,
+  },
+  methods: {    
+        setComma(int){
+          console.log("setComma", int)
+          return int / 10000
+        }
+      } 
+};
 </script>
 <style></style>

frontend/src/views/Pages/UserProfileEdit.vue

@@ -21,17 +21,22 @@
           <edit-profile-form></edit-profile-form>
         </b-col>
       </b-row>
+        <b-row>        
+        <b-col xl="12" class="order-xl-1">
+          <image-uploader-avatar> </image-uploader-avatar>
+        </b-col>
+      </b-row>
     </b-container>
   </div>
 </template>
 <script>
   import EditProfileForm from './UserProfile/EditProfileForm.vue';
-  import UserCard from './UserProfile/UserCard.vue';
+  import ImageUploaderAvatar from './UserProfile/ImageUploaderAvatar.vue';
 
   export default {
     components: {
       EditProfileForm,
-      UserCard
+      ImageUploaderAvatar
     }
   };
 </script>

frontend/yarn.lock

@@ -1983,6 +1983,11 @@ buffer-indexof@^1.0.0:
   resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
   integrity sha512-4/rOEg86jivtPTeOUUT61jJO1Ya1TrR/OkqCSZDyq84WJh3LuuiphBYJN+fm5xufIk4XAFcEwte/8WzC8If/1g==
 
+buffer-json@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/buffer-json/-/buffer-json-2.0.0.tgz#f73e13b1e42f196fe2fd67d001c7d7107edd7c23"
+  integrity sha512-+jjPFVqyfF1esi9fvfUs3NqM0pH1ziZ36VP4hmA/y/Ssfo/5w5xHKfTw9BwQjoJ1w/oVtpLomqwUHKdefGyuHw==
+
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/buffer-xor/-/buffer-xor-1.0.3.tgz#26e61ed1422fb70dd42e6e36729ed51d855fe8d9"
@@ -2086,6 +2091,18 @@ cache-loader@^2.0.1:
     normalize-path "^3.0.0"
     schema-utils "^1.0.0"
 
+cache-loader@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/cache-loader/-/cache-loader-4.1.0.tgz#9948cae353aec0a1fcb1eafda2300816ec85387e"
+  integrity sha512-ftOayxve0PwKzBF/GLsZNC9fJBXl8lkZE3TOsjkboHfVHVkL39iUEs1FO07A33mizmci5Dudt38UZrrYXDtbhw==
+  dependencies:
+    buffer-json "^2.0.0"
+    find-cache-dir "^3.0.0"
+    loader-utils "^1.2.3"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.1"
+    schema-utils "^2.0.0"
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -4404,7 +4421,7 @@ find-cache-dir@^2.1.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.3.1:
+find-cache-dir@^3.0.0, find-cache-dir@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880"
   integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==
@@ -8194,7 +8211,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.6.5:
+schema-utils@^2.0.0, schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==
@@ -9566,7 +9583,7 @@ vue-i18n@^8.17.0, vue-i18n@^8.22.4:
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.23.0.tgz#4a65681a1dfe716d47e1d00ddbd6e0b88ea36735"
   integrity sha512-mXgniaumwca8tKdp55fmvqIcW658vQQXq0zEyRHp8sgZ6t+Md+Whhu6CCPg9/erVNlvpKzsGsucGjt2N8GrFCA==
 
-vue-loader@^15.7.0:
+vue-loader@^15.7.0, vue-loader@^15.9.6:
   version "15.9.6"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.6.tgz#f4bb9ae20c3a8370af3ecf09b8126d38ffdb6b8b"
   integrity sha512-j0cqiLzwbeImIC6nVIby2o/ABAWhlppyL/m5oJ67R5MloP0hj/DtFgb0Zmq3J9CG7AJ+AXIvHVnJAPBvrLyuDg==