adds show/hides of loot add card

lootalot_front/src/components/Chest.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="container">
-    <button v-if="canAdd" class="button is-medium is-info">
+    <button v-if="canAdd" 
+        class="button is-medium is-info"
+        @click="is_adding = true"
+        v-show="!is_adding">
         Nouveau loot
     </button>
-    <Loot></Loot>
-    <table class="table is-fullwidth is-striped" >
+    <Loot v-if="is_adding" @done="is_adding = false"></Loot>
+    <table v-else class="table is-fullwidth is-striped" >
       <thead>
         <tr>
           <th>Objets de {{ player }}</th>
@@ -18,10 +21,13 @@
                 <span class="icon">
                   <i class="fas fa-coins"></i>
                 </span>
-                    <p v-if="!is_selling">Vendre</p>
-                    <p v-else>{{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
+                <p v-if="!is_selling">
+                  Vendre</p>
+                <p v-else>
+                  {{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
                 </button>
-                  <PercentInput v-show="is_selling"></PercentInput>
+                <PercentInput v-show="is_selling">
+                  </PercentInput>
               </div>
             </th>
           </tr>
@@ -94,6 +100,7 @@
                      sell_value: 80000 },
                 ],
                 is_selling: false,
+                is_adding: false,
                 sell_selected: [],
             };
         },

lootalot_front/src/components/Loot.vue

@@ -2,7 +2,7 @@
     <div class="card">
         <div class="card-header">
           <p class="card-header-title">
-            Nouveau loot</p>
+            Nouveau loot - {{ looted.length }} objet(s)</p>
           </div>
         <div class="card-content">
           <ItemInput @addItem="onAddItem"></ItemInput>
@@ -11,6 +11,10 @@
             {{ item }}
           </p>
           </div>
+        <div class="card-footer">
+          <a class="card-footer-item">Confirmer</a>
+          <a @click="onClose" class="card-footer-item">Annuler</a>
+          </div>
       </div>
 </template>
 
@@ -26,7 +30,10 @@
         methods: {
             onAddItem (item) {
                 this.looted.push(item);
-            }
+            },
+            onClose () {
+                this.$emit('done');
+            },
         }
 
     }