-
{{ msg }}
-
- {{ item.name }}
-
+
+
+ Our products
+
+
+
+
+ by name
+
+
+ keyboard_arrow_up
+
+
+ keyboard_arrow_down
+
+
+
+
+ by price
+
+
+ keyboard_arrow_up
+
+
+ keyboard_arrow_down
+
+
+
+
+ by date
+
+
+ keyboard_arrow_up
+
+
+ keyboard_arrow_down
+
+
+
+
+
+
+
+
+ Create new product
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ item.name }}
+
{{ item.description }}
+
{{ item.price }} $
+
+
+ manage product
+
+
+
+ product info
+
+
+ my product
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -14,13 +116,68 @@ export default {
name: 'AddsList',
data () {
return {
- msg: 'Welcome to AddsList'
+ msg: 'Welcome to ProductList',
+ imagePrefix: process.env.apiUrl + '/uploads/',
+ page: 1,
+ type: 'name',
+ sort: 'asc'
}
},
+
computed: {
+ ...mapState('products', {
+ list: 'addsList',
+ count: 'count'
+ }),
...mapState({
- list: 'addsList'
- })
+ auth: 'isAuth',
+ user: 'user'
+ }),
+ pages: function () {
+ return Math.ceil(this.count / 10)
+ }
+ },
+
+ methods: {
+ sortItems: function () {
+ (this.sort === 'asc') ? (this.sort = 'desc') : (this.sort = 'asc')
+ this.setUrl()
+ this.sendRequest()
+ },
+
+ next: function () {
+ this.setUrl()
+ this.sendRequest()
+ },
+
+ setPage: function () {
+ ((this.$route.query.page === undefined) || isNaN(this.$route.query.page)) ? (this.page = 1) : (this.page = parseInt(this.$route.query.page))
+ },
+ setType: function () {
+ (this.$route.query.type === undefined) ? (this.type = 'name') : (this.name = (this.$route.query.type))
+ },
+ setSort: function () {
+ (this.$route.query.sort === undefined) ? (this.sort = 'asc') : (this.sort = this.$route.query.sort)
+ },
+
+ setUrl: function () {
+ this.$router.push(
+ {name: 'AddsList', query: {page: this.page, type: this.type, sort: this.sort}}
+ )
+ },
+
+ sendRequest: function () {
+ var params = this.$route.fullPath
+ this.$store.dispatch('products/index', params)
+ }
+ },
+
+ created () {
+ this.setPage()
+ this.setType()
+ this.setSort()
+ this.setUrl()
+ this.sendRequest()
}
}
diff --git a/src/components/EditUser.vue b/src/components/EditUser.vue
new file mode 100644
index 0000000..ed1d963
--- /dev/null
+++ b/src/components/EditUser.vue
@@ -0,0 +1,156 @@
+
+
+
+
+
+
+ Edit User
+
+
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+
+
+ UPDATE
+
+ {{addUser}}
+
+
+
+
+
+
+
+
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..cc729fe
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+
+ dashboard
+
+
+ Dashboard
+
+
+
+
+ settings
+
+
+ Settings
+
+
+
+
+
+
+ 
+ YarMarket
+
+ admin mode
+
+
+
+
+ Users control
+
+ Market Menu
+
+ Login
+ Register
+
+
+
+ User login: {{ user.user }}
+
+ Logout
+
+
+
+
+
+
diff --git a/src/components/Login.vue b/src/components/Login.vue
index fa702f2..094dfe9 100644
--- a/src/components/Login.vue
+++ b/src/components/Login.vue
@@ -1,38 +1,95 @@
-
-
Login page
-
{{ login }}
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/Register.vue b/src/components/Register.vue
index 30fa6bf..c39f97d 100644
--- a/src/components/Register.vue
+++ b/src/components/Register.vue
@@ -1,14 +1,132 @@
-
-
Registration page
-
+
+
+
+
+
+ Register
+
+
+
+
+
+
+
+
+
+
+
+ Cancel
+
+
+
+
+ REGISTER
+
+
+
+
+
+
diff --git a/src/components/UsersList.vue b/src/components/UsersList.vue
new file mode 100644
index 0000000..b16bf20
--- /dev/null
+++ b/src/components/UsersList.vue
@@ -0,0 +1,70 @@
+
+
+
+ Users List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ item.login }}
+
{{ item.phone }}
+
{{ item.email }} $
+
{{ item.role }} $
+
+
+ edit user
+
+
+
+
+
+
diff --git a/src/main.js b/src/main.js
index 798df5f..053d75d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,12 +1,17 @@
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
+import Vuetify from 'vuetify'
+import VueImg from 'v-img'
import App from './App'
import router from './router'
import store from '@/store'
+import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
Vue.config.productionTip = false
+Vue.use(Vuetify)
+Vue.use(VueImg)
/* eslint-disable no-new */
new Vue({
diff --git a/src/router/index.js b/src/router/index.js
index c35cf7b..b413878 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,10 @@ import Login from '@/components/Login'
import Register from '@/components/Register'
import SingleAdd from '@/components/SingleAdd'
import AddForm from '@/components/AddForm'
+import AddItem from '@/components/AddItem'
import Page404 from '@/components/Page404'
+import UsersList from '@/components/UsersList'
+import EditUser from '@/components/EditUser'
Vue.use(Router)
@@ -27,19 +30,34 @@ export default new Router({
component: Register
},
{
- path: '/add:id(\\d+)',
+ path: '/products/:id(\\d+)/preview',
name: 'SingleAdd',
component: SingleAdd
},
{
- path: '/:id(\\d+)',
+ path: '/products/:id(\\d+|new)',
name: 'AddForm',
component: AddForm
},
{
- path: '*',
+ path: '/products/:id(\\d+)',
+ name: 'AddItem',
+ component: AddItem
+ },
+ {
+ path: 'Page404',
name: 'Page404',
component: Page404
+ },
+ {
+ path: '/users',
+ name: 'UsersList',
+ component: UsersList
+ },
+ {
+ path: '/users/:id(\\d+)',
+ name: 'EditUser',
+ component: EditUser
}
],
mode: 'history'
diff --git a/src/store/api.js b/src/store/api.js
new file mode 100644
index 0000000..9ff7d4a
--- /dev/null
+++ b/src/store/api.js
@@ -0,0 +1,21 @@
+export default {
+ /* POST /login */
+ login: process.env.apiUrl + '/login',
+ /* GET /logout */
+ logout: process.env.apiUrl + '/logout',
+ /* POST /register */
+ register: process.env.apiUrl + '/register',
+ /* GET /products (getting product list) */
+ productsSort: (path) => (process.env.apiUrl + '/products' + path),
+ /* POST /products (creating product) */
+ products: process.env.apiUrl + '/products',
+ /* GET /products/:id (show product) */
+ /* PUT /products/:id (updating product) */
+ /* DELETE /products/:id (deleting product) */
+ product: (productId) => (process.env.apiUrl + '/products/#{id}').replace('#{id}', productId),
+
+ /* GET /users (getting users list from index page) */
+ users: process.env.apiUrl + '/users',
+ /* GET /users/:id (getting user from show page) */
+ user: (userId) => (process.env.apiUrl + '/users/#{id}').replace('#{id}', userId)
+}
diff --git a/src/store/index.js b/src/store/index.js
index a6a52a0..e182f6f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,57 +1,80 @@
import Vue from 'vue'
import Vuex from 'vuex'
+import axios from 'axios'
+
+import API from './api'
+import products from './products'
+import users from './users'
Vue.use(Vuex)
const Store = new Vuex.Store({
state: {
- addsList: [
- {
- id: '1',
- name: 'test1'
- },
- {
- id: '2',
- name: 'test2'
- },
- {
- id: '3',
- name: 'test3'
- }
- ],
- addItem: {}
+ user: {
+ id: localStorage.id ? localStorage.id : '',
+ user: localStorage.user ? localStorage.user : '',
+ token: localStorage.token ? localStorage.token : '',
+ role: localStorage.role ? localStorage.role : ''
+ },
+ isAuth: !!localStorage.isAuth
+ },
+ modules: {
+ products,
+ users
},
mutations: {
- updateAddsList (state, data) {
- state.addsList = data
+ updateAuth (state, data) {
+ localStorage.isAuth = data
+ state.isAuth = data
},
- updateAddItem (state, data) {
- state.addItem = data
+ updateUser (state, data) {
+ localStorage.id = data.id
+ localStorage.user = data.login
+ localStorage.token = data.token
+ localStorage.role = data.role
+ state.user = {
+ id: data.id,
+ user: data.login,
+ token: data.token,
+ role: data.role
+ }
}
},
+
actions: {
- setList (context, params) {
- context.commit('updateAddsList', params.data)
+ login (context, params) {
+ return axios.post(API.login, params)
+ .then(response => {
+ context.commit('updateUser', response.data)
+ context.commit('updateAuth', true)
+ })
},
- loadById (context, params) {
- context.state.addsList.forEach(item => {
- if (item.id === params.id) {
- let editedItem = {}
- Object.assign(editedItem, item)
- context.commit('updateAddItem', editedItem)
- }
- })
+ register (context, params) {
+ return axios.post(API.register, params)
+ .then(response => {
+ context.commit('updateUser', response.data)
+ context.commit('updateAuth', true)
+ })
},
- save (context, params) {
- context.state.addsList.forEach(item => {
- if (item.id === params.item.id) {
- item.name = params.item.name
- }
- })
-
- context.commit('updateAddsList', context.state.addsList)
+ logout (context) {
+ return axios.get(API.logout, '')
+ .then(response => {
+ context.commit('updateUser', {id: '', login: '', token: '', role: ''})
+ context.commit('updateAuth', false)
+ localStorage.clear()
+ })
}
}
})
+// Add a request interceptor
+axios.interceptors.request.use(function (config) {
+ // Do something before request is sent
+ config.headers.common['X-Auth'] = localStorage.token
+ return config
+}, function (error) {
+ // Do something with request error
+ return Promise.reject(error)
+})
+
export default Store
diff --git a/src/store/products.js b/src/store/products.js
new file mode 100644
index 0000000..aa7609d
--- /dev/null
+++ b/src/store/products.js
@@ -0,0 +1,66 @@
+import axios from 'axios'
+import API from './api'
+
+export default {
+ namespaced: true,
+ state: {
+ addsList: [],
+ addItem: {},
+ user: {},
+ token: {},
+ isAuth: !!localStorage.isAuth,
+ image: {},
+ count: ''
+ },
+
+ mutations: {
+ updateAddsList (state, data) {
+ state.addsList = data.products
+ state.count = data.count.value
+ },
+ updateAddItem (state, data) {
+ state.addItem = data
+ if (data.path == null) {
+ state.addItem.imageUrl = null
+ } else {
+ state.addItem.imageUrl = process.env.apiUrl + '/uploads/' + data.path
+ }
+ }
+ },
+
+ actions: {
+ setList (context, params) {
+ context.commit('updateAddsList', params.data)
+ },
+ index (context, params) {
+ return axios.get(API.productsSort(params), '')
+ .then(response => {
+ context.commit('updateAddsList', response.data)
+ })
+ },
+ show (context, params) {
+ if (params.id === 'new') {
+ context.commit('updateAddItem', {id: '', name: '', description: '', price: '', image: ''})
+ } else {
+ return axios.get(API.product(params.id), '')
+ .then(response => {
+ let editedItem = {}
+ Object.assign(editedItem, response.data)
+ context.commit('updateAddItem', editedItem)
+ })
+ }
+ },
+ create (context, params) {
+ return axios.post(API.products, params)
+ .then(response => {
+ context.commit('updateAddItem', response.data)
+ })
+ },
+ update (context, params) {
+ return axios.put(API.product(params.id), params)
+ },
+ delete (context, params) {
+ return axios.delete(API.product(params.id), '')
+ }
+ }
+}
diff --git a/src/store/users.js b/src/store/users.js
new file mode 100644
index 0000000..4b6133e
--- /dev/null
+++ b/src/store/users.js
@@ -0,0 +1,92 @@
+import axios from 'axios'
+import API from './api'
+
+export default {
+ namespaced: true,
+ state: {
+ usersList: {},
+ addUser: {}
+ },
+
+ mutations: {
+ updateUsersList (state, data) {
+ state.usersList = data
+ },
+ updateUser (state, data) {
+ state.addUser = data
+ }
+ },
+
+ actions: {
+ index (context, params) {
+ return axios.get(API.users, '')
+ .then(response => {
+ context.commit('updateUsersList', response.data)
+ })
+ },
+ show (context, params) {
+ return axios.get(API.user(params.id), '')
+ .then(response => {
+ let editedUser = {}
+ Object.assign(editedUser, response.data)
+ context.commit('updateUser', editedUser)
+ })
+ },
+ update (context, params) {
+ return axios.put(API.user(params.id), params)
+ }
+ }
+
+ /*,
+
+ mutations: {
+ updateUsersList (state, data) {
+ state.addsList = data.products
+ state.count = data.count.value
+ },
+ updateAddItem (state, data) {
+ state.addItem = data
+ if (data.path == null) {
+ state.addItem.imageUrl = null
+ } else {
+ state.addItem.imageUrl = process.env.apiUrl + '/uploads/' + data.path
+ }
+ }
+ },
+
+ actions: {
+ setList (context, params) {
+ context.commit('updateAddsList', params.data)
+ },
+ index (context, params) {
+ return axios.get(API.productsSort(params), '')
+ .then(response => {
+ context.commit('updateAddsList', response.data)
+ })
+ },
+ show (context, params) {
+ if (params.id === 'new') {
+ context.commit('updateAddItem', {id: '', name: '', description: '', price: '', image: ''})
+ } else {
+ return axios.get(API.product(params.id), '')
+ .then(response => {
+ let editedItem = {}
+ Object.assign(editedItem, response.data)
+ context.commit('updateAddItem', editedItem)
+ })
+ }
+ },
+ create (context, params) {
+ return axios.post(API.products, params)
+ .then(response => {
+ context.commit('updateAddItem', response.data)
+ })
+ },
+ update (context, params) {
+ return axios.put(API.product(params.id), params)
+ },
+ delete (context, params) {
+ return axios.delete(API.product(params.id), '')
+ }
+ } */
+}