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
Hide whitespace changes
Inline Side-by-side
Showing with 308 additions and 258 deletions
pages/home/posts.vue
View file @ 20162579
<template> <template>
<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
Home icon="house-fill"
</b-breadcrumb-item> scale="1.25"
<b-breadcrumb-item href="/home/posts">Post</b-breadcrumb-item> shift-v="1.25"
</b-breadcrumb> aria-hidden="true"
<div style="float: right"> ></b-icon>
<b-button class="text-white" v-b-modal.modal-create >New Post</b-button></div> Home
<b-modal id="modal-create" title="create Post" class="modal fade" > </b-breadcrumb-item>
<div class="w-full mt-4 p-10"> <b-breadcrumb-item href="/home/posts">Post</b-breadcrumb-item>
<form > </b-breadcrumb>
<label for="input-live">Title :</label> <div style="float: right">
<b-button class="text-white" v-b-modal.modal-create>New Post</b-button>
</div>
<b-modal id="modal-create" title="create Post" class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label for="input-live">Title :</label>
<b-form-input <b-form-input
id="input-live" id="input-live"
type="text" type="text"
...@@ -21,17 +27,16 @@ ...@@ -21,17 +27,16 @@
aria-describedby="input-live-help input-live-feedback" aria-describedby="input-live-help input-live-feedback"
v-model="title" v-model="title"
max="255" max="255"
min="1" min="1"
trim trim
> >
</b-form-input> </b-form-input>
<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"
...@@ -60,18 +65,30 @@ ...@@ -60,18 +65,30 @@
placeholder="Choose a image or drop it here..." placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..." drop-placeholder="Drop file here..."
></b-form-file> ></b-form-file>
</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
</template> @click="$bvModal.hide('modal-create')"
</b-modal> class="btn btn-danger btn-sm m-1"
<!-- modal-show --> >
<b-modal id="modal-show" title="POST" class="modal fade" > Close
<div class="w-full mt-4 p-10"> </button>
<form > <button
<label>Title :</label> @click="createPost()"
v-b-modal.modal-close_visit
class="btn btn-success btn-sm m-1"
>
Submit
</button>
</template>
</b-modal>
<!-- modal-show -->
<b-modal id="modal-show" title="POST" class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label>Title :</label>
<input <input
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
...@@ -105,22 +122,32 @@ ...@@ -105,22 +122,32 @@
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>
</div> </div>
</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
</template> v-b-modal.modal-close_visit
</b-modal> @click="$bvModal.hide('modal-show')"
<!-- modal-edit --> class="btn btn-danger btn-sm m-1"
<b-modal id="modal-edit" title="Edit Post " class="modal fade" > >
<div class="w-full mt-4 p-10"> Close
<form > </button>
<label>Title :</label> </template>
</b-modal>
<!-- modal-edit -->
<b-modal id="modal-edit" title="Edit Post " class="modal fade">
<div class="w-full mt-4 p-10">
<form>
<label>Title :</label>
<input <input
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
...@@ -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>
...@@ -163,39 +190,57 @@ ...@@ -163,39 +190,57 @@
:state="Boolean(eImages)" :state="Boolean(eImages)"
placeholder="Choose a image or drop it here..." placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..." drop-placeholder="Drop file here..."
></b-form-file> ></b-form-file>
</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
</template> @click="$bvModal.hide('modal-edit')"
</b-modal> class="btn btn-danger btn-sm m-1"
<!-- table --> >
<div> Close
<v-data-table </button>
:headers="headers" <button
:items="posts" @click="updatePost()"
sort-by="calories" v-b-modal.modal-close_visit
class="elevation-1" class="btn btn-success btn-sm m-1"
> >
<template v-slot:top > Submit
<v-toolbar flat> </button>
<v-toolbar-title>Post Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small @click="editPost(item)" :id ="item.id"> mdi-pencil </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 v-slot:no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn>
</template> </template>
</v-data-table> </b-modal>
</div> <!-- table -->
<div>
<v-data-table
:headers="headers"
:items="posts"
sort-by="calories"
class="elevation-1"
>
<template v-slot:top>
<v-toolbar flat>
<v-toolbar-title>Post Manage</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon small @click="editPost(item)" :id="item.id">
mdi-pencil
</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 v-slot:no-data>
<v-btn color="primary" @click="initialize"> Reset </v-btn>
</template>
</v-data-table>
</div>
</div> </div>
</template> </template>
...@@ -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,142 +257,140 @@ export default { ...@@ -212,142 +257,140 @@ 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: [
{ {
text: "Title", text: "Title",
align: "start", align: "start",
sortable: false, sortable: false,
value: "title", value: "title",
},
{ text: "Category ID", value: "category_id" },
{ text: "content", value: "content", sortable: false },
{ text: "user_id", value: "user_id" },
{ text: "status", value: "status" },
{ text: "Actions", value: "actions", sortable: false },
],
posts: [],
categories: [],
sTitle: "",
sCategoryId: "",
sContent: "",
sUserId: "",
sStatus: null,
sImages: null,
eId: "",
eTitle: "",
eCategoryId: "",
eContent: "",
eUserId: "",
eStatus: "",
eImages: null,
message: [],
editedIndex: -1,
editedItem: {
name: "",
id: "",
ordering: "",
status: "",
created_at: "",
updated_at: "",
}, },
{ text: "Category ID", value: "category_id" }, defaultItem: {
{ text: "content", value: "content", sortable: false }, name: "",
{ text: "user_id", value: "user_id" }, id: "",
{ text: "status", value: "status" }, ordering: "",
{ text: 'Actions', value: 'actions', sortable: false }, status: "",
], created_at: "",
posts: [], updated_at: "",
categories: [], },
sTitle: '', };
sCategoryId: '',
sContent: '',
sUserId: '',
sStatus: null,
sImages: null,
eId: '',
eTitle: '',
eCategoryId: '',
eContent: '',
eUserId: '',
eStatus: '',
eImages: null,
message: [],
editedIndex: -1,
editedItem: {
name: "",
id: "",
ordering: "",
status: "",
created_at: "",
updated_at: "",
},
defaultItem: {
name: "",
id: "",
ordering: "",
status: "",
created_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(
title: this.title, "http://127.0.0.1:8000/api/posts/",
category_id: this.category_id, {
content: this.content, title: this.title,
images: this.images, category_id: this.category_id,
user_id: this.user_id, content: this.content,
status: this.status, images: this.images,
}, { user_id: this.user_id,
headers: { status: this.status,
'Content-Type': 'multipart/form-data', },
'Authorization': this.$auth.$storage.getUniversal('token') {
} headers: {
}) "Content-Type": "multipart/form-data",
.then(response => { Authorization: this.$auth.$storage.getUniversal("token"),
this.$bvModal.hide('modal-create') },
self.$toast.success('Post created successfully!', { }
duration: 3000 )
}) .then((response) => {
}) this.$bvModal.hide("modal-create");
.catch(errors => { self.$toast.success("Post created successfully!", {
this.$bvModal.hide('modal-create') duration: 3000,
console.log(errors.response.data.message) });
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(
title: this.eTitle, `http://127.0.0.1:8000/api/posts/update/${this?.eId}`,
category_id: this.eCategoryId, {
content: this.eContent, title: this.eTitle,
images: this.eImages, category_id: this.eCategoryId,
user_id: this.eUserId, content: this.eContent,
status: this.eStatus, images: this.eImages,
}, { user_id: this.eUserId,
headers: { status: this.eStatus,
"Content-Type": "multipart/form-data", },
"Authorization": this.$auth.$storage.getUniversal("token") {
} headers: {
}) "Content-Type": "multipart/form-data",
.then(response => { Authorization: this.$auth.$storage.getUniversal("token"),
this.$bvModal.hide('modal-edit') },
self.$toast.success('Post updated successfully!',{ }
duration: 3000 )
.then((response) => {
this.$bvModal.hide("modal-edit");
self.$toast.success("Post updated successfully!", {
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