From 747e8b66a7fa40ecdc7f19fe391781fcaa14eb34 Mon Sep 17 00:00:00 2001
From: ogerly <landmatrosen@googlemail.com>
Date: Thu, 20 May 2021 14:21:18 +0200
Subject: [PATCH] step profil

---
 .../src/views/Layout/DashboardLayout_gdd.vue  |   8 +
 .../src/views/Pages/UserProfile/UserCard.vue  | 174 ++++++++++++++----
 frontend/src/views/Pages/UserProfileCard.vue  |   8 +-
 3 files changed, 158 insertions(+), 32 deletions(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 97a9ca3fc..2933dcb55 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -41,6 +41,7 @@
             :transactions="transactions"
             :transactionCount="transactionCount"
             :pending="pending"
+            :UserProfileTestData="UserProfileTestData"
             @update-balance="updateBalance"
             @update-transactions="updateTransactions"
           ></router-view>
@@ -92,6 +93,13 @@ export default {
       bookedBalance: 0,
       transactionCount: 0,
       pending: true,
+      UserProfileTestData: {
+        name: 'Max',
+        lastname: 'Mustermann',
+        desc:
+          'Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. Max Mustermann seine Beschreibung. ',
+        img: '12345.png',
+      },
     }
   },
   methods: {
diff --git a/frontend/src/views/Pages/UserProfile/UserCard.vue b/frontend/src/views/Pages/UserProfile/UserCard.vue
index 3ff37fcb3..c55d427c0 100755
--- a/frontend/src/views/Pages/UserProfile/UserCard.vue
+++ b/frontend/src/views/Pages/UserProfile/UserCard.vue
@@ -1,40 +1,143 @@
 <template>
-
   <b-card class="bg-transparent">
-   <div class="w-100 text-center" ><vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode></div>
-            
-     
-      
-   
+    <div class="w-100 text-center">
+      <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+    </div>
 
-    <b-card-body class="pt-0">
-      <b-row>
-        <b-col>
-          <div class="card-profile-stats d-flex justify-content-center mt-md-5">
-            <div>
-              <span class="heading">--</span>
-              <span class="description">Transactions</span>
-            </div>
-            <div>
-              <span class="heading">--</span>
-              <span class="description">Community</span>
-            </div>
-            <div>
-              <span class="heading">
-                {{ $n(balance) }}
-              </span>
-              <span class="description">GDD</span>
-            </div>
+    <b-row>
+      <b-col>
+        <div class="card-profile-stats d-flex justify-content-center mt-md-5">
+          <div>
+            <span class="heading">
+              {{ $n(balance) }}
+            </span>
+            <span class="description">GDD</span>
+          </div>
+          <div>
+            <span class="heading">{{ $n(transactionCount) }}</span>
+            <span class="description">Transactions</span>
+          </div>
+          <div>
+            <span class="heading">--</span>
+            <span class="description">Community</span>
+          </div>
+        </div>
+      </b-col>
+    </b-row>
+    <b-container>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right" @click="edit = !edit">
+          <span v-if="edit">bearbeiten</span>
+          <div v-else>
+            <span>
+              bearbeiten
+              <b>abbrechen</b>
+            </span>
+            <span class="ml-4 text-success display-4">speichern</span>
           </div>
         </b-col>
       </b-row>
-      <div class="text-center">
-        <h5 class="h3">
-          {{ this.$store.state.email }}
-          <span class="font-weight-light"></span>
-        </h5>
-      </div>
-    </b-card-body>
+    </b-container>
+    <div>
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>Vorname</small>
+        </b-col>
+        <b-col v-if="edit" class="col-md-9 col-sm-10">{{ UserProfileTestData.name }}</b-col>
+        <b-col v-else class="col-md-9 col-sm-10">
+          <b-input type="text" v-model="UserProfileTestData.name"></b-input>
+        </b-col>
+      </b-row>
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>Nachname</small>
+        </b-col>
+        <b-col v-if="edit" class="col-md-9 col-sm-10">{{ UserProfileTestData.lastname }}</b-col>
+        <b-col v-else class="col-md-9 col-sm-10">
+          <b-input type="text" v-model="UserProfileTestData.lastname"></b-input>
+        </b-col>
+      </b-row>
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>Beschreibung</small>
+        </b-col>
+        <b-col v-if="edit" class="col-md-9 col-sm-10">{{ UserProfileTestData.desc }}</b-col>
+        <b-col v-else class="col-md-9 col-sm-10">
+          <b-textarea
+            v-value="UserProfileTestData.dec"
+            placeholder="Enter something..."
+            rows="3"
+            max-rows="6"
+          ></b-textarea>
+        </b-col>
+      </b-row>
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>UserBild</small>
+        </b-col>
+        <b-col v-if="edit" class="col-md-9 col-sm-10">{{ UserProfileTestData.img }}</b-col>
+        <b-col v-else class="col-md-9 col-sm-10">
+         <vue-qrcode :value="$store.state.email" type="image/png"></vue-qrcode>
+ 
+          <b-form-file accept="image/jpeg, image/png, image/gif" v-model="UserProfileTestData.img"></b-form-file>
+        </b-col>
+      </b-row>
+
+      <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>E-Mail</small>
+        </b-col>
+        <b-col v-if="edit" class="col-md-9 col-sm-10">{{ $store.state.email }}</b-col>
+        <b-col v-else class="col-md-9 col-sm-10">
+          <b-input type="text" v-model="$store.state.email"></b-input>
+        </b-col>
+      </b-row>
+    </div>
+    <hr />
+    <b-container>
+      <b-row class="mb-4 text-right">
+        <b-col class="text-right" @click="editpwd = !editpwd">
+          <span v-if="editpwd">Passwort ändern</span>
+          <div v-else>
+            <span>
+              Passwort ändern
+              <b>abbrechen</b>
+            </span>
+            <span class="ml-4 text-success display-4">speichern</span>
+          </div>
+        </b-col>
+      </b-row>
+
+      <div v-if="!editpwd">
+       <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>altes Passwort</small>
+        </b-col>       
+          <b-col class="col-md-9 col-sm-10">
+          <b-input type="text" placeholder="altes Passwort"></b-input>
+
+        </b-col>
+      </b-row>
+       <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>neues Passwort</small>
+        </b-col>       
+          <b-col class="col-md-9 col-sm-10">
+
+          <b-input type="text" placeholder="neues Passwort"></b-input>
+
+        </b-col>
+      </b-row>
+       <b-row class="mb-3">
+        <b-col class="col-lg-3 col-md-10 col-sm-10 text-md-left text-lg-right">
+          <small>neues Passwort wiederholen</small>
+        </b-col>       
+          <b-col class="col-md-9 col-sm-10">
+          <b-input type="text" placeholder="neues Passwort wiederholen"></b-input>
+        </b-col>
+      </b-row>
+    </div>
+    </b-container>
   </b-card>
 </template>
 <script>
@@ -45,8 +148,17 @@ export default {
   components: {
     VueQrcode,
   },
+  data() {
+    return {
+      edit: true,
+      editpwd: true,
+      edit_button_text: 'edit',
+    }
+  },
   props: {
     balance: { type: Number, default: 0 },
+    transactionCount: { type: Number, default: 0 },
+    UserProfileTestData: { type: Object },
   },
 }
 </script>
diff --git a/frontend/src/views/Pages/UserProfileCard.vue b/frontend/src/views/Pages/UserProfileCard.vue
index 1b8efb30a..aa96cdbad 100644
--- a/frontend/src/views/Pages/UserProfileCard.vue
+++ b/frontend/src/views/Pages/UserProfileCard.vue
@@ -1,6 +1,10 @@
 <template>
   <div class="mt-sm-4 mt-lg-5">
-    <user-card :balance="balance"></user-card>
+    <user-card
+      :balance="balance"
+      :transactionCount="transactionCount"
+      :UserProfileTestData="UserProfileTestData"
+    ></user-card>
   </div>
 </template>
 <script>
@@ -12,6 +16,8 @@ export default {
   },
   props: {
     balance: { type: Number, default: 0 },
+    transactionCount: { type: Number, default: 0 },
+    UserProfileTestData: { type: Object },
   },
 }
 </script>