Refactor: Split components

2020-06-14 15:30:06 +02:00
parent c4f95179c9
commit 8a9e878d5f
4 changed files with 83 additions and 23 deletions
@@ -0,0 +1,40 @@
+<template>
+    <v-card>
+        <v-card-title>
+            {{ note.title }}
+            <v-spacer />
+            <TagsGroup :tags="note.tags" />
+        </v-card-title>
+        <v-card-text>
+            <div v-html="renderedMarkdown"></div>
+        </v-card-text>
+    </v-card>
+</template>
+
+<script>
+import TagsGroup from '@/components/TagsGroup'
+import renderMarkdown from '@/utils/markdown'
+
+export default {
+    name: 'Note',
+    components: {
+        TagsGroup,
+    },
+    data: () => ({
+        note: {
+            tags: [],
+        },
+    }),
+    computed: {
+        renderedMarkdown() {
+            if (!this.note.chapters) return ''
+            return renderMarkdown(this.note.chapters[0].content).contents
+        },
+    },
+    mounted() {
+        this.$axios
+            .$get(`/notes/${this.$route.params.uuid}`)
+            .then((note) => (this.note = note))
+    },
+}
+</script>
@@ -0,0 +1,50 @@
+<template>
+    <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"
+            >
+                <NoteCard
+                    :uuid="note.uuid"
+                    :title="note.title"
+                    :updated-at="note.updatedAt"
+                    :tags="note.tags"
+                />
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import NoteCard from '@/components/NoteCard.vue'
+
+export default {
+    name: 'Notes',
+    components: { NoteCard },
+    data: () => ({
+        loading: true,
+    }),
+    computed: {
+        ...mapState('notes', { notes: (state) => state.notes }),
+    },
+    mounted() {
+        this.$store.dispatch('notes/load').then(() => (this.loading = false))
+    },
+    head: () => ({
+        title: 'My notes',
+    }),
+}
+</script>