From a57ffdb6c6abdcb32d809ed058a70045b36e9306 Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Wed, 12 Jun 2019 16:27:10 +0200
Subject: [PATCH] add wealth update boilerplate

---
 lootalot_front/src/components/GroupChest.vue |   2 +-
 lootalot_front/src/components/Player.vue     |   8 +-
 lootalot_front/src/components/Wealth.vue     | 102 +++++++++++++------
 3 files changed, 78 insertions(+), 34 deletions(-)

diff --git a/lootalot_front/src/components/GroupChest.vue b/lootalot_front/src/components/GroupChest.vue
index 9022e4f..8189fb0 100644
--- a/lootalot_front/src/components/GroupChest.vue
+++ b/lootalot_front/src/components/GroupChest.vue
@@ -8,7 +8,7 @@
         <h1 class="title">Coffre de groupe</h1>
       </div>
     </div>
-    <Chest player="0"></Chest>
+    <Chest player=0></Chest>
   </section>   
 </template>
 
diff --git a/lootalot_front/src/components/Player.vue b/lootalot_front/src/components/Player.vue
index ac9d2bd..efd4ca9 100644
--- a/lootalot_front/src/components/Player.vue
+++ b/lootalot_front/src/components/Player.vue
@@ -26,7 +26,10 @@
         </div>
       </header>
       <div class="card-content">
-        <Wealth v-bind:wealth="player.wealth"></Wealth>
+        <Wealth :wealth="player.wealth" 
+                :edit="edit_wealth" 
+                @updated="edit_wealth = !edit_wealth">
+        </Wealth>
         <p class="notification is-warning" v-show="!playerIsGroup">Dette : {{ player.debt }}gp</p>
       </div>
       <footer class="card-footer">
@@ -34,7 +37,7 @@
            href="#" class="card-footer-item is-dark">
           Coffre
         </a>
-        <a href="#" class="card-footer-item">Argent</a>
+        <a @click="edit_wealth = !edit_wealth" href="#" class="card-footer-item">Argent</a>
         <a href="#" class="card-footer-item disabled">Historique</a>
       </footer>
     </div>
@@ -71,6 +74,7 @@
                     {id: 3, name: "Fefi"},
                 ],
                 show_dropdown: false,
+                edit_wealth: false,
             };
         },
         computed: {
diff --git a/lootalot_front/src/components/Wealth.vue b/lootalot_front/src/components/Wealth.vue
index c23cdb9..41fdef9 100644
--- a/lootalot_front/src/components/Wealth.vue
+++ b/lootalot_front/src/components/Wealth.vue
@@ -1,39 +1,79 @@
 <template>
-  <div class="container is-fluid">
-        <span class="icon is-large">
-          <i class="fas fa-2x fa-piggy-bank"></i>
-        </span>
-        <nav class="level is-mobile">
-          <div class="level-item">
-            <div><p class="heading">CP</p>
-                 <p class="subtitle">{{ wealth[0] }}</p>
-            </div>
-          </div>
-          <div class="level-item">
-            <div>
-              <p class="heading">SP</p>
-              <p class="subtitle">{{ wealth[1] }}</p>
-            </div>
-          </div>
-          <div class="level-item">
-            <div>
-              <p class="heading">GP</p>
-              <p class="subtitle">{{ wealth[2] }}</p>
-            </div>
-          </div>
-          <div class="level-item">
-            <div>
-              <p class="heading">PP</p>
-              <p class="subtitle">{{ wealth[3] }}</p>
-            </div>
-          </div>
-        </nav>
+  <div>
+    <span class="icon is-large">
+      <i class="fas fa-2x fa-piggy-bank"></i>
+    </span>
+    <nav class="columns is-mobile">
+      <div class="column">
+          <p class="heading">CP</p>
+          <p class="is-size-3">{{ wealth[0] }}</p>
+      </div>
+      <div class="column">
+          <p class="heading">SP</p>
+          <p class="is-size-3">{{ wealth[1] }}</p>
+      </div>
+      <div class="column">
+          <p class="heading">GP</p>
+          <p class="is-size-3">{{ wealth[2] }}</p>
+      </div>
+      <div class="column">
+          <p class="heading">PP</p>
+          <p class="is-size-3">{{ wealth[3] }}</p>
+      </div>
+    </nav>
+    <nav v-show="edit" class="columns is-mobile">
+      <div class="column">
+        <input type="number" class="input" v-show="edit" v-model="edit_values[0]"></input>
+      </div>
+      <div class="column">
+        <input type="number" class="input" v-show="edit" v-model="edit_values[1]"></input>
+      </div>
+      <div class="column">
+        <input type="number" class="input" v-show="edit" v-model="edit_values[2]"></input>
+      </div>
+      <div class="column">
+        <input type="number" class="input" v-show="edit" v-model="edit_values[3]"></input>
+      </div>
+    </nav>
+    <nav v-show="edit" class="columns is-mobile">
+      <div class="column is-3 is-offset-3">
+        <button class="button is-fullwidth is-danger"
+            @click="updateWealth('minus')">
+          <span class="icon"><i class="fas fa-2x fa-minus"></i></span>
+        </button>
+      </div>
+      <div class="column is-3">
+        <button class="button is-primary is-fullwidth"
+            @click="updateWealth('plus')">
+          <span class="icon"><i class="fas fa-2x fa-plus"></i></span>
+        </button>
+      </div>
+    </nav>
   </div>
 </template>
 
 <script>
     export default {
-        props: ["wealth"],
-        data () { return {}; }
+        props: ["wealth", "edit"],
+        data () { 
+            return {
+                edit_values: [0,0,0,0], 
+            }; 
+        },
+        methods: {
+            updateWealth (op) {
+                const values = this.edit_values.map(Number);
+                console.log('updateWealth', op, values);
+                let success;
+                if (true) {
+                    success = true;
+                } 
+                if (success) {
+                    this.$emit('updated');
+                    this.edit_values.fill(0)
+
+                }
+            }
+        }
     }
 </script>