first work on front events

resources/js/components/Form/DateTimeField.vue

@@ -1,13 +1,74 @@
 <template>
-$END$
+    <div class="relative mb-2">
+        <label v-if="label" :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
+        <div class="flex">
+            <input type="date" :name="name" v-model="dateInput" :class="'flex-2 p-2 ' + classes + ' ' + errorClassObject()">
+            <input type="time" v-model="timeInput" :class="'flex-1 p-2 ' + classes + ' ' + errorClassObject()">
+        </div>
+        <p class="text-red no-indent m-0" v-text="errorMessage()">Error Here</p>
+    </div>
 </template>
 
 <script>
 export default {
-name: "DateTimeField"
+    name: 'DateTimeField',
+    props: {
+        classes: String,
+        label: String,
+        name: {
+            type: String,
+            required: true,
+        },
+        date: Date,
+        time: String,
+        required: {
+            type: Boolean,
+            default: false
+        },
+        errors: Object,
+    },
+    data: function () {
+        return {
+            dateInput: '',
+            timeInput: '00:00',
+            value: '',
+        }
+    },
+    computed: {
+        hasError: function () {
+            return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+        }
+    },
+    methods: {
+        updateField: function () {
+            this.value = this.dateInput + ' ' + this.timeInput
+            this.clearErrors(this.date)
+            this.$emit('update:field', this.value)
+        },
+        errorMessage: function () {
+            if (this.hasError) {
+                return this.errors[this.name][0]
+            }
+        },
+        clearErrors: function () {
+            if (this.hasError) {
+                this.errors[this.name] = null
+            }
+        },
+        errorClassObject: function () {
+            if (this.hasError) {
+                return 'border-red'
+            }
+        }
+    },
+    watch: {
+        dateInput: function () {
+            this.updateField()
+        },
+        timeInput: function () {
+            this.updateField()
+        }
+    }
 }
 </script>
 
-<style scoped>
-
-</style>

resources/js/components/Form/InputField.vue

@@ -2,7 +2,7 @@
     <div class="relative mb-2">
         <label v-if="label" :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
         <input :id="name" :type="type" :placeholder="placeholder" v-model="value" @input="updateField()" :class="'w-full p-2 ' + classes + ' ' + errorClassObject()">
-        <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
+        <p class="text-red no-indent m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
@@ -55,8 +55,8 @@ export default {
             }
         },
         errorClassObject: function () {
-            return {
-                'error-field': this.hasError
+            if (this.hasError) {
+                return 'border-red'
             }
         }
     },

resources/js/components/Form/SelectorField.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="relative mb-2">
+        <label v-if="label" :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
+        <select :name="name" v-for="option in options" :key="option.value" v-model="value" :class="'block w-full p-2 ' + errorClassObject()">
+            <option value="">----</option>
+            <option :value="option.value" v-if="selected === String(option.value)" selected>{{ option.label }}</option>
+            <option :value="option.value" v-else>{{ option.label }}</option>
+        </select>
+        <p class="text-red no-indent m-0" v-text="errorMessage()">Error Here</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'SelectorField',
+    props: {
+        classes: String,
+        label: String,
+        name: {
+            type: String,
+            required: true,
+        },
+        options: Array,
+        selected: String,
+        required: {
+            type: Boolean,
+            default: false
+        },
+        errors: Object,
+    },
+    data: function () {
+        return {
+            value: ''
+        }
+    },
+    computed: {
+        hasError: function () {
+            return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+        }
+    },
+    methods: {
+        errorMessage: function () {
+            if (this.hasError) {
+                return this.errors[this.name][0]
+            }
+        },
+        clearErrors: function () {
+            if (this.hasError) {
+                this.errors[this.name] = null
+            }
+        },
+        errorClassObject: function () {
+            if (this.hasError) {
+                return 'border-red'
+            }
+        }
+    },
+    watch: {
+        value: function () {
+            this.clearErrors(this.name)
+            this.$emit('update:field', this.value)
+        }
+    }
+}
+</script>

resources/js/components/Form/TextAreaField.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="relative mb-2">
-        <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
+        <label v-if="label" :for="name" class="pb-2 font-bold text-xl ml-1">{{ label }}</label>
         <textarea :id="name"
                   type="text"
                   v-model="value"
@@ -9,7 +9,7 @@
                   :class="errorClassObject()"
                   class="w-full h-64 rounded p-2">
         </textarea>
-        <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
+        <p class="text-red no-indent m-0" v-text="errorMessage()">Error Here</p>
     </div>
 </template>
 
@@ -60,8 +60,8 @@ export default {
             }
         },
         errorClassObject: function () {
-            return {
-                'error-field': this.hasError
+            if (this.hasError) {
+                return 'border-red'
             }
         }
     },