From 032c7141c5c22f2e7d2503bc45dc5f6104e48458 Mon Sep 17 00:00:00 2001 From: CuongStf Date: Wed, 14 Aug 2019 11:41:36 +0700 Subject: [PATCH] #update: _feature login _module store vuex _router redirect _mixins file _move scss to file _register module vuex in app-main --- src/App-main.vue | 18 ++- src/assets/style/general/_general.scss | 162 ++++++++++++------------- src/assets/style/index.scss | 4 +- src/assets/style/page/_login.scss | 67 ++++++++++ src/config/auth.ts | 8 +- src/config/axios.ts | 6 +- src/mixin/mixins.ts | 52 ++++---- src/mixins.d.ts | 3 +- src/router/index.ts | 24 ++-- src/store/modules/generalApp.ts | 15 --- src/store/modules/login.ts | 81 ++++++++----- src/store/modules/userDrawing.ts | 59 +++++---- src/store/types/index.ts | 1 + src/views/home/index.vue | 11 -- src/views/login/index.vue | 107 ++++++---------- 15 files changed, 344 insertions(+), 274 deletions(-) create mode 100644 src/assets/style/page/_login.scss diff --git a/src/App-main.vue b/src/App-main.vue index e9e8e9a..b55d260 100644 --- a/src/App-main.vue +++ b/src/App-main.vue @@ -4,8 +4,24 @@ diff --git a/src/assets/style/general/_general.scss b/src/assets/style/general/_general.scss index fa97b4b..33e7a32 100644 --- a/src/assets/style/general/_general.scss +++ b/src/assets/style/general/_general.scss @@ -78,105 +78,105 @@ width: 100%; height: calc(100vh - 48px); position: relative; -} -.pPopupDetail { - position: absolute; - top: 0; - left: 0; - padding: 0; - max-width: 240px; - @include size(100%, 100%); - background-color: var(--color-light-2); - border-left: 1px solid hsla(240, 1%, 85%, 0.5); - box-shadow: 12px 0 24px rgba(0, 0, 0, 0.1); - z-index: 10; - - &-title { - margin: 4px 0 0; - } + .pPopupDetail { + position: absolute; + top: 0; + left: 0; + padding: 0; + max-width: 240px; + @include size(100%, 100%); + background-color: var(--color-light-2); + border-left: 1px solid hsla(240, 1%, 85%, 0.5); + box-shadow: 12px 0 24px rgba(0, 0, 0, 0.1); + z-index: 10; + + &-title { + margin: 4px 0 0; + } - &-header { - position: relative; - } + &-header { + position: relative; + } - &-iClose { - color: var(--color-dark); - background: var(--color-light); - @include size(24px, 24px); - border-radius: 8px; - transition: all 0.15s ease-out; + &-iClose { + color: var(--color-dark); + background: var(--color-light); + @include size(24px, 24px); + border-radius: 8px; + transition: all 0.15s ease-out; - &:hover { - color: var(--color-red); - background: white; + &:hover { + color: var(--color-red); + background: white; + } } - } - .form { - height: calc(100% - 98px); - border-bottom: 1px solid var(--color-light); - padding: 0 8px 8px; + .form { + height: calc(100% - 98px); + border-bottom: 1px solid var(--color-light); + padding: 0 8px 8px; - .el-form-item { - margin-bottom: 0; + .el-form-item { + margin-bottom: 0; + } } - } - .header { - margin: 12px 8px; - color: var(--color-dark); - @extend .flex-row__between; - } + .header { + margin: 12px 8px; + color: var(--color-dark); + @extend .flex-row__between; + } - .el-form-item__content { - line-height: initial; - border-bottom: 1px solid var(--color-light); - padding: 4px 0 12px; + .el-form-item__content { + line-height: initial; + border-bottom: 1px solid var(--color-light); + padding: 4px 0 12px; - .label { - width: 100%; - font-size: 13px; - margin-bottom: 4px; - display: block; - } + .label { + width: 100%; + font-size: 13px; + margin-bottom: 4px; + display: block; + } - .el-input__inner { - border-radius: 4px; - height: 32px; - line-height: 32px; - padding: 0 8px; + .el-input__inner { + border-radius: 4px; + height: 32px; + line-height: 32px; + padding: 0 8px; - &:focus { - background: white !important; - border-color: transparent !important; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; + &:focus { + background: white !important; + border-color: transparent !important; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; + } } } - } - .actions { - padding: 8px; - background-color: white; - @extend .flex-row__between; - - button { - height: 32px; - display: flex; - align-items: center; - padding: 0 20px; - border: none; - box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); - } + .actions { + padding: 8px; + background-color: white; + @extend .flex-row__between; + + button { + height: 32px; + display: flex; + align-items: center; + padding: 0 20px; + border: none; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25); + } - .btnSave { - background: var(--color-blue); - } + .btnSave { + background: var(--color-blue); + } - .btnDelete { - background: rgba(229, 77, 66, 0.2); - color: var(--color-red); - box-shadow: none; + .btnDelete { + background: rgba(229, 77, 66, 0.2); + color: var(--color-red); + box-shadow: none; + } } } } diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss index 1d37500..6b5a766 100644 --- a/src/assets/style/index.scss +++ b/src/assets/style/index.scss @@ -1,7 +1,9 @@ @import "./mixins/variable"; -@import "./mixins/_mixin"; +@import "./mixins/mixin"; @import "./mixins/animation"; @import "./general/base"; @import "./general/layout"; @import "./general/general"; + +@import "./page/login"; diff --git a/src/assets/style/page/_login.scss b/src/assets/style/page/_login.scss new file mode 100644 index 0000000..a51c8e3 --- /dev/null +++ b/src/assets/style/page/_login.scss @@ -0,0 +1,67 @@ +.pLogin { + height: 100vh; + width: 100%; + background: #20a8d8 !important; + font-family: "Nunito", sans-serif; + + .pHeader { + font-size: 55px; + font-family: "Nunito", sans-serif; + font-weight: 700; + } + + &-scroll { + width: 100%; + height: calc(100% - 20px); + padding: 50px 38px 125px 38px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .leftSection { + color: #ffffff; + + .logo-lv1 { + width: 200px; + } + + .tt-2 { + font-size: 20px; + opacity: 0.8; + width: 80%; + } + } + + .rightSection { + max-width: 500px; + width: 40%; + height: 100%; + box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), + 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12); + background-color: #fff; + min-width: 350px; + position: relative; + overflow: hidden; + -webkit-overflow-scrolling: touch; + border-radius: 8px 0 0px 8px; + + .logo-lv2 { + width: 150px; + margin-top: -25px; + } + + .title { + font-size: 18px; + text-align: center; + margin: 20px 0 10px 0; + margin-top: -15px; + } + + .btnSubmit { + width: 100%; + background-color: #039be5; + } + } +} diff --git a/src/config/auth.ts b/src/config/auth.ts index 8c45097..2bc2f3c 100644 --- a/src/config/auth.ts +++ b/src/config/auth.ts @@ -1,19 +1,19 @@ export default { saveToken(token: string) { - return localStorage.setItem("bus_token", token); + return localStorage.setItem("aquaDraw_token", token); }, removeToken() { - return localStorage.removeItem("bus_token"); + return localStorage.removeItem("aquaDraw_token"); }, checkIsAuthenticated: function() { - let tokenDataStr = localStorage.getItem("bus_token"); + let tokenDataStr = localStorage.getItem("aquaDraw_token"); return Promise.resolve(tokenDataStr); }, getToken() { - let tokenStr = localStorage.getItem("bus_token"); + let tokenStr = localStorage.getItem("aquaDraw_token"); return tokenStr || null; }, diff --git a/src/config/axios.ts b/src/config/axios.ts index 5f87d92..f871bfe 100644 --- a/src/config/axios.ts +++ b/src/config/axios.ts @@ -19,7 +19,7 @@ axios.interceptors.request.use( : store.dispatch("LOGOUT"); }); // config progressbar start - temp === 0 && new Vue().$Progress.start(); + temp === 0 && app.$Progress.start(); temp++; // config data not auto convert to json data that convert to type object[key]=value config.paramsSerializer = (params: any) => { @@ -39,13 +39,13 @@ axios.interceptors.response.use( (response: any) => { // config progressbar finish temp--; - temp === 0 && new Vue().$Progress.finish(); + temp === 0 && app.$Progress.finish(); return response.data; }, (error: any) => { temp--; - temp === 0 && new Vue().$Progress.fail(); + temp === 0 && app.$Progress.fail(); if (error.response.status === 500) { new Vue().$messageError("Server errors! Try again!"); diff --git a/src/mixin/mixins.ts b/src/mixin/mixins.ts index 8dd81e0..6d61f58 100644 --- a/src/mixin/mixins.ts +++ b/src/mixin/mixins.ts @@ -1,4 +1,5 @@ import { Vue, Component } from "vue-property-decorator"; +import { objInstance } from "../store/types/index"; import { checkNotSpecialCharacter, allowOnlyTypeNumber, @@ -79,42 +80,43 @@ export default class Mixin extends Vue { } public $messageSuccess(message: string) { - this.$message.success(message); + this.$message({ + message: message, + type: "success", + showClose: true + }); } public $messageError(message: string) { - this.$message.error(message); + this.$message({ + message: message, + type: "error", + showClose: true + }); } private hasKey(obj: O, key: string | number | symbol): key is keyof O { return key in obj; } - // public $notify(message: string, type: string, content: string) { - // let config: any = { - // message: message, - // description: content, - // duration: 3.5 - // }; - // if (this.hasKey(this.$notification, type)) { - // this.$notification[type](config); - // } - // } + public $notification(message: string, type: string, content: string) { + let config: any = { + title: message, + message: content, + type: type + }; + this.$notify(config); + } public $confirmPopup(title: string, content: string, callback?: any) { - let config: any = { - title: title, - content: content, - okText: "Submit", - okType: "danger", - cancelText: "Cancel", - onOk() { + this.$confirm(content, title, { + confirmButtonText: "Xác nhận", + cancelButtonText: "Huỷ bỏ", + type: "warning" + }) + .then(() => { callback(); - }, - onCancel() { - () => {}; - } - }; - this.$confirm(config); + }) + .catch(() => {}); } } diff --git a/src/mixins.d.ts b/src/mixins.d.ts index 466ee00..e7a1c69 100644 --- a/src/mixins.d.ts +++ b/src/mixins.d.ts @@ -7,11 +7,12 @@ declare module "vue/types/vue" { widthClient: number; heightClient: number; validationRules: object; + getNumberRandom(min: number, max: number): number; getRandomColor(): void; $messageSuccess(message: string): void; $messageError(message: string): void; - // $notify(message: string, type: string, content: string): void; + $notification(message: string, type: string, content: string): void; $confirmPopup(title: string, content: string, callback?: any): void; $post(key: string, params?: any): any; diff --git a/src/router/index.ts b/src/router/index.ts index c33eed2..9b6dc94 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,6 +1,7 @@ import Vue from "vue"; import Router from "vue-router"; import { concat } from "lodash"; +import auth from "@/config/auth"; Vue.use(Router); const routerInstance: any = new Router({ @@ -13,8 +14,7 @@ const routerInstance: any = new Router({ children: concat([ { path: "home", - component: () => - import(/* webpackChunkName: "home" */ "@/views/home/index.vue"), + component: () => import("../views/home/index.vue"), name: "home" }, { @@ -35,7 +35,7 @@ const routerInstance: any = new Router({ ], [ { - path: "/*", + path: "*", redirect: { name: "home" } @@ -44,14 +44,14 @@ const routerInstance: any = new Router({ ) }); -// routerInstance.beforeEach((to: any, from: any, next: any) => { -// auth.checkIsAuthenticated().then((valid: any) => { -// if (valid) { -// to.name === "login" ? next({ name: "home" }) : next(); -// } else { -// to.name !== "login" ? next({ name: "login" }) : next(); -// } -// }); -// }); +routerInstance.beforeEach((to: any, from: any, next: any) => { + auth.checkIsAuthenticated().then((valid: any) => { + if (valid) { + to.name === "login" ? next({ name: "home" }) : next(); + } else { + to.name !== "login" ? next({ name: "login" }) : next(); + } + }); +}); export default routerInstance; diff --git a/src/store/modules/generalApp.ts b/src/store/modules/generalApp.ts index 5ba172f..0ece47c 100644 --- a/src/store/modules/generalApp.ts +++ b/src/store/modules/generalApp.ts @@ -7,21 +7,16 @@ import { } from "vuex-module-decorators"; import { Vue } from "vue-property-decorator"; import store from "@/store"; -import auth from "@/config/auth"; -import router from "@/router"; -import { objInstance } from "../types"; export interface IGeneralApp { flagLoading: number; isCollapse: boolean; - infoUser: object; } @Module({ dynamic: true, store, name: "generalInfo" }) class General extends VuexModule implements IGeneralApp { public flagLoading: number = 0; public isCollapse: boolean = false; - public infoUser: object = {}; public vm: Vue = new Vue(); @Mutation @@ -39,11 +34,6 @@ class General extends VuexModule implements IGeneralApp { this.isCollapse = !this.isCollapse; } - @Mutation - private setInfoUser(payload: objInstance) { - this.infoUser = payload; - } - @Action public SET_START_LOADING() { this.context.commit("startLoading"); @@ -58,11 +48,6 @@ class General extends VuexModule implements IGeneralApp { public SET_COLLAPSE() { this.context.commit("setCollapse"); } - - @Action - public SET_INFO_USER(payload: objInstance) { - this.context.commit("setInfoUser", payload); - } } export const generalInfo = getModule(General); diff --git a/src/store/modules/login.ts b/src/store/modules/login.ts index 5b2322f..ac14f75 100644 --- a/src/store/modules/login.ts +++ b/src/store/modules/login.ts @@ -1,63 +1,88 @@ -import { VuexModule, Module, Mutation, Action, getModule } from "vuex-module-decorators"; -import {Vue} from 'vue-property-decorator'; -import store from '@/store'; -import { objInstance } from '../types/index'; -import auth from '@/config/auth'; -import router from '@/router'; - +import { + VuexModule, + Module, + Mutation, + Action, + getModule +} from "vuex-module-decorators"; +import { Vue } from "vue-property-decorator"; +import store from "@/store"; +import { objInstance } from "../types/index"; +import auth from "@/config/auth"; +import router from "@/router"; export interface ILogin { - isLogged: boolean + isLogged: boolean; + infoUser: object; } - -@Module({dynamic: true, store, name: "login"}); +@Module({ dynamic: true, store, name: "login" }) class Login extends VuexModule implements ILogin { public isLogged: boolean = false; + public infoUser: object = {}; + public vm = new Vue(); @Mutation - setLogged(payload: boolean) { + private setLogged(payload: boolean) { this.isLogged = payload; } @Mutation - logout() { + private logout() { auth.removeToken(); - router.push({name: "login"}) + router.push({ name: "login" }); + } + + @Mutation + private setInfoUser(payload: objInstance) { + this.infoUser = payload; } @Action - SET_LOGGED(payload: boolean) { - this.context.commit("setLogged", payload) + public SET_LOGGED(payload: boolean) { + this.context.commit("setLogged", payload); } - @Action({rawError: true}) - LOGIN(payload: objInstance) { + @Action({ rawError: true }) + public LOGIN(payload: objInstance) { return this.vm.$post("Account/Login", JSON.stringify(payload)); } + @Action({ rawError: true }) + public CHANGE_PW(payload: objInstance) { + return this.vm.$post("Account/UserChangePassword", JSON.stringify(payload)); + } - @Action({rawError: true}) - CHANGE_PW(payload: objInstance) { - return this.vm.$post('Account/UserChangePassword', JSON.stringify(payload)); + @Action({ rawError: true }) + public CREATE_USER(payload: objInstance) { + return this.vm.$post("Account/CreateUser", JSON.stringify(payload)); } - @Action({rawError: true}) - CREATE_USER(payload: objInstance) { - return this.vm.$post('Account/CreateUser', JSON.stringify(payload)); + @Action({ rawError: true }) + public REMOVE_USER(payload: objInstance) { + return this.vm.$post("Account/RemoveUser", JSON.stringify(payload)); } - @Action({rawError: true}) - REMOVE_USER(payload: objInstance) { - return this.vm.$post('Account/RemoveUser', JSON.stringify(payload)); + @Action({ rawError: true }) + public VIEW_ALL_ACCOUNT_ADMIN(payload: objInstance) { + return this.vm.$post( + "Account/ViewAll", + JSON.stringify({ + tokenkey: auth.getToken() + }) + ); } @Action - LOGOUT() { + public LOGOUT() { this.context.commit("logout"); } -} + @Action + public SET_INFO_USER(payload: objInstance) { + this.context.commit("setInfoUser", payload); + } +} export const LoginModule = getModule(Login); diff --git a/src/store/modules/userDrawing.ts b/src/store/modules/userDrawing.ts index b39c173..40e8ecc 100644 --- a/src/store/modules/userDrawing.ts +++ b/src/store/modules/userDrawing.ts @@ -6,84 +6,99 @@ import { Mutation } from "vuex-module-decorators"; import { Vue } from "vue-property-decorator"; -import store from '@/store'; -import { objInstance } from '../types'; +import store from "@/store"; +import { objInstance } from "../types"; export interface IDrawing { listNodes: Array; listLines: Array; + isShowPopupDetail: boolean; } -@Module({dynamic: true, store, name: 'Drawing'}); +@Module({ dynamic: true, store, name: "Drawing" }) class Drawing extends VuexModule implements IDrawing { public listNodes: Array = []; public listLines: Array = []; + public isShowPopupDetail: boolean = false; public vm = new Vue(); @Mutation - setListNodes(payload: Array) { + private setListNodes(payload: Array) { this.listNodes = payload; } @Mutation - setListLines(payload: Array) { + private setListLines(payload: Array) { this.listLines = payload; } - @Action({rawError: true}) + @Mutation + private setIsShowPopupDetail(payload: boolean) { + this.isShowPopupDetail = payload; + } + + @Action({ rawError: true }) GET_LIST_NODES(payload: objInstance) { - this.vm.$post("Draw/ViewAllNode", JSON.stringify(payload)).then((res: any) => { - this.context.commit("setListNodes", res); - }) + this.vm + .$post("Draw/ViewAllNode", JSON.stringify(payload)) + .then((res: any) => { + this.context.commit("setListNodes", res); + }); } - @Action({rawError: true}) + @Action({ rawError: true }) ADD_NODE(payload: objInstance) { return this.vm.$post("Draw/AddNode", JSON.stringify(payload)); } - @Action({rawError: true}) + @Action({ rawError: true }) REMOVE_NODE(payload: objInstance) { return this.vm.$post("Draw/RemoveNode", JSON.stringify(payload)); } - @Action({rawError: true}) + @Action({ rawError: true }) DETAIL_NODE(payload: objInstance) { return this.vm.$post("Draw/ViewNode", JSON.stringify(payload)); } - @Action({rawError: true}) + @Action({ rawError: true }) UPDATE_NODE(payload: objInstance) { return this.vm.$post("Draw/EditNode", JSON.stringify(payload)); } - @Action({rawError: true}) + @Action({ rawError: true }) GET_LIST_LINES(payload: objInstance) { - this.vm.$post("Draw/ViewAllLine", JSON.stringify(payload)).then((res: any) => { - this.context.commit("setListLines", res); - }) + this.vm + .$post("Draw/ViewAllLine", JSON.stringify(payload)) + .then((res: any) => { + this.context.commit("setListLines", res); + }); } - @Action({rawError: true}) + @Action({ rawError: true }) ADD_LINE(payload: objInstance) { return this.vm.$post("Draw/AddLine", JSON.stringify(payload)); } - @Action({rawError: true}) + @Action({ rawError: true }) REMOVE_LINE(payload: objInstance) { return this.vm.$post("Draw/RemoveLine", JSON.stringify(payload)); } - @Action({rawError: true}) + @Action({ rawError: true }) DETAIL_LINE(payload: objInstance) { return this.vm.$post("/Draw/ViewLine", JSON.stringify(payload)); } - @Action({rawError: true}) + @Action({ rawError: true }) UPDATE_LINE(payload: objInstance) { return this.vm.$post("Draw/EditLine", JSON.stringify(payload)); } -} + @Action + SET_IS_SHOW_POPUP_DETAIL(payload: boolean) { + this.context.commit("setIsShowPopupDetail", payload); + } +} export const DrawingModule = getModule(Drawing); diff --git a/src/store/types/index.ts b/src/store/types/index.ts index f09ef8b..44feaba 100644 --- a/src/store/types/index.ts +++ b/src/store/types/index.ts @@ -1,3 +1,4 @@ +import Vue from "vue"; export interface objInstance { [key: string]: any; } diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 0e23b53..7804a46 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -89,17 +89,6 @@ export default class Dashboard extends Vue { lat: 21.15648895639665, lng: 105.5981367021484 }; - - public mounted() { - console.log("akflkasjf"); - this.$post( - "Account/Login", - JSON.stringify({ - username: "user", - password: "user" - }) - ).then((res: any) => console.log(res)); - } } diff --git a/src/views/login/index.vue b/src/views/login/index.vue index d832e26..7fe6569 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -21,7 +21,7 @@
- Đăng nhập + Đăng nhập +
@@ -90,6 +95,8 @@ - + +