hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Test card layout

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-06-09 18:01:46 +02:00
parent 1ca783e69a
commit dbf3b4344d
3 changed files with 49 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/components/Note.vue
View File

@ -1,40 +1,22 @@
<template> <template>
<v-card <v-card class="d-flex flex-column" height="100%">
class="d-flex flex-column" <v-card-title>
:class="{ hover: hover }" <h2 class="title primary--text">{{ title }}</h2>
d </v-card-title>
height="100%" <v-card-text> Last updated {{ prettyDate }} </v-card-text>
:color="hover ? 'blue lighten-4' : ''" <v-card-actions>
:elevation="hover ? 12 : 2" <div class="tags">
> <v-chip v-for="tag in tags" :key="tag" active color="secondary">
<div class="mb-auto"> {{ tag }}
<v-list-item three-line> </v-chip>
<v-list-item-content> </div>
<div class="overline mb-4"> </v-card-actions>
Last updated {{ updatedAt }}
</div>
<v-list-item-title class="headline mb-1">
<h2 class="title primary--text">{{ title }}</h2>
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-card-actions>
<div class="tags">
<v-chip
v-for="tag in tags"
:key="tag"
active
color="secondary"
>
{{ tag }}
</v-chip>
</div>
</v-card-actions>
</div>
</v-card> </v-card>
</template> </template>
<script> <script>
import { format } from 'timeago.js'
export default { export default {
name: 'Note', name: 'Note',
props: { props: {
@ -46,15 +28,16 @@ export default {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
hover: {
type: Boolean,
default: false,
},
updatedAt: { updatedAt: {
type: String, type: String,
default: null, default: null,
}, },
}, },
computed: {
prettyDate() {
return format(this.updatedAt)
},
},
} }
</script> </script>

152
frontend/pages/notes.vue
View File

@ -1,107 +1,40 @@
<template> <template>
<v-col cols="12"> <div>
<v-data-table <v-progress-circular
:headers="headers" v-if="loading && notes.length === 0"
:items="notes" :size="100"
:loading="loading" :width="7"
loading-text="Loading notes..." color="purple"
class="elevation-1" indeterminate
:footer-props="{ ></v-progress-circular>
showFirstLastPage: false, <v-row>
prevIcon: mdiChevronLeft, <v-col
nextIcon: mdiChevronRight, v-for="note in notes"
}" :key="note.uuid"
> cols="12"
<template v-slot:top> md="6"
<v-toolbar flat color="secondary"> lg="4"
<h2 class="title white--text"> xl="3"
Notes >
</h2> <Note
<v-spacer></v-spacer> :title="note.title"
<v-btn outlined dark @click="test"> :updated-at="note.updatedAt"
New Note :tags="note.tags"
</v-btn> />
</v-toolbar> </v-col>
</template> </v-row>
<template v-slot:item.updatedAt="{ item }"> </div>
{{ 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> </template>
<script> <script>
import { format } from 'timeago.js' import { mapState } from 'vuex'
import { mapState, mapActions } from 'vuex' import Note from '@/components/Note.vue'
import {
mdiEye,
mdiPencil,
mdiDelete,
mdiChevronLeft,
mdiChevronRight,
} from '@mdi/js'
export default { export default {
name: 'Notes', name: 'Notes',
components: { Note },
data: () => ({ data: () => ({
mdiEye,
mdiPencil,
mdiDelete,
mdiChevronLeft,
mdiChevronRight,
loading: true, 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: { computed: {
...mapState('notes', { notes: (state) => state.notes }), ...mapState('notes', { notes: (state) => state.notes }),
@ -109,37 +42,8 @@ export default {
mounted() { mounted() {
this.$store.dispatch('notes/load').then(() => (this.loading = false)) 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: () => ({ head: () => ({
title: 'My notes', title: 'My notes',
}), }),
} }
</script> </script>
<style scoped>
.tags {
padding: 16px;
}
.tags .v-chip {
margin: 4px 8px 4px 0;
}
.v-card.hover {
cursor: pointer;
}
</style>

5
frontend/store/notes.js
View File

@ -7,7 +7,7 @@ export const mutations = {
state.notes = notes state.notes = notes
}, },
add(state, note) { add(state, note) {
state.notes.push(note) state.notes.unshift(note)
}, },
delete(state, uuid) { delete(state, uuid) {
state.notes = state.notes.filter((e) => e.uuid !== uuid) state.notes = state.notes.filter((e) => e.uuid !== uuid)
@ -16,8 +16,7 @@ export const mutations = {
export const actions = { export const actions = {
async load({ commit }) { async load({ commit }) {
await new Promise((resolve) => setTimeout(resolve, 2000)) await new Promise((resolve) => setTimeout(resolve, 600))
this.$axios.get('/notes').then(({ data }) => commit('set', data)) this.$axios.get('/notes').then(({ data }) => commit('set', data))
}, },
// FIXME: make the api send the new date back // FIXME: make the api send the new date back