99 lines
2.4 KiB
Vue
99 lines
2.4 KiB
Vue
<template>
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="notes"
|
|
:loading="loading"
|
|
loading-text="Loading notes..."
|
|
class="elevation-1 mt-10"
|
|
disable-sort
|
|
>
|
|
<template v-slot:top>
|
|
<v-toolbar flat color="secondary">
|
|
<h2 class="title white--text">
|
|
Notes
|
|
</h2>
|
|
<v-spacer></v-spacer>
|
|
<v-btn to="/create" outlined dark>
|
|
New Note
|
|
</v-btn>
|
|
</v-toolbar>
|
|
</template>
|
|
<template v-slot:item.updatedAt="{ item }">
|
|
{{ format(item.updatedAt) }}
|
|
</template>
|
|
<template v-slot:item.tags="{ item }">
|
|
<div class="tags">
|
|
<v-chip
|
|
v-for="tag in item.tags"
|
|
:key="tag"
|
|
active
|
|
color="secondary"
|
|
>
|
|
{{ tag }}
|
|
</v-chip>
|
|
</div>
|
|
</template>
|
|
<template v-slot:item.actions="{ item }">
|
|
<v-icon
|
|
small
|
|
color="accent"
|
|
dark
|
|
class="mr-2"
|
|
@click="editItem(item)"
|
|
>
|
|
mdi-pencil
|
|
</v-icon>
|
|
<v-icon small color="accent" dark @click="deleteItem(item)">
|
|
mdi-delete
|
|
</v-icon>
|
|
</template>
|
|
<template v-slot:no-data>
|
|
<v-btn color="primary" @click="initialize">Reset</v-btn>
|
|
</template>
|
|
</v-data-table>
|
|
</template>
|
|
|
|
<script>
|
|
import { format } from 'timeago.js'
|
|
|
|
export default {
|
|
name: 'Notes',
|
|
title: 'Notes',
|
|
data: () => ({
|
|
loading: true,
|
|
notes: [],
|
|
headers: [
|
|
{ text: 'Title', align: 'start', value: 'title' },
|
|
{ text: 'Last updated', value: 'updatedAt', align: 'end' },
|
|
{ text: 'Tags', value: 'tags' },
|
|
{ text: 'Actions', value: 'actions' },
|
|
],
|
|
}),
|
|
mounted() {
|
|
this.$axios.get('/notes').then((e) => {
|
|
this.notes = e.data
|
|
this.loading = false
|
|
})
|
|
},
|
|
methods: {
|
|
editItem(item) {},
|
|
deleteItem(item) {},
|
|
format,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tags {
|
|
padding: 16px;
|
|
}
|
|
|
|
.tags .v-chip {
|
|
margin: 4px 8px 4px 0;
|
|
}
|
|
|
|
.v-card.hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|