start add Memos

resources/js/views/Memo/MemoShow.vue

@@ -0,0 +1,78 @@
+<template>
+    <div>
+        <div v-if="loading">> Loading...</div>
+        <div v-else>
+            <div class="flex-between mb-2">
+                <a href="#" @click="$router.back()" class="link">
+                    < Back
+                </a>
+                <div class="relative">
+                    <router-link :to="'/memos/' + memo.memo_id + '/edit'" class="btn-success mr-1">Edit</router-link>
+                    <a href="#" @click="modal = ! modal" class="btn-alert">Delete</a>
+                    <div v-if="modal" class="absolute modal mt-2">
+                        <p>Are you sure you want to delete this record ?</p>
+                        <div class="flex-end flex-center mt-2">
+                            <button @click="modal = ! modal" class="btn mr-2">Cancel</button>
+                            <button @click="destroy" class="btn-alert-strong">Delete</button>
+                        </div>
+                    </div>
+                </div>
+                <div v-if="modal" @click="modal = ! modal" class="modal-background"></div>
+            </div>
+<!--            <TagBox :memo="memo" />-->
+            <p class="title-section pt-3">Memo</p>
+            <h1 class="memo-title">{{ memo.name }}</h1>
+            <p class="memo-style pt-1" v-html="memoMarkdown"> </p>
+            <div class="memo-change my-2 p-1">@last update : {{ memo.last_updated }}</div>
+        </div>
+    </div>
+</template>
+
+<script>
+    // import TagBox from "../Tag/TagBox";
+    let MarkdownIt = require('markdown-it'),
+        md = new MarkdownIt();
+
+    export default {
+        name: "MemoShow",
+        components: {
+            // TagBox
+        },
+        data: function () {
+            return {
+                loading: true,
+                modal: false,
+                memo: null,
+            }
+        },
+        computed: {
+            memoMarkdown: function () {
+                return md.render(this.memo.memo)
+            }
+        },
+        methods: {
+            destroy: function () {
+                axios.delete('/api/memos/' + this.$route.params.id)
+                    .then(response => {
+                        this.$router.push('/memos')
+                    })
+                    .catch(error => {
+                        alert('Internal Error, Unable to delete contact.')
+                    })
+            }
+        },
+        mounted() {
+            axios.get('/api/memos/' + this.$route.params.id)
+                .then(response => {
+                    this.memo = response.data.data
+                    this.loading = false
+                })
+                .catch(error => {
+                    this.loading = false
+                    if (error.response.status === 404) {
+                        this.$router.push('/memos')
+                    }
+                })
+        }
+    }
+</script>