From be5d71906812a13e820ca197527a67cbb0724b23 Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Sat, 15 Jun 2019 15:20:29 +0200
Subject: [PATCH] adds PercentInput for value modding in sell action

---
 lootalot_front/src/components/Chest.vue       | 28 +++++++++++++------
 .../src/components/PercentInput.vue           | 28 +++++++++++++++++++
 2 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 lootalot_front/src/components/PercentInput.vue

diff --git a/lootalot_front/src/components/Chest.vue b/lootalot_front/src/components/Chest.vue
index 41e4238..df2090a 100644
--- a/lootalot_front/src/components/Chest.vue
+++ b/lootalot_front/src/components/Chest.vue
@@ -7,7 +7,8 @@
             <th>Objets de {{ player }}</th>
             <th v-if="canGrab"></th>
             <th v-if="canSell">
-                  <button class="button is-fullwidth" 
+                <div class="buttons is-right">
+                  <button class="button" 
                     :class="is_selling ? 'is-danger' :  'is-warning'"
                     @click="is_selling = !is_selling"
                     >
@@ -17,6 +18,8 @@
                     <p v-if="!is_selling">Vendre</p>
                     <p v-else>{{ totalSellValue ? totalSellValue : 'Annuler' }}</p>
                   </button>
+                  <PercentInput v-show="is_selling"></PercentInput>
+                </div>
             </th>
           </tr>
         </thead>
@@ -28,13 +31,18 @@
                 <Request :item="item.id"></Request>
               </td>
               <td v-if="canSell">
-                <label class="checkbox" v-show="is_selling">
-                <input type="checkbox" 
-                    id="`item-${idx}`" 
-                    :value="item.id"
-                    v-model="sell_selected">
-                  {{item.sell_value}} GP
-                </label>
+                <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.sell_value}} GP
+                    </label>
+                  </div>
+                  <PercentInput></PercentInput>
+                </div>
               </td>
             </tr>
           </template>
@@ -46,6 +54,7 @@
 <script>
     import { store } from '../App.vue'
     import Request from './Request.vue'
+    import PercentInput from './PercentInput.vue'
     /*
         The chest displays the collection of items owned by a player
 
@@ -67,7 +76,8 @@
             }
         },
         components: {
-            Request
+            Request,
+            PercentInput,
         },
         data () {
             return {
diff --git a/lootalot_front/src/components/PercentInput.vue b/lootalot_front/src/components/PercentInput.vue
new file mode 100644
index 0000000..57fabff
--- /dev/null
+++ b/lootalot_front/src/components/PercentInput.vue
@@ -0,0 +1,28 @@
+<template>
+        <div class="field has-addons">
+          <div v-show="is_opened" class="control has-icons-left">
+            <input class="input is-small" type="number" size="3" min=-50 max=50 step=5>
+            <span class="icon is-small is-left">
+              <i class="fas fa-percent"></i>
+            </span>
+          </div>
+          <div class="control">
+            <button class="button is-small is-outlined"
+              @click="is_opened = !is_opened"
+            >
+              <small v-if="!is_opened">Mod.</small>
+              <span v-else class="icon"><i class="fas fa-times-circle"></i></span>
+            </button>
+          </div>
+        </div>
+</template>
+
+<script>
+    export default {
+        data () {
+            return {
+                is_opened: false,
+            };
+        }
+    }
+</script>