From f466ce7cc9ea6545ce372781d5e4d170b1f19e67 Mon Sep 17 00:00:00 2001
From: Romulus21 <romain@delanoe.me>
Date: Mon, 24 Aug 2020 07:55:32 +0200
Subject: [PATCH] first work on front events

---
 app/Http/Controllers/EventController.php      |   8 +-
 app/Http/Resources/Event.php                  |   7 +-
 app/Models/Event.php                          |   6 +
 deploy.sh                                     |   2 +
 .../js/components/Form/DateTimeField.vue      |  71 ++++++++-
 resources/js/components/Form/InputField.vue   |   6 +-
 .../js/components/Form/SelectorField.vue      |  65 +++++++++
 .../js/components/Form/TextAreaField.vue      |   8 +-
 resources/js/components/Nav.vue               |   4 +
 resources/js/router.js                        |  18 +++
 resources/js/views/Event/EventCreate.vue      | 112 ++++++++++++++-
 resources/js/views/Event/EventEdit.vue        | 136 ++++++++++++++++++
 resources/js/views/Event/EventIndex.vue       |  57 +++++++-
 resources/js/views/Event/EventShow.vue        |  75 ++++++++++
 resources/sass/components/_base.scss          |   8 ++
 resources/svg/calendar.svg                    |   9 ++
 tests/Feature/EventsTest.php                  |  15 +-
 17 files changed, 575 insertions(+), 32 deletions(-)
 create mode 100644 resources/js/components/Form/SelectorField.vue
 create mode 100644 resources/js/views/Event/EventEdit.vue
 create mode 100644 resources/js/views/Event/EventShow.vue
 create mode 100644 resources/svg/calendar.svg

