add components form folder

resources/js/components/Form/CheckBoxField.vue

@@ -0,0 +1,43 @@
+<template>
+    <label class="custom-label flex">
+        <div :class="'bg-white shadow w-6 h-6 p-1 flex justify-center items-center mr-2' + classes">
+            <input type="checkbox" class="hidden" :checked="checkIt" @click="checkThis">
+            <div class="hidden check rounded-sm w-4 h-4 bg-gray-700 pointer-events-none"></div>
+        </div>
+        <span class="select-none ml-1">{{ label }}</span>
+    </label>
+</template>
+
+<script>
+export default {
+    name: 'CheckBoxField',
+    props: {
+        checkIt: {
+            type: Boolean,
+        },
+        classes: String,
+        label: String,
+        required: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data: function () {
+        return {
+            check: this.checkIt,
+        }
+    },
+    methods: {
+        checkThis() {
+            this.check = !this.check
+            this.$emit('update:field', this.check)
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .custom-label input:checked + .check {
+        display: block !important;
+    }
+</style>

resources/js/components/Form/DateTimeField.vue

@@ -0,0 +1,13 @@
+<template>
+$END$
+</template>
+
+<script>
+export default {
+name: "DateTimeField"
+}
+</script>
+
+<style scoped>
+
+</style>

resources/js/components/Form/InputField.vue

@@ -0,0 +1,69 @@
+<template>
+    <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>
+    </div>
+</template>
+
+<script>
+
+export default {
+    name: 'InputField',
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        type: {
+            type: String,
+            default: 'text'
+        },
+        label:  String,
+        placeholder: String,
+        required: {
+            type: Boolean,
+            default: false
+        },
+        errors: Object,
+        data: String,
+        classes: String,
+    },
+    data: function () {
+        return {
+            value: ''
+        }
+    },
+    computed: {
+        hasError: function () {
+            return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+        }
+    },
+    methods: {
+        updateField: function () {
+            this.clearErrors(this.name)
+            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 () {
+            return {
+                'error-field': this.hasError
+            }
+        }
+    },
+    watch: {
+        data: function (val) {
+            this.value = val
+        }
+    }
+}
+</script>

resources/js/components/Form/TextAreaField.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="relative mb-2">
+        <label v-if="label" :for="name" class="pb-1">{{ label }}</label>
+        <textarea :id="name"
+                  type="text"
+                  v-model="value"
+                  :placeholder="placeholder"
+                  @input="updateField()"
+                  :class="errorClassObject()"
+                  class="w-full h-64 rounded p-2">
+        </textarea>
+        <p class="text-red-600 m-0" v-text="errorMessage()">Error Here</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'TextAreaField',
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        type: {
+            type: String,
+            default: 'text'
+        },
+        label:  String,
+        placeholder: String,
+        required: {
+            type: Boolean,
+            default: false
+        },
+        errors: Object,
+        data: String,
+    },
+    data: function () {
+        return {
+            value: ''
+        }
+    },
+    computed: {
+        hasError: function () {
+            return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+        }
+    },
+    methods: {
+        updateField: function () {
+            this.clearErrors(this.name)
+            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 () {
+            return {
+                'error-field': this.hasError
+            }
+        }
+    },
+    watch: {
+        data: function (val) {
+            this.value = val
+        }
+    }
+}
+</script>

resources/js/components/Form/UploadableImage.vue

@@ -0,0 +1,87 @@
+<template>
+    <img
+        v-if="image"
+        :class="classes"
+        :src="imageObject.data.attributes.path"
+        ref="image"
+        :alt="alt">
+</template>
+
+<script>
+import Dropzone from 'dropzone'
+import { mapGetters } from 'vuex'
+
+export default {
+    name: 'UploadableImage',
+    props: {
+        imageWidth: {
+            type: Number,
+            required: true,
+        },
+        imageHeight: {
+            type: Number,
+            required: true,
+        },
+        location: {
+            type: String,
+            required: true
+        },
+        image: {
+            type: Object,
+            default: null,
+        },
+        author: {
+            type: Object,
+            required: true
+        },
+        id: {
+            type: Number,
+            required: true
+        },
+        model: {
+            type: String,
+            required: true
+        },
+        classes: String,
+        alt: String
+    },
+    data: () => {
+        return {
+            dropzone: null,
+            dropImage: null,
+        }
+    },
+    mounted() {
+        if(this.authUser.data.user_id === this.author.data.user_id) {
+            this.dropzone = new Dropzone(this.$refs.image, this.settings)
+        }
+    },
+    computed: {
+        ...mapGetters({
+            authUser: 'authUser'
+        }),
+        settings() {
+            let url = '/api/images/' + this.model + '/' + this.id
+            return {
+                paramName: 'image',
+                url: url,
+                acceptedFiles: 'image/*',
+                params: {
+                    'width': this.imageWidth,
+                    'height': this.imageHeight,
+                    'location': this.location,
+                },
+                headers: {
+                    'X-CSRF-TOKEN': document.head.querySelector('meta[name=csrf-token]').content
+                },
+                success: (e, res) => {
+                    this.dropImage = res
+                }
+            }
+        },
+        imageObject() {
+            return this.dropImage || this.image
+        }
+    }
+}
+</script>