├── .env ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.vue ├── assets ├── css │ ├── 1_custom.css │ └── _custom.css ├── img │ ├── AdminLTELogo.png │ ├── avatar.png │ ├── avatar2.png │ ├── avatar3.png │ ├── avatar4.png │ ├── avatar5.png │ ├── boxed-bg.jpg │ ├── boxed-bg.png │ ├── credit │ │ ├── american-express.png │ │ ├── cirrus.png │ │ ├── mastercard.png │ │ ├── paypal.png │ │ ├── paypal2.png │ │ └── visa.png │ ├── default-150x150.png │ ├── icons.png │ ├── photo1.png │ ├── photo2.png │ ├── photo3.jpg │ ├── photo4.jpg │ ├── prod-1.jpg │ ├── prod-2.jpg │ ├── prod-3.jpg │ ├── prod-4.jpg │ ├── prod-5.jpg │ ├── user1-128x128.jpg │ ├── user2-160x160.jpg │ ├── user3-128x128.jpg │ ├── user4-128x128.jpg │ ├── user5-128x128.jpg │ ├── user6-128x128.jpg │ ├── user7-128x128.jpg │ ├── user8-128x128.jpg │ └── yo.jpg └── logo.png ├── components └── HelloWorld.vue ├── config ├── axios-refreshtoken.js ├── axios.js ├── index.js ├── services.js ├── validator.js └── vee-validate.js ├── main.js ├── router └── index.js ├── store ├── index.js ├── mAuths │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ └── state.js ├── mRoles │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ └── state.js └── mUsers │ ├── actions.js │ ├── getters.js │ ├── index.js │ ├── mutations.js │ └── state.js └── views ├── About.vue ├── auths ├── Login.vue └── Profile.vue ├── layout ├── Container.vue ├── ContentHeader.vue ├── ControlSidebar.vue ├── Footer.vue ├── Navbar.vue ├── Preloader.vue └── Sidebar.vue └── users ├── TheUsers.vue └── User.vue /.env: -------------------------------------------------------------------------------- 1 | VUE_APP_API_URL=https://start-laravelapi.herokuapp.com/api/v1 2 | 3 | //VUE_APP_IMAGE_URL=http://192.168.40.98/login/start-laravel/public/storage/ -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

Start-Basic

