47 lines
1.4 KiB
Vue
Executable File
47 lines
1.4 KiB
Vue
Executable File
<template>
|
|
<div class="p-2">
|
|
<div class="flex-between flex-center mb-1">
|
|
<a href="#" @click="$router.back()">
|
|
< Back
|
|
</a>
|
|
<router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
|
|
</div>
|
|
<div v-if="loading">> Loading...</div>
|
|
<div v-else>
|
|
<div v-if="memos.lenght === 0">
|
|
<p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
|
|
</div>
|
|
<div v-for="memo in memos" class="memo-list">
|
|
<router-link :to="'/memos/' + memo.data.memo_id" class="relative flex-center flex-between p-1">
|
|
<h1>{{ memo.data.name }}</h1>
|
|
<div class="memo-date">{{ memo.data.last_updated }}</div>
|
|
</router-link>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "MemoIndex",
|
|
data: function () {
|
|
return {
|
|
loading: true,
|
|
memos: null,
|
|
}
|
|
},
|
|
mounted() {
|
|
axios.get('/api/memos')
|
|
.then(response => {
|
|
this.memos = response.data.data
|
|
this.loading = false
|
|
})
|
|
.catch(error => {
|
|
this.loading = false
|
|
alert('Unable to fetch memos.')
|
|
})
|
|
}
|
|
}
|
|
</script>
|