From 70809cb05c17232149bffcaeb1dc835430151e47 Mon Sep 17 00:00:00 2001 From: Ahmed Bouhuolia Date: Tue, 3 Sep 2019 02:07:28 +0200 Subject: [PATCH] WIP Items module. --- .gitignore | 1 + .vscode/settings.json | 29 + client/.babelrc | 13 +- client/.eslintrc.js | 1 + client/config/index.js | 2 +- client/package-lock.json | 43 + client/package.json | 4 +- client/src/App.vue | 8 + client/src/main.js | 6 +- client/src/pages/Auth/ForgetPassword.vue | 46 + client/src/pages/Auth/Login.vue | 32 +- client/src/pages/Auth/ResetPassword.vue | 77 +- .../Dashboard/Customers/CustomersList.vue | 31 + client/src/pages/Dashboard/Dashboard.vue | 6 +- .../pages/Dashboard/Products/ProductForm.vue | 3 + .../pages/Dashboard/Products/ProductsList.vue | 9 + .../Dashboard/Suppliers/SupplierForm.vue | 0 .../Dashboard/Suppliers/SuppliersList.vue | 0 client/src/router/routes.js | 8 +- client/src/store/index.js | 4 + client/src/store/modules/auth.js | 35 +- client/src/store/modules/customers.js | 77 + client/src/store/modules/items.js | 71 + client/src/store/modules/sidebar.js | 13 +- client/src/style/_element-variables.scss | 994 +++ client/src/style/_reboot.scss | 0 client/src/style/style.scss | 3 + client/src/views/Sidebar/SidebarItem.vue | 6 +- client/src/views/Sidebar/index.vue | 83 +- client/src/views/Topbar.vue | 6 + common/utils.js | 4 + docker/.gitignore | 41 + docker/LICENSE | 21 + docker/README.md | 385 + docker/apache/Dockerfile | 30 + docker/apache/certs/.gitkeep | 0 docker/apache/httpd.conf | 100 + docker/apache/scripts/build-apache.sh | 20 + docker/apache/scripts/run-openssl.sh | 31 + docker/apache/sites/node-https.template | 17 + docker/apache/sites/node.template | 14 + docker/certbot/Dockerfile | 8 + docker/certbot/certs/.gitignore | 1 + docker/certbot/certs/.gitkeep | 0 docker/certbot/letsencrypt/.gitkeep | 0 .../certbot/letsencrypt/.well-known/.gitkeep | 0 docker/certbot/scripts/run-certbot.sh | 6 + docker/composehub.yml | 10 + docker/docker-compose.yml | 54 + docker/docs/CNAME | 1 + docker/docs/css/styles.css | 190 + docker/docs/images/box-icon.png | Bin 0 -> 974 bytes docker/docs/images/favicon.png | Bin 0 -> 609 bytes docker/docs/images/lightning-icon.png | Bin 0 -> 724 bytes docker/docs/images/logo.png | Bin 0 -> 4262 bytes docker/docs/images/nodock.jpg | Bin 0 -> 85665 bytes docker/docs/images/osedea-logo.png | Bin 0 -> 2205 bytes docker/docs/images/tech-logos.png | Bin 0 -> 29346 bytes docker/docs/index.html | 113 + docker/memcached/Dockerfile | 3 + docker/mongo/Dockerfile | 9 + docker/mysql/Dockerfile | 18 + docker/mysql/my.cnf | 2 + docker/nginx/Dockerfile | 23 + docker/nginx/certs/.gitkeep | 0 docker/nginx/nginx.conf | 33 + docker/nginx/scripts/build-nginx.sh | 20 + docker/nginx/scripts/run-openssl.sh | 31 + docker/nginx/sites/node-https.template | 13 + docker/nginx/sites/node.template | 32 + docker/node/Dockerfile | 38 + docker/node/scripts/run-nodock.sh | 21 + docker/postgresql/Dockerfile | 11 + docker/rabbitmq/Dockerfile | 15 + docker/rabbitmq/scripts/build-rabbitmq.sh | 13 + docker/redis/Dockerfile | 5 + docker/redis/redis.conf | 48 + docker/rethinkdb/Dockerfile | 3 + docker/workspace/Dockerfile | 39 + docker/workspace/crontab/root | 2 + server/.babelrc | 6 + server/.env | 14 + server/.env.test | 14 + server/.eslintrc.js | 41 + server/config/index.js | 6 + server/dist/bundle.js | 351 + server/dist/bundle.js.map | 1 + server/knexfile.js | 51 + server/package-lock.json | 7108 +++++++++++++++++ server/package.json | 48 +- server/scripts/run_test_db.sh | 31 + server/server.js | 21 - server/src/app.js | 16 + server/src/database/factories/index.js | 58 + server/src/database/knex.js | 7 + .../20190423085247_create_roles_table.js | 10 + .../20190822214242_create_users_table.js | 20 + ...0190822214247_create_oauth_tokens_table.js | 16 + ...190822214301_create_oauth_clients_table.js | 11 + .../20190822214302_create_settings_table.js | 11 + .../20190822214303_create_items_table.js | 20 + .../20190822214304_create_accounts_table.js | 14 + ...0822214305_create_account_balance_table.js | 11 + ...822214306_create_items_categories_table.js | 13 + ...190822214316_create_item_metadata_table.js | 11 + server/src/http/controllers/Accounts.js | 115 + server/src/http/controllers/Authentication.js | 184 + server/src/http/controllers/ItemCategories.js | 154 + server/src/http/controllers/Items.js | 190 + server/src/http/controllers/OAuth2.js | 23 + server/src/http/controllers/Users.js | 0 server/src/http/index.js | 15 + server/src/http/middleware/asyncMiddleware.js | 9 + server/src/http/middleware/jwtAuth.js | 34 + server/src/models/Account.js | 16 + server/src/models/AccountBalance.js | 0 server/src/models/AccountType.js | 0 server/src/models/Item.js | 30 + server/src/models/ItemCategory.js | 23 + server/src/models/ItemMetadata.js | 23 + server/src/models/OAuthClient.js | 16 + server/src/models/OAuthServerModel.js | 81 + server/src/models/OAuthToken.js | 16 + server/src/models/PasswordReset.js | 16 + server/src/models/Role.js | 31 + server/src/models/Setting.js | 16 + server/src/models/User.js | 26 + server/src/models/bookshelf.js | 17 + server/src/server.js | 15 + server/src/services/mail.js | 14 + server/src/utils.js | 16 + server/tests/docker-compose.yml | 11 + server/tests/models/Item.test.js | 28 + server/tests/models/ItemCategories.test.js | 16 + server/tests/routes/auth.test.js | 170 + server/tests/routes/items.test.js | 176 + server/tests/routes/itemsCategories.test.js | 160 + server/tests/routes/oauth.test.js | 11 + server/tests/routes/roles.test.js | 0 server/tests/routes/users.test.js | 42 + server/tests/testInit.js | 46 + server/webpack.config.js | 52 + 142 files changed, 12674 insertions(+), 64 deletions(-) create mode 100644 .gitignore create mode 100644 .vscode/settings.json create mode 100644 client/src/pages/Auth/ForgetPassword.vue create mode 100644 client/src/pages/Dashboard/Customers/CustomersList.vue create mode 100644 client/src/pages/Dashboard/Products/ProductForm.vue create mode 100644 client/src/pages/Dashboard/Products/ProductsList.vue create mode 100644 client/src/pages/Dashboard/Suppliers/SupplierForm.vue create mode 100644 client/src/pages/Dashboard/Suppliers/SuppliersList.vue create mode 100644 client/src/store/modules/customers.js create mode 100644 client/src/store/modules/items.js create mode 100644 client/src/style/_element-variables.scss create mode 100644 client/src/style/_reboot.scss create mode 100644 client/src/style/style.scss create mode 100644 common/utils.js create mode 100644 docker/.gitignore create mode 100644 docker/LICENSE create mode 100644 docker/README.md create mode 100644 docker/apache/Dockerfile create mode 100644 docker/apache/certs/.gitkeep create mode 100644 docker/apache/httpd.conf create mode 100644 docker/apache/scripts/build-apache.sh create mode 100644 docker/apache/scripts/run-openssl.sh create mode 100644 docker/apache/sites/node-https.template create mode 100644 docker/apache/sites/node.template create mode 100644 docker/certbot/Dockerfile create mode 100644 docker/certbot/certs/.gitignore create mode 100644 docker/certbot/certs/.gitkeep create mode 100644 docker/certbot/letsencrypt/.gitkeep create mode 100644 docker/certbot/letsencrypt/.well-known/.gitkeep create mode 100644 docker/certbot/scripts/run-certbot.sh create mode 100644 docker/composehub.yml create mode 100644 docker/docker-compose.yml create mode 100644 docker/docs/CNAME create mode 100644 docker/docs/css/styles.css create mode 100644 docker/docs/images/box-icon.png create mode 100644 docker/docs/images/favicon.png create mode 100644 docker/docs/images/lightning-icon.png create mode 100644 docker/docs/images/logo.png create mode 100644 docker/docs/images/nodock.jpg create mode 100644 docker/docs/images/osedea-logo.png create mode 100644 docker/docs/images/tech-logos.png create mode 100644 docker/docs/index.html create mode 100644 docker/memcached/Dockerfile create mode 100644 docker/mongo/Dockerfile create mode 100644 docker/mysql/Dockerfile create mode 100644 docker/mysql/my.cnf create mode 100644 docker/nginx/Dockerfile create mode 100644 docker/nginx/certs/.gitkeep create mode 100644 docker/nginx/nginx.conf create mode 100644 docker/nginx/scripts/build-nginx.sh create mode 100644 docker/nginx/scripts/run-openssl.sh create mode 100644 docker/nginx/sites/node-https.template create mode 100644 docker/nginx/sites/node.template create mode 100644 docker/node/Dockerfile create mode 100644 docker/node/scripts/run-nodock.sh create mode 100644 docker/postgresql/Dockerfile create mode 100644 docker/rabbitmq/Dockerfile create mode 100644 docker/rabbitmq/scripts/build-rabbitmq.sh create mode 100644 docker/redis/Dockerfile create mode 100644 docker/redis/redis.conf create mode 100644 docker/rethinkdb/Dockerfile create mode 100644 docker/workspace/Dockerfile create mode 100644 docker/workspace/crontab/root create mode 100644 server/.babelrc create mode 100644 server/.env create mode 100644 server/.env.test create mode 100644 server/.eslintrc.js create mode 100644 server/config/index.js create mode 100644 server/dist/bundle.js create mode 100644 server/dist/bundle.js.map create mode 100644 server/knexfile.js create mode 100644 server/scripts/run_test_db.sh delete mode 100644 server/server.js create mode 100644 server/src/app.js create mode 100644 server/src/database/factories/index.js create mode 100644 server/src/database/knex.js create mode 100644 server/src/database/migrations/20190423085247_create_roles_table.js create mode 100644 server/src/database/migrations/20190822214242_create_users_table.js create mode 100644 server/src/database/migrations/20190822214247_create_oauth_tokens_table.js create mode 100644 server/src/database/migrations/20190822214301_create_oauth_clients_table.js create mode 100644 server/src/database/migrations/20190822214302_create_settings_table.js create mode 100644 server/src/database/migrations/20190822214303_create_items_table.js create mode 100644 server/src/database/migrations/20190822214304_create_accounts_table.js create mode 100644 server/src/database/migrations/20190822214305_create_account_balance_table.js create mode 100644 server/src/database/migrations/20190822214306_create_items_categories_table.js create mode 100644 server/src/database/migrations/20190822214316_create_item_metadata_table.js create mode 100644 server/src/http/controllers/Accounts.js create mode 100644 server/src/http/controllers/Authentication.js create mode 100644 server/src/http/controllers/ItemCategories.js create mode 100644 server/src/http/controllers/Items.js create mode 100644 server/src/http/controllers/OAuth2.js create mode 100644 server/src/http/controllers/Users.js create mode 100644 server/src/http/index.js create mode 100644 server/src/http/middleware/asyncMiddleware.js create mode 100644 server/src/http/middleware/jwtAuth.js create mode 100644 server/src/models/Account.js create mode 100644 server/src/models/AccountBalance.js create mode 100644 server/src/models/AccountType.js create mode 100644 server/src/models/Item.js create mode 100644 server/src/models/ItemCategory.js create mode 100644 server/src/models/ItemMetadata.js create mode 100644 server/src/models/OAuthClient.js create mode 100644 server/src/models/OAuthServerModel.js create mode 100644 server/src/models/OAuthToken.js create mode 100644 server/src/models/PasswordReset.js create mode 100644 server/src/models/Role.js create mode 100644 server/src/models/Setting.js create mode 100644 server/src/models/User.js create mode 100644 server/src/models/bookshelf.js create mode 100644 server/src/server.js create mode 100644 server/src/services/mail.js create mode 100644 server/src/utils.js create mode 100644 server/tests/docker-compose.yml create mode 100644 server/tests/models/Item.test.js create mode 100644 server/tests/models/ItemCategories.test.js create mode 100644 server/tests/routes/auth.test.js create mode 100644 server/tests/routes/items.test.js create mode 100644 server/tests/routes/itemsCategories.test.js create mode 100644 server/tests/routes/oauth.test.js create mode 100644 server/tests/routes/roles.test.js create mode 100644 server/tests/routes/users.test.js create mode 100644 server/tests/testInit.js create mode 100644 server/webpack.config.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..3af0ccb68 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/data diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..20251dd19 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,29 @@ +{ + "eslint.validate": [ + { + "language":"vue", + "autoFix":true + }, + { + "language":"html", + "autoFix":true + }, + { + "language":"javascript", + "autoFix":true + }, + { + "language":"typescript", + "autoFix":true + } + ], + "eslint.alwaysShowStatus": true, + "eslint.workingDirectories": [ + "./client", + "./server" + ], + "editor.useTabStops": false, + "editor.tabSize": 2, + "editor.insertSpaces": true, + +} \ No newline at end of file diff --git a/client/.babelrc b/client/.babelrc index cae24f363..9660663a0 100644 --- a/client/.babelrc +++ b/client/.babelrc @@ -8,7 +8,18 @@ }], "stage-2" ], - "plugins": ["transform-vue-jsx", "transform-runtime"], + "plugins": [ + "transform-vue-jsx", + "transform-runtime", + [ + "component", + { + "libraryName": "element-ui", + "styleLibraryName": "~node_modules/element-theme-chalk/src", + "ext": ".scss" + } + ] + ], "env": { "test": { "presets": ["env", "stage-2"], diff --git a/client/.eslintrc.js b/client/.eslintrc.js index c51a2b74f..637468f46 100644 --- a/client/.eslintrc.js +++ b/client/.eslintrc.js @@ -38,6 +38,7 @@ module.exports = { props: true, ignorePropertyModificationsFor: [ 'state', // for vuex state + 's', 'acc', // for reduce accumulators 'e' // for e.returnvalue ] diff --git a/client/config/index.js b/client/config/index.js index 2ac7088f0..b6ccbe03b 100644 --- a/client/config/index.js +++ b/client/config/index.js @@ -21,7 +21,7 @@ module.exports = { // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. - useEslint: true, + useEslint: false, // If true, eslint errors and warnings will also be shown in the error overlay // in the browser. showEslintErrorsInOverlay: false, diff --git a/client/package-lock.json b/client/package-lock.json index 76f5f6340..a2e4fb98b 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -4,6 +4,35 @@ "lockfileVersion": 1, "requires": true, "dependencies": { + "@babel/helper-module-imports": { + "version": "7.0.0-beta.35", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz", + "integrity": "sha512-vaC1KyIZSuyWb3Lj277fX0pxivyHwuDU4xZsofqgYAbkDxNieMg2vuhzP5AgMweMY7fCQUMTi+BgPqTLjkxXFg==", + "dev": true, + "requires": { + "@babel/types": "7.0.0-beta.35", + "lodash": "^4.2.0" + } + }, + "@babel/types": { + "version": "7.0.0-beta.35", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0-beta.35.tgz", + "integrity": "sha512-y9XT11CozHDgjWcTdxmhSj13rJVXpa5ZXwjjOiTedjaM0ba5ItqdS02t31EhPl7HtOWxsZkYCCUNrSfrOisA6w==", + "dev": true, + "requires": { + "esutils": "^2.0.2", + "lodash": "^4.2.0", + "to-fast-properties": "^2.0.0" + }, + "dependencies": { + "to-fast-properties": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", + "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=", + "dev": true + } + } + }, "@sinonjs/commons": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.4.0.tgz", @@ -807,6 +836,15 @@ "babel-runtime": "^6.22.0" } }, + "babel-plugin-component": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/babel-plugin-component/-/babel-plugin-component-1.1.1.tgz", + "integrity": "sha512-WUw887kJf2GH80Ng/ZMctKZ511iamHNqPhd9uKo14yzisvV7Wt1EckIrb8oq/uCz3B3PpAW7Xfl7AkTLDYT6ag==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "7.0.0-beta.35" + } + }, "babel-plugin-istanbul": { "version": "4.1.6", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz", @@ -4058,6 +4096,11 @@ "integrity": "sha512-xNabEDbMIKPLQd6xgv4nyyeMaWXIKSJr6G51ZhUemHhbz6kjZAYcygA8CvfEcMF+Mt5eLmDWaLmfSOWdQxzBVQ==", "dev": true }, + "element-theme-chalk": { + "version": "2.12.0", + "resolved": "https://registry.npmjs.org/element-theme-chalk/-/element-theme-chalk-2.12.0.tgz", + "integrity": "sha512-q0G2yJErNfiHC+gz/PtqCnufcLqZmYN1c9kHNzStlN6z45CFbRYkTXLnMkj/8G+T3LlaYqoRFvWy5NMq4ltF2A==" + }, "element-ui": { "version": "2.11.1", "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.11.1.tgz", diff --git a/client/package.json b/client/package.json index 5bea04e1f..f0e114f94 100644 --- a/client/package.json +++ b/client/package.json @@ -20,7 +20,8 @@ "vue-axios": "^2.1.4", "vue-router": "^3.0.1", "vuex": "^3.1.1", - "vuex-i18n": "^1.13.1" + "vuex-i18n": "^1.13.1", + "element-theme-chalk": "^2.12.0" }, "devDependencies": { "autoprefixer": "^7.1.2", @@ -28,6 +29,7 @@ "babel-eslint": "^7.2.3", "babel-helper-vue-jsx-merge-props": "^2.0.3", "babel-loader": "^7.1.1", + "babel-plugin-component": "^1.1.1", "babel-plugin-istanbul": "^4.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-runtime": "^6.22.0", diff --git a/client/src/App.vue b/client/src/App.vue index 3e27b1b0f..6e9b8adef 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -9,3 +9,11 @@ export default { name: 'App', }; + + diff --git a/client/src/main.js b/client/src/main.js index 750e1992a..0dc34143d 100644 --- a/client/src/main.js +++ b/client/src/main.js @@ -1,5 +1,5 @@ import Vue from 'vue'; -import ElementUI from 'element-ui'; +import {Form, FormItem, Input} from 'element-ui'; import App from '@/App'; import router from '@/router'; import store from '@/store'; @@ -9,7 +9,9 @@ import '@/plugins/i18n'; Vue.config.productionTip = false; -Vue.use(ElementUI); +Vue.use(Form); +Vue.use(FormItem); +Vue.use(Input); const app = new Vue({ el: '#app', diff --git a/client/src/pages/Auth/ForgetPassword.vue b/client/src/pages/Auth/ForgetPassword.vue new file mode 100644 index 000000000..606fcb1d5 --- /dev/null +++ b/client/src/pages/Auth/ForgetPassword.vue @@ -0,0 +1,46 @@ + + + diff --git a/client/src/pages/Auth/Login.vue b/client/src/pages/Auth/Login.vue index 4c10624fb..fce40ad2c 100644 --- a/client/src/pages/Auth/Login.vue +++ b/client/src/pages/Auth/Login.vue @@ -10,12 +10,23 @@ {{ $t('login') }} - {{ $t('forget_your_password') }} + +
+
+ {{ $t('forget_password') }} +
+
diff --git a/client/src/pages/Auth/ResetPassword.vue b/client/src/pages/Auth/ResetPassword.vue index c2f01374e..1a0c0fd8d 100644 --- a/client/src/pages/Auth/ResetPassword.vue +++ b/client/src/pages/Auth/ResetPassword.vue @@ -1,4 +1,79 @@ + \ No newline at end of file + + {{ $t('reset_the_password') }} + + {{ $t('forget_your_password') }} + + + + + diff --git a/client/src/pages/Dashboard/Customers/CustomersList.vue b/client/src/pages/Dashboard/Customers/CustomersList.vue new file mode 100644 index 000000000..e78f99069 --- /dev/null +++ b/client/src/pages/Dashboard/Customers/CustomersList.vue @@ -0,0 +1,31 @@ + + diff --git a/client/src/pages/Dashboard/Dashboard.vue b/client/src/pages/Dashboard/Dashboard.vue index 6a6e3c197..077d5c696 100644 --- a/client/src/pages/Dashboard/Dashboard.vue +++ b/client/src/pages/Dashboard/Dashboard.vue @@ -26,8 +26,12 @@ export default { diff --git a/client/src/pages/Dashboard/Products/ProductForm.vue b/client/src/pages/Dashboard/Products/ProductForm.vue new file mode 100644 index 000000000..af9fa97fa --- /dev/null +++ b/client/src/pages/Dashboard/Products/ProductForm.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/client/src/pages/Dashboard/Products/ProductsList.vue b/client/src/pages/Dashboard/Products/ProductsList.vue new file mode 100644 index 000000000..a90234bac --- /dev/null +++ b/client/src/pages/Dashboard/Products/ProductsList.vue @@ -0,0 +1,9 @@ + + + diff --git a/client/src/pages/Dashboard/Suppliers/SupplierForm.vue b/client/src/pages/Dashboard/Suppliers/SupplierForm.vue new file mode 100644 index 000000000..e69de29bb diff --git a/client/src/pages/Dashboard/Suppliers/SuppliersList.vue b/client/src/pages/Dashboard/Suppliers/SuppliersList.vue new file mode 100644 index 000000000..e69de29bb diff --git a/client/src/router/routes.js b/client/src/router/routes.js index dd6f901c9..75370f101 100644 --- a/client/src/router/routes.js +++ b/client/src/router/routes.js @@ -7,11 +7,17 @@ const routes = [ '@/pages/Auth/Auth.vue'), children: [ { - name: 'authLogin', + name: 'login', path: '/login', component: () => import(/* webpackChunkName: "login" */ '@/pages/Auth/Login.vue'), }, + { + name: 'forgetPassword', + path: '/forget_password', + component: () => import(/* webpackChunkName: "forget_password" */ + '@/pages/Auth/ForgetPassword.vue'), + }, ], }, { diff --git a/client/src/store/index.js b/client/src/store/index.js index de1e46f01..c622a2e1c 100644 --- a/client/src/store/index.js +++ b/client/src/store/index.js @@ -3,6 +3,8 @@ import Vuex from 'vuex'; import vuexI18n from 'vuex-i18n'; import sidebar from '@/store/modules/sidebar'; import app from '@/store/modules/app'; +import items from '@/store/modules/items'; +import customers from '@/store/modules/customers'; const debug = process.env.NODE_ENV !== 'production'; @@ -12,6 +14,8 @@ const store = new Vuex.Store({ modules: { app, sidebar, + items, + customers, }, strict: debug, }); diff --git a/client/src/store/modules/auth.js b/client/src/store/modules/auth.js index ad8080f11..39349e158 100644 --- a/client/src/store/modules/auth.js +++ b/client/src/store/modules/auth.js @@ -1,9 +1,9 @@ -import ApiService from '~/plugins/api-service'; +import ApiService from '@/plugins/api-service'; -let state = { +const state = { token: localStorage.getItem('token') || '', errors: {}, - role: {} + role: {}, }; const getters = { @@ -14,9 +14,9 @@ const getters = { const actions = { /** - * User login authentication request. + * User login login authentication request. */ - async authRequest({ commit }, { form }) { + async login({ commit }, { form }) { const response = await ApiService.post('auth/login', form); const { data } = response; @@ -27,32 +27,29 @@ const actions = { }, /** - * Send reset password email or SMS. + * Send reset password via email or SMS. */ sendResetPassword({}, { email }) { return ApiService.post('auth/send_reset_password', { email }); }, - /** - * Verify reset password verification code. - */ - verifyResetPasswordToken({ commit, dispatch }, { token }) { - return ApiService.post(`reset/${token}`); - } + newPassword(, { form }) { + return ApiService.post('auth/new_password', form); + }, }; - const mutations = { - - setToken(state, token) { + + setToken(s, token) { localStorage.setItem('token', token); - state.token = token; + s.token = token; }, - removeToken(state) { + removeToken(s) { localStorage.removeItem('token'); - state.token = ''; + s.token = ''; }, }; -export default {state, actions, mutations, getters}; +export default { state, actions, mutations, getters }; + diff --git a/client/src/store/modules/customers.js b/client/src/store/modules/customers.js new file mode 100644 index 000000000..9e66b7f8d --- /dev/null +++ b/client/src/store/modules/customers.js @@ -0,0 +1,77 @@ +import ApiService from '@/plugins/api-service'; + +const state = { + list: {}, + details: [], +}; + +const getters = { + getCustomers: s => s.list, + getCustomer: s => id => s.details.find(i => i.id === id), +}; + +const actions = { + /** + * Fetches customers with current page. + */ + async fetchCustomers({ commit }, { query } = {}) { + const response = await ApiService.post('customers', { params: query }); + const { data } = response; + const { count } = data.pagination; + + commit('setItems', data); + + if (count) { + commit('setSidebarItemCount', { + name: 'customers', count, + }); + } + return data; + }, + + /** + * Fetch the given customer details. + */ + async fetchCustomer({ commit }, { id }) { + const response = await ApiService.get(`customers/${id}`); + const { data } = response; + + commit('setItem', data); + return data; + }, + + /** + * Delete the given customer. + */ + async deleteCustomer({}, { id }) { + return ApiService.delete(`customers/${id}`); + }, + + /** + * Submit the new customer. + */ + async newCustomer({}, { form }) { + return ApiService.post('customers', form); + }, + + /** + * Update details the given customer. + */ + async updateCustomer({}, { form, id }) { + return ApiService.post(`customers/${id}`, form); + }, +}; + +const mutations = { + + setCustomers(s, items) { + s.list = items; + }, + + setCustomer(s, item) { + s.details = s.details.filter(i => i.id !== item.id); + s.details.push(item); + }, +}; + +export default { state, actions, mutations, getters }; diff --git a/client/src/store/modules/items.js b/client/src/store/modules/items.js new file mode 100644 index 000000000..de11014eb --- /dev/null +++ b/client/src/store/modules/items.js @@ -0,0 +1,71 @@ +import ApiService from '@/plugins/api-service'; + +const state = { + list: {}, + details: [], +}; + +const getters = { + getItems: s => s.list, + getItem: s => id => s.details.find(i => i.id === id), +}; + +const actions = { + /** + * Fetches the products/services list. + */ + async fetchItems({ commit }, { query } = {}) { + const response = await ApiService.post('items', { params: query }); + const { data } = response; + const { count } = data.pagination; + + commit('setItems', data); + + if (count) { + commit('setSidebarItemCount', { + name: 'items', count, + }); + } + return data; + }, + + /** + * Fetch the given product/service details. + */ + async fetchItem({ commit }, { id }) { + const response = await ApiService.get(`${id}`); + const { data } = response; + + commit('setItem', data); + return data; + }, + + /** + * Delete the given product/service. + */ + async deleteItem({ commit }, { id }) { + return ApiService.delete(`items/${id}`); + }, + + async newItem({}, { form }) { + return ApiService.post('items', form); + }, + + async updateItem({}, { form, id }) { + return ApiService.post(`items/${id}`, form); + }, +}; + +const mutations = { + + setItems(s, items) { + s.list = items; + }, + + setItem(s, item) { + s.details = s.details.filter(i => i.id !== item.id); + s.details.push(item); + }, +}; + +export default { state, actions, mutations, getters }; diff --git a/client/src/store/modules/sidebar.js b/client/src/store/modules/sidebar.js index d869021ec..383321998 100644 --- a/client/src/store/modules/sidebar.js +++ b/client/src/store/modules/sidebar.js @@ -37,12 +37,15 @@ const actions = { * Set count to the given sidebar item. */ setSidebarItemCount(s, { name, count }) { - s.items.forEach((item) => { + s.items = s.items.map((item) => { + const mapped = { ...item }; + if (item.name === name) { - item.count = count; + mapped.count = count; } - }) - } -} + return mapped; + }); + }, +}; export default { state, getters, actions }; diff --git a/client/src/style/_element-variables.scss b/client/src/style/_element-variables.scss new file mode 100644 index 000000000..551dbe667 --- /dev/null +++ b/client/src/style/_element-variables.scss @@ -0,0 +1,994 @@ +/* Element Chalk Variables */ + +// Special comment for theme configurator +// type|skipAutoTranslation|Category|Order +// skipAutoTranslation 1 + +/* Transition +-------------------------- */ +$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default; +$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; +$--fade-linear-transition: opacity 200ms linear !default; +$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; +$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default; +$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; + +/* Color +-------------------------- */ +/// color|1|Brand Color|0 +$--color-primary: #409EFF !default; +/// color|1|Background Color|4 +$--color-white: #FFFFFF !default; +/// color|1|Background Color|4 +$--color-black: #000000 !default; +$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ +$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ +$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ +$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ +$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ +$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ +$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ +$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ +$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ +/// color|1|Functional Color|1 +$--color-success: #67C23A !default; +/// color|1|Functional Color|1 +$--color-warning: #E6A23C !default; +/// color|1|Functional Color|1 +$--color-danger: #F56C6C !default; +/// color|1|Functional Color|1 +$--color-info: #909399 !default; + +$--color-success-light: mix($--color-white, $--color-success, 80%) !default; +$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; +$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default; +$--color-info-light: mix($--color-white, $--color-info, 80%) !default; + +$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default; +$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default; +$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; +$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; +/// color|1|Font Color|2 +$--color-text-primary: #303133 !default; +/// color|1|Font Color|2 +$--color-text-regular: #606266 !default; +/// color|1|Font Color|2 +$--color-text-secondary: #909399 !default; +/// color|1|Font Color|2 +$--color-text-placeholder: #C0C4CC !default; +/// color|1|Border Color|3 +$--border-color-base: #DCDFE6 !default; +/// color|1|Border Color|3 +$--border-color-light: #E4E7ED !default; +/// color|1|Border Color|3 +$--border-color-lighter: #EBEEF5 !default; +/// color|1|Border Color|3 +$--border-color-extra-light: #F2F6FC !default; + +// Background +/// color|1|Background Color|4 +$--background-color-base: #F5F7FA !default; + +/* Link +-------------------------- */ +$--link-color: $--color-primary-light-2 !default; +$--link-hover-color: $--color-primary !default; + +/* Border +-------------------------- */ +$--border-width-base: 1px !default; +$--border-style-base: solid !default; +$--border-color-hover: $--color-text-placeholder !default; +$--border-base: $--border-width-base $--border-style-base $--border-color-base !default; +/// borderRadius|1|Radius|0 +$--border-radius-base: 4px !default; +/// borderRadius|1|Radius|0 +$--border-radius-small: 2px !default; +/// borderRadius|1|Radius|0 +$--border-radius-circle: 100% !default; +/// borderRadius|1|Radius|0 +$--border-radius-zero: 0 !default; + +// Box-shadow +/// boxShadow|1|Shadow|1 +$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default; +// boxShadow|1|Shadow|1 +$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default; +/// boxShadow|1|Shadow|1 +$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default; + +/* Fill +-------------------------- */ +$--fill-base: $--color-white !default; + +/* Typography +-------------------------- */ +$--font-path: 'fonts' !default; +$--font-display: 'auto' !default; +/// fontSize|1|Font Size|0 +$--font-size-extra-large: 20px !default; +/// fontSize|1|Font Size|0 +$--font-size-large: 18px !default; +/// fontSize|1|Font Size|0 +$--font-size-medium: 16px !default; +/// fontSize|1|Font Size|0 +$--font-size-base: 14px !default; +/// fontSize|1|Font Size|0 +$--font-size-small: 13px !default; +/// fontSize|1|Font Size|0 +$--font-size-extra-small: 12px !default; +/// fontWeight|1|Font Weight|1 +$--font-weight-primary: 500 !default; +/// fontWeight|1|Font Weight|1 +$--font-weight-secondary: 100 !default; +/// fontLineHeight|1|Line Height|2 +$--font-line-height-primary: 24px !default; +/// fontLineHeight|1|Line Height|2 +$--font-line-height-secondary: 16px !default; +$--font-color-disabled-base: #bbb !default; +/* Size +-------------------------- */ +$--size-base: 14px !default; + +/* z-index +-------------------------- */ +$--index-normal: 1 !default; +$--index-top: 1000 !default; +$--index-popper: 2000 !default; + +/* Disable base +-------------------------- */ +$--disabled-fill-base: $--background-color-base !default; +$--disabled-color-base: $--color-text-placeholder !default; +$--disabled-border-base: $--border-color-light !default; + +/* Icon +-------------------------- */ +$--icon-color: #666 !default; +$--icon-color-base: $--color-info !default; + +/* Checkbox +-------------------------- */ +/// fontSize||Font|1 +$--checkbox-font-size: 14px !default; +/// fontWeight||Font|1 +$--checkbox-font-weight: $--font-weight-primary !default; +/// color||Color|0 +$--checkbox-font-color: $--color-text-regular !default; +$--checkbox-input-height: 14px !default; +$--checkbox-input-width: 14px !default; +/// borderRadius||Border|2 +$--checkbox-border-radius: $--border-radius-small !default; +/// color||Color|0 +$--checkbox-background-color: $--color-white !default; +$--checkbox-input-border: $--border-base !default; + +/// color||Color|0 +$--checkbox-disabled-border-color: $--border-color-base !default; +$--checkbox-disabled-input-fill: #edf2fc !default; +$--checkbox-disabled-icon-color: $--color-text-placeholder !default; + +$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default; +$--checkbox-disabled-checked-input-border-color: $--border-color-base !default; +$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default; + +/// color||Color|0 +$--checkbox-checked-font-color: $--color-primary !default; +$--checkbox-checked-input-border-color: $--color-primary !default; +/// color||Color|0 +$--checkbox-checked-background-color: $--color-primary !default; +$--checkbox-checked-icon-color: $--fill-base !default; + +$--checkbox-input-border-color-hover: $--color-primary !default; +/// height||Other|4 +$--checkbox-bordered-height: 40px !default; +/// padding||Spacing|3 +$--checkbox-bordered-padding: 9px 20px 9px 10px !default; +/// padding||Spacing|3 +$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default; +/// padding||Spacing|3 +$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default; +/// padding||Spacing|3 +$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default; +$--checkbox-bordered-medium-input-height: 14px !default; +$--checkbox-bordered-medium-input-width: 14px !default; +/// height||Other|4 +$--checkbox-bordered-medium-height: 36px !default; +$--checkbox-bordered-small-input-height: 12px !default; +$--checkbox-bordered-small-input-width: 12px !default; +/// height||Other|4 +$--checkbox-bordered-small-height: 32px !default; +$--checkbox-bordered-mini-input-height: 12px !default; +$--checkbox-bordered-mini-input-width: 12px !default; +/// height||Other|4 +$--checkbox-bordered-mini-height: 28px !default; + +/// color||Color|0 +$--checkbox-button-checked-background-color: $--color-primary !default; +/// color||Color|0 +$--checkbox-button-checked-font-color: $--color-white !default; +/// color||Color|0 +$--checkbox-button-checked-border-color: $--color-primary !default; + + + +/* Radio +-------------------------- */ +/// fontSize||Font|1 +$--radio-font-size: $--font-size-base !default; +/// fontWeight||Font|1 +$--radio-font-weight: $--font-weight-primary !default; +/// color||Color|0 +$--radio-font-color: $--color-text-regular !default; +$--radio-input-height: 14px !default; +$--radio-input-width: 14px !default; +/// borderRadius||Border|2 +$--radio-input-border-radius: $--border-radius-circle !default; +/// color||Color|0 +$--radio-input-background-color: $--color-white !default; +$--radio-input-border: $--border-base !default; +/// color||Color|0 +$--radio-input-border-color: $--border-color-base !default; +/// color||Color|0 +$--radio-icon-color: $--color-white !default; + +$--radio-disabled-input-border-color: $--disabled-border-base !default; +$--radio-disabled-input-fill: $--disabled-fill-base !default; +$--radio-disabled-icon-color: $--disabled-fill-base !default; + +$--radio-disabled-checked-input-border-color: $--disabled-border-base !default; +$--radio-disabled-checked-input-fill: $--disabled-fill-base !default; +$--radio-disabled-checked-icon-color: $--color-text-placeholder !default; + +/// color||Color|0 +$--radio-checked-font-color: $--color-primary !default; +/// color||Color|0 +$--radio-checked-input-border-color: $--color-primary !default; +/// color||Color|0 +$--radio-checked-input-background-color: $--color-white !default; +/// color||Color|0 +$--radio-checked-icon-color: $--color-primary !default; + +$--radio-input-border-color-hover: $--color-primary !default; + +$--radio-bordered-height: 40px !default; +$--radio-bordered-padding: 12px 20px 0 10px !default; +$--radio-bordered-medium-padding: 10px 20px 0 10px !default; +$--radio-bordered-small-padding: 8px 15px 0 10px !default; +$--radio-bordered-mini-padding: 6px 15px 0 10px !default; +$--radio-bordered-medium-input-height: 14px !default; +$--radio-bordered-medium-input-width: 14px !default; +$--radio-bordered-medium-height: 36px !default; +$--radio-bordered-small-input-height: 12px !default; +$--radio-bordered-small-input-width: 12px !default; +$--radio-bordered-small-height: 32px !default; +$--radio-bordered-mini-input-height: 12px !default; +$--radio-bordered-mini-input-width: 12px !default; +$--radio-bordered-mini-height: 28px !default; + +/// fontSize||Font|1 +$--radio-button-font-size: $--font-size-base !default; +/// color||Color|0 +$--radio-button-checked-background-color: $--color-primary !default; +/// color||Color|0 +$--radio-button-checked-font-color: $--color-white !default; +/// color||Color|0 +$--radio-button-checked-border-color: $--color-primary !default; +$--radio-button-disabled-checked-fill: $--border-color-extra-light !default; + +/* Select +-------------------------- */ +$--select-border-color-hover: $--border-color-hover !default; +$--select-disabled-border: $--disabled-border-base !default; +/// fontSize||Font|1 +$--select-font-size: $--font-size-base !default; +$--select-close-hover-color: $--color-text-secondary !default; + +$--select-input-color: $--color-text-placeholder !default; +$--select-multiple-input-color: #666 !default; +/// color||Color|0 +$--select-input-focus-border-color: $--color-primary !default; +/// fontSize||Font|1 +$--select-input-font-size: 14px !default; + +$--select-option-color: $--color-text-regular !default; +$--select-option-disabled-color: $--color-text-placeholder !default; +$--select-option-disabled-background: $--color-white !default; +/// height||Other|4 +$--select-option-height: 34px !default; +$--select-option-hover-background: $--background-color-base !default; +/// color||Color|0 +$--select-option-selected-font-color: $--color-primary !default; +$--select-option-selected-hover: $--background-color-base !default; + +$--select-group-color: $--color-info !default; +$--select-group-height: 30px !default; +$--select-group-font-size: 12px !default; + +$--select-dropdown-background: $--color-white !default; +$--select-dropdown-shadow: $--box-shadow-light !default; +$--select-dropdown-empty-color: #999 !default; +/// height||Other|4 +$--select-dropdown-max-height: 274px !default; +$--select-dropdown-padding: 6px 0 !default; +$--select-dropdown-empty-padding: 10px 0 !default; +$--select-dropdown-border: solid 1px $--border-color-light !default; + +/* Alert +-------------------------- */ +$--alert-padding: 8px 16px !default; +/// borderRadius||Border|2 +$--alert-border-radius: $--border-radius-base !default; +/// fontSize||Font|1 +$--alert-title-font-size: 13px !default; +/// fontSize||Font|1 +$--alert-description-font-size: 12px !default; +/// fontSize||Font|1 +$--alert-close-font-size: 12px !default; +/// fontSize||Font|1 +$--alert-close-customed-font-size: 13px !default; + +$--alert-success-color: $--color-success-lighter !default; +$--alert-info-color: $--color-info-lighter !default; +$--alert-warning-color: $--color-warning-lighter !default; +$--alert-danger-color: $--color-danger-lighter !default; + +/// height||Other|4 +$--alert-icon-size: 16px !default; +/// height||Other|4 +$--alert-icon-large-size: 28px !default; + +/* MessageBox +-------------------------- */ +/// color||Color|0 +$--messagebox-title-color: $--color-text-primary !default; +$--msgbox-width: 420px !default; +$--msgbox-border-radius: 4px !default; +/// fontSize||Font|1 +$--messagebox-font-size: $--font-size-large !default; +/// fontSize||Font|1 +$--messagebox-content-font-size: $--font-size-base !default; +/// color||Color|0 +$--messagebox-content-color: $--color-text-regular !default; +/// fontSize||Font|1 +$--messagebox-error-font-size: 12px !default; +$--msgbox-padding-primary: 15px !default; +/// color||Color|0 +$--messagebox-success-color: $--color-success !default; +/// color||Color|0 +$--messagebox-info-color: $--color-info !default; +/// color||Color|0 +$--messagebox-warning-color: $--color-warning !default; +/// color||Color|0 +$--messagebox-danger-color: $--color-danger !default; + +/* Message +-------------------------- */ +$--message-shadow: $--box-shadow-base !default; +$--message-min-width: 380px !default; +$--message-background-color: #edf2fc !default; +$--message-padding: 15px 15px 15px 20px !default; +/// color||Color|0 +$--message-close-icon-color: $--color-text-placeholder !default; +/// height||Other|4 +$--message-close-size: 16px !default; +/// color||Color|0 +$--message-close-hover-color: $--color-text-secondary !default; + +/// color||Color|0 +$--message-success-font-color: $--color-success !default; +/// color||Color|0 +$--message-info-font-color: $--color-info !default; +/// color||Color|0 +$--message-warning-font-color: $--color-warning !default; +/// color||Color|0 +$--message-danger-font-color: $--color-danger !default; + +/* Notification +-------------------------- */ +$--notification-width: 330px !default; +/// padding||Spacing|3 +$--notification-padding: 14px 26px 14px 13px !default; +$--notification-radius: 8px !default; +$--notification-shadow: $--box-shadow-light !default; +/// color||Color|0 +$--notification-border-color: $--border-color-lighter !default; +$--notification-icon-size: 24px !default; +$--notification-close-font-size: $--message-close-size !default; +$--notification-group-margin-left: 13px !default; +$--notification-group-margin-right: 8px !default; +/// fontSize||Font|1 +$--notification-content-font-size: $--font-size-base !default; +/// color||Color|0 +$--notification-content-color: $--color-text-regular !default; +/// fontSize||Font|1 +$--notification-title-font-size: 16px !default; +/// color||Color|0 +$--notification-title-color: $--color-text-primary !default; + +/// color||Color|0 +$--notification-close-color: $--color-text-secondary !default; +/// color||Color|0 +$--notification-close-hover-color: $--color-text-regular !default; + +/// color||Color|0 +$--notification-success-icon-color: $--color-success !default; +/// color||Color|0 +$--notification-info-icon-color: $--color-info !default; +/// color||Color|0 +$--notification-warning-icon-color: $--color-warning !default; +/// color||Color|0 +$--notification-danger-icon-color: $--color-danger !default; + +/* Input +-------------------------- */ +$--input-font-size: $--font-size-base !default; +/// color||Color|0 +$--input-font-color: $--color-text-regular !default; +/// height||Other|4 +$--input-width: 140px !default; +/// height||Other|4 +$--input-height: 40px !default; +$--input-border: $--border-base !default; +$--input-border-color: $--border-color-base !default; +/// borderRadius||Border|2 +$--input-border-radius: $--border-radius-base !default; +$--input-border-color-hover: $--border-color-hover !default; +/// color||Color|0 +$--input-background-color: $--color-white !default; +$--input-fill-disabled: $--disabled-fill-base !default; +$--input-color-disabled: $--font-color-disabled-base !default; +/// color||Color|0 +$--input-icon-color: $--color-text-placeholder !default; +/// color||Color|0 +$--input-placeholder-color: $--color-text-placeholder !default; +$--input-max-width: 314px !default; + +$--input-hover-border: $--border-color-hover !default; +$--input-clear-hover-color: $--color-text-secondary !default; + +$--input-focus-border: $--color-primary !default; +$--input-focus-fill: $--color-white !default; + +$--input-disabled-fill: $--disabled-fill-base !default; +$--input-disabled-border: $--disabled-border-base !default; +$--input-disabled-color: $--disabled-color-base !default; +$--input-disabled-placeholder-color: $--color-text-placeholder !default; + +/// fontSize||Font|1 +$--input-medium-font-size: 14px !default; +/// height||Other|4 +$--input-medium-height: 36px !default; +/// fontSize||Font|1 +$--input-small-font-size: 13px !default; +/// height||Other|4 +$--input-small-height: 32px !default; +/// fontSize||Font|1 +$--input-mini-font-size: 12px !default; +/// height||Other|4 +$--input-mini-height: 28px !default; + +/* Cascader +-------------------------- */ +/// color||Color|0 +$--cascader-menu-font-color: $--color-text-regular !default; +/// color||Color|0 +$--cascader-menu-selected-font-color: $--color-primary !default; +$--cascader-menu-fill: $--fill-base !default; +$--cascader-menu-font-size: $--font-size-base !default; +$--cascader-menu-radius: $--border-radius-base !default; +$--cascader-menu-border: solid 1px $--border-color-light !default; +$--cascader-menu-shadow: $--box-shadow-light !default; +$--cascader-node-background-hover: $--background-color-base !default; +$--cascader-node-color-disabled:$--color-text-placeholder !default; +$--cascader-color-empty:$--color-text-placeholder !default; +$--cascader-tag-background: #f0f2f5; + +/* Group +-------------------------- */ +$--group-option-flex: 0 0 (1/5) * 100% !default; +$--group-option-offset-bottom: 12px !default; +$--group-option-fill-hover: rgba($--color-black, 0.06) !default; +$--group-title-color: $--color-black !default; +$--group-title-font-size: $--font-size-base !default; +$--group-title-width: 66px !default; + +/* Tab +-------------------------- */ +$--tab-font-size: $--font-size-base !default; +$--tab-border-line: 1px solid #e4e4e4 !default; +$--tab-header-color-active: $--color-text-secondary !default; +$--tab-header-color-hover: $--color-text-regular !default; +$--tab-header-color: $--color-text-regular !default; +$--tab-header-fill-active: rgba($--color-black, 0.06) !default; +$--tab-header-fill-hover: rgba($--color-black, 0.06) !default; +$--tab-vertical-header-width: 90px !default; +$--tab-vertical-header-count-color: $--color-white !default; +$--tab-vertical-header-count-fill: $--color-text-secondary !default; + +/* Button +-------------------------- */ +/// fontSize||Font|1 +$--button-font-size: $--font-size-base !default; +/// fontWeight||Font|1 +$--button-font-weight: $--font-weight-primary !default; +/// borderRadius||Border|2 +$--button-border-radius: $--border-radius-base !default; +/// padding||Spacing|3 +$--button-padding-vertical: 12px !default; +/// padding||Spacing|3 +$--button-padding-horizontal: 20px !default; + +/// fontSize||Font|1 +$--button-medium-font-size: $--font-size-base !default; +/// borderRadius||Border|2 +$--button-medium-border-radius: $--border-radius-base !default; +/// padding||Spacing|3 +$--button-medium-padding-vertical: 10px !default; +/// padding||Spacing|3 +$--button-medium-padding-horizontal: 20px !default; + +/// fontSize||Font|1 +$--button-small-font-size: 12px !default; +$--button-small-border-radius: #{$--border-radius-base - 1} !default; +/// padding||Spacing|3 +$--button-small-padding-vertical: 9px !default; +/// padding||Spacing|3 +$--button-small-padding-horizontal: 15px !default; +/// fontSize||Font|1 +$--button-mini-font-size: 12px !default; +$--button-mini-border-radius: #{$--border-radius-base - 1} !default; +/// padding||Spacing|3 +$--button-mini-padding-vertical: 7px !default; +/// padding||Spacing|3 +$--button-mini-padding-horizontal: 15px !default; + +/// color||Color|0 +$--button-default-font-color: $--color-text-regular !default; +/// color||Color|0 +$--button-default-background-color: $--color-white !default; +/// color||Color|0 +$--button-default-border-color: $--border-color-base !default; + +/// color||Color|0 +$--button-disabled-font-color: $--color-text-placeholder !default; +/// color||Color|0 +$--button-disabled-background-color: $--color-white !default; +/// color||Color|0 +$--button-disabled-border-color: $--border-color-lighter !default; + +/// color||Color|0 +$--button-primary-border-color: $--color-primary !default; +/// color||Color|0 +$--button-primary-font-color: $--color-white !default; +/// color||Color|0 +$--button-primary-background-color: $--color-primary !default; +/// color||Color|0 +$--button-success-border-color: $--color-success !default; +/// color||Color|0 +$--button-success-font-color: $--color-white !default; +/// color||Color|0 +$--button-success-background-color: $--color-success !default; +/// color||Color|0 +$--button-warning-border-color: $--color-warning !default; +/// color||Color|0 +$--button-warning-font-color: $--color-white !default; +/// color||Color|0 +$--button-warning-background-color: $--color-warning !default; +/// color||Color|0 +$--button-danger-border-color: $--color-danger !default; +/// color||Color|0 +$--button-danger-font-color: $--color-white !default; +/// color||Color|0 +$--button-danger-background-color: $--color-danger !default; +/// color||Color|0 +$--button-info-border-color: $--color-info !default; +/// color||Color|0 +$--button-info-font-color: $--color-white !default; +/// color||Color|0 +$--button-info-background-color: $--color-info !default; + +$--button-hover-tint-percent: 20% !default; +$--button-active-shade-percent: 10% !default; + + +/* cascader +-------------------------- */ +$--cascader-height: 200px !default; + +/* Switch +-------------------------- */ +/// color||Color|0 +$--switch-on-color: $--color-primary !default; +/// color||Color|0 +$--switch-off-color: $--border-color-base !default; +/// fontSize||Font|1 +$--switch-font-size: $--font-size-base !default; +$--switch-core-border-radius: 10px !default; +// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义 +$--switch-width: 40px !default; +// height||Other|4 +$--switch-height: 20px !default; +// height||Other|4 +$--switch-button-size: 16px !default; + +/* Dialog +-------------------------- */ +$--dialog-background-color: $--color-white !default; +$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default; +/// fontSize||Font|1 +$--dialog-title-font-size: $--font-size-large !default; +/// fontSize||Font|1 +$--dialog-content-font-size: 14px !default; +/// fontLineHeight||LineHeight|2 +$--dialog-font-line-height: $--font-line-height-primary !default; +/// padding||Spacing|3 +$--dialog-padding-primary: 20px !default; + +/* Table +-------------------------- */ +/// color||Color|0 +$--table-border-color: $--border-color-lighter !default; +$--table-border: 1px solid $--table-border-color !default; +/// color||Color|0 +$--table-font-color: $--color-text-regular !default; +/// color||Color|0 +$--table-header-font-color: $--color-text-secondary !default; +/// color||Color|0 +$--table-row-hover-background-color: $--background-color-base !default; +$--table-current-row-background-color: $--color-primary-light-9 !default; +/// color||Color|0 +$--table-header-background-color: $--color-white !default; +$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default; + +/* Pagination +-------------------------- */ +/// fontSize||Font|1 +$--pagination-font-size: 13px !default; +/// color||Color|0 +$--pagination-background-color: $--color-white !default; +/// color||Color|0 +$--pagination-font-color: $--color-text-primary !default; +$--pagination-border-radius: 3px !default; +/// color||Color|0 +$--pagination-button-color: $--color-text-primary !default; +/// height||Other|4 +$--pagination-button-width: 35.5px !default; +/// height||Other|4 +$--pagination-button-height: 28px !default; +/// color||Color|0 +$--pagination-button-disabled-color: $--color-text-placeholder !default; +/// color||Color|0 +$--pagination-button-disabled-background-color: $--color-white !default; +/// color||Color|0 +$--pagination-hover-color: $--color-primary !default; + +/* Popup +-------------------------- */ +/// color||Color|0 +$--popup-modal-background-color: $--color-black !default; +/// opacity||Other|1 +$--popup-modal-opacity: 0.5 !default; + +/* Popover +-------------------------- */ +/// color||Color|0 +$--popover-background-color: $--color-white !default; +/// fontSize||Font|1 +$--popover-font-size: $--font-size-base !default; +/// color||Color|0 +$--popover-border-color: $--border-color-lighter !default; +$--popover-arrow-size: 6px !default; +/// padding||Spacing|3 +$--popover-padding: 12px !default; +$--popover-padding-large: 18px 20px !default; +/// fontSize||Font|1 +$--popover-title-font-size: 16px !default; +/// color||Color|0 +$--popover-title-font-color: $--color-text-primary !default; + +/* Tooltip +-------------------------- */ +/// color|1|Color|0 +$--tooltip-fill: $--color-text-primary !default; +/// color|1|Color|0 +$--tooltip-color: $--color-white !default; +/// fontSize||Font|1 +$--tooltip-font-size: 12px !default; +/// color||Color|0 +$--tooltip-border-color: $--color-text-primary !default; +$--tooltip-arrow-size: 6px !default; +/// padding||Spacing|3 +$--tooltip-padding: 10px !default; + +/* Tag +-------------------------- */ +/// color||Color|0 +$--tag-info-color: $--color-info !default; +/// color||Color|0 +$--tag-primary-color: $--color-primary !default; +/// color||Color|0 +$--tag-success-color: $--color-success !default; +/// color||Color|0 +$--tag-warning-color: $--color-warning !default; +/// color||Color|0 +$--tag-danger-color: $--color-danger !default; +/// fontSize||Font|1 +$--tag-font-size: 12px !default; +$--tag-border-radius: 4px !default; +$--tag-padding: 0 10px !default; + +/* Tree +-------------------------- */ +/// color||Color|0 +$--tree-node-hover-background-color: $--background-color-base !default; +/// color||Color|0 +$--tree-font-color: $--color-text-regular !default; +/// color||Color|0 +$--tree-expand-icon-color: $--color-text-placeholder !default; + +/* Dropdown +-------------------------- */ +$--dropdown-menu-box-shadow: $--box-shadow-light !default; +$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default; +$--dropdown-menuItem-hover-color: $--link-color !default; + +/* Badge +-------------------------- */ +/// color||Color|0 +$--badge-background-color: $--color-danger !default; +$--badge-radius: 10px !default; +/// fontSize||Font|1 +$--badge-font-size: 12px !default; +/// padding||Spacing|3 +$--badge-padding: 6px !default; +/// height||Other|4 +$--badge-size: 18px !default; + +/* Card +--------------------------*/ +/// color||Color|0 +$--card-border-color: $--border-color-lighter !default; +$--card-border-radius: 4px !default; +/// padding||Spacing|3 +$--card-padding: 20px !default; + +/* Slider +--------------------------*/ +/// color||Color|0 +$--slider-main-background-color: $--color-primary !default; +/// color||Color|0 +$--slider-runway-background-color: $--border-color-light !default; +$--slider-button-hover-color: mix($--color-primary, black, 97%) !default; +$--slider-stop-background-color: $--color-white !default; +$--slider-disable-color: $--color-text-placeholder !default; +$--slider-margin: 16px 0 !default; +$--slider-border-radius: 3px !default; +/// height|1|Other|4 +$--slider-height: 6px !default; +/// height||Other|4 +$--slider-button-size: 16px !default; +$--slider-button-wrapper-size: 36px !default; +$--slider-button-wrapper-offset: -15px !default; + +/* Steps +--------------------------*/ +$--steps-border-color: $--disabled-border-base !default; +$--steps-border-radius: 4px !default; +$--steps-padding: 20px !default; + +/* Menu +--------------------------*/ +/// fontSize||Font|1 +$--menu-item-font-size: $--font-size-base !default; +/// color||Color|0 +$--menu-item-font-color: $--color-text-primary !default; +/// color||Color|0 +$--menu-background-color: $--color-white !default; +$--menu-item-hover-fill: $--color-primary-light-9 !default; + +/* Rate +--------------------------*/ +$--rate-height: 20px !default; +/// fontSize||Font|1 +$--rate-font-size: $--font-size-base !default; +/// height||Other|3 +$--rate-icon-size: 18px !default; +/// margin||Spacing|2 +$--rate-icon-margin: 6px !default; +$--rate-icon-color: $--color-text-placeholder !default; + +/* DatePicker +--------------------------*/ +$--datepicker-font-color: $--color-text-regular !default; +/// color|1|Color|0 +$--datepicker-off-font-color: $--color-text-placeholder !default; +/// color||Color|0 +$--datepicker-header-font-color: $--color-text-regular !default; +$--datepicker-icon-color: $--color-text-primary !default; +$--datepicker-border-color: $--disabled-border-base !default; +$--datepicker-inner-border-color: #e4e4e4 !default; +/// color||Color|0 +$--datepicker-inrange-background-color: $--border-color-extra-light !default; +/// color||Color|0 +$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default; +/// color||Color|0 +$--datepicker-active-color: $--color-primary !default; +/// color||Color|0 +$--datepicker-hover-font-color: $--color-primary !default; +$--datepicker-cell-hover-color: #fff !default; + +/* Loading +--------------------------*/ +/// height||Other|4 +$--loading-spinner-size: 42px !default; +/// height||Other|4 +$--loading-fullscreen-spinner-size: 50px !default; + +/* Scrollbar +--------------------------*/ +$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default; +$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default; + +/* Carousel +--------------------------*/ +/// fontSize||Font|1 +$--carousel-arrow-font-size: 12px !default; +$--carousel-arrow-size: 36px !default; +$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default; +$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default; +/// width||Other|4 +$--carousel-indicator-width: 30px !default; +/// height||Other|4 +$--carousel-indicator-height: 2px !default; +$--carousel-indicator-padding-horizontal: 4px !default; +$--carousel-indicator-padding-vertical: 12px !default; +$--carousel-indicator-out-color: $--border-color-hover !default; + +/* Collapse +--------------------------*/ +/// color||Color|0 +$--collapse-border-color: $--border-color-lighter !default; +/// height||Other|4 +$--collapse-header-height: 48px !default; +/// color||Color|0 +$--collapse-header-background-color: $--color-white !default; +/// color||Color|0 +$--collapse-header-font-color: $--color-text-primary !default; +/// fontSize||Font|1 +$--collapse-header-font-size: 13px !default; +/// color||Color|0 +$--collapse-content-background-color: $--color-white !default; +/// fontSize||Font|1 +$--collapse-content-font-size: 13px !default; +/// color||Color|0 +$--collapse-content-font-color: $--color-text-primary !default; + +/* Transfer +--------------------------*/ +$--transfer-border-color: $--border-color-lighter !default; +$--transfer-border-radius: $--border-radius-base !default; +/// height||Other|4 +$--transfer-panel-width: 200px !default; +/// height||Other|4 +$--transfer-panel-header-height: 40px !default; +/// color||Color|0 +$--transfer-panel-header-background-color: $--background-color-base !default; +/// height||Other|4 +$--transfer-panel-footer-height: 40px !default; +/// height||Other|4 +$--transfer-panel-body-height: 246px !default; +/// height||Other|4 +$--transfer-item-height: 30px !default; +/// height||Other|4 +$--transfer-filter-height: 32px !default; + +/* Header + --------------------------*/ +$--header-padding: 0 20px !default; + +/* Footer +--------------------------*/ +$--footer-padding: 0 20px !default; + +/* Main +--------------------------*/ +$--main-padding: 20px !default; + +/* Timeline +--------------------------*/ +$--timeline-node-size-normal: 12px !default; +$--timeline-node-size-large: 14px !default; +$--timeline-node-color: $--border-color-light !default; + +/* Backtop +--------------------------*/ +/// color||Color|0 +$--backtop-background-color: $--color-white !default; +/// color||Color|0 +$--backtop-font-color: $--color-primary !default; +/// color||Color|0 +$--backtop-hover-background-color: $--border-color-extra-light !default; + +/* Link +--------------------------*/ +/// fontSize||Font|1 +$--link-font-size: $--font-size-base !default; +/// fontWeight||Font|1 +$--link-font-weight: $--font-weight-primary !default; +/// color||Color|0 +$--link-default-font-color: $--color-text-regular !default; +/// color||Color|0 +$--link-default-active-color: $--color-primary !default; +/// color||Color|0 +$--link-disabled-font-color: $--color-text-placeholder !default; +/// color||Color|0 +$--link-primary-font-color: $--color-primary !default; +/// color||Color|0 +$--link-success-font-color: $--color-success !default; +/// color||Color|0 +$--link-warning-font-color: $--color-warning !default; +/// color||Color|0 +$--link-danger-font-color: $--color-danger !default; +/// color||Color|0 +$--link-info-font-color: $--color-info !default; +/* Calendar +--------------------------*/ +/// border||Other|4 +$--calendar-border: $--table-border !default; +/// color||Other|4 +$--calendar-selected-background-color: #F2F8FE !default; +$--calendar-cell-width: 85px !default; + +/* Form +-------------------------- */ +/// fontSize||Font|1 +$--form-label-font-size: $--font-size-base !default; + +/* Avatar +--------------------------*/ +/// color||Color|0 +$--avatar-font-color: #fff !default; +/// color||Color|0 +$--avatar-background-color: #C0C4CC !default; +/// fontSize||Font Size|1 +$--avatar-text-font-size: 14px !default; +/// fontSize||Font Size|1 +$--avatar-icon-font-size: 18px !default; +/// borderRadius||Border|2 +$--avatar-border-radius: $--border-radius-base !default; +/// size|1|Avatar Size|3 +$--avatar-large-size: 40px !default; +/// size|1|Avatar Size|3 +$--avatar-medium-size: 36px !default; +/// size|1|Avatar Size|3 +$--avatar-small-size: 28px !default; + +/* Break-point +--------------------------*/ +$--sm: 768px !default; +$--md: 992px !default; +$--lg: 1200px !default; +$--xl: 1920px !default; + +$--breakpoints: ( + 'xs' : (max-width: $--sm - 1), + 'sm' : (min-width: $--sm), + 'md' : (min-width: $--md), + 'lg' : (min-width: $--lg), + 'xl' : (min-width: $--xl) +); + +$--breakpoints-spec: ( + 'xs-only' : (max-width: $--sm - 1), + 'sm-and-up' : (min-width: $--sm), + 'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})", + 'sm-and-down': (max-width: $--md - 1), + 'md-and-up' : (min-width: $--md), + 'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})", + 'md-and-down': (max-width: $--lg - 1), + 'lg-and-up' : (min-width: $--lg), + 'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})", + 'lg-and-down': (max-width: $--xl - 1), + 'xl-only' : (min-width: $--xl), +); diff --git a/client/src/style/_reboot.scss b/client/src/style/_reboot.scss new file mode 100644 index 000000000..e69de29bb diff --git a/client/src/style/style.scss b/client/src/style/style.scss new file mode 100644 index 000000000..58cfc25a1 --- /dev/null +++ b/client/src/style/style.scss @@ -0,0 +1,3 @@ + +@import 'element-variables'; +@import 'reboot'; \ No newline at end of file diff --git a/client/src/views/Sidebar/SidebarItem.vue b/client/src/views/Sidebar/SidebarItem.vue index de2fd8825..161223fe2 100644 --- a/client/src/views/Sidebar/SidebarItem.vue +++ b/client/src/views/Sidebar/SidebarItem.vue @@ -1,11 +1,11 @@ diff --git a/client/src/views/Sidebar/index.vue b/client/src/views/Sidebar/index.vue index 9d3e67bed..e12a9a1f2 100644 --- a/client/src/views/Sidebar/index.vue +++ b/client/src/views/Sidebar/index.vue @@ -3,7 +3,7 @@
@@ -12,6 +12,8 @@
+
+
+ +
+
+ +
+ + +
@@ -44,11 +57,73 @@ export default { }; - diff --git a/client/src/views/Topbar.vue b/client/src/views/Topbar.vue index d471972d0..e5b3cd0e3 100644 --- a/client/src/views/Topbar.vue +++ b/client/src/views/Topbar.vue @@ -1,5 +1,9 @@