Skip to content

K
kiaisoft_tuananh_nuxt
Commit 2f43d5a6 authored by Le Dinh Trung's avatar Le Dinh Trung
Browse files
Options

Merge branch 'hotfix/fix-all' into 'dev' 

Hotfix/fix all

See merge request !9
parents 6ac57a0f 66e7f51a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 892 additions and 695 deletions
components/nav.vue
View file @ 2f43d5a6
...@@ -12,10 +12,10 @@ ...@@ -12,10 +12,10 @@
<b-collapse id="nav-collapse" is-nav> <b-collapse id="nav-collapse" is-nav>
<b-navbar-nav> <b-navbar-nav>
<b-nav-item href="/home/users">USER</b-nav-item> <b-nav-item href="/users">USER</b-nav-item>
<b-nav-item href="/home/categories">CATEGORY</b-nav-item> <b-nav-item href="/categories">CATEGORY</b-nav-item>
<b-nav-item href="/home/products">PRODUCT</b-nav-item> <b-nav-item href="/products">PRODUCT</b-nav-item>
<b-nav-item href="/home/posts">POST</b-nav-item> <b-nav-item href="/posts">POST</b-nav-item>
</b-navbar-nav> </b-navbar-nav>
<!-- Right aligned nav items --> <!-- Right aligned nav items -->
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
</template> </template>
<script> <script>
export default { export default {
name: "nav", name: "Nav",
}; };
</script> </script>
<script> <script>
...@@ -66,7 +66,7 @@ export default { ...@@ -66,7 +66,7 @@ export default {
this.$auth.$storage.setUniversal("loggedIn", "false"); this.$auth.$storage.setUniversal("loggedIn", "false");
this.$auth.$storage.setUniversal("token", ""); this.$auth.$storage.setUniversal("token", "");
this.$auth.$storage.setUniversal("userName", ""); this.$auth.$storage.setUniversal("userName", "");
this.$router.push("/"); this.$router.push("/login");
}, },
}, },
}; };
......
components/sidebar.vue
View file @ 2f43d5a6
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
</template> </template>
<script> <script>
export default { export default {
name: "sidebar", name: "SideBar",
}; };
</script> </script>
<script> <script>
......
layouts/admin.vue
View file @ 2f43d5a6
...@@ -3,11 +3,11 @@ ...@@ -3,11 +3,11 @@
<Nav /> <Nav />
<nuxt /> <nuxt />
</div> </div>
</template> </template>
<script> <script>
import Nav from "@/components/Nav"; import Nav from "@/components/Nav";
import SideBar from "@/components/SideBar";
export default { export default {
components: { Nav }, components: { Nav },
......
middleware/web.js
View file @ 2f43d5a6
export default ({ redirect }) => { export default ({ redirect }) => {
// console.log('[LOG]: middleware is running ...') // console.log('[LOG]: middleware is running ...')
if (localStorage.getItem("token")=="") { if (localStorage.getItem("token")=="") {
return redirect('/') return redirect('/login')
} }
}; };
\ No newline at end of file
nuxt.config.js
View file @ 2f43d5a6
...@@ -45,6 +45,7 @@ export default { ...@@ -45,6 +45,7 @@ export default {
'@nuxtjs/axios', '@nuxtjs/axios',
'@nuxtjs/auth-next', '@nuxtjs/auth-next',
'@nuxtjs/toast', '@nuxtjs/toast',
'@pinia/nuxt',
], ],
bootstrapVue: { bootstrapVue: {
...@@ -52,12 +53,23 @@ export default { ...@@ -52,12 +53,23 @@ export default {
}, },
axios: { axios: {
baseURL: process.env.API_URL || ' http://127.0.0.1:8000/api/', baseURL: 'http://127.0.0.1:8000/api/',
debug: process.env.DEBUG || false, debug: false,
proxyHeaders: false, proxyHeaders: true,
credentials: false, credentials: false,
}, },
// publicRuntimeConfig: {
// axios: {
// browserBaseURL: process.env.BROWSER_BASE_URL
// }
// },
// privateRuntimeConfig: {
// axios: {
// baseURL: process.env.BASE_URL
// }
// },
auth: { auth: {
}, },
......
package-lock.json
View file @ 2f43d5a6
This diff is collapsed.
pages/about.vue
View file @ 2f43d5a6
<template> <template>
<div> <div>
<div> <div>
<h1 style="text-align: center">ABOUT</h1> <h1 style="text-align: center">ABOUT</h1>
</div> </div>
</div> </div>
</template> </template>
\ No newline at end of file
pages/home/categories.vue → pages/categories/index.vue
View file @ 2f43d5a6
...@@ -5,10 +5,10 @@ ...@@ -5,10 +5,10 @@
<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/categories">Category</b-breadcrumb-item> <b-breadcrumb-item href="/categories">Category</b-breadcrumb-item>
</b-breadcrumb> </b-breadcrumb>
<div style="float: right"> <div style="float: right">
<b-button v-b-modal.modal-create >New Category</b-button></div> <b-button v-b-modal.modal-create class="text-white">New Category</b-button></div>
<!-- create modal --> <!-- create modal -->
<b-modal id="modal-create" title="Create Category" class="modal fade" > <b-modal id="modal-create" title="Create Category" class="modal fade" >
<p class="my-4"> <p class="my-4">
...@@ -192,7 +192,7 @@ ...@@ -192,7 +192,7 @@
<script> <script>
import Nav from "@/components/Nav"; import Nav from "@/components/Nav";
import axios from "axios"; import axios from "axios";
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue' import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
export default { export default {
layout: 'admin', layout: 'admin',
...@@ -234,7 +234,7 @@ export default { ...@@ -234,7 +234,7 @@ export default {
name: "", name: "",
id: "", id: "",
ordering: "", ordering: "",
status: "", parent_id: "",
created_at: "", created_at: "",
updated_at: "", updated_at: "",
}, },
...@@ -250,76 +250,76 @@ export default { ...@@ -250,76 +250,76 @@ export default {
}, },
computed: { computed: {
formTitle() { formTitle() {
return this.editedIndex === -1 ? "New Item" : "Edit Item"; return this.editedIndex === -1 ? "New Item" : "Edit Item"
}, },
}, },
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.getCategories(); this.getCategories()
}, },
methods: { methods: {
initialize() { initialize() {
this.users = []; this.users = []
this.categories= []; this.categories= []
}, },
editItem(item) { editItem(item) {
this.editedIndex = this.categories.indexOf(item); this.editedIndex = this.categories.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.categories.indexOf(item); this.editedIndex = this.categories.indexOf(item)
this.editedItem = Object.assign({}, item); this.editedItem = Object.assign({}, item)
this.dialogDelete = true; this.dialogDelete = true
}, },
deleteItemConfirm() { deleteItemConfirm() {
this.categories.splice(this.editedIndex, 1); this.categories.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.categories[this.editedIndex], this.editedItem); Object.assign(this.categories[this.editedIndex], this.editedItem)
} else { } else {
this.categories.push(this.editedItem); this.categories.push(this.editedItem)
} }
this.close(); this.close()
}, },
getCategories() { getCategories() {
axios this.$axios
.get("http://127.0.0.1:8000/api/categories/") .get("/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)
}); })
}, },
createCategory() { createCategory() {
const set = new Set([this.image]); const set = new Set([this.image])
const image = Array.from(set); const image = Array.from(set)
const self = this; const self = this
axios this.$axios
.post('http://127.0.0.1:8000/api/categories/',{ .post('/categories/',{
name: this.name, name: this.name,
ordering: this.ordering, ordering: this.ordering,
parent_id: this.parent_id, parent_id: this.parent_id,
...@@ -335,35 +335,39 @@ export default { ...@@ -335,35 +335,39 @@ export default {
self.$toast.success('Category created successfully!', { self.$toast.success('Category created successfully!', {
duration: 3000 duration: 3000
}) })
this.editedItem = response.data.data
console.log(this.editedItem)
this.categories.push(this.editedItem)
}) })
.catch(errors => { .catch(errors => {
this.$bvModal.hide('modal-create') this.$bvModal.hide('modal-create')
console.log(errors.response.data.message); console.log(errors.response.data.message)
this.message = errors.response.data.message; this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!',{ self.$toast.error('something went wrong while trying create!',{
duration: 3000 duration: 3000
}); })
}); })
}, },
fileSelected(event){ fileSelected(event){
console.log(event) console.log(event)
const file = event.target.files[0]; const file = event.target.files[0]
this.url = URL.createObjectURL(file); this.url = URL.createObjectURL(file)
this.image = file; this.image = file
console.log(file) console.log(file)
console.log(this.image) console.log(this.image)
}, },
deleteCategory(ID,index) { deleteCategory(ID,index) {
this.editedIndex = this.categories.indexOf(index); const self = this
this.editedIndex = this.categories.indexOf(index)
if(confirm("Do you really want to delete?")){ if(confirm("Do you really want to delete?")){
try{ try{
axios this.$axios
.delete(`http://127.0.0.1:8000/api/categories/${ID}`) .delete(`/categories/${ID}`)
.then(response => { .then(response => {
this.categories.splice(this.editedIndex, 1); this.categories.splice(this.editedIndex, 1)
self.$toast.success('Category deleted successfully!',{ self.$toast.success('Category deleted successfully!',{
duration: 3000 duration: 3000
}); })
}) })
} catch(error){ } catch(error){
console.log(error) console.log(error)
...@@ -374,25 +378,26 @@ export default { ...@@ -374,25 +378,26 @@ export default {
console.log(this.categories.indexOf(item)) console.log(this.categories.indexOf(item))
}, },
editCategory(item) { editCategory(item) {
this.$bvModal.show('modal-edit'); this.$bvModal.show('modal-edit')
this.eID = item.id; this.eID = item.id
this.eName= item.name, this.eName= item.name
this.eOrdering= item.ordering, this.eOrdering= item.ordering
this.eParentId= item.parent_id, this.eParentId= item.parent_id
this.eImage= item.images, this.eImage= item.images
console.log(this?.eID); this.editedIndex = this.categories.indexOf(item)
console.log(item); console.log(this?.eID)
console.log(item)
}, },
updateCategory(userID) { updateCategory(userID) {
const set = new Set([this.eImage]); const set = new Set([this.eImage])
const image = Array.from(set); const image = Array.from(set)
const self = this const self = this
console.log(this.eName); console.log(this.eName)
console.log(this.eOrdering); console.log(this.eOrdering)
console.log(this?.eID); console.log(this?.eID)
try{ try{
axios this.$axios
.post(`http://127.0.0.1:8000/api/categories/update/${this?.eID}`,{ .post(`categories/update/${this?.eID}`,{
name: this.eName, name: this.eName,
ordering: this.eOrdering, ordering: this.eOrdering,
parent_id: this.eParentId, parent_id: this.eParentId,
...@@ -405,8 +410,11 @@ export default { ...@@ -405,8 +410,11 @@ export default {
.then(response => { .then(response => {
self.$toast.success('User updated successfully!',{ self.$toast.success('User updated successfully!',{
duration: 3000 duration: 3000
}); })
console.log(response); console.log(response)
this.editedItem = response.data.data
this.$bvModal.hide('modal-edit')
Object.assign(this.categories[this.editedIndex], this.editedItem)
}) })
} catch(error){ } catch(error){
console.log(error) console.log(error)
......
pages/index.vue → pages/login.vue
View file @ 2f43d5a6
...@@ -115,7 +115,7 @@ export default { ...@@ -115,7 +115,7 @@ export default {
this.$toast.error("Username or Password not valid", { this.$toast.error("Username or Password not valid", {
duration: 2000, duration: 2000,
}); });
this.$router.push("/"); this.$router.push("/login");
} }
}, },
checkForm: function (e) { checkForm: function (e) {
......
pages/home/posts.vue → pages/posts/index.vue
View file @ 2f43d5a6
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
></b-icon> ></b-icon>
Home Home
</b-breadcrumb-item> </b-breadcrumb-item>
<b-breadcrumb-item href="/home/posts">Post</b-breadcrumb-item> <b-breadcrumb-item href="/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> <b-button class="text-white" v-b-modal.modal-create>New Post</b-button>
...@@ -117,7 +117,7 @@ ...@@ -117,7 +117,7 @@
type="text" type="text"
class="form-control mb-2" class="form-control mb-2"
placeholder="Description" placeholder="Description"
v-model="sUserID" v-model="sUserId"
size="sm" size="sm"
disabled disabled
/> />
...@@ -279,7 +279,7 @@ export default { ...@@ -279,7 +279,7 @@ export default {
}, },
{ text: "Category ID", value: "category_id" }, { text: "Category ID", value: "category_id" },
{ text: "content", value: "content", sortable: false }, { text: "content", value: "content", sortable: false },
{ text: "user_id", value: "user_id" }, { text: "author", value: "user_id" },
{ text: "status", value: "status" }, { text: "status", value: "status" },
{ text: "Actions", value: "actions", sortable: false }, { text: "Actions", value: "actions", sortable: false },
], ],
...@@ -301,12 +301,11 @@ export default { ...@@ -301,12 +301,11 @@ export default {
message: [], message: [],
editedIndex: -1, editedIndex: -1,
editedItem: { editedItem: {
name: "", title: "",
id: "", category_id: "",
ordering: "", content: "",
user_id: "",
status: "", status: "",
created_at: "",
updated_at: "",
}, },
defaultItem: { defaultItem: {
name: "", name: "",
...@@ -316,26 +315,26 @@ export default { ...@@ -316,26 +315,26 @@ 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.getposts(), this.getCategories(); this.initialize(), this.getposts(), this.getCategories()
}, },
methods: { methods: {
initialize() { initialize() {
...@@ -350,62 +349,61 @@ export default { ...@@ -350,62 +349,61 @@ export default {
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 this.$axios
.get("http://127.0.0.1:8000/api/categories/") .get("/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() {
axios this.$axios
.get("http://127.0.0.1:8000/api/posts/") .get("/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 this.$axios
.post( .post("/posts/",
"http://127.0.0.1:8000/api/posts/",
{ {
title: this.title, title: this.title,
category_id: this.category_id, category_id: this.category_id,
...@@ -422,78 +420,80 @@ export default { ...@@ -422,78 +420,80 @@ export default {
} }
) )
.then((response) => { .then((response) => {
this.$bvModal.hide("modal-create"); this.$bvModal.hide("modal-create")
self.$toast.success("Post created successfully!", { self.$toast.success("Post created successfully!", {
duration: 3000, duration: 3000,
}); })
this.editedItem = response.data.data
console.log(this.editedItem)
this.posts.push(this.editedItem)
}) })
.catch((errors) => { .catch((errors) => {
this.$bvModal.hide("modal-create"); this.$bvModal.hide("modal-create")
console.log(errors.response.data.message); console.log(errors.response.data.message)
this.message = errors.response.data.message; this.message = errors.response.data.message
self.$toast.error("something went wrong while trying create!", { self.$toast.error("something went wrong while trying create!", {
duration: 3000, 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 this.$axios
.delete(`http://127.0.0.1:8000/api/posts/${ID}`) .delete(`/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 this.$axios.get(`/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) => { })
return response.json(); console.log(resp.data)
}); this.sTitle = resp.data.data.title
this.sTitle = resp.data.title; this.sContent = resp.data.data.content
this.sContent = resp.data.content; this.sCategoryId = resp.data.data.category_id
this.sCategoryId = resp.data.category_id; this.sUserId = resp.data.data.user_id
this.sUserId = resp.data.user_id; this.sStatus = resp.data.data.status
this.sStatus = resp.data.status; this.sImages = resp.data.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.editedIndex = this.posts.indexOf(item)
}, },
updatePost() { updatePost() {
const self = this; const self = this
axios this.$axios
.post( .post(
`http://127.0.0.1:8000/api/posts/update/${this?.eId}`, `/posts/update/${this?.eId}`,
{ {
title: this.eTitle, title: this.eTitle,
category_id: this.eCategoryId, category_id: this.eCategoryId,
...@@ -510,19 +510,22 @@ export default { ...@@ -510,19 +510,22 @@ export default {
} }
) )
.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)
this.editedItem = response.data.data
this.$bvModal.hide('modal-edit')
Object.assign(this.posts[this.editedIndex], this.editedItem)
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error)
this.$bvModal.hide("modal-edit"); this.$bvModal.hide("modal-edit")
self.$toast.error("something went wrong while trying create!", { self.$toast.error("something went wrong while trying create!", {
duration: 3000, duration: 3000,
}); })
}); })
}, },
}, },
}; };
......
pages/home/products.vue → pages/products/index.vue
View file @ 2f43d5a6
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<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/products">Product</b-breadcrumb-item> <b-breadcrumb-item href="/products">Product</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 Product</b-button></div> <b-button class="text-white" v-b-modal.modal-create >New Product</b-button></div>
...@@ -393,11 +393,10 @@ export default { ...@@ -393,11 +393,10 @@ export default {
editedIndex: -1, editedIndex: -1,
editedItem: { editedItem: {
name: "", name: "",
id: "", category_id: "",
ordering: "", price: "",
status: "", description: "",
created_at: "", stock: "",
updated_at: "",
}, },
defaultItem: { defaultItem: {
name: "", name: "",
...@@ -448,7 +447,7 @@ export default { ...@@ -448,7 +447,7 @@ export default {
quantity: "", quantity: "",
}, },
]; ]
}, },
editItem(item) { editItem(item) {
this.editedIndex = this.products.indexOf(item) this.editedIndex = this.products.indexOf(item)
...@@ -456,12 +455,12 @@ export default { ...@@ -456,12 +455,12 @@ export default {
this.dialog = true this.dialog = true
}, },
deleteItem(item) { deleteItem(item) {
this.editedIndex = this.products.indexOf(item); this.editedIndex = this.products.indexOf(item)
this.editedItem = Object.assign({}, item); this.editedItem = Object.assign({}, item)
this.dialogDelete = true; this.dialogDelete = true
}, },
deleteItemConfirm() { deleteItemConfirm() {
this.products.splice(this.editedIndex, 1); this.products.splice(this.editedIndex, 1)
this.closeDelete() this.closeDelete()
}, },
close() { close() {
...@@ -469,45 +468,45 @@ export default { ...@@ -469,45 +468,45 @@ export default {
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.products[this.editedIndex], this.editedItem); Object.assign(this.products[this.editedIndex], this.editedItem)
} else { } else {
this.products.push(this.editedItem); this.products.push(this.editedItem)
} }
this.close() this.close()
}, },
getCategories() { getCategories() {
axios this.$axios
.get("http://127.0.0.1:8000/api/categories/") .get("/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)
}); })
}, },
getProducts() { getProducts() {
axios this.$axios
.get("http://127.0.0.1:8000/api/products/") .get("/products/")
.then((response) => (this.products = response.data.data)) .then((response) => (this.products = response.data.data))
.catch(function (error) { .catch(function (error) {
console.log(error) console.log(error)
}); })
}, },
createProduct() { createProduct() {
const self = this; const self = this
// const set = new Set([this.images]); // const set = new Set([this.images]);
// const images = Array.from(set); // const images = Array.from(set);
axios this.$axios
.post('http://127.0.0.1:8000/api/products/',{ .post('/products/',{
name: this.name, name: this.name,
price: this.price, price: this.price,
category_id: this.category_id, category_id: this.category_id,
...@@ -525,28 +524,31 @@ export default { ...@@ -525,28 +524,31 @@ export default {
self.$toast.success('Product created successfully!', { self.$toast.success('Product created successfully!', {
duration: 3000 duration: 3000
}) })
this.editedItem = response.data.data
console.log(this.editedItem)
this.products.push(this.editedItem)
}) })
.catch(errors => { .catch(errors => {
this.$bvModal.hide('modal-create') this.$bvModal.hide('modal-create')
console.log(errors.response.data.message) console.log(errors.response.data.message)
this.message = errors.response.data.message; this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!',{ self.$toast.error('something went wrong while trying create!',{
duration: 3000 duration: 3000
}) })
}) })
}, },
deleteProduct(ID,index) { deleteProduct(ID,index) {
const self = this; const self = this
this.editedIndex = this.products.indexOf(index); this.editedIndex = this.products.indexOf(index)
if(confirm("Do you really want to delete?")){ if(confirm("Do you really want to delete?")){
try{ try{
axios this.$axios
.delete(`http://127.0.0.1:8000/api/products/${ID}`) .delete(`/products/${ID}`)
.then(response => { .then(response => {
this.products.splice(this.editedIndex, 1); this.products.splice(this.editedIndex, 1)
self.$toast.success('Category deleted successfully!',{ self.$toast.success('Category deleted successfully!',{
duration: 3000 duration: 3000
}); })
}) })
} catch(error){ } catch(error){
console.log(error) console.log(error)
...@@ -556,24 +558,20 @@ export default { ...@@ -556,24 +558,20 @@ export default {
async showProduct(item) { async showProduct(item) {
const ID = item.id const ID = item.id
try { try {
const resp = await fetch(`http://127.0.0.1:8000/api/products/${ID}`, { const resp = await this.$axios.get(`/products/${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) => { })
return response.json() this.sName = resp.data.data.name
}); this.sPrice = resp.data.data.price
this.sName = resp.data.name this.sCategoryId = resp.data.data.category_id
this.sPrice = resp.data.price this.sDescription = resp.data.data.description
this.sCategoryId = resp.data.category_id this.sStock = resp.data.data.stock
this.sDescription = resp.data.description this.sVariants = resp.data.data.variants
this.sStock = resp.data.stock this.sImages = resp.data.data.images
this.sVariants = resp.data.variants
this.sImages = resp.data.images
console.log(this.sVariants)
console.log(this.sImages)
} catch (error) { } catch (error) {
console.log(error) console.log(error)
} }
...@@ -588,12 +586,13 @@ export default { ...@@ -588,12 +586,13 @@ export default {
this.eStock = item.stock this.eStock = item.stock
this.eDescription = item.description this.eDescription = item.description
this.eVariants = item.variants this.eVariants = item.variants
this.editedIndex = this.products.indexOf(item)
}, },
updateProduct(ID) { updateProduct(ID) {
const self = this const self = this
try{ try{
axios this.$axios
.post(`http://127.0.0.1:8000/api/products/update/${this?.eId}`,{ .post(`/products/update/${this?.eId}`,{
name: this.eName, name: this.eName,
price: this.ePrice, price: this.ePrice,
category_id: this.eCategoryId, category_id: this.eCategoryId,
...@@ -609,8 +608,11 @@ export default { ...@@ -609,8 +608,11 @@ export default {
.then(response => { .then(response => {
self.$toast.success('User updated successfully!',{ self.$toast.success('User updated successfully!',{
duration: 3000 duration: 3000
}); })
console.log(response) console.log(response)
this.editedItem = response.data.data
this.$bvModal.hide('modal-edit')
Object.assign(this.products[this.editedIndex], this.editedItem)
}) })
} catch(error){ } catch(error){
console.log(error) console.log(error)
...@@ -621,14 +623,14 @@ export default { ...@@ -621,14 +623,14 @@ export default {
color: "", color: "",
size: "", size: "",
quantity: "", quantity: "",
}); })
}, },
addMoreVariant() { addMoreVariant() {
this.eVariants.push({ this.eVariants.push({
color: "", color: "",
size: "", size: "",
quantity: "", quantity: "",
}); })
}, },
remove(index) { remove(index) {
this.variants.splice(index, 1) this.variants.splice(index, 1)
......
pages/register.vue
View file @ 2f43d5a6
...@@ -31,7 +31,6 @@ ...@@ -31,7 +31,6 @@
v-model="email" v-model="email"
required required
/> />
<label>Password :</label> <label>Password :</label>
<input <input
type="password" type="password"
......
pages/user/index.vue deleted 100644 → 0
View file @ 6ac57a0f
<template>
<div>content</div>
</template>
<script>
export default {
layout: "default",
};
</script>
<style>
</style>
\ No newline at end of file
pages/home/users.vue → pages/users/index.vue
View file @ 2f43d5a6
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
<b-breadcrumb-item href="/home/users">User</b-breadcrumb-item> <b-breadcrumb-item href="/home/users">User</b-breadcrumb-item>
</b-breadcrumb> </b-breadcrumb>
<div style="float: right"> <div style="float: right">
<b-button v-b-modal.modal-login >New User</b-button> <b-button v-b-modal.modal-login class="text-white">New User</b-button>
<!-- modal create user --> <!-- modal create user -->
<b-modal id="modal-login" title="Create User" class="modal fade" > <b-modal id="modal-login" title="Create User" class="modal fade" >
<Notification :message="error" v-if="error" /> <Notification :message="error" v-if="error" />
...@@ -100,23 +100,12 @@ ...@@ -100,23 +100,12 @@
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-dialog v-model="dialog" max-width="500px"> <v-dialog v-model="dialog" max-width="500px">
<template v-slot:activator="{ on, attrs }"> <template v-slot:activator="{ on, attrs }">
<!-- <v-btn
color="primary"
dark
class="mb-2"
v-bind="attrs"
v-on="on"
v-on:click="getUser"
>
New User
</v-btn> -->
<!-- modal create user --> <!-- modal create user -->
</template> </template>
<v-card> <v-card>
<v-card-title> <v-card-title>
<span class="text-h5">{{ formTitle }}</span> <span class="text-h5">{{ formTitle }}</span>
</v-card-title> </v-card-title>
<v-card-text> <v-card-text>
<v-container> <v-container>
<v-row> <v-row>
...@@ -153,7 +142,6 @@ ...@@ -153,7 +142,6 @@
</v-row> </v-row>
</v-container> </v-container>
</v-card-text> </v-card-text>
<v-card-actions> <v-card-actions>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="close"> <v-btn color="blue darken-1" text @click="close">
...@@ -183,7 +171,7 @@ ...@@ -183,7 +171,7 @@
</v-toolbar> </v-toolbar>
</template> </template>
<template v-slot:item.actions="{ item }"> <template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click=" editUser(item);" :id ="item.id"> mdi-pencil </v-icon> <v-icon small class="mr-2" @click=" editUser(item)" :id ="item.id"> mdi-pencil </v-icon>
<v-icon small @click="deleteUser(item.id, item)" :id ="item.id"> mdi-delete </v-icon> <v-icon small @click="deleteUser(item.id, item)" :id ="item.id"> mdi-delete </v-icon>
</template> </template>
<template v-slot:no-data> <template v-slot:no-data>
...@@ -196,7 +184,6 @@ ...@@ -196,7 +184,6 @@
import Nav from "@/components/Nav"; import Nav from "@/components/Nav";
import axios from "axios"; import axios from "axios";
export default { export default {
layout: "admin", layout: "admin",
components: { Nav }, components: { Nav },
...@@ -250,20 +237,20 @@ export default { ...@@ -250,20 +237,20 @@ export default {
}, },
computed: { computed: {
formTitle() { formTitle() {
return this.editedIndex === -1 ? "New Item" : "Edit Item"; return this.editedIndex === -1 ? "New Item" : "Edit Item"
}, },
}, },
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.getUsers(); this.getUsers()
}, },
methods: { methods: {
initialize() { initialize() {
...@@ -271,53 +258,53 @@ export default { ...@@ -271,53 +258,53 @@ export default {
this.editedItem = {} this.editedItem = {}
}, },
editItem(item) { editItem(item) {
this.editedIndex = this.users.indexOf(item); this.editedIndex = this.users.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.users.indexOf(item); this.editedIndex = this.users.indexOf(item)
this.editedItem = Object.assign({}, item); this.editedItem = Object.assign({}, item)
this.dialogDelete = true; this.dialogDelete = true
}, },
deleteItemConfirm() { deleteItemConfirm() {
this.users.splice(this.editedIndex, 1); this.users.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.users[this.editedIndex], this.editedItem); Object.assign(this.users[this.editedIndex], this.editedItem)
} else { } else {
this.users.push(this.editedItem); this.users.push(this.editedItem)
} }
this.close(); this.close()
}, },
getUsers() { getUsers() {
axios this.$axios
.get("http://127.0.0.1:8000/api/users/") .get('/users/')
.then((response) => (this.users = response.data.data.data)) .then((response) => (this.users = response.data.data.data))
.catch(function (error) { .catch(function (error) {
console.log(error); console.log(error)
}); })
}, },
createUser() { createUser() {
const self = this const self = this
axios this.$axios
.post('http://127.0.0.1:8000/api/users/',{ .post('/users/',{
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
...@@ -330,36 +317,34 @@ export default { ...@@ -330,36 +317,34 @@ export default {
this.$bvModal.hide('modal-login') this.$bvModal.hide('modal-login')
self.$toast.success('User created successfully!',{ self.$toast.success('User created successfully!',{
duration: 3000 duration: 3000
}); })
console.log(response) console.log(response)
this.editedItem = response.data.data this.editedItem = response.data.data
console.log(this.editedItem) console.log(this.editedItem)
this.users.push(this.editedItem) this.users.push(this.editedItem)
}) })
.catch(errors => { .catch(errors => {
this.$bvModal.hide('modal-login') this.$bvModal.hide('modal-login')
console.log(errors.response.data.message); console.log(errors.response.data.message)
this.message = errors.response.data.message; this.message = errors.response.data.message
self.$toast.error('something went wrong while trying create!',{ self.$toast.error('something went wrong while trying create!',{
duration: 3000 duration: 3000
}); })
}); })
}, },
deleteUser(userID, index) { deleteUser(userID, index) {
const self = this const self = this
this.editedIndex = this.users.indexOf(index); this.editedIndex = this.users.indexOf(index)
if(confirm("Do you really want to delete?")){ if(confirm("Do you really want to delete?")){
try{ try{
axios this.$axios
.delete(`http://127.0.0.1:8000/api/users/${userID}`) .delete(`/users/${userID}`)
.then(response => { .then(response => {
console.log(response.data) console.log(response.data)
this.users.splice(this.editedIndex, 1); this.users.splice(this.editedIndex, 1)
self.$toast.success('User deleted successfully!',{ self.$toast.success('User deleted successfully!',{
duration: 3000 duration: 3000
}); })
}) })
} catch(error){ } catch(error){
console.log(error) console.log(error)
...@@ -367,29 +352,28 @@ export default { ...@@ -367,29 +352,28 @@ export default {
} }
}, },
editUser(user) { editUser(user) {
this.$bvModal.show('modal-edit'); this.$bvModal.show('modal-edit')
this.eID = user.id; this.eID = user.id
this.eEmail = user.email; this.eEmail = user.email
this.eName = user.name; this.eName = user.name
this.editedIndex = this.users.indexOf(user); this.editedIndex = this.users.indexOf(user)
console.log(this?.eID); console.log(this?.eID)
}, },
updateUser(userID) { updateUser(userID) {
const self = this const self = this
console.log(this.eName); console.log(this.eName)
console.log(this.eEmail); console.log(this.eEmail)
console.log(this?.eID); console.log(this?.eID)
try{ try{
axios this.$axios
.put(`http://127.0.0.1:8000/api/users/${this?.eID}`,{ .put(`/users/${this?.eID}`,{
email: this.eEmail, email: this.eEmail,
password: this.ePassword, password: this.ePassword,
name:this.eName,} ) name:this.eName,} )
.then(response => { .then(response => {
self.$toast.success('User updated successfully!',{ self.$toast.success('User updated successfully!',{
duration: 3000 duration: 3000
}); })
console.log(response) console.log(response)
this.editedItem = response.data.data this.editedItem = response.data.data
this.$bvModal.hide('modal-edit') this.$bvModal.hide('modal-edit')
......
plugins/axios.js
View file @ 2f43d5a6
export default ({ $axios}) => { export default function ({ $axios }, inject) {
$axios.onRequest(config => {
config.headers.common['Content-Type'] = 'multipart/form-data'; const api = $axios.create({
}); headers: {
common: {
Accept: 'application/json, text/plain, */*'
}
}
})
// Set baseURL to something different
api.setBaseURL('http://127.0.0.1:8000/api/')
// Inject to context as $api
inject('api', api)
} }
\ 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