From 7f88f5371da763e14d6199323a06b0b35d93b016 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Thu, 23 Apr 2020 15:59:03 +0200
Subject: [PATCH 1/3] Add webpack config for IntelliJ

---
 frontend/webpack.config.js | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 frontend/webpack.config.js

diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
new file mode 100644
index 0000000..6b209a4
--- /dev/null
+++ b/frontend/webpack.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+  resolve: {
+    // for IntelliJ
+    alias: {
+      '@': path.resolve(__dirname),
+      '~': path.resolve(__dirname)
+    }
+  }
+};

From 20daa71d51520f626df439c96062bfa77add1bc5 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Thu, 23 Apr 2020 16:00:17 +0200
Subject: [PATCH 2/3] Update notes components and page, notes are coming from
 /notes

---
 frontend/components/Note.vue | 64 ++++++++++++++------------
 frontend/layouts/default.vue |  2 +-
 frontend/pages/notes.vue     | 89 +++++++-----------------------------
 3 files changed, 52 insertions(+), 103 deletions(-)

diff --git a/frontend/components/Note.vue b/frontend/components/Note.vue
index 74c063d..7467700 100644
--- a/frontend/components/Note.vue
+++ b/frontend/components/Note.vue
@@ -1,47 +1,47 @@
 <template>
-    <v-card height="100%">
-        <v-card-title>{{ title }}</v-card-title>
-        <v-card-text>
-            <slot></slot>
-        </v-card-text>
+    <v-card
+        class="d-flex flex-column"
+        :class="{ hover:hover }"
+        height="100%"
+        :color="hover ? 'blue lighten-3' : 'white'"
+        :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 class="tags">
+                <v-chip v-for="tag in tags" :key="tag" active color="secondary">{{ tag }}</v-chip>
+            </div>
         </div>
 
-        <v-divider class="mt-auto"></v-divider>
-
-        <v-card-actions>
-            <v-btn
-                text
-                color="deep-purple accent-4" dark>
-                <v-icon left>mdi-eye</v-icon>
-                View
-            </v-btn>
-            <v-spacer/>
-            <v-btn
-                text
-                color="deep-purple accent-4">
-                <v-icon left>mdi-pencil</v-icon>
-                Edit
-            </v-btn>
-        </v-card-actions>
+        <div class="mt-auto" v-if="!!updatedAt">
+            <v-divider/>
+            <v-card-subtitle>{{ updatedAt }}</v-card-subtitle>
+        </div>
     </v-card>
 </template>
 
 <script>
     export default {
-        name: "Note",
+        name: 'Note',
         props: {
             title: {
                 type: String,
-                required: true
+                required: true,
             },
             tags: {
-                type: Array
-            }
-        }
-    }
+                type: Array,
+            },
+            hover: {
+                type: Boolean,
+                default: 'false',
+            },
+            updatedAt: {
+                type: String,
+                default: null,
+            },
+        },
+    };
 </script>
 
 <style>
@@ -52,4 +52,8 @@
     .tags .v-chip {
         margin: 4px 8px 4px 0;
     }
+
+    .v-card.hover {
+        cursor: pointer;
+    }
 </style>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 20684f6..29b6c67 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -8,7 +8,7 @@
         >
             <v-btn to="/" text rounded>Simple Notes</v-btn>
             <v-spacer/>
-            <v-btn to="/notes" text rounded>My notes</v-btn>
+            <v-btn to="/notes" class="mr-2" text rounded>My notes</v-btn>
             <v-btn outlined v-if="this.$store.state.auth.loggedIn">Welcome {{this.$store.state.auth.user.username}}</v-btn>
             <v-btn v-else to="/account" text rounded>Account</v-btn>
         </v-app-bar>
diff --git a/frontend/pages/notes.vue b/frontend/pages/notes.vue
index ca19d3c..5fc2fe2 100644
--- a/frontend/pages/notes.vue
+++ b/frontend/pages/notes.vue
@@ -7,15 +7,18 @@
             <v-col
                 v-for="(note, index) in notes"
                 :key="index"
-                cols="12" md="6" xl="3"
+                cols="12" sm="6" md="4" xl="3"
                 class="viewer">
-                <Note
-                    class="item"
-                    :title="note.title"
-                    :tags="note.tags"
-                >
-                    {{ note.content }}
-                </Note>
+                <v-hover v-slot:default="{ hover }">
+                    <Note
+                        :hover="hover"
+                        :title="note.title"
+                        :tags="note.tags"
+                        :updated-at="note.updatedAt"
+                    >
+                        {{ note.content }}
+                    </Note>
+                </v-hover>
             </v-col>
 
         </v-row>
