63 lines
2.1 KiB
Vue
63 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="card">
|
|
<div v-if="loading">
|
|
<h2>Memos</h2>
|
|
<Loader />
|
|
</div>
|
|
<div v-else>
|
|
<router-link to="/memos" class="mb-4 no-underline"><h2>{{ memos.count }} Memos</h2></router-link>
|
|
<router-link :to="memos.last_updated.links.self" class="m-2 block no-underline">
|
|
<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-marine">
|
|
<router-link :to="memos.last_created.links.self" class="m-2 block no-underline">
|
|
<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>
|
|
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>
|
|
|
|
</style>
|