From feeee20bfed2899d51adfc49cab22e81e19ec905 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Fri, 24 Apr 2020 00:15:58 +0200
Subject: [PATCH] Start table view

---
 api/src/routing/NotesController.kt | 10 ++-
 frontend/components/Note.vue       | 41 +++++++------
 frontend/layouts/default.vue       |  2 +-
 frontend/pages/notes.vue           |  2 +-
 frontend/pages/table.vue           | 98 ++++++++++++++++++++++++++++++
 5 files changed, 131 insertions(+), 22 deletions(-)
 create mode 100644 frontend/pages/table.vue

diff --git a/api/src/routing/NotesController.kt b/api/src/routing/NotesController.kt
index ac2e587..4015312 100644
--- a/api/src/routing/NotesController.kt
+++ b/api/src/routing/NotesController.kt
@@ -8,15 +8,19 @@ import io.ktor.response.*
 import io.ktor.routing.*
 import org.kodein.di.Kodein
 import org.kodein.di.generic.instance
+import kotlin.system.measureTimeMillis
 
 fun Routing.notes(kodein: Kodein) {
     val notesService by kodein.instance<NotesService>()
 
     authenticate {
         get("/notes") {
-            val userId = call.userId()
-            val notes = notesService.getNotes(userId)
-            call.respond(notes)
+            val time = measureTimeMillis {
+                val userId = call.userId()
+                val notes = notesService.getNotes(userId)
+                call.respond(notes)
+            }
+            application.log.info("Time taken: $time ms")
         }
     }
 }
diff --git a/frontend/components/Note.vue b/frontend/components/Note.vue
index 5794867..4a0ae76 100644
--- a/frontend/components/Note.vue
+++ b/frontend/components/Note.vue
@@ -2,27 +2,34 @@
     <v-card
         class="d-flex flex-column"
         :class="{ hover: hover }"
+        d
         height="100%"
-        :color="hover ? 'blue lighten-3' : 'white'"
+        :color="hover ? 'blue lighten-4' : ''"
         :elevation="hover ? 12 : 2"
     >
         <div class="mb-auto">
-            <v-card-title>{{ title }}</v-card-title>
-
-            <div class="tags">
-                <v-chip
-                    v-for="tag in tags"
-                    :key="tag"
-                    active
-                    color="secondary"
-                    >{{ tag }}</v-chip
-                >
-            </div>
-        </div>
-
-        <div v-if="updatedAt" class="mt-auto">
-            <v-divider />
-            <v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle>
+            <v-list-item three-line>
+                <v-list-item-content>
+                    <div class="overline mb-4">
+                        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>
 </template>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 61a4594..c364f9e 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -4,7 +4,7 @@
             <v-btn to="/" text rounded>Simple Notes</v-btn>
             <v-spacer />
             <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
-            <v-btn v-if="this.$store.state.auth.loggedIn" outline>
+            <v-btn v-if="this.$store.state.auth.loggedIn" outlined>
                 Welcome {{ this.$store.state.auth.user.username }}
             </v-btn>
             <v-btn v-else to="/account" text rounded>Account</v-btn>
diff --git a/frontend/pages/notes.vue b/frontend/pages/notes.vue
index 1fc7d64..c5a9f8f 100644
--- a/frontend/pages/notes.vue
+++ b/frontend/pages/notes.vue
@@ -7,7 +7,7 @@
                 cols="12"
                 sm="6"
                 md="4"
-                xl="3"
+                lg="3"
                 class="viewer"
             >
                 <v-hover v-slot:default="{ hover }">
diff --git a/frontend/pages/table.vue b/frontend/pages/table.vue
new file mode 100644
index 0000000..586b26a
--- /dev/null
+++ b/frontend/pages/table.vue
@@ -0,0 +1,98 @@
+<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>