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>
<div>
<b-breadcrumb>
<b-breadcrumb-item href="/home">
<b-icon icon="house-fill" scale="1.25" shift-v="1.25" aria-hidden="true"></b-icon>
Home
</b-breadcrumb-item>
<b-breadcrumb-item href="/home/posts">Post</b-breadcrumb-item>
</b-breadcrumb>
<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-breadcrumb>
<b-breadcrumb-item href="/home">
<b-icon
icon="house-fill"
scale="1.25"
shift-v="1.25"
aria-hidden="true"
></b-icon>
Home
</b-breadcrumb-item>
<b-breadcrumb-item href="/home/posts">Post</b-breadcrumb-item>
</b-breadcrumb>
<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
id="input-live"
type="text"
......@@ -21,17 +27,16 @@
aria-describedby="input-live-help input-live-feedback"
v-model="title"
max="255"
min="1"
min="1"
trim
>
>
</b-form-input>
<label>Category ID :</label>
<b-form-select v-model="category_id">
<option v-for="item in categories" :value="item.id">
{{item.name}}
{{ item.name }}
</option>
</b-form-select>
<label>Content :</label>
<input
type="text"
......@@ -60,18 +65,30 @@
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
></b-form-file>
</form>
</div>
<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 @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>
</form>
</div>
<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
@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
type="text"
class="form-control mb-2"
......@@ -105,22 +122,32 @@
disabled
/>
<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>
<div v-for="(image, index) in sImages" :key="index">
<b-img :src="image" fluid alt="Fluid image"></b-img>
</div>
</form>
</div>
<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>
</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>
</form>
</div>
<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>
</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
type="text"
class="form-control mb-2"
......@@ -134,7 +161,7 @@
<label>Category ID :</label>
<b-form-select v-model="eCategoryId">
<option v-for="item in categories" :value="item.id">
{{item.name}}
{{ item.name }}
</option>
</b-form-select>
<label>Content :</label>
......@@ -163,39 +190,57 @@
:state="Boolean(eImages)"
placeholder="Choose a image or drop it here..."
drop-placeholder="Drop file here..."
></b-form-file>
</form>
</div>
<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 @click="updatePost()" v-b-modal.modal-close_visit class="btn btn-success btn-sm m-1">Submit</button>
</template>
</b-modal>
<!-- 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>
></b-form-file>
</form>
</div>
<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
@click="updatePost()"
v-b-modal.modal-close_visit
class="btn btn-success btn-sm m-1"
>
Submit
</button>
</template>
</v-data-table>
</div>
</b-modal>
<!-- 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>
</template>
......@@ -204,7 +249,7 @@ import Nav from "@/components/Nav";
import axios from "axios";
export default {
layout: 'admin',
layout: "admin",
name: "App",
components: {
Nav,
......@@ -212,142 +257,140 @@ export default {
middleware: ["web"],
data: () => {
return {
title: '',
title: "",
category_id: null,
content: '',
user_id: '',
content: "",
user_id: "",
status: null,
images: [],
dialog: false,
dialogDelete: false,
options: [
{ value: 1, text: 'Draft' },
{ value: 2, text: 'Publish' },
{ value: 3, text: 'UnPublish' },
],
headers: [
{
text: "Title",
align: "start",
sortable: false,
value: "title",
dialog: false,
dialogDelete: false,
options: [
{ value: 1, text: "Draft" },
{ value: 2, text: "Publish" },
{ value: 3, text: "UnPublish" },
],
headers: [
{
text: "Title",
align: "start",
sortable: false,
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" },
{ 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: "",
},
defaultItem: {
name: "",
id: "",
ordering: "",
status: "",
created_at: "",
updated_at: "",
},
}
defaultItem: {
name: "",
id: "",
ordering: "",
status: "",
created_at: "",
updated_at: "",
},
};
},
computed: {
formTitle() {
return this.editedIndex === -1 ? "New Item" : "Edit Item"
return this.editedIndex === -1 ? "New Item" : "Edit Item";
},
nameState() {
return this.name.length > 2 ? true : false
}
return this.name.length > 2 ? true : false;
},
},
watch: {
dialog(val) {
val || this.close()
val || this.close();
},
dialogDelete(val) {
val || this.closeDelete()
val || this.closeDelete();
},
},
created() {
this.initialize(),
this.getposts(),
this.getCategories()
this.initialize(), this.getposts(), this.getCategories();
},
methods: {
initialize() {
this.posts= [],
this.product= [],
this.categories= [],
this.sTitle= '',
this.sCategoryId= '',
this.sContent= '',
this.sUserId= '',
this.sStatus= '',
this.sImages= null
(this.posts = []),
(this.product = []),
(this.categories = []),
(this.sTitle = ""),
(this.sCategoryId = ""),
(this.sContent = ""),
(this.sUserId = ""),
(this.sStatus = ""),
(this.sImages = null);
},
editItem(item) {
this.editedIndex = this.posts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
this.editedIndex = this.posts.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialog = true;
},
deleteItem(item) {
this.editedIndex = this.posts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.editedIndex = this.posts.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialogDelete = true;
},
deleteItemConfirm() {
this.posts.splice(this.editedIndex, 1)
this.closeDelete()
this.posts.splice(this.editedIndex, 1);
this.closeDelete();
},
close() {
this.dialog = false
this.dialog = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
closeDelete() {
this.dialogDelete = false
this.dialogDelete = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
save() {
if (this.editedIndex > -1) {
Object.assign(this.posts[this.editedIndex], this.editedItem)
Object.assign(this.posts[this.editedIndex], this.editedItem);
} else {
this.posts.push(this.editedItem)
this.posts.push(this.editedItem);
}
this.close()
this.close();
},
getCategories() {
axios
.get("http://127.0.0.1:8000/api/categories/")
.then((response) => (this.categories = response.data.data))
.catch(function (error) {
console.log(error)
console.log(error);
});
},
getposts() {
......@@ -355,127 +398,134 @@ export default {
.get("http://127.0.0.1:8000/api/posts/")
.then((response) => (this.posts = response.data.data))
.catch(function (error) {
console.log(error)
console.log(error);
});
},
createPost() {
const self = this;
axios
.post('http://127.0.0.1:8000/api/posts/',{
title: this.title,
category_id: this.category_id,
content: this.content,
images: this.images,
user_id: this.user_id,
status: this.status,
}, {
headers: {
'Content-Type': 'multipart/form-data',
'Authorization': this.$auth.$storage.getUniversal('token')
}
})
.then(response => {
this.$bvModal.hide('modal-create')
self.$toast.success('Post created successfully!', {
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
.post(
"http://127.0.0.1:8000/api/posts/",
{
title: this.title,
category_id: this.category_id,
content: this.content,
images: this.images,
user_id: this.user_id,
status: this.status,
},
{
headers: {
"Content-Type": "multipart/form-data",
Authorization: this.$auth.$storage.getUniversal("token"),
},
}
)
.then((response) => {
this.$bvModal.hide("modal-create");
self.$toast.success("Post created successfully!", {
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;
this.editedIndex = this.posts.indexOf(index)
if(confirm("Do you really want to delete?")){
axios
.delete(`http://127.0.0.1:8000/api/posts/${ID}`)
.then(response => {
this.posts.splice(this.editedIndex, 1);
self.$toast.success('Post deleted successfully!',{
duration: 3000
});
})
.catch(error =>{
console.log(error)
self.$toast.error('Error!',{
duration: 3000
})
})
}
this.editedIndex = this.posts.indexOf(index);
if (confirm("Do you really want to delete?")) {
axios
.delete(`http://127.0.0.1:8000/api/posts/${ID}`)
.then((response) => {
this.posts.splice(this.editedIndex, 1);
self.$toast.success("Post deleted successfully!", {
duration: 3000,
});
})
.catch((error) => {
console.log(error);
self.$toast.error("Error!", {
duration: 3000,
});
});
}
},
async showPost(item) {
const ID = item.id
const ID = item.id;
try {
const resp = await fetch(`http://127.0.0.1:8000/api/posts/${ID}`, {
method: "GET",
headers: {
"Content-Type": "multipart/form-data",
"Authorization": this.$auth.$storage.getUniversal("token")
}
Authorization: this.$auth.$storage.getUniversal("token"),
},
}).then((response) => {
return response.json()
return response.json();
});
this.sTitle = resp.data.title
this.sContent = resp.data.content
this.sCategoryId = resp.data.category_id
this.sUserId = resp.data.user_id
this.sStatus = resp.data.status
this.sImages = resp.data.images
this.sTitle = resp.data.title;
this.sContent = resp.data.content;
this.sCategoryId = resp.data.category_id;
this.sUserId = resp.data.user_id;
this.sStatus = resp.data.status;
this.sImages = resp.data.images;
} catch (error) {
console.log(error)
}
this.$bvModal.show('modal-show')
console.log(error);
}
this.$bvModal.show("modal-show");
},
editPost(item) {
this.$bvModal.show('modal-edit')
this.eId = item.id
this.eTitle = item.title
this.eCategoryId = item.category_id
this.eContent = item.content
this.eStatus = item.status
this.eUserId = item.user_id
// this.eImages = item.images
this.$bvModal.show("modal-edit");
this.eId = item.id;
this.eTitle = item.title;
this.eCategoryId = item.category_id;
this.eContent = item.content;
this.eStatus = item.status;
this.eUserId = item.user_id;
// this.eImages = item.images
},
updatePost() {
const self = this;
axios
.post(`http://127.0.0.1:8000/api/posts/update/${this?.eId}`,{
title: this.eTitle,
category_id: this.eCategoryId,
content: this.eContent,
images: this.eImages,
user_id: this.eUserId,
status: this.eStatus,
}, {
headers: {
"Content-Type": "multipart/form-data",
"Authorization": this.$auth.$storage.getUniversal("token")
}
})
.then(response => {
this.$bvModal.hide('modal-edit')
self.$toast.success('Post updated successfully!',{
duration: 3000
.post(
`http://127.0.0.1:8000/api/posts/update/${this?.eId}`,
{
title: this.eTitle,
category_id: this.eCategoryId,
content: this.eContent,
images: this.eImages,
user_id: this.eUserId,
status: this.eStatus,
},
{
headers: {
"Content-Type": "multipart/form-data",
Authorization: this.$auth.$storage.getUniversal("token"),
},
}
)
.then((response) => {
this.$bvModal.hide("modal-edit");
self.$toast.success("Post updated successfully!", {
duration: 3000,
});
console.log(response)
})
.catch(error => {
console.log(error)
this.$bvModal.hide('modal-edit')
self.$toast.error('something went wrong while trying create!',{
duration: 3000
console.log(response);
})
})
.catch((error) => {
console.log(error);
this.$bvModal.hide("modal-edit");
self.$toast.error("something went wrong while trying create!", {
duration: 3000,
});
});
},
},
};
</script>
<style>
</style>
\ No newline at end of file
<style></style>
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