working on sell UX

lootalot_front/src/components/Chest.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="container">
     <p class="notification is-paddingless is-info" v-show="canAdd">Peut ajouter</p> 
-    <p class="notification is-paddingless is-warning" v-show="canSell">Peut vendre</p> 
-    <p class="notification is-paddingless is-primary" v-show="canGrab">Peut prendre</p> 
     <table class="table is-fullwidth is-striped" >
         <thead>
           <tr>
-            <th>Objets de {{ player }}</th>
+            <th width="100%" >Objets de {{ player }}</th>
             <th v-if="canGrab"></th>
             <th v-if="canSell">
-                  <button class="button is-warning is-medium">
+                  <button class="button" 
+                    :class="is_selling ? 'is-danger' :  'is-warning'"
+                    @click="is_selling = !is_selling"
+                    >
                     <span class="icon">
                       <i class="fas fa-coins"></i>
                     </span>
-                    <small>Vendre</small>
+                    <p v-if="!is_selling">Vendre</p>
+                    <p v-else>{{ totalSellValue }}</p>
                   </button>
             </th>
           </tr>
@@ -23,7 +25,7 @@
             <tr :key="`row-${idx}`">
               <td>{{item.name}}</td>
               <td v-if="canGrab">
-                  <button class="button is-primary is-medium" disabled>
+                <button class="button is-primary" disabled>
                   <span class="icon">
                     <i class="fas fa-praying-hands"></i>
                   </span>
@@ -31,6 +33,10 @@
                 </button>
               </td>
               <td v-if="canSell">
+                <label class="checkbox">
+                <input type="checkbox">
+                  {{item.sell_value}}
+                </label>
               </td>
             </tr>
           </template>
@@ -47,6 +53,11 @@
         TO TEST :
             - Possible interactions depends on player_id and current chest
             - Objects are displayed as a table
+
+        Sell workflow :
+            1. Click sell (sell becomes danger)
+            2. Check objects to sell (sell button displays total value)
+            3. Click sell to confirm
     */
     export default {
         props: {
@@ -60,9 +71,13 @@
             return {
                 app_state: store.state,
                 content: [
-                    {id: 10, name: "Épée longue +2 acérée"},
+                    {id: 10, name: "Épée longue +2 acérée",
-                    {id: 5, name: "Ceinture de force +6"},
+                     sell_value: 15000 },
+                    {id: 5, name: "Ceinture de force +6",
+                     sell_value: 80000 },
                 ],
+                is_selling: false,
+                sell_selected: [],
             };
         },
         computed: {
@@ -70,6 +85,15 @@
             canSell () {
                 return this.player == this.app_state.player_id;
             },
+            totalSellValue () {
+                const selected = this.sell_selected;
+                var value = this.content
+                    .filter(item => selected.includes(item.id))
+                    .map(item => item.sell_value)
+                    .reduce((total,value) => total + value, 0);
+
+                return value;
+            },
             // Can the user grab items from this chest ?
             canGrab () {
                 return (this.app_state.player_id != 0  // User is not the group

lootalot_front/src/components/Wealth.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="box is-primary">
     <span class="icon is-large">
       <i class="fas fa-2x fa-piggy-bank"></i>
     </span>
@@ -21,35 +21,34 @@
           <p class="is-size-3">{{ wealth[3] }}</p>
       </div>
     </nav>
-    <nav v-show="edit" class="columns is-mobile">
+    <div v-if="edit"> <!-- or v-show ? -->
-      <div class="column">
+    <nav class="columns is-1  is-variable is-mobile">
-        <input type="number" class="input" v-show="edit" v-model="edit_values[0]"></input>
+      <template v-for="i in 4">
-      </div>
+      <div :key="`input-col-${i}`" class="column">
-      <div class="column">
+        <input type="text" size="6" class="input" 
-        <input type="number" class="input" v-show="edit" v-model="edit_values[1]"></input>
+            :key="inputs_key"
-      </div>
+            :class="{'is-danger': form_errors[i - 1]}" 
-      <div class="column">
+            v-model.number="edit_values[i - 1]">
-        <input type="number" class="input" v-show="edit" v-model="edit_values[2]"></input>
+        </input>
-      </div>
-      <div class="column">
-        <input type="number" class="input" v-show="edit" v-model="edit_values[3]"></input>
       </div>
+      </template>
     </nav>
-    <nav v-show="edit" class="columns is-mobile">
+    <nav class="columns is-mobile">
-      <div class="column is-3 is-offset-3">
+      <div class="column is-4 is-offset-2">
-        <button class="button is-fullwidth is-danger"
+        <button class="button is-outlined 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">
+      <div class="column is-4">
-        <button class="button is-primary is-fullwidth"
+        <button class="button is-outlined is-primary is-fullwidth"
             @click="updateWealth('plus')">
           <span class="icon"><i class="fas fa-2x fa-plus"></i></span>
         </button>
       </div>
     </nav>
     </div>
+  </div>
 </template>
 
 <script>
@@ -58,20 +57,28 @@
         data () { 
             return {
                 edit_values: [0,0,0,0], 
+                form_errors: [false,false,false,false],
+                inputs_key: 0, // Hack to re-render inputs
             }; 
         },
         methods: {
             updateWealth (op) {
-                const values = this.edit_values.map(Number);
+                const values = this.edit_values;
-                console.log('updateWealth', op, values);
+                this.form_errors.fill(false); // Reset error status
-                let success;
+                values.forEach((v,i) => {
-                if (true) {
+                    if (isNaN(v)) { 
-                    success = true;
+                        console.log("error with value", v); 
-                } 
+                        this.form_errors[i] = true;
+                        };
+                });
+                const success = !this.form_errors.includes(true);
                 if (success) {
+                    console.log('updated', op, values);
                     this.$emit('updated');
-                    this.edit_values.fill(0)
+                    this.edit_values.fill(0) }
-
+                else {
+                    console.log(this.form_errors);
+                    this.inputs_key += 1;
                 }
             }
         }