From 2efed539fb0b56230a78f8f6fe9987fcc4de844f Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Thu, 13 Jun 2019 14:46:48 +0200
Subject: [PATCH] adds actions button, adds comments about testing

---
 lootalot_front/src/components/Chest.vue  | 40 ++++++++++++++++++++++--
 lootalot_front/src/components/Player.vue | 13 ++++++++
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/lootalot_front/src/components/Chest.vue b/lootalot_front/src/components/Chest.vue
index a23a738..8cc7c60 100644
--- a/lootalot_front/src/components/Chest.vue
+++ b/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>
diff --git a/lootalot_front/src/components/Player.vue b/lootalot_front/src/components/Player.vue
index 26e5353..f9b6e71 100644
--- a/lootalot_front/src/components/Player.vue
+++ b/lootalot_front/src/components/Player.vue
@@ -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 {