4 | 5 | ## Sobre el Proyecto 6 | 7 | Proyecto Start-Basic sobre Login y crud de usuarios, mediante Api Rest, usando la plantilla AdminLte 3.1, Vue 2 y manejo de roles y permisos con vue-gates y autenticacion por token. en el que se aplicaron las siguientes tecnologias: 8 | 9 | - Laravel 9 Api Rest, aplicando la arquitectura ADR (Action - Domain - Response), Principios Solid, Clean Code. 10 | - Gestor de Base Datos - MySql 11 | - Html + Css + JavaScript + Bootstrap. 12 | - Vue2 + Vuex + Vue-Router + Bootstrap-Vue + Axios => SPA. 13 | 14 | Para descargar e instalar el Api-Rest de click en el siguiente link - 15 | [https://github.com/paulgr30/start-laravel](https://github.com/paulgr30/start-laravel) 16 | 17 | ## Sobre el Autor 18 | 19 | [Paul Garcia Rojas](https://www.facebook.com/paulgarcia27) 20 | Analista Programador 21 | 22 | Soy Analista Programador de Sistemas, con el manejo de Back-End 75% y Front-End 65% en las siguientes tecnologías:. 23 | 24 | - PHP/Laravel - Servicios API Rest. 25 | - Vue2 + Vuex + Vue-Router + Bootstrap-Vue + Axios => SPA. 26 | - Html + Css + JavaScript + Bootstrap. 27 | - SqlServer - Mysql - PostGreSql. 28 | - GitHub - Clean Code - Principios Solid - Arquitecturas ADR - MVC. 29 | 30 | Puedes encontrarme en facebook [paulgarcia27](https://www.facebook.com/paulgarcia27) y en linkedin como [paul-garcia-rojas](https://www.linkedin.com/in/paul-garcia-rojas) o escribirme directamtente a mi [whatsApp](https://bit.ly/2UFDtM7) para cualquier desarrollo o asesoria. -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "login-vue", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build" 8 | }, 9 | "dependencies": { 10 | "@fortawesome/fontawesome-svg-core": "^1.2.36", 11 | "@fortawesome/free-brands-svg-icons": "^5.15.4", 12 | "@fortawesome/free-regular-svg-icons": "^5.15.4", 13 | "@fortawesome/free-solid-svg-icons": "^5.15.4", 14 | "admin-lte": "3.1", 15 | "axios": "^0.27.2", 16 | "bootstrap": "4.6", 17 | "bootstrap-vue": "^2.22.0", 18 | "core-js": "^3.6.5", 19 | "sweetalert2": "^11.4.14", 20 | "vee-validate": "^3.4.14", 21 | "vue": "^2.6.14", 22 | "vue-gates": "^2.1.2", 23 | "vue-router": "^3.2.0", 24 | "vuex": "^3.4.0", 25 | "vuex-persistedstate": "^4.1.0" 26 | }, 27 | "devDependencies": { 28 | "@vue/cli-plugin-babel": "~4.5.15", 29 | "@vue/cli-plugin-router": "~4.5.15", 30 | "@vue/cli-plugin-vuex": "~4.5.15", 31 | "@vue/cli-service": "~4.5.15", 32 | "vue-template-compiler": "^2.6.11" 33 | }, 34 | "browserslist": [ 35 | "> 1%", 36 | "last 2 versions", 37 | "not dead" 38 | ] 39 | } 40 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/css/1_custom.css: -------------------------------------------------------------------------------- 1 | /* Here you can add other styles */ 2 | body { 3 | --ck-z-default: 290; 4 | --ck-z-modal : calc(var(--ck-z-default) + 999); 5 | } 6 | 7 | /*:root { 8 | --ck-z-default: 100; 9 | --ck-z-modal : calc(var(--ck-z-default) + 999); 10 | }*/ 11 | 12 | .ck-content .table { 13 | width: auto; 14 | margin-left: 4px; 15 | padding-right: 10px; 16 | } 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | .fs-1 { 25 | font-size: 1.700rem; 26 | } 27 | 28 | .fs-2 { 29 | font-size: 1.350rem; 30 | } 31 | 32 | .fs-3 { 33 | font-size: 1.125rem; 34 | } 35 | 36 | .fs-4 { 37 | font-size: 1rem; 38 | } 39 | 40 | .fs-5 { 41 | font-size: 0.875rem; 42 | } 43 | 44 | .fs-6 { 45 | font-size: 0.575rem; 46 | } 47 | 48 | 49 | 50 | 51 | 52 | .object-cover { 53 | object-fit : cover !important; 54 | object-position: center !important; 55 | width : 100%; 56 | height : 100%; 57 | } 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | .c-sidebar a:hover { 68 | background-color: rgba(rgb(197, 184, 184), .3) !important; 69 | } 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | .card { 81 | position: relative; 82 | display: -webkit-box; 83 | display: -ms-flexbox; 84 | display: flex; 85 | -webkit-box-orient: vertical; 86 | -webkit-box-direction: normal; 87 | -ms-flex-direction: column; 88 | flex-direction: column; 89 | min-width: 0; 90 | margin-bottom: 1.5rem; 91 | word-wrap: break-word; 92 | background-clip: border-box; 93 | border: 1px solid; 94 | border-radius: 0.25rem !important; 95 | background-color: #fff; 96 | border-color: #d8dbe0; 97 | } 98 | 99 | 100 | 101 | 102 | .alert-danger { 103 | color: #000; 104 | background-color: #e093a0 !important; 105 | border-color: #e093a0; 106 | } 107 | 108 | 109 | .table { 110 | font-family: inherit !important; 111 | font-weight: 600; 112 | color : #888 !important; 113 | } 114 | .table td, 115 | th { 116 | vertical-align: middle !important; 117 | } 118 | .table th { 119 | font-size: 14px; 120 | color : #000; 121 | } 122 | .table td { 123 | font-size: 13px; 124 | } 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | .modal-header { 134 | /*padding-left : 15px !important;*/ 135 | padding-top : 8px; 136 | padding-bottom: 8px; 137 | } 138 | .modal-title { 139 | font-size : 15px; 140 | width : 98% !important; 141 | } 142 | .modal-body::-webkit-scrollbar { 143 | width: 7px; 144 | } 145 | .modal-body::-webkit-scrollbar-thumb { 146 | background : #acb0b9; 147 | border-radius: 1px; 148 | } 149 | 150 | 151 | 152 | 153 | .form-group { 154 | margin-bottom: 8px !important; 155 | } 156 | .form-group > .col-form-label { 157 | margin-bottom: -2px !important; 158 | font-size : 12.5px; 159 | font-weight : 470; 160 | color : #007bff; 161 | } -------------------------------------------------------------------------------- /src/assets/css/_custom.css: -------------------------------------------------------------------------------- 1 | .fs-1 { 2 | font-size: 1.700rem; 3 | } 4 | 5 | .fs-2 { 6 | font-size: 1.350rem; 7 | } 8 | 9 | .fs-3 { 10 | font-size: 1.125rem; 11 | } 12 | 13 | .fs-4 { 14 | font-size: 1rem; 15 | } 16 | 17 | .fs-5 { 18 | font-size: 0.875rem; 19 | } 20 | 21 | .fs-6 { 22 | font-size: 0.575rem; 23 | } 24 | 25 | 26 | 27 | 28 | 29 | .object-cover { 30 | object-fit : cover !important; 31 | object-position: center !important; 32 | width : 100%; 33 | height : 100%; 34 | } 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | .c-sidebar a:hover { 45 | background-color: rgba(rgb(197, 184, 184), .3) !important; 46 | } 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | .table { 55 | /*background-color: #ffffff !important;*/ 56 | font-family: inherit !important; 57 | font-weight: 600 !important; 58 | color : #888 !important; 59 | } 60 | .table td, 61 | th { 62 | vertical-align: middle !important; 63 | } 64 | .table th { 65 | font-size: 13px; 66 | color : #000; 67 | } 68 | .table td { 69 | font-size: 13px; 70 | } 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | .modal-header { 80 | /*padding-left : 15px !important;*/ 81 | padding-top : 8px !important; 82 | padding-bottom: 8px !important; 83 | } 84 | .modal-footer { 85 | padding-top : 8px !important; 86 | padding-bottom: 8px !important; 87 | } 88 | .modal-title { 89 | font-size : 15px; 90 | } 91 | .modal-body::-webkit-scrollbar { 92 | width: 7px; 93 | } 94 | .modal-body::-webkit-scrollbar-thumb { 95 | background : #acb0b9; 96 | border-radius: 1px; 97 | } 98 | 99 | 100 | 101 | 102 | .form-group { 103 | margin-bottom: 8px !important; 104 | } 105 | .form-group > .col-form-label { 106 | margin-bottom: -2px !important; 107 | font-size : 13.5px; 108 | font-weight : 470; 109 | color : #007bff; 110 | } -------------------------------------------------------------------------------- /src/assets/img/AdminLTELogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/AdminLTELogo.png -------------------------------------------------------------------------------- /src/assets/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/avatar.png -------------------------------------------------------------------------------- /src/assets/img/avatar2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/avatar2.png -------------------------------------------------------------------------------- /src/assets/img/avatar3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/avatar3.png -------------------------------------------------------------------------------- /src/assets/img/avatar4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/avatar4.png -------------------------------------------------------------------------------- /src/assets/img/avatar5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/avatar5.png -------------------------------------------------------------------------------- /src/assets/img/boxed-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/boxed-bg.jpg -------------------------------------------------------------------------------- /src/assets/img/boxed-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/boxed-bg.png -------------------------------------------------------------------------------- /src/assets/img/credit/american-express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/credit/american-express.png -------------------------------------------------------------------------------- /src/assets/img/credit/cirrus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/credit/cirrus.png -------------------------------------------------------------------------------- /src/assets/img/credit/mastercard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/credit/mastercard.png -------------------------------------------------------------------------------- /src/assets/img/credit/paypal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/credit/paypal.png -------------------------------------------------------------------------------- /src/assets/img/credit/paypal2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/credit/paypal2.png -------------------------------------------------------------------------------- /src/assets/img/credit/visa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/credit/visa.png -------------------------------------------------------------------------------- /src/assets/img/default-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/default-150x150.png -------------------------------------------------------------------------------- /src/assets/img/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/icons.png -------------------------------------------------------------------------------- /src/assets/img/photo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/photo1.png -------------------------------------------------------------------------------- /src/assets/img/photo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/photo2.png -------------------------------------------------------------------------------- /src/assets/img/photo3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/photo3.jpg -------------------------------------------------------------------------------- /src/assets/img/photo4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/photo4.jpg -------------------------------------------------------------------------------- /src/assets/img/prod-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/prod-1.jpg -------------------------------------------------------------------------------- /src/assets/img/prod-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/prod-2.jpg -------------------------------------------------------------------------------- /src/assets/img/prod-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/prod-3.jpg -------------------------------------------------------------------------------- /src/assets/img/prod-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/prod-4.jpg -------------------------------------------------------------------------------- /src/assets/img/prod-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/prod-5.jpg -------------------------------------------------------------------------------- /src/assets/img/user1-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/user1-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user2-160x160.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/user2-160x160.jpg -------------------------------------------------------------------------------- /src/assets/img/user3-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/user3-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user4-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/user4-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user5-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/user5-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user6-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/user6-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user7-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/user7-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/user8-128x128.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/user8-128x128.jpg -------------------------------------------------------------------------------- /src/assets/img/yo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/img/yo.jpg -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paulgr30/start-vue2/582c29cbc204881eadf2525b7c957525a43afa8c/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 42 | 43 | 44 | 60 | -------------------------------------------------------------------------------- /src/config/axios-refreshtoken.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | import Vue from "vue"; 3 | import axios from "axios"; 4 | 5 | // configuración de axios 6 | axios.defaults.baseURL = process.env.VUE_APP_API_URL; 7 | // interceptor de solicitud http (Enviar Peticion) 8 | axios.interceptors.request.use( 9 | (config) => { 10 | config.headers.common["X-Requested-With"] = "XMLHttpRequest"; 11 | config.headers.common["Content-Type"] = "multipart/form-data"; //"application/json"; 12 | config.headers.common["Acept"] = "application/json"; 13 | config.headers.common["authorization"] = `Bearer ${Vue.store.state.mAuths.token}`; 14 | 15 | return config; 16 | }, 17 | (error) => { 18 | return Promise.reject(error); 19 | } 20 | ); 21 | 22 | // interceptor de respuesta http 23 | axios.interceptors.response.use( 24 | (response) => response, 25 | async (error) => { 26 | console.log(error.response); 27 | if (error.response) { 28 | const originalRequest = error.config; 29 | console.log(originalRequest.url); 30 | if ( 31 | error.response.status === 401 && 32 | originalRequest.url === "auth/refresh-token" 33 | ) { 34 | Vue.store.dispatch("mAuths/setToken", null); 35 | Vue.store.dispatch("mAuths/setAuthenticated", false); 36 | Vue.store.dispatch("mAuths/setAuth", {}); 37 | 38 | Vue.router.push({ name: "login" }); 39 | return Promise.reject(error); 40 | } 41 | 42 | 43 | if (error.response.status === 401 && !originalRequest._retry) { 44 | originalRequest._retry = true; 45 | console.log("refrescamos el token..."); 46 | await Vue.store.dispatch("mAuths/refreshToken"); 47 | axios.defaults.headers.common[ 48 | "authorization" 49 | ] = `Bearer ${Vue.store.state.mAuths.token}`; 50 | 51 | console.log(Vue.store.state.mAuths.token); 52 | originalRequest.headers.authorization = `Bearer ${Vue.store.state.mAuths.token}`; 53 | 54 | return await axios(originalRequest); 55 | } /* else { 56 | Vue.store.dispatch("mAuths/setToken", null); 57 | Vue.store.dispatch("mAuths/setAuthenticated", false); 58 | Vue.store.dispatch("mAuths/setAuth", {}); 59 | 60 | Vue.router.push({ name: "login" }).catch(() => {}); 61 | }*/ 62 | } 63 | return Promise.reject(error); 64 | } 65 | ); 66 | 67 | Vue.axios = axios; 68 | Vue.prototype.$axios = axios; 69 | export default axios; 70 | -------------------------------------------------------------------------------- /src/config/axios.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | import Vue from "vue"; 3 | //import router from "../router"; 4 | import axios from "axios"; 5 | 6 | 7 | // configuración de axios 8 | axios.defaults.baseURL = process.env.VUE_APP_API_URL; 9 | // interceptor de solicitud http 10 | axios.interceptors.request.use( 11 | (config) => { 12 | config.headers.common["X-Requested-With"] = "XMLHttpRequest"; 13 | config.headers.common["Content-Type"] = "multipart/form-data"; //"application/json"; 14 | config.headers.common["Acept"] = "application/json"; 15 | config.headers.common[ 16 | "authorization" 17 | ] = `Bearer ${Vue.store.state.mAuths.token}`; 18 | 19 | return config; 20 | }, 21 | (error) => { 22 | return Promise.reject(error); 23 | } 24 | ); 25 | 26 | // interceptor de respuesta http 27 | axios.interceptors.response.use( 28 | (response) => response, 29 | (error) => { 30 | if (error.response) { 31 | if (error.response.status == 401) { 32 | Vue.store.dispatch("mAuths/setToken", null); 33 | Vue.store.dispatch("mAuths/setAuthenticated", false); 34 | Vue.store.dispatch("mAuths/setAuth", {}); 35 | 36 | Vue.router.push({ name: "login" }).catch(() => {}); 37 | } 38 | } 39 | return Promise.reject(error); 40 | } 41 | ); 42 | 43 | Vue.axios = axios; 44 | Vue.prototype.$axios = axios; 45 | export default axios; 46 | -------------------------------------------------------------------------------- /src/config/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import "./axios"; 3 | import "./services"; 4 | import "./validator"; 5 | //import VueGates from "vue-gates"; 6 | import "../assets/css/_custom.css"; 7 | 8 | 9 | 10 | // import fortawesome 11 | import { dom, library } from "@fortawesome/fontawesome-svg-core"; 12 | import { fas } from "@fortawesome/free-solid-svg-icons"; 13 | import { fab } from "@fortawesome/free-brands-svg-icons"; 14 | import { far } from "@fortawesome/free-regular-svg-icons"; 15 | import { faLock, faEnvelope } from "@fortawesome/free-solid-svg-icons"; 16 | import { faFacebook, faGooglePlus } from "@fortawesome/free-brands-svg-icons"; 17 | 18 | //import adminlte scripts 19 | import "admin-lte/dist/js/adminlte.min.js"; 20 | //import "../node_modules/admin-lte/plugins/select2/js/select2.full.min.js"; 21 | import "admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js"; 22 | //import "../node_modules/admin-lte/plugins/jquery/jquery.min.js"; 23 | //import adminlte styles 24 | import "admin-lte/dist/css/adminlte.min.css"; 25 | 26 | // Import Bootstrap - BootstrapVue 27 | import { BootstrapVue, IconsPlugin } from "bootstrap-vue"; 28 | import "bootstrap/dist/css/bootstrap.css"; 29 | import "bootstrap-vue/dist/bootstrap-vue.css"; 30 | 31 | 32 | 33 | 34 | 35 | library.add(fas, fab, far, faLock, faEnvelope, faFacebook, faGooglePlus); 36 | dom.watch(); 37 | 38 | Vue.use(BootstrapVue); 39 | Vue.use(IconsPlugin); 40 | 41 | 42 | import VueGates from "vue-gates"; 43 | Vue.use(VueGates, { 44 | persistent: true, 45 | }); 46 | 47 | 48 | //import "vue-select/dist/vue-select.css"; -------------------------------------------------------------------------------- /src/config/services.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import swal from 'sweetalert2' 3 | 4 | const services = { 5 | toastSuccess: function ( 6 | _this, 7 | title = "Sistema", 8 | message = "Operación realizada con éxito", 9 | ) { 10 | _this.$bvToast.toast(message, { 11 | title: title, 12 | toaster: "b-toaster-top-right", 13 | variant: "success", 14 | solid: true, 15 | autoHideDelay: 2500, 16 | appendToast: false, 17 | }); 18 | }, 19 | toastWarning: function (_this, title, message) { 20 | _this.$bvToast.toast(message, { 21 | title: title, 22 | toaster: "b-toaster-top-left", 23 | variant: "warning", 24 | solid: true, 25 | autoHideDelay: 2500, 26 | appendToast: false, 27 | }); 28 | }, 29 | toastDanger: function (_this, title, message) { 30 | _this.$bvToast.toast(message, { 31 | title: title, 32 | toaster: "b-toaster-top-left", 33 | variant: "danger", 34 | solid: true, 35 | autoHideDelay: 3000, 36 | appendToast: false, 37 | }); 38 | }, 39 | 40 | 41 | 42 | swalConfirmDelete() { 43 | const swalWithBootstrapButtons = swal.mixin({ 44 | customClass: { 45 | confirmButton: "btn btn-info ml-3", 46 | cancelButton: "btn btn-danger", 47 | }, 48 | buttonsStyling: false, 49 | }); 50 | 51 | return swalWithBootstrapButtons.fire({ 52 | title: "Esta seguro?", 53 | text: "¡Ya no se podrá revertir!", 54 | icon: "warning", 55 | showCancelButton: true, 56 | confirmButtonText: "Si, eliminar!", 57 | cancelButtonText: "No, cancelar!", 58 | reverseButtons: true, 59 | }); 60 | }, 61 | swalDanger(title, message) { 62 | swal.fire({ 63 | title: title, 64 | text: message, 65 | icon: "error", 66 | confirmButtonText: "Aceptar", 67 | }); 68 | }, 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | generatePdf(url) { 77 | return axios.get(url, { 78 | method: "get", 79 | responseType: "blob", 80 | }); 81 | }, 82 | 83 | upperCase: function (value) { 84 | if (!value) return ""; 85 | value = value.toString(); 86 | return value.toUpperCase(); 87 | }, 88 | 89 | getIndexByKey(obj, key, value) { 90 | for (var i = 0; i < obj.length; i++) { 91 | let object = obj[i]; 92 | if (key in object && object[key] === value) return i; 93 | } 94 | return -1; 95 | }, 96 | 97 | getItemByKey(obj, column, value) { 98 | for (var i = 0; i < obj.length; i++) { 99 | var object = obj[i]; 100 | if (column in object && object[column] === value) { 101 | return object; 102 | } 103 | } 104 | return null; 105 | }, 106 | 107 | getFilteredByKey(array, key, value) { 108 | return array.filter(function (e) { 109 | return e[key] == value ? e[key] : null; 110 | }); 111 | }, 112 | 113 | itemExists(obj, key, value) { 114 | let item = this.getItemByKey(obj, key, value); 115 | return item ? true : false; 116 | }, 117 | 118 | getArrayByKey(arr, key) { 119 | return arr.map(item => item[key]); 120 | }, 121 | 122 | convertFromStringToDate(responseDate) { 123 | let datePieces = responseDate.split("/"); 124 | return datePieces[0] + "-" + datePieces[1] + "-" + datePieces[2]; 125 | }, 126 | 127 | isObject(obj) { 128 | return typeof obj === "object"; 129 | }, 130 | 131 | isObjEmpty(obj) { 132 | if (this.isObject(obj)) { 133 | return Object.keys(obj).length === 0; 134 | } 135 | return true; 136 | }, 137 | 138 | isKeyExists(obj, key) { 139 | //try { 140 | return obj.hasOwnProperty("id"); 141 | /*} catch (error) { 142 | if (error == undefined) { 143 | return false; 144 | } 145 | console.log(error); 146 | }*/ 147 | }, 148 | }; 149 | 150 | 151 | 152 | 153 | Vue.services = services; 154 | Vue.prototype.$services = services; -------------------------------------------------------------------------------- /src/config/validator.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import { ValidationProvider, ValidationObserver } from "vee-validate"; 3 | Vue.component("ValidationProvider", ValidationProvider); 4 | Vue.component("ValidationObserver", ValidationObserver); 5 | 6 | import { extend } from "vee-validate"; 7 | import * as rules from "vee-validate/dist/rules"; 8 | import { messages } from "vee-validate/dist/locale/es.json"; 9 | Object.keys(rules).forEach((rule) => { 10 | extend(rule, { 11 | ...rules[rule], // copies rule configuration 12 | message: messages[rule], // assign message 13 | }); 14 | }); 15 | 16 | /* 17 | import { localize } from "vee-validate"; 18 | import es from "vee-validate/dist/locale/es.json"; 19 | 20 | // Install and Activate the Arabic locale. 21 | localize({es}); 22 | // Install and Activate the Arabic locale. 23 | localize('es', es); 24 | 25 | */ 26 | 27 | import { configure } from "vee-validate"; 28 | Vue.component("configure"); 29 | 30 | configure({ 31 | classes: { 32 | valid: "is-valid", 33 | invalid: "is-invalid", 34 | dirty: ["is-dirty", "is-dirty"], // multiple classes per flag! 35 | // ... 36 | }, 37 | }); 38 | -------------------------------------------------------------------------------- /src/config/vee-validate.js: -------------------------------------------------------------------------------- 1 | /* vee-validate */ 2 | import { localize } from "@vee-validate/i18n"; 3 | import { setLocale } from "@vee-validate/i18n"; 4 | import es from "@vee-validate/i18n/dist/locale/es.json"; 5 | import { configure } from "vee-validate"; 6 | import { defineRule } from "vee-validate"; 7 | import AllRules from "@vee-validate/rules"; 8 | 9 | 10 | configure({ 11 | generateMessage: localize({ es }) 12 | }) 13 | setLocale("es") 14 | 15 | Object.keys(AllRules).forEach((rule) => { 16 | defineRule(rule, AllRules[rule]); 17 | }) -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import App from "./App.vue"; 3 | import router from "./router"; 4 | import store from "./store"; 5 | import "./config"; 6 | 7 | 8 | 9 | Vue.config.productionTip = false; 10 | 11 | new Vue({ 12 | router, 13 | store, 14 | render: (h) => h(App), 15 | }).$mount("#app"); -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueRouter from "vue-router"; 3 | 4 | Vue.use(VueRouter); 5 | 6 | const routes = [ 7 | { 8 | path: "/login", 9 | name: "login", 10 | component: () => import("../views/auths/Login.vue"), 11 | meta: { 12 | middleware: "guest", 13 | }, 14 | }, 15 | 16 | { 17 | path: "/", 18 | name: "admin", 19 | component: () => import("../views/layout/Container.vue"), 20 | redirect: "/admin/about", 21 | meta: { 22 | middleware: "admin", 23 | }, 24 | children: [ 25 | { 26 | path: "/admin/about", 27 | name: "about", 28 | component: () => import("../views/About.vue"), 29 | meta: { 30 | middleware: "admin", 31 | }, 32 | }, 33 | { 34 | path: "/admin/users", 35 | name: "users", 36 | component: () => import("../views/users/TheUsers.vue"), 37 | meta: { 38 | middleware: "admin", 39 | }, 40 | }, 41 | { 42 | path: "/admin/profile", 43 | name: "profile", 44 | component: () => import("../views/auths/Profile.vue"), 45 | meta: { 46 | middleware: "admin", 47 | }, 48 | }, 49 | ], 50 | }, 51 | ]; 52 | 53 | const router = new VueRouter({ 54 | mode: "history", 55 | routes, 56 | }); 57 | 58 | 59 | 60 | router.beforeEach((to, from, next) => { 61 | if (Vue.store.state.mAuths.authenticated) { 62 | if (to.fullPath == "/login") { 63 | next({ name: "admin" }); 64 | } 65 | next(); 66 | } else { 67 | if (to.meta.middleware == "guest") { 68 | next(); 69 | } else { 70 | next({ name: "login" }); 71 | } 72 | } 73 | }); 74 | 75 | 76 | 77 | 78 | 79 | Vue.router = router; 80 | export default router; -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import createPersistedState from "vuex-persistedstate"; 3 | import Vuex from "vuex"; 4 | Vue.use(Vuex); 5 | 6 | import { mAuths } from "./mAuths"; 7 | import { mUsers } from "./mUsers"; 8 | import { mRoles } from "./mRoles"; 9 | 10 | const store = new Vuex.Store({ 11 | /* Evita que mutes el estado directamente, 12 | por lo que solo se puede mutar el estado usando mutaciones.*/ 13 | strict: true, 14 | plugins: [createPersistedState({ paths: ["mAuths"] })], 15 | 16 | // Agregamos los modulos 17 | modules: { 18 | namespaced: true, 19 | mAuths, 20 | mUsers, 21 | mRoles, 22 | }, 23 | }); 24 | 25 | Vue.store = store; 26 | export default store; -------------------------------------------------------------------------------- /src/store/mAuths/actions.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | 3 | export default { 4 | setToken({ commit }, data) { 5 | commit("setToken", data); 6 | }, 7 | setAuthenticated({ commit }, data) { 8 | commit("setAuthenticated", data); 9 | }, 10 | setAuth({ commit }, data) { 11 | commit("setAuth", data); 12 | }, 13 | 14 | async login({ commit, dispatch, state }, credentials) { 15 | try { 16 | commit("setToken", null); 17 | commit("setAuthenticated", false); 18 | let response = await Vue.axios.post("auth/login", credentials); 19 | if (response) { 20 | commit("setToken", response.data.token); 21 | await dispatch("profile"); 22 | 23 | commit("setAuthenticated", true); 24 | Vue.router.push({ name: "about" }); 25 | } 26 | } catch (err) { 27 | let error = { 28 | code: err.response.status, 29 | statusText: err.response.statusText, 30 | message: err.response.data.message, 31 | errors: err.response.data.errors ? err.response.data.errors : {}, 32 | }; 33 | throw error; 34 | } 35 | }, 36 | async profile({ state, commit }) { 37 | try { 38 | let response = await Vue.axios.get("auth/profile"); 39 | if (response) { 40 | commit("setAuth", response.data); 41 | // Creamos array con los permisos 42 | let permissions = Vue.services.getArrayByKey( 43 | state.auth.roles[0].permissions, 44 | "name" 45 | ); 46 | // Asignamos los roles y permisos a la libreria vue-gates 47 | Vue.gates.setRoles(state.auth.roles[0].name); 48 | Vue.gates.setPermissions(permissions); 49 | } 50 | } catch (err) { 51 | let error = { 52 | code: err.response.status, 53 | statusText: err.response.statusText, 54 | message: err.response.data.message, 55 | errors: err.response.data.errors ? err.response.data.errors : {}, 56 | }; 57 | throw error; 58 | } 59 | }, 60 | async updateProfile({ commit }, data) { 61 | try { 62 | let response = await Vue.axios.put("auth/update-profile", data); 63 | if (response) { 64 | commit("setAuth", response.data); 65 | } 66 | } catch (err) { 67 | let error = { 68 | code: err.response.status, 69 | statusText: err.response.statusText, 70 | message: err.response.data.message, 71 | errors: err.response.data.errors ? err.response.data.errors : {}, 72 | }; 73 | throw error; 74 | } 75 | }, 76 | async changePassword({ commit, dispatch }, data) { 77 | try { 78 | await Vue.axios.post("auth/change-password", data); 79 | await dispatch("logout"); 80 | } catch (err) { 81 | let error = { 82 | code: err.response.status, 83 | statusText: err.response.statusText, 84 | message: err.response.data.message, 85 | errors: err.response.data.errors ? err.response.data.errors : {}, 86 | }; 87 | throw error; 88 | } 89 | }, 90 | async refreshToken({ commit, dispatch, state }) { 91 | try { 92 | if(!state.token || !state.authenticated) { 93 | commit("setToken", null); 94 | commit("setAuthenticated", false); 95 | commit("setAuth", {}); 96 | Vue.router.push({ name: "login" }); 97 | } 98 | console.log("iniciamos la accion..."); 99 | let response = await Vue.axios.post("auth/refresh-token", {'id': state.auth.id}); 100 | if (response) { 101 | commit("setToken", response.data.token); 102 | } 103 | } catch (err) { 104 | console.log(err); 105 | let error = { 106 | code: err.response.status, 107 | statusText: err.response.statusText, 108 | message: err.response.data.message, 109 | errors: err.response.data.errors ? err.response.data.errors : {}, 110 | }; 111 | throw error; 112 | } 113 | }, 114 | async logout({ commit }) { 115 | await Vue.axios.get("auth/logout"); 116 | commit("setToken", null); 117 | commit("setAuthenticated", false); 118 | commit("setAuth", {}); 119 | Vue.router.push({ name: "login" }); 120 | }, 121 | }; 122 | -------------------------------------------------------------------------------- /src/store/mAuths/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | authenticated: (state) => state.authenticated, 3 | token: (state) => state.token, 4 | auth: (state) => state.auth, 5 | }; -------------------------------------------------------------------------------- /src/store/mAuths/index.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | import getters from './getters' 3 | import mutations from './mutations' 4 | import actions from './actions' 5 | 6 | 7 | 8 | 9 | export const mAuths = { 10 | namespaced: true, 11 | state, 12 | getters, 13 | mutations, 14 | actions 15 | } -------------------------------------------------------------------------------- /src/store/mAuths/mutations.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | export default { 4 | setAuthenticated(state, value) { 5 | state.authenticated = value; 6 | }, 7 | setToken(state, value) { 8 | state.token = value; 9 | }, 10 | setAuth(state, value) { 11 | state.auth = value; 12 | }, 13 | } -------------------------------------------------------------------------------- /src/store/mAuths/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | authenticated: false, 3 | token: null, 4 | auth: {}, 5 | }; -------------------------------------------------------------------------------- /src/store/mRoles/actions.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | 3 | export default { 4 | setRole({ commit }, data) { 5 | commit("setCurrentRole", data); 6 | }, 7 | setPerPage({ commit }, perPage) { 8 | commit("setPerPage", perPage); 9 | }, 10 | setSearchValue({ commit }, data) { 11 | commit("setSearchValue", data); 12 | }, 13 | setSort({ commit }, data) { 14 | commit("setSort", data); 15 | }, 16 | setPage({ commit }, data) { 17 | commit("setPage", data); 18 | }, 19 | 20 | async getRoles({ commit }) { 21 | try { 22 | commit("setRoles", {}); 23 | let response = await Vue.axios.get("roles"); 24 | if (response) { 25 | commit("setRoles", response.data); 26 | } 27 | } catch (err) { 28 | let error = { 29 | code: err.response.status, 30 | statusText: err.response.statusText, 31 | message: err.response.data.message, 32 | }; 33 | throw error; 34 | } 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /src/store/mRoles/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | isLoading: state => state.isLoading, 3 | roles: state => Object.values(state.roles), 4 | currentRole: state => state.role, 5 | totalRecords: state => state.totalRecords, 6 | numberPages: state => state.totalRecords > 0 ? Math.ceil(state.totalRecords / state.perPage) : 1, 7 | currentPage: state => state.search.page, 8 | } -------------------------------------------------------------------------------- /src/store/mRoles/index.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | import getters from './getters' 3 | import mutations from './mutations' 4 | import actions from './actions' 5 | 6 | 7 | 8 | 9 | export const mRoles = { 10 | namespaced: true, 11 | state, 12 | getters, 13 | mutations, 14 | actions 15 | } -------------------------------------------------------------------------------- /src/store/mRoles/mutations.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | export default { 4 | setSearchValue(state, value) { 5 | state.search.searchValue = value; 6 | }, 7 | setSort(state, value) { 8 | state.search.sort = value; 9 | }, 10 | setPage(state, value) { 11 | state.search.page = value; 12 | }, 13 | setPerPage(state, value) { 14 | state.perPage = value; 15 | }, 16 | setIsAllLoading(state, value) { 17 | state.isAllLoading = value; 18 | }, 19 | setIsLoading(state, value) { 20 | state.isLoading = value; 21 | }, 22 | setRoles(state, payload) { 23 | state.roles = payload; 24 | }, 25 | setCurrentRole(state, payload) { 26 | state.role = payload; 27 | }, 28 | setTotalRecords(state, total) { 29 | state.totalRecords = total; 30 | }, 31 | } -------------------------------------------------------------------------------- /src/store/mRoles/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | roles: {}, 3 | role: {}, 4 | totalRecords: 0, 5 | perPage: 15, 6 | search: { 7 | page: 1, 8 | sort: 1, 9 | searchValue: "", 10 | }, 11 | isLoading: true, 12 | isAllLoading: false, 13 | }; -------------------------------------------------------------------------------- /src/store/mUsers/actions.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | 3 | export default { 4 | setUser({ commit }, data) { 5 | commit("setCurrentUser", data); 6 | }, 7 | setPerPage({ commit }, perPage) { 8 | commit("setPerPage", perPage); 9 | }, 10 | setSearchValue({ commit }, data) { 11 | commit("setSearchValue", data); 12 | }, 13 | setPage({ commit }, data) { 14 | commit("setPage", data); 15 | }, 16 | 17 | async getByCriteria({ state, commit }) { 18 | try { 19 | commit("setUsers", {}); 20 | let response = await Vue.axios.get("users/bycriteria", { 21 | params: state.search, 22 | }); 23 | if (response) { 24 | commit("setUsers", response.data.data); 25 | commit("setTotalRecords", response.data.total); 26 | } 27 | } catch (err) { 28 | let error = { 29 | code: err.response.status, 30 | statusText: err.response.statusText, 31 | message: err.response.data.message, 32 | }; 33 | throw error; 34 | } 35 | }, 36 | async getRoles({ commit }) { 37 | try { 38 | commit("setRoles", {}); 39 | let response = await Vue.axios.get("users/roles"); 40 | if (response) { 41 | commit("setRoles", response.data); 42 | } 43 | } catch (err) { 44 | let error = { 45 | code: err.response.status, 46 | statusText: err.response.statusText, 47 | message: err.response.data.message, 48 | }; 49 | throw error; 50 | } 51 | }, 52 | async addOrUpdate({ dispatch }, data) { 53 | try { 54 | data.id 55 | ? await Vue.axios.put("users/" + data.id, data) 56 | : await Vue.axios.post("users", data); 57 | 58 | await dispatch("getByCriteria"); 59 | } catch (err) { 60 | let error = { 61 | code: err.response.status, 62 | statusText: err.response.statusText, 63 | message: err.response.data.message, 64 | errors: err.response.data.errors ? err.response.data.errors : {}, 65 | }; 66 | throw error; 67 | } 68 | }, 69 | async destroy({ state, dispatch }, id) { 70 | try { 71 | await Vue.axios.delete("users/" + id); 72 | dispatch("getByCriteria"); 73 | } catch (err) { 74 | console.log(err); 75 | let error = { 76 | code: err.response.status, 77 | statusText: err.response.statusText, 78 | message: err.response.data.message, 79 | errors: err.response.data.errors ? err.response.data.errors : {}, 80 | }; 81 | throw error; 82 | } 83 | }, 84 | }; 85 | -------------------------------------------------------------------------------- /src/store/mUsers/getters.js: -------------------------------------------------------------------------------- 1 | export default { 2 | isLoading: state => state.isLoading, 3 | users: state => Object.values(state.users), 4 | currentUser: state => state.user, 5 | totalRecords: state => state.totalRecords, 6 | numberPages: state => state.totalRecords > 0 ? Math.ceil(state.totalRecords / state.search.perPage) : 1, 7 | currentPage: state => state.search.page, 8 | } -------------------------------------------------------------------------------- /src/store/mUsers/index.js: -------------------------------------------------------------------------------- 1 | import state from './state' 2 | import getters from './getters' 3 | import mutations from './mutations' 4 | import actions from './actions' 5 | 6 | 7 | 8 | 9 | export const mUsers = { 10 | namespaced: true, 11 | state, 12 | getters, 13 | mutations, 14 | actions 15 | } -------------------------------------------------------------------------------- /src/store/mUsers/mutations.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | export default { 4 | setSearchValue(state, value) { 5 | state.search.searchValue = value; 6 | }, 7 | setPage(state, value) { 8 | state.search.page = value; 9 | }, 10 | setPerPage(state, value) { 11 | state.search.perPage = value; 12 | }, 13 | setIsAllLoading(state, value) { 14 | state.isAllLoading = value; 15 | }, 16 | setIsLoading(state, value) { 17 | state.isLoading = value; 18 | }, 19 | setUsers(state, payload) { 20 | state.users = payload; 21 | }, 22 | setRoles(state, payload) { 23 | state.roles = payload; 24 | }, 25 | setCurrentUser(state, payload) { 26 | state.user = payload; 27 | }, 28 | setTotalRecords(state, total) { 29 | state.totalRecords = total; 30 | }, 31 | } -------------------------------------------------------------------------------- /src/store/mUsers/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | users: {}, 3 | roles: {}, 4 | user: {}, 5 | totalRecords: 0, 6 | search: { 7 | page: 1, 8 | perPage: 33, 9 | searchValue: "", 10 | }, 11 | isLoading: true, 12 | isAllLoading: false, 13 | }; -------------------------------------------------------------------------------- /src/views/About.vue: -------------------------------------------------------------------------------- 1 | 74 | 75 | 82 | -------------------------------------------------------------------------------- /src/views/auths/Login.vue: -------------------------------------------------------------------------------- 1 | 69 | 70 | 109 | -------------------------------------------------------------------------------- /src/views/auths/Profile.vue: -------------------------------------------------------------------------------- 1 | 210 | 211 | 275 | -------------------------------------------------------------------------------- /src/views/layout/Container.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 50 | 51 | 54 | -------------------------------------------------------------------------------- /src/views/layout/ContentHeader.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 30 | 31 | -------------------------------------------------------------------------------- /src/views/layout/ControlSidebar.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/views/layout/Footer.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/views/layout/Navbar.vue: -------------------------------------------------------------------------------- 1 | 58 | 59 | 72 | 73 | -------------------------------------------------------------------------------- /src/views/layout/Preloader.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 21 | 22 | -------------------------------------------------------------------------------- /src/views/layout/Sidebar.vue: -------------------------------------------------------------------------------- 1 | 186 | 187 | -------------------------------------------------------------------------------- /src/views/users/TheUsers.vue: -------------------------------------------------------------------------------- 1 | 135 | 136 | 234 | -------------------------------------------------------------------------------- /src/views/users/User.vue: -------------------------------------------------------------------------------- 1 | 161 | 162 | 229 | --------------------------------------------------------------------------------