basics

vue/src/components/Modals/GenericModalForm.vue

@@ -15,6 +15,7 @@
                 <file-input v-if="visibleCondition(f, 'file')" :label="f.label" :value="f.value" :field="f.field" @change="storeValue" />
                 <small-text v-if="visibleCondition(f, 'smalltext')" :value="f.value" />
                 <date-input v-if="visibleCondition(f, 'date')" :label="f.label" :value="f.value" :field="f.field" :help="showHelp && f.help" :subtitle="f.subtitle" />
+				<number-input v-if="visibleCondition(f, 'number')" :label="f.label" :value="f.value" :field="f.field" :placeholder="f.placeholder" :help="showHelp && f.help" :subtitle="f.subtitle" />
             </div>
             <template v-slot:modal-footer>
                 <div class="row w-100">
@@ -49,10 +50,11 @@ import ChoiceInput from "@/components/Modals/ChoiceInput"
 import FileInput from "@/components/Modals/FileInput"
 import SmallText from "@/components/Modals/SmallText"
 import HelpBadge from "@/components/Badges/Help"
+import NumberInput from "@/components/Modals/NumberInput.vue";
 
 export default {
     name: "GenericModalForm",
-    components: { FileInput, CheckboxInput, LookupInput, TextInput, EmojiInput, ChoiceInput, SmallText, HelpBadge,DateInput },
+    components: { FileInput, CheckboxInput, LookupInput, TextInput, EmojiInput, ChoiceInput, SmallText, HelpBadge,DateInput, NumberInput },
     mixins: [ApiMixin, ToastMixin],
     props: {
         model: { required: true, type: Object },

vue/src/components/Modals/NumberInput.vue

@@ -0,0 +1,37 @@
+<template>
+    <div>
+        <b-form-group v-bind:label="label" class="mb-3">
+            <b-form-input v-model="new_value" type="number" :placeholder="placeholder"></b-form-input>
+            <em v-if="help" class="small text-muted">{{ help }}</em>
+            <small v-if="subtitle" class="text-muted">{{ subtitle }}</small>
+        </b-form-group>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "TextInput",
+    props: {
+        field: { type: String, default: "You Forgot To Set Field Name" },
+        label: { type: String, default: "Text Field" },
+        value: { type: String, default: "" },
+        placeholder: { type: Number, default: 0 },
+        help: { type: String, default: undefined },
+        subtitle: { type: String, default: undefined },
+    },
+    data() {
+        return {
+            new_value: undefined,
+        }
+    },
+    mounted() {
+        this.new_value = this.value
+    },
+    watch: {
+        new_value: function () {
+            this.$root.$emit("change", this.field, this.new_value)
+        },
+    },
+    methods: {},
+}
+</script>