Skip to content

K
kiaisoft_tuananh_nuxt
Commit 20162579 authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

fix coding style

parent 1d3d31ca
Show whitespace changes
Inline Side-by-side
Showing with 308 additions and 258 deletions
pages/home/posts.vue
View file @ 20162579
...@@ -2,16 +2,22 @@ ...@@ -2,16 +2,22 @@
<div> <div>
<b-breadcrumb> <b-breadcrumb>
<b-breadcrumb-item href="/home"> <b-breadcrumb-item href="/home">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon> <b-icon
icon="house-fill"
scale="1.25"
shift-v="1.25"
aria-hidden="true"
></b-icon>
Home Home
</b-breadcrumb-item> </b-breadcrumb-item>
<b-breadcrumb-item href="/home/posts">Post</b-breadcrumb-item> <b-breadcrumb-item href="/home/posts">Post</b-breadcrumb-item>
</b-breadcrumb> </b-breadcrumb>
<div style="float: right"> <div style="float: right">
<b-button class="text-white" v-b-modal.modal-create >New Post</b-button></div> <b-button class="text-white" v-b-modal.modal-create>New Post</b-button>
<b-modal id="modal-create" title="create Post" class="modal fade" > </div>
<b-modal id="modal-create" title="create Post" class="modal fade">
<div class="w-full mt-4 p-10"> <div class="w-full mt-4 p-10">
<form > <form>
<label for="input-live">Title :</label> <label for="input-live">Title :</label>
<b-form-input <b-form-input
id="input-live" id="input-live"
...@@ -28,10 +34,9 @@ ...@@ -28,10 +34,9 @@
<label>Category ID :</label> <label>Category ID :</label>
<b-form-select v-model="category_id"> <b-form-select v-model="category_id">
<option v-for="item in categories" :value="item.id"> <option v-for="item in categories" :value="item.id">
{{item.name}} {{ item.name }}
</option> </option>
</b-form-select> </b-form-select>
<label>Content :</label> <label>Content :</label>
<input <input
type="text" type="text"
...@@ -63,14 +68,26 @@ ...@@ -63,14 +68,26 @@
</form> </form>
</div> </div>
<template #modal-footer> <template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-create')" class="btn btn-danger btn-sm m-1">Close</button> <button
<button @click="createPost()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button> v-b-modal.modal-close_visit
@click="$bvModal.hide('modal-create')"
class="btn btn-danger btn-sm m-1"
>
Close
</button>
<button
@click="createPost()"
v-b-modal.modal-close_visit
class="btn btn-success btn-sm m-1"
>
Submit
</button>
</template> </template>
</b-modal> </b-modal>
<!-- modal-show --> <!-- modal-show -->
<b-modal id="modal-show" title="POST" class="modal fade" > <b-modal id="modal-show" title="POST" class="modal fade">
<div class="w-full mt-4 p-10"> <div class="w-full mt-4 p-10">
<form > <form>
<label>Title :</label> <label>Title :</label>
<input <input
type="text" type="text"
...@@ -105,7 +122,11 @@ ...@@ -105,7 +122,11 @@
disabled disabled
/> />
<label>Status :</label> <label>Status :</label>
<b-form-select v-model="sStatus" :options="options" disabled></b-form-select> <b-form-select
v-model="sStatus"
:options="options"
disabled
></b-form-select>
<label>Image :</label> <label>Image :</label>
<div v-for="(image, index) in sImages" :key="index"> <div v-for="(image, index) in sImages" :key="index">
<b-img :src="image" fluid alt="Fluid image"></b-img> <b-img :src="image" fluid alt="Fluid image"></b-img>
...@@ -113,13 +134,19 @@ ...@@ -113,13 +134,19 @@
</form> </form>
</div> </div>
<template #modal-footer> <template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-show')" class="btn btn-danger btn-sm m-1">Close</button> <button
v-b-modal.modal-close_visit
@click="$bvModal.hide('modal-show')"
class="btn btn-danger btn-sm m-1"
>
Close
</button>
</template> </template>
</b-modal> </b-modal>
<!-- modal-edit --> <!-- modal-edit -->
<b-modal id="modal-edit" title="Edit Post " class="modal fade" > <b-modal id="modal-edit" title="Edit Post " class="modal fade">
<div class="w-full mt-4 p-10"> <div class="w-full mt-4 p-10">
<form > <form>
<label>Title :</label> <label>Title :</label>
<input <input
type="text" type="text"
...@@ -134,7 +161,7 @@ ...@@ -134,7 +161,7 @@
<label>Category ID :</label> <label>Category ID :</label>
<b-form-select v-model="eCategoryId"> <b-form-select v-model="eCategoryId">
<option v-for="item in categories" :value="item.id"> <option v-for="item in categories" :value="item.id">
{{item.name}} {{ item.name }}
</option> </option>
</b-form-select> </b-form-select>
<label>Content :</label> <label>Content :</label>
...@@ -167,8 +194,20 @@ ...@@ -167,8 +194,20 @@
</form> </form>
</div> </div>
<template #modal-footer> <template #modal-footer>
<button v-b-modal.modal-close_visit @click="$bvModal.hide('modal-edit')" class="btn btn-danger btn-sm m-1">Close</button> <button
<button @click="updatePost()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button> v-b-modal.modal-close_visit
@click="$bvModal.hide('modal-edit')"
class="btn btn-danger btn-sm m-1"
>
Close
</button>
<button
@click="updatePost()"
v-b-modal.modal-close_visit
class="btn btn-success btn-sm m-1"
>
Submit
</button>
</template> </template>
</b-modal> </b-modal>
<!-- table --> <!-- table -->
...@@ -179,7 +218,7 @@ ...@@ -179,7 +218,7 @@
sort-by="calories" sort-by="calories"
class="elevation-1" class="elevation-1"
> >
<template v-slot:top > <template v-slot:top>
<v-toolbar flat> <v-toolbar flat>
<v-toolbar-title>Post Manage</v-toolbar-title> <v-toolbar-title>Post Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider> <v-divider class="mx-4" inset vertical></v-divider>
...@@ -187,9 +226,15 @@ ...@@ -187,9 +226,15 @@
</v-toolbar> </v-toolbar>
</template> </template>
<template v-slot:item.actions="{ item }"> <template v-slot:item.actions="{ item }">
<v-icon small @click="editPost(item)" :id ="item.id"> mdi-pencil </v-icon> <v-icon small @click="editPost(item)" :id="item.id">
<v-icon small @click="deletePost(item.id,item)" :id ="item.id"> mdi-delete </v-icon> mdi-pencil
<v-icon small @click="showPost(item)" :id ="item.id"> mdi-account-details </v-icon> </v-icon>
<v-icon small @click="deletePost(item.id, item)" :id="item.id">
mdi-delete
</v-icon>
<v-icon small @click="showPost(item)" :id="item.id">
mdi-account-details
</v-icon>
</template> </template>
<template v-slot:no-data> <template v-slot:no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn> <v-btn color="primary" @click="initialize"> Reset </v-btn>
...@@ -204,7 +249,7 @@ import Nav from "@/components/Nav"; ...@@ -204,7 +249,7 @@ import Nav from "@/components/Nav";
import axios from "axios"; import axios from "axios";
export default { export default {
layout: 'admin', layout: "admin",
name: "App", name: "App",
components: { components: {
Nav, Nav,
...@@ -212,18 +257,18 @@ export default { ...@@ -212,18 +257,18 @@ export default {
middleware: ["web"], middleware: ["web"],
data: () => { data: () => {
return { return {
title: '', title: "",
category_id: null, category_id: null,
content: '', content: "",
user_id: '', user_id: "",
status: null, status: null,
images: [], images: [],
dialog: false, dialog: false,
dialogDelete: false, dialogDelete: false,
options: [ options: [
{ value: 1, text: 'Draft' }, { value: 1, text: "Draft" },
{ value: 2, text: 'Publish' }, { value: 2, text: "Publish" },
{ value: 3, text: 'UnPublish' }, { value: 3, text: "UnPublish" },
], ],
headers: [ headers: [
{ {
...@@ -236,22 +281,22 @@ export default { ...@@ -236,22 +281,22 @@ export default {
{ text: "content", value: "content", sortable: false }, { text: "content", value: "content", sortable: false },
{ text: "user_id", value: "user_id" }, { text: "user_id", value: "user_id" },
{ text: "status", value: "status" }, { text: "status", value: "status" },
{ text: 'Actions', value: 'actions', sortable: false }, { text: "Actions", value: "actions", sortable: false },
], ],
posts: [], posts: [],
categories: [], categories: [],
sTitle: '', sTitle: "",
sCategoryId: '', sCategoryId: "",
sContent: '', sContent: "",
sUserId: '', sUserId: "",
sStatus: null, sStatus: null,
sImages: null, sImages: null,
eId: '', eId: "",
eTitle: '', eTitle: "",
eCategoryId: '', eCategoryId: "",
eContent: '', eContent: "",
eUserId: '', eUserId: "",
eStatus: '', eStatus: "",
eImages: null, eImages: null,
message: [], message: [],
editedIndex: -1, editedIndex: -1,
...@@ -271,83 +316,81 @@ export default { ...@@ -271,83 +316,81 @@ export default {
created_at: "", created_at: "",
updated_at: "", updated_at: "",
}, },
} };
}, },
computed: { computed: {
formTitle() { formTitle() {
return this.editedIndex === -1 ? "New Item" : "Edit Item" return this.editedIndex === -1 ? "New Item" : "Edit Item";
}, },
nameState() { nameState() {
return this.name.length > 2 ? true : false return this.name.length > 2 ? true : false;
} },
}, },
watch: { watch: {
dialog(val) { dialog(val) {
val || this.close() val || this.close();
}, },
dialogDelete(val) { dialogDelete(val) {
val || this.closeDelete() val || this.closeDelete();
}, },
}, },
created() { created() {
this.initialize(), this.initialize(), this.getposts(), this.getCategories();
this.getposts(),
this.getCategories()
}, },
methods: { methods: {
initialize() { initialize() {
this.posts= [], (this.posts = []),
this.product= [], (this.product = []),
this.categories= [], (this.categories = []),
this.sTitle= '', (this.sTitle = ""),
this.sCategoryId= '', (this.sCategoryId = ""),
this.sContent= '', (this.sContent = ""),
this.sUserId= '', (this.sUserId = ""),
this.sStatus= '', (this.sStatus = ""),
this.sImages= null (this.sImages = null);
}, },
editItem(item) { editItem(item) {
this.editedIndex = this.posts.indexOf(item) this.editedIndex = this.posts.indexOf(item);
this.editedItem = Object.assign({}, item) this.editedItem = Object.assign({}, item);
this.dialog = true this.dialog = true;
}, },
deleteItem(item) { deleteItem(item) {
this.editedIndex = this.posts.indexOf(item) this.editedIndex = this.posts.indexOf(item);
this.editedItem = Object.assign({}, item) this.editedItem = Object.assign({}, item);
this.dialogDelete = true; this.dialogDelete = true;
}, },
deleteItemConfirm() { deleteItemConfirm() {
this.posts.splice(this.editedIndex, 1) this.posts.splice(this.editedIndex, 1);
this.closeDelete() this.closeDelete();
}, },
close() { close() {
this.dialog = false this.dialog = false;
this.$nextTick(() => { this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem) this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1 this.editedIndex = -1;
}); });
}, },
closeDelete() { closeDelete() {
this.dialogDelete = false this.dialogDelete = false;
this.$nextTick(() => { this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem) this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1 this.editedIndex = -1;
}); });
}, },
save() { save() {
if (this.editedIndex > -1) { if (this.editedIndex > -1) {
Object.assign(this.posts[this.editedIndex], this.editedItem) Object.assign(this.posts[this.editedIndex], this.editedItem);
} else { } else {
this.posts.push(this.editedItem) this.posts.push(this.editedItem);
} }
this.close() this.close();
}, },
getCategories() { getCategories() {
axios axios
.get("http://127.0.0.1:8000/api/categories/") .get("http://127.0.0.1:8000/api/categories/")
.then((response) => (this.categories = response.data.data)) .then((response) => (this.categories = response.data.data))
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error);
}); });
}, },
getposts() { getposts() {
...@@ -355,127 +398,134 @@ export default { ...@@ -355,127 +398,134 @@ export default {
.get("http://127.0.0.1:8000/api/posts/") .get("http://127.0.0.1:8000/api/posts/")
.then((response) => (this.posts = response.data.data)) .then((response) => (this.posts = response.data.data))
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error);
}); });
}, },
createPost() { createPost() {
const self = this; const self = this;
axios axios
.post('http://127.0.0.1:8000/api/posts/',{ .post(
"http://127.0.0.1:8000/api/posts/",
{
title: this.title, title: this.title,
category_id: this.category_id, category_id: this.category_id,
content: this.content, content: this.content,
images: this.images, images: this.images,
user_id: this.user_id, user_id: this.user_id,
status: this.status, status: this.status,
}, { },
{
headers: { headers: {
'Content-Type': 'multipart/form-data', "Content-Type": "multipart/form-data",
'Authorization': this.$auth.$storage.getUniversal('token') Authorization: this.$auth.$storage.getUniversal("token"),
},
} }
)
.then((response) => {
this.$bvModal.hide("modal-create");
self.$toast.success("Post created successfully!", {
duration: 3000,
});
}) })
.then(response => { .catch((errors) => {
this.$bvModal.hide('modal-create') this.$bvModal.hide("modal-create");
self.$toast.success('Post created successfully!', { console.log(errors.response.data.message);
duration: 3000 this.message = errors.response.data.message;
}) self.$toast.error("something went wrong while trying create!", {
}) duration: 3000,
.catch(errors => { });
this.$bvModal.hide('modal-create') });
console.log(errors.response.data.message)
this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!',{
duration: 3000
})
})
}, },
deletePost(ID,index) { deletePost(ID, index) {
const self = this; const self = this;
this.editedIndex = this.posts.indexOf(index) this.editedIndex = this.posts.indexOf(index);
if(confirm("Do you really want to delete?")){ if (confirm("Do you really want to delete?")) {
axios axios
.delete(`http://127.0.0.1:8000/api/posts/${ID}`) .delete(`http://127.0.0.1:8000/api/posts/${ID}`)
.then(response => { .then((response) => {
this.posts.splice(this.editedIndex, 1); this.posts.splice(this.editedIndex, 1);
self.$toast.success('Post deleted successfully!',{ self.$toast.success("Post deleted successfully!", {
duration: 3000 duration: 3000,
}); });
}) })
.catch(error =>{ .catch((error) => {
console.log(error) console.log(error);
self.$toast.error('Error!',{ self.$toast.error("Error!", {
duration: 3000 duration: 3000,
}) });
}) });
} }
}, },
async showPost(item) { async showPost(item) {
const ID = item.id const ID = item.id;
try { try {
const resp = await fetch(`http://127.0.0.1:8000/api/posts/${ID}`, { const resp = await fetch(`http://127.0.0.1:8000/api/posts/${ID}`, {
method: "GET", method: "GET",
headers: { headers: {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
"Authorization": this.$auth.$storage.getUniversal("token") Authorization: this.$auth.$storage.getUniversal("token"),
} },
}).then((response) => { }).then((response) => {
return response.json() return response.json();
}); });
this.sTitle = resp.data.title this.sTitle = resp.data.title;
this.sContent = resp.data.content this.sContent = resp.data.content;
this.sCategoryId = resp.data.category_id this.sCategoryId = resp.data.category_id;
this.sUserId = resp.data.user_id this.sUserId = resp.data.user_id;
this.sStatus = resp.data.status this.sStatus = resp.data.status;
this.sImages = resp.data.images this.sImages = resp.data.images;
} catch (error) { } catch (error) {
console.log(error) console.log(error);
} }
this.$bvModal.show('modal-show') this.$bvModal.show("modal-show");
}, },
editPost(item) { editPost(item) {
this.$bvModal.show('modal-edit') this.$bvModal.show("modal-edit");
this.eId = item.id this.eId = item.id;
this.eTitle = item.title this.eTitle = item.title;
this.eCategoryId = item.category_id this.eCategoryId = item.category_id;
this.eContent = item.content this.eContent = item.content;
this.eStatus = item.status this.eStatus = item.status;
this.eUserId = item.user_id this.eUserId = item.user_id;
// this.eImages = item.images // this.eImages = item.images
}, },
updatePost() { updatePost() {
const self = this; const self = this;
axios axios
.post(`http://127.0.0.1:8000/api/posts/update/${this?.eId}`,{ .post(
`http://127.0.0.1:8000/api/posts/update/${this?.eId}`,
{
title: this.eTitle, title: this.eTitle,
category_id: this.eCategoryId, category_id: this.eCategoryId,
content: this.eContent, content: this.eContent,
images: this.eImages, images: this.eImages,
user_id: this.eUserId, user_id: this.eUserId,
status: this.eStatus, status: this.eStatus,
}, { },
{
headers: { headers: {
"Content-Type": "multipart/form-data", "Content-Type": "multipart/form-data",
"Authorization": this.$auth.$storage.getUniversal("token") Authorization: this.$auth.$storage.getUniversal("token"),
},
} }
}) )
.then(response => { .then((response) => {
this.$bvModal.hide('modal-edit') this.$bvModal.hide("modal-edit");
self.$toast.success('Post updated successfully!',{ self.$toast.success("Post updated successfully!", {
duration: 3000 duration: 3000,
}); });
console.log(response) console.log(response);
})
.catch(error => {
console.log(error)
this.$bvModal.hide('modal-edit')
self.$toast.error('something went wrong while trying create!',{
duration: 3000
})
}) })
.catch((error) => {
console.log(error);
this.$bvModal.hide("modal-edit");
self.$toast.error("something went wrong while trying create!", {
duration: 3000,
});
});
}, },
}, },
}; };
</script> </script>
<style> <style></style>
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment