Romain/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start add Memos

Browse Source
This commit is contained in:
Romulus21
2020-03-22 18:54:13 +01:00
parent 18d0841a7d
commit 11511039e9
24 changed files with 10969 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
resources/js/views/Memo/MemoCreate.vue Executable file
View File

@@ -0,0 +1,49 @@
<template>
<div>
<form @submit.prevent="submitForm">
<InputField name="name" label="Memo Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
<TextAreaField name="memo" label="Memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
<div class="flex-end">
<button @click="$router.back()" class="btn-alert mr-3">Cancel</button>
<button class="btn-primary">Add New Memo</button>
</div>
</form>
</div>
</template>
<script>
import InputField from "../../components/InputField";
import TextAreaField from "../../components/TextAreaField";
export default {
name: "MemoCreate",
components: {
InputField, TextAreaField
},
data: function () {
return {
form: {
'name': '',
'memo': '',
},
errors: null,
}
},
methods: {
submitForm: function () {
axios.post('/api/memos', this.form)
.then(response => {
this.$router.push(response.data.links.self)
})
.catch(errors => {
this.errors = errors.response.data.errors
})
}
}
}
</script>
<style scoped>
</style>

65
resources/js/views/Memo/MemoEdit.vue Executable file
View File

@@ -0,0 +1,65 @@
<template>
<div>
<div class="flex-between">
<a href="#" @click="$router.back()" class="link">
< Back
</a>
</div>
<form @submit.prevent="submitForm">
<InputField name="name" :data="form.name" label="Memo Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
<TextAreaField name="memo" :data="form.memo" label="Memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
<div class="flex-end">
<button class="btn-alert mr-3">Cancel</button>
<button class="btn-primary">Save</button>
</div>
</form>
</div>
</template>
<script>
import InputField from "../../components/InputField";
import TextAreaField from "../../components/TextAreaField";
export default {
name: "MemoEdit",
components: {
InputField, TextAreaField
},
data: function () {
return {
form: {
'name': '',
'memo': '',
},
errors: null,
loading: true,
}
},
methods: {
submitForm: function () {
axios.patch('/api/memos/' + this.$route.params.id, this.form)
.then(response => {
this.$router.push(response.data.links.self)
})
.catch(errors => {
this.errors = errors.response.data.errors
})
}
},
mounted() {
axios.get('/api/memos/' + this.$route.params.id)
.then(response => {
this.form = response.data.data
this.loading = false
})
.catch(error => {
this.loading = false
if (error.response.status === 404) {
this.$router.back()
}
})
}
}
</script>

46
resources/js/views/Memo/MemoIndex.vue Executable file
View File

@@ -0,0 +1,46 @@
<template>
<div>
<div class="flex-between flex-center mb-1">
<a href="#" @click="$router.back()" class="link">
< Back
</a>
<router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
</div>
<div v-if="loading">> Loading...</div>
<div v-else>
<div v-if="memos.lenght === 0">
<p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
</div>
<div v-for="memo in memos">
<router-link :to="'/memos/' + memo.data.memo_id" class="link-large relative flex-center p-2">
<h1>{{ memo.data.name }}</h1>
<div class="memo-date">{{ memo.data.last_updated }}</div>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: "MemoIndex",
data: function () {
return {
loading: true,
memos: null,
}
},
mounted() {
axios.get('/api/memos')
.then(response => {
this.memos = response.data.data
this.loading = false
})
.catch(error => {
this.loading = false
alert('Unable to fetch memos.')
})
}
}
</script>

78
resources/js/views/Memo/MemoShow.vue Executable file
View File

@@ -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>