start add Memos
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<aside>
|
||||
Menu
|
||||
<div>Menu</div>
|
||||
<router-link to="/memos">Memos</router-link>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
|
||||
58
resources/js/components/TextAreaField.vue
Normal file
58
resources/js/components/TextAreaField.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="relative pb-2">
|
||||
<label :for="name" class="form-label absolute pt-1">{{ label }}</label>
|
||||
<textarea :id="name" type="text" v-model="value" @input="updateField()" :class="errorClassObject()" class="form-textarea pt-4 pb-1">
|
||||
{{ placeholder }}
|
||||
</textarea>
|
||||
<p class="text-alert" v-text="errorMessage()">Error Here</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TextAreaField",
|
||||
props: [
|
||||
'name', 'label', 'placeholder', 'errors', 'data',
|
||||
],
|
||||
data: function () {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasError: function () {
|
||||
return this.errors && this.errors[this.name] && this.errors[this.name].length > 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateField: function () {
|
||||
this.clearErrors(this.name)
|
||||
this.$emit('update:field', this.value)
|
||||
},
|
||||
errorMessage: function () {
|
||||
if (this.hasError) {
|
||||
return this.errors[this.name][0]
|
||||
}
|
||||
},
|
||||
clearErrors: function () {
|
||||
if (this.hasError) {
|
||||
this.errors[this.name] = null
|
||||
}
|
||||
},
|
||||
errorClassObject: function () {
|
||||
return {
|
||||
'error-field': this.hasError
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: function (val) {
|
||||
this.value = val
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
18
resources/js/router.js
vendored
18
resources/js/router.js
vendored
@@ -4,6 +4,10 @@ import Home from "./views/Home"
|
||||
import Profil from "./views/User/UserProfil";
|
||||
import DashBoard from "./views/DashBoard";
|
||||
import CssTesteur from "./views/CssTesteur";
|
||||
import MemoIndex from "./views/Memo/MemoIndex";
|
||||
import MemoCreate from "./views/Memo/MemoCreate";
|
||||
import MemoShow from "./views/Memo/MemoShow";
|
||||
import MemoEdit from "./views/Memo/MemoEdit";
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
@@ -28,5 +32,19 @@ export default new VueRouter({
|
||||
path: '/css-testeur', name: 'css-testeur', component: CssTesteur,
|
||||
meta: { title: 'css-testeur'}
|
||||
},
|
||||
|
||||
{
|
||||
path: '/memos', component: MemoIndex,
|
||||
meta: {title: 'Memos'}
|
||||
}, {
|
||||
path: '/memos/create', component: MemoCreate,
|
||||
meta: {title: 'Add New Memo'}
|
||||
}, {
|
||||
path: '/memos/:id', component: MemoShow,
|
||||
meta: {title: 'Details for Memo'}
|
||||
}, {
|
||||
path: '/memos/:id/edit', component: MemoEdit,
|
||||
meta: {title: 'Edit Memo'}
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
49
resources/js/views/Memo/MemoCreate.vue
Executable file
49
resources/js/views/Memo/MemoCreate.vue
Executable 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
65
resources/js/views/Memo/MemoEdit.vue
Executable 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
46
resources/js/views/Memo/MemoIndex.vue
Executable 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
78
resources/js/views/Memo/MemoShow.vue
Executable 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>
|
||||
Reference in New Issue
Block a user