first work on front events

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>