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 1/4] 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>

From 6e4fa89e85a031f9169a008aa49488a12566ad7c Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Fri, 24 Apr 2020 00:20:28 +0200
Subject: [PATCH 2/4] Limit object creation in getNotes

---
 api/src/services/NotesService.kt | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/api/src/services/NotesService.kt b/api/src/services/NotesService.kt
index 1f31991..f89c829 100644
--- a/api/src/services/NotesService.kt
+++ b/api/src/services/NotesService.kt
@@ -25,19 +25,14 @@ class NotesService(override val kodein: Kodein) : KodeinAware {
         .where { Notes.userId eq userId }
         .orderBy(Notes.updatedAt.desc())
         .map { row ->
-            Notes.createEntity(row)
-        }
-        .toList()
-        .map { note ->
             val tags = db.from(Tags)
                 .select(Tags.name)
-                .where { Tags.noteId eq note.id }
+                .where { Tags.noteId eq row[Notes.id]!! }
                 .map { it[Tags.name]!! }
-                .toList()
 
-            val updatedAt = DateTimeFormatter.ISO_LOCAL_DATE_TIME.format(note.updatedAt)
+            val updatedAt = DateTimeFormatter.ISO_LOCAL_DATE_TIME.format(row[Notes.updatedAt]!!)
 
-            NotesDTO(note.title, tags, updatedAt)
+            NotesDTO(row[Notes.title]!!, tags, updatedAt)
         }
 
     fun getNoteIdFromUserIdAndTitle(userId: Int, noteTitle: String): Int? = db.from(Notes)

From 1e3a34128989aa84a11fdb238f42aff862a4ffa4 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Fri, 24 Apr 2020 02:08:42 +0200
Subject: [PATCH 3/4] Disable json pretty formating

---
 api/src/features/ContentNegotiationFeature.kt | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/api/src/features/ContentNegotiationFeature.kt b/api/src/features/ContentNegotiationFeature.kt
index 3b91178..8906914 100644
--- a/api/src/features/ContentNegotiationFeature.kt
+++ b/api/src/features/ContentNegotiationFeature.kt
@@ -7,8 +7,6 @@ import io.ktor.jackson.*
 
 fun Application.contentNegotiationFeature() {
     install(ContentNegotiation) {
-        jackson {
-            enable(SerializationFeature.INDENT_OUTPUT)
-        }
+        jackson {}
     }
 }
\ No newline at end of file

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 4/4] 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>