135 lines
3.6 KiB
Vue
135 lines
3.6 KiB
Vue
<template>
|
|
<v-col cols="12">
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="notes"
|
|
:loading="loading"
|
|
loading-text="Loading notes..."
|
|
class="elevation-1"
|
|
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
|
|
aria-label="See Note"
|
|
small
|
|
color="secondary"
|
|
dark
|
|
class="mr-2"
|
|
@click="editItem(item)"
|
|
>
|
|
{{ mdiEye }}
|
|
</v-icon>
|
|
<v-icon
|
|
aria-label="Edit Note"
|
|
small
|
|
color="secondary"
|
|
dark
|
|
class="mr-2"
|
|
@click="editItem(item)"
|
|
>
|
|
{{ mdiPencil }}}
|
|
</v-icon>
|
|
<v-icon
|
|
aria-label="Delete Note"
|
|
small
|
|
color="secondary"
|
|
dark
|
|
@click="deleteItem(item)"
|
|
>
|
|
{{ mdiDelete }}
|
|
</v-icon>
|
|
</template>
|
|
<template v-slot:no-data>
|
|
<v-btn color="primary" @click="initialize">Reset</v-btn>
|
|
</template>
|
|
</v-data-table>
|
|
</v-col>
|
|
</template>
|
|
|
|
<script>
|
|
import { format } from 'timeago.js'
|
|
import { mdiEye, mdiPencil, mdiDelete } from '@mdi/js'
|
|
|
|
export default {
|
|
name: 'Notes',
|
|
title: 'Notes',
|
|
data: () => ({
|
|
mdiEye,
|
|
mdiPencil,
|
|
mdiDelete,
|
|
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.loadNotes()
|
|
},
|
|
methods: {
|
|
async loadNotes() {
|
|
await this.$axios
|
|
.get('/notes')
|
|
.then((e) => {
|
|
this.notes = e.data
|
|
this.loading = false
|
|
})
|
|
.catch((_) => {})
|
|
},
|
|
editItem(item) {},
|
|
async deleteItem(item) {
|
|
try {
|
|
await this.$axios.delete(`/notes/${item.uuid}`)
|
|
} catch (_) {
|
|
} finally {
|
|
await this.loadNotes()
|
|
}
|
|
},
|
|
format,
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tags {
|
|
padding: 16px;
|
|
}
|
|
|
|
.tags .v-chip {
|
|
margin: 4px 8px 4px 0;
|
|
}
|
|
|
|
.v-card.hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|