hubert/SimpleNotes
1
0
Fork 0
Code Projects Releases Activity

Use new datatable

Browse Source
This commit is contained in:
Hubert Van De Walle 2020-04-25 00:16:09 +02:00
parent ebd647a1a9
commit 85fcf65a08
2 changed files with 81 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
frontend/pages/notes.vue
View File

@ -1,48 +1,98 @@
<template>
<v-container fluid>
<v-row dense align-content="stretch" align="stretch">
<v-col
v-for="(note, index) in notes"
:key="index"
cols="12"
sm="6"
md="4"
lg="3"
class="viewer"
<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)"
>
<v-hover v-slot:default="{ hover }">
<Note
:hover="hover"
:title="note.title"
:tags="note.tags"
:updated-at="format(note.updatedAt)"
>
{{ note.content }}
</Note>
</v-hover>
</v-col>
</v-row>
<v-btn to="/create" fab fixed bottom right large color="accent">
<v-icon>mdi-plus</v-icon>
</v-btn>
</v-container>
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'
import Note from '@/components/Note'
export default {
name: 'Notes',
title: 'Notes',
components: { Note },
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.$axios.get('/notes').then((e) => {
this.notes = e.data
this.loading = false
})
},
methods: {
editItem(item) {},
deleteItem(item) {},
format,
},
methods: { format },
}
</script>
<style scoped>
.tags {
padding: 16px;
}
.tags .v-chip {
margin: 4px 8px 4px 0;
}
.v-card.hover {
cursor: pointer;
}
</style>

98
frontend/pages/table.vue
View File

@ -1,98 +0,0 @@
<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>