122 lines
3.1 KiB
Vue
Executable File
122 lines
3.1 KiB
Vue
Executable File
<template>
|
|
<div class="p-2">
|
|
<div
|
|
v-if="loading"
|
|
>
|
|
> Loading...
|
|
</div>
|
|
<div v-else>
|
|
<div class="flex-between flex-center mb-1">
|
|
<a
|
|
href="#"
|
|
class="link"
|
|
@click="$router.back()"
|
|
>< Back</a>
|
|
<div class="relative">
|
|
<router-link
|
|
:to="'/memos/' + memo.memo_id + '/edit'"
|
|
class="btn-secondary mr-1"
|
|
>
|
|
Edit
|
|
</router-link>
|
|
<a
|
|
href="#"
|
|
class="btn-alert"
|
|
@click="modal = ! modal"
|
|
>
|
|
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
|
|
class="btn mr-2"
|
|
@click="modal = ! modal"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
class="btn-alert-strong"
|
|
@click="destroy"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="modal"
|
|
class="modal-background"
|
|
@click="modal = ! modal"
|
|
/>
|
|
</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)
|
|
}
|
|
},
|
|
mounted() {
|
|
axios.get('/api/memos/' + this.$route.params.id)
|
|
.then(response => {
|
|
this.memo = response.data.data
|
|
this.loading = false
|
|
})
|
|
.catch(errorRes => {
|
|
this.loading = false
|
|
if (errorRes.response.status === 404) {
|
|
this.$router.push('/memos')
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
destroy: function () {
|
|
axios.delete('/api/memos/' + this.$route.params.id)
|
|
.then(response => {
|
|
this.$router.push('/memos')
|
|
})
|
|
.catch(errorRes => {
|
|
alert('Internal Error, Unable to delete contact.' + errorRes)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|