mirror of
https://github.com/mokuappio/serverless-invoices.git
synced 2025-10-27 07:51:08 -04:00
Init commit
This commit is contained in:
Marek Fraczyk
2
.browserslistrc
Normal file
2
.browserslistrc
Normal file
@ -0,0 +1,2 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
7
.editorconfig
Normal file
7
.editorconfig
Normal file
@ -0,0 +1,7 @@
|
||||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
max_line_length = 100
|
||||
33
.eslintrc.js
Normal file
33
.eslintrc.js
Normal file
@ -0,0 +1,33 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true,
|
||||
},
|
||||
extends: [
|
||||
'plugin:vue/essential',
|
||||
'@vue/airbnb',
|
||||
],
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
'consistent-return': 'off',
|
||||
'no-param-reassign': 'off',
|
||||
'no-prototype-builtins': 'off',
|
||||
camelcase: 'off',
|
||||
'class-methods-use-this': 'off',
|
||||
'no-plusplus': 'off',
|
||||
'max-len': 'off',
|
||||
'import/prefer-default-export': 'off',
|
||||
radix: 'off',
|
||||
'prefer-destructuring': 'off',
|
||||
'no-mixed-operators': 'off',
|
||||
'vue/require-v-for-key': 'off',
|
||||
'import/extensions': 'off',
|
||||
'linebreak-style': ['off'],
|
||||
'object-shorthand': 'off',
|
||||
'import/no-cycle': 'off'
|
||||
},
|
||||
parserOptions: {
|
||||
parser: 'babel-eslint',
|
||||
},
|
||||
};
|
||||
25
.gitignore
vendored
Normal file
25
.gitignore
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
src/config/app.config.js
|
||||
public/.htaccess
|
||||
vue.config.js
|
||||
29
README.md
Normal file
29
README.md
Normal file
@ -0,0 +1,29 @@
|
||||
# moku serverless invoices
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Run your tests
|
||||
```
|
||||
npm run test
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app',
|
||||
],
|
||||
};
|
||||
13361
package-lock.json
generated
Normal file
13361
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
40
package.json
Normal file
40
package.json
Normal file
@ -0,0 +1,40 @@
|
||||
{
|
||||
"name": "serverless-invoices",
|
||||
"version": "0.1.0",
|
||||
"private": false,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vuex-orm/core": "^0.36.3",
|
||||
"@vuex-orm/plugin-change-flags": "https://github.com/mareksmakosz/plugin-change-flags.git",
|
||||
"bootstrap": "^4.5.2",
|
||||
"bootstrap-vue": "^2.17.3",
|
||||
"core-js": "^2.6.5",
|
||||
"dayjs": "^1.10.3",
|
||||
"es6-promise": "^4.2.6",
|
||||
"localforage": "^1.9.0",
|
||||
"lodash": "^4.17.20",
|
||||
"vue": "^2.6.10",
|
||||
"vue-autosuggest": "^2.2.0",
|
||||
"vue-multiselect": "^2.1.6",
|
||||
"vue-notification": "^1.3.16",
|
||||
"vue-router": "^3.0.3",
|
||||
"vue2-datepicker": "^3.7.0",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.7.0",
|
||||
"@vue/cli-plugin-eslint": "^3.7.0",
|
||||
"@vue/cli-service": "^3.7.0",
|
||||
"@vue/eslint-config-airbnb": "^4.0.0",
|
||||
"babel-eslint": "^10.0.1",
|
||||
"eslint": "^5.16.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"node-sass": "^4.14.0",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue-template-compiler": "^2.5.21"
|
||||
}
|
||||
}
|
||||
5
postcss.config.js
Normal file
5
postcss.config.js
Normal file
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
9
public/.htaccess.example
Normal file
9
public/.htaccess.example
Normal file
@ -0,0 +1,9 @@
|
||||
<IfModule mod_rewrite.c>
|
||||
RewriteEngine On
|
||||
RewriteBase /
|
||||
RewriteRule ^index\.html$ - [L]
|
||||
|
||||
RewriteCond %{REQUEST_FILENAME} !-f
|
||||
RewriteCond %{REQUEST_FILENAME} !-d
|
||||
RewriteRule . index.html [L]
|
||||
</IfModule>
|
||||
BIN
public/android-chrome-192x192.png
Normal file
BIN
public/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/android-chrome-384x384.png
Normal file
BIN
public/android-chrome-384x384.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
public/apple-touch-icon.png
Normal file
BIN
public/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
9
public/browserconfig.xml
Normal file
9
public/browserconfig.xml
Normal file
@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig>
|
||||
<msapplication>
|
||||
<tile>
|
||||
<square150x150logo src="/mstile-150x150.png"/>
|
||||
<TileColor>#da532c</TileColor>
|
||||
</tile>
|
||||
</msapplication>
|
||||
</browserconfig>
|
||||
BIN
public/favicon-16x16.png
Normal file
BIN
public/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 998 B |
BIN
public/favicon-32x32.png
Normal file
BIN
public/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
26
public/index.html
Normal file
26
public/index.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>Serverless Invoices</title>
|
||||
|
||||
<!-- Google Material Icons -->
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Round" rel="stylesheet">
|
||||
|
||||
<!-- Google Fonts Work Sans -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<!-- Google Fonts Roboto - only a subset of characters for time duration -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap&text=0123456789%3a" rel="stylesheet">
|
||||
</head>
|
||||
<body class="scrollbar">
|
||||
<noscript>
|
||||
<strong>We're sorry but Serverless Invoices doesn't work properly without JavaScript enabled. Please enable it to
|
||||
continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
BIN
public/mstile-150x150.png
Normal file
BIN
public/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
27
public/safari-pinned-tab.svg
Normal file
27
public/safari-pinned-tab.svg
Normal file
@ -0,0 +1,27 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="420.000000pt" height="420.000000pt" viewBox="0 0 420.000000 420.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.11, written by Peter Selinger 2001-2013
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,420.000000) scale(0.100000,-0.100000)"
|
||||
fill="#000000" stroke="none">
|
||||
<path d="M970 2940 c-154 -40 -274 -120 -348 -230 -23 -35 -42 -59 -43 -54 -5
|
||||
42 -16 203 -18 257 -1 15 -16 17 -161 17 l-160 0 0 -845 0 -845 181 2 182 3 2
|
||||
510 c1 281 5 522 9 536 22 93 68 181 125 238 49 49 106 91 125 91 8 0 17 4 20
|
||||
8 11 19 117 35 193 29 167 -12 274 -106 299 -264 5 -26 9 -51 10 -55 1 -5 2
|
||||
-253 3 -553 l1 -545 180 0 180 0 1 478 c1 519 2 553 18 595 6 16 9 33 5 38 -3
|
||||
5 0 9 7 9 7 0 10 3 6 6 -8 8 49 112 86 154 16 19 50 49 75 67 180 130 472 78
|
||||
549 -97 38 -86 40 -122 39 -692 l-1 -558 183 0 183 0 -4 613 c-2 336 -7 626
|
||||
-11 642 -23 93 -55 170 -91 215 -50 63 -146 147 -195 171 -124 60 -188 74
|
||||
-335 72 -248 -3 -458 -115 -556 -297 l-17 -30 -21 42 c-66 129 -192 221 -371
|
||||
269 -83 22 -251 24 -330 3z"/>
|
||||
<path d="M3360 2153 c-99 -16 -186 -60 -253 -126 -90 -89 -128 -197 -123 -346
|
||||
4 -108 10 -132 46 -206 26 -54 75 -114 125 -154 95 -77 309 -112 455 -75 223
|
||||
57 352 243 337 487 -6 102 -34 182 -88 254 -46 62 -137 125 -213 149 -49 15
|
||||
-231 26 -286 17z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
19
public/site.webmanifest
Normal file
19
public/site.webmanifest
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "",
|
||||
"short_name": "",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/android-chrome-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "/android-chrome-384x384.png",
|
||||
"sizes": "384x384",
|
||||
"type": "image/png"
|
||||
}
|
||||
],
|
||||
"theme_color": "#eceff1",
|
||||
"background_color": "#eceff1",
|
||||
"display": "standalone"
|
||||
}
|
||||
36
src/App.vue
Normal file
36
src/App.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div id="app"
|
||||
class="min-vh-100"
|
||||
:class="$route.name">
|
||||
<transition name="fade" mode="out-in">
|
||||
<router-view/>
|
||||
</transition>
|
||||
<notifications position="bottom center" classes="snackbar" width="332"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
created() {
|
||||
this.pauseAnimationsUntilLoaded();
|
||||
},
|
||||
methods: {
|
||||
jsLoaded() {
|
||||
document.body.classList.remove('js-loading');
|
||||
},
|
||||
pauseAnimationsUntilLoaded() {
|
||||
document.body.classList.add('js-loading');
|
||||
window.addEventListener('load', this.jsLoaded, false);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import './assets/scss/variables';
|
||||
@import '../node_modules/bootstrap/scss/bootstrap';
|
||||
@import '../node_modules/bootstrap-vue/dist/bootstrap-vue.min.css';
|
||||
@import './assets/scss/app';
|
||||
</style>
|
||||
7
src/assets/scss/_alerts.scss
Normal file
7
src/assets/scss/_alerts.scss
Normal file
@ -0,0 +1,7 @@
|
||||
.alert {
|
||||
&-secondary {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--shade);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
89
src/assets/scss/_animations.scss
Normal file
89
src/assets/scss/_animations.scss
Normal file
@ -0,0 +1,89 @@
|
||||
@keyframes bump-in {
|
||||
0% {
|
||||
transform: scale(0.9);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulsate {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
70% {
|
||||
opacity: 0.4;
|
||||
}
|
||||
90% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bump {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
90% {
|
||||
transform: scale(1);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-up-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(0, 56px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-left-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(32px, 0);
|
||||
}
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: .2;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0% {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 4px);
|
||||
}
|
||||
}
|
||||
21
src/assets/scss/_backdrops.scss
Normal file
21
src/assets/scss/_backdrops.scss
Normal file
@ -0,0 +1,21 @@
|
||||
.backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1038;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background-color: $modal-backdrop-bg;
|
||||
opacity: $modal-backdrop-opacity;
|
||||
transition: opacity .4s $base-ease;
|
||||
visibility: visible;
|
||||
&.in {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
83
src/assets/scss/_buttons.scss
Normal file
83
src/assets/scss/_buttons.scss
Normal file
@ -0,0 +1,83 @@
|
||||
.btn {
|
||||
border-width: 0;
|
||||
|
||||
&-sm {
|
||||
&.btn--icon-left {
|
||||
padding-left: $btn-padding-x-sm / 2;
|
||||
}
|
||||
}
|
||||
|
||||
&-outline-secondary {
|
||||
border-width: $btn-border-width;
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
&-primary {
|
||||
color: var(--bg-primary);
|
||||
background-color: var(--primary);
|
||||
|
||||
&:hover, &focus {
|
||||
color: var(--bg-primary);
|
||||
background-color: var(--primary-darken);
|
||||
}
|
||||
}
|
||||
|
||||
&-light {
|
||||
color: var(--text-primary);
|
||||
background-color: transparent;
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active, {
|
||||
color: var(--text-primary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--text-caption);
|
||||
}
|
||||
}
|
||||
|
||||
&-outline-dark {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--text-primary);
|
||||
background-color: transparent;
|
||||
border-width: $btn-border-width;
|
||||
|
||||
&:not(:disabled):not(.disabled):active,
|
||||
&:not(:disabled):not(.disabled).active, {
|
||||
color: var(--text-primary);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--text-caption);
|
||||
}
|
||||
}
|
||||
|
||||
&-success {
|
||||
&--light {
|
||||
color: $success;
|
||||
background-color: rgba($success, 0.07);
|
||||
|
||||
&:hover, &:active, &:focus {
|
||||
color: $success;
|
||||
background-color: rgba($success, 0.07);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-link {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
&--fab {
|
||||
position: fixed;
|
||||
bottom: 32px;
|
||||
right: 32px;
|
||||
z-index: 1;
|
||||
border-radius: 99px;
|
||||
box-shadow: $box-shadow-light-3;
|
||||
}
|
||||
}
|
||||
14
src/assets/scss/_cards.scss
Normal file
14
src/assets/scss/_cards.scss
Normal file
@ -0,0 +1,14 @@
|
||||
.card {
|
||||
box-shadow: $box-shadow-light-1;
|
||||
border-color: transparent;
|
||||
border-radius: $border-radius-large;
|
||||
border-width: 0;
|
||||
|
||||
&-header {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
61
src/assets/scss/_checkboxes.scss
Normal file
61
src/assets/scss/_checkboxes.scss
Normal file
@ -0,0 +1,61 @@
|
||||
.custom-checkbox {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
min-height: 1.25em;
|
||||
|
||||
.custom-control-label {
|
||||
&:before, &:after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
}
|
||||
|
||||
&:after {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&--rounded {
|
||||
.custom-control-label {
|
||||
&:before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--lg {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
min-height: 1.5em;
|
||||
|
||||
.custom-control-label {
|
||||
&:before, &:after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--caption {
|
||||
.custom-control-input {
|
||||
&:checked {
|
||||
~ .custom-control-label {
|
||||
&:before {
|
||||
background-color: $gray-400;
|
||||
border-color: $gray-400;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--narrow {
|
||||
&.custom-control {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/assets/scss/_dropdowns.scss
Normal file
11
src/assets/scss/_dropdowns.scss
Normal file
@ -0,0 +1,11 @@
|
||||
.dropdown {
|
||||
&-menu {
|
||||
@extend .bg-base;
|
||||
border-color: transparent;
|
||||
box-shadow: $box-shadow-light-2;
|
||||
}
|
||||
|
||||
&-item {
|
||||
transition: all 0.15s ease-out;
|
||||
}
|
||||
}
|
||||
6
src/assets/scss/_forms.scss
Normal file
6
src/assets/scss/_forms.scss
Normal file
@ -0,0 +1,6 @@
|
||||
.invalid-feedback {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--error-darken);
|
||||
}
|
||||
15
src/assets/scss/_indicators.scss
Normal file
15
src/assets/scss/_indicators.scss
Normal file
@ -0,0 +1,15 @@
|
||||
.indicator {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
vertical-align: middle;
|
||||
|
||||
&--circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&--sm {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
63
src/assets/scss/_modals.scss
Normal file
63
src/assets/scss/_modals.scss
Normal file
@ -0,0 +1,63 @@
|
||||
.modal {
|
||||
&-dialog {
|
||||
&.modal-lg {
|
||||
@include media-breakpoint-up(sm) {
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.fade {
|
||||
&-slide-horizontal {
|
||||
.modal-dialog {
|
||||
transform: translate(32px, 0);
|
||||
}
|
||||
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-slide-vertical {
|
||||
.modal-dialog {
|
||||
transform: translate(0, 16px);
|
||||
}
|
||||
|
||||
&.show {
|
||||
.modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.high {
|
||||
.modal-dialog {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
|
||||
.modal-content {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.right {
|
||||
.modal-dialog {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
&-backdrop {
|
||||
opacity: $modal-backdrop-opacity;
|
||||
}
|
||||
|
||||
&-content {
|
||||
@include media-breakpoint-up(sm) {
|
||||
box-shadow: $modal-content-box-shadow-sm-up;
|
||||
}
|
||||
}
|
||||
}
|
||||
5
src/assets/scss/_navs.scss
Normal file
5
src/assets/scss/_navs.scss
Normal file
@ -0,0 +1,5 @@
|
||||
.nav-pills {
|
||||
.nav-link {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
53
src/assets/scss/_scaffolding.scss
Normal file
53
src/assets/scss/_scaffolding.scss
Normal file
@ -0,0 +1,53 @@
|
||||
.app {
|
||||
&__content {
|
||||
padding-top: 32px;
|
||||
padding-right: 66px;
|
||||
padding-left: 66px;
|
||||
will-change: padding-left;
|
||||
transition: padding-left 0.2s $base-ease;
|
||||
|
||||
//@include media-breakpoint-up(xl) {
|
||||
// padding-left: $sidebar-width + ($grid-gutter-width * 2);
|
||||
// &.app__content--sidebar-collapsed {
|
||||
// padding-left: 66px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//&--sheet-open {
|
||||
// @include media-breakpoint-up(xl) {
|
||||
// padding-right: $sheet-width + ($grid-gutter-width * 2);
|
||||
// }
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace {
|
||||
.app {
|
||||
&__content {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-left: $sidebar-width + ($grid-gutter-width * 2);
|
||||
&.app__content--sidebar-collapsed {
|
||||
padding-left: 66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: fixed;
|
||||
top: 16px;
|
||||
z-index: 2;
|
||||
|
||||
&--left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&--right {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
18
src/assets/scss/_snackbars.scss
Normal file
18
src/assets/scss/_snackbars.scss
Normal file
@ -0,0 +1,18 @@
|
||||
.snackbar {
|
||||
&.vue-notification-template {
|
||||
display: flex;
|
||||
min-height: 48px;
|
||||
align-items: center;
|
||||
padding: ($spacer / 4) ($spacer);
|
||||
margin-bottom: $spacer / 4;
|
||||
border-radius: $border-radius-lg;
|
||||
box-shadow: $box-shadow-2;
|
||||
background-color: $dark;
|
||||
font-size: .875rem;
|
||||
color: $light-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.vue-notification-wrapper {
|
||||
padding: 0 16px !important;
|
||||
}
|
||||
41
src/assets/scss/_surfaces.scss
Normal file
41
src/assets/scss/_surfaces.scss
Normal file
@ -0,0 +1,41 @@
|
||||
.dp {
|
||||
&--00 {
|
||||
background-color: var(--dp00);
|
||||
}
|
||||
|
||||
&--01 {
|
||||
background-color: var(--dp01);
|
||||
}
|
||||
|
||||
&--02 {
|
||||
background-color: var(--dp02);
|
||||
}
|
||||
|
||||
&--03 {
|
||||
background-color: var(--dp03);
|
||||
}
|
||||
|
||||
&--04 {
|
||||
background-color: var(--dp04);
|
||||
}
|
||||
|
||||
&--06 {
|
||||
background-color: var(--dp06);
|
||||
}
|
||||
|
||||
&--08 {
|
||||
background-color: var(--dp08);
|
||||
}
|
||||
|
||||
&--12 {
|
||||
background-color: var(--dp12);
|
||||
}
|
||||
|
||||
&--16 {
|
||||
background-color: var(--dp16);
|
||||
}
|
||||
|
||||
&--24 {
|
||||
background-color: var(--dp24);
|
||||
}
|
||||
}
|
||||
31
src/assets/scss/_tables.scss
Normal file
31
src/assets/scss/_tables.scss
Normal file
@ -0,0 +1,31 @@
|
||||
.table {
|
||||
&--card {
|
||||
background-color: var(--dp02);
|
||||
border-radius: $card-border-radius;
|
||||
box-shadow: $box-shadow-light-1;
|
||||
}
|
||||
|
||||
thead {
|
||||
th {
|
||||
padding-top: 1.5em;
|
||||
padding-bottom: .75em;
|
||||
font-size: .875rem;
|
||||
border-top-color: transparent;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
&.align-middle {
|
||||
td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
tr {
|
||||
transition: background-color $link-transition-duration $base-ease;
|
||||
}
|
||||
}
|
||||
59
src/assets/scss/_transitions.scss
Normal file
59
src/assets/scss/_transitions.scss
Normal file
@ -0,0 +1,59 @@
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s $base-ease;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slideFade-enter-active,
|
||||
.slideFade-leave-active {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
transition: all 0.2s $base-ease;
|
||||
}
|
||||
|
||||
.slideFade-enter,
|
||||
.slideFade-leave-to {
|
||||
transform: translate(-4px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slideLeftFade-enter-active,
|
||||
.slideLeftFade-leave-active {
|
||||
transform: translate(0, 0);
|
||||
opacity: 1;
|
||||
transition: all 0.2s $base-ease;
|
||||
}
|
||||
|
||||
.slideLeftFade-enter,
|
||||
.slideLeftFade-leave-to {
|
||||
transform: translate(32px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
.slideFromTopFade-enter-active,
|
||||
.slideFromTopFade-leave-active {
|
||||
transform: translate(0, 16px);
|
||||
opacity: 1;
|
||||
transition: all 0.2s $base-ease;
|
||||
}
|
||||
|
||||
.slideFromTopFade-enter,
|
||||
.slideFromTopFade-leave-to {
|
||||
transform: translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.bump-enter-active,
|
||||
.bump-leave-active {
|
||||
animation: bump-in .5s;
|
||||
}
|
||||
|
||||
.bump-enter,
|
||||
.bump-leave-to {
|
||||
animation: bump-in .5s reverse;
|
||||
}
|
||||
73
src/assets/scss/_type.scss
Normal file
73
src/assets/scss/_type.scss
Normal file
@ -0,0 +1,73 @@
|
||||
.material-icons.md-10 {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.material-icons.md-14 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.material-icons.md-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.material-icons.md-24 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.material-icons.md-36 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.material-icons.md-48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
/* Rules for using icons as black on a light background. */
|
||||
.material-icons.md-dark {
|
||||
color: rgba(0, 0, 0, 0.54);
|
||||
}
|
||||
|
||||
.material-icons.md-dark.md-inactive {
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
}
|
||||
|
||||
/* Rules for using icons as white on a dark background. */
|
||||
.material-icons.md-light {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.material-icons.md-light.md-inactive {
|
||||
color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.line-through {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.text-caption {
|
||||
color: var(--text-caption);
|
||||
|
||||
.form-control {
|
||||
color: var(--text-caption);
|
||||
}
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: var(--primary) !important;
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--orange) !important;
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color: var(--text-primary) !important;
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--text-secondary) !important;
|
||||
}
|
||||
141
src/assets/scss/_utilities.scss
Normal file
141
src/assets/scss/_utilities.scss
Normal file
@ -0,0 +1,141 @@
|
||||
.js-loading *,
|
||||
.js-loading *:before,
|
||||
.js-loading *:after {
|
||||
animation-play-state: paused !important;
|
||||
}
|
||||
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $body-bg;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.scaling-svg-container {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
height: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
padding-bottom: 100%;
|
||||
/* override this inline for aspect ratio other than square */
|
||||
}
|
||||
|
||||
.scaling-svg {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.border-0 {
|
||||
.form-control {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.pulsate {
|
||||
animation-name: pulsate;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.bump {
|
||||
animation-name: bump;
|
||||
animation-duration: 2s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.bg-gradient-gray {
|
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,eceff1+100 */
|
||||
background: rgb(255, 255, 255); /* Old browsers */
|
||||
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(236, 239, 241, 1) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(236, 239, 241, 1) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(236, 239, 241, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eceff1', GradientType=1); /* IE6-9 fallback on horizontal gradient */
|
||||
}
|
||||
|
||||
.min-vh-50 {
|
||||
min-height: 50vh;
|
||||
}
|
||||
|
||||
.break-line {
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar {
|
||||
// scrollbar styles
|
||||
scrollbar-color: var(--text-caption);
|
||||
scrollbar-width: 12px;
|
||||
scrollbar-gutter: always;
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--shade);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--text-caption);
|
||||
&:hover {
|
||||
background: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-base {
|
||||
> * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
&:before {
|
||||
background-color: var(--bg-primary);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
background-color: inherit;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-shade {
|
||||
background-color: var(--shade) !important;
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: var(--text-secondary) !important;
|
||||
}
|
||||
|
||||
.bg-success {
|
||||
background-color: var(--success) !important;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: var(--text-primary) !important;
|
||||
}
|
||||
342
src/assets/scss/_variables.scss
Normal file
342
src/assets/scss/_variables.scss
Normal file
@ -0,0 +1,342 @@
|
||||
:root {
|
||||
--text-primary: rgba(0, 0, 0, .87);
|
||||
--text-secondary: rgba(0, 0, 0, .6);
|
||||
--text-disabled: rgba(0, 0, 0, .38);
|
||||
--text-caption: rgba(0, 0, 0, .12);
|
||||
--divider: rgba(0, 0, 0, .12);
|
||||
--shade: rgba(0, 0, 0, .04);
|
||||
|
||||
--primary: #2962ff;
|
||||
--primary-darken: #0D47A1;
|
||||
--success: #64DD17;
|
||||
--error: #C62828;
|
||||
--error-darken: #B71C1C;
|
||||
|
||||
--bg-body: #f3f8f8;
|
||||
--bg-primary: #fff;
|
||||
--bg-secondary: #EEEEEE;
|
||||
--bg-control: transparent;
|
||||
|
||||
--scrim: rgba(0, 0, 0, .32);
|
||||
|
||||
--dp00: #fff;
|
||||
--dp01: #fff;
|
||||
--dp02: #fff;
|
||||
--dp03: #fff;
|
||||
--dp04: #fff;
|
||||
--dp06: #fff;
|
||||
--dp08: #fff;
|
||||
--dp12: #fff;
|
||||
--dp16: #fff;
|
||||
--dp24: #fff;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
--text-primary: rgba(255, 255, 255, .87);
|
||||
--text-secondary: rgba(255, 255, 255, .6);
|
||||
--text-disabled: rgba(255, 255, 255, .38);
|
||||
--text-caption: rgba(255, 255, 255, .12);
|
||||
--divider: rgba(255, 255, 255, .2);
|
||||
--shade: rgba(255, 255, 255, .04);
|
||||
|
||||
--primary: #bbdefb;
|
||||
--primary-darken: #90CAF9;
|
||||
--success: #DCEDC8;
|
||||
--error: #FFCDD2;
|
||||
--error-darken: #EF9A9A;
|
||||
|
||||
|
||||
--bg-body: #121212;
|
||||
--bg-primary: #121212;
|
||||
--bg-secondary: #616161;
|
||||
--bg-control: rgba(255, 255, 255, 0.04);
|
||||
|
||||
--scrim: rgba(0, 0, 0, .32);
|
||||
|
||||
--dp00: transparent;
|
||||
--dp01: rgba(255, 255, 255, 0.05);
|
||||
--dp02: rgba(255, 255, 255, 0.07);
|
||||
--dp03: rgba(255, 255, 255, 0.08);
|
||||
--dp04: rgba(255, 255, 255, 0.09);
|
||||
--dp06: rgba(255, 255, 255, 0.11);
|
||||
--dp08: rgba(255, 255, 255, 0.12);
|
||||
--dp12: rgba(255, 255, 255, 0.14);
|
||||
--dp16: rgba(255, 255, 255, 0.15);
|
||||
--dp24: rgba(255, 255, 255, 0.16);
|
||||
|
||||
&[data-theme="light"] {
|
||||
--text-primary: rgba(0, 0, 0, .87);
|
||||
--text-secondary: rgba(0, 0, 0, .6);
|
||||
--text-disabled: rgba(0, 0, 0, .38);
|
||||
--text-caption: rgba(0, 0, 0, .12);
|
||||
--divider: rgba(0, 0, 0, .12);
|
||||
--shade: rgba(0, 0, 0, .04);
|
||||
|
||||
--primary: #2962ff;
|
||||
--primary-darken: #0D47A1;
|
||||
--success: #64DD17;
|
||||
--error: #C62828;
|
||||
--error-darken: #B71C1C;
|
||||
|
||||
--bg-body: #f3f8f8;
|
||||
--bg-primary: #fff;
|
||||
--bg-secondary: #EEEEEE;
|
||||
--bg-control: transparent;
|
||||
|
||||
--scrim: rgba(0, 0, 0, .32);
|
||||
|
||||
--dp00: #fff;
|
||||
--dp01: #fff;
|
||||
--dp02: #fff;
|
||||
--dp03: #fff;
|
||||
--dp04: #fff;
|
||||
--dp06: #fff;
|
||||
--dp08: #fff;
|
||||
--dp12: #fff;
|
||||
--dp16: #fff;
|
||||
--dp24: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-theme="dark"] {
|
||||
--text-primary: rgba(255, 255, 255, .87);
|
||||
--text-secondary: rgba(255, 255, 255, .6);
|
||||
--text-disabled: rgba(255, 255, 255, .38);
|
||||
--text-caption: rgba(255, 255, 255, .12);
|
||||
--divider: rgba(255, 255, 255, .2);
|
||||
--shade: rgba(255, 255, 255, .04);
|
||||
|
||||
--primary: #bbdefb;
|
||||
--primary-darken: #90CAF9;
|
||||
--success: #DCEDC8;
|
||||
--error: #FFCDD2;
|
||||
--error-darken: #EF9A9A;
|
||||
|
||||
|
||||
--bg-body: #121212;
|
||||
--bg-primary: #121212;
|
||||
--bg-secondary: #616161;
|
||||
--bg-control: rgba(255, 255, 255, 0.04);
|
||||
|
||||
--scrim: rgba(0, 0, 0, .32);
|
||||
|
||||
--dp00: transparent;
|
||||
--dp01: rgba(255, 255, 255, 0.05);
|
||||
--dp02: rgba(255, 255, 255, 0.07);
|
||||
--dp03: rgba(255, 255, 255, 0.08);
|
||||
--dp04: rgba(255, 255, 255, 0.09);
|
||||
--dp06: rgba(255, 255, 255, 0.11);
|
||||
--dp08: rgba(255, 255, 255, 0.12);
|
||||
--dp12: rgba(255, 255, 255, 0.14);
|
||||
--dp16: rgba(255, 255, 255, 0.15);
|
||||
--dp24: rgba(255, 255, 255, 0.16);
|
||||
}
|
||||
}
|
||||
|
||||
$blue: #03A9F4;
|
||||
$indigo: #6610f2;
|
||||
$purple: #6f42c1;
|
||||
$pink: #e83e8c;
|
||||
$red: #F44336;
|
||||
$orange: #E65100;
|
||||
$yellow: #ffc107;
|
||||
//$green: #64DD17;
|
||||
//$green: #009688;
|
||||
$green: #64DD17;
|
||||
$teal: #20c997;
|
||||
$cyan: #17a2b8;
|
||||
$white: #fff;
|
||||
$blue-dark: #0091EA;
|
||||
|
||||
|
||||
@import "../../../node_modules/bootstrap/scss/functions";
|
||||
@import "../../../node_modules/bootstrap/scss/variables";
|
||||
@import "../../../node_modules/bootstrap/scss/mixins";
|
||||
|
||||
$warning: $orange;
|
||||
|
||||
//$box-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
|
||||
$box-shadow-1: rgba(23, 43, 77, 0.2) 0px 1px 1px, rgba(23, 43, 77, 0.2) 0px 0px 1px;
|
||||
$box-shadow-2: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
||||
$box-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
|
||||
$box-shadow-4: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
|
||||
$box-shadow-5: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
|
||||
|
||||
$box-shadow-light-1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
|
||||
$box-shadow-light-2: 0 3px 6px rgba(0, 0, 0, 0.08), 0 3px 6px rgba(0, 0, 0, 0.12);
|
||||
$box-shadow-light-3: 0 10px 20px rgba(0, 0, 0, 0.09), 0 6px 6px rgba(0, 0, 0, 0.12);
|
||||
$box-shadow-light-4: 0 14px 28px rgba(0, 0, 0, 0.12), 0 10px 10px rgba(0, 0, 0, 0.11);
|
||||
$box-shadow-light-5: 0 19px 38px rgba(0, 0, 0, 0.15), 0 15px 12px rgba(0, 0, 0, 0.11);
|
||||
$box-shadow-light-6: 0 0 82px 2px rgba(61, 69, 74, .2);
|
||||
|
||||
$font-family-base: 'Work Sans', sans-serif;
|
||||
|
||||
$gray-primary: rgba(0, 0, 0, 0.87);
|
||||
$gray-medium: rgba(0, 0, 0, 0.72);
|
||||
$gray-secondary: rgba(0, 0, 0, 0.54);
|
||||
$gray-caption: rgba(0, 0, 0, 0.20);
|
||||
$gray-divider: rgba(0, 0, 0, 0.12);
|
||||
$gray-highlight: rgba(0, 0, 0, 0.07);
|
||||
$gray-shade: rgba(0, 0, 0, 0.02);
|
||||
|
||||
$light-primary: rgba(255, 255, 255, 0.87);
|
||||
$light-secondary: rgba(255, 255, 255, 0.54);
|
||||
$light-caption: rgba(255, 255, 255, 0.20);
|
||||
$light-divider: rgba(255, 255, 255, 0.12);
|
||||
$light-highlight: rgba(255, 255, 255, 0.07);
|
||||
$light-shade: rgba(255, 255, 255, 0.03);
|
||||
|
||||
$body-bg: var(--bg-body);
|
||||
$body-color: var(--text-primary);
|
||||
|
||||
$line-height-base: 1.25;
|
||||
|
||||
$btn-font-weight: 500;
|
||||
|
||||
$card-cap-bg: transparent;
|
||||
|
||||
$grid-gutter-width: 32px;
|
||||
|
||||
$spacer: 1rem;
|
||||
|
||||
$alert-bg-level: -11;
|
||||
$alert-border-level: -11;
|
||||
$alert-padding-x: .75rem;
|
||||
|
||||
$badge-font-size: 68.75%;
|
||||
|
||||
$border-color: var(--text-caption);
|
||||
|
||||
$border-radius-large: 6px;
|
||||
|
||||
$base-ease: cubic-bezier(0, 0, 0.2, 1) 0ms;
|
||||
|
||||
$hr-border-color: var(--divider);
|
||||
|
||||
$dropdown-bg: var(--dp24);
|
||||
$dropdown-border-color: transparent;
|
||||
$dropdown-color: $body-color;
|
||||
$dropdown-link-color: $body-color;
|
||||
$dropdown-link-active-color: $body-color;
|
||||
$dropdown-link-active-bg: var(--shade);
|
||||
$dropdown-link-hover-bg: var(--shade);
|
||||
$dropdown-link-hover-color: $dropdown-link-color;
|
||||
$dropdown-divider-bg: $hr-border-color;
|
||||
$dropdown-header-color: var(--text-secondary);
|
||||
|
||||
$close-color: var(--text-primary);
|
||||
$close-text-shadow: none;
|
||||
$close-font-weight: 500;
|
||||
|
||||
$modal-header-border-color: transparent;
|
||||
$modal-footer-border-color: transparent;
|
||||
$modal-transition: all 200ms $base-ease;
|
||||
$modal-backdrop-bg: var(--scrim);
|
||||
$modal-backdrop-opacity: 1;
|
||||
$modal-content-border-color: transparent;
|
||||
$modal-content-box-shadow-sm-up: $box-shadow-light-6;
|
||||
|
||||
$navbar-light-color: var(--text-secondary);
|
||||
$navbar-light-hover-color: $body-color;
|
||||
$navbar-light-active-color: $body-color;
|
||||
|
||||
$nav-tabs-link-active-bg: var(--bg-control);
|
||||
$nav-tabs-link-active-border-color: transparent;
|
||||
$nav-tabs-border-color: transparent;
|
||||
$nav-tabs-link-hover-border-color: transparent;
|
||||
$nav-tabs-link-active-color: var(--text-primary);
|
||||
|
||||
$navbar-padding-y: $spacer;
|
||||
$navbar-nav-link-padding-x: 1rem;
|
||||
|
||||
$navbar-brand-font-size: 1.75rem;
|
||||
|
||||
$nav-pills-link-active-bg: var(--text-caption);
|
||||
$nav-pills-link-active-color: $body-color;
|
||||
|
||||
$input-color: $body-color;
|
||||
$input-focus-color: $input-color;
|
||||
$input-border-color: var(--text-caption);
|
||||
$input-bg: var(--bg-control);
|
||||
$input-focus-bg: $input-bg;
|
||||
$input-disabled-bg: var(--text-disabled);
|
||||
$input-btn-padding-x: $grid-gutter-width / 2;
|
||||
$input-placeholder-color: var(--text-disabled);
|
||||
|
||||
$input-focus-box-shadow: none;
|
||||
$input-focus-border-color: $body-color;
|
||||
|
||||
$btn-font-size-sm: $font-size-sm;
|
||||
$btn-focus-box-shadow: none;
|
||||
$btn-padding-x: $input-btn-padding-x;
|
||||
|
||||
$headings-font-weight: $font-weight-normal;
|
||||
|
||||
$input-group-addon-bg: $input-bg;
|
||||
$input-group-addon-border-color: $input-border-color;
|
||||
|
||||
$list-group-border-color: transparent;
|
||||
$list-group-bg: var(--bg-control);
|
||||
$list-group-color: $body-color;
|
||||
$list-group-item-padding-y: $grid-gutter-width / 4;
|
||||
$list-group-item-padding-x: $grid-gutter-width / 2;
|
||||
|
||||
$progress-bar-bg: var(--text-caption);
|
||||
|
||||
$spacers: (0: 0, 1: $spacer * .25, 2: $spacer * .5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 3, 6: $spacer * 5);
|
||||
|
||||
// Custom
|
||||
|
||||
$link-transition-duration: 0.15s;
|
||||
|
||||
$text-muted: var(--text-disabled);
|
||||
|
||||
$sidebar-width: 220px;
|
||||
$sidebar-width-collapsed: 72px;
|
||||
|
||||
$sheet-width: 360px;
|
||||
|
||||
$tracker-width: $sheet-width * 1.5;
|
||||
|
||||
$table-cell-padding: $grid-gutter-width / 2;
|
||||
$table-border-color: $border-color;
|
||||
$table-border-color: var(--text-caption);
|
||||
$table-hover-bg: var(--divider);
|
||||
$table-color: $body-color;
|
||||
$table-hover-color: $body-color;
|
||||
|
||||
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
sm: 600px,
|
||||
md: 800px,
|
||||
lg: 1000px,
|
||||
xl: 1280px,
|
||||
xxl: 1600px
|
||||
);
|
||||
|
||||
// vue2-datepicker variables
|
||||
|
||||
$default-color: var(--text-primary);
|
||||
$primary-color: var(--primary);
|
||||
|
||||
$today-color: $primary-color;
|
||||
|
||||
$disabled-color: var(--text-secondary);
|
||||
$disabled-background-color: var(--text-disabled);
|
||||
|
||||
$calendar-active-color: var(--text-primary);
|
||||
$calendar-active-background-color: $primary-color !default;
|
||||
|
||||
$calendar-hover-color: $default-color !default;
|
||||
$calendar-hover-background-color: $calendar-active-background-color;
|
||||
|
||||
$calendar-in-range-color: $default-color !default;
|
||||
$calendar-in-range-background-color: $calendar-active-background-color;
|
||||
|
||||
$time-active-color: $primary-color !default;
|
||||
$time-active-background-color: transparent !default;
|
||||
|
||||
$time-hover-color: $default-color !default;
|
||||
$time-hover-background-color: $calendar-active-background-color;
|
||||
|
||||
$input-border-radius: $input-border-radius;
|
||||
28
src/assets/scss/app.scss
Normal file
28
src/assets/scss/app.scss
Normal file
@ -0,0 +1,28 @@
|
||||
@import "alerts";
|
||||
@import "animations";
|
||||
@import "backdrops";
|
||||
@import "buttons";
|
||||
@import "cards";
|
||||
@import "checkboxes";
|
||||
@import "dropdowns";
|
||||
@import "forms";
|
||||
@import "indicators";
|
||||
@import "modals";
|
||||
@import "navs";
|
||||
@import "scaffolding";
|
||||
@import "snackbars";
|
||||
@import "surfaces";
|
||||
@import "tables";
|
||||
@import "transitions";
|
||||
@import "type";
|
||||
@import "utilities";
|
||||
|
||||
@import "components/app-editable";
|
||||
@import "components/color-picker";
|
||||
@import "components/duration-popover";
|
||||
@import "components/empty-state";
|
||||
@import "components/invoice";
|
||||
@import "components/multiselect";
|
||||
@import "components/search-popover";
|
||||
@import "components/vue2-datepicker";
|
||||
@import "components/vue-autosuggest";
|
||||
25
src/assets/scss/components/_app-editable.scss
Normal file
25
src/assets/scss/components/_app-editable.scss
Normal file
@ -0,0 +1,25 @@
|
||||
.editable {
|
||||
&__project-selector {
|
||||
button {
|
||||
font-size: 16px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
border-bottom: 1px solid transparent;
|
||||
border-bottom-color: var(--divider);
|
||||
background-color: var(--shade);
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
display: inline-block;
|
||||
min-width: 1px;
|
||||
@media print {
|
||||
border-bottom: 0;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
20
src/assets/scss/components/_color-picker.scss
Normal file
20
src/assets/scss/components/_color-picker.scss
Normal file
@ -0,0 +1,20 @@
|
||||
.color-picker {
|
||||
.dropdown-menu {
|
||||
min-width: initial;
|
||||
width: 11.25rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
|
||||
.dropdown-item {
|
||||
padding: 0.25rem;
|
||||
border-radius: 1rem;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
23
src/assets/scss/components/_duration-popover.scss
Normal file
23
src/assets/scss/components/_duration-popover.scss
Normal file
@ -0,0 +1,23 @@
|
||||
.duration-popover__container {
|
||||
display: inline-block;
|
||||
|
||||
.duration-popover__overlay {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.duration-popover__select {
|
||||
@extend .bg-base;
|
||||
background-color: var(--dp24);
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 340px;
|
||||
box-shadow: $box-shadow-light-3;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
}
|
||||
24
src/assets/scss/components/_empty-state.scss
Normal file
24
src/assets/scss/components/_empty-state.scss
Normal file
@ -0,0 +1,24 @@
|
||||
.empty-state {
|
||||
&__task {
|
||||
height: 72px;
|
||||
border-radius: $border-radius;
|
||||
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f8f9fa+100 */
|
||||
background: rgb(255, 255, 255); /* Old browsers */
|
||||
background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%); /* FF3.6-15 */
|
||||
background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%); /* Chrome10-25,Safari5.1-6 */
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f8f9fa', GradientType=1); /* IE6-9 fallback on horizontal gradient */
|
||||
transition: opacity $link-transition-duration $base-ease;
|
||||
}
|
||||
|
||||
&__text {
|
||||
height: 12px;
|
||||
width: 60%;
|
||||
border-radius: $border-radius;
|
||||
background-color: $gray-highlight;
|
||||
}
|
||||
|
||||
&--active {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
29
src/assets/scss/components/_invoice.scss
Normal file
29
src/assets/scss/components/_invoice.scss
Normal file
@ -0,0 +1,29 @@
|
||||
.invoice-box {
|
||||
margin: auto;
|
||||
padding: 30px;
|
||||
box-shadow: $box-shadow-light-1;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
@page {
|
||||
size: A4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media print {
|
||||
html, body {
|
||||
width: 210mm;
|
||||
height: 297mm;
|
||||
}
|
||||
.invoice-box {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.remove-invoice-row {
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
top: 10px;
|
||||
}
|
||||
299
src/assets/scss/components/_multiselect.scss
Normal file
299
src/assets/scss/components/_multiselect.scss
Normal file
@ -0,0 +1,299 @@
|
||||
.multiselect {
|
||||
color: var(--text-primary) !important;
|
||||
|
||||
&--active {
|
||||
&.multiselect-custom {
|
||||
.multiselect__tags {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--lg {
|
||||
.multiselect__tags {
|
||||
padding-top: $input-padding-y-lg !important;
|
||||
padding-bottom: $input-padding-y-lg !important;
|
||||
}
|
||||
|
||||
.multiselect__single {
|
||||
font-weight: 500 !important;
|
||||
font-size: $font-size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
&--form-control {
|
||||
.multiselect {
|
||||
.multiselect__tags {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.multiselect__single,
|
||||
.multiselect__input {
|
||||
padding: $input-padding-y ($input-padding-x * 3) $input-padding-y $input-padding-x;
|
||||
font-size: $input-font-size;
|
||||
line-height: $input-line-height;
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
&:before {
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--capitalize {
|
||||
.multiselect__option {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
&--primary {
|
||||
.multiselect {
|
||||
.multiselect__tags,
|
||||
.multiselect__single,
|
||||
.multiselect__input {
|
||||
background-color: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.multiselect__input {
|
||||
&::placeholder {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
&:before {
|
||||
color: var(--bg-primary);
|
||||
border-color: var(--bg-primary) transparent transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
min-height: $input-height !important;
|
||||
|
||||
.multiselect__spinner {
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.multiselect__spinner:after,
|
||||
.multiselect__spinner:before {
|
||||
border-color: $green transparent transparent;
|
||||
}
|
||||
|
||||
.multiselect {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.multiselect__input,
|
||||
.multiselect__single {
|
||||
margin-bottom: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
font-weight: $input-font-weight;
|
||||
font-size: $input-font-size;
|
||||
color: $input-color;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.multiselect__input:-ms-input-placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
|
||||
.multiselect__input::placeholder {
|
||||
color: $input-placeholder-color;
|
||||
}
|
||||
|
||||
.multiselect__input:hover,
|
||||
.multiselect__single:hover {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
.multiselect__input:focus,
|
||||
.multiselect__single:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
|
||||
.multiselect__tags {
|
||||
min-height: $input-height;
|
||||
border: 1px solid $input-border-color;
|
||||
background: $input-bg;
|
||||
//padding-bottom: 4px;
|
||||
font-size: $input-font-size;
|
||||
border-radius: $border-radius;
|
||||
padding: $input-padding-y ($input-padding-x * 2.5) $input-padding-y $input-padding-x;
|
||||
}
|
||||
|
||||
.multiselect__tag {
|
||||
color: var(--text-primary);
|
||||
background: $green;
|
||||
}
|
||||
|
||||
.multiselect__tag-icon:after {
|
||||
color: darken($green, 0.07);
|
||||
}
|
||||
|
||||
.multiselect__tag-icon:focus,
|
||||
.multiselect__tag-icon:hover {
|
||||
background: darken($green, 0.07);
|
||||
}
|
||||
|
||||
.multiselect__tag-icon:focus:after,
|
||||
.multiselect__tag-icon:hover:after {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.multiselect__current {
|
||||
border: 1px solid var(--text-secondary);
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
width: auto;
|
||||
padding: 0;
|
||||
transition: none;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -4px;
|
||||
right: 12px;
|
||||
color: $gray-600;
|
||||
border-color: $gray-600 transparent transparent;
|
||||
//display: none;
|
||||
//color: $gray-light;
|
||||
//border-color: $gray-light transparent transparent;
|
||||
}
|
||||
|
||||
//&:after {
|
||||
// position: absolute;
|
||||
// //font-family: 'Material Icons';
|
||||
// display: inline-block;
|
||||
// //content: '\e313';
|
||||
// top: 50%;
|
||||
// margin-top: -8px;
|
||||
// right: 6px;
|
||||
// font-size: 18px;
|
||||
// pointer-events: none;
|
||||
// color: inherit;
|
||||
//}
|
||||
}
|
||||
|
||||
&.multiselect--active {
|
||||
.multiselect__select {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__placeholder {
|
||||
color: var(--bg-secondary);
|
||||
font-weight: 400;
|
||||
padding-top: 9px;
|
||||
margin-bottom: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.multiselect__content-wrapper {
|
||||
//@extend .bg-base;
|
||||
//background: var(--dp24);
|
||||
border: 1px solid var(--bg-primary);
|
||||
box-shadow: $box-shadow-2;
|
||||
}
|
||||
|
||||
.multiselect__content {
|
||||
position: relative;
|
||||
@extend .bg-base;
|
||||
background: var(--dp24);
|
||||
}
|
||||
|
||||
.multiselect--above .multiselect__content-wrapper {
|
||||
border-top: 1px solid var(--bg-primary);
|
||||
}
|
||||
|
||||
.multiselect__option {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.multiselect__option--highlight {
|
||||
background: var(--shade);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.multiselect__option--highlight:after {
|
||||
background: var(--shade);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.multiselect__option--selected {
|
||||
background: $input-bg;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.multiselect__option--selected.multiselect__option--highlight {
|
||||
background: $input-bg;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.multiselect__option--selected.multiselect__option--highlight:after {
|
||||
background: $input-bg;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 1 !important;
|
||||
background: $input-disabled-bg;
|
||||
|
||||
.multiselect__tags {
|
||||
background: $input-disabled-bg;
|
||||
}
|
||||
|
||||
.multiselect__single {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.multiselect__select {
|
||||
opacity: .35;
|
||||
}
|
||||
}
|
||||
|
||||
.multiselect__option--disabled {
|
||||
background: $input-disabled-bg !important;
|
||||
color: var(--text-disabled) !important;
|
||||
}
|
||||
|
||||
.multiselect__option--group {
|
||||
background: $gray-100;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.multiselect__option--group.multiselect__option--highlight {
|
||||
background: inherit;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.multiselect__option--group.multiselect__option--highlight:after {
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.multiselect__option--disabled.multiselect__option--highlight {
|
||||
background: $input-disabled-bg;
|
||||
}
|
||||
|
||||
.multiselect__option--group-selected.multiselect__option--highlight {
|
||||
background: $input-bg;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.multiselect__option--group-selected.multiselect__option--highlight:after {
|
||||
background: $input-bg;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
75
src/assets/scss/components/_search-popover.scss
Normal file
75
src/assets/scss/components/_search-popover.scss
Normal file
@ -0,0 +1,75 @@
|
||||
.search-popover__container {
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
.search-popover__overlay {
|
||||
z-index: 1;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.search-popover__select {
|
||||
@extend .bg-base;
|
||||
background-color: var(--dp24);
|
||||
|
||||
z-index: 6;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
min-width: 320px;
|
||||
box-shadow: $box-shadow-light-5;
|
||||
border-radius: $border-radius-lg;
|
||||
padding: 0.75rem;
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: unset;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.autosuggest__results-container {
|
||||
ul {
|
||||
@extend .scrollbar;
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
min-width: 320px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0 0 0;
|
||||
|
||||
li {
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.autosuggest__results-before {
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
cursor: initial;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.autosuggest__results-item {
|
||||
border-radius: $border-radius;
|
||||
transition: background-color $link-transition-duration $base-ease;
|
||||
|
||||
&--highlighted {
|
||||
background-color: $gray-highlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
50
src/assets/scss/components/_vue-autosuggest.scss
Normal file
50
src/assets/scss/components/_vue-autosuggest.scss
Normal file
@ -0,0 +1,50 @@
|
||||
.typeahead {
|
||||
.autosuggest__results-container {
|
||||
@extend .scrollbar;
|
||||
position: absolute;
|
||||
max-height: 600px;
|
||||
overflow: auto;
|
||||
border-radius: 0.3rem;
|
||||
box-shadow: $box-shadow-light-3;
|
||||
z-index: 3;
|
||||
background: var(--bg-primary);
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
min-width: 300px;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0 .5rem 0;
|
||||
|
||||
li {
|
||||
padding: 0.5rem 0.75rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
&.autosuggest__results-before {
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
cursor: initial;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.autosuggest__results {
|
||||
@extend .bg-base;
|
||||
background-color: var(--dp12);
|
||||
}
|
||||
|
||||
.autosuggest__results-item--highlighted {
|
||||
background-color: var(--text-caption);
|
||||
}
|
||||
}
|
||||
|
||||
.autosuggest__results-item--highlighted {
|
||||
background-color: var(--text-caption);
|
||||
}
|
||||
33
src/assets/scss/components/_vue2-datepicker.scss
Normal file
33
src/assets/scss/components/_vue2-datepicker.scss
Normal file
@ -0,0 +1,33 @@
|
||||
@import '~vue2-datepicker/scss/index';
|
||||
|
||||
.mx-input {
|
||||
height: $input-height;
|
||||
border-color: $input-border-color;
|
||||
box-shadow: none;
|
||||
color: $input-color;
|
||||
font-size: $input-font-size;
|
||||
padding-top: $input-padding-y;
|
||||
padding-bottom: $input-padding-y;
|
||||
background-color: $input-bg;
|
||||
|
||||
&:focus {
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-icon-calendar,
|
||||
.mx-icon-clear {
|
||||
color: $input-color;
|
||||
&:hover {
|
||||
color: $input-color;
|
||||
}
|
||||
}
|
||||
|
||||
.mx-datepicker-main {
|
||||
@extend .bg-base;
|
||||
background-color: var(--dp24);
|
||||
}
|
||||
20
src/components/EmptyState.vue
Normal file
20
src/components/EmptyState.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div :class="`col-12 text-muted text-${align}`">
|
||||
<small>{{ content }}</small>
|
||||
<h4 class="mt-2">¯\_(ツ)_/¯</h4>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
content: {
|
||||
default: 'Nothing here yet',
|
||||
},
|
||||
align: {
|
||||
default: 'center',
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
19
src/components/EmptyStateDrop.vue
Normal file
19
src/components/EmptyStateDrop.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<div class="col-12 text-secondary text-center epmty-state">
|
||||
<div class="empty-state__task mt-5 mb-3 p-3 d-flex flex-column justify-content-between">
|
||||
<div class="empty-state__text"></div>
|
||||
<div class="col-4 p-0 d-flex flex-row align-items-center">
|
||||
<div class="empty-state__text"></div>
|
||||
<i class="material-icons md-10 text-caption ml-2">lens</i>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mb-1">Drop Tasks here</p>
|
||||
<p>
|
||||
<small>Overdue and unscheduled tasks<br> end up in backlog</small>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
</script>
|
||||
99
src/components/bank-accounts/BankAccountForm.vue
Normal file
99
src/components/bank-accounts/BankAccountForm.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4>Bank account</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="bankAccount" class="row">
|
||||
<AppInput :value="bankAccount.bank_name"
|
||||
@change="updateProp({ bank_name: $event })"
|
||||
label="Bank Name"
|
||||
field="bank_name"
|
||||
:errors="errors"
|
||||
class="col-sm-10"/>
|
||||
<AppInput :value="bankAccount.account_no"
|
||||
@change="updateProp({ account_no: $event })"
|
||||
label="Account no"
|
||||
field="account_no"
|
||||
:errors="errors"
|
||||
class="col-12"/>
|
||||
</div>
|
||||
|
||||
<div v-else class="row">
|
||||
<div class="col-12 pt-3">
|
||||
<p>Loading..</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-3 text-right">
|
||||
<div class="col-12">
|
||||
<button v-if="!isNew" class="btn btn-primary"
|
||||
@click="$emit('done')">Done
|
||||
</button>
|
||||
<button v-if="isNew" class="btn btn-primary ml-2"
|
||||
:disabled="loading"
|
||||
@click="createBankAccount">Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import NotificationService from '@/services/notification.service';
|
||||
import AppInput from '@/components/form/AppInput';
|
||||
import Errors from '@/utils/errors';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppInput,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
errors: new Errors(),
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
bankAccount: 'bankAccounts/bankAccount',
|
||||
}),
|
||||
isNew() {
|
||||
return this.bankAccount && this.bankAccount.$isNew;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateProp(props) {
|
||||
if (this.isNew) {
|
||||
return this.$store.dispatch('bankAccounts/bankAccountProps', props);
|
||||
}
|
||||
this.errors.clear();
|
||||
|
||||
return this.$store.dispatch('bankAccounts/updateBankAccount', props)
|
||||
.then((res) => {
|
||||
NotificationService.success(res.message);
|
||||
})
|
||||
.catch(err => this.errors.set(err.response.data.errors));
|
||||
},
|
||||
createBankAccount() {
|
||||
this.loading = true;
|
||||
this.errors.clear();
|
||||
|
||||
return this.$store.dispatch('bankAccounts/createNewBankAccount', this.bankAccount)
|
||||
.then((bankAccount) => {
|
||||
this.$router.push({
|
||||
query: {
|
||||
bankAccountId: bankAccount.id,
|
||||
},
|
||||
});
|
||||
this.$emit('done');
|
||||
})
|
||||
.catch(err => this.errors.set(err.response.data.errors))
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
65
src/components/bank-accounts/BankAccountModal.vue
Normal file
65
src/components/bank-accounts/BankAccountModal.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<BModal v-model="isOpen"
|
||||
centered
|
||||
hide-footer
|
||||
hide-header
|
||||
size="md"
|
||||
content-class="bg-base dp--24">
|
||||
<BankAccountForm @done="close()"/>
|
||||
</BModal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { BModal } from 'bootstrap-vue';
|
||||
import BankAccountForm from '@/components/bank-accounts/BankAccountForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BModal,
|
||||
BankAccountForm,
|
||||
},
|
||||
computed: {
|
||||
isOpen: {
|
||||
get() {
|
||||
return this.$store.state.bankAccounts.isModalOpen;
|
||||
},
|
||||
set(val) {
|
||||
if (!val) {
|
||||
this.$router.push({ query: {} });
|
||||
this.$store.dispatch('bankAccounts/getBankAccounts');
|
||||
}
|
||||
this.$store.commit('bankAccounts/isModalOpen', val);
|
||||
},
|
||||
},
|
||||
...mapGetters({
|
||||
bankAccount: 'bankAccounts/bankAccount',
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
'$route.query.bankAccountId'() {
|
||||
this.getBankAccount();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getBankAccount();
|
||||
},
|
||||
methods: {
|
||||
getBankAccount() {
|
||||
const query = this.$route.query;
|
||||
if (query.hasOwnProperty('bankAccountId')) {
|
||||
if ((this.bankAccount && this.bankAccount.id !== query.bankAccountId) || !this.bankAccount) {
|
||||
this.$store.dispatch('bankAccounts/getBankAccount', query.bankAccountId);
|
||||
}
|
||||
|
||||
this.$store.commit('bankAccounts/isModalOpen', true);
|
||||
} else {
|
||||
this.$store.commit('bankAccounts/isModalOpen', false);
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.isOpen = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
73
src/components/bank-accounts/BankAccountsList.vue
Normal file
73
src/components/bank-accounts/BankAccountsList.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="!bankAccounts">Loading</div>
|
||||
<div v-else-if="bankAccounts && bankAccounts.length > 0">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Account no.</th>
|
||||
<th>Bank</th>
|
||||
<th class="text-right"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="account in bankAccounts" :key="account.id"
|
||||
@click="onSelect(account)" :class="{pointer: $listeners.select }">
|
||||
<td>{{ account.account_no }}</td>
|
||||
<td>{{ account.bank_name }}</td>
|
||||
<td class="text-right">
|
||||
<i class="material-icons md-18 p-1 pointer"
|
||||
@click.stop="openBankAccountModal(account)">
|
||||
edit
|
||||
</i>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="btn btn-sm btn-link" @click="createNewAccount">Add bank account</button>
|
||||
</div>
|
||||
<EmptyState v-else>
|
||||
<template v-slot>
|
||||
<button class="btn btn-sm btn-link" @click="createNewAccount">Add bank account</button>
|
||||
</template>
|
||||
</EmptyState>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { formatDate } from '@/filters/date.filter';
|
||||
import EmptyState from '@/components/EmptyState';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EmptyState,
|
||||
},
|
||||
filters: {
|
||||
date: formatDate,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
bankAccounts: 'bankAccounts/all',
|
||||
}),
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('bankAccounts/getBankAccounts');
|
||||
},
|
||||
methods: {
|
||||
createNewAccount() {
|
||||
this.$store.dispatch('bankAccounts/openNewBankAccountModal');
|
||||
},
|
||||
openBankAccountModal(bankAccount) {
|
||||
this.$store.commit('bankAccounts/bankAccountId', bankAccount.id);
|
||||
this.$router.push({
|
||||
query: {
|
||||
bankAccountId: bankAccount.id,
|
||||
},
|
||||
});
|
||||
},
|
||||
onSelect(account) {
|
||||
this.$emit('select', account);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
171
src/components/clients/ClientForm.vue
Normal file
171
src/components/clients/ClientForm.vue
Normal file
@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h4>Client</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="client" class="row">
|
||||
<div class="col-12">
|
||||
<h5>General</h5>
|
||||
</div>
|
||||
<AppInput :value="client.company_name" @change="updateProp({ company_name: $event })"
|
||||
label="Company Name" field="company_name" :errors="errors" class="col-12"/>
|
||||
<AppInput :value="client.invoice_email" @change="updateProp({ invoice_email: $event })"
|
||||
label="Email" field="invoice_email" :errors="errors" class="col-sm-7"/>
|
||||
<AppInput :value="client.company_reg_no" @change="updateProp({ company_reg_no: $event })"
|
||||
label="Company reg no" field="company_reg_no" :errors="errors" class="col-sm-5"/>
|
||||
|
||||
<div class="col-12">
|
||||
<h5>Invoice Settings</h5>
|
||||
<h6>Address</h6>
|
||||
</div>
|
||||
<AppInput :value="client.company_address" @change="updateProp({ company_address: $event })"
|
||||
label="Company Address" field="company_address" :errors="errors"
|
||||
class="col-12"/>
|
||||
<AppInput :value="client.company_postal_code"
|
||||
@change="updateProp({ company_postal_code: $event })"
|
||||
label="Postal code" field="company_postal_code" :errors="errors"
|
||||
class="col-sm-5"/>
|
||||
<AppInput :value="client.company_city" @change="updateProp({ company_city: $event })"
|
||||
label="City" field="company_city" :errors="errors" class="col-sm-7"/>
|
||||
<AppInput :value="client.company_county" @change="updateProp({ company_county: $event })"
|
||||
label="County/State" field="company_county" :errors="errors" class="col-sm-6"/>
|
||||
<AppInput :value="client.company_country" @change="updateProp({ company_country: $event })"
|
||||
label="Country" field="company_country" :errors="errors" class="col-sm-6"/>
|
||||
<AppInput :value="client.currency" @change="updateProp({ currency: $event })"
|
||||
label="Currency" field="currency" :errors="errors" class="col-sm-4"/>
|
||||
<AppInput :value="client.rate" @change="updateProp({ rate: $event })"
|
||||
label="Hourly rate" field="rate" :errors="errors" class="col-sm-4"/>
|
||||
|
||||
<div class="col-12">
|
||||
<h6>VAT</h6>
|
||||
</div>
|
||||
<AppInput :value="client.company_vat_no" @change="updateProp({ company_vat_no: $event })"
|
||||
label="Company VAT no" field="company_vat_no" :errors="errors" class="col-sm-8"/>
|
||||
<AppCheckbox :value="client.has_vat" @input="updateProp({ has_vat: $event })"
|
||||
label="Apply VAT" field="has_vat" :errors="errors" class="col-sm-4"/>
|
||||
|
||||
<div class="col-12">
|
||||
<h6>Banking details</h6>
|
||||
</div>
|
||||
<AppSelect :value="client.bank_account"
|
||||
track-by="id"
|
||||
label="Bank account"
|
||||
label-field="bank_name"
|
||||
:options="bankAccounts || []"
|
||||
@input="bankAccountChanged"
|
||||
class="col-12"/>
|
||||
</div>
|
||||
<div v-if="!client">Loading</div>
|
||||
|
||||
<div class="row mt-3 text-right" v-if="client">
|
||||
<div class="col-12">
|
||||
<div v-if="!isNew">
|
||||
<button class="btn btn-outline-danger mr-2" @click="deleteClient(client.id)">Delete</button>
|
||||
<button class="btn btn-primary"
|
||||
@click="$emit('done')">Done
|
||||
</button>
|
||||
</div>
|
||||
<button v-else class="btn btn-primary ml-2"
|
||||
:disabled="loading"
|
||||
@click="createClient">Create
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import NotificationService from '@/services/notification.service';
|
||||
import AppInput from '@/components/form/AppInput';
|
||||
import AppSelect from '@/components/form/AppSelect';
|
||||
import Errors from '@/utils/errors';
|
||||
import AppCheckbox from '@/components/form/AppCheckbox';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppCheckbox,
|
||||
AppInput,
|
||||
AppSelect,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
errors: new Errors(),
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
client: 'clients/client',
|
||||
bankAccounts: 'bankAccounts/all',
|
||||
}),
|
||||
isNew() {
|
||||
return this.client && this.client.$isNew;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getBankAccounts();
|
||||
},
|
||||
methods: {
|
||||
getBankAccounts() {
|
||||
this.$store.dispatch('bankAccounts/getBankAccounts');
|
||||
},
|
||||
updateProp(props) {
|
||||
if (this.isNew) {
|
||||
return this.$store.dispatch('clients/clientProps', props);
|
||||
}
|
||||
this.errors.clear();
|
||||
|
||||
this.$store.dispatch('clients/updateClient', props)
|
||||
.then((res) => {
|
||||
NotificationService.success(res.message);
|
||||
})
|
||||
.catch(err => this.errors.set(err.response.data.errors));
|
||||
},
|
||||
bankAccountChanged(val) {
|
||||
this.updateProp({
|
||||
bank_account_id: val ? val.id : null,
|
||||
bank_account: val,
|
||||
});
|
||||
},
|
||||
createClient() {
|
||||
this.loading = true;
|
||||
this.errors.clear();
|
||||
|
||||
return this.$store.dispatch('clients/createNewClient', this.client)
|
||||
.then((client) => {
|
||||
this.$router.push({
|
||||
query: {
|
||||
clientId: client.id,
|
||||
},
|
||||
});
|
||||
this.$emit('done');
|
||||
})
|
||||
.catch(err => this.errors.set(err.response.data.errors))
|
||||
.finally(() => {
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
async deleteClient(clientId) {
|
||||
const confirmed = await this.$bvModal.msgBoxConfirm(`Delete client ${this.client.company_name}?`, {
|
||||
okTitle: 'Delete',
|
||||
okVariant: 'danger',
|
||||
cancelTitle: 'Dismiss',
|
||||
cancelVariant: 'btn-link',
|
||||
contentClass: 'bg-base dp--24',
|
||||
});
|
||||
if (confirmed) {
|
||||
this.$emit('done');
|
||||
const res = await this.$store.dispatch('clients/deleteClient', clientId);
|
||||
try {
|
||||
NotificationService.success(res.message);
|
||||
} catch (err) {
|
||||
NotificationService.error(err.message);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
64
src/components/clients/ClientModal.vue
Normal file
64
src/components/clients/ClientModal.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<BModal v-model="isOpen"
|
||||
centered
|
||||
hide-footer
|
||||
hide-header
|
||||
content-class="bg-base dp--24">
|
||||
<ClientForm @done="close()"/>
|
||||
</BModal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { BModal } from 'bootstrap-vue';
|
||||
import ClientForm from '@/components/clients/ClientForm';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ClientForm,
|
||||
BModal,
|
||||
},
|
||||
computed: {
|
||||
isOpen: {
|
||||
get() {
|
||||
return this.$store.state.clients.isModalOpen;
|
||||
},
|
||||
set(val) {
|
||||
if (!val) {
|
||||
this.$router.push({ query: {} });
|
||||
this.$store.dispatch('clients/getClients');
|
||||
}
|
||||
this.$store.commit('clients/isModalOpen', val);
|
||||
},
|
||||
},
|
||||
...mapGetters({
|
||||
client: 'clients/client',
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
'$route.query.clientId'() {
|
||||
this.getClient();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getClient();
|
||||
},
|
||||
methods: {
|
||||
getClient() {
|
||||
const query = this.$route.query;
|
||||
if (query.hasOwnProperty('clientId')) {
|
||||
if ((this.client && this.client.id !== query.clientId) || !this.client) {
|
||||
this.$store.dispatch('clients/getClient', query.clientId);
|
||||
}
|
||||
|
||||
this.$store.commit('clients/isModalOpen', true);
|
||||
} else {
|
||||
this.$store.commit('clients/isModalOpen', false);
|
||||
}
|
||||
},
|
||||
close() {
|
||||
this.isOpen = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
149
src/components/clients/ClientSelector.vue
Normal file
149
src/components/clients/ClientSelector.vue
Normal file
@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<div class="search-popover__container">
|
||||
<div class="editable__item"
|
||||
:class="btnClasses"
|
||||
ref="button"
|
||||
:tabindex="tabindex"
|
||||
@click="toggleOpen">
|
||||
<span v-if="!value">Client</span>
|
||||
<span v-else>{{ value }}</span>
|
||||
</div>
|
||||
<div class="search-popover__overlay" v-if="isOpen" @click="toggleOpen"></div>
|
||||
<VueAutosuggest
|
||||
class="search-popover__select"
|
||||
v-show="isOpen"
|
||||
ref="suggest"
|
||||
:input-props="{placeholder: 'Search client', class: 'form-control'}"
|
||||
:suggestions="suggestions"
|
||||
:value="query"
|
||||
:get-suggestion-value="getSuggestionValue"
|
||||
:should-render-suggestions="shouldRenderSuggestions"
|
||||
@input="onInput"
|
||||
@change="onChange"
|
||||
@selected="onSelected"
|
||||
@keydown.esc="toggleOpen"
|
||||
@keydown.tab="toggleOpen"
|
||||
@keydown.down="onKeyDown"
|
||||
@keydown.ctrl.enter="createNewClient"
|
||||
>
|
||||
<template slot-scope="{ suggestion }">
|
||||
<span>{{ suggestion.item.company_name }}</span>
|
||||
</template>
|
||||
<template slot="after-suggestions">
|
||||
<button class="btn btn-link mt-2"
|
||||
ref="createNewButton"
|
||||
@click="createNewClient"
|
||||
@keydown.up="returnToSuggestions">
|
||||
<i class="material-icons material-icons-round md-18">add</i>
|
||||
Create {{this.query ? `"${this.query}"` : 'new'}}
|
||||
<code class="ml-2 badge badge-secondary">ctrl + enter</code>
|
||||
</button>
|
||||
</template>
|
||||
</VueAutosuggest>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueAutosuggest } from 'vue-autosuggest';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueAutosuggest,
|
||||
},
|
||||
props: {
|
||||
value: {},
|
||||
btnClass: {},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isOpen: false,
|
||||
query: '',
|
||||
tabindex: 0,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
suggestions() {
|
||||
return [{
|
||||
data: [
|
||||
/* { company_name: 'No client', id: null }, */
|
||||
...this.$store.getters['clients/all'] || [],
|
||||
]
|
||||
.filter(client => !this.query || client.company_name.toLowerCase()
|
||||
.indexOf(String(this.query)
|
||||
.toLowerCase()) !== -1),
|
||||
}];
|
||||
},
|
||||
input() {
|
||||
return this.$refs.suggest.$el.querySelector('input');
|
||||
},
|
||||
button() {
|
||||
return this.$refs.button;
|
||||
},
|
||||
btnClasses() {
|
||||
return !this.value ? `text-muted ${this.btnClass}` : this.btnClass;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleOpen() {
|
||||
if (this.isOpen) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
},
|
||||
open() {
|
||||
this.isOpen = true;
|
||||
setTimeout(() => {
|
||||
this.tabindex = -1;
|
||||
this.input.click();
|
||||
this.input.focus();
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.isOpen = false;
|
||||
setTimeout(() => {
|
||||
this.tabindex = 0;
|
||||
// this.button.focus();
|
||||
});
|
||||
this.query = '';
|
||||
},
|
||||
getSuggestionValue(/* suggestion */) {
|
||||
// return suggestion.item.name;
|
||||
return null;
|
||||
},
|
||||
onInput(query) {
|
||||
this.query = query;
|
||||
this.$emit('input', query);
|
||||
},
|
||||
onChange(event) {
|
||||
this.$emit('change', event.target.value);
|
||||
},
|
||||
onSelected(suggestion) {
|
||||
if (suggestion) {
|
||||
this.$emit('selected', suggestion.item);
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
async createNewClient() {
|
||||
if (this.query.length) {
|
||||
const client = await this.$store.dispatch('clients/createNewClient', { company_name: this.query });
|
||||
this.$emit('selected', client);
|
||||
} else {
|
||||
this.$store.dispatch('clients/openNewClientModal');
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
shouldRenderSuggestions() {
|
||||
return this.isOpen;
|
||||
},
|
||||
onKeyDown() {
|
||||
if (this.$refs.suggest.totalResults === 0) {
|
||||
this.$refs.createNewButton.focus();
|
||||
}
|
||||
},
|
||||
returnToSuggestions() {
|
||||
this.input.focus();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
29
src/components/form/AppCheckbox.vue
Normal file
29
src/components/form/AppCheckbox.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="form-check">
|
||||
<input type="checkbox" :id="field"
|
||||
class="form-check-input"
|
||||
:class="{
|
||||
'is-invalid': errors && errors.has(field)
|
||||
}"
|
||||
:checked="value"
|
||||
@input="$emit('input', $event.target.checked)">
|
||||
<label class="form-check-label" :for="field">
|
||||
{{ label }}
|
||||
<slot/>
|
||||
</label>
|
||||
<AppError v-if="errors" :errors="errors" :field="field"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppError from '@/components/form/AppError';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppError,
|
||||
},
|
||||
props: ['errors', 'label', 'value', 'field'],
|
||||
};
|
||||
</script>
|
||||
69
src/components/form/AppColorPicker.vue
Normal file
69
src/components/form/AppColorPicker.vue
Normal file
@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<div class="form-group color-picker">
|
||||
<label :for="field" v-if="label">{{ label }}</label>
|
||||
<b-dropdown variant="outline-secondary"
|
||||
right
|
||||
:disabled="disabled"
|
||||
class="w-100">
|
||||
<template slot="button-content">
|
||||
<i class="material-icons" v-if="value" :style="{ color: value }">lens</i>
|
||||
<!-- <span v-else>Choose color</span>-->
|
||||
</template>
|
||||
<b-dropdown-item-button v-for="color in colors"
|
||||
:key="color"
|
||||
@click="$emit('input', color)">
|
||||
<i class="material-icons" :style="{ color }">lens</i>
|
||||
</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
<slot/>
|
||||
<AppError v-if="errors" :errors="errors" :field="field"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { BDropdown, BDropdownItemButton } from 'bootstrap-vue';
|
||||
import AppError from '@/components/form/AppError';
|
||||
import _ from 'lodash';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppError,
|
||||
BDropdown,
|
||||
BDropdownItemButton,
|
||||
},
|
||||
props: ['errors', 'label', 'value', 'field', 'disabled'],
|
||||
data() {
|
||||
return {
|
||||
colors: [
|
||||
'rgb(6, 170, 245)',
|
||||
'rgb(0, 0, 0)',
|
||||
'rgb(234, 70, 141)',
|
||||
'rgb(251, 139, 20)',
|
||||
'rgb(199, 116, 28)',
|
||||
|
||||
'rgb(75, 200, 0)',
|
||||
'rgb(137, 0, 0)',
|
||||
'rgb(225, 154, 134)',
|
||||
'rgb(197, 107, 255)',
|
||||
'rgb(32, 85, 0)',
|
||||
|
||||
'rgb(55, 80, 181)',
|
||||
'rgb(160, 26, 165)',
|
||||
'rgb(241, 195, 63)',
|
||||
'rgb(226, 5, 5)',
|
||||
'rgb(4, 187, 155)',
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.selectRandom();
|
||||
},
|
||||
methods: {
|
||||
selectRandom() {
|
||||
if (!this.value) {
|
||||
this.$emit('input', _.sample(this.colors));
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
97
src/components/form/AppDatePicker.vue
Normal file
97
src/components/form/AppDatePicker.vue
Normal file
@ -0,0 +1,97 @@
|
||||
<template>
|
||||
<div>
|
||||
<label :for="field" :class="labelClasses" v-if="label">{{ label }}</label>
|
||||
<div :class="containerClasses">
|
||||
<!-- <div class="input-group-prepend">
|
||||
<span class="input-group-text">
|
||||
<i class="material-icons md-18 text-muted" v-if="value">today</i>
|
||||
<i class="material-icons md-18 text-muted" v-else>calendar_today</i>
|
||||
</span>
|
||||
</div>-->
|
||||
<DatePicker :disabled="disabled"
|
||||
:inline="inline"
|
||||
:id="field"
|
||||
:class="[
|
||||
errors && errors.has(field) ? 'is-invalid' : '',
|
||||
...inputClasses,
|
||||
]"
|
||||
:placeholder="placeholder"
|
||||
autocomplete="off"
|
||||
@change="outputValue"
|
||||
:lang="{
|
||||
formatLocale: {
|
||||
firstDayOfWeek: 1,
|
||||
},
|
||||
}"
|
||||
:range="mode === 'range'"
|
||||
:format="format"
|
||||
:type="type"
|
||||
:value="inputValue"/>
|
||||
<slot></slot>
|
||||
<AppError v-if="errors" :errors="errors" :field="field"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import dayjs from 'dayjs';
|
||||
import DatePicker from 'vue2-datepicker';
|
||||
import AppError from '@/components/form/AppError';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppError,
|
||||
DatePicker,
|
||||
},
|
||||
props: {
|
||||
errors: {},
|
||||
label: {},
|
||||
mode: {},
|
||||
value: {},
|
||||
field: {},
|
||||
disabled: {},
|
||||
inline: {
|
||||
default: false,
|
||||
},
|
||||
format: {
|
||||
default: 'YYYY-MM-DD',
|
||||
},
|
||||
modelFormat: {
|
||||
default: 'YYYY-MM-DD',
|
||||
},
|
||||
type: {},
|
||||
placeholder: {},
|
||||
labelClasses: {},
|
||||
inputClasses: {},
|
||||
containerClasses: {},
|
||||
},
|
||||
computed: {
|
||||
inputValue() {
|
||||
return Array.isArray(this.value)
|
||||
? this.value.map(val => dayjs(val, this.modelFormat).toDate())
|
||||
: dayjs(this.value, this.modelFormat).toDate();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
outputValue(event) {
|
||||
const value = Array.isArray(event)
|
||||
? event.map(val => this.toModelFormat(val))
|
||||
: this.toModelFormat(event);
|
||||
this.$emit('input', value);
|
||||
this.$emit('change', value);
|
||||
},
|
||||
toModelFormat(val) {
|
||||
return val ? dayjs(val).format(this.modelFormat) : null;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.mx-datepicker-popup {
|
||||
z-index: 1040;
|
||||
}
|
||||
|
||||
.mx-datepicker {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
88
src/components/form/AppEditable.vue
Normal file
88
src/components/form/AppEditable.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<span :class="{
|
||||
'text-muted': !tmpVal,
|
||||
'd-print-none': !tmpVal,
|
||||
'is-invalid': errors && errors.has(field)
|
||||
}"
|
||||
class="editable">
|
||||
<span ref="editable"
|
||||
class="editable__item"
|
||||
contenteditable
|
||||
v-on="listeners"
|
||||
:class="{'position-absolute': !tmpVal || (!tmpVal && !isFocused)}"
|
||||
></span>
|
||||
<span v-if="!tmpVal" @click="focus"
|
||||
class="editable__item">{{ placeholder }}</span>
|
||||
<span v-if="suffix">{{ suffix }}</span>
|
||||
<AppError v-if="errors" :errors="errors" :field="field"/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppError from '@/components/form/AppError';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: 'Enter item',
|
||||
},
|
||||
suffix: {},
|
||||
errors: {},
|
||||
field: {},
|
||||
},
|
||||
components: {
|
||||
AppError,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
focusInVal: null,
|
||||
tmpVal: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
listeners() {
|
||||
return {
|
||||
...this.$listeners,
|
||||
input: this.onInput,
|
||||
focusin: this.onFocusIn,
|
||||
focusout: this.onFocusOut,
|
||||
isFocused: false,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
value() {
|
||||
this.$refs.editable.innerText = this.value;
|
||||
this.tmpVal = this.value;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.editable.innerText = this.value;
|
||||
this.tmpVal = this.value;
|
||||
},
|
||||
methods: {
|
||||
onInput(e) {
|
||||
this.tmpVal = e.target.innerText;
|
||||
this.$emit('input', this.tmpVal);
|
||||
},
|
||||
onFocusIn() {
|
||||
this.isFocused = true;
|
||||
this.focusInVal = this.$refs.editable.innerText;
|
||||
},
|
||||
onFocusOut() {
|
||||
this.isFocused = false;
|
||||
if (this.focusInVal !== this.$refs.editable.innerText) {
|
||||
this.$emit('change', this.$refs.editable.innerText);
|
||||
}
|
||||
},
|
||||
focus() {
|
||||
this.$refs.editable.focus();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
13
src/components/form/AppError.vue
Normal file
13
src/components/form/AppError.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="invalid-feedback" v-if="errors.has(field)">
|
||||
<template v-for="error in errors.get(field)">
|
||||
{{ error }} <br>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['errors', 'field'],
|
||||
};
|
||||
</script>
|
||||
64
src/components/form/AppInput.vue
Normal file
64
src/components/form/AppInput.vue
Normal file
@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<label :for="field" :class="labelClasses" v-if="label">{{ label }}</label>
|
||||
<div :class="containerClasses">
|
||||
<input :disabled="disabled"
|
||||
:type="inputType"
|
||||
:id="field"
|
||||
:placeholder="placeholder"
|
||||
class="form-control"
|
||||
:class="[
|
||||
errors && errors.has(field) ? 'is-invalid' : '',
|
||||
size ? 'form-control-' + size : '',
|
||||
...inputClasses,
|
||||
]"
|
||||
:autocomplete="autocomplete"
|
||||
:maxlength="max"
|
||||
:value="value"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
@change="$emit('change', $event.target.value)"
|
||||
@keydown.self.enter.exact="$emit('submit', $event.target.value)"
|
||||
:ref="field"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
<AppError v-if="errors" :errors="errors" :field="field"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppError from '@/components/form/AppError';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppError,
|
||||
},
|
||||
props: {
|
||||
errors: {},
|
||||
label: {},
|
||||
value: {},
|
||||
field: {},
|
||||
type: {},
|
||||
max: {},
|
||||
disabled: {},
|
||||
placeholder: {},
|
||||
size: {},
|
||||
labelClasses: {},
|
||||
inputClasses: {},
|
||||
containerClasses: {},
|
||||
autocomplete: {
|
||||
default: 'on',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
inputType() {
|
||||
return this.type || 'text';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
focus() {
|
||||
this.$refs[this.field].focus();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
62
src/components/form/AppSelect.vue
Normal file
62
src/components/form/AppSelect.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="form-group multiselect--form-control">
|
||||
<label :for="field" v-if="label">{{ label }}</label>
|
||||
<Multiselect :id="field"
|
||||
:options="options"
|
||||
:track-by="trackBy"
|
||||
:disabled="disabled"
|
||||
:label="labelField"
|
||||
:allow-empty="allowEmpty"
|
||||
:custom-label="customLabel"
|
||||
:deselect-label="deselectLabel"
|
||||
:select-label="selectLabel"
|
||||
:selected-label="selectedLabel"
|
||||
:preserve-search="true"
|
||||
@input="$emit('input', $event)"
|
||||
@search-change="$emit('search-change', $event)"
|
||||
:value="value"
|
||||
:placeholder="placeholder"
|
||||
:loading="loading"
|
||||
:class="{
|
||||
'is-invalid': errors && errors.has(field)
|
||||
}"
|
||||
:multiple="multiple"
|
||||
>
|
||||
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
|
||||
<slot :name="name" v-bind="slotData"/>
|
||||
</template>
|
||||
</Multiselect>
|
||||
<AppError v-if="errors" :errors="errors" :field="field"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Multiselect from 'vue-multiselect';
|
||||
import 'vue-multiselect/dist/vue-multiselect.min.css';
|
||||
import AppError from '@/components/form/AppError';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppError,
|
||||
Multiselect,
|
||||
},
|
||||
props: {
|
||||
errors: {},
|
||||
label: {},
|
||||
value: {},
|
||||
field: {},
|
||||
options: {},
|
||||
multiple: {},
|
||||
trackBy: {},
|
||||
labelField: {},
|
||||
customLabel: {},
|
||||
placeholder: {},
|
||||
loading: {},
|
||||
allowEmpty: { default: false },
|
||||
deselectLabel: { default: '' },
|
||||
selectLabel: { default: '' },
|
||||
selectedLabel: { default: '' },
|
||||
disabled: { default: false },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
61
src/components/form/AppTextarea.vue
Normal file
61
src/components/form/AppTextarea.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="form-group">
|
||||
<label :for="field" v-if="label" :class="labelClasses">{{ label }}</label>
|
||||
<div :class="containerClasses">
|
||||
<textarea :disabled="disabled"
|
||||
:id="field"
|
||||
:placeholder="placeholder"
|
||||
class="form-control"
|
||||
:rows="rows"
|
||||
:class="[
|
||||
errors && errors.has(field) ? 'is-invalid' : '',
|
||||
size ? 'form-control-' + size : '',
|
||||
...inputClasses,
|
||||
]"
|
||||
:autocomplete="autocomplete"
|
||||
:maxlength="max"
|
||||
:value="value"
|
||||
@input="$emit('input', $event.target.value)"
|
||||
@change="$emit('change', $event.target.value)"
|
||||
@keydown.self.enter.exact="$emit('submit', $event.target.value)"
|
||||
:ref="field"
|
||||
>
|
||||
</textarea>
|
||||
</div>
|
||||
<slot></slot>
|
||||
<AppError v-if="errors" :errors="errors" :field="field"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppError from '@/components/form/AppError';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppError,
|
||||
},
|
||||
props: {
|
||||
errors: {},
|
||||
label: {},
|
||||
value: {},
|
||||
field: {},
|
||||
type: {},
|
||||
max: {},
|
||||
rows: {},
|
||||
disabled: {},
|
||||
placeholder: {},
|
||||
size: {},
|
||||
labelClasses: {},
|
||||
inputClasses: {},
|
||||
containerClasses: {},
|
||||
autocomplete: {
|
||||
default: 'on',
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
focus() {
|
||||
this.$refs[this.field].focus();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
85
src/components/form/AppTypeahead.vue
Normal file
85
src/components/form/AppTypeahead.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="form-group typeahead">
|
||||
<VueAutosuggest
|
||||
ref="suggest"
|
||||
:input-props="{placeholder: placeholder, class: 'form-control form-control-sm tracker__input'}"
|
||||
:section-configs="config"
|
||||
:suggestions="suggestions"
|
||||
:value="value"
|
||||
:get-suggestion-value="getSuggestionValue"
|
||||
:should-render-suggestions="(size, loading) => size >= 0 && !loading && !closed"
|
||||
@input="onInput"
|
||||
@change="onChange"
|
||||
@blur="onBlur"
|
||||
@focus="onFocus"
|
||||
@selected="onSelected"
|
||||
>
|
||||
<template v-for="(_, name) in $scopedSlots" :slot="name" slot-scope="slotData">
|
||||
<slot :name="name" v-bind="slotData"/>
|
||||
</template>
|
||||
</VueAutosuggest>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VueAutosuggest } from 'vue-autosuggest';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueAutosuggest,
|
||||
},
|
||||
props: {
|
||||
value: {},
|
||||
placeholder: {},
|
||||
options: {},
|
||||
labelField: {},
|
||||
sectionConfigs: {},
|
||||
filter: { default: (option, query) => (option[this.labelField].toLowerCase().indexOf(query.toLowerCase()) > -1) },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
closed: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
suggestions() {
|
||||
return this.options.map(group => ({
|
||||
...group,
|
||||
data: group.data.filter(option => this.filter(option, this.value)),
|
||||
}))
|
||||
.filter(group => group.data.length > 0);
|
||||
},
|
||||
config() {
|
||||
return {
|
||||
default: { onSelected: this.onSelected },
|
||||
...this.sectionConfigs,
|
||||
};
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getSuggestionValue(suggestion) {
|
||||
return suggestion.item[this.labelField];
|
||||
},
|
||||
onInput(query) {
|
||||
this.$emit('input', query);
|
||||
},
|
||||
onChange(event) {
|
||||
this.$emit('change', event.target.value);
|
||||
},
|
||||
onFocus() {
|
||||
this.closed = false;
|
||||
},
|
||||
onBlur() {
|
||||
this.closed = true;
|
||||
},
|
||||
onSelected(suggestion) {
|
||||
if (!suggestion) {
|
||||
this.$refs.suggest.$el.querySelector('input').blur();
|
||||
return false;
|
||||
}
|
||||
// Enter on no suggestion returns null
|
||||
this.$emit('selected', suggestion);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
53
src/components/invoices/InvoiceBankDetails.vue
Normal file
53
src/components/invoices/InvoiceBankDetails.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<strong v-b-modal.bank_details class="editable__item"
|
||||
:class="{'is-invalid': errors && errors.has('bank_account_no')}">
|
||||
{{ invoice.bank_account_no }}
|
||||
<span v-if="!invoice.bank_account_no">Add bank account no</span>
|
||||
</strong>
|
||||
<AppError :errors="errors" field="bank_account_no"/>
|
||||
<br>
|
||||
<span class="editable__item" v-b-modal.bank_details
|
||||
:class="{'is-invalid': errors && errors.has('bank_name')}">
|
||||
{{ invoice.bank_name }}
|
||||
<span v-if="!invoice.bank_name">Add bank name</span>
|
||||
</span>
|
||||
<AppError :errors="errors" field="bank_name"/>
|
||||
|
||||
<BModal id="bank_details"
|
||||
centered
|
||||
title="Choose bank account"
|
||||
hide-footer
|
||||
size="lg"
|
||||
content-class="bg-base dp--24">
|
||||
<BankAccountsList @select="accountSelected"/>
|
||||
</BModal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { BModal, VBModal } from 'bootstrap-vue';
|
||||
import BankAccountsList from '@/components/bank-accounts/BankAccountsList';
|
||||
import AppError from '@/components/form/AppError';
|
||||
|
||||
export default {
|
||||
props: ['invoice', 'errors'],
|
||||
components: {
|
||||
BModal,
|
||||
BankAccountsList,
|
||||
AppError,
|
||||
},
|
||||
directives: {
|
||||
'b-modal': VBModal,
|
||||
},
|
||||
methods: {
|
||||
accountSelected(account) {
|
||||
this.$emit('update', {
|
||||
bank_account_no: account.account_no,
|
||||
bank_name: account.bank_name,
|
||||
bank_account_id: account.id,
|
||||
});
|
||||
this.$bvModal.hide('bank_details');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
100
src/components/invoices/InvoiceClientDetails.vue
Normal file
100
src/components/invoices/InvoiceClientDetails.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<ClientSelector :value="invoice.client_name" btn-class="font-weight-bold" @selected="clientSelected"/>
|
||||
</div>
|
||||
<AppEditable :value="invoice.client_address"
|
||||
suffix=", "
|
||||
placeholder="Address"
|
||||
@change="updateProp({ client_address: $event })"/>
|
||||
<AppEditable :value="invoice.client_postal_code"
|
||||
placeholder="Postal code"
|
||||
class="break-line"
|
||||
@change="updateProp({ client_postal_code: $event })"/>
|
||||
<AppError :errors="errors" field="client_address"/>
|
||||
<AppError :errors="errors" field="client_postal_code"/>
|
||||
|
||||
<AppEditable :value="invoice.client_city"
|
||||
suffix=", "
|
||||
placeholder="City"
|
||||
@change="updateProp({ client_city: $event })"/>
|
||||
<AppEditable :value="invoice.client_county"
|
||||
suffix=", "
|
||||
placeholder="County/State"
|
||||
@change="updateProp({ client_county: $event })"/>
|
||||
<AppEditable :value="invoice.client_country"
|
||||
placeholder="Country"
|
||||
class="break-line"
|
||||
@change="updateProp({ client_country: $event })"/>
|
||||
<AppError :errors="errors" field="client_city"/>
|
||||
<AppError :errors="errors" field="client_county"/>
|
||||
<AppError :errors="errors" field="client_country"/>
|
||||
|
||||
<span :class="{'d-print-none': !invoice.client_reg_no }">Reg no: </span>
|
||||
<AppEditable :value="invoice.client_reg_no"
|
||||
:errors="errors"
|
||||
field="client_reg_no"
|
||||
placeholder="Enter reg no"
|
||||
class="break-line"
|
||||
@change="updateProp({ client_reg_no: $event })"/>
|
||||
<span :class="{'d-print-none': !invoice.client_vat_no }">VAT no: </span>
|
||||
<AppEditable :value="invoice.client_vat_no"
|
||||
:errors="errors"
|
||||
field="client_vat_no"
|
||||
placeholder="Enter vat no"
|
||||
class="break-line"
|
||||
@change="updateProp({ client_vat_no: $event })"/>
|
||||
<AppEditable :value="invoice.client_email"
|
||||
:errors="errors"
|
||||
field="client_email"
|
||||
class="break-line"
|
||||
placeholder="Client's email"
|
||||
@change="updateProp({ client_email: $event })"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import AppError from '@/components/form/AppError';
|
||||
import AppEditable from '@/components/form/AppEditable';
|
||||
import ClientSelector from '@/components/clients/ClientSelector';
|
||||
|
||||
export default {
|
||||
props: ['invoice', 'errors'],
|
||||
components: {
|
||||
AppError,
|
||||
ClientSelector,
|
||||
AppEditable,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
team: 'teams/team',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
updateProp(props) {
|
||||
this.$emit('update', props);
|
||||
},
|
||||
clientSelected(client) {
|
||||
this.prefillClient(client);
|
||||
},
|
||||
prefillClient(client) {
|
||||
return this.updateProp({
|
||||
client_id: client.id,
|
||||
client_name: client.company_name,
|
||||
client_address: client.company_address,
|
||||
client_postal_code: client.company_postal_code,
|
||||
client_city: client.company_city,
|
||||
client_county: client.company_county,
|
||||
client_country: client.company_country,
|
||||
client_reg_no: client.company_reg_no,
|
||||
client_vat_no: client.company_vat_no,
|
||||
client_email: client.invoice_email,
|
||||
currency: client.currency || 'USD',
|
||||
vat_rate: client.has_vat ? this.team.vat_rate : 0,
|
||||
bank_name: client.bank_account ? client.bank_account.bank_name : null,
|
||||
bank_account_no: client.bank_account ? client.bank_account.account_no : null,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
75
src/components/invoices/InvoiceCompanyDetails.vue
Normal file
75
src/components/invoices/InvoiceCompanyDetails.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div>
|
||||
<strong>
|
||||
<AppEditable :value="invoice.from_name"
|
||||
:errors="errors"
|
||||
field="from_name"
|
||||
placeholder="Your company name"
|
||||
class="break-line"
|
||||
@change="updateProp({ from_name: $event })"/>
|
||||
</strong>
|
||||
<AppEditable :value="invoice.from_address"
|
||||
suffix=", "
|
||||
placeholder="Address"
|
||||
@change="updateProp({ from_address: $event })"/>
|
||||
<AppEditable :value="invoice.from_postal_code"
|
||||
placeholder="Postal code"
|
||||
class="break-line"
|
||||
@change="updateProp({ from_postal_code: $event })"/>
|
||||
<AppError :errors="errors" field="from_address"/>
|
||||
<AppError :errors="errors" field="from_postal_code"/>
|
||||
|
||||
<AppEditable :value="invoice.from_city"
|
||||
suffix=", "
|
||||
placeholder="City"
|
||||
@change="updateProp({ from_city: $event })"/>
|
||||
<AppEditable :value="invoice.from_county"
|
||||
suffix=", "
|
||||
placeholder="County/State"
|
||||
@change="updateProp({ from_county: $event })"/>
|
||||
<AppEditable :value="invoice.from_country"
|
||||
placeholder="Country"
|
||||
class="break-line"
|
||||
@change="updateProp({ from_country: $event })"/>
|
||||
<AppError :errors="errors" field="from_city"/>
|
||||
<AppError :errors="errors" field="from_county"/>
|
||||
<AppError :errors="errors" field="from_country"/>
|
||||
|
||||
<span :class="{'d-print-none': !invoice.from_reg_no }">Reg no: </span>
|
||||
<AppEditable :value="invoice.from_reg_no"
|
||||
:errors="errors"
|
||||
field="from_reg_no"
|
||||
placeholder="Enter reg no"
|
||||
class="break-line"
|
||||
@change="updateProp({ from_reg_no: $event })"/>
|
||||
<span :class="{'d-print-none': !invoice.from_vat_no }">VAT no: </span>
|
||||
<AppEditable :value="invoice.from_vat_no"
|
||||
:errors="errors"
|
||||
field="from_vat_no"
|
||||
placeholder="Enter vat no"
|
||||
class="break-line"
|
||||
@change="updateProp({ from_vat_no: $event })"/>
|
||||
<AppEditable :value="invoice.from_email"
|
||||
:errors="errors"
|
||||
field="from_email"
|
||||
placeholder="Your email"
|
||||
@change="updateProp({ from_email: $event })"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AppError from '@/components/form/AppError';
|
||||
import AppEditable from '../form/AppEditable';
|
||||
|
||||
export default {
|
||||
props: ['invoice', 'errors'],
|
||||
components: {
|
||||
AppEditable,
|
||||
AppError,
|
||||
},
|
||||
methods: {
|
||||
updateProp(props) {
|
||||
this.$emit('update', props);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
36
src/components/invoices/InvoiceContactDetails.vue
Normal file
36
src/components/invoices/InvoiceContactDetails.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<AppEditable :value="invoice.from_website"
|
||||
:errors="errors"
|
||||
field="from_website"
|
||||
placeholder="Add website"
|
||||
class="break-line"
|
||||
@change="updateProp({ from_website: $event })"/>
|
||||
<AppEditable :value="invoice.from_email"
|
||||
:errors="errors"
|
||||
field="from_email"
|
||||
placeholder="Add email"
|
||||
class="break-line"
|
||||
@change="updateProp({ from_email: $event })"/>
|
||||
<AppEditable :value="invoice.from_phone"
|
||||
:errors="errors"
|
||||
field="from_phone"
|
||||
placeholder="Add phone"
|
||||
@change="updateProp({ from_phone: $event })"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AppEditable from '../form/AppEditable';
|
||||
|
||||
export default {
|
||||
props: ['invoice', 'errors'],
|
||||
components: {
|
||||
AppEditable,
|
||||
},
|
||||
methods: {
|
||||
updateProp(props) {
|
||||
this.$emit('update', props);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
77
src/components/invoices/InvoiceControls.vue
Normal file
77
src/components/invoices/InvoiceControls.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="row" v-if="invoice">
|
||||
<div class="col-12 mb-4 d-flex justify-content-between align-items-start">
|
||||
<router-link class="btn btn-sm btn-light btn--icon-left"
|
||||
:to="{name: 'invoices'}">
|
||||
<i class="material-icons">arrow_back</i>
|
||||
<span class="d-inline-block">Back</span>
|
||||
<!-- Back-->
|
||||
</router-link>
|
||||
<div class="d-flex align-items-center">
|
||||
<!-- <button class="btn btn-sm btn-outline-danger mr-2" @click="deleteInvoice">Delete</button>-->
|
||||
<!-- <a :href="invoice.pdf_url" target="_blank" class="btn btn-sm btn-outline-primary mr-2">PDF</a>-->
|
||||
|
||||
<AppSelect :value="invoice.status"
|
||||
class="mb-0 mr-2 text-capitalize multiselect--capitalize"
|
||||
:options="['draft', 'booked', 'sent', 'paid', 'cancelled']"
|
||||
@input="updateProp({status: $event})"/>
|
||||
<button class="btn btn-sm btn-outline-dark"
|
||||
v-if="invoice.status === 'draft'"
|
||||
@click="bookInvoice">Book
|
||||
</button>
|
||||
<b-dropdown variant="link" size="sm" no-caret right>
|
||||
<template slot="button-content">
|
||||
<i class="material-icons">more_vert</i>
|
||||
</template>
|
||||
<b-dropdown-item :href="invoice.pdf_url" target="_blank">Download PDF</b-dropdown-item>
|
||||
<b-dropdown-item-button @click="deleteInvoice">Delete</b-dropdown-item-button>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import NotificationService from '@/services/notification.service';
|
||||
import { BDropdown, BDropdownItem, BDropdownItemButton } from 'bootstrap-vue';
|
||||
import AppSelect from '@/components/form/AppSelect';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BDropdown,
|
||||
BDropdownItem,
|
||||
BDropdownItemButton,
|
||||
AppSelect,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
invoice: 'invoices/invoice',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
async deleteInvoice() {
|
||||
const confirmed = await this.$bvModal.msgBoxConfirm(`Delete invoice ${this.invoice.number}?`, {
|
||||
okTitle: 'Delete',
|
||||
okVariant: 'danger',
|
||||
cancelTitle: 'Dismiss',
|
||||
cancelVariant: 'btn-link',
|
||||
contentClass: 'bg-base dp--24',
|
||||
});
|
||||
if (confirmed) {
|
||||
const res = await this.$store.dispatch('invoices/deleteInvoice', this.invoice);
|
||||
NotificationService.success(res.message);
|
||||
this.$router.push({
|
||||
name: 'invoices',
|
||||
});
|
||||
}
|
||||
},
|
||||
bookInvoice() {
|
||||
this.$store.dispatch('invoices/bookInvoice');
|
||||
},
|
||||
updateProp(props) {
|
||||
this.$store.dispatch('invoices/updateInvoice', props);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
115
src/components/invoices/InvoiceForm.vue
Normal file
115
src/components/invoices/InvoiceForm.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="card bg-base dp--02 invoice-box" v-if="invoice">
|
||||
<div class="card-body">
|
||||
<div class="row mb-5">
|
||||
<div class="col-4">
|
||||
<img v-if="team.logo_url"
|
||||
:src="team.logo_url" style="width:100%; max-width:200px;">
|
||||
<!-- TODO: logo url input -->
|
||||
<AppError :errors="errors" field="team.logos"/>
|
||||
</div>
|
||||
<InvoiceHeader :invoice="invoice" :errors="errors" @update="updateProp"
|
||||
class="col-8 text-right mb-2"/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<InvoiceClientDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
||||
class="col-6"/>
|
||||
<InvoiceCompanyDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
||||
class="col-6 text-right"/>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<AppEditable :value="invoice.notes"
|
||||
class="col-12"
|
||||
placeholder="Insert note"
|
||||
@change="updateProp({ notes: $event })"/>
|
||||
</div>
|
||||
<div class="row">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Quantity</th>
|
||||
<th>Unit</th>
|
||||
<th>Price</th>
|
||||
<th class="text-right">Sum</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<InvoiceRow v-for="(row, index) in invoice.rows" :errors="errors"
|
||||
:row="row" :index="index" :key="row.id"/>
|
||||
<tr class="d-print-none">
|
||||
<td colspan="5">
|
||||
<button class="btn btn-sm" @click="addRow">
|
||||
<i class="material-icons md-18 pointer">add</i>
|
||||
</button>
|
||||
<AppError :errors="errors" field="rows"/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<InvoiceTotals :invoice="invoice" :errors="errors" @update="updateProp"/>
|
||||
</table>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<InvoiceBankDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
||||
class="col-8"/>
|
||||
<InvoiceContactDetails :invoice="invoice" :errors="errors" @update="updateProp"
|
||||
class="col-4 text-right"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters, mapState } from 'vuex';
|
||||
import InvoiceRow from '@/components/invoices/InvoiceRow';
|
||||
import InvoiceClientDetails from '@/components/invoices/InvoiceClientDetails';
|
||||
import InvoiceCompanyDetails from '@/components/invoices/InvoiceCompanyDetails';
|
||||
import InvoiceBankDetails from '@/components/invoices/InvoiceBankDetails';
|
||||
import InvoiceContactDetails from '@/components/invoices/InvoiceContactDetails';
|
||||
import InvoiceHeader from '@/components/invoices/InvoiceHeader';
|
||||
import InvoiceTotals from '@/components/invoices/InvoiceTotals';
|
||||
import AppEditable from '@/components/form/AppEditable';
|
||||
import AppError from '@/components/form/AppError';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
InvoiceTotals,
|
||||
InvoiceHeader,
|
||||
InvoiceContactDetails,
|
||||
InvoiceBankDetails,
|
||||
InvoiceCompanyDetails,
|
||||
InvoiceRow,
|
||||
InvoiceClientDetails,
|
||||
AppEditable,
|
||||
AppError,
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
errors: state => state.invoices.errors,
|
||||
}),
|
||||
...mapGetters({
|
||||
team: 'teams/team',
|
||||
invoice: 'invoices/invoice',
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
'$route.params.id'() {
|
||||
this.getInvoice();
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getInvoice();
|
||||
},
|
||||
methods: {
|
||||
getInvoice() {
|
||||
this.$store.dispatch('invoices/getInvoice', this.$route.params.id);
|
||||
},
|
||||
updateProp(props) {
|
||||
this.$store.dispatch('invoices/updateInvoice', props);
|
||||
},
|
||||
addRow() {
|
||||
this.$store.dispatch('invoices/addRow');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
73
src/components/invoices/InvoiceHeader.vue
Normal file
73
src/components/invoices/InvoiceHeader.vue
Normal file
@ -0,0 +1,73 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3>
|
||||
Invoice
|
||||
<AppEditable :value="invoice.number"
|
||||
:errors="errors"
|
||||
field="number"
|
||||
placeholder="NO."
|
||||
@change="updateProp({ number: $event })"/>
|
||||
</h3>
|
||||
Issued at: <span class="editable__item" v-b-modal.modal_issued_at>{{ invoice.issued_at | date('D. MMM YYYY', 'YYYY-MM-DD') }}</span>
|
||||
<BModal id="modal_issued_at"
|
||||
centered
|
||||
title="Issued at"
|
||||
hide-footer
|
||||
size="sm"
|
||||
content-class="bg-base dp--24">
|
||||
<AppDatePicker :value="invoice.issued_at"
|
||||
@change="updateProp({ issued_at: $event })"
|
||||
:errors="errors"
|
||||
:inline="true"
|
||||
field="issued_at"/>
|
||||
</BModal>
|
||||
<br>Due at: <span class="editable__item" v-b-modal.modal_due_at>{{ invoice.due_at | date('D. MMM YYYY', 'YYYY-MM-DD') }}</span>
|
||||
<BModal id="modal_due_at"
|
||||
centered
|
||||
title="Due at"
|
||||
hide-footer
|
||||
size="sm"
|
||||
content-class="bg-base dp--24">
|
||||
<AppDatePicker :value="invoice.due_at"
|
||||
@change="updateProp({ due_at: $event })"
|
||||
:errors="errors"
|
||||
:inline="true"
|
||||
field="due_at"/>
|
||||
</BModal>
|
||||
<br>Late fee:
|
||||
<AppEditable :value="invoice.late_fee | currency"
|
||||
:errors="errors"
|
||||
suffix="%"
|
||||
field="late_fee"
|
||||
placeholder="Add late fee"
|
||||
@change="updateProp({ late_fee: $event })"/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { BModal, VBModal } from 'bootstrap-vue';
|
||||
import AppEditable from '@/components/form/AppEditable';
|
||||
import AppDatePicker from '@/components/form/AppDatePicker';
|
||||
import { formatDate } from '@/filters/date.filter';
|
||||
import { formatCurrency } from '@/filters/currency.filter';
|
||||
|
||||
export default {
|
||||
props: ['invoice', 'errors'],
|
||||
components: {
|
||||
AppEditable,
|
||||
AppDatePicker,
|
||||
BModal,
|
||||
},
|
||||
directives: {
|
||||
'b-modal': VBModal,
|
||||
},
|
||||
filters: {
|
||||
date: formatDate,
|
||||
currency: formatCurrency,
|
||||
},
|
||||
methods: {
|
||||
updateProp(props) {
|
||||
this.$emit('update', props);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
66
src/components/invoices/InvoiceRow.vue
Normal file
66
src/components/invoices/InvoiceRow.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<tr>
|
||||
<td>
|
||||
<AppEditable :value="row.item"
|
||||
:errors="errors"
|
||||
:field="`rows.${index}.item`"
|
||||
placeholder="Enter item"
|
||||
@change="updateProp({ item: $event })"/>
|
||||
</td>
|
||||
<td>
|
||||
<AppEditable :value="row.quantity"
|
||||
:errors="errors"
|
||||
:field="`rows.${index}.quantity`"
|
||||
placeholder="Enter quantity"
|
||||
@change="updateProp({ quantity: $event })"/>
|
||||
</td>
|
||||
<td>
|
||||
<AppEditable :value="row.unit"
|
||||
:errors="errors"
|
||||
:field="`rows.${index}.unit`"
|
||||
placeholder="Enter unit"
|
||||
@change="updateProp({ unit: $event })"/>
|
||||
</td>
|
||||
<td>
|
||||
<AppEditable :value="row.price | currency"
|
||||
:errors="errors"
|
||||
:field="`rows.${index}.price`"
|
||||
placeholder="Enter price"
|
||||
@change="updateProp({ price: $event })"/>
|
||||
</td>
|
||||
<td class="text-right position-relative">
|
||||
{{ (row.quantity * row.price) | currency }}
|
||||
<button class="btn btn-sm remove-invoice-row d-print-none" @click="removeRow(row)">
|
||||
<i class="material-icons md-18 pointer">remove</i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { formatCurrency } from '../../filters/currency.filter';
|
||||
import AppEditable from '../form/AppEditable';
|
||||
|
||||
export default {
|
||||
props: ['row', 'errors', 'index'],
|
||||
name: 'InvoiceRow',
|
||||
components: {
|
||||
AppEditable,
|
||||
},
|
||||
filters: {
|
||||
currency: formatCurrency,
|
||||
},
|
||||
methods: {
|
||||
updateProp(props) {
|
||||
this.$store.dispatch('invoices/updateInvoiceRow', {
|
||||
props,
|
||||
id: this.row.id,
|
||||
});
|
||||
},
|
||||
async removeRow(row) {
|
||||
await this.$store.dispatch('invoices/removeRow', row);
|
||||
this.updateProp();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
62
src/components/invoices/InvoiceTotals.vue
Normal file
62
src/components/invoices/InvoiceTotals.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<tfoot>
|
||||
<tr class="text-right">
|
||||
<td colspan="4">Subtotal</td>
|
||||
<td>{{ subTotal | currency }}</td>
|
||||
</tr>
|
||||
<tr class="text-right">
|
||||
<td colspan="4">
|
||||
VAT
|
||||
(<AppEditable :value="invoice.vat_rate | currency"
|
||||
suffix="%"
|
||||
placeholder="Add VAT"
|
||||
@change="updateProp({ vat_rate: $event })"/>)
|
||||
<AppError :errors="errors" field="vat_rate"/>
|
||||
</td>
|
||||
<td>{{ totalVat | currency }}</td>
|
||||
</tr>
|
||||
<tr class="text-right">
|
||||
<th colspan="4">
|
||||
Total
|
||||
<AppEditable :value="invoice.currency"
|
||||
:errors="errors"
|
||||
field="currency"
|
||||
placeholder="Add currency"
|
||||
@change="updateProp({ currency: $event })"/>
|
||||
</th>
|
||||
<th class="text-nowrap">{{ total | currency }}</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import AppError from '@/components/form/AppError';
|
||||
import AppEditable from '../form/AppEditable';
|
||||
import { formatDate } from '../../filters/date.filter';
|
||||
import { formatCurrency } from '../../filters/currency.filter';
|
||||
|
||||
export default {
|
||||
props: ['invoice', 'errors'],
|
||||
components: {
|
||||
AppEditable,
|
||||
AppError,
|
||||
},
|
||||
filters: {
|
||||
date: formatDate,
|
||||
currency: formatCurrency,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
rows: 'invoices/rows',
|
||||
subTotal: 'invoices/subTotal',
|
||||
total: 'invoices/total',
|
||||
totalVat: 'invoices/totalVat',
|
||||
}),
|
||||
},
|
||||
methods: {
|
||||
updateProp(props) {
|
||||
this.$emit('update', props);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
84
src/components/invoices/InvoicesList.vue
Normal file
84
src/components/invoices/InvoicesList.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="!invoices" class="col-12">Loading</div>
|
||||
<table class="table table--card table-hover" v-else-if="invoices && invoices.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No.</th>
|
||||
<th>Client</th>
|
||||
<th>Issued at</th>
|
||||
<th>Total</th>
|
||||
<th class="text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-if="invoices">
|
||||
<tr v-for="invoice in invoices"
|
||||
class="pointer"
|
||||
:key="invoice.id"
|
||||
@click="openInvoice(invoice)">
|
||||
<td>{{ invoice.number }}</td>
|
||||
<td>{{ invoice.client ? invoice.client.company_name : '' }}</td>
|
||||
<td>{{ invoice.issued_at | date('D MMM YYYY', 'YYYY-MM-DD') }}</td>
|
||||
<td>
|
||||
{{ invoice.total | currency }}
|
||||
<small v-if="invoice.vat_rate"><br>({{ totalWithVat(invoice) | currency }})</small>
|
||||
</td>
|
||||
<td class="text-right text-capitalize">
|
||||
<i class="material-icons material-icons-round md-18 mr-2 text-warning"
|
||||
v-if="isOverDue(invoice)"
|
||||
v-b-tooltip.hover title="Overdue">warning</i>
|
||||
<i class="material-icons material-icons-round md-18 mr-2 text-success"
|
||||
v-else-if="invoice.status === 'paid'">done</i>
|
||||
{{ invoice.status }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<EmptyState v-else/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import { formatDate } from '@/filters/date.filter';
|
||||
import EmptyState from '@/components/EmptyState';
|
||||
import { formatCurrency } from '@/filters/currency.filter';
|
||||
import dayjs from 'dayjs';
|
||||
import { VBTooltip } from 'bootstrap-vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EmptyState,
|
||||
},
|
||||
filters: {
|
||||
date: formatDate,
|
||||
currency: formatCurrency,
|
||||
},
|
||||
directives: {
|
||||
'b-tooltip': VBTooltip,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
invoices: 'invoices/all',
|
||||
}),
|
||||
},
|
||||
mounted() {
|
||||
this.$store.dispatch('invoices/getInvoices');
|
||||
},
|
||||
methods: {
|
||||
openInvoice(invoice) {
|
||||
this.$store.commit('invoices/invoiceId', invoice.id);
|
||||
this.$router.push({
|
||||
name: 'invoice',
|
||||
params: { id: invoice.id },
|
||||
});
|
||||
},
|
||||
totalWithVat(invoice) {
|
||||
return (invoice.vat_rate / 100 * invoice.total) + invoice.total;
|
||||
},
|
||||
isOverDue(invoice) {
|
||||
return invoice.status === 'sent' && invoice.due_at < dayjs()
|
||||
.format();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
7
src/config/storage.config.js
Normal file
7
src/config/storage.config.js
Normal file
@ -0,0 +1,7 @@
|
||||
import storage from 'localforage';
|
||||
|
||||
storage.config({
|
||||
name: 'serverlessInvoices',
|
||||
version: 1.0,
|
||||
storeName: 'default',
|
||||
});
|
||||
11
src/filters/currency.filter.js
Normal file
11
src/filters/currency.filter.js
Normal file
@ -0,0 +1,11 @@
|
||||
export function formatCurrency(val, digits = 2) {
|
||||
if (val !== null) {
|
||||
const x = parseFloat(val);
|
||||
if (Number.isNaN(x)) {
|
||||
return '';
|
||||
}
|
||||
const parts = x.toFixed(digits).split('.');
|
||||
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
|
||||
return parts.join('.');
|
||||
}
|
||||
}
|
||||
11
src/filters/date.filter.js
Normal file
11
src/filters/date.filter.js
Normal file
@ -0,0 +1,11 @@
|
||||
import dayjs from 'dayjs';
|
||||
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
||||
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
export function formatDate(val, toFormat = 'D MMM YYYY', fromFormat = 'YYYY-MM-DDTHH:mm:ssZ') {
|
||||
if (val) {
|
||||
return dayjs(String(val), fromFormat)
|
||||
.format(toFormat);
|
||||
}
|
||||
}
|
||||
21
src/main.js
Normal file
21
src/main.js
Normal file
@ -0,0 +1,21 @@
|
||||
import 'es6-promise';
|
||||
import '@/config/storage.config';
|
||||
import { BVModalPlugin } from 'bootstrap-vue';
|
||||
import Vue from 'vue';
|
||||
import App from '@/App.vue';
|
||||
import router from '@/router';
|
||||
import store from '@/store/store';
|
||||
import VueNotifications from 'vue-notification';
|
||||
|
||||
Vue.use(BVModalPlugin);
|
||||
Vue.use(VueNotifications);
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
const app = new Vue({
|
||||
router,
|
||||
store,
|
||||
render: h => h(App),
|
||||
}).$mount('#app');
|
||||
|
||||
export default app;
|
||||
43
src/router.js
Normal file
43
src/router.js
Normal file
@ -0,0 +1,43 @@
|
||||
import Vue from 'vue';
|
||||
import Router from 'vue-router';
|
||||
import store from '@/store/store';
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'dashboard',
|
||||
redirect: 'invoices',
|
||||
component: () => import(/* webpackChunkName: "dashboard" */ '@/views/dashboard/Dashboard.vue'),
|
||||
beforeEnter: async (to, from, next) => {
|
||||
await store.dispatch('teams/init');
|
||||
next();
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '/invoices',
|
||||
name: 'invoices',
|
||||
component: () => import(/* webpackChunkName: "invoices" */ '@/views/dashboard/Invoices.vue'),
|
||||
},
|
||||
{
|
||||
path: '/invoice/:id',
|
||||
name: 'invoice',
|
||||
component: () => import(/* webpackChunkName: "invoice" */ '@/views/dashboard/Invoice.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/invoices/:id/print',
|
||||
name: 'invoice-print',
|
||||
component: () => import(/* webpackChunkName: "invoice" */ '@/views/InvoicePrint.vue'),
|
||||
},
|
||||
];
|
||||
|
||||
const router = new Router({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
35
src/services/bank-account.service.js
Normal file
35
src/services/bank-account.service.js
Normal file
@ -0,0 +1,35 @@
|
||||
import storage from 'localforage';
|
||||
|
||||
class BankAccountService {
|
||||
async getBankAccounts() {
|
||||
const bankAccounts = await storage.getItem('bank_accounts');
|
||||
|
||||
return bankAccounts || [];
|
||||
}
|
||||
|
||||
async getBankAccount(bankAccountId) {
|
||||
const bankAccounts = await this.getBankAccounts();
|
||||
return bankAccounts.find(bank_account => bank_account.id === bankAccountId);
|
||||
}
|
||||
|
||||
async createBankAccount(bankAccount) {
|
||||
const bankAccounts = await this.getBankAccounts();
|
||||
|
||||
delete bankAccount.$id;
|
||||
delete bankAccount.$isNew;
|
||||
delete bankAccount.$isDirty;
|
||||
|
||||
bankAccounts.push(bankAccount);
|
||||
await storage.setItem('bank_accounts', bankAccounts);
|
||||
return bankAccount;
|
||||
}
|
||||
|
||||
async updateBankAccount(bankAccount) {
|
||||
const bankAccounts = await this.getBankAccounts();
|
||||
const index = bankAccounts.findIndex(item => item.id === bankAccount.id);
|
||||
bankAccounts[index] = bankAccount;
|
||||
return storage.setItem('bank_accounts', bankAccounts);
|
||||
}
|
||||
}
|
||||
|
||||
export default new BankAccountService();
|
||||
47
src/services/client.service.js
Normal file
47
src/services/client.service.js
Normal file
@ -0,0 +1,47 @@
|
||||
import storage from 'localforage';
|
||||
|
||||
class ClientService {
|
||||
async getClients() {
|
||||
const clients = await storage.getItem('clients');
|
||||
|
||||
return clients || [];
|
||||
}
|
||||
|
||||
async getClient(clientId) {
|
||||
const clients = await this.getClients();
|
||||
return clients.find(client => client.id === clientId);
|
||||
}
|
||||
|
||||
async createClient(client) {
|
||||
const clients = await this.getClients();
|
||||
|
||||
delete client.$id;
|
||||
delete client.$isNew;
|
||||
delete client.$isDirty;
|
||||
|
||||
clients.push(client);
|
||||
await storage.setItem('clients', clients);
|
||||
return client;
|
||||
}
|
||||
|
||||
async updateClient(client) {
|
||||
const clients = await this.getClients();
|
||||
const index = clients.findIndex(item => item.id === client.id);
|
||||
|
||||
// TODO: Fix this mess
|
||||
if (index === -1) {
|
||||
return false;
|
||||
}
|
||||
clients[index] = client;
|
||||
return storage.setItem('clients', clients);
|
||||
}
|
||||
|
||||
async deleteClient(clientId) {
|
||||
const clients = await this.getClients();
|
||||
const index = clients.findIndex(item => item.id === clientId);
|
||||
clients.splice(index, 1);
|
||||
return storage.setItem('clients', clients);
|
||||
}
|
||||
}
|
||||
|
||||
export default new ClientService();
|
||||
48
src/services/invoice.service.js
Normal file
48
src/services/invoice.service.js
Normal file
@ -0,0 +1,48 @@
|
||||
import storage from 'localforage';
|
||||
|
||||
class InvoiceService {
|
||||
async getInvoices() {
|
||||
const invoices = await storage.getItem('invoices');
|
||||
return invoices || [];
|
||||
}
|
||||
|
||||
async getInvoice(invoiceId) {
|
||||
const invoices = await this.getInvoices();
|
||||
return invoices.find(invoice => invoice.id === invoiceId);
|
||||
}
|
||||
|
||||
async createInvoice(invoice) {
|
||||
// TODO: add invoice no, issued_at, due_at, late_fee, prefill company info, bank_info, currency, vat_rate
|
||||
const invoices = await this.getInvoices();
|
||||
|
||||
delete invoice.$id;
|
||||
delete invoice.$isNew;
|
||||
delete invoice.$isDirty;
|
||||
|
||||
invoices.push(invoice);
|
||||
await storage.setItem('invoices', invoices);
|
||||
}
|
||||
|
||||
async updateInvoice(invoice) {
|
||||
// TODO: validation
|
||||
const invoices = await this.getInvoices();
|
||||
const index = invoices.findIndex(item => item.id === invoice.id);
|
||||
invoices[index] = invoice;
|
||||
return storage.setItem('invoices', invoices);
|
||||
}
|
||||
|
||||
async deleteInvoice(invoiceId) {
|
||||
const invoices = await this.getInvoices();
|
||||
const index = invoices.findIndex(item => item.id === invoiceId);
|
||||
invoices.splice(index, 1);
|
||||
return storage.setItem('invoices', invoices);
|
||||
}
|
||||
|
||||
bookInvoice(invoice) {
|
||||
// TODO: validation
|
||||
invoice.status = 'booked';
|
||||
return this.updateInvoice(invoice);
|
||||
}
|
||||
}
|
||||
|
||||
export default new InvoiceService();
|
||||
24
src/services/notification.service.js
Normal file
24
src/services/notification.service.js
Normal file
@ -0,0 +1,24 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
class NotificationService {
|
||||
success(text) {
|
||||
return Vue.notify({
|
||||
type: 'success',
|
||||
text,
|
||||
});
|
||||
}
|
||||
|
||||
error(text, duration = 5000) {
|
||||
return Vue.notify({
|
||||
type: 'error',
|
||||
text,
|
||||
duration,
|
||||
});
|
||||
}
|
||||
|
||||
stickyError(text, title) {
|
||||
return this.error(text, title, -1);
|
||||
}
|
||||
}
|
||||
|
||||
export default new NotificationService();
|
||||
36
src/services/team.service.js
Normal file
36
src/services/team.service.js
Normal file
@ -0,0 +1,36 @@
|
||||
import storage from 'localforage';
|
||||
|
||||
class TeamService {
|
||||
async getTeam() {
|
||||
let team = await storage.getItem('team');
|
||||
if (!team) {
|
||||
team = {
|
||||
company_name: null,
|
||||
company_address: null,
|
||||
company_postal_code: null,
|
||||
company_country: null,
|
||||
company_county: null,
|
||||
company_city: null,
|
||||
company_reg_no: null,
|
||||
company_vat_no: null,
|
||||
website: null,
|
||||
contact_email: null,
|
||||
contact_phone: null,
|
||||
vat_rate: null,
|
||||
invoice_late_fee: null,
|
||||
invoice_due_days: null,
|
||||
updated_at: null,
|
||||
created_at: null,
|
||||
logo_url: null,
|
||||
};
|
||||
}
|
||||
|
||||
return team;
|
||||
}
|
||||
|
||||
async updateTeam(team) {
|
||||
return storage.setItem('team', team);
|
||||
}
|
||||
}
|
||||
|
||||
export default new TeamService();
|
||||
67
src/store/bank-accounts.js
Normal file
67
src/store/bank-accounts.js
Normal file
@ -0,0 +1,67 @@
|
||||
import BankAccountService from '@/services/bank-account.service';
|
||||
import BankAccount from '@/store/models/bank-account';
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
bankAccountId: null,
|
||||
isModalOpen: null,
|
||||
},
|
||||
mutations: {
|
||||
bankAccountId(state, bankAccountId) {
|
||||
state.bankAccountId = bankAccountId;
|
||||
},
|
||||
isModalOpen(state, isOpen) {
|
||||
state.isModalOpen = isOpen;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
init({ dispatch }) {
|
||||
return dispatch('getBankAccounts');
|
||||
},
|
||||
terminate() {
|
||||
return BankAccount.deleteAll();
|
||||
},
|
||||
async getBankAccounts() {
|
||||
const accounts = await BankAccountService.getBankAccounts();
|
||||
await BankAccount.create({ data: accounts });
|
||||
return accounts;
|
||||
},
|
||||
async getBankAccount({ commit }, bankAccountId) {
|
||||
const bankAccount = await BankAccountService.getBankAccount(bankAccountId);
|
||||
commit('bankAccountId', bankAccount.id);
|
||||
return BankAccount.insert({ data: bankAccount });
|
||||
},
|
||||
async createNewBankAccount(store, bankAccount) {
|
||||
const res = await BankAccountService.createBankAccount(bankAccount);
|
||||
await BankAccount.insert({ data: res });
|
||||
return BankAccount.find(res.id);
|
||||
},
|
||||
bankAccountProps({ state }, props) {
|
||||
return BankAccount.update({
|
||||
where: state.bankAccountId,
|
||||
data: props,
|
||||
});
|
||||
},
|
||||
async updateBankAccount({ getters, dispatch }, props) {
|
||||
await dispatch('bankAccountProps', props);
|
||||
return BankAccountService.updateBankAccount(getters.bankAccount);
|
||||
},
|
||||
async openNewBankAccountModal({ commit }) {
|
||||
const bankAccount = await BankAccount.createNew();
|
||||
commit('bankAccountId', bankAccount.id);
|
||||
commit('isModalOpen', true);
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
bankAccount(state) {
|
||||
return BankAccount.query()
|
||||
.find(state.bankAccountId);
|
||||
},
|
||||
all() {
|
||||
return BankAccount.query()
|
||||
.where('$isNew', false)
|
||||
.get();
|
||||
},
|
||||
},
|
||||
};
|
||||
86
src/store/clients.js
Normal file
86
src/store/clients.js
Normal file
@ -0,0 +1,86 @@
|
||||
import ClientService from '@/services/client.service';
|
||||
import Client from '@/store/models/client';
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
clientId: null,
|
||||
isModalOpen: false,
|
||||
},
|
||||
mutations: {
|
||||
clientId(state, clientId) {
|
||||
state.clientId = clientId;
|
||||
},
|
||||
isModalOpen(state, isOpen) {
|
||||
state.isModalOpen = isOpen;
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
init({ dispatch }) {
|
||||
return dispatch('getClients');
|
||||
},
|
||||
terminate() {
|
||||
return Client.deleteAll();
|
||||
},
|
||||
async getClients() {
|
||||
const clients = await ClientService.getClients();
|
||||
await Client.create({ data: clients });
|
||||
return clients;
|
||||
},
|
||||
async getClient({ commit }, clientId) {
|
||||
const client = await ClientService.getClient(clientId);
|
||||
commit('clientId', client.id);
|
||||
Client.insert({ data: client });
|
||||
},
|
||||
async createNewClient(store, client) {
|
||||
if (!client.hasOwnProperty('id')) {
|
||||
client = new Client(client);
|
||||
}
|
||||
const res = await ClientService.createClient(client);
|
||||
await Client.insert({ data: res });
|
||||
return Client.find(res.id);
|
||||
},
|
||||
clientProps({ state }, props) {
|
||||
return Client.update({
|
||||
where: state.clientId,
|
||||
data: props,
|
||||
});
|
||||
},
|
||||
async updateClient({ getters, dispatch }, props) {
|
||||
await dispatch('clientProps', props);
|
||||
return ClientService.updateClient(getters.client);
|
||||
},
|
||||
async updateClientById(payload) {
|
||||
const client = await Client.update({
|
||||
where: payload.clientId,
|
||||
data: payload.props,
|
||||
});
|
||||
return ClientService.updateClient(client);
|
||||
},
|
||||
async openNewClientModal({ commit }) {
|
||||
const client = await Client.createNew();
|
||||
commit('clientId', client.id);
|
||||
commit('isModalOpen', true);
|
||||
},
|
||||
async deleteClient(clientId) {
|
||||
const res = await ClientService.deleteClient(clientId);
|
||||
if ('client_id' in res) {
|
||||
Client.delete(res.client_id);
|
||||
}
|
||||
return res;
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
client(state) {
|
||||
return Client.query()
|
||||
.with(['bank_account'])
|
||||
.find(state.clientId);
|
||||
},
|
||||
all() {
|
||||
return Client.query()
|
||||
.where('$isNew', false)
|
||||
.with(['bank_account'])
|
||||
.get();
|
||||
},
|
||||
},
|
||||
};
|
||||
197
src/store/invoices.js
Normal file
197
src/store/invoices.js
Normal file
@ -0,0 +1,197 @@
|
||||
import InvoiceService from '@/services/invoice.service';
|
||||
import Invoice from '@/store/models/invoice';
|
||||
import InvoiceRow from '@/store/models/invoice-row';
|
||||
import { pick } from '@/utils/helpers';
|
||||
import dayjs from 'dayjs';
|
||||
import Errors from '@/utils/errors';
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
errors: new Errors(),
|
||||
invoiceId: null,
|
||||
isSendModalOpen: false,
|
||||
},
|
||||
mutations: {
|
||||
invoiceId(state, invoiceId) {
|
||||
state.invoiceId = invoiceId;
|
||||
},
|
||||
isSendModalOpen(state, isSendModalOpen) {
|
||||
state.isSendModalOpen = isSendModalOpen;
|
||||
},
|
||||
setErrors(state, errors) {
|
||||
state.errors.set(errors);
|
||||
},
|
||||
clearErrors(state) {
|
||||
state.errors.clear();
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
init({ dispatch }) {
|
||||
dispatch('getInvoices');
|
||||
},
|
||||
terminate() {
|
||||
return Invoice.deleteAll();
|
||||
},
|
||||
async getInvoices() {
|
||||
const invoices = await InvoiceService.getInvoices();
|
||||
await Invoice.create({ data: invoices });
|
||||
return invoices;
|
||||
},
|
||||
async getInvoice({ commit }, invoiceId) {
|
||||
const invoice = await InvoiceService.getInvoice(invoiceId);
|
||||
await Invoice.insert({ data: invoice });
|
||||
commit('invoiceId', invoiceId);
|
||||
return invoice;
|
||||
},
|
||||
async createNewInvoice() {
|
||||
const invoice = await Invoice.createNew();
|
||||
await InvoiceService.createInvoice(invoice);
|
||||
return invoice.id;
|
||||
},
|
||||
invoiceProps({ state }, props) {
|
||||
return Invoice.update({
|
||||
where: state.invoiceId,
|
||||
data: props,
|
||||
});
|
||||
},
|
||||
invoiceRowProps(store, payload) {
|
||||
return InvoiceRow.update({
|
||||
where: payload.id,
|
||||
data: payload.props,
|
||||
});
|
||||
},
|
||||
async updateInvoice({ getters, dispatch, commit }, props) {
|
||||
await dispatch('invoiceProps', props);
|
||||
|
||||
// Update client
|
||||
const clientProps = pick(props, {
|
||||
bank_account_id: 'bank_account_id',
|
||||
client_name: 'company_name',
|
||||
client_address: 'company_address',
|
||||
client_postal_code: 'company_postal_code',
|
||||
client_country: 'company_country',
|
||||
client_county: 'company_county',
|
||||
client_city: 'company_city',
|
||||
client_reg_no: 'company_reg_no',
|
||||
client_vat_no: 'company_vat_no',
|
||||
client_email: 'invoice_email',
|
||||
currency: 'currency',
|
||||
});
|
||||
if ('vat_rate' in props) {
|
||||
clientProps.has_vat = props.vat_rate > 0;
|
||||
}
|
||||
|
||||
if (Object.keys(clientProps).length > 0 && getters.invoice.client_id) {
|
||||
dispatch('clients/updateClientById', {
|
||||
props: clientProps,
|
||||
clientId: getters.invoice.client_id,
|
||||
}, { root: true });
|
||||
}
|
||||
|
||||
const teamProps = pick(props, {
|
||||
late_fee: 'invoice_late_fee',
|
||||
from_name: 'company_name',
|
||||
from_address: 'company_address',
|
||||
from_postal_code: 'company_postal_code',
|
||||
from_city: 'company_city',
|
||||
from_country: 'company_country',
|
||||
from_county: 'company_county',
|
||||
from_reg_no: 'company_reg_no',
|
||||
from_vat_no: 'company_vat_no',
|
||||
from_website: 'website',
|
||||
from_email: 'contact_email',
|
||||
from_phone: 'contact_phone',
|
||||
vat_rate: 'vat_rate',
|
||||
});
|
||||
if ('due_at' in props || 'issued_at' in props) {
|
||||
teamProps.invoice_due_days = dayjs(getters.invoice.due_at)
|
||||
.diff(getters.invoice.issued_at, 'days');
|
||||
}
|
||||
if ('vat_rate' in props) {
|
||||
// You can only set VAT to 0 if setting it directly under settings
|
||||
// This is to avoid setting general VAT to 0, if only changing per invoice
|
||||
if (parseFloat(teamProps.vat_rate) === 0) {
|
||||
delete teamProps.vat_rate;
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(teamProps).length > 0) {
|
||||
dispatch('teams/updateTeam', teamProps, { root: true });
|
||||
}
|
||||
|
||||
commit('clearErrors');
|
||||
|
||||
return InvoiceService.updateInvoice(getters.invoice)
|
||||
.catch(err => commit('setErrors', err.response.data.errors));
|
||||
},
|
||||
async updateInvoiceRow({ getters, dispatch, commit }, payload) {
|
||||
await dispatch('invoiceRowProps', payload);
|
||||
|
||||
commit('clearErrors');
|
||||
|
||||
return InvoiceService.updateInvoice(getters.invoice)
|
||||
.catch(err => commit('setErrors', err.response.data.errors));
|
||||
},
|
||||
async deleteInvoice(invoice) {
|
||||
const res = await InvoiceService.deleteInvoice(invoice.id);
|
||||
if ('invoice_id' in res) {
|
||||
Invoice.delete(res.invoice_id);
|
||||
}
|
||||
return res;
|
||||
},
|
||||
async addRow({ state, getters }) {
|
||||
const row = await InvoiceRow.createNew();
|
||||
row.$update({
|
||||
invoice_id: state.invoiceId,
|
||||
order: getters.invoice.rows.length,
|
||||
});
|
||||
},
|
||||
async removeRow(store, row) {
|
||||
await InvoiceRow.delete(row.id);
|
||||
},
|
||||
async sendInvoice({ state, dispatch }, message) {
|
||||
const res = await InvoiceService.sendInvoice(state.invoiceId, message);
|
||||
dispatch('invoiceProps', {
|
||||
status: 'sent',
|
||||
});
|
||||
return res;
|
||||
},
|
||||
async bookInvoice({ getters, commit, dispatch }) {
|
||||
commit('clearErrors');
|
||||
|
||||
try {
|
||||
const res = await InvoiceService.bookInvoice(getters.invoice);
|
||||
return dispatch('getInvoice', res.invoice_id);
|
||||
} catch (err) {
|
||||
commit('setErrors', err.response.data.errors);
|
||||
}
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
invoice(state) {
|
||||
return Invoice.query()
|
||||
.with(['client', 'project', 'team.logos'])
|
||||
.with('rows', query => query.orderBy('order', 'asc'))
|
||||
.find(state.invoiceId);
|
||||
},
|
||||
all() {
|
||||
return Invoice.query()
|
||||
.where('$isNew', false)
|
||||
.with(['client'])
|
||||
.with('rows', query => query.orderBy('order', 'asc')) // TODO: do we need this?
|
||||
.orderBy('issued_at', 'desc')
|
||||
.orderBy('number', 'desc')
|
||||
.get();
|
||||
},
|
||||
subTotal(state, getters) {
|
||||
return getters.invoice.rows.reduce((carr, row) => (row.quantity * row.price) + carr, 0);
|
||||
},
|
||||
total(state, getters) {
|
||||
return getters.subTotal + getters.totalVat;
|
||||
},
|
||||
totalVat(state, getters) {
|
||||
return (getters.invoice.vat_rate / 100) * getters.subTotal;
|
||||
},
|
||||
},
|
||||
};
|
||||
17
src/store/models/bank-account.js
Normal file
17
src/store/models/bank-account.js
Normal file
@ -0,0 +1,17 @@
|
||||
import { Model } from '@vuex-orm/core';
|
||||
import { uuidv4 } from '@/utils/helpers';
|
||||
|
||||
export default class BankAccount extends Model {
|
||||
// This is the name used as module name of the Vuex Store.
|
||||
static entity = 'bank_accounts';
|
||||
|
||||
static fields() {
|
||||
return {
|
||||
id: this.attr(() => uuidv4()),
|
||||
account_no: this.attr(''),
|
||||
bank_name: this.attr(''),
|
||||
updated_at: this.attr(''),
|
||||
created_at: this.attr(''),
|
||||
};
|
||||
}
|
||||
}
|
||||
30
src/store/models/client.js
Normal file
30
src/store/models/client.js
Normal file
@ -0,0 +1,30 @@
|
||||
import { Model } from '@vuex-orm/core';
|
||||
import { uuidv4 } from '@/utils/helpers';
|
||||
import BankAccount from '@/store/models/bank-account';
|
||||
|
||||
export default class Client extends Model {
|
||||
// This is the name used as module name of the Vuex Store.
|
||||
static entity = 'clients';
|
||||
|
||||
static fields() {
|
||||
return {
|
||||
id: this.attr(() => uuidv4()),
|
||||
company_name: this.attr(''),
|
||||
company_address: this.attr(''),
|
||||
company_postal_code: this.attr(''),
|
||||
company_country: this.attr(''),
|
||||
company_county: this.attr(''),
|
||||
company_city: this.attr(''),
|
||||
company_reg_no: this.attr(''),
|
||||
company_vat_no: this.attr(''),
|
||||
has_vat: this.attr(null),
|
||||
currency: this.attr(null),
|
||||
rate: this.attr(null),
|
||||
invoice_email: this.attr(''),
|
||||
bank_account_id: this.attr(null),
|
||||
bank_account: this.belongsTo(BankAccount, 'bank_account_id', 'id'),
|
||||
updated_at: this.attr(''),
|
||||
created_at: this.attr(''),
|
||||
};
|
||||
}
|
||||
}
|
||||
23
src/store/models/invoice-row.js
Normal file
23
src/store/models/invoice-row.js
Normal file
@ -0,0 +1,23 @@
|
||||
import { Model } from '@vuex-orm/core';
|
||||
import { uuidv4 } from '@/utils/helpers';
|
||||
import Invoice from '@/store/models/invoice';
|
||||
|
||||
export default class InvoiceRow extends Model {
|
||||
// This is the name used as module name of the Vuex Store.
|
||||
static entity = 'invoice_rows';
|
||||
|
||||
static fields() {
|
||||
return {
|
||||
id: this.attr(() => uuidv4()),
|
||||
invoice_id: this.attr(null),
|
||||
invoice: this.belongsTo(Invoice, 'invoice_id'),
|
||||
item: this.attr(''),
|
||||
quantity: this.attr(null),
|
||||
price: this.attr(null),
|
||||
unit: this.attr(''),
|
||||
order: this.attr(null),
|
||||
updated_at: this.attr(''),
|
||||
created_at: this.attr(''),
|
||||
};
|
||||
}
|
||||
}
|
||||
51
src/store/models/invoice.js
Normal file
51
src/store/models/invoice.js
Normal file
@ -0,0 +1,51 @@
|
||||
import { Model } from '@vuex-orm/core';
|
||||
import { uuidv4 } from '@/utils/helpers';
|
||||
import Client from '@/store/models/client';
|
||||
import InvoiceRow from '@/store/models/invoice-row';
|
||||
|
||||
export default class Invoice extends Model {
|
||||
// This is the name used as module name of the Vuex Store.
|
||||
static entity = 'invoices';
|
||||
|
||||
static fields() {
|
||||
return {
|
||||
id: this.attr(() => uuidv4()),
|
||||
number: this.attr(''),
|
||||
status: this.attr('draft'),
|
||||
issued_at: this.attr(''),
|
||||
due_at: this.attr(''),
|
||||
late_fee: this.attr(''),
|
||||
vat_rate: this.attr(''),
|
||||
currency: this.attr(''),
|
||||
from_name: this.attr(''),
|
||||
from_address: this.attr(''),
|
||||
from_postal_code: this.attr(''),
|
||||
from_city: this.attr(''),
|
||||
from_country: this.attr(''),
|
||||
from_county: this.attr(''),
|
||||
from_reg_no: this.attr(''),
|
||||
from_vat_no: this.attr(''),
|
||||
from_website: this.attr(''),
|
||||
from_email: this.attr(''),
|
||||
from_phone: this.attr(''),
|
||||
bank_name: this.attr(''),
|
||||
bank_account_no: this.attr(''),
|
||||
client_name: this.attr(''),
|
||||
client_address: this.attr(''),
|
||||
client_postal_code: this.attr(''),
|
||||
client_country: this.attr(''),
|
||||
client_county: this.attr(''),
|
||||
client_city: this.attr(''),
|
||||
client_reg_no: this.attr(''),
|
||||
client_vat_no: this.attr(''),
|
||||
client_email: this.attr(''),
|
||||
client_id: this.attr(null),
|
||||
client: this.belongsTo(Client, 'client_id'),
|
||||
rows: this.hasMany(InvoiceRow, 'invoice_id'),
|
||||
notes: this.attr(''),
|
||||
updated_at: this.attr(''),
|
||||
created_at: this.attr(''),
|
||||
total: this.attr(null), // Only used in lists.
|
||||
};
|
||||
}
|
||||
}
|
||||
30
src/store/models/team.js
Normal file
30
src/store/models/team.js
Normal file
@ -0,0 +1,30 @@
|
||||
import { Model } from '@vuex-orm/core';
|
||||
import { uuidv4 } from '@/utils/helpers';
|
||||
|
||||
export default class Team extends Model {
|
||||
// This is the name used as module name of the Vuex Store.
|
||||
static entity = 'teams';
|
||||
|
||||
static fields() {
|
||||
return {
|
||||
id: this.attr(() => uuidv4()),
|
||||
company_name: this.attr(''),
|
||||
company_address: this.attr(''),
|
||||
company_postal_code: this.attr(''),
|
||||
company_country: this.attr(''),
|
||||
company_county: this.attr(''),
|
||||
company_city: this.attr(''),
|
||||
company_reg_no: this.attr(''),
|
||||
company_vat_no: this.attr(''),
|
||||
website: this.attr(''),
|
||||
contact_email: this.attr(''),
|
||||
contact_phone: this.attr(''),
|
||||
vat_rate: this.attr(null),
|
||||
invoice_late_fee: this.attr(null),
|
||||
invoice_due_days: this.attr(null),
|
||||
updated_at: this.attr(''),
|
||||
created_at: this.attr(''),
|
||||
logo_url: this.attr(''),
|
||||
};
|
||||
}
|
||||
}
|
||||
39
src/store/store.js
Normal file
39
src/store/store.js
Normal file
@ -0,0 +1,39 @@
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
import VuexORM from '@vuex-orm/core';
|
||||
import VuexORMisDirtyPlugin from '@vuex-orm/plugin-change-flags';
|
||||
import BankAccount from '@/store/models/bank-account';
|
||||
import Client from '@/store/models/client';
|
||||
import Invoice from '@/store/models/invoice';
|
||||
import InvoiceRow from '@/store/models/invoice-row';
|
||||
import Team from '@/store/models/team';
|
||||
import bankAccounts from '@/store/bank-accounts';
|
||||
import clients from '@/store/clients';
|
||||
import invoices from '@/store/invoices';
|
||||
import teams from '@/store/teams';
|
||||
import themes from '@/store/themes';
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
VuexORM.use(VuexORMisDirtyPlugin);
|
||||
const database = new VuexORM.Database();
|
||||
|
||||
database.register(Team);
|
||||
database.register(Client);
|
||||
database.register(Invoice);
|
||||
database.register(InvoiceRow);
|
||||
database.register(BankAccount);
|
||||
|
||||
export default new Vuex.Store({
|
||||
plugins: [VuexORM.install(database)],
|
||||
modules: {
|
||||
bankAccounts,
|
||||
clients,
|
||||
invoices,
|
||||
teams,
|
||||
themes,
|
||||
},
|
||||
state: {},
|
||||
mutations: {},
|
||||
actions: {},
|
||||
});
|
||||
49
src/store/teams.js
Normal file
49
src/store/teams.js
Normal file
@ -0,0 +1,49 @@
|
||||
import TeamService from '@/services/team.service';
|
||||
import Team from '@/store/models/team';
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {},
|
||||
mutations: {},
|
||||
actions: {
|
||||
async init({ dispatch }) {
|
||||
dispatch('clients/terminate', null, { root: true });
|
||||
dispatch('bankAccounts/terminate', null, { root: true });
|
||||
dispatch('invoices/terminate', null, { root: true });
|
||||
|
||||
await dispatch('getTeam');
|
||||
|
||||
dispatch('clients/init', null, { root: true });
|
||||
dispatch('bankAccounts/init', null, { root: true });
|
||||
dispatch('invoices/init', null, { root: true });
|
||||
},
|
||||
async getTeam() {
|
||||
const team = await TeamService.getTeam();
|
||||
await Team.create({ data: team });
|
||||
return team;
|
||||
},
|
||||
async teamProps({ state }, props) {
|
||||
return Team.update({
|
||||
where: state.teamId,
|
||||
data: props,
|
||||
});
|
||||
},
|
||||
async updateTeam({ getters, dispatch }, props) {
|
||||
if (props) {
|
||||
await dispatch('teamProps', props);
|
||||
}
|
||||
return TeamService.updateTeam(getters.team);
|
||||
},
|
||||
},
|
||||
getters: {
|
||||
team() {
|
||||
return Team.query().first();
|
||||
},
|
||||
all() {
|
||||
return Team.query()
|
||||
.with(['logos'])
|
||||
.where('$isNew', false)
|
||||
.get();
|
||||
},
|
||||
},
|
||||
};
|
||||
11
src/store/themes.js
Normal file
11
src/store/themes.js
Normal file
@ -0,0 +1,11 @@
|
||||
export default {
|
||||
namespaced: true,
|
||||
state: {
|
||||
theme: 'light',
|
||||
},
|
||||
mutations: {
|
||||
theme(state, theme) {
|
||||
state.theme = theme;
|
||||
},
|
||||
},
|
||||
};
|
||||
24
src/utils/errors.js
Normal file
24
src/utils/errors.js
Normal file
@ -0,0 +1,24 @@
|
||||
export default class Errors {
|
||||
constructor(errors) {
|
||||
this.errors = errors;
|
||||
}
|
||||
|
||||
set(errors) {
|
||||
this.errors = errors;
|
||||
}
|
||||
|
||||
get(field) {
|
||||
if (this.has(field)) {
|
||||
return this.errors[field];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
has(field) {
|
||||
return this.errors && this.errors.hasOwnProperty(field);
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.errors = {};
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user