146 lines
3.8 KiB
Vue
146 lines
3.8 KiB
Vue
<template>
|
|
<v-col cols="12">
|
|
<v-data-table
|
|
:headers="headers"
|
|
:items="notes"
|
|
:loading="loading"
|
|
loading-text="Loading notes..."
|
|
class="elevation-1"
|
|
:footer-props="{
|
|
showFirstLastPage: false,
|
|
prevIcon: mdiChevronLeft,
|
|
nextIcon: mdiChevronRight,
|
|
}"
|
|
>
|
|
<template v-slot:top>
|
|
<v-toolbar flat color="secondary">
|
|
<h2 class="title white--text">
|
|
Notes
|
|
</h2>
|
|
<v-spacer></v-spacer>
|
|
<v-btn outlined dark @click="test">
|
|
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="deleteNote(item)"
|
|
>
|
|
{{ mdiDelete }}
|
|
</v-icon>
|
|
</template>
|
|
<template v-slot:no-data>
|
|
<span>No notes yet</span>
|
|
</template>
|
|
</v-data-table>
|
|
</v-col>
|
|
</template>
|
|
|
|
<script>
|
|
import { format } from 'timeago.js'
|
|
import { mapState, mapActions } from 'vuex'
|
|
import {
|
|
mdiEye,
|
|
mdiPencil,
|
|
mdiDelete,
|
|
mdiChevronLeft,
|
|
mdiChevronRight,
|
|
} from '@mdi/js'
|
|
|
|
export default {
|
|
name: 'Notes',
|
|
data: () => ({
|
|
mdiEye,
|
|
mdiPencil,
|
|
mdiDelete,
|
|
mdiChevronLeft,
|
|
mdiChevronRight,
|
|
loading: true,
|
|
headers: [
|
|
{ text: 'Title', align: 'start', value: 'title' },
|
|
{ text: 'Last updated', value: 'updatedAt', align: 'end' },
|
|
{ text: 'Tags', value: 'tags' },
|
|
{ text: 'Actions', value: 'actions' },
|
|
],
|
|
}),
|
|
computed: {
|
|
...mapState('notes', { notes: (state) => state.notes }),
|
|
},
|
|
mounted() {
|
|
this.$store.dispatch('notes/load').then(() => (this.loading = false))
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
deleteNote: 'notes/delete',
|
|
createNote: 'notes/create',
|
|
}),
|
|
editItem(item) {},
|
|
test() {
|
|
this.createNote({
|
|
title: 'title',
|
|
tags: [],
|
|
chapters: [],
|
|
})
|
|
},
|
|
format,
|
|
},
|
|
head: () => ({
|
|
title: 'My notes',
|
|
}),
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.tags {
|
|
padding: 16px;
|
|
}
|
|
|
|
.tags .v-chip {
|
|
margin: 4px 8px 4px 0;
|
|
}
|
|
|
|
.v-card.hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|