Test card layout

2020-06-09 18:01:46 +02:00
parent 1ca783e69a
commit dbf3b4344d
3 changed files with 49 additions and 163 deletions
@@ -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>