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