diff --git a/app/Http/Controllers/EventController.php b/app/Http/Controllers/EventController.php
index 32ed6f6..cdbf925 100644
--- a/app/Http/Controllers/EventController.php
+++ b/app/Http/Controllers/EventController.php
@@ -14,11 +14,15 @@ class EventController extends Controller
     /**
      * Display a listing of the resource.
      *
-     * @return \Illuminate\Http\Response
+     * @return \Illuminate\Http\Response|object
      */
     public function index()
     {
-        //
+        $events = Event::all();
+
+        return (EventResource::collection($events))
+            ->response()
+            ->setStatusCode(200);
     }
 
     /**
diff --git a/app/Http/Resources/Event.php b/app/Http/Resources/Event.php
index 9522499..48f6c75 100644
--- a/app/Http/Resources/Event.php
+++ b/app/Http/Resources/Event.php
@@ -3,6 +3,7 @@
 namespace App\Http\Resources;
 
 use App\Http\Resources\User as UserResource;
+use App\Http\Resources\EventCategory as EventCategoryRessource;
 use App\Http\Resources\EventGuestWithoutEmail as GuestsWithoutEmailResource;
 use Illuminate\Http\Resources\Json\JsonResource;
 
@@ -27,11 +28,7 @@ class Event extends JsonResource
                         'start_date' => $this->start_date,
                         'end_date' => $this->end_date,
                         'location' => $this->location,
-                        'category' => [
-                            'data' => [
-                                'category_id' => $this->category_id
-                            ],
-                        ],
+                        'category' => new EventCategoryRessource($this->category),
                         'invitations' => UserResource::collection($this->guests),
                         'invitations-with-email' => [
                             'data' => GuestsWithoutEmailResource::collection($this->emailedGuests)
diff --git a/app/Models/Event.php b/app/Models/Event.php
index 7d037d6..1d4c312 100644
--- a/app/Models/Event.php
+++ b/app/Models/Event.php
@@ -4,6 +4,7 @@ namespace App\Models;
 
 use App\User;
 use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
 use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 
@@ -11,6 +12,11 @@ class Event extends Model
 {
     protected $guarded = [];
 
+    public function category() :BelongsTo
+    {
+        return $this->belongsTo(EventCategory::class, 'category_id');
+    }
+
     public function guests() :BelongsToMany
     {
         return $this->belongsToMany(User::class, 'event_guest')
diff --git a/deploy.sh b/deploy.sh
index dcd3b66..0feca03 100644
--- a/deploy.sh
+++ b/deploy.sh
@@ -48,6 +48,7 @@ if [ -z "$1" ]; then
 
         composer install
         php artisan migrate --force
+        php artisan db:seed
         php artisan optimize
 
         npm install --no-progress
@@ -79,6 +80,7 @@ elif [ "$1" = git-prod ]; then
 
         composer install
         php artisan migrate --force
+        php artisan db:seed
         php artisan optimize
     fi
 
diff --git a/resources/js/components/Form/DateTimeField.vue b/resources/js/components/Form/DateTimeField.vue
index 1ffd5a8..0ac20e4 100644
--- a/resources/js/components/Form/DateTimeField.vue
+++ b/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>
diff --git a/resources/js/components/Form/InputField.vue b/resources/js/components/Form/InputField.vue
index 0ef175c..f005f6a 100644
--- a/resources/js/components/Form/InputField.vue
+++ b/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'
             }
         }
     },
diff --git a/resources/js/components/Form/SelectorField.vue b/resources/js/components/Form/SelectorField.vue
new file mode 100644
index 0000000..5cbe02a
--- /dev/null
+++ b/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>
diff --git a/resources/js/components/Form/TextAreaField.vue b/resources/js/components/Form/TextAreaField.vue
index 935e133..d3b6fff 100644
--- a/resources/js/components/Form/TextAreaField.vue
+++ b/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'
             }
         }
     },
diff --git a/resources/js/components/Nav.vue b/resources/js/components/Nav.vue
index 5c252ed..25e693d 100644
--- a/resources/js/components/Nav.vue
+++ b/resources/js/components/Nav.vue
@@ -17,6 +17,10 @@
                 <svg-vue icon="globe" />
                 <span>Bookmarks</span>
             </router-link>
+            <router-link to="/events" class="nav-item p-2">
+                <svg-vue icon="calendar" />
+                <span>Evénements</span>
+            </router-link>
             <router-link to="/jeux" class="nav-item p-2">
                 <svg-vue icon="games" />
                 <span>Jeux</span>
diff --git a/resources/js/router.js b/resources/js/router.js
index 49a1c34..010d10d 100644
--- a/resources/js/router.js
+++ b/resources/js/router.js
@@ -15,6 +15,10 @@ import BookmarkIndex from './views/Bookmark/BookmarkIndex'
 import GameIndex from './views/Games/GameIndex'
 import Hangman from './views/Games/HangMan/Hangman'
 import Quizz from './views/Games/Quizz/Quizz'
+import EventIndex from './views/Event/EventIndex'
+import EventCreate from './views/Event/EventCreate'
+import EventShow from './views/Event/EventShow'
+import EventEdit from './views/Event/EventEdit'
 
 Vue.use(VueRouter)
 
@@ -66,6 +70,20 @@ export default new VueRouter({
             meta: {title: 'Details of List'}
         },
 
+        {
+            path: '/events', component: EventIndex,
+            meta: {title: 'Events List'}
+        }, {
+            path: '/events/create', component: EventCreate,
+            meta: {title: 'Add New Event'}
+        }, {
+            path: '/events/:id', component: EventShow,
+            meta: {title: 'Detail for Event'}
+        }, {
+            path: '/events/:id/edit', component: EventEdit,
+            meta: {title: 'Edit Event'}
+        },
+
         {
             path: '/bookmarks', component: BookmarkIndex,
             meta: {title: 'Bookmark Lists'}
diff --git a/resources/js/views/Event/EventCreate.vue b/resources/js/views/Event/EventCreate.vue
index 230edcc..7762f1e 100644
--- a/resources/js/views/Event/EventCreate.vue
+++ b/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>
diff --git a/resources/js/views/Event/EventEdit.vue b/resources/js/views/Event/EventEdit.vue
new file mode 100644
index 0000000..572187c
--- /dev/null
+++ b/resources/js/views/Event/EventEdit.vue
@@ -0,0 +1,136 @@
+<template>
+    <div class="mx-2 p-2">
+        <Loader v-if="loading" />
+        <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>
+            </div>
+            <div class="box">
+                <InputField name="name"
+                            label="Nom de l'événement"
+                            placeholder="Nom de l'événement"
+                            :data="form.name"
+                            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"
+                                :data="form.location"
+                                required
+                                @update:field="form.location = $event" :errors="errors" />
+                    <SelectorField name="category_id"
+                                   label="Catégorie"
+                                   :options="categories"
+                                   class="mr-4"
+                                   required
+                                   :selected="String(form.category_id)"
+                                   @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"
+                               :data="form.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'
+import Loader from '../../components/Loader'
+
+export default {
+    name: 'EventEdit',
+    components: {
+        InputField, TextAreaField, CheckBoxField, DateTimeField, SelectorField, Loader
+    },
+    data: function () {
+        return {
+            loading: false,
+            checked: true,
+            event: null,
+            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
+            })
+
+        // eslint-disable-next-line no-undef
+        axios.get('/api/events/' + this.$route.params.id)
+            .then(response => {
+                this.event = response.data
+                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
+            })
+    },
+    methods: {
+        submitForm: function () {
+            this.form.private = this.checked
+            console.log(this.form)
+
+            // eslint-disable-next-line no-undef
+            axios.patch('/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>
+
diff --git a/resources/js/views/Event/EventIndex.vue b/resources/js/views/Event/EventIndex.vue
index b45125d..c82ab4a 100644
--- a/resources/js/views/Event/EventIndex.vue
+++ b/resources/js/views/Event/EventIndex.vue
@@ -1,13 +1,58 @@
 <template>
-$END$
+    <div class="mx-2 p-2">
+        <div class="flex justify-between items-center flex-wrap flex-center mb-4">
+            <a href="#" class="btn" @click="$router.back()">Back</a>
+            <router-link :to="'/events/create'" class="btn-primary">Add New Event</router-link>
+        </div>
+        <Loader v-if="loading" />
+        <div v-else class="flex flex-wrap -m-2">
+            <div v-if="events === []">
+                <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
+            </div>
+            <router-link v-for="event in events" :key="event.data.event_id" :to="'/events/' + event.data.event_id" class="flex-initial sm:mx-auto md:w-1/2 md:mx-0 lg:w-1/3 xl:w-1/4 mb-4 no-underline">
+                <div class="card sm:max-w-124">
+                    <div class="h-full flex flex-col justify-between">
+                        <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>
+                    </div>
+                </div>
+            </router-link>
+        </div>
+    </div>
 </template>
 
 <script>
+import Loader from '../../components/Loader'
+
 export default {
-name: "EventIndex"
+    name: 'EventIndex',
+    components: {
+        Loader
+    },
+    data: function () {
+        return {
+            loading: true,
+            events: null,
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/events')
+            .then(response => {
+                this.events = response.data.data
+                this.loading = false
+            })
+            .catch(() => {
+                this.loading = false
+                console.log('Unable to fetch events.')
+            })
+    },
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/resources/js/views/Event/EventShow.vue b/resources/js/views/Event/EventShow.vue
new file mode 100644
index 0000000..4efa9a7
--- /dev/null
+++ b/resources/js/views/Event/EventShow.vue
@@ -0,0 +1,75 @@
+<template>
+    <div class="mx-2 p-2">
+        <div v-if="modal" class="modal-container" @click="modal = ! modal"></div>
+        <div v-if="modal" class="modal">
+            <p class="m-2 text-center">Are you sure you want to delete this record ?</p>
+            <div class="flex justify-center mx-2 my-4">
+                <button class="btn mr-2" @click="modal = ! modal">Cancel</button>
+                <button class="btn-alert" @click="destroy"> Delete</button>
+            </div>
+        </div>
+        <div class="flex justify-between items-center flex-wrap flex-center mb-4">
+            <a href="#" class="btn" @click="$router.back()">Back</a>
+            <div>
+                <router-link :to="'/events/' + $route.params.id + '/edit'" class="btn-primary">Update Event</router-link>
+                <a href="#" class="btn-alert" @click="modal = ! modal">Delete</a>
+            </div>
+        </div>
+        <Loader v-if="loading" />
+        <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>
+        </div>
+    </div>
+</template>
+
+<script>
+import Loader from '../../components/Loader'
+
+export default {
+    name: 'EventShow',
+    components: {
+        Loader
+    },
+    data: function () {
+        return {
+            loading: true,
+            modal: false,
+            event: null,
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/events/' + this.$route.params.id)
+            .then(response => {
+                this.event = response.data
+                this.loading = false
+            })
+            .catch(() => {
+                this.loading = false
+                console.log('Unable to fetch events.')
+            })
+    },
+    methods: {
+        destroy: function () {
+            // eslint-disable-next-line no-undef
+            axios.delete('/api/events/' + this.$route.params.id)
+                .then(() => {
+                    this.$router.push('/events')
+                })
+                .catch(errorRes => {
+                    console.log('Internal Error, Unable to delete event.' + errorRes)
+                })
+        }
+    }
+}
+</script>
+
diff --git a/resources/sass/components/_base.scss b/resources/sass/components/_base.scss
index e5daee9..c1c9cb3 100644
--- a/resources/sass/components/_base.scss
+++ b/resources/sass/components/_base.scss
@@ -35,6 +35,14 @@ textarea {
     @apply ;
 }
 
+select {
+    @apply border py-2 px-4 rounded bg-white;
+
+    option {
+        @apply bg-white;
+    }
+}
+
 .text-shadow {
     text-shadow: 1px 1px 2px #000;
 }
diff --git a/resources/svg/calendar.svg b/resources/svg/calendar.svg
new file mode 100644
index 0000000..d0039a9
--- /dev/null
+++ b/resources/svg/calendar.svg
@@ -0,0 +1,9 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     viewBox="0 0 426.667 426.667" style="enable-background:new 0 0 426.667 426.667;" xml:space="preserve">
+<g>
+    <rect x="106.667" y="192" width="106.667" height="106.667"/>
+    <path d="M362.667,42.667h-21.333V0h-42.667v42.667H128V0H85.333v42.667H64c-23.573,0-42.453,19.093-42.453,42.667L21.333,384
+        c0,23.573,19.093,42.667,42.667,42.667h298.667c23.573,0,42.667-19.093,42.667-42.667V85.333
+        C405.333,61.76,386.24,42.667,362.667,42.667z M362.667,384H64V149.333h298.667V384z"/>
+</g>
+</svg>
diff --git a/tests/Feature/EventsTest.php b/tests/Feature/EventsTest.php
index 0796ed4..f33ce59 100644
--- a/tests/Feature/EventsTest.php
+++ b/tests/Feature/EventsTest.php
@@ -172,7 +172,7 @@ class EventsTest extends TestCase
     }
 
     /** @test */
-    public function only_the_admin_can_patch_the_memo()
+    public function only_the_admin_can_patch_the_event_category()
     {
         $this->actingAs($user = factory(User::class)->create(), 'api');
         $category = EventCategory::create(['name' => 'Test category', 'description' => 'Test description']);
@@ -305,6 +305,19 @@ class EventsTest extends TestCase
         ]);
     }
 
+    /** @test */
+    public function all_event_can_be_retrieved()
+    {
+        $this->actingAs($user = factory(User::class)->create(), 'api');
+        $events = factory(Event::class, 10)->create(['user_id' => $user->id]);
+
+        $response = $this->get('/api/events');
+
+        $response->assertStatus(200);
+
+        $this->assertCount(10, Event::all());
+    }
+
     /** @test */
     public function a_to_event_can_be_patch()
     {