memos home module

resources/js/views/Memo/MemoHome.vue

@@ -1,11 +1,60 @@
 <template>
-    $END$
+    <div>
+        <div class="card m-2">
+            <div v-if="loading"  class="p-2">
+                <h2>Memos</h2>
+                <Loader />
+            </div>
+            <div v-else class="p-2">
+                <router-link to="/memos"><h2 class="mb-4 text-gray-900">{{ memos.count }} Memos</h2></router-link>
+                <router-link :to="memos.last_updated.links.self" class="m-2 block">
+                    <div class="flex justify-between text-black">
+                        Dernier édité
+                        <span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_updated.data.last_updated }}</span>
+                    </div>
+                    <div class="text-2xl font-bold">{{ memos.last_updated.data.name }}</div>
+                </router-link>
+                <hr class="border border-gray-900">
+                <router-link :to="memos.last_created.links.self" class="m-2 block">
+                    <div class="flex justify-between text-black">
+                        Dernier créé
+                        <span class="inline-block bg-gray-400 text-white text-center rounded-full px-3 py-1 text-sm font-semibold">{{ memos.last_created.data.last_updated }}</span>
+                    </div>
+                    <div class="text-2xl font-bold">{{ memos.last_created.data.name }}</div>
+                </router-link>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
-    export default {
-        name: "MemoHome"
+import Loader from '../../components/Loader'
+
+export default {
+    name: 'MemoHome',
+    components: {
+        Loader
+    },
+    data: function () {
+        return {
+            loading: true,
+            memos: '',
+        }
+    },
+    mounted() {
+        // eslint-disable-next-line no-undef
+        axios.get('/api/memos/home')
+            .then(response => {
+                this.memos = response.data.data
+                console.log(this.memos)
+                this.loading = false
+            })
+            .catch(() => {
+                this.loading = false
+                console.log('Unable to fetch memos.')
+            })
     }
+}
 </script>
 
 <style scoped>