removes Chest use of AppStorage, various fixes

lootalot_front/src/components/Chest.vue

@@ -3,9 +3,9 @@
     <thead>
       <tr>
         <th>Objets</th>
-        <th v-if="canGrab"></th>
-        <th v-if="canSell">
-          <div class="buttons is-right">
+        <th>Valeur</th>
+        <th>
+          <div v-show="perms.canSell" class="buttons is-right" :class="{'has-addons': is_selling}">
             <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>
@@ -14,58 +14,50 @@
             </button>
             <PercentInput v-show="is_selling"></PercentInput>
           </div>
+          <div v-show="perms.canBuy">
+            <button class="button is-primary">Acheter</button>
+          </div>
         </th>
       </tr>
     </thead>
-    <tbody v-if="app_state.initiated">
+    <tbody>
       <template v-for="(item, idx) in items">
         <tr :key="`row-${idx}`">
+          <td><strong>{{item.name}}</strong></td>
+          <td>{{ item.base_price }}po</td>
           <td>
-            <strong>{{item.name}}</strong>
-          </td>
-          <td v-if="canGrab">
-            <Request :item="item.id"
-             @claim="(data) => $emit('claim', data)"
-             @unclaim="(data) => $emit('unclaim', data)"
-             ></Request>
-          </td>
-          <td v-if="canSell">
-            <div class="field is-grouped is-pulled-right" v-show="is_selling">
-              <div class="control">
-                <label class="label">
-                  <input type="checkbox"
-                      id="`item-${idx}`"
-                      :value="item.id"
-                      v-model="sell_selected">
-                    {{item.base_price / 2}} GP
-                </label>
-              </div>
+            <Request v-show="perms.canGrab" 
+              :item="item.id"
+              @claim="(data) => $emit('claim', data)"
+              @unclaim="(data) => $emit('unclaim', data)">
+            </Request>
+            <div v-show="is_selling || perms.canBuy" class="field is-grouped is-pulled-right" >
+              <input type="checkbox" class="checkbox"
+                id="`select-${idx}`"
+                :value="item.id"
+                v-model="selected_items">
+              <label for="`select-${idx}`">
+                  {{item.base_price / 2}} GP
+              </label>
               <PercentInput></PercentInput>
             </div>
           </td>
         </tr>
       </template>
     </tbody>
-    <p v-else>Loading...</p>
   </table>
 </template>
 
 <script>
-    import { AppStorage } from '../AppStorage'
     import Request from './Request.vue'
     import PercentInput from './PercentInput.vue'
     import Loot from './Loot.vue'
     /*
-        The chest displays the collection of items owned by a player
+        The chest displays a collection of items.
 
-        TO TEST :
-            - Possible interactions depends on player_id and current chest
-            - Objects are displayed as a table
+        A set of permissions is passed as props, to update
+        the possible actions of active user upon these items.
 
-        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: {
@@ -74,10 +66,9 @@
                 required: true,
                 default: [] 
             },
-            player: {
-                type: Number,
+            perms: {
+                type: Object,
                 required: true,
-                default: 0
             },
         },
         components: {
@@ -87,42 +78,22 @@
         },
         data () {
             return {
-                app_state: AppStorage.state,
                 is_selling: false,
                 is_adding: false,
-                sell_selected: [],
+                selected_items: [],
             };
         },
-        methods: {
-       	    fetchLoot () {
-
-       	    }
-        },
         computed: {
-            // Can the active user sell items from this chest ?
-            canSell () {
-                return this.player == this.app_state.player_id;
-            },
             totalSellValue () {
-                const selected = this.sell_selected;
                 return this.items
-                    .filter(item => selected.includes(item.id))
+                    .filter(item => this.selected_items.includes(item.id))
                     .map(item => item.base_price / 2)
                     .reduce((total,value) => total + value, 0);
             },
-            // Can the user grab items from this chest ?
-            canGrab () {
-                return (this.app_state.player_id != 0  // User is not the group
-                     && this.player == 0);  // This is the group chest
-            },
-            canAdd () {
-                return (this.app_state.player_id == 0 
-                    && this.player == 0);
-            },
         },
     }
 </script>
 
 <style scoped>
-    .table td, .table th { vertical-align: middle; }
+    .table td, .table th { vertical-align: bottom; }
 </style>