fix select defaut value

app/Http/Resources/Event.php

@@ -37,7 +37,7 @@ class Event extends JsonResource
                 ],
             ],
             'links' => [
-                'self' => url('/events/'.$this->id),
+                'self' => $this->path(),
             ]
         ];
     }

app/Models/Event.php

@@ -11,6 +11,11 @@ class Event extends Model
 {
     protected $guarded = [];
 
+    public function path()
+    {
+        return '/events/' . $this->id;
+    }
+
     public function category() :BelongsTo
     {
         return $this->belongsTo(EventCategory::class, 'category_id');

resources/js/components/Form/DateTimeField.vue

@@ -19,12 +19,11 @@ export default {
             type: String,
             required: true,
         },
-        date: Date,
-        time: String,
         required: {
             type: Boolean,
             default: false
         },
+        selected: String,
         errors: Object,
     },
     data: function () {
@@ -37,6 +36,12 @@ export default {
     computed: {
         hasError: function () {
             return this.required && this.errors && this.errors[this.name] && this.errors[this.name].length > 0
+        },
+        date: function () {
+            return this.selected.split(' ')[0]
+        },
+        time: function () {
+            return this.selected.split(' ')[1]
         }
     },
     methods: {

resources/js/components/Form/SelectorField.vue

@@ -1,10 +1,12 @@
 <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()">
+        <select :name="name"
-            <option value="">----</option>
+                v-model="selected"
-            <option :value="option.value" v-if="selected === String(option.value)" selected>{{ option.label }}</option>
+                :class="'block w-full p-2 ' + errorClassObject()">
-            <option :value="option.value" v-else>{{ option.label }}</option>
+            <option v-for="option in options"
+                    :key="option.value"
+                    :value="option.value">{{ option.label }}</option>
         </select>
         <p class="text-red no-indent m-0" v-text="errorMessage()">Error Here</p>
     </div>
@@ -21,18 +23,13 @@ export default {
             required: true,
         },
         options: Array,
-        selected: String,
+        selected: Number,
         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
@@ -56,9 +53,9 @@ export default {
         }
     },
     watch: {
-        value: function () {
+        selected: function () {
             this.clearErrors(this.name)
-            this.$emit('update:field', this.value)
+            this.$emit('update:field', this.selected)
         }
     }
 }

resources/js/views/Event/EventCreate.vue

@@ -37,7 +37,7 @@
                     <DateTimeField
                         label="Date de fin"
                         name="end_date"
-                        required />
+                        @update:field="form.end_date = $event" :errors="errors" />
                 </div>
                 <TextAreaField name="description"
                                label="Description"
@@ -91,7 +91,6 @@ export default {
     methods: {
         submitForm: function () {
             this.form.private = this.checked
-            console.log(this.form)
 
             // eslint-disable-next-line no-undef
             axios.post('/api/events', this.form)

resources/js/views/Event/EventEdit.vue

@@ -4,7 +4,7 @@
         <form v-else @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>
+                <button type="submit" class="btn-primary">Update Event</button>
             </div>
             <div class="box">
                 <InputField name="name"
@@ -26,22 +26,24 @@
                                 required
                                 @update:field="form.location = $event" :errors="errors" />
                     <SelectorField name="category_id"
+                                   v-if="form.category_id"
                                    label="Catégorie"
                                    :options="categories"
                                    class="mr-4"
                                    required
-                                   :selected="String(form.category_id)"
+                                   :selected="form.category_id"
                                    @update:field="form.category_id = $event" :errors="errors" />
                     <DateTimeField
                         class="mr-4"
                         label="Date de début"
                         name="start_date"
+                        :selected="form.start_date"
                         required
                         @update:field="form.start_date = $event" :errors="errors" />
                     <DateTimeField
                         label="Date de fin"
                         name="end_date"
-                        required />
+                        @update:field="form.end_date = $event" :errors="errors" />
                 </div>
                 <TextAreaField name="description"
                                label="Description"
@@ -103,8 +105,6 @@ export default {
                 this.form = this.event.data.attributes.data
                 this.form.description = this.event.data.attributes.data.description
                 this.form.category_id = this.event.data.attributes.data.category.data.event_category_id
-                console.log(this.form)
-                // this.loading = false
             })
             .catch(errors => {
                 this.errors = errors.response.data.errors
@@ -113,10 +113,12 @@ export default {
     methods: {
         submitForm: function () {
             this.form.private = this.checked
-            console.log(this.form)
+            delete this.form.category
+            delete this.form.invitations
+            delete this.form['invitations-with-email']
 
             // eslint-disable-next-line no-undef
-            axios.patch('/api/events', this.form)
+            axios.patch('/api/events/' + this.event.data.event_id, this.form)
                 .then(response => {
                     this.$router.push(response.data.links.self)
                 })
@@ -127,7 +129,6 @@ export default {
     },
     watch: {
         checked: function () {
-            console.log(this.checked, this.form)
             this.form.private = this.checked
         }
     }

resources/js/views/Event/EventShow.vue

@@ -19,13 +19,15 @@
         <div v-else class="box">
             <div class="flex justify-between flex-wrap">
                 <h1 class="text-xl text-marine">{{ event.data.attributes.data.name }}</h1>
-                <h2 class="text-sm text-marine">{{ event.data.attributes.data.location }}</h2>
-            </div>
-
-            <div v-if="event.data.attributes.data.description">{{ event.data.attributes.data.description }}</div>
-            <div class="flex justify-between">
                 <span class="mt-auto self-end bg-gray-400 text-white tag">{{ event.data.attributes.data.category.data.attributes.data.name }}</span>
-                <span class="mt-auto self-end bg-gray-400 text-white tag">{{ event.data.attributes.data.start_date }}</span>
+            </div>
+            <h2 class="text-lg text-marine">{{ event.data.attributes.data.location }}</h2>
+            <div v-if="event.data.attributes.data.description">{{ event.data.attributes.data.description }}</div>
+            <div class="flex justify-end">
+                <div>
+                    <span class="mt-auto self-end bg-gray-400 text-white tag">{{ event.data.attributes.data.start_date }}</span>
+                    <span v-if="event.data.attributes.data.end_date" class="mt-auto self-end bg-gray-400 text-white tag">{{ event.data.attributes.data.end_date }}</span>
+                </div>
             </div>
         </div>
     </div>

resources/js/views/ToDoLists/ToDoListIndex.vue

@@ -73,7 +73,6 @@ export default {
             // eslint-disable-next-line no-undef
             axios.post('/api/to-do-lists', {name: this.name})
                 .then(res => {
-                    console.log(res)
                     this.modal = false
                     this.name = ''
                     this.toDoLists.push(res.data)

tests/Feature/EventsTest.php

@@ -249,7 +249,7 @@ class EventsTest extends TestCase
                 ],
             ],
             'links' => [
-                'self' => url('/events/'.$event->id),
+                'self' => '/events/'.$event->id,
             ]
         ]);
     }