Test card layout

frontend/components/Note.vue

@@ -1,40 +1,22 @@
 <template>
-    <v-card
-        class="d-flex flex-column"
-        :class="{ hover: hover }"
-        d
-        height="100%"
-        :color="hover ? 'blue lighten-4' : ''"
-        :elevation="hover ? 12 : 2"
-    >
-        <div class="mb-auto">
-            <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 class="d-flex flex-column" height="100%">
+        <v-card-title>
+            <h2 class="title primary--text">{{ title }}</h2>
+        </v-card-title>
+        <v-card-text> Last updated {{ prettyDate }} </v-card-text>
+        <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>
     </v-card>
 </template>
 
 <script>
+import { format } from 'timeago.js'
+
 export default {
     name: 'Note',
     props: {
@@ -46,15 +28,16 @@ export default {
             type: Array,
             default: () => [],
         },
-        hover: {
-            type: Boolean,
-            default: false,
-        },
         updatedAt: {
             type: String,
             default: null,
         },
     },
+    computed: {
+        prettyDate() {
+            return format(this.updatedAt)
+        },
+    },
 }
 </script>
 

frontend/pages/notes.vue

@@ -1,107 +1,40 @@
 <template>
-    <v-col cols="12">
-        <v-data-table
-            :headers="headers"
-            :items="notes"
-            :loading="loading"
-            loading-text="Loading notes..."
-            class="elevation-1"
-            :footer-props="{
-                showFirstLastPage: false,
-                prevIcon: mdiChevronLeft,
-                nextIcon: mdiChevronRight,
-            }"
-        >
-            <template v-slot:top>
-                <v-toolbar flat color="secondary">
-                    <h2 class="title white--text">
-                        Notes
-                    </h2>
-                    <v-spacer></v-spacer>
-                    <v-btn outlined dark @click="test">
-                        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
-                    aria-label="See Note"
-                    small
-                    color="secondary"
-                    dark
-                    class="mr-2"
-                    @click="editItem(item)"
-                >
-                    {{ mdiEye }}
-                </v-icon>
-                <v-icon
-                    aria-label="Edit Note"
-                    small
-                    color="secondary"
-                    dark
-                    class="mr-2"
-                    @click="editItem(item)"
-                >
-                    {{ mdiPencil }}
-                </v-icon>
-                <v-icon
-                    aria-label="Delete Note"
-                    small
-                    color="secondary"
-                    dark
-                    @click="deleteNote(item)"
-                >
-                    {{ mdiDelete }}
-                </v-icon>
-            </template>
-            <template v-slot:no-data>
-                <span>No notes yet</span>
-            </template>
-        </v-data-table>
-    </v-col>
+    <div>
+        <v-progress-circular
+            v-if="loading && notes.length === 0"
+            :size="100"
+            :width="7"
+            color="purple"
+            indeterminate
+        ></v-progress-circular>
+        <v-row>
+            <v-col
+                v-for="note in notes"
+                :key="note.uuid"
+                cols="12"
+                md="6"
+                lg="4"
+                xl="3"
+            >
+                <Note
+                    :title="note.title"
+                    :updated-at="note.updatedAt"
+                    :tags="note.tags"
+                />
+            </v-col>
+        </v-row>
+    </div>
 </template>
 
 <script>
-import { format } from 'timeago.js'
-import { mapState, mapActions } from 'vuex'
-import {
-    mdiEye,
-    mdiPencil,
-    mdiDelete,
-    mdiChevronLeft,
-    mdiChevronRight,
-} from '@mdi/js'
+import { mapState } from 'vuex'
+import Note from '@/components/Note.vue'
 
 export default {
     name: 'Notes',
+    components: { Note },
     data: () => ({
-        mdiEye,
-        mdiPencil,
-        mdiDelete,
-        mdiChevronLeft,
-        mdiChevronRight,
         loading: true,
-        headers: [
-            { text: 'Title', align: 'start', value: 'title' },
-            { text: 'Last updated', value: 'updatedAt', align: 'end' },
-            { text: 'Tags', value: 'tags' },
-            { text: 'Actions', value: 'actions' },
-        ],
     }),
     computed: {
         ...mapState('notes', { notes: (state) => state.notes }),
@@ -109,37 +42,8 @@ export default {
     mounted() {
         this.$store.dispatch('notes/load').then(() => (this.loading = false))
     },
-    methods: {
-        ...mapActions({
-            deleteNote: 'notes/delete',
-            createNote: 'notes/create',
-        }),
-        editItem(item) {},
-        test() {
-            this.createNote({
-                title: 'title',
-                tags: [],
-                chapters: [],
-            })
-        },
-        format,
-    },
     head: () => ({
         title: 'My notes',
     }),
 }
 </script>
-
-<style scoped>
-.tags {
-    padding: 16px;
-}
-
-.tags .v-chip {
-    margin: 4px 8px 4px 0;
-}
-
-.v-card.hover {
-    cursor: pointer;
-}
-</style>

frontend/store/notes.js

@@ -7,7 +7,7 @@ export const mutations = {
         state.notes = notes
     },
     add(state, note) {
-        state.notes.push(note)
+        state.notes.unshift(note)
     },
     delete(state, uuid) {
         state.notes = state.notes.filter((e) => e.uuid !== uuid)
@@ -16,8 +16,7 @@ export const mutations = {
 
 export const actions = {
     async load({ commit }) {
-        await new Promise((resolve) => setTimeout(resolve, 2000))
-
+        await new Promise((resolve) => setTimeout(resolve, 600))
         this.$axios.get('/notes').then(({ data }) => commit('set', data))
     },
     // FIXME: make the api send the new date back