@@ -38,69 +41,11 @@
             Note,
         },
         data: () => ({
-            selector: ".viewer",
-            options: {
-                columnWidth: "200",
-                percentPosition: true,
-                gutter: 0,
-                itemSelector: ".item"
-            },
-            notes: [
-                {
-                    title: "Elec analogique",
-                    tags: ["Ephec"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Melvin fait du ski",
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
-                },
-                {
-                    title: "Daniel étudie elec",
-                    tags: ["Ephec", "Ephec", "Ephec", "Ephec", "Ephec", "Ephec"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Daniel étudie elec",
-                    tags: ["Ephec", "Ephec", "Ephec", "Ephec", "Ephec", "Ephec"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab est in rerum."
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-                {
-                    title: "Portfolio",
-                    tags: ["Ephec", "Dev"],
-                    content: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt doloremque harum iste itaque laboriosam modi placeat quia sequi. Accusamus consectetur dolor doloribus eaque et incidunt ipsa iste, iure magnam maxime minus, modi nam odit possimus quam recusandae reprehenderit sit totam?"
-                },
-            ]
-        })
+            notes: []
+        }),
+        mounted() {
+            this.$axios.get('/notes')
+                .then(e => this.notes = e.data)
+        }
     }
 </script>

From 06699d262458d34cabf072a227b2e8a58005a428 Mon Sep 17 00:00:00 2001
From: Hubert Van De Walle <hubv@protonmail.com>
Date: Thu, 23 Apr 2020 16:11:42 +0200
Subject: [PATCH 3/3] Add & use timeago lib

---
 frontend/components/Note.vue |  6 ++---
 frontend/pages/notes.vue     | 47 +++++++++++++++++-------------------
 package.json                 |  5 ++++
 yarn.lock                    |  8 ++++++
 4 files changed, 38 insertions(+), 28 deletions(-)
 create mode 100644 package.json
 create mode 100644 yarn.lock

diff --git a/frontend/components/Note.vue b/frontend/components/Note.vue
index 7467700..eca1f48 100644
--- a/frontend/components/Note.vue
+++ b/frontend/components/Note.vue
@@ -14,9 +14,9 @@
             </div>
         </div>
 
-        <div class="mt-auto" v-if="!!updatedAt">
+        <div class="mt-auto" v-if="updatedAt">
             <v-divider/>
-            <v-card-subtitle>{{ updatedAt }}</v-card-subtitle>
+            <v-card-subtitle>Last updated {{ updatedAt }}</v-card-subtitle>
         </div>
     </v-card>
 </template>
@@ -41,7 +41,7 @@
                 default: null,
             },
         },
-    };
+    }
 </script>
 
 <style>
diff --git a/frontend/pages/notes.vue b/frontend/pages/notes.vue
index 5fc2fe2..59ac3ea 100644
--- a/frontend/pages/notes.vue
+++ b/frontend/pages/notes.vue
@@ -1,51 +1,48 @@
 <template>
     <v-container fluid>
-        <v-row dense
-               align-content="stretch"
-               align="stretch"
-        >
+        <v-row dense align-content="stretch" align="stretch">
             <v-col
                 v-for="(note, index) in notes"
                 :key="index"
-                cols="12" sm="6" md="4" xl="3"
-                class="viewer">
+                cols="12"
+                sm="6"
+                md="4"
+                xl="3"
+                class="viewer"
+            >
                 <v-hover v-slot:default="{ hover }">
                     <Note
                         :hover="hover"
                         :title="note.title"
                         :tags="note.tags"
-                        :updated-at="note.updatedAt"
+                        :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>
-
 </template>
 
 <script>
-    import Note from '@/components/Note'
+import Note from '@/components/Note';
+import { format } from 'timeago.js';
 
-    export default {
-        name: "notes",
-        title: "Notes",
-        components: {
-            Note,
-        },
-        data: () => ({
-            notes: []
-        }),
-        mounted() {
-            this.$axios.get('/notes')
-                .then(e => this.notes = e.data)
-        }
-    }
+export default {
+    name: 'notes',
+    title: 'Notes',
+    components: { Note },
+    data: () => ({
+        notes: [],
+    }),
+    methods: { format },
+    mounted() {
+        this.$axios.get('/notes').then(e => (this.notes = e.data));
+    },
+};
 </script>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d60c2db
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "timeago.js": "^4.0.2"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
new file mode 100644
index 0000000..5c69c26
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,8 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+timeago.js@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/timeago.js/-/timeago.js-4.0.2.tgz#724e8c8833e3490676c7bb0a75f5daf20e558028"
+  integrity sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w==