first work on front events

resources/js/views/Event/EventCreate.vue

@@ -1,13 +1,113 @@
 <template>
-$END$
+    <div class="mx-2 p-2">
+        <form @submit.prevent="submitForm">
+            <div class="flex justify-between flex-center mb-4">
+                <router-link to="/memos/" class="btn">Back</router-link>
+                <button class="btn-primary">Add New Memo</button>
+            </div>
+            <div class="box">
+                <InputField name="name"
+                            label="Nom de l'événement"
+                            placeholder="Nom de l'événement"
+                            required
+                            @update:field="form.name = $event" :errors="errors" />
+                <CheckBoxField :check-it="!!(checked)"
+                               label="Privé"
+                               @update:field="checked = $event"
+                               class="block mb-2" />
+                <div class="flex">
+                    <InputField name="location"
+                                label="Lieu"
+                                placeholder="Lieu"
+                                class="w-64 mr-4"
+                                required
+                                @update:field="form.location = $event" :errors="errors" />
+                    <SelectorField name="category_id"
+                                   label="Catégorie"
+                                   :options="categories"
+                                   class="mr-4"
+                                   required
+                                   @update:field="form.category_id = $event" :errors="errors" />
+                    <DateTimeField
+                        class="mr-4"
+                        label="Date de début"
+                        name="start_date"
+                        required
+                        @update:field="form.start_date = $event" :errors="errors" />
+                    <DateTimeField
+                        label="Date de fin"
+                        name="end_date"
+                        required />
+                </div>
+                <TextAreaField name="description"
+                               label="Description"
+                               placeholder="Your Description"
+                               @update:field="form.description = $event" :errors="errors" />
+            </div>
+        </form>
+    </div>
 </template>
 
 <script>
+import InputField from '../../components/Form/InputField'
+import TextAreaField from '../../components/Form/TextAreaField'
+import CheckBoxField from '../../components/Form/CheckBoxField'
+import DateTimeField from '../../components/Form/DateTimeField'
+import SelectorField from '../../components/Form/SelectorField'
+
 export default {
-name: "EventCreate"
+    name: 'EventCreate',
+    components: {
+        InputField, TextAreaField, CheckBoxField, DateTimeField, SelectorField
+    },
+    data: function () {
+        return {
+            checked: true,
+            categories: [],
+            form: {
+                'category_id': '',
+                'name': '',
+                'private': '',
+                'description': '',
+                'start_date': '',
+                'end_date': '',
+                'location': '',
+            },
+            errors: null,
+        }
+    },
+    mounted() {
+        this.form.private = this.checked
+
+        // eslint-disable-next-line no-undef
+        axios.get('/api/events/categories')
+            .then(response => {
+                response.data.data.forEach(item => this.categories.push({value: item.data.event_category_id, label: item.data.attributes.data.name}))
+            })
+            .catch(errors => {
+                this.errors = errors.response.data.errors
+            })
+    },
+    methods: {
+        submitForm: function () {
+            this.form.private = this.checked
+            console.log(this.form)
+
+            // eslint-disable-next-line no-undef
+            axios.post('/api/events', this.form)
+                .then(response => {
+                    this.$router.push(response.data.links.self)
+                })
+                .catch(errors => {
+                    this.errors = errors.response.data.errors
+                })
+        }
+    },
+    watch: {
+        checked: function () {
+            console.log(this.checked, this.form)
+            this.form.private = this.checked
+        }
+    }
 }
 </script>
-
-<style scoped>
-
-</style>