From 85fcf65a089fc80955e58593aad282360d5a1ec3 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Sat, 25 Apr 2020 00:16:09 +0200
Subject: [PATCH] Use new datatable

---
 frontend/pages/notes.vue | 112 ++++++++++++++++++++++++++++-----------
 frontend/pages/table.vue |  98 ----------------------------------
 2 files changed, 81 insertions(+), 129 deletions(-)
 delete mode 100644 frontend/pages/table.vue

diff --git a/frontend/pages/notes.vue b/frontend/pages/notes.vue
index c5a9f8f..586b26a 100644
--- a/frontend/pages/notes.vue
+++ b/frontend/pages/notes.vue
@@ -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>
diff --git a/frontend/pages/table.vue b/frontend/pages/table.vue
deleted file mode 100644
index 586b26a..0000000
--- a/frontend/pages/table.vue
+++ /dev/null
@@ -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>