Skip to content

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

Merge branch 'dev' of... 

Merge branch 'dev' of https://gitlab.kiaisoft.com/kiaisoft.anh.tran2/kiaisoft_tuananh_nuxt into feature/instant-update
parents bc2d5e91 5c31c3ea
Hide whitespace changes
Inline Side-by-side
Showing with 534 additions and 2 deletions
components/nav.vue
View file @ bbd76dd3
......@@ -15,6 +15,7 @@
<b-nav-item href="/home/users">USER</b-nav-item>
<b-nav-item href="/home/categories">CATEGORY</b-nav-item>
<b-nav-item href="/home/products">PRODUCT</b-nav-item>
<b-nav-item href="/home/posts">POST</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
......
pages/home/posts.vue 0 → 100644
View file @ bbd76dd3
<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-form-input
id="input-live"
type="text"
class="form-control mb-2"
placeholder="name"
aria-describedby="input-live-help input-live-feedback"
v-model="title"
max="255"
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 }}
</option>
</b-form-select>
<label>Content :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Ordering"
v-model="content"
size="sm"
required
/>
<label>Author :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Description"
v-model="user_id"
size="sm"
required
/>
<label>Status :</label>
<b-form-select v-model="status" :options="options"></b-form-select>
<label>Image :</label>
<b-form-file
v-model="images"
multiple
:state="Boolean(images)"
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>
<input
type="text"
class="form-control mb-2"
v-model="sTitle"
size="sm"
disabled
/>
<label>Category ID :</label>
<input
type="text"
class="form-control mb-2"
v-model="sCategoryId"
size="sm"
disabled
/>
<label>Content :</label>
<input
type="text"
class="form-control mb-2"
v-model="sContent"
size="sm"
disabled
/>
<label>Author :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Description"
v-model="sUserID"
size="sm"
disabled
/>
<label>Status :</label>
<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>
<input
type="text"
class="form-control mb-2"
placeholder="name"
v-model="eTitle"
max="255"
min="1"
size="sm"
required
/>
<label>Category ID :</label>
<b-form-select v-model="eCategoryId">
<option v-for="item in categories" :value="item.id">
{{ item.name }}
</option>
</b-form-select>
<label>Content :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Ordering"
v-model="eContent"
size="sm"
required
/>
<label>Author :</label>
<input
type="text"
class="form-control mb-2"
placeholder="Description"
v-model="eUserId"
size="sm"
/>
<label>Status :</label>
<b-form-select v-model="eStatus" :options="options"></b-form-select>
<label>Image :</label>
<b-form-file
v-model="eImages"
multiple
: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>
</template>
</v-data-table>
</div>
</div>
</template>
<script>
import Nav from "@/components/Nav";
import axios from "axios";
export default {
layout: "admin",
name: "App",
components: {
Nav,
},
middleware: ["web"],
data: () => {
return {
title: "",
category_id: null,
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",
},
{ 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: "",
},
};
},
computed: {
formTitle() {
return this.editedIndex === -1 ? "New Item" : "Edit Item";
},
nameState() {
return this.name.length > 2 ? true : false;
},
},
watch: {
dialog(val) {
val || this.close();
},
dialogDelete(val) {
val || this.closeDelete();
},
},
created() {
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
},
editItem(item) {
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.dialogDelete = true;
},
deleteItemConfirm() {
this.posts.splice(this.editedIndex, 1);
this.closeDelete();
},
close() {
this.dialog = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
closeDelete() {
this.dialogDelete = false;
this.$nextTick(() => {
this.editedItem = Object.assign({}, this.defaultItem);
this.editedIndex = -1;
});
},
save() {
if (this.editedIndex > -1) {
Object.assign(this.posts[this.editedIndex], this.editedItem);
} else {
this.posts.push(this.editedItem);
}
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);
});
},
getposts() {
axios
.get("http://127.0.0.1:8000/api/posts/")
.then((response) => (this.posts = response.data.data))
.catch(function (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,
});
});
},
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,
});
});
}
},
async showPost(item) {
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"),
},
}).then((response) => {
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;
} catch (error) {
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
},
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,
});
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>
pages/home/products.vue
View file @ bbd76dd3
......@@ -516,8 +516,8 @@ export default {
variants: this.variants,
}, {
headers: {
"Content-Type": "multipart/form-data",
"Authorization": this.$auth.$storage.getUniversal("token")
'Content-Type': 'multipart/form-data',
'Authorization': this.$auth.$storage.getUniversal('token')
}
})
.then(response => {
......
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