From 722f372a014239e9bef9b8a1bc60d15e6cf5fb50 Mon Sep 17 00:00:00 2001
From: BinarySandia04 <aranseraroig@gmail.com>
Date: Mon, 23 Sep 2024 15:24:20 +0200
Subject: [PATCH] Item sheet description fields

---
 client/src/locale/en-US.json                  |  5 ++-
 client/src/views/partials/NumberInput.vue     | 29 +++++++++++++++++
 .../views/windows/game/dnd-5e/ItemSheet.vue   | 31 ++++++++++++++++---
 3 files changed, 59 insertions(+), 6 deletions(-)
 create mode 100644 client/src/views/partials/NumberInput.vue

diff --git a/client/src/locale/en-US.json b/client/src/locale/en-US.json
index 04a6848e..1c456dbc 100644
--- a/client/src/locale/en-US.json
+++ b/client/src/locale/en-US.json
@@ -11,7 +11,10 @@
         "username": "Username",
         "password": "Password",
         "password-confirm": "Confirm your password",
-        "register": "Register"
+        "register": "Register",
+        "quantity": "Quantity",
+        "weight": "Weight",
+        "price": "Price"
     },
     "placeholders": {
         "name": "John Doe",
diff --git a/client/src/views/partials/NumberInput.vue b/client/src/views/partials/NumberInput.vue
new file mode 100644
index 00000000..44ff05ef
--- /dev/null
+++ b/client/src/views/partials/NumberInput.vue
@@ -0,0 +1,29 @@
+<script setup>
+import { ref } from 'vue';
+
+const input = ref(null)
+
+function Set(value){
+    input.value.value = value;
+}
+
+function OnUpdate(callback){
+    input.value.addEventListener("change", (e) => {callback(input.value.value) });
+}
+
+defineExpose({
+    Set,
+    OnUpdate
+})
+</script>
+
+<template>
+<input type="text" class="number-input" ref="input">
+</template>
+
+<style lang="scss" scoped>
+.number-input {
+    max-width: 70px;
+    text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/client/src/views/windows/game/dnd-5e/ItemSheet.vue b/client/src/views/windows/game/dnd-5e/ItemSheet.vue
index 00d4811e..bb9024e6 100644
--- a/client/src/views/windows/game/dnd-5e/ItemSheet.vue
+++ b/client/src/views/windows/game/dnd-5e/ItemSheet.vue
@@ -11,6 +11,7 @@ import { GetConcept } from '@/services/Data';
 import Tabs from '@/views/partials/Tabs.vue';
 import MarkdownEditor from '@/views/partials/MarkdownEditor.vue';
 import Tags from '@/views/partials/Tags.vue';
+import NumberInput from '@/views/partials/NumberInput.vue';
 const props = defineProps(['data']);
 const data = props.data;
 
@@ -22,6 +23,9 @@ const item_name = ref(null);
 const icon_selector = ref(null);
 const description = ref(null);
 const properties = ref(null);
+const quantity = ref(null);
+const weight = ref(null);
+const price = ref(null);
 
 function GenRarities(){
     let rarities = [];
@@ -78,18 +82,14 @@ function SetParam(param, value){
 
 function IconSelected(val){
     SetParam('icon', val.selected.path);
-    Upload();
 }
 
 function DescriptionChanged(text){
     SetParam('description', text);
-    Upload();
 }
 
 function PropertiesChanged(properties){
-    console.log(properties);
     SetParam('properties', properties);
-    Upload();
 }
 
 function InitValues(){
@@ -105,6 +105,14 @@ function InitValues(){
     if(concept.value.info.description) description.value.text = concept.value.info.description;
     if(concept.value.info.properties) properties.value.selected = concept.value.info.properties;
 
+    if(concept.value.info.quantity) quantity.value.Set(concept.value.info.quantity);
+    if(concept.value.info.weight) weight.value.Set(concept.value.info.weight);
+    if(concept.value.info.price) price.value.Set(concept.value.info.price);
+
+    quantity.value.OnUpdate((val) => SetParam('quantity', val));
+    weight.value.OnUpdate((val) => SetParam('weight', val));
+    price.value.OnUpdate((val) => SetParam('price', val));
+
     rarity.value.addEventListener("click", () => {
         ShowContextMenu(rarities)
     });
@@ -175,7 +183,20 @@ onMounted(() => {
                 <template #description>
                     <div class="description-container">
                         <div class="description-sidebar">
-                            <p>Hola</p>
+                            <div class="form-container">
+                                <div class="form-element">
+                                    <label>{{$t('general.quantity')}}</label>
+                                    <NumberInput ref="quantity"></NumberInput>
+                                </div>
+                                <div class="form-element">
+                                    <label>{{$t('general.weight')}}</label>
+                                    <NumberInput ref="weight"></NumberInput>
+                                </div>
+                                <div class="form-element">
+                                    <label>{{$t('general.price')}}</label>
+                                    <NumberInput ref="price"></NumberInput>
+                                </div>
+                            </div>
                         </div>
                         <div class="description">
                             <MarkdownEditor ref="description" :done="DescriptionChanged"></MarkdownEditor>