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>
@@ -21,17 +23,21 @@
         <tbody>
           <template v-for="(item, idx) in content">
             <tr :key="`row-${idx}`">
-                <td>{{item.name}}</td>
+              <td>{{item.name}}</td>
-                <td v-if="canGrab">
+              <td v-if="canGrab">
-                  <button class="button is-primary is-medium" disabled>
+                <button class="button is-primary" disabled>
-                    <span class="icon">
+                  <span class="icon">
-                      <i class="fas fa-praying-hands"></i>
+                    <i class="fas fa-praying-hands"></i>
-                    </span>
+                  </span>
-                    <small>Request pending...</small>
+                  <small>Request pending...</small>
-                  </button>
+                </button>
-                </td>
+              </td>
-                <td v-if="canSell">
+              <td v-if="canSell">
-               </td>
+                <label class="checkbox">
+                <input type="checkbox">
+                  {{item.sell_value}}
+                </label>
+              </td>
             </tr>
           </template>
         </tbody>
@@ -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