56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<template>
|
|
<div>
|
|
<v-progress-circular
|
|
v-if="!isInitialized"
|
|
:size="100"
|
|
:width="7"
|
|
color="purple"
|
|
indeterminate
|
|
></v-progress-circular>
|
|
<v-card v-if="isEmpty">
|
|
<v-card-text>No notes yet :/</v-card-text>
|
|
</v-card>
|
|
<v-row v-else>
|
|
<v-col
|
|
v-for="note in notes"
|
|
:key="note.uuid"
|
|
cols="12"
|
|
md="6"
|
|
lg="4"
|
|
xl="3"
|
|
>
|
|
<NoteCard
|
|
:uuid="note.uuid"
|
|
:title="note.title"
|
|
:updated-at="note.updatedAt"
|
|
:tags="note.tags"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState, mapGetters, mapActions } from 'vuex'
|
|
|
|
export default {
|
|
name: 'Notes',
|
|
data: () => ({
|
|
loading: true,
|
|
}),
|
|
computed: {
|
|
...mapState('notes', ['notes', 'isInitialized']),
|
|
...mapGetters('notes', ['isEmpty']),
|
|
},
|
|
mounted() {
|
|
if (!this.initialized) this.load()
|
|
},
|
|
methods: {
|
|
...mapActions('notes', ['load']),
|
|
},
|
|
head: () => ({
|
|
title: 'My notes',
|
|
}),
|
|
}
|
|
</script>
|