adds actions button, adds comments about testing

lootalot_front/src/components/Chest.vue

@@ -3,13 +3,36 @@
     <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">
+    <table class="table is-fullwidth is-striped" >
         <thead>
-          <tr><th>Objets de {{ player }}</th></tr>
+          <tr>
+            <th>Objets de {{ player }}</th>
+            <th v-if="canGrab"></th>
+            <th v-if="canSell">
+                  <button class="button is-warning is-medium">
+                    <span class="icon">
+                      <i class="fas fa-coins"></i>
+                    </span>
+                    <small>Vendre</small>
+                  </button>
+            </th>
+          </tr>
         </thead>
         <tbody>
           <template v-for="(item, idx) in content">
-            <tr :key="idx"><td>{{item.name}}</td></tr>
+            <tr :key="`row-${idx}`">
+                <td>{{item.name}}</td>
+                <td v-if="canGrab">
+                  <button class="button is-primary is-medium" disabled>
+                    <span class="icon">
+                      <i class="fas fa-praying-hands"></i>
+                    </span>
+                    <small>Request pending...</small>
+                  </button>
+                </td>
+                <td v-if="canSell">
+               </td>
+            </tr>
           </template>
         </tbody>
     </table>
@@ -18,6 +41,13 @@
 
 <script>
     import { store } from '../App.vue'
+    /*
+        The chest displays the collection of items owned by a player
+
+        TO TEST :
+            - Possible interactions depends on player_id and current chest
+            - Objects are displayed as a table
+    */
     export default {
         props: {
             player: {
@@ -52,3 +82,7 @@
         },
     }
 </script>
+
+<style scoped>
+    .table td, .table th { vertical-align: middle; }
+</style>

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>
 

lootalot_front/src/components/Player.vue

@@ -15,7 +15,7 @@
             </a>
           </div>
           <div class="dropdown-menu" id="dropdown-menu" role="menu"
-            v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown' }">
+            v-closable="{ exclude: ['dropdown_btn'], handler: 'closeDropdown', visible: show_dropdown }">
             <div class="dropdown-content">
               <a v-for="(p,i) in player_list" :key="i"
                  @click="setActivePlayer(i)" 
@@ -55,6 +55,19 @@
     import Wealth from './Wealth.vue'
     /*
     The Player control board.
+    To test :
+        - Player name is displayed
+        - Player's wealth is displayed -> Inside Wealth component
+        - Dropdown:
+            - The first item is the group
+            - Opened by activator
+            - Closed when clicked outside
+            - Click on item does switch active player
+        - Switch player :
+            - Name is updated when player_id is updated
+            - Wealth is updated -> Inside Wealth component
+        - Chest button controls Chest visibility
+            
     */
     let handleOutsideClick;
     export default {
@@ -75,6 +88,7 @@
                 ],
                 show_dropdown: false,
                 edit_wealth: false,
+                handleOutsideClick: null,
             };
         },
         computed: {
@@ -109,7 +123,6 @@
             'closable': {
                 bind: function(el, binding, vnode) { 
                     handleOutsideClick = (e) => {
-                        console.log("outsideClick");
                         e.stopPropagation();
                         const { exclude, handler } = binding.value;
                         let excludedElClicked = false;
@@ -125,12 +138,21 @@
                             vnode.context[handler]()
                         }
                     };
+                },
+                // Bind custom handler only when dropdown is visible
+                update: function(el, binding, vnode, _) {
+                    const { visible } = binding.value;
+                    if (visible) {
                         document.addEventListener('click', handleOutsideClick);
                         document.addEventListener('touchstart', handleOutsideClick);
+                    } else {
+                        document.removeEventListener('click', handleOutsideClick);
+                        document.removeEventListener('touchstart', handleOutsideClick);
+                    }
                 },
                 unbind: function() { console.log("unbind"); 
-                    document.removeEventListener('click', handleOustideClick);
+                    document.removeEventListener('click', handleOutsideClick);
-                    document.removeEventListener('touchstart', handleOustideClick);
+                    document.removeEventListener('touchstart', handleOutsideClick);
                 }
             }
         }