This commit is contained in:
Ahmed Bouhuolia
2020-03-16 00:06:15 +02:00
parent 56701951b7
commit 73711384f6
7925 changed files with 18478 additions and 959 deletions

4
.env
View File

@@ -8,7 +8,7 @@ MAIL_FROM_ADDRESS=
MAIL_FROM_NAME=
DB_CLIENT=mysql
DB_HOST=localhost
DB_HOST=127.0.0.1
DB_USER=root
DB_PASSWORD=root
DB_PASSWORD=123123123
DB_NAME=ratteb

View File

@@ -25,5 +25,6 @@
"editor.useTabStops": false,
"editor.tabSize": 2,
"editor.insertSpaces": true,
"git.ignoreLimitWarning": true,
}

630
client/package-lock.json generated
View File

@@ -1041,6 +1041,24 @@
}
}
},
"@blueprintjs/datetime": {
"version": "3.15.2",
"resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-3.15.2.tgz",
"integrity": "sha512-FQw1BqbO9RBKzLWiXHkSVFxyGFRXHaugG5ST4go+p2IibrxuRDjD6YvrFXo+FLEzi+MsftMo6FkPNm2xApfmHw==",
"requires": {
"@blueprintjs/core": "^3.23.0",
"classnames": "^2.2",
"react-day-picker": "7.3.2",
"tslib": "~1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
"integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
}
}
},
"@blueprintjs/icons": {
"version": "3.13.0",
"resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-3.13.0.tgz",
@@ -1057,6 +1075,42 @@
}
}
},
"@blueprintjs/select": {
"version": "3.11.2",
"resolved": "https://registry.npmjs.org/@blueprintjs/select/-/select-3.11.2.tgz",
"integrity": "sha512-fU0Km6QI/ayWhzYeu9N1gTj0+L0XUO4KB3u2LfJXgj648UGY8F4HX2ETdJ+XPdtsu6TesrIL7ghMQhtLcvafBg==",
"requires": {
"@blueprintjs/core": "^3.20.0",
"classnames": "^2.2",
"tslib": "~1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
"integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
}
}
},
"@blueprintjs/table": {
"version": "3.8.3",
"resolved": "https://registry.npmjs.org/@blueprintjs/table/-/table-3.8.3.tgz",
"integrity": "sha512-ppyXy/8USvTe+HHl6VGJk+GqJalwzutTJNAiZMgpTJh8UglH8/245IpDpIlAYlyNW98RhMtloB+5UuBWHpxmhA==",
"requires": {
"@blueprintjs/core": "^3.23.1",
"classnames": "^2.2",
"prop-types": "^15.6.0",
"react-lifecycles-compat": "^3.0.4",
"tslib": "~1.9.0"
},
"dependencies": {
"tslib": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
"integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
}
}
},
"@cnakazawa/watch": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/@cnakazawa/watch/-/watch-1.0.4.tgz",
@@ -1491,6 +1545,180 @@
"loader-utils": "^1.2.3"
}
},
"@syncfusion/ej2-base": {
"version": "17.4.47",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-17.4.47.tgz",
"integrity": "sha512-NtW0IKgLYzq4fZBmyG+kT3WEDqD9Wq+fsUkg6k1xQjp8Xy6zCqJul2U15BDF8GwY9nIH/nvsoPFV5+025ypJnA==",
"requires": {
"@syncfusion/ej2-icons": "~17.4.47"
}
},
"@syncfusion/ej2-buttons": {
"version": "17.4.49",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-buttons/-/ej2-buttons-17.4.49.tgz",
"integrity": "sha512-1Ohe1q8lwg+8e7f0TQzOdDS4l1giDArz3OqPeH92loQvnG2naXG7kHsKaAaADa/0x1B7vWZKLYBg63t30F1RcA==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47"
}
},
"@syncfusion/ej2-calendars": {
"version": "17.4.50",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-calendars/-/ej2-calendars-17.4.50.tgz",
"integrity": "sha512-ISjzpn1TF67v9vsw3HVaXD/L/ZyWX9iyDW0mMvaIlRliymp7liaFvW/gQE/4okOp7+v6dMW6dGm0bDvC8kFS1A==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47",
"@syncfusion/ej2-buttons": "~17.4.49",
"@syncfusion/ej2-inputs": "~17.4.47",
"@syncfusion/ej2-lists": "~17.4.47",
"@syncfusion/ej2-popups": "~17.4.49"
}
},
"@syncfusion/ej2-compression": {
"version": "17.4.47",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-17.4.47.tgz",
"integrity": "sha512-Rcwh6wmbwnvzQdASx4xw2WHwtsLZUasS+7a2eXwtuJM+J8tgmxVA/UXXFcb62BoInGMn8aBzfDf9vd2eulvZJg==",
"requires": {
"@syncfusion/ej2-file-utils": "~17.4.47"
}
},
"@syncfusion/ej2-data": {
"version": "17.4.47",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-17.4.47.tgz",
"integrity": "sha512-gcpGo6PAlp47mf+WkIS7dUfi2Z9ZEXfs5wdDogDikEUkspPvsQHN853lZj861uXBhtCRMmI4RwIf6K91sZVZAg==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47"
}
},
"@syncfusion/ej2-dropdowns": {
"version": "17.4.50",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-dropdowns/-/ej2-dropdowns-17.4.50.tgz",
"integrity": "sha512-Fvj1rivIc0d76e1CWFaqluNsxvuj3m8gKcFLilVhgli4Z4RseKfoxLjggoa9l5M9dpGDdqHbTgiqKE7XXk1rZA==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47",
"@syncfusion/ej2-data": "~17.4.47",
"@syncfusion/ej2-inputs": "~17.4.47",
"@syncfusion/ej2-lists": "~17.4.47",
"@syncfusion/ej2-popups": "~17.4.49"
}
},
"@syncfusion/ej2-excel-export": {
"version": "17.4.47",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-excel-export/-/ej2-excel-export-17.4.47.tgz",
"integrity": "sha512-TjVNHqJ9deZ2FvtaFlXsYaJXNNZCq9e7IesetZiA9mR/l4TYLhCOm1TWtsI2saTNlQV9Vm2nHyEZWLU+lNz9Lw==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47",
"@syncfusion/ej2-compression": "~17.4.47"
}
},
"@syncfusion/ej2-file-utils": {
"version": "17.4.47",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-17.4.47.tgz",
"integrity": "sha512-z3QLUkerENnO65HhTwp0v/O2OPzGKOKCve7Nq0CCL5PCwsZfrWoHzPmiZrbUIYU/29dniOrreb9t9lHf30sY5w=="
},
"@syncfusion/ej2-grids": {
"version": "17.4.50",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-grids/-/ej2-grids-17.4.50.tgz",
"integrity": "sha512-BxOmOgkluJl/64sxOgWJAXbyw8QE0nwfmkwE8pdih4nJ7pjPd43fJcrDYCF+2YOAH/MilE/mxWpWx0ruYbsfxw==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47",
"@syncfusion/ej2-buttons": "~17.4.49",
"@syncfusion/ej2-calendars": "~17.4.50",
"@syncfusion/ej2-compression": "~17.4.47",
"@syncfusion/ej2-data": "~17.4.47",
"@syncfusion/ej2-dropdowns": "~17.4.50",
"@syncfusion/ej2-excel-export": "~17.4.47",
"@syncfusion/ej2-file-utils": "~17.4.47",
"@syncfusion/ej2-inputs": "~17.4.47",
"@syncfusion/ej2-lists": "~17.4.47",
"@syncfusion/ej2-navigations": "~17.4.50",
"@syncfusion/ej2-pdf-export": "~17.4.47",
"@syncfusion/ej2-popups": "~17.4.49",
"@syncfusion/ej2-splitbuttons": "~17.4.49"
}
},
"@syncfusion/ej2-icons": {
"version": "17.4.47",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-17.4.47.tgz",
"integrity": "sha512-u+6f53FUKPEOVf2ZXVTFOZtqNSkoe4z0VDHjOQXIeX1iLnBjTEgKoKiQXEZGncB814wKW2RJ6htEhgVZW6yxzw=="
},
"@syncfusion/ej2-inputs": {
"version": "17.4.47",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-inputs/-/ej2-inputs-17.4.47.tgz",
"integrity": "sha512-Eo3eAbFEHcQesr2vvhwx8gGEoY2KHmHa9lPjkmRqb+fAcLieWMU+Wl5VO0UN3dE+Fx28QCEkWS/7pfuvnJLnrg==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47",
"@syncfusion/ej2-buttons": "~17.4.47",
"@syncfusion/ej2-popups": "~17.4.47",
"@syncfusion/ej2-splitbuttons": "~17.4.47"
}
},
"@syncfusion/ej2-lists": {
"version": "17.4.47",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-lists/-/ej2-lists-17.4.47.tgz",
"integrity": "sha512-DAGxrScsuToio1jEPx4GaKDEKf+TMO7O6UetP3i/F4Xj6XDkSGBap+q2t0cVq5Sy8V87Isv1IFFvPXZ7aWNJRg==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47",
"@syncfusion/ej2-buttons": "~17.4.47",
"@syncfusion/ej2-data": "~17.4.47"
}
},
"@syncfusion/ej2-navigations": {
"version": "17.4.50",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-navigations/-/ej2-navigations-17.4.50.tgz",
"integrity": "sha512-1imwHDmLL2nf3GpAMI4Q4LmJJjxpkCPqkir8K3hSmFtZE2mBBTgqasU3bcoXP+kwIpx+S4DKCnm01i3x6XqHWQ==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47",
"@syncfusion/ej2-buttons": "~17.4.49",
"@syncfusion/ej2-data": "~17.4.47",
"@syncfusion/ej2-inputs": "~17.4.47",
"@syncfusion/ej2-lists": "~17.4.47",
"@syncfusion/ej2-popups": "~17.4.49"
}
},
"@syncfusion/ej2-pdf-export": {
"version": "17.4.47",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-17.4.47.tgz",
"integrity": "sha512-HoKeYXYBkWRPuqWj3XJeoLoDc9+2tVuPgaStsTaW+vyDOwFdZt8Y8X1ghKDTENKnGHWT2sqRhTqNFOxylg1Y4Q==",
"requires": {
"@syncfusion/ej2-compression": "~17.4.47"
}
},
"@syncfusion/ej2-popups": {
"version": "17.4.49",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-popups/-/ej2-popups-17.4.49.tgz",
"integrity": "sha512-4T9I+PoSwPnE9sTUI3dttxUTIppW/dsVSwi/XoCsASsQqrT4U0As27o1tek9v1FshydZRna9R6iX9pv0ux663w==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47",
"@syncfusion/ej2-buttons": "~17.4.49"
}
},
"@syncfusion/ej2-react-base": {
"version": "17.4.49",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-react-base/-/ej2-react-base-17.4.49.tgz",
"integrity": "sha512-TquWHwdqT5P+rMVYVienMsz/vEEmAt+bZODi3xmlhA4p27HJELbKVGlafjo+6tdEZe0XjQtiaGow8ikyIg4mvA==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47"
}
},
"@syncfusion/ej2-react-grids": {
"version": "17.4.50",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-react-grids/-/ej2-react-grids-17.4.50.tgz",
"integrity": "sha512-kYGAnrIj0YcOT9Egzwu+9DI5UFq05Yvn+VWh9Gqcpz6gDif3dXy4aNDOlS+rXbJaw/DzZjxjD4aMh4shF6F6BA==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47",
"@syncfusion/ej2-grids": "17.4.50",
"@syncfusion/ej2-react-base": "~17.4.49"
}
},
"@syncfusion/ej2-splitbuttons": {
"version": "17.4.49",
"resolved": "https://registry.npmjs.org/@syncfusion/ej2-splitbuttons/-/ej2-splitbuttons-17.4.49.tgz",
"integrity": "sha512-nnBFzoR5UxCPaaQZUV31L9+hL13x223Tt7lhvqnxTDNmDb2MTwXQ3PPN/VYhza1AQnQjY17Ro7HPqPF7pbMnHQ==",
"requires": {
"@syncfusion/ej2-base": "~17.4.47",
"@syncfusion/ej2-popups": "~17.4.49"
}
},
"@testing-library/dom": {
"version": "6.12.2",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-6.12.2.tgz",
@@ -1606,6 +1834,15 @@
"hoist-non-react-statics": "^3.3.0"
}
},
"@types/http-proxy": {
"version": "1.17.3",
"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.3.tgz",
"integrity": "sha512-wIPqXANye5BbORbuh74exbwNzj+UWCwWyeEFJzUQ7Fq3W2NSAy+7x7nX1fgbEypr2/TdKqpeuxLnXWgzN533/Q==",
"dev": true,
"requires": {
"@types/node": "*"
}
},
"@types/invariant": {
"version": "2.2.31",
"resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.31.tgz",
@@ -1633,6 +1870,11 @@
"@types/istanbul-lib-report": "*"
}
},
"@types/js-cookie": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-2.2.4.tgz",
"integrity": "sha512-WTfSE1Eauak/Nrg6cA9FgPTFvVawejsai6zXoq0QYTQ3mxONeRtGhKxa7wMlUzWWmzrmTeV+rwLjHgsCntdrsA=="
},
"@types/json-schema": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.4.tgz",
@@ -1680,6 +1922,11 @@
"@types/react": "*"
}
},
"@types/sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/@types/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-aWK2oTpbjNmLyexl95L4ttd0kFIvbMIf1JR2YbNhUwIk9Y1cOwfAfyvfxBBmtg1ZDy64gpbgEdFjyqnzjh+3/A=="
},
"@types/stack-utils": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -1920,6 +2167,11 @@
"@xtuc/long": "4.2.2"
}
},
"@xobotyi/scrollbar-width": {
"version": "1.9.0",
"resolved": "https://registry.npmjs.org/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.0.tgz",
"integrity": "sha512-W8oNXd3HkW9eQHxk+47iRx4aqd0yIV9NoeykUTd0uE0sYx3LOAQE7rfHOd8xtMP7IADfLIdG0o0H1sXvHUF7dw=="
},
"@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -2690,6 +2942,79 @@
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.3.1.tgz",
"integrity": "sha512-mLQ4i2QO1ytvGWFWmcngKO//JXAQueZvwEKtjgQFM4jIK0kU+ytMfplL8j+n5mspOfjHwoAg+9yhb7BwAHm36g=="
},
"basscss": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/basscss/-/basscss-8.0.2.tgz",
"integrity": "sha1-4FK1qpXuTV6hGAG8djudco9MAfY=",
"requires": {
"basscss-align": "^1.0.2",
"basscss-border": "^4.0.2",
"basscss-flexbox": "^1.0.1",
"basscss-grid": "^2.0.0",
"basscss-hide": "^1.0.1",
"basscss-layout": "^3.1.0",
"basscss-margin": "^1.0.7",
"basscss-padding": "^1.1.3",
"basscss-position": "^2.0.3",
"basscss-type-scale": "^1.0.5",
"basscss-typography": "^3.0.3"
}
},
"basscss-align": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/basscss-align/-/basscss-align-1.0.2.tgz",
"integrity": "sha1-KUqmidb5nahuSvTFwokocIVcHDc="
},
"basscss-border": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/basscss-border/-/basscss-border-4.0.2.tgz",
"integrity": "sha1-FLRQYym5DLFKvl9NNHPp/pIC3y4="
},
"basscss-flexbox": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/basscss-flexbox/-/basscss-flexbox-1.0.2.tgz",
"integrity": "sha512-AtG6yBmmza2nPo3x9X4/7rbW22gLmiSvYvirFs7Aspt1zp5FHwpRBz3BD2v/a3qPdmVM8OvOLVNWISGM6O50MA=="
},
"basscss-grid": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/basscss-grid/-/basscss-grid-2.0.0.tgz",
"integrity": "sha1-b0wxmOeGo4Up+DYrw7O85SVME2k="
},
"basscss-hide": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/basscss-hide/-/basscss-hide-1.0.1.tgz",
"integrity": "sha1-NLwTi7qGfGxJq4aCphDvSV5H11A="
},
"basscss-layout": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/basscss-layout/-/basscss-layout-3.1.0.tgz",
"integrity": "sha1-+fOS5IDaZmV9n+XenKTAfFecOk4="
},
"basscss-margin": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/basscss-margin/-/basscss-margin-1.0.9.tgz",
"integrity": "sha512-wpF8tXrtzU+iMtLvfSgYJlpkIxChOlay3YumoI+yJ6IiOe5uMmEGUG8FWAIkC8QalkKDAURAqHmQ4nbuyUvyag=="
},
"basscss-padding": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/basscss-padding/-/basscss-padding-1.1.3.tgz",
"integrity": "sha1-adt5lBTm3Vi+2Dd2lSzCmeLmh04="
},
"basscss-position": {
"version": "2.0.3",
"resolved": "https://registry.npmjs.org/basscss-position/-/basscss-position-2.0.3.tgz",
"integrity": "sha1-RnGAofjzhukHLtjQgpTSpuC6QwU="
},
"basscss-type-scale": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/basscss-type-scale/-/basscss-type-scale-1.0.6.tgz",
"integrity": "sha512-93KOVRr5iX0e38d6+k2pQ8WW1IA5DigQhJextts4rwbSt2+cr+XrokGJ74HB8LevO54HMoc3VJ8M6oOR2puc8A=="
},
"basscss-typography": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/basscss-typography/-/basscss-typography-3.0.4.tgz",
"integrity": "sha512-PMCxUfYPpAj8gQV8qI09lfNp7eWNrKtQFkCN2fZjLyReSY/wnw8QP8irpvbJ67vSEhlkA6ZP8j7vmTDoxkyu8g=="
},
"batch": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
@@ -2800,6 +3125,11 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24="
},
"bowser": {
"version": "1.9.4",
"resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.4.tgz",
"integrity": "sha512-9IdMmj2KjigRq6oWhmwv1W36pDuA4STQZ8q6YO9um+x07xgYNCD3Oou+WP/3L1HNz7iqythGet3/p4wvc8AAwQ=="
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -3577,6 +3907,14 @@
"resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
"integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
},
"copy-to-clipboard": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
"integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
"requires": {
"toggle-selection": "^1.0.6"
}
},
"core-js": {
"version": "3.6.4",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.4.tgz",
@@ -3760,6 +4098,15 @@
}
}
},
"css-in-js-utils": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
"integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
"requires": {
"hyphenate-style-name": "^1.0.2",
"isobject": "^3.0.1"
}
},
"css-loader": {
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.4.2.tgz",
@@ -4517,6 +4864,14 @@
"is-arrayish": "^0.2.1"
}
},
"error-stack-parser": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/error-stack-parser/-/error-stack-parser-2.0.6.tgz",
"integrity": "sha512-d51brTeqC+BHlwF0BhPtcYgF5nlzf9ZZ0ZIUQNZpc9ZB9qw5IJ2diTrBY9jlCJkTLITYPjmiX6OWCwH+fuyNgQ==",
"requires": {
"stackframe": "^1.1.1"
}
},
"es-abstract": {
"version": "1.17.4",
"resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.4.tgz",
@@ -5391,6 +5746,16 @@
"resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
"integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
},
"fast-shallow-equal": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/fast-shallow-equal/-/fast-shallow-equal-1.0.0.tgz",
"integrity": "sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw=="
},
"fastest-stable-stringify": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/fastest-stable-stringify/-/fastest-stable-stringify-1.0.1.tgz",
"integrity": "sha1-kSLUBtTJ2YvqZEpraFPVh0uHsCg="
},
"faye-websocket": {
"version": "0.10.0",
"resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz",
@@ -6341,14 +6706,61 @@
}
},
"http-proxy-middleware": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
"integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.0.0.tgz",
"integrity": "sha512-1yM4gD7R/U9R5AwA6STkoj8JfjnMeZIUrd8e23Yc14A7xVVLUWlAikgvidklwq1UOroJ07sc6NWNULeOJMYOeQ==",
"dev": true,
"requires": {
"http-proxy": "^1.17.0",
"is-glob": "^4.0.0",
"lodash": "^4.17.11",
"micromatch": "^3.1.10"
"@types/http-proxy": "^1.17.3",
"http-proxy": "^1.18.0",
"is-glob": "^4.0.1",
"lodash": "^4.17.15",
"micromatch": "^4.0.2"
},
"dependencies": {
"braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"requires": {
"fill-range": "^7.0.1"
}
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"requires": {
"to-regex-range": "^5.0.1"
}
},
"is-number": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true
},
"micromatch": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
"integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
"dev": true,
"requires": {
"braces": "^3.0.1",
"picomatch": "^2.0.5"
}
},
"to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"requires": {
"is-number": "^7.0.0"
}
}
}
},
"http-signature": {
@@ -6366,6 +6778,11 @@
"resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
"integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
},
"hyphenate-style-name": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
"integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
},
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -6488,6 +6905,15 @@
"resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
"integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
},
"inline-style-prefixer": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-4.0.2.tgz",
"integrity": "sha512-N8nVhwfYga9MiV9jWlwfdj1UDIaZlBFu4cJSJkIr7tZX7sHpHhGR5su1qdpW+7KPL8ISTvCIkcaFi/JdBknvPg==",
"requires": {
"bowser": "^1.7.3",
"css-in-js-utils": "^2.0.0"
}
},
"inquirer": {
"version": "7.0.4",
"resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.4.tgz",
@@ -7925,6 +8351,11 @@
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.2.tgz",
"integrity": "sha512-Vg8czh0Q7sFBSUMWWArX/miJeBWYBPpdU/3M/DKSaekLMqrqVPaedp+5mZhie/r0lgrcaYBfwXatEew6gwgiQQ=="
},
"js-cookie": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
"integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
},
"js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8820,6 +9251,11 @@
}
}
},
"moment": {
"version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
"integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
},
"move-concurrently": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -8862,6 +9298,21 @@
"resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
"integrity": "sha512-INOFj37C7k3AfaNTtX8RhsTw7qRy7eLET14cROi9+5HAVbbHuIWUHEauBv5qT4Av2tWasiTY1Jw6puUNqRJXQg=="
},
"nano-css": {
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/nano-css/-/nano-css-5.3.0.tgz",
"integrity": "sha512-uM/9NGK9/E9/sTpbIZ/bQ9xOLOIHZwrrb/CRlbDHBU/GFS7Gshl24v/WJhwsVViWkpOXUmiZ66XO7fSB4Wd92Q==",
"requires": {
"css-tree": "^1.0.0-alpha.28",
"csstype": "^2.5.5",
"fastest-stable-stringify": "^1.0.1",
"inline-style-prefixer": "^4.0.0",
"rtl-css-js": "^1.9.0",
"sourcemap-codec": "^1.4.1",
"stacktrace-js": "^2.0.0",
"stylis": "3.5.0"
}
},
"nanomatch": {
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -11034,6 +11485,14 @@
"whatwg-fetch": "^3.0.0"
}
},
"react-day-picker": {
"version": "7.3.2",
"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-7.3.2.tgz",
"integrity": "sha512-mij2j2Un/v2V2ow+hf/hFBMdl6Eis/C/YhBtlI6Xpbvh3Q6WMix78zEkCdw6i9GldafOrpnupWKofv/h5oSI4g==",
"requires": {
"prop-types": "^15.6.2"
}
},
"react-dev-utils": {
"version": "10.2.0",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.0.tgz",
@@ -11177,6 +11636,14 @@
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
},
"react-grid-system": {
"version": "6.2.3",
"resolved": "https://registry.npmjs.org/react-grid-system/-/react-grid-system-6.2.3.tgz",
"integrity": "sha512-vkSKzsnI2lyAgO5IDJu/YdOE4Ag67GOH0dZHE7AfCstnh+2kK2fCFZWPgW7r0Gwve34QQNKw0Pv5EVjemBWVpA==",
"requires": {
"prop-types": "^15.7.2"
}
},
"react-hook-form": {
"version": "4.9.4",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-4.9.4.tgz",
@@ -11294,6 +11761,29 @@
"tiny-warning": "^1.0.0"
}
},
"react-sortablejs": {
"version": "2.0.11",
"resolved": "https://registry.npmjs.org/react-sortablejs/-/react-sortablejs-2.0.11.tgz",
"integrity": "sha512-Id44yygU6H/fNRp0uWkGZnKGuBF8GF/Ts6gKX5NfwmzceRjH0e0XHsmBuQ6WXhBIVnMM+XgkEPub851mdti0TA==",
"requires": {
"@types/sortablejs": "^1.10.0",
"classnames": "^2.2.6",
"sortablejs": "1.10.1",
"tiny-invariant": "^1.0.6"
},
"dependencies": {
"sortablejs": {
"version": "1.10.1",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.1.tgz",
"integrity": "sha512-N6r7GrVmO8RW1rn0cTdvK3JR0BcqecAJ0PmYMCL3ZuqTH3pY+9QyqkmJSkkLyyDvd+AJnwaxTP22Ybr/83V9hQ=="
}
}
},
"react-table": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/react-table/-/react-table-7.0.0.tgz",
"integrity": "sha512-/RKUYLuqrupUs0qHdjdQLmgwdQ9mgXPnpshqv2T+OQUGhTu0XuLXVc6GOIywemXNf6qjL3dj81O6zALLK74Emw=="
},
"react-transition-group": {
"version": "2.9.0",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
@@ -11305,6 +11795,26 @@
"react-lifecycles-compat": "^3.0.4"
}
},
"react-use": {
"version": "13.26.1",
"resolved": "https://registry.npmjs.org/react-use/-/react-use-13.26.1.tgz",
"integrity": "sha512-hDc4s8w4WI8G7c1BX+IsrdQFcZPfCHE/6oLpGPtcIPoxVhwj4QvVmNE8RnsnddBJ57HN8Xvkc3jp/8Z/4OB53w==",
"requires": {
"@types/js-cookie": "2.2.4",
"@xobotyi/scrollbar-width": "1.9.0",
"copy-to-clipboard": "^3.2.0",
"fast-deep-equal": "^3.1.1",
"fast-shallow-equal": "^1.0.0",
"js-cookie": "^2.2.1",
"nano-css": "^5.2.1",
"resize-observer-polyfill": "^1.5.1",
"screenfull": "^5.0.0",
"set-harmonic-interval": "^1.0.1",
"throttle-debounce": "^2.1.0",
"ts-easing": "^0.2.0",
"tslib": "^1.10.0"
}
},
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11798,6 +12308,14 @@
"resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
"integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA=="
},
"rtl-css-js": {
"version": "1.14.0",
"resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.14.0.tgz",
"integrity": "sha512-Dl5xDTeN3e7scU1cWX8c9b6/Nqz3u/HgR4gePc1kWXYiQWVQbKCEyK6+Hxve9LbcJ5EieHy1J9nJCN3grTtGwg==",
"requires": {
"@babel/runtime": "^7.1.2"
}
},
"run-async": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
@@ -12145,6 +12663,11 @@
"ajv-keywords": "^3.4.1"
}
},
"screenfull": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/screenfull/-/screenfull-5.0.2.tgz",
"integrity": "sha512-cCF2b+L/mnEiORLN5xSAz6H3t18i2oHh9BA8+CQlAh5DRw2+NFAGQJOSYbcGw8B2k04g/lVvFcfZ83b3ysH5UQ=="
},
"scss-tokenizer": {
"version": "0.2.3",
"resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -12300,6 +12823,11 @@
"resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
},
"set-harmonic-interval": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/set-harmonic-interval/-/set-harmonic-interval-1.0.1.tgz",
"integrity": "sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g=="
},
"set-value": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/set-value/-/set-value-2.0.1.tgz",
@@ -12594,6 +13122,11 @@
"is-plain-obj": "^1.0.0"
}
},
"sortablejs": {
"version": "1.10.2",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.10.2.tgz",
"integrity": "sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A=="
},
"source-list-map": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -12637,6 +13170,11 @@
"resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.0.tgz",
"integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
},
"sourcemap-codec": {
"version": "1.4.8",
"resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
},
"spdx-correct": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
@@ -12733,11 +13271,50 @@
"resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
"integrity": "sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w=="
},
"stack-generator": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/stack-generator/-/stack-generator-2.0.5.tgz",
"integrity": "sha512-/t1ebrbHkrLrDuNMdeAcsvynWgoH/i4o8EGGfX7dEYDoTXOYVAkEpFdtshlvabzc6JlJ8Kf9YdFEoz7JkzGN9Q==",
"requires": {
"stackframe": "^1.1.1"
}
},
"stack-utils": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-1.0.2.tgz",
"integrity": "sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA=="
},
"stackframe": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.1.1.tgz",
"integrity": "sha512-0PlYhdKh6AfFxRyK/v+6/k+/mMfyiEBbTM5L94D0ZytQnJ166wuwoTYLHFWGbs2dpA8Rgq763KGWmN1EQEYHRQ=="
},
"stacktrace-gps": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/stacktrace-gps/-/stacktrace-gps-3.0.4.tgz",
"integrity": "sha512-qIr8x41yZVSldqdqe6jciXEaSCKw1U8XTXpjDuy0ki/apyTn/r3w9hDAAQOhZdxvsC93H+WwwEu5cq5VemzYeg==",
"requires": {
"source-map": "0.5.6",
"stackframe": "^1.1.1"
},
"dependencies": {
"source-map": {
"version": "0.5.6",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
"integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI="
}
}
},
"stacktrace-js": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/stacktrace-js/-/stacktrace-js-2.0.2.tgz",
"integrity": "sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==",
"requires": {
"error-stack-parser": "^2.0.6",
"stack-generator": "^2.0.5",
"stacktrace-gps": "^3.0.4"
}
},
"static-extend": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -13071,6 +13648,11 @@
}
}
},
"stylis": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.0.tgz",
"integrity": "sha512-pP7yXN6dwMzAR29Q0mBrabPCe0/mNO1MSr93bhay+hcZondvMMTpeGyd8nbhYJdyperNT2DRxONQuUGcJr5iPw=="
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -13306,6 +13888,11 @@
"resolved": "https://registry.npmjs.org/throat/-/throat-4.1.0.tgz",
"integrity": "sha1-iQN8vJLFarGJJua6TLsgDhVnKmo="
},
"throttle-debounce": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-2.1.0.tgz",
"integrity": "sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg=="
},
"through": {
"version": "2.3.8",
"resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -13423,6 +14010,11 @@
"repeat-string": "^1.6.1"
}
},
"toggle-selection": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
},
"toidentifier": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
@@ -13463,6 +14055,11 @@
"glob": "^7.1.2"
}
},
"ts-easing": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/ts-easing/-/ts-easing-0.2.0.tgz",
"integrity": "sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ=="
},
"ts-pnp": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/ts-pnp/-/ts-pnp-1.1.5.tgz",
@@ -13711,6 +14308,14 @@
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
},
"use-named-routes": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/use-named-routes/-/use-named-routes-0.3.2.tgz",
"integrity": "sha1-/6ruqzPD5/WZdmUmQpMgkCggMfQ=",
"requires": {
"invariant": "^2.2.1"
}
},
"util": {
"version": "0.10.3",
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
@@ -15170,6 +15775,17 @@
}
}
},
"http-proxy-middleware": {
"version": "0.19.1",
"resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz",
"integrity": "sha512-yHYTgWMQO8VvwNS22eLLloAkvungsKdKTLO8AJlftYIKNfJr3GK3zK0ZCfzDDGUBttdGc8xFy1mCitvNKQtC3Q==",
"requires": {
"http-proxy": "^1.17.0",
"is-glob": "^4.0.0",
"lodash": "^4.17.11",
"micromatch": "^3.1.10"
}
},
"is-absolute-url": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",

View File

@@ -5,8 +5,12 @@
"dependencies": {
"@babel/core": "7.8.4",
"@blueprintjs/core": "^3.23.1",
"@blueprintjs/datetime": "^3.15.2",
"@blueprintjs/select": "^3.11.2",
"@blueprintjs/table": "^3.8.3",
"@reduxjs/toolkit": "^1.2.5",
"@svgr/webpack": "4.3.3",
"@syncfusion/ej2-react-grids": "^17.4.50",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^7.2.1",
@@ -18,6 +22,7 @@
"babel-loader": "8.0.6",
"babel-plugin-named-asset-import": "^0.3.6",
"babel-preset-react-app": "^9.1.1",
"basscss": "^8.0.2",
"camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0",
"css-loader": "3.4.2",
@@ -40,7 +45,9 @@
"jest-environment-jsdom-fourteen": "1.0.1",
"jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2",
"lodash": "^4.17.15",
"mini-css-extract-plugin": "0.9.0",
"moment": "^2.24.0",
"node-sass": "^4.13.1",
"optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.0",
@@ -53,21 +60,27 @@
"react-app-polyfill": "^1.0.6",
"react-dev-utils": "^10.2.0",
"react-dom": "^16.12.0",
"react-grid-system": "^6.2.3",
"react-hook-form": "^4.9.4",
"react-intl": "^3.12.0",
"react-loadable": "^5.5.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-sortablejs": "^2.0.11",
"react-table": "^7.0.0",
"react-use": "^13.26.1",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"resolve": "1.15.0",
"resolve-url-loader": "3.1.1",
"sass-loader": "8.0.2",
"semver": "6.3.0",
"sortablejs": "^1.10.2",
"style-loader": "0.23.1",
"terser-webpack-plugin": "2.3.4",
"ts-pnp": "1.1.5",
"url-loader": "2.3.0",
"use-named-routes": "^0.3.2",
"webpack": "4.41.5",
"webpack-dev-server": "3.10.2",
"webpack-manifest-plugin": "2.2.0",
@@ -75,7 +88,7 @@
"yup": "^0.28.1"
},
"scripts": {
"start": "node scripts/start.js",
"start": "PORT=8000 node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js"
},
@@ -95,6 +108,7 @@
]
},
"devDependencies": {
"http-proxy-middleware": "^1.0.0",
"redux-devtools": "^3.5.0"
},
"jest": {
@@ -153,5 +167,6 @@
"presets": [
"react-app"
]
}
},
"proxy": "http://localhost:3000/"
}

View File

@@ -39,5 +39,8 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> -->
</body>
</html>

11
client/setupProxy.js Normal file
View File

@@ -0,0 +1,11 @@
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
proxy({
target: 'http://localhost:3000',
changeOrigin: true,
})
);
};

View File

@@ -0,0 +1,99 @@
import React, { useMemo } from 'react';
import Icon from 'components/Icon';
import {
Button,
NavbarGroup,
Navbar,
Classes,
NavbarDivider,
MenuItem,
Menu,
Popover,
PopoverInteractionKind,
Position,
} from "@blueprintjs/core";
import classNames from 'classnames';
import {connect} from 'react-redux';
import {useRouteMatch} from 'react-router-dom';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import DialogConnect from 'connectors/Dialog.connector';
import AccountsConnect from 'connectors/Accounts.connector';
import {compose} from 'utils';
function AccountsActionsBar({
openDialog,
views,
bulkActions,
}) {
const {path} = useRouteMatch();
const onClickNewAccount = () => { openDialog('account-form', {}); };
const viewsMenuItems = views.map((view) => {
return (<MenuItem href={`${path}/${view.id}/custom_view`} text={view.name} />);
});
const hasBulkActionsSelected = useMemo(() => {
return Object.keys(bulkActions).length > 0;
}, [bulkActions]);
return (
<DashboardActionsBar>
<NavbarGroup>
<Popover
content={<Menu>{viewsMenuItems}</Menu>}
minimal={true}
interactionKind={PopoverInteractionKind.HOVER}
position={Position.BOTTOM_LEFT}>
<Button
className={classNames(Classes.MINIMAL, 'button--table-views')}
icon={ <Icon icon="table" /> }
text="Table Views"
rightIcon={'caret-down'} />
</Popover>
<NavbarDivider />
<Button
className={Classes.MINIMAL}
icon={ <Icon icon="plus" /> }
text="New Account"
onClick={onClickNewAccount} />
{hasBulkActionsSelected && (
<Button
className={Classes.MINIMAL}
icon={ <Icon icon="trash" />}
text="Archive" />)}
{hasBulkActionsSelected && (
<Button
className={Classes.MINIMAL}
icon={ <Icon icon="trash" />}
text="Delete" />)}
<Button
className={Classes.MINIMAL}
icon={ <Icon icon="file-import" /> }
text="Import" />
<Button
className={Classes.MINIMAL}
icon={ <Icon icon="file-export" /> }
text="Export" />
</NavbarGroup>
</DashboardActionsBar>
)
}
const mapStateToProps = (state) => {
return {
bulkActions: state.accounts.bulkActions,
};
};
export default compose(
DialogConnect,
AccountsConnect,
connect(mapStateToProps),
)(AccountsActionsBar);

View File

@@ -0,0 +1,168 @@
import {
GridComponent,
ColumnsDirective,
ColumnDirective,
Inject,
Sort,
} from '@syncfusion/ej2-react-grids';
import React, {useEffect} from 'react';
import {
Button,
Popover,
Menu,
MenuItem,
MenuDivider,
Position,
Checkbox,
} from '@blueprintjs/core';
import {useParams} from 'react-router-dom';
import useAsync from 'hooks/async';
import Icon from 'components/Icon';
import { handleBooleanChange, compose } from 'utils';
import AccountsConnect from 'connectors/Accounts.connector';
import DialogConnect from 'connectors/Dialog.connector';
import DashboardConnect from 'connectors/Dashboard.connector';
import ViewConnect from 'connectors/View.connector';
import LoadingIndicator from 'components/LoadingIndicator';
function AccountsDataTable({
accounts,
onDeleteAccount,
onInactiveAccount,
openDialog,
addBulkActionAccount,
removeBulkActionAccount,
fetchAccounts,
changeCurrentView,
changePageSubtitle,
getViewItem,
setTopbarEditView
}) {
const { custom_view_id: customViewId } = useParams();
// Fetch accounts list according to the given custom view id.
const fetchHook = useAsync(async () => {
await Promise.all([
fetchAccounts({ custom_view_id: customViewId }),
]);
});
// Refetch accounts list after custom view id change.
useEffect(() => {
const viewMeta = getViewItem(customViewId);
fetchHook.execute();
if (customViewId) {
changeCurrentView(customViewId);
setTopbarEditView(customViewId);
}
if (customViewId && viewMeta) {
changePageSubtitle(viewMeta.name);
} else {
changePageSubtitle('');
}
}, [customViewId]);
useEffect(() => () => {
// Clear page subtitle when unmount the page.
changePageSubtitle('');
}, []);
const handleEditAccount = (account) => () => {
openDialog('account-form', {action: 'edit', id: account.id});
};
const actionMenuList = (account) =>
(<Menu>
<MenuItem text="View Details" />
<MenuDivider />
<MenuItem text="Edit Account" onClick={handleEditAccount(account)} />
<MenuItem text="New Account" />
<MenuDivider />
<MenuItem text="Inactivate Account" onClick={() => onInactiveAccount(account)} />
<MenuItem text="Delete Account" onClick={() => onDeleteAccount(account)} />
</Menu>);
const handleClickCheckboxBulk = (account) => handleBooleanChange((value) => {
if (value) {
addBulkActionAccount(account.id);
} else {
removeBulkActionAccount(account.id);
}
});
const columns = [
{
field: '',
headerText: '',
template: (account) => (<Checkbox onChange={handleClickCheckboxBulk(account)} />),
customAttributes: {class: 'checkbox-row'}
},
{
field: 'name',
headerText: 'Account Name',
customAttributes: {class: 'account-name'},
},
{
field: 'code',
headerText: 'Code',
},
{
field: 'type.name',
headerText: 'Type',
},
{
headerText: 'Normal',
template: (column) => {
const type = column.type ? column.type.normal : '';
return type === 'credit' ? (<Icon icon={'arrow-down'} />) : ((<Icon icon={'arrow-up'} />));
},
customAttributes: {class: 'account-normal'},
},
{
field: 'balance',
headerText: 'Balance',
template: (column, data) => { return <span>$10,000</span>; },
},
{
headerText: '',
template: (account) => (
<Popover content={actionMenuList(account)} position={Position.RIGHT_BOTTOM}>
<Button icon={<Icon icon="ellipsis-h" />} />
</Popover>
),
}
];
const dataStateChange = (state) => {
}
return (
<LoadingIndicator loading={fetchHook.pending} spinnerSize={30}>
<GridComponent
allowSorting={true}
allowGrouping={true}
dataSource={{result: accounts, count: 12}}
dataStateChange={dataStateChange}
>
<ColumnsDirective>
{columns.map((column) => {
return (<ColumnDirective
field={column.field}
headerText={column.headerText}
template={column.template}
allowSorting={true}
customAttributes={column.customAttributes}
/>);
})}
</ColumnsDirective>
<Inject services={[Sort]} />
</GridComponent>
</LoadingIndicator>
);
}
export default compose(
AccountsConnect,
DialogConnect,
DashboardConnect,
ViewConnect,
)(AccountsDataTable);

View File

@@ -0,0 +1,54 @@
import React from 'react';
import {useHistory} from 'react-router';
import {connect} from 'react-redux';
import {
Alignment,
Navbar,
NavbarGroup,
Tabs,
Tab,
Button
} from "@blueprintjs/core";
import {useParams} from 'react-router-dom';
import Icon from 'components/Icon';
import {Link} from 'react-router-dom';
import {compose} from 'utils';
import AccountsConnect from 'connectors/Accounts.connector';
function AccountsViewsTabs({ views }) {
const history = useHistory();
const { custom_view_id: customViewId } = useParams();
const handleClickNewView = () => {
history.push('/dashboard/custom_views/accounts/new');
};
const tabs = views.map((view) => {
const baseUrl = '/dashboard/accounts';
const link = (<Link to={`${baseUrl}/${view.id}/custom_view`}>{ view.name }</Link>);
return (<Tab id={`custom_view_${view.id}`} title={link} />);
});
return (
<Navbar className="navbar--dashboard-views">
<NavbarGroup
align={Alignment.LEFT}>
<Tabs
id="navbar"
large={true}
selectedTabId={`custom_view_${customViewId}`}
className="tabs--dashboard-views">
<Tab
id="all"
title={<Link to={`/dashboard/accounts`}>All</Link>} />
{ tabs }
<Button
className="button--new-view"
icon={<Icon icon="plus" />}
onClick={handleClickNewView} />
</Tabs>
</NavbarGroup>
</Navbar>
);
}
export default compose(AccountsConnect)(AccountsViewsTabs);

View File

@@ -1,33 +1,41 @@
import React from 'react';
import PropTypes from 'prop-types';
import {IntlProvider} from 'react-intl';
import {connect} from 'react-redux';
import { IntlProvider } from 'react-intl';
import { connect } from 'react-redux';
import { Router } from 'react-router';
import PrivateRoute from 'components/PrivateRoute';
import Authentication from 'components/Authentication';
import Dashboard from 'components/Dashboard/Dashboard';
// import {isAuthenticated} from 'reducers/authentication'
import { isAuthenticated } from 'store/authentication/authentication.reducer'
import messages from 'lang/en';
import 'style/App.scss';
import { createBrowserHistory } from 'history';
function App(props) {
const history = createBrowserHistory();
return (
<IntlProvider locale={props.locale} messages={messages}>
<div className="App">
<Authentication isAuthenticated={props.isAuthorized} />
<PrivateRoute isAuthenticated={props.isAuthorized} component={Dashboard} />
<Router history={history}>
<Authentication isAuthenticated={props.isAuthorized} />
<PrivateRoute isAuthenticated={props.isAuthorized} component={Dashboard} />
</Router>
</div>
</IntlProvider>
);
}
App.defaultProps = {
locale: 'en',
};
App.propTypes = {
locale: PropTypes.string,
isAuthorized: PropTypes.bool,
};
const mapStateToProps = (state) => ({
isAuthorized: true,
isAuthorized: isAuthenticated(state),
});
export default connect(mapStateToProps)(App);

View File

@@ -0,0 +1,8 @@
import { Position, Toaster, Intent } from "@blueprintjs/core";
const AppToaster = Toaster.create({
position: Position.TOP,
intent: Intent.WARNING,
});
export default AppToaster;

View File

@@ -7,7 +7,7 @@ export default function({ isAuthenticated =false, ...rest }) {
return (
<Route path="/auth">
{ isAuthenticated ?
{ (isAuthenticated) ?
(<Redirect to={to} />) : (
<Switch>
<div class="authentication-page">

View File

@@ -1,12 +1,27 @@
import React from 'react';
import {Switch, Route} from 'react-router';
import Sidebar from 'components/Sidebar/Sidebar';
import DashboardContent from 'components/Dashboard/DashboardContent';
import DialogsContainer from 'components/DialogsContainer';
import PreferencesContent from 'components/Preferences/PreferencesContent';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
export default function() {
return (
<div className="dashboard" id="dashboard">
<Sidebar />
<DashboardContent />
return (
<div className="dashboard dashboard--preferences">
<Switch>
<Route path="/dashboard/preferences">
<Sidebar />
<PreferencesSidebar />
<PreferencesContent />
</Route>
<Route path="/dashboard">
<Sidebar />
<DashboardContent />
</Route>
</Switch>
<DialogsContainer />
</div>
)
);
}

View File

@@ -1,10 +1,18 @@
import React from 'react';
import classnames from 'classnames';
import { Navbar } from "@blueprintjs/core";
export default function DashboardActionsBar() {
export default function DashboardActionsBar({
children, name
}) {
return (
<div class="dashboard__actions-bar">
<div className={classnames({
'dashboard__actions-bar': true,
[`dashboard__actions-bar--${name}`]: !!name,
})}>
<Navbar className="navbar--dashboard-actions-bar">
{ children }
</Navbar>
</div>
)
);
}

View File

@@ -0,0 +1,35 @@
import React from 'react';
import {
CollapsibleList,
MenuItem,
Classes,
Boundary,
} from "@blueprintjs/core";
import classNames from "classnames";
export default function DashboardBreadcrumbs() {
function renderBreadcrumb(props) {
if (props.href != null) {
return <a className={Classes.BREADCRUMB}>{props.text}</a>;
} else {
return <span className={classNames(Classes.BREADCRUMB, Classes.BREADCRUMB_CURRENT)}>{props.text}</span>;
}
}
return (
<CollapsibleList
className={Classes.BREADCRUMBS}
dropdownTarget={<span className={Classes.BREADCRUMBS_COLLAPSED} />}
visibleItemRenderer={renderBreadcrumb}
collapseFrom={Boundary.START}
visibleItemCount={0}
>
<MenuItem icon="folder-close" text="All files" href="#" />
<MenuItem icon="folder-close" text="Users" href="#" />
<MenuItem icon="folder-close" text="Jane Person" href="#" />
<MenuItem icon="folder-close" text="My documents" href="#" />
<MenuItem icon="folder-close" text="Classy dayjob" href="#" />
<MenuItem icon="document" text="How to crush it" />
</CollapsibleList>
);
}

View File

@@ -1,25 +1,12 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import dashboardRoutes from 'routes/dashboard'
import DashboardTopbar from 'components/Dashboard/DashboardTopbar';
import DashboardContentRoute from 'components/Dashboard/DashboardContentRoute';
export default function() {
return (
<div className="dashboard-content" id="dashboard">
<DashboardTopbar pageTitle={"asdad"}/>
<Route pathname="/dashboard/">
<Switch>
{ dashboardRoutes.map((route, index) => (
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
))}
</Switch>
</Route>
<DashboardTopbar />
<DashboardContentRoute />
</div>
)
);
}

View File

@@ -0,0 +1,19 @@
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import routes from 'routes/dashboard'
export default function DashboardContentRoute() {
return (
<Route pathname="/dashboard">
<Switch>
{ routes.map((route, index) => (
<Route
key={index}
path={`${route.path}`}
component={route.component} />
))}
</Switch>
</Route>
);
}

View File

@@ -0,0 +1,17 @@
import React from 'react';
import classnames from 'classnames';
import LoadingIndicator from 'components/LoadingIndicator';
export default function DashboardInsider({ loading, children, name }) {
return (
<div className={classnames({
'dashboard__insider': true,
'dashboard__insider--loading': loading,
[`dashboard__insider--${name}`]: !!name,
})}>
<LoadingIndicator loading={loading}>
{ children }
</LoadingIndicator>
</div>
);
}

View File

@@ -1,5 +1,6 @@
import React from 'react';
import {connect} from 'react-redux';
import {useHistory} from 'react-router';
import {
Navbar,
NavbarGroup,
@@ -10,44 +11,64 @@ import {
Menu,
Popover,
} from '@blueprintjs/core';
import DashboardBreadcrumbs from 'components/Dashboard/DashboardBreadcrumbs';
import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
import Icon from 'components/Icon';
function DashboardTopbar({ pageTitle }) {
const userAvatarDropMenu = (
<Menu>
<MenuItem icon="graph" text="Graph" />
<MenuItem icon="map" text="Map" />
<MenuItem icon="th" text="Table" shouldDismissPopover={false} />
<MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
<MenuDivider />
<MenuItem icon="cog" text="Logout" />
</Menu>
);
function DashboardTopbar({
pageTitle,
pageSubtitle,
editViewId,
}) {
const history = useHistory();
const handlerClickEditView = () => {
history.push(`/dashboard/custom_views/${editViewId}/edit`)
}
return (
<div class="dashboard__topbar">
<div>
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false">
<title>Menu</title>
<path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path>
</svg>
</Button>
<h1 class="dashboard__title">{ pageTitle }</h1>
<div class="dashboard__topbar-left">
<div class="dashboard__topbar-sidebar-toggle">
<Button>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" role="img" focusable="false">
<title>Menu</title>
<path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="5" stroke-width="2" d="M4 7h15M4 12h15M4 17h15"></path>
</svg>
</Button>
</div>
<div class="dashboard__title">
<h1>{ pageTitle }</h1>
{ pageSubtitle && (
<>
<span class="sep"></span>
<h3>{ pageSubtitle }</h3>
<Button
className="button--view-edit"
icon={<Icon icon="pen" />}
onClick={handlerClickEditView} />
</>
)}
</div>
<div class="dashboard__breadcrumbs">
<DashboardBreadcrumbs />
</div>
</div>
<div class="dashboard__topbar-actions">
<div class="dashboard__topbar-right">
<Navbar class="dashboard__topbar-navbar">
<NavbarGroup>
<Button className={Classes.MINIMAL} icon="home" text="Home" />
<Button className={Classes.MINIMAL} icon="document" text="Files" />
<Button className={Classes.MINIMAL} icon="home" text="Search" />
<Button className={Classes.MINIMAL} icon="document" text="Filters" />
<Button className={Classes.MINIMAL} icon="document" text="Add order" />
<Button className={Classes.MINIMAL} icon="document" text="More" />
</NavbarGroup>
</Navbar>
<div class="dashboard__user">
<Popover content={userAvatarDropMenu}>
<Button>
<div className="user-avatar"></div>
</Button>
</Popover>
<div class="dashboard__topbar-user">
<DashboardTopbarUser />
</div>
</div>
</div>
@@ -56,5 +77,8 @@ function DashboardTopbar({ pageTitle }) {
const mapStateToProps = (state) => ({
pageTitle: state.dashboard.pageTitle,
pageSubtitle: state.dashboard.pageSubtitle,
editViewId: state.dashboard.topbarEditViewId,
});
export default connect(mapStateToProps)(DashboardTopbar);

View File

@@ -0,0 +1,33 @@
import React from 'react';
import {connect} from 'react-redux';
import {Menu, MenuItem, MenuDivider, Button, Popover} from '@blueprintjs/core';
import t from 'store/types';
function DashboardTopbarUser({ logout }) {
const onClickLogout = () => { logout(); };
const userAvatarDropMenu = (
<Menu>
<MenuItem icon="graph" text="Graph" />
<MenuItem icon="map" text="Map" />
<MenuItem icon="th" text="Table" shouldDismissPopover={false} />
<MenuItem icon="zoom-to-fit" text="Nucleus" disabled={true} />
<MenuDivider />
<MenuItem icon="cog" text="Logout" onClick={onClickLogout} />
</Menu>
);
return (
<Popover content={userAvatarDropMenu}>
<Button>
<div className="user-avatar"></div>
</Button>
</Popover>
)
}
const mapDispatchToProps = (dispatch) => ({
logout: () => dispatch({ type: t.LOGOUT }),
});
export default connect(null, mapDispatchToProps)(DashboardTopbarUser);

View File

@@ -0,0 +1,89 @@
import React from 'react';
import { useTable, usePagination } from 'react-table'
export default function DataTable({
columns,
data,
loading,
}) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page,
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
// Get the state from the instance
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
initialState: { pageIndex: 0 }, // Pass our hoisted table state
manualPagination: true, // Tell the usePagination
// hook that we'll handle our own data fetching
// This means we'll also have to provide our own
// pageCount.
// pageCount: controlledPageCount,
},
usePagination
);
return (
<div className={'bigcapital-datatable'}>
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps({
className: column.className || '',
})}>
{column.render('Header')}
<span>
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps({
className: cell.column.className || '',
})}>{ cell.render('Cell') }</td>
})}
</tr>
)
})}
<tr>
{loading ? (
// Use our custom loading state to show a loading indicator
<td colSpan="10000">Loading...</td>
) : (
<td colSpan="10000">
{/* Showing {page.length} of ~{controlledPageCount * pageSize}{' '} results */}
</td>
)}
</tr>
</tbody>
</table>
</div>
)
}

View File

@@ -0,0 +1,13 @@
import React from 'react';
import {Dialog, Spinner, Classes} from '@blueprintjs/core';
export default function DialogComponent(props) {
const loadingContent = (
<div className={Classes.DIALOG_BODY}><Spinner size={30} /></div>
);
return (
<Dialog {...props}>
{props.isLoading ? loadingContent : props.children}
</Dialog>
);
}

View File

@@ -0,0 +1,22 @@
import React from 'react';
import { connect } from 'react-redux';
export default (Dialog) => {
function DialogReduxConnect(props) {
return (<Dialog {...props} />);
};
const mapStateToProps = (state, props) => {
const dialogs = state.dashboard.dialogs;
if (dialogs && dialogs.hasOwnProperty['name'] && dialogs[props.name]) {
const { isOpen, payload } = dialogs[props.name];
return { isOpen, payload };
}
};
return connect(
mapStateToProps,
)(DialogReduxConnect);
}

View File

@@ -0,0 +1,12 @@
import React from 'react';
import AccountFormDialog from 'containers/Dashboard/Dialogs/AccountFormDialog';
import UserFormDialog from 'containers/Dashboard/Dialogs/UserFormDialog';
export default function DialogsContainer() {
return (
<React.Fragment>
<AccountFormDialog />
<UserFormDialog />
</React.Fragment>
);
}

View File

@@ -0,0 +1,228 @@
import React, {useState} from 'react';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import {
FormGroup,
MenuItem,
Intent,
InputGroup,
Position,
Button,
TextArea,
ControlGroup,
} from '@blueprintjs/core';
import { DateInput } from "@blueprintjs/datetime";
import { Select } from '@blueprintjs/select';
import { useIntl } from 'react-intl';
import { momentFormatter } from 'utils';
import moment from 'moment';
import AppToaster from 'components/AppToaster';
export default function ExpenseForm({
accounts,
editExpense,
submitExpense,
expenseDetails,
currencies,
}) {
const intl = useIntl();
const [state, setState] = useState({
selectedExpenseAccount: null,
selectedPaymentAccount: null,
});
const validationSchema = Yup.object().shape({
date: Yup.date().required(),
description: Yup.string().trim(),
expense_account_id: Yup.number().required(),
payment_account_id: Yup.number().required(),
amount: Yup.number().required(),
currency_code: Yup.string().required(),
publish: Yup.boolean(),
exchange_rate: Yup.number(),
});
const formik = useFormik({
enableReinitialize: true,
validationSchema: validationSchema,
initialValues: {
date: null,
},
onSubmit: (values) => {
submitExpense(values).then((response) => {
AppToaster.show({
message: 'the_expense_has_been_submit',
});
}).catch((error) => {
})
}
});
// Account item of select accounts field.
const accountItem = (item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />)
};
const onChangeAccount = () => {
};
const onChangePaymentAccount = () => {
};
const handleDateChange = (date) => {
const formatted = moment(date).format('YYYY/MM/DD');
formik.setFieldValue('date', formatted);
};
// Filters accounts items.
const filterAccountsPredicater = (query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
}
};
const onExpenseAccountSelect = (account) => {
setState({ ...state, selectedExpenseAccount: account });
formik.setFieldValue('expense_account_id', account.id);
};
const onChangePaymentAccountSelect = (account) => {
setState({ ...state, selectedPaymentAccount: account });
formik.setFieldValue('payment_account_id', account.id);
};
const onAmountCurrencySelect = (currency) => {
formik.setFieldValue('currency_code', currency.id);
};
const paymentAccountLabel = state.selectedPaymentAccount ?
state.selectedPaymentAccount.name : 'Select Payment Account';
const expenseAccountLabel = state.selectedExpenseAccount ?
state.selectedExpenseAccount.name : 'Select Expense Account';
const handleClose = () => {
};
return (
<div class="expense-form">
<form onSubmit={formik.handleSubmit}>
<FormGroup
label={'Date'}
inline={true}
intent={formik.errors.date && Intent.DANGER}
helperText={formik.errors.date && formik.errors.date}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
defaultValue={new Date()}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM }} />
</FormGroup>
<FormGroup
label={'Expense Account'}
className={'form-group--expense-account'}
inline={true}
intent={formik.errors.expense_account_id && Intent.DANGER}
helperText={formik.errors.expense_account_id && formik.errors.expense_account_id}>
<Select
items={accounts}
itemRenderer={accountItem}
itemPredicate={filterAccountsPredicater}
popoverProps={{ minimal: true }}
onItemSelect={onExpenseAccountSelect}>
<Button
fill={true}
rightIcon="caret-down"
text={expenseAccountLabel} />
</Select>
</FormGroup>
<FormGroup
label={'Amount'}
className={'form-group--amount'}
intent={formik.errors.amount && Intent.DANGER}
helperText={formik.errors.amount && formik.errors.amount}
inline={true}>
<ControlGroup>
<Select
items={currencies.map(c => ({ id: c.currency_code, name: c.currency_code }))}
itemRenderer={accountItem}
itemPredicate={filterAccountsPredicater}
popoverProps={{ minimal: true }}
onItemSelect={onAmountCurrencySelect}>
<Button
rightIcon="caret-down"
text={formik.values.currency_code} />
</Select>
<InputGroup
medium={true}
intent={formik.errors.amount && Intent.DANGER}
{...formik.getFieldProps('amount')} />
</ControlGroup>
</FormGroup>
<FormGroup
label={'Exchange Rate'}
className={'form-group--exchange-rate'}
inline={true}>
<InputGroup />
</FormGroup>
<FormGroup
label={'Payment Account'}
className={'form-group--payment-account'}
inline={true}
intent={formik.errors.payment_account_id && Intent.DANGER}
helperText={formik.errors.payment_account_id && formik.errors.payment_account_id}>
<Select
items={accounts}
itemRenderer={accountItem}
itemPredicate={filterAccountsPredicater}
popoverProps={{ minimal: true }}
onItemSelect={onChangePaymentAccountSelect}>
<Button
fill={true}
rightIcon="caret-down"
text={paymentAccountLabel} />
</Select>
</FormGroup>
<FormGroup
label={'Description'}
className={'form-group--description'}
inline={true}>
<TextArea
growVertically={true}
large={true}
{...formik.getFieldProps('description')} />
</FormGroup>
<div class="form__floating-footer">
<Button intent={Intent.PRIMARY} type="submit">Save</Button>
<Button>Save as Draft</Button>
<Button onClick={handleClose}>Close</Button>
</div>
</form>
</div>
);
}

View File

@@ -0,0 +1,37 @@
import React from 'react';
import {
Button,
AnchorButton,
Classes,
Icon
} from '@blueprintjs/core';
export default function ExpensesActionsBar() {
const onClickNewAccount = () => {
};
return (
<div class="dashboard__actions-bar">
<AnchorButton
className={Classes.MINIMAL}
icon={ <Icon icon="plus" /> }
href="/dashboard/expenses/new"
text="New Expense"
onClick={onClickNewAccount} />
<Button
className={Classes.MINIMAL}
icon={ <Icon icon="plus" /> }
text="Delete Expense"
onClick={onClickNewAccount} />
<Button
className={Classes.MINIMAL}
icon={ <Icon icon="plus" /> }
text="Bulk Update"
onClick={onClickNewAccount} />
</div>
)
}

View File

@@ -0,0 +1,92 @@
import React from 'react';
import {
GridComponent,
ColumnsDirective,
ColumnDirective,
Inject,
Sort,
} from '@syncfusion/ej2-react-grids';
import {
Checkbox,
Popover,
Button,
Menu,
MenuItem,
MenuDivider,
Position,
} from '@blueprintjs/core';
import Icon from 'components/Icon';
import moment from 'moment';
export default function ExpensesTable({
expenses,
onDeleteExpense,
onEditExpense,
}) {
const onDateStateChange = () => {
}
const actionMenuList = (expense) => (
<Menu>
<MenuItem text="View Details" />
<MenuDivider />
<MenuItem text="Edit Expense" onClick={() => onEditExpense(expense)} />
<MenuItem text="Delete Expense" onClick={() => onDeleteExpense(expense)} />
</Menu>
);
const columns = [
{
headerText: '',
template: () => (<Checkbox />)
},
{
headerText: 'Date',
template: (row) => (<span>{ moment(row.date).format('YYYY/MM/DD') }</span>),
},
{
headerText: 'Expense Account',
template: (row) => (<span>{ row.expenseAccount.name }</span>),
},
{
headerText: 'Paid Through',
template: (row) => (<span>{ row.paymentAccount.name }</span>),
},
{
headerText: 'Amount',
field: 'amount'
},
{
headerText: 'Status',
},
{
headerText: '',
template: (expense) => (
<Popover content={actionMenuList(expense)} position={Position.RIGHT_BOTTOM}>
<Button icon={<Icon icon="ellipsis-h" />} />
</Popover>
)
}
]
return (
<GridComponent
allowSorting={true}
dataSource={{ result: expenses, count: 20 }}
dataStateChange={onDateStateChange}>
<ColumnsDirective>
{columns.map((column) => {
return (<ColumnDirective
field={column.field}
headerText={column.headerText}
template={column.template}
allowSorting={true}
customAttributes={column.customAttributes}
/>);
})}
</ColumnsDirective>
<Inject services={[Sort]} />
</GridComponent>
);
}

View File

@@ -0,0 +1,51 @@
import React from 'react';
import {useHistory} from 'react-router';
import {connect} from 'react-redux';
import {
Alignment,
Navbar,
NavbarGroup,
Tabs,
Tab,
Button
} from "@blueprintjs/core";
import Icon from 'components/Icon';
import {useRouteMatch, Link} from 'react-router-dom';
function AccountsViewsTabs({ views }) {
const history = useHistory();
const {path} = useRouteMatch();
const handleClickNewView = () => {
history.push('/dashboard/custom_views/new');
};
const tabs = views.map((view) => {
const link = (<Link to={`${path}/${view.id}/custom_view`}>{ view.name }</Link>);
return (<Tab id={`custom_view_${view.id}`} title={link} />);
});
return (
<Navbar className="navbar--dashboard-views">
<NavbarGroup
align={Alignment.LEFT}>
<Tabs
id="navbar"
large={true}
className="tabs--dashboard-views"
>
{ tabs }
<Button
className="button--new-view"
icon={<Icon icon="plus" />}
onClick={handleClickNewView} />
</Tabs>
</NavbarGroup>
</Navbar>
);
}
const mapStateToProps = (state) => ({
views: state.views.resourceViews['expenses'],
});
export default connect(mapStateToProps)(AccountsViewsTabs);

View File

@@ -0,0 +1,26 @@
import React, { Children } from 'react';
export default function FinancialSheet({
companyTitle,
sheetType,
date,
children,
accountingBasis
}) {
return (
<div class="financial-sheet">
<h1 class="financial-sheet__title">{ companyTitle }</h1>
<h6 class="financial-sheet__sheet-type">{ sheetType }</h6>
<span class="financial-sheet__date">{ date }</span>
<div class="financial-sheet__table">
{ children }
</div>
<div class="financial-sheet__accounting-basis">
{ accountingBasis }
</div>
</div>
);
}

View File

@@ -0,0 +1,146 @@
/*
* Copyright 2017 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import classNames from "classnames";
import * as React from "react";
import { Classes } from '@blueprintjs/core';
import IconSvgPaths from "static/json/icons";
import PropTypes from 'prop-types';
export default class Icon extends React.Component{
static displayName = `af.Icon`;
static SIZE_STANDARD = 16;
static SIZE_LARGE = 20;
render() {
const { icon } = this.props;
if (icon == null || typeof icon === "boolean") {
return null;
} else if (typeof icon !== "string") {
return icon;
}
const {
className,
color,
htmlTitle,
iconSize = Icon.SIZE_STANDARD,
intent,
title = icon,
tagName = "span",
...htmlprops
} = this.props;
// choose which pixel grid is most appropriate for given icon size
const pixelGridSize = iconSize >= Icon.SIZE_LARGE ? Icon.SIZE_LARGE : Icon.SIZE_STANDARD;
const iconPath = this.getSvgPath(icon);
if (!iconPath){ return null; }
// render path elements, or nothing if icon name is unknown.
const paths = this.renderSvgPaths(iconPath.path);
const classes = classNames(Classes.ICON, Classes.iconClass(icon), Classes.intentClass(intent), className);
const viewBox = iconPath.viewBox;
return React.createElement(
tagName,
{
...htmlprops,
className: classes,
title: htmlTitle,
},
<svg fill={color} data-icon={icon} width={iconSize} height={iconSize} viewBox={viewBox}>
{title && <desc>{title}</desc>}
{paths}
</svg>,
);
}
getSvgPath(iconName) {
const svgPathsRecord = IconSvgPaths;
const pathStrings = svgPathsRecord[iconName];
return pathStrings;
}
/** Render `<path>` elements for the given icon name. Returns `null` if name is unknown. */
renderSvgPaths(pathStrings) {
if (pathStrings == null) {
return null;
}
return pathStrings.map((d, i) => <path key={i} d={d} fillRule="evenodd" />);
}
}
Icon.propTypes = {
/**
* Color of icon. This is used as the `fill` attribute on the `<svg>` image
* so it will override any CSS `color` property, including that set by
* `intent`. If this prop is omitted, icon color is inherited from
* surrounding text.
*/
color: PropTypes.string,
/**
* String for the `title` attribute on the rendered element, which will appear
* on hover as a native browser tooltip.
*/
htmlTitle: PropTypes.string,
/**
* Name of a Blueprint UI icon, or an icon element, to render. This prop is
* required because it determines the content of the component, but it can
* be explicitly set to falsy values to render nothing.
*
* - If `null` or `undefined` or `false`, this component will render
* nothing.
* - If given an `IconName` (a string literal union of all icon names), that
* icon will be rendered as an `<svg>` with `<path>` tags. Unknown strings
* will render a blank icon to occupy space.
* - If given a `JSX.Element`, that element will be rendered and _all other
* props on this component are ignored._ This type is supported to
* simplify icon support in other Blueprint components. As a consumer, you
* should avoid using `<Icon icon={<Element />}` directly; simply render
* `<Element />` instead.
*/
// icon: IconName | MaybeElement;
/**
* Size of the icon, in pixels. Blueprint contains 16px and 20px SVG icon
* images, and chooses the appropriate resolution based on this prop.
* @default Icon.SIZE_STANDARD = 16
*/
iconSize: PropTypes.number,
/** CSS style properties. */
style: PropTypes.object,
/**
* HTML tag to use for the rendered element.
* @default "span"
*/
// tagName?: keyof JSX.IntrinsicElements
/**
* Description string. This string does not appear in normal browsers, but
* it increases accessibility. For instance, screen readers will use it for
* aural feedback. By default, this is set to the icon's name. Pass an
* explicit falsy value to disable.
*/
title: PropTypes.string,
}

View File

@@ -0,0 +1,15 @@
export default function ItemForm() {
// Type
// Name
//
return (
<div class="item-form">
</div>
)
};

View File

@@ -0,0 +1,94 @@
import React from 'react';
import {
FormGroup,
MenuItem,
Intent,
InputGroup,
Position,
Button,
} from '@blueprintjs/core';
import { DateInput, TimePrecision } from "@blueprintjs/datetime";
import {
GridComponent,
ColumnsDirective,
ColumnDirective,
Inject,
Sort,
} from '@syncfusion/ej2-react-grids';
import {momentFormatter} from 'utils';
export default function MakeJournalEntry({
accounts,
currencies,
}) {
const handleDateChange = () => {
};
const handleClose = () => {
};
const columns = [
{
headerText: 'Account',
},
{
headerText: 'Description',
},
{
headerText: 'Account',
},
{
headerText: 'Debit',
},
{
headerText: 'Credit',
}
];
return (
<div class="make-journal-entry">
<div class="make-journal-entry__details">
<FormGroup
label={'Date'}
inline={true}>
<DateInput
{...momentFormatter('MM/DD/YYYY')}
defaultValue={new Date()}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM }}
/>
</FormGroup>
<GridComponent>
<ColumnsDirective>
{columns.map((column) => {
return (<ColumnDirective
field={column.field}
headerText={column.headerText}
template={column.template}
allowSorting={true}
customAttributes={column.customAttributes}
/>);
})}
</ColumnsDirective>
</GridComponent>
<div class="form__floating-footer">
<Button onClick={handleClose}>Close</Button>
<Button intent={Intent.PRIMARY} type="submit">
{ 'Save and Publish' }
</Button>
<Button intent={Intent.PRIMARY} type="submit">
{ 'Save as Draft' }
</Button>
</div>
</div>
</div>
)
}

View File

@@ -0,0 +1,21 @@
import * as React from 'react';
import * as Loadable from 'react-loadable';
const Loader = (config) =>
Loadable({
loading: (props) => {
if (props.error) {
/* tslint:disable */
console.error(`======= DefaultLoader Error =======`);
console.error(props.error);
console.error(`======= DefaultLoader Error =======`);
/* tslint:enable */
return null;
}
return null;
},
delay: 250,
...config
});
export default Loader;

View File

@@ -0,0 +1,17 @@
import React from 'react';
import {Spinner} from '@blueprintjs/core';
export default function LoadingIndicator({
loading,
spinnerSize = 40,
children
}) {
return (
<>
{ (loading) ? (
<div class="dashboard__loading-indicator">
<Spinner size={spinnerSize} value={null} />
</div>) : children }
</>
);
}

View File

@@ -0,0 +1,15 @@
import React from 'react';
import PreferencesTopbar from 'components/Preferences/PreferencesTopbar';
import PreferencesContentRoute from 'components/Preferences/PreferencesContentRoute';
export default function() {
return (
<div className="dashboard-content" id="dashboard">
<PreferencesTopbar pageTitle={"asdad"}/>
<div class="dashboard__preferences-content">
<PreferencesContentRoute />
</div>
</div>
)
}

View File

@@ -0,0 +1,22 @@
import React from 'react';
import { Route, Switch, useRouteMatch } from 'react-router-dom';
import preferencesRoutes from 'routes/preferences'
export default function DashboardContentRoute() {
const { path } = useRouteMatch();
return (
<Route pathname="/dashboard/preferences">
<Switch>
{ preferencesRoutes.map((route, index) => (
<Route
key={index}
path={`${path}/${route.path}`}
exact={route.exact}
component={route.component}
/>
))}
</Switch>
</Route>
);
}

View File

@@ -0,0 +1,10 @@
import React from 'react';
import PreferencesSidebar from 'components/Preferences/PreferencesSidebar';
export default function PreferencesPage() {
return (
<div class="preferences-page">
<PreferencesSidebar />
</div>
)
}

View File

@@ -0,0 +1,30 @@
import React from 'react';
import {Menu, MenuItem, MenuDivider} from '@blueprintjs/core';
import {useHistory} from 'react-router-dom';
import preferencesMenu from 'config/preferencesMenu';
export default function PreferencesSidebar() {
const history = useHistory();
const items = preferencesMenu.map((item) => (
(item.divider) ?
<MenuDivider title={item.title} /> :
<MenuItem
text={item.text}
label={item.label}
disabled={item.disabled}
onClick={() => { history.push(item.href); }} />
));
return (
<div class="preferences__sidebar">
<div class="preferences__sidebar-head">
<h2>Preferences</h2>
</div>
<Menu className="preferences__sidebar-menu">
{ items }
</Menu>
</div>
);
}

View File

@@ -0,0 +1,22 @@
import React from 'react';
import preferencesTabs from 'routes/preferencesTabs';
import {Switch, Route, useRouteMatch} from 'react-router-dom';
export default function PreferencesSubContent({ preferenceTab }) {
const routes = preferencesTabs[preferenceTab];
const {path} = useRouteMatch();
if (routes.length <= 0) { return null; }
return (
<Switch>
{ routes.map((route, index) => (
<Route
key={index}
path={`${path}/${route.path}`}
exact={route.exact}
component={route.component}
/>
))}
</Switch>);
}

View File

@@ -0,0 +1,14 @@
import React from 'react';
import DashboardTopbarUser from 'components/Dashboard/TopbarUser';
export default function PreferencesTopbar() {
return (
<div class="dashboard__preferences-topbar">
<h2>Accounts</h2>
<div class="dashboard__topbar-user">
<DashboardTopbarUser />
</div>
</div>
);
}

View File

@@ -9,7 +9,7 @@ export default function() {
</div>
<div className="sidebar__head-company-meta">
<div className="comapny-name">
<div className="company-name">
{ appMeta.app_name }
</div>

View File

@@ -2,6 +2,7 @@ import React from 'react';
import {Menu, MenuItem, MenuDivider} from "@blueprintjs/core";
import {useHistory} from 'react-router-dom';
import sidebarMenuList from 'config/sidebarMenu';
import Icon from 'components/Icon';
export default function SidebarMenu() {
let history = useHistory();
@@ -11,7 +12,7 @@ export default function SidebarMenu() {
<MenuDivider
title={item.title} /> :
<MenuItem
icon={item.icon}
icon={<Icon icon={item.icon} iconSize={item.iconSize} />}
text={item.text}
label={item.label}
disabled={item.disabled}

View File

@@ -0,0 +1,329 @@
import React, {useState, useEffect} from 'react';
import {Formik, useFormik, ErrorMessage} from "formik";
import {useIntl} from 'react-intl';
import {
InputGroup,
FormGroup,
Intent,
Button,
MenuItem,
Classes,
HTMLSelect,
Menu,
H5,
H6,
} from "@blueprintjs/core";
import {Row, Col} from 'react-grid-system';
import { ReactSortable } from 'react-sortablejs';
import * as Yup from 'yup';
import {pick} from 'lodash';
import Icon from 'components/Icon';
import ViewFormConnect from 'connectors/ViewFormPage.connector';
import {compose} from 'utils';
function ViewForm({
columns,
fields,
viewColumns,
viewForm,
submitView,
editView,
onDelete,
}) {
const intl = useIntl();
const [draggedColumns, setDraggedColumn] = useState([]);
const [availableColumns, setAvailableColumns] = useState(columns);
const defaultViewRole = {
field_key: '',
comparator: 'AND',
value: '',
index: 1,
};
const validationSchema = Yup.object().shape({
resource_name: Yup.string().required(),
name: Yup.string().required(),
logic_expression: Yup.string().required(),
roles: Yup.array().of(
Yup.object().shape({
comparator: Yup.string().required(),
value: Yup.string().required(),
field_key: Yup.string().required(),
index: Yup.number().required(),
})
),
columns: Yup.array().of(
Yup.object().shape({
key: Yup.string().required(),
index: Yup.string().required(),
}),
)
});
const initialEmptyForm = {
resource_name: '',
name: '',
logic_expression: '',
roles: [
defaultViewRole,
],
columns: [],
};
const initialForm = { ...initialEmptyForm, ...viewForm };
const formik = useFormik({
enableReinitialize: true,
validationSchema: validationSchema,
initialValues: {
...pick(initialForm, Object.keys(initialEmptyForm)),
logic_expression: initialForm.roles_logic_expression || '',
roles: [
...initialForm.roles.map((role) => {
return {
...pick(role, Object.keys(defaultViewRole)),
field_key: role.field ? role.field.key : '',
};
}),
],
},
onSubmit: (values) => {
if (viewForm && viewForm.id) {
editView(viewForm.id, values).then((response) => {
});
} else {
submitView(values).then((response) => {
});
}
},
});
useEffect(() => {
formik.setFieldValue('columns', draggedColumns.map((column, index) => ({
index, key: column.key,
})));
}, [draggedColumns]);
const conditionalsItems = [
{ value: 'and', label: 'AND' },
{ value: 'or', label: 'OR' },
];
const whenConditionalsItems = [
{ value: '', label: 'When' },
];
// Compatotors items.
const compatatorsItems = [
{value: '', label: 'Select a compatator'},
{value: 'equals', label: 'Equals'},
{value: 'not_equal', label: 'Not Equal'},
{value: 'contain', label: 'Contain'},
{value: 'not_contain', label: 'Not Contain'},
];
// Resource fields.
const resourceFields = [
{value: '', label: 'Select a field'},
...fields.map((field) => ({ value: field.key, label: field.labelName, })),
];
// Account item of select accounts field.
const selectItem = (item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.label} key={item.key} onClick={handleClick} />)
};
// Handle click new condition button.
const onClickNewRole = () => {
formik.setFieldValue('roles', [
...formik.values.roles,
{
...defaultViewRole,
index: formik.values.roles.length + 1,
}
]);
};
// Handle click remove view role button.
const onClickRemoveRole = (viewRole, index) => () => {
const viewRoles = [...formik.values.roles];
viewRoles.splice(index, 1);
viewRoles.map((role, i) => {
role.index = i + 1;
return role;
});
formik.setFieldValue('roles', viewRoles);
};
const onClickDeleteView = () => { onDelete(viewForm); };
return (
<div class="view-form">
<form onSubmit={formik.handleSubmit}>
<div class="view-form--name-section">
<Row>
<Col sm={8}>
<FormGroup
label={intl.formatMessage({'id': 'View Name'})}
className={'form-group--name'}
intent={formik.errors.name && Intent.DANGER}
helperText={formik.errors.name && formik.errors.label}
inline={true}
fill={true}>
<InputGroup
intent={formik.errors.name && Intent.DANGER}
fill={true}
{...formik.getFieldProps('name')} />
</FormGroup>
</Col>
</Row>
</div>
<H5 className="mb2">Define the conditionals</H5>
{formik.values.roles.map((role, index) => (
<Row class="view-form__role-conditional">
<Col sm={2} class="flex">
<div class="mr2 pt1 condition-number">{ index + 1 }</div>
{(index === 0) ? (
<HTMLSelect options={whenConditionalsItems} className={Classes.FILL} />
) : (
<HTMLSelect options={conditionalsItems} className={Classes.FILL} />
)}
</Col>
<Col sm={2}>
<FormGroup
intent={formik.getFieldMeta(`roles[${index}].field_key`).error && Intent.DANGER}>
<HTMLSelect
options={resourceFields}
value={role.field}
className={Classes.FILL}
{...formik.getFieldProps(`roles[${index}].field_key`)} />
</FormGroup>
</Col>
<Col sm={2}>
<FormGroup
intent={formik.getFieldMeta(`roles[${index}].comparator`).error && Intent.DANGER}>
<HTMLSelect
options={compatatorsItems}
value={role.comparator}
className={Classes.FILL}
{...formik.getFieldProps(`roles[${index}].comparator`)} />
</FormGroup>
</Col>
<Col sm={5} class="flex">
<FormGroup>
<InputGroup
placeholder={intl.formatMessage({'id': 'value'})}
intent={formik.getFieldMeta(`roles[${index}].value`).error && Intent.DANGER}
{...formik.getFieldProps(`roles[${index}].value`)} />
</FormGroup>
<Button
icon={<Icon icon="mines" />}
iconSize={14}
className="ml2"
minimal={true}
intent={Intent.DANGER}
onClick={onClickRemoveRole(role, index)} />
</Col>
</Row>
))}
<div class="mt1">
<Button
minimal={true}
intent={Intent.PRIMARY}
onClick={onClickNewRole}>
+ New Conditional
</Button>
</div>
<div class="view-form--logic-expression-section">
<Row>
<Col sm={8}>
<FormGroup
label={intl.formatMessage({'id': 'Logic Expression'})}
className={'form-group--logic-expression'}
intent={formik.errors.logic_expression && Intent.DANGER}
helperText={formik.errors.logic_expression && formik.errors.logic_expression}
inline={true}
fill={true}>
<InputGroup intent={formik.errors.logic_expression && Intent.DANGER} fill={true}
{...formik.getFieldProps('logic_expression')} />
</FormGroup>
</Col>
</Row>
</div>
<H5 className={'mb2'}>Columns Preferences</H5>
<div class="dragable-columns">
<Row>
<Col sm={4} className="dragable-columns__column">
<H6 className="dragable-columns__title">Available Columns</H6>
<InputGroup
placeholder={intl.formatMessage({id: 'search'})}
leftIcon="search" />
<div class="dragable-columns__items">
<Menu>
<ReactSortable
list={availableColumns}
setList={setAvailableColumns}
group="shared-group-name">
{availableColumns.map((field) => (
<MenuItem key={field.id} text={field.label} />
))}
</ReactSortable>
</Menu>
</div>
</Col>
<Col sm={1}>
<div class="dragable-columns__arrows">
<div><Icon icon="arrow-circle-left" iconSize={30} color="#cecece" /></div>
<div class="mt2"><Icon icon="arrow-circle-right" iconSize={30} color="#cecece" /></div>
</div>
</Col>
<Col sm={4} className="dragable-columns__column">
<H6 className="dragable-columns__title">Selected Columns</H6>
<InputGroup placeholder={intl.formatMessage({id: 'search'})} leftIcon="search" />
<div class="dragable-columns__items">
<Menu>
<ReactSortable
list={draggedColumns}
setList={setDraggedColumn}
group="shared-group-name">
{draggedColumns.map((field) => (
<MenuItem key={field.id} text={field.label} />
))}
</ReactSortable>
</Menu>
</div>
</Col>
</Row>
</div>
<div class="form__floating-footer">
<Button intent={Intent.PRIMARY} type="submit">Submit</Button>
<Button intent={Intent.NONE} type="submit" className="ml2">Cancel</Button>
{ (viewForm && viewForm.id) && (
<Button intent={Intent.DANGER} onClick={onClickDeleteView}>Delete</Button>
) }
</div>
</form>
</div>
);
}
export default compose(
ViewFormConnect,
)(ViewForm);

View File

@@ -1,4 +1,4 @@
export default {
"app_name": "Ratteb",
"app_version": "0.0.1",
"app_version": "0.0.1 (build 12344)",
}

View File

@@ -0,0 +1,52 @@
export default [
{
text: 'General',
disabled: false,
href: '/dashboard/preferences/general',
},
{
text: 'Users',
href: '/dashboard/preferences/users',
},
{
text: 'Accountant',
disabled: false,
href: '/dashboard/preferences/accountant',
},
{
text: 'Accounts',
disabled: false,
href: '/dashboard/preferences/accounts',
},
{
text: 'Credit Notes',
disabled: false,
href: '/dashboard/preferences/credit_note',
},
{
text: 'Debit Notes',
disabled: false,
href: '/dashboard/preferences/debit_note',
},
{
text: 'Accountant',
disabled: false,
href: '/dashboard/preferences/accountant',
},
{
text: 'Accounts',
disabled: false,
href: '/dashboard/preferences/accounts',
},
{
text: 'Credit Notes',
disabled: false,
href: '/dashboard/preferences/credit_note',
},
{
text: 'Debit Notes',
disabled: false,
href: '/dashboard/preferences/debit_note',
},
]

View File

@@ -5,7 +5,8 @@ export default [
divider: true,
},
{
icon: 'cut',
icon: 'homepage',
iconSize: 20,
text: 'Homepage',
disabled: false,
href: '/dashboard/homepage',
@@ -14,8 +15,39 @@ export default [
divider: true,
},
{
icon: 'cut',
text: 'Chart of Accounts',
icon: 'balance-scale',
iconSize: 20,
text: 'Financial',
href: '/dashboard/accounts',
children: [
{
text: 'cut',
label: '⌘C',
disabled: false,
},
{
text: 'cut',
label: '⌘C',
disabled: false,
},
{
text: 'cut',
label: '⌘C',
disabled: false,
},
{
text: 'cut',
label: '⌘C',
disabled: false,
},
]
},
{
icon: 'university',
iconSize: 20,
text: 'Banking',
href: '/dashboard/accounts',
children: [
{
@@ -26,4 +58,73 @@ export default [
}
]
},
{
icon: 'shopping-cart',
iconSize: 20,
text: 'Sales',
href: '/dashboard/accounts',
children: [
{
icon: 'cut',
text: 'cut',
label: '⌘C',
disabled: false,
}
]
},
{
icon: 'balance-scale',
iconSize: 20,
text: 'Purchases',
href: '/dashboard/accounts',
children: [
{
icon: 'cut',
text: 'cut',
label: '⌘C',
disabled: false,
}
]
},
{
icon: 'analytics',
iconSize: 18,
text: 'Financial Reports',
href: '/dashboard/accounts',
children: [
{
icon: 'cut',
text: 'cut',
label: '⌘C',
disabled: false,
}
]
},
{
text: 'Expenses',
href: '/dashboard/expenses',
},
{
text: 'New Expenses',
href: '/dashboard/expenses/new',
},
{
text: 'Make Journal',
href: '/dashboard/accounting/make-journal-entry'
},
{
text: 'Balance Sheet',
href: '/dashboard/accounting/balance-sheet',
},
{
divider: true,
},
{
text: 'Preferences',
href: '/dashboard/preferences',
},
{
text: 'Auditing System',
href: '/dashboard/accounts',
},
]

View File

@@ -0,0 +1,31 @@
import {connect} from 'react-redux';
import {
fetchAccountTypes,
fetchAccountsList,
submitAccount,
fetchAccount,
editAccount,
} from 'store/accounts/accounts.actions';
import {getDialogPayload} from 'store/dashboard/dashboard.reducer';
import t from 'store/types';
export const mapStateToProps = (state, props) => {
const dialogPayload = getDialogPayload(state, 'account-form');
return {
accountsTypes: state.accounts.accountsTypes,
accounts: state.accounts.accounts,
name: 'account-form',
payload: {action: 'new', id: null},
editAccount: dialogPayload && dialogPayload.action === 'edit'
? state.accounts.accountsById[dialogPayload.id] : {},
};
};
export const mapDispatchToProps = (dispatch) => ({
submitAccount: ({ form }) => dispatch(submitAccount({ form })),
fetchAccounts: () => dispatch(fetchAccountsList()),
fetchAccountTypes: () => dispatch(fetchAccountTypes()),
fetchAccount: (id) => dispatch(fetchAccount({ id })),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,39 @@
import { connect } from 'react-redux';
import {useParams} from 'react-router-dom';
import t from 'store/types';
import {
fetchAccountTypes,
fetchAccountsList,
deleteAccount,
inactiveAccount,
} from 'store/accounts/accounts.actions';
import {
getAccountsItems,
} from 'store/accounts/accounts.selectors';
import {
getResourceViews,
} from 'store/customViews/customViews.selectors';
const mapStateToProps = (state, props) => ({
views: getResourceViews(state, 'accounts'),
accounts: getAccountsItems(state, state.accounts.currentViewId),
});
const mapActionsToProps = (dispatch) => ({
fetchAccounts: (query) => dispatch(fetchAccountsList({ query })),
fetchAccountTypes: () => dispatch(fetchAccountTypes()),
deleteAccount: (id) => dispatch(deleteAccount({ id })),
inactiveAccount: (id) => dispatch(inactiveAccount({ id })),
addBulkActionAccount: (id) => dispatch({
type: t.ACCOUNT_BULK_ACTION_ADD, account_id: id
}),
removeBulkActionAccount: (id) => dispatch({
type: t.ACCOUNT_BULK_ACTION_REMOVE, account_id: id,
}),
changeCurrentView: (id) => dispatch({
type: t.ACCOUNTS_SET_CURRENT_VIEW,
currentViewId: parseInt(id, 10),
}),
});
export default connect(mapStateToProps, mapActionsToProps);

View File

@@ -0,0 +1,14 @@
import { connect } from 'react-redux';
import {
fetchResourceViews,
} from 'store/customViews/customViews.actions';
const mapStateToProps = (state) => ({
});
const mapActionsToProps = (dispatch) => ({
fetchResourceViews: (resourceSlug) => dispatch(fetchResourceViews({ resourceSlug })),
});
export default connect(mapStateToProps, mapActionsToProps);

View File

@@ -0,0 +1,25 @@
import { connect } from 'react-redux';
import t from 'store/types';
const mapStateToProps = (state) => ({
});
const mapActionsToProps = (dispatch) => ({
changePageTitle: (pageTitle) => dispatch({
type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
}),
changePageSubtitle: (pageSubtitle) => dispatch({
type: t.ALTER_DASHBOARD_PAGE_SUBTITLE, pageSubtitle,
}),
setTopbarEditView: (id) => dispatch({
type: t.SET_TOPBAR_EDIT_VIEW, id,
}),
});
export default connect(mapStateToProps, mapActionsToProps);

View File

@@ -0,0 +1,13 @@
import { connect } from 'react-redux';
import t from 'store/types';
export const mapStateToProps = (state, props) => {
return {};
};
export const mapDispatchToProps = (dispatch) => ({
openDialog: (name, payload) => dispatch({ type: t.OPEN_DIALOG, name, payload }),
closeDialog: (name, payload) => dispatch({ type: t.CLOSE_DIALOG, name, payload }),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,37 @@
import {connect} from 'react-redux';
import {
fetchExpense,
submitExpense,
editExpense,
deleteExpense,
} from 'store/expenses/expenses.actions';
import {
fetchAccountsList,
} from 'store/accounts/accounts.actions';
import {
fetchCurrencies,
} from 'store/currencies/currencies.actions';
import t from 'store/types';
export const mapStateToProps = (state, props) => {
return {
expenseDetails: {},
accounts: state.accounts.accounts,
currencies: state.currencies.registered,
};
};
export const mapDispatchToProps = (dispatch) => ({
changePageTitle: pageTitle => dispatch({
type: t.CHANGE_DASHBOARD_PAGE_TITLE,
pageTitle,
}),
fetchCurrencies: () => dispatch(fetchCurrencies()),
fetchExpense: (id) => dispatch(fetchExpense({ id })),
submitExpense: (form) => dispatch(submitExpense({ form })),
editExpense: (id, form) => dispatch(editExpense({ id, form })),
fetchAccounts: () => dispatch(fetchAccountsList()),
deleteExpense: (id) => dispatch(deleteExpense({ id })),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,23 @@
import {connect} from 'react-redux';
import {
fetchExpensesList,
deleteExpense,
} from 'store/expenses/expenses.actions';
import t from 'store/types';
export const mapStateToProps = (state, props) => {
return {
expenses: state.expenses.list,
};
};
export const mapDispatchToProps = (dispatch) => ({
changePageTitle: pageTitle => dispatch({
type: t.CHANGE_DASHBOARD_PAGE_TITLE,
pageTitle,
}),
fetchExpenses: (id) => dispatch(fetchExpensesList({ id })),
deleteExpense: (id) => dispatch(deleteExpense({ id })),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,17 @@
import {connect} from 'react-redux';
import {
fetchGeneralLedger,
fetchBalanceSheet,
} from 'store/financialStatement/financialStatements.actions';
import t from 'store/types';
export const mapStateToProps = (state, props) => ({
generalLedeger: state.financialStatements.generalLedger,
});
export const mapDispatchToProps = (dispatch) => ({
fetchGeneralLedger: (query = {}) => dispatch(fetchGeneralLedger({ query })),
fetchBalanceSheet: (query = {}) => dispatch(fetchBalanceSheet({ query })),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,17 @@
import {connect} from 'react-redux';
import {
makeJournalEntries,
} from 'store/accounting/accounting.actions';
import t from 'store/types';
export const mapStateToProps = (state, props) => ({
});
export const mapDispatchToProps = (dispatch) => ({
makeJournalEntries: (form) => dispatch(makeJournalEntries({ form })),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,21 @@
import {connect} from 'react-redux';
import {
fetchResourceColumns,
fetchResourceFields,
} from 'store/resources/resources.actions';
import {
getResourceColumns,
getResourceFields,
} from 'store/resources/resources.reducer';
export const mapStateToProps = (state, props) => ({
getResourceColumns: (resourceSlug) => getResourceColumns(state, resourceSlug),
getResourceFields: (resourceSlug) => getResourceFields(state, resourceSlug),
});
export const mapDispatchToProps = (dispatch) => ({
fetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
fetchResourceColumns: (resourceSlug) => dispatch(fetchResourceColumns({ resourceSlug })),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,32 @@
import {connect} from 'react-redux';
import {
submitUser,
editUser,
fetchUser,
} from 'store/users/users.actions';
import {
getUserDetails
} from 'store/users/users.reducer';
import { getDialogPayload } from 'store/dashboard/dashboard.reducer';
import t from 'store/types';
export const mapStateToProps = (state, props) => {
const dialogPayload = getDialogPayload(state, 'user-form');
return {
name: 'user-form',
payload: {action: 'new', id: null},
userDetails: dialogPayload.action === 'edit'
? getUserDetails(state, dialogPayload.user.id) : {},
};
};
export const mapDispatchToProps = (dispatch) => ({
openDialog: (name, payload) => dispatch({ type: t.OPEN_DIALOG, name, payload }),
closeDialog: (name, payload) => dispatch({ type: t.CLOSE_DIALOG, name, payload }),
submitUser: (form) => dispatch(submitUser({ form })),
editUser: (id, form) => dispatch(editUser({ form, id })),
fetchUser: (id) => dispatch(fetchUser({ id })),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,22 @@
import {connect} from 'react-redux';
import {
fetchUsers,
fetchUser,
deleteUser,
} from 'store/users/users.actions';
import t from 'store/types';
export const mapStateToProps = (state, props) => ({
usersList: state.users.list
});
export const mapDispatchToProps = (dispatch) => ({
openDialog: (name, payload) => dispatch({ type: t.OPEN_DIALOG, name, payload }),
closeDialog: (name, payload) => dispatch({ type: t.CLOSE_DIALOG, name, payload }),
fetchUsers: () => dispatch(fetchUsers({ })),
fetchUser: (id) => dispatch(fetchUser({ id })),
deleteUser: (id) => dispatch(deleteUser({ id })),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,13 @@
import {connect} from 'react-redux';
import t from 'store/types';
export const mapStateToProps = (state, props) => {
};
export const mapDispatchToProps = (dispatch) => ({
openDialog: (name, payload) => dispatch({ type: t.OPEN_DIALOG, name, payload }),
closeDialog: (name, payload) => dispatch({ type: t.CLOSE_DIALOG, name, payload }),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,25 @@
import {connect} from 'react-redux';
import {
fetchView,
submitView,
deleteView,
editView,
} from 'store/customViews/customViews.actions';
import {
getViewMeta,
getViewItem,
} from 'store/customViews/customViews.selectors';
export const mapStateToProps = (state) => ({
getViewMeta: (viewId) => getViewMeta(state, viewId),
getViewItem: (viewId) => getViewItem(state, viewId),
});
export const mapDispatchToProps = (dispatch) => ({
fetchView: (id) => dispatch(fetchView({ id })),
submitView: (form) => dispatch(submitView({ form })),
editView: (id, form) => dispatch(editView({ id, form })),
deleteView: (id) => dispatch(deleteView({ id })),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -0,0 +1,36 @@
import {connect} from 'react-redux';
import {
fetchResourceColumns,
fetchResourceFields,
} from 'store/resources/resources.actions';
import {
getResourceColumns,
getResourceFields,
} from 'store/resources/resources.reducer';
import {
fetchView,
submitView,
editView,
} from 'store/customViews/customViews.actions';
import t from 'store/types';
export const mapStateToProps = (state, props) => {
return {
getResourceColumns: (resourceSlug) => getResourceColumns(state, resourceSlug),
getResourceFields: (resourceSlug) => getResourceFields(state, resourceSlug),
};
};
export const mapDispatchToProps = (dispatch) => ({
changePageTitle: pageTitle => dispatch({
type: t.CHANGE_DASHBOARD_PAGE_TITLE,
pageTitle,
}),
fetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
fetchResourceColumns: (resourceSlug) => dispatch(fetchResourceColumns({ resourceSlug })),
fetchView: (id) => dispatch(fetchView({ id })),
submitView: (form) => dispatch(submitView({ form })),
editView: (id, form) => dispatch(editView({ id, form })),
});
export default connect(mapStateToProps, mapDispatchToProps);

View File

@@ -1,64 +1,112 @@
import * as React from "react";
import React, { useEffect } from "react";
import {Link} from 'react-router-dom';
import * as Yup from 'yup';
import {useFormik} from 'formik';
import {connect} from 'react-redux';
import {useIntl} from 'react-intl';
import login from 'store/actions/auth';
import {Button, InputGroup, Intent, FormGroup} from "@blueprintjs/core";
import {
Button,
InputGroup,
Intent,
FormGroup,
} from "@blueprintjs/core";
import login from 'store/authentication/authentication.actions';
import {hasErrorType} from 'store/authentication/authentication.reducer';
import AuthenticationToaster from 'components/AppToaster';
import t from 'store/types';
const loginValidationSchema = Yup.object().shape({
credential: Yup.string().required('Required'),
password: Yup.string().required('Required'),
});
function Login({ login }) {
const ERRORS_TYPES = {
INVALID_DETAILS: 'INVALID_DETAILS',
USER_INACTIVE: 'USER_INACTIVE',
};
function Login({
login,
errors,
clearErrors,
hasError,
}) {
const intl = useIntl();
// Validation schema.
const loginValidationSchema = Yup.object().shape({
crediential: Yup
.string()
.required(intl.formatMessage({'id': 'required'}))
.email(intl.formatMessage({id: 'invalid_email_or_phone_numner'})),
password: Yup
.string()
.required(intl.formatMessage({id: 'required'}))
.min(4),
});
// Formik validation schema and submit handler.
const formik = useFormik({
initialValues: {
credential: '',
crediential: '',
password: '',
},
validationSchema: loginValidationSchema,
onSubmit: (values) => {
onSubmit: async (values) => {
login({
credential: values.credential,
crediential: values.crediential,
password: values.password,
}).then(() => {
}).catch((errors) => {
});
},
});
useEffect(() => {
const toastBuilders = [];
if (hasError(ERRORS_TYPES.INVALID_DETAILS)) {
toastBuilders.push({
message: intl.formatMessage({ id: 'invalid_email_or_phone_numner' }),
intent: Intent.WARNING,
});
}
if (hasError(ERRORS_TYPES.USER_INACTIVE)) {
toastBuilders.push({
message: intl.formatMessage({ id: 'the_user_has_been_suspended_from_admin' }),
intent: Intent.WARNING,
});
}
toastBuilders.forEach(builder => {
AuthenticationToaster.show(builder);
});
}, [hasError, intl]);
// Handle unmount component
useEffect(() => () => {
if (errors.length > 0) {
clearErrors();
}
});
return (
<div className="login-page">
<form onSubmit={formik.handleSubmit}>
<FormGroup
className={'form-group--email-phone-number'}
intent={formik.errors.credential && Intent.DANGER}
helperText={formik.errors.credential && formik.errors.credential}>
className={'form-group--crediential'}
intent={formik.errors.crediential && Intent.DANGER}
helperText={formik.errors.crediential && formik.errors.crediential}>
<InputGroup
leftIcon="user"
placeholder={intl.formatMessage({'id': 'email_or_phone_number'})}
large={true}
intent={formik.errors.credential && Intent.DANGER}
{...formik.getFieldProps('credential')} />
intent={formik.errors.crediential && Intent.DANGER}
{...formik.getFieldProps('crediential')} />
</FormGroup>
<FormGroup
className={'form-group--password'}
intent={formik.errors.credential && Intent.DANGER}
intent={formik.errors.password && Intent.DANGER}
helperText={formik.errors.password && formik.errors.password}>
<InputGroup
leftIcon="info-sign"
placeholder={intl.formatMessage({'id': 'password'})}
large={true}
intent={formik.errors.credential && Intent.DANGER}
intent={formik.errors.password && Intent.DANGER}
type={"password"}
{...formik.getFieldProps('password')} />
</FormGroup>
@@ -76,11 +124,17 @@ function Login({ login }) {
</Link>
</div>
</div>
)
);
}
const mapStateToProps = (state) => ({
hasError: (errorType) => hasErrorType(state, errorType),
errors: state.authentication.errors,
});
const mapDispatchToProps = (dispatch) => ({
login: form => dispatch(login({ form })),
clearErrors: () => dispatch({ type: t.LOGIN_CLEAR_ERRORS }),
});
export default connect(null, mapDispatchToProps)(Login);
export default connect(mapStateToProps, mapDispatchToProps)(Login);

View File

@@ -0,0 +1,51 @@
import React, {useMemo} from 'react';
import {
Intent,
Button,
} from '@blueprintjs/core';
import { FormattedList } from 'react-intl';
export default function MakeJournalEntriesFooter({
formik,
}) {
const creditSum = useMemo(() => {
return formik.values.entries.reduce((sum, entry) => {
return entry.credit + sum;
}, 0);
}, [formik.values.entries]);
const debitSum = useMemo(() => {
return formik.values.entries.reduce((sum, entry) => {
return entry.debit + sum;
}, 0);
}, [formik.values.entries]);
return (
<div>
<table>
<tbody>
<tr>
<td><strong>Total</strong></td>
<td>{ creditSum }</td>
<td>{ debitSum }</td>
</tr>
</tbody>
</table>
<div class="form__floating-footer">
<Button
intent={Intent.PRIMARY}
type="submit">
Save
</Button>
<Button
intent={Intent.PRIMARY}
type="submit"
className={'ml2'}>
Save & New
</Button>
</div>
</div>
);
}

View File

@@ -0,0 +1,93 @@
import React, {useState, useEffect} from 'react';
import * as Yup from 'yup';
import MakeJournalEntriesHeader from './MakeJournalEntriesHeader';
import MakeJournalEntriesFooter from './MakeJournalEntriesFooter';
import MakeJournalEntriesTable from './MakeJournalEntriesTable';
import {Formik, useFormik} from "formik";
import MakeJournalEntriesConnect from 'connectors/MakeJournalEntries.connect';
import AccountsConnect from 'connectors/Accounts.connector';
import DashboardConnect from 'connectors/Dashboard.connector';
import {compose} from 'utils';
import useAsync from 'hooks/async';
import moment from 'moment';
import AppToaster from 'components/AppToaster';
function MakeJournalEntriesForm({
makeJournalEntries,
fetchAccounts,
changePageTitle,
}) {
useEffect(() => {
changePageTitle('New Journal');
}, []);
const fetchHook = useAsync(async () => {
await Promise.all([
fetchAccounts(),
]);
});
const validationSchema = Yup.object().shape({
date: Yup.date().required(),
reference: Yup.string(),
description: Yup.string(),
entries: Yup.array().of(
Yup.object().shape({
credit: Yup.number().nullable(),
debit: Yup.number().nullable(),
}),
)
});
const defaultEntry = {
account_id: null,
credit: null,
debit: null,
note: '',
};
const formik = useFormik({
enableReinitialize: true,
validationSchema,
initialValues: {
reference: '',
date: moment(new Date()).format('YYYY-MM-DD'),
description: '',
entries: [
defaultEntry,
defaultEntry,
defaultEntry,
defaultEntry,
],
},
onSubmit: (values) => {
const form = values.entries.filter((entry) => (
(entry.credit || entry.debit)
));
makeJournalEntries(values).then((response) => {
AppToaster.show({
message: 'the_account_has_been_submit',
});
}).catch((error) => {
});
},
});
console.log(formik.errors);
return (
<form onSubmit={formik.handleSubmit}>
<MakeJournalEntriesHeader formik={formik} />
<MakeJournalEntriesTable formik={formik} />
<MakeJournalEntriesFooter formik={formik} />
</form>
);
}
export default compose(
MakeJournalEntriesConnect,
AccountsConnect,
DashboardConnect,
)(MakeJournalEntriesForm);

View File

@@ -0,0 +1,75 @@
import React from 'react';
import * as Yup from 'yup';
import {
InputGroup,
FormGroup,
Intent,
Position,
} from '@blueprintjs/core';
import {DatePicker, DateInput} from '@blueprintjs/datetime';
import {Formik, useFormik} from "formik";
import {useIntl} from 'react-intl';
import {Row, Col} from 'react-grid-system';
import moment from 'moment';
import {momentFormatter} from 'utils';
export default function MakeJournalEntriesHeader({
formik
}) {
const intl = useIntl();
const handleDateChange = (date) => {
const formatted = moment(date).format('YYYY-MM-DD');
formik.setFieldValue('date', formatted);
};
return (
<div class="make-journal-entries__header">
<Row>
<Col sm={4}>
<FormGroup
label={intl.formatMessage({'id': 'reference'})}
className={'form-group--reference'}
intent={formik.errors.name && Intent.DANGER}
helperText={formik.errors.name && formik.errors.label}
fill={true}>
<InputGroup
intent={formik.errors.name && Intent.DANGER}
fill={true}
{...formik.getFieldProps('reference')} />
</FormGroup>
</Col>
<Col sm={3}>
<FormGroup
label={intl.formatMessage({'id': 'date'})}
intent={formik.errors.date && Intent.DANGER}
helperText={formik.errors.date && formik.errors.date}
minimal={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
defaultValue={new Date()}
onChange={handleDateChange}
popoverProps={{ position: Position.BOTTOM }} />
</FormGroup>
</Col>
<Col sm={4}>
<FormGroup
label={intl.formatMessage({'id': 'description'})}
className={'form-group--description'}
intent={formik.errors.name && Intent.DANGER}
helperText={formik.errors.name && formik.errors.label}
fill={true}>
<InputGroup
intent={formik.errors.name && Intent.DANGER}
fill={true}
{...formik.getFieldProps('description')} />
</FormGroup>
</Col>
</Row>
</div>
);
}

View File

@@ -0,0 +1,14 @@
import React from 'react';
import MakeJournalEntriesForm from './MakeJournalEntriesForm';
import DashboardConnect from 'connectors/Dashboard.connector';
import {compose} from 'utils';
function MakeJournalEntriesPage() {
return (
<MakeJournalEntriesForm />
);
}
export default compose(
DashboardConnect,
)(MakeJournalEntriesPage);

View File

@@ -0,0 +1,206 @@
import React, {useState, useMemo} from 'react';
import DataTable from 'components/DataTable';
import {
FormGroup,
InputGroup,
MenuItem,
Button,
Intent,
} from '@blueprintjs/core';
import {Select} from '@blueprintjs/select';
import Icon from 'components/Icon';
import AccountsConnect from 'connectors/Accounts.connector.js';
import {compose} from 'utils';
function MakeJournalEntriesTable({
formik,
accounts,
}) {
const [selectAccountsState, setSelectedAccount] = useState(false);
// Account item of select accounts field.
const accountItem = (item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />)
};
// Filters accounts options by account name or code.
const filterAccountsPredicater = (query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
}
};
// Handle account field change.
const onChangeAccount = (index) => (account) => {
setSelectedAccount({
...selectAccountsState,
[index + 1]: account,
});
formik.setFieldValue(`entries[${index}].account_id`, account.id);
};
const [data, setData] = useState([
...formik.values.entries,
]);
const updateData = (rowIndex, columnId, value) => {
setData((old) =>
old.map((row, index) => {
if (index === rowIndex) {
return {
...old[rowIndex],
[columnId]: value,
}
}
return row
})
)
}
const CellInputGroupRenderer = ({
row: { index },
column: { id },
cell: { value: initialValue },
}) => {
const [state, setState] = useState(initialValue);
return (
<InputGroup
fill={true}
value={state}
onChange={(event) => {
setState(event.target.value);
}}
onBlur={(event) => {
formik.setFieldValue(`entries[${index}].[${id}]`, event.target.value);
updateData(index, id, state);
}}
/>);
}
const ActionsCellRenderer = ({
row: { index },
column: { id },
cell: { value: initialValue },
}) => {
const onClickRemoveRole = () => {
};
return (
<Button
icon={<Icon icon="mines" />}
iconSize={14}
className="ml2"
minimal={true}
intent={Intent.DANGER}
onClick={onClickRemoveRole()} />
);
}
const columns = useMemo(() => [
{
Header: '#',
accessor: 'index',
Cell: ({ row: {index} }) => (
<span>{ index + 1 }</span>
),
className: "actions",
},
{
Header: 'Account',
accessor: 'account',
Cell: ({ row: { index } }) => (
<FormGroup
className="{'form-group--account'}"
inline={true}>
<Select
items={accounts}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={accountItem}
itemPredicate={filterAccountsPredicater}
popoverProps={{ minimal: true }}
onItemSelect={onChangeAccount(index)}>
<Button
rightIcon="caret-down"
text={(selectAccountsState[(index + 1)])
? selectAccountsState[(index + 1)].name : "Select Account"}
/>
</Select>
</FormGroup>
),
className: "account",
},
{
Header: 'Note',
accessor: 'note',
Cell: CellInputGroupRenderer,
className: "note",
},
{
Header: 'Credit',
accessor: 'credit',
Cell: CellInputGroupRenderer,
className: "credit",
},
{
Header: 'Debit',
accessor: 'debit',
Cell: CellInputGroupRenderer,
className: "debit",
},
{
Header: '',
accessor: 'action',
Cell: ActionsCellRenderer,
className: "actions",
}
]);
const onClickNewRow = () => {
setData([
...data,
{
credit: 0,
debit: 0,
account_id: null,
note: '',
}
]);
}
return (
<div class="make-journal-entries__table">
<DataTable
columns={columns}
data={data} />
<div class="mt1">
<Button
minimal={true}
intent={Intent.PRIMARY}
onClick={onClickNewRow}>
+ New Entry
</Button>
<Button
minimal={true}
intent={Intent.PRIMARY}
onClick={onClickNewRow}>
- Clear all entries
</Button>
</div>
</div>
);
}
export default compose(
AccountsConnect,
)(MakeJournalEntriesTable);

View File

@@ -1,26 +1,180 @@
import React, { useEffect } from 'react';
import DashboardActionsBar from 'components/Dashboard/DashboardActionsBar';
import React, { useEffect, useState } from 'react';
import {
Route,
Switch,
useParams,
useRouteMatch
} from 'react-router-dom';
import useAsync from 'hooks/async';
import { Alert, Intent } from '@blueprintjs/core';
import AppToaster from 'components/AppToaster';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import { connect } from 'react-redux';
import t from 'store/types';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import AccountsViewsTabs from 'components/Accounts/AccountsViewsTabs';
import AccountsDataTable from 'components/Accounts/AccountsDataTable';
import DashboardActionsBar from 'components/Accounts/AccountsActionsBar';
import AccountsConnect from 'connectors/Accounts.connector';
import DashboardConnect from 'connectors/Dashboard.connector';
import CustomViewConnect from 'connectors/CustomView.connector';
import { compose } from 'utils';
function AccountsChart({
changePageTitle,
fetchAccounts,
deleteAccount,
inactiveAccount,
fetchResourceViews
}) {
const [state, setState] = useState({
deleteAlertActive: false,
restoreAlertActive: false,
inactiveAlertActive: false,
targetAccount: {},
});
const fetchHook = useAsync(async () => {
await Promise.all([
fetchResourceViews('accounts'),
]);
});
function AccountsChart({ changePageTitle }) {
useEffect(() => {
changePageTitle('Chart of Accounts');
});
}, []);
/**
* Handle click and cancel/confirm account delete
*/
const handleDeleteAccount = (account) => {
setState({
deleteAlertActive: true,
deleteAccount: account,
});
};
const handleCancelAccountDelete = () => {
setState({ deleteAlertActive: false });
};
const handleConfirmAccountDelete = () => {
const { targetAccount: account } = state;
deleteAccount(account.id).then(() => {
setState({ deleteAlertActive: false });
fetchAccounts();
AppToaster.show({ message: 'the_account_has_been_deleted' });
});
};
/**
* Handle cancel/confirm account inactive.
*/
const handleInactiveAccount = (account) => {
setState({ inactiveAlertActive: true, targetAccount: account });
};
const handleCancelInactiveAccount = () => {
setState({ inactiveAlertActive: false });
};
const handleConfirmAccountActive = () => {
const { targetAccount: account } = state;
inactiveAccount(account.id).then(() => {
setState({ inactiveAlertActive: true });
fetchAccounts();
AppToaster.show({ message: 'the_account_has_been_inactivated' });
});
};
/**
* Handle cancel/confirm account restore.
*/
const handleCancelAccountRestore = () => {
setState({ restoreAlertActive: false });
};
const handleEditAccount = (account) => {
};
const handleRestoreAccount = (account) => {
};
const handleConfirmAccountRestore = (account) => {
};
const handleDeleteBulkAccounts = (accounts) => {
};
return (
<React.Fragment>
<DashboardInsider loading={fetchHook.pending} name={'accounts-chart'}>
<DashboardActionsBar />
<DashboardPageContent>
<Switch>
<Route
exact={true}
path={[
'/dashboard/accounts/:custom_view_id/custom_view',
'/dashboard/accounts'
]}>
<AccountsViewsTabs onDeleteBulkAccounts={handleDeleteBulkAccounts} />
<AccountsDataTable
onDeleteAccount={handleDeleteAccount}
onInactiveAccount={handleInactiveAccount}
onRestoreAccount={handleRestoreAccount}
onEditAccount={handleEditAccount} />
</Route>
</Switch>
<Alert
cancelButtonText="Cancel"
confirmButtonText="Move to Trash"
icon="trash"
intent={Intent.DANGER}
isOpen={state.deleteAlertActive}
onCancel={handleCancelAccountDelete}
onConfirm={handleConfirmAccountDelete}>
<p>
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
but it will become private to you.
</p>
</Alert>
<Alert
cancelButtonText="Cancel"
confirmButtonText="Inactivate"
icon="trash"
intent={Intent.WARNING}
isOpen={state.inactiveAlertActive}
onCancel={handleCancelInactiveAccount}
onConfirm={handleConfirmAccountActive}>
<p>
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
but it will become private to you.
</p>
</Alert>
<Alert
cancelButtonText="Cancel"
confirmButtonText="Move to Trash"
icon="trash"
intent={Intent.DANGER}
isOpen={state.restoreAlertActive}
onCancel={handleCancelAccountRestore}
onConfirm={handleConfirmAccountRestore}>
<p>
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
but it will become private to you.
</p>
</Alert>
</DashboardPageContent>
</React.Fragment>
</DashboardInsider>
);
}
const mapActionsToProps = (dispatch) => ({
changePageTitle: pageTitle => dispatch({
type: t.CHANGE_DASHBOARD_PAGE_TITLE, pageTitle
}),
});
export default connect(null, mapActionsToProps)(AccountsChart);
export default compose(
AccountsConnect,
CustomViewConnect,
DashboardConnect,
)(AccountsChart);

View File

@@ -0,0 +1,273 @@
import React, { useState} from 'react';
import {
Button,
Classes,
FormGroup,
InputGroup,
Intent,
TextArea,
MenuItem,
Checkbox,
} from "@blueprintjs/core";
import {Select} from '@blueprintjs/select';
import * as Yup from 'yup';
import { useFormik } from 'formik';
import { useIntl } from 'react-intl';
import { omit } from 'lodash';
import { compose } from 'utils';
import useAsync from 'hooks/async';
import Dialog from 'components/Dialog';
import AppToaster from 'components/AppToaster';
import DialogConnect from 'connectors/Dialog.connector';
import DialogReduxConnect from 'components/DialogReduxConnect';
import AccountFormDialogConnect from 'connectors/AccountFormDialog.connector';
function AccountFormDialog ({
name,
payload,
isOpen,
accountsTypes,
accounts,
fetchAccounts,
fetchAccountTypes,
closeDialog,
submitAccount,
fetchAccount,
editAccount
}) {
const intl = useIntl();
const accountFormValidationSchema = Yup.object().shape({
name: Yup
.string()
.required(intl.formatMessage({ 'id': 'required' })),
code: Yup
.number(intl.formatMessage({ id: 'field_name_must_be_number' })),
account_type_id: Yup
.string()
.nullable()
.required(intl.formatMessage({ 'id': 'required' })),
description: Yup.string().trim(),
});
// Formik
const formik = useFormik({
enableReinitialize: true,
initialValues: {
...payload.action === 'edit' && editAccount,
},
validationSchema: accountFormValidationSchema,
onSubmit: (values) => {
const exclude = ['subaccount'];
if (payload.action === 'edit') {
editAccount({
payload: payload.id,
form: { ...omit(values, exclude) }
}).then((response) => {
closeDialog(name);
AppToaster.show({
message: 'the_account_has_been_edited',
});
});
} else {
submitAccount({ form: { ...omit(values, exclude) } }).then(response => {
closeDialog(name);
AppToaster.show({
message: 'the_account_has_been_submit',
});
});
}
},
});
const [state, setState] = useState({
loading: true,
dialogActive: true,
selectedAccountType: null,
selectedSubaccount: null,
});
// Filters accounts types items.
const filterAccountTypeItems = (query, accountType, _index, exactMatch) => {
const normalizedTitle = accountType.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return normalizedTitle.indexOf(normalizedQuery) >= 0;
}
};
// Account type item of select filed.
const accountTypeItem = (item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
};
// Account item of select accounts field.
const accountItem = (item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.name} label={item.code} key={item.id} onClick={handleClick} />)
};
// Filters accounts items.
const filterAccountsPredicater = (query, account, _index, exactMatch) => {
const normalizedTitle = account.name.toLowerCase();
const normalizedQuery = query.toLowerCase();
if (exactMatch) {
return normalizedTitle === normalizedQuery;
} else {
return `${account.code} ${normalizedTitle}`.indexOf(normalizedQuery) >= 0;
}
};
const handleClose = () => { closeDialog(name); };
const fetchHook = useAsync(async () => {
await Promise.all([
fetchAccounts(),
fetchAccountTypes(),
// Fetch the target in case edit mode.
...(payload.action === 'edit') ? [
fetchAccount(payload.id),
] : [],
]);
}, false);
const onDialogOpening = async () => { fetchHook.execute(); }
const onChangeAccountType = (accountType) => {
setState({ ...state, selectedAccountType: accountType.name });
formik.setFieldValue('account_type_id', accountType.id);
};
const onChangeSubaccount = (account) => {
setState({ ...state, selectedSubaccount: account });
formik.setFieldValue('parent_account_id', account.id);
};
const onDialogClosed = () => {
formik.resetForm();
setState({
...state,
selectedSubaccount: null,
selectedAccountType: null,
});
};
return (
<Dialog
name={name}
title={payload.action === 'edit' ? 'Edit Account' : 'New Account'}
className={{'dialog--loading': state.isLoading, 'dialog--account-form': true }}
onClosed={onDialogClosed}
onOpening={onDialogOpening}
isOpen={isOpen}
isLoading={fetchHook.pending}
>
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'Account Type'}
className="{'form-group--account-type'}"
inline={true}
helperText={formik.errors.account_type_id && formik.errors.account_type_id}
intent={formik.errors.account_type_id && Intent.DANGER}>
<Select
items={accountsTypes}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={accountTypeItem}
itemPredicate={filterAccountTypeItems}
popoverProps={{ minimal: true }}
onItemSelect={onChangeAccountType}>
<Button
rightIcon="caret-down"
text={state.selectedAccountType || 'Select account type'} />
</Select>
</FormGroup>
<FormGroup
label={'Account Name'}
className={'form-group--account-name'}
intent={formik.errors.name && Intent.DANGER}
helperText={formik.errors.name && formik.errors.name}
inline={true}>
<InputGroup
medium={true}
intent={formik.errors.name && Intent.DANGER}
{...formik.getFieldProps('name')} />
</FormGroup>
<FormGroup
label={'Account Code'}
className={'form-group--account-code'}
intent={formik.errors.code && Intent.DANGER}
helperText={formik.errors.code && formik.errors.code}
inline={true}>
<InputGroup
medium={true}
intent={formik.errors.code && Intent.DANGER}
{...formik.getFieldProps('code')} />
</FormGroup>
<FormGroup
label={' '}
className={'form-group--subaccount'}
inline={true}>
<Checkbox
inline={true}
label={'Sub account?'}
{...formik.getFieldProps('subaccount')} />
</FormGroup>
{ (formik.values.subaccount) &&
<FormGroup
label={'Sub Account'}
className="{'form-group--sub-account'}"
inline={true}>
<Select
items={accounts}
noResults={<MenuItem disabled={true} text="No results." />}
itemRenderer={accountItem}
itemPredicate={filterAccountsPredicater}
popoverProps={{ minimal: true }}
onItemSelect={onChangeSubaccount}
{...formik.getFieldProps('parent_account_id')}>
<Button
rightIcon="caret-down"
text={state.selectedSubaccount ? state.selectedSubaccount.name : "Select Parent Account"}
/>
</Select>
</FormGroup> }
<FormGroup
label={'Description'}
className={'form-group--description'}
intent={formik.errors.description && Intent.DANGER}
helperText={formik.errors.description && formik.errors.credential}
inline={true}>
<TextArea growVertically={true} large={true} {...formik.getFieldProps('description')} />
</FormGroup>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button intent={Intent.PRIMARY} type="submit">
{ payload.action === 'edit' ? 'Edit' : 'Submit' }
</Button>
</div>
</div>
</form>
</Dialog>
);
}
export default compose(
AccountFormDialogConnect,
DialogReduxConnect,
DialogConnect,
)(AccountFormDialog);

View File

@@ -0,0 +1,201 @@
import React from 'react';
import { useIntl } from "react-intl"
import {useFormik} from 'formik';
import * as Yup from 'yup';
import {
Dialog,
Button,
FormGroup,
InputGroup,
Intent,
TextArea,
MenuItem,
Checkbox,
Classes,
HTMLSelect,
} from '@blueprintjs/core';
import UserFormDialogConnect from 'connectors/UserFormDialog.connector';
import DialogReduxConnect from 'components/DialogReduxConnect';
import AppToaster from 'components/AppToaster';
import useAsync from 'hooks/async';
import {objectKeysTransform} from 'utils';
import {pick, snakeCase} from 'lodash';
function UserFormDialog({
fetchUser,
submitUser,
editUser,
name,
payload,
isOpen,
userDetails,
closeDialog,
}) {
const intl = useIntl();
const fetchHook = useAsync(async () => {
await Promise.all([
...(payload.action === 'edit') ? [
fetchUser(payload.user.id),
] : [],
]);
}, false);
const validationSchema = Yup.object().shape({
first_name: Yup.string().required(),
last_name: Yup.string().required(),
email: Yup.string().email().required(),
phone_number: Yup.string().required(),
password: Yup.string().min(5).required(),
});
const initialValues = {
status: 1,
...payload.action === 'edit' &&
pick(
objectKeysTransform(payload.user, snakeCase),
Object.keys(validationSchema.fields)
),
password: '',
};
const formik = useFormik({
enableReinitialize: true,
initialValues,
validationSchema,
onSubmit: (values) => {
const form = {
...values,
confirm_password: values.password,
};
if (payload.action === 'edit') {
editUser(payload.user.id, form).then((response) => {
AppToaster.show({
message: 'the_user_details_has_been_updated',
});
closeDialog(name);
});
} else {
submitUser(form).then((response) => {
AppToaster.show({
message: 'the_user_has_been_invited',
});
closeDialog(name);
});
}
},
});
const statusOptions = [
{value: 1, label: 'Active'},
{value: 2, label: 'Inactive'},
];
const onDialogOpening = () => { fetchHook.execute(); };
const onDialogClosed = () => {
formik.resetForm();
};
const handleClose = () => { closeDialog(name); };
return (
<Dialog
isOpen={isOpen}
name={name}
title={payload.action === 'edit' ? 'Edit User' : 'New User'}
isLoading={fetchHook.pending}
onClosed={onDialogClosed}
onOpening={onDialogOpening}>
<form onSubmit={formik.handleSubmit}>
<div className={Classes.DIALOG_BODY}>
<FormGroup
label={'First Name'}
className={'form-group--first-name'}
intent={formik.errors.first_name && Intent.DANGER}
helperText={formik.errors.first_name && formik.errors.first_name}
inline={true}>
<InputGroup
intent={formik.errors.first_name && Intent.DANGER}
{...formik.getFieldProps('first_name')} />
</FormGroup>
<FormGroup
label={'Last Name'}
className={'form-group--last-name'}
intent={formik.errors.last_name && Intent.DANGER}
helperText={formik.errors.last_name && formik.errors.last_name}
inline={true}>
<InputGroup
intent={formik.errors.last_name && Intent.DANGER}
{...formik.getFieldProps('last_name')} />
</FormGroup>
<FormGroup
label={'Email'}
className={'form-group--email'}
intent={formik.errors.email && Intent.DANGER}
helperText={formik.errors.email && formik.errors.email}
inline={true}>
<InputGroup
intent={formik.errors.email && Intent.DANGER}
{...formik.getFieldProps('email')} />
</FormGroup>
<FormGroup
label={'Phone Number'}
className={'form-group--phone-number'}
intent={formik.errors.phone_number && Intent.DANGER}
helperText={formik.errors.phone_number && formik.errors.phone_number}
inline={true}>
<InputGroup
intent={formik.errors.phone_number && Intent.DANGER}
{...formik.getFieldProps('phone_number')} />
</FormGroup>
<FormGroup
label={'Password'}
className={'form-group--password'}
intent={formik.errors.password && Intent.DANGER}
helperText={formik.errors.password && formik.errors.password}
inline={true}>
<InputGroup
intent={formik.errors.password && Intent.DANGER}
className={Classes.FILL}
{...formik.getFieldProps('password')} />
</FormGroup>
<FormGroup
label={'Status'}
className={'form-group--status'}
intent={formik.errors.status && Intent.DANGER}
helperText={formik.errors.status && formik.errors.status}
inline={true}>
<HTMLSelect
options={statusOptions}
className={Classes.FILL}
{...formik.getFieldProps(`status`)} />
</FormGroup>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button onClick={handleClose}>Close</Button>
<Button intent={Intent.PRIMARY} type="submit">
{ payload.action === 'edit' ? 'Edit' : 'Submit' }
</Button>
</div>
</div>
</div>
</form>
</Dialog>
);
}
export default UserFormDialogConnect(DialogReduxConnect(UserFormDialog));

View File

@@ -0,0 +1,40 @@
import React, {useEffect} from 'react';
import { useAsync } from 'react-use';
import {useParams} from 'react-router-dom';
import Connector from 'connectors/ExpenseForm.connector';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import ExpenseForm from 'components/Expenses/ExpenseForm';
function ExpenseFormContainer({
fetchAccounts,
fetchCurrencies,
accounts,
changePageTitle,
submitExpense,
editExpense,
currencies,
}) {
const { id } = useParams();
useEffect(() => {
if (id) {
changePageTitle('Edit Expense Details');
} else {
changePageTitle('New Expense');
}
}, []);
const fetchHook = useAsync(async () => {
await Promise.all([
fetchAccounts(),
fetchCurrencies(),
]);
});
return (
<DashboardInsider isLoading={fetchHook.loading} name={'expense-form'}>
<ExpenseForm {...{submitExpense, editExpense, accounts, currencies} } />
</DashboardInsider>
);
}
export default Connector(ExpenseFormContainer);

View File

@@ -0,0 +1,71 @@
import React, {useEffect, useState} from 'react';
import { useAsync } from 'react-use';
import {Alert, Intent} from '@blueprintjs/core';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import ExpensesActionsBar from 'components/Expenses/ExpensesActionsBar';
import ExpensesViewsTabs from 'components/Expenses/ExpensesViewsTabs';
import ExpensesTable from 'components/Expenses/ExpensesTable';
import connector from 'connectors/ExpensesList.connector';
import AppToaster from 'components/AppToaster';
function ExpensesList({
fetchExpenses,
deleteExpense,
// fetchViews,
expenses,
getResourceViews,
changePageTitle,
}) {
useEffect(() => {
changePageTitle('Expenses List');
}, []);
const [deleteExpenseState, setDeleteExpense] = useState();
const handleDeleteExpense = (expense) => { setDeleteExpense(expense); };
const handleCancelAccountDelete = () => { setDeleteExpense(false); }
const handleConfirmAccountDelete = () => {
deleteExpense(deleteExpenseState.id).then(() => {
setDeleteExpense(false);
AppToaster.show({
message: 'the_expense_has_been_deleted',
});
});
};
const fetchHook = useAsync(async () => {
await Promise.all([
fetchExpenses(),
// getResourceViews('expenses'),
]);
});
return (
<DashboardInsider loading={false}>
<ExpensesActionsBar />
<ExpensesViewsTabs />
<DashboardPageContent>
<ExpensesTable expenses={expenses} onDeleteExpense={handleDeleteExpense} />
</DashboardPageContent>
<Alert
cancelButtonText="Cancel"
confirmButtonText="Move to Trash"
icon="trash"
intent={Intent.DANGER}
isOpen={deleteExpenseState}
onCancel={handleCancelAccountDelete}
onConfirm={handleConfirmAccountDelete}>
<p>
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
but it will become private to you.
</p>
</Alert>
</DashboardInsider>
);
};
export default connector(ExpensesList);

View File

@@ -0,0 +1,48 @@
import React, {useEffect} from 'react';
import DashboardConnect from 'connectors/Dashboard.connector';
import {compose} from 'utils';
import useAsync from 'hooks/async';
import FinancialStatementConnect from 'connectors/FinancialStatements.connector';
import {useIntl} from 'react-intl';
import BalanceSheetHeader from './BalanceSheet/BalanceSheetHeader';
import LoadingIndicator from 'components/LoadingIndicator';
import BalanceSheetTable from './BalanceSheet/BalanceSheetTable';
function BalanceSheet({
fetchBalanceSheet,
changePageTitle,
}) {
const intl = useIntl();
const handleDateChange = () => {};
const fetchHook = useAsync(async () => {
await Promise.all([
fetchBalanceSheet({}),
]);
});
useEffect(() => {
changePageTitle('Balance Sheet');
}, []);
const handleFilterSubmit = (filter) => {
};
return (
<div class="financial-statement">
<BalanceSheetHeader onSubmitFilter={handleFilterSubmit} />
<div class="financial-statement__body">
<LoadingIndicator loading={fetchHook.pending}>
<BalanceSheetTable />
</LoadingIndicator>
</div>
</div>
);
}
export default compose(
DashboardConnect,
FinancialStatementConnect,
)(BalanceSheet);

View File

@@ -0,0 +1,171 @@
import React, {useState, useMemo} from 'react';
import FinancialStatementHeader from 'containers/Dashboard/FinancialStatements/FinancialStatementHeader';
import {Row, Col} from 'react-grid-system';
import {
Button,
FormGroup,
Position,
MenuItem,
RadioGroup,
Radio,
HTMLSelect,
Intent,
} from "@blueprintjs/core";
import {Select} from '@blueprintjs/select';
import {DateInput} from '@blueprintjs/datetime';
import {useIntl} from 'react-intl';
import {momentFormatter, handleStringChange} from 'utils';
import moment from 'moment';
export default function BalanceSheetHeader({
onSubmitFilter,
}) {
const intl = useIntl();
const [filter, setFilter] = useState({
from_date: null,
to_date: null,
accounting_basis: 'cash',
display_columns_by: 'total',
});
const setFilterByName = (name, value) => {
setFilter({
...filter,
[name]: value,
});
};
const handleFieldChange = (event) => {
setFilterByName(event.target.name, event.target.value);
};
const displayColumnsByOptions = [
{key: 'total', name: 'Total'},
{key: 'year', name: 'Year'},
{key: 'month', name: 'Month'},
{key: 'week', name: 'Week'},
{key: 'day', name: 'Day'},
{key: 'quarter', name: 'Quarter'}
];
const selectedDisplayColumnOpt = useMemo(() => {
return displayColumnsByOptions.find(o => o.key === filter.display_columns_by);
}, [filter.display_columns_by, displayColumnsByOptions]);
// Account type item of select filed.
const accountTypeItem = (item, { handleClick, modifiers, query }) => {
return (<MenuItem text={item.name} key={item.id} onClick={handleClick} />);
};
const onItemSelectDisplayColumns = (item) => {
setFilterByName('display_columns_by', item.key);
};
const handleDateChange = (name) => (date) => {
setFilterByName(name, moment(date).format('YYYY-MM-DD'));
};
const handleSubmitClick = () => {
onSubmitFilter(filter);
};
const dateRangeOptions = [
{value: 'today', label: 'Today', },
{value: 'this_week', label: 'This Week'},
{value: 'this_month', label: 'This Month'},
{value: 'this_quarter', label: 'This Quarter'},
{value: 'this_year', label: 'This Year'},
];
return (
<FinancialStatementHeader>
<Row>
<Col sm={4}>
<FormGroup
label={intl.formatMessage({'id': 'report_date_range'})}
minimal={true}
fill={true}>
<HTMLSelect
fill={true}
options={dateRangeOptions} />
</FormGroup>
</Col>
<Col sm={4}>
<FormGroup
label={intl.formatMessage({'id': 'from_date'})}
minimal={true}
fill={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
defaultValue={new Date()}
onChange={handleDateChange('from_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true} />
</FormGroup>
</Col>
<Col sm={4}>
<FormGroup
label={intl.formatMessage({'id': 'to_date'})}
minimal={true}
fill={true}>
<DateInput
{...momentFormatter('YYYY/MM/DD')}
defaultValue={new Date()}
onChange={handleDateChange('to_date')}
popoverProps={{ position: Position.BOTTOM }}
fill={true} />
</FormGroup>
</Col>
</Row>
<Row>
<Col sm={4}>
<FormGroup
label={'Display report columns'}
className="{'form-group-display-columns-by'}"
inline={true}>
<Select
items={displayColumnsByOptions}
noResults={<MenuItem disabled={true} text="No results." />}
filterable={false}
itemRenderer={accountTypeItem}
popoverProps={{ minimal: true }}
onItemSelect={onItemSelectDisplayColumns}>
<Button
rightIcon="caret-down"
fill={true}
text={selectedDisplayColumnOpt ? selectedDisplayColumnOpt.name : 'Select'} />
</Select>
</FormGroup>
</Col>
<Col sm={4}>
<RadioGroup
inline={true}
label={intl.formatMessage({'id': 'accounting_basis'})}
name="accounting_bahandleRadioChangesis"
selectedValue={filter.accounting_basis}
onChange={handleStringChange((value) => {
setFilterByName('accounting_basis', value);
})}
>
<Radio label="Cash" value="cash" />
<Radio label="Accural" value="accural" />
</RadioGroup>
</Col>
<Col sm={4}>
<Button intent={Intent.PRIMARY} type="submit" onClick={handleSubmitClick}>
{ 'Calculate Report' }
</Button>
</Col>
</Row>
</FinancialStatementHeader>
)
}

View File

@@ -0,0 +1,41 @@
import React, {useMemo, useState} from 'react';
import FinancialSheet from 'components/FinancialSheet';
import DataTable from 'components/DataTable';
export default function BalanceSheetTable({
}) {
const columns = useMemo(() => [
{
Header: 'Account Name',
accessor: 'index',
className: "actions",
},
{
Header: 'Code',
accessor: 'note',
className: "note",
},
{
Header: 'Total',
accessor: 'total',
className: "credit",
},
]);
const [data, setData] = useState([]);
return (
<FinancialSheet
companyTitle={'Facebook, Incopration'}
sheetType={'Balance Sheet'}
date={''}>
<DataTable
columns={columns}
data={data} />
</FinancialSheet>
)
}

View File

@@ -0,0 +1,9 @@
import React from 'react';
export default function FinancialStatementHeader({ children }) {
return (
<div class="financial-statement__header">
{ children }
</div>
);
}

View File

@@ -4,7 +4,7 @@ import t from 'store/types';
const DashboardHomepage = ({ changePageTitle }) => {
useEffect(() => {
changePageTitle('Homepage')
changePageTitle('Craigs Design and Landscaping Services')
});
return (
<div>asdasd</div>

View File

@@ -0,0 +1,9 @@
import React from 'react';
export default function AccountantPreferences() {
return (
<div class="preferences__inside-content--accountant">
</div>
);
}

View File

@@ -0,0 +1,32 @@
import React from 'react';
import {Tabs, Tab} from '@blueprintjs/core';
import { useHistory } from 'react-router-dom';
import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
export default function AccountsPreferences() {
const history = useHistory();
const onChangeTabs = (currentTabId) => {
switch(currentTabId) {
default:
history.push('/dashboard/preferences/accounts/general');
break;
case 'custom_fields':
history.push('/dashboard/preferences/accounts/custom_fields');
break;
}
};
return (
<div class="preferences__inside-content preferences__inside-content--accounts">
<Tabs
animate={true}
large={true}
onChange={onChangeTabs}>
<Tab id="general" title="General" />
<Tab id="custom_fields" title="Custom Fields" />
</Tabs>
<PreferencesSubContent preferenceTab="accounts" />
</div>
);
}

View File

@@ -0,0 +1,81 @@
import React, { useEffect } from 'react';
import {
Popover,
Button,
Menu,
MenuDivider,
MenuItem,
Position,
Icon
} from '@blueprintjs/core';
import {
GridComponent,
ColumnsDirective,
ColumnDirective,
} from '@syncfusion/ej2-react-grids';
import useAsync from 'hooks/async';
import {connect} from 'react-redux';
import {
fetchResourceFields,
} from 'store/customFields/customFields.actions';
function AccountsCustomFields({ fetchResourceFields, fields }) {
const fetchHook = useAsync(async () => {
await Promise.all([
// fetchResourceFields('accounts'),
]);
}, false);
useEffect(() => { fetchHook.execute(); }, []);
const actionMenuList = (column) => (
<Menu>
<MenuItem text="View Details" />
<MenuDivider />
<MenuItem text="Edit Account" />
<MenuItem text="New Account" />
<MenuDivider />
<MenuItem text="Inactivate Account" />
<MenuItem text="Delete Account" />
</Menu>
);
const statusRowTemplate = (column) => {
return ('Active');
};
const actionsRowTemplate = (column) => (
<Popover content={actionMenuList(column)} position={Position.RIGHT_BOTTOM}>
<Button icon={<Icon icon="ellipsis-h" />} />
</Popover>
);
const columns = [
{field: 'label_name', headerText: 'Field Label'},
{field: 'data_type', headerText: 'Type'},
{template: statusRowTemplate, headerText: 'Status'},
{template: actionsRowTemplate, headerText: ''},
];
return (
<div class="preferences__inside-content-tab preferences__inside-content-tab--custom-fields">
<GridComponent dataSource={fields}>
<ColumnsDirective>
{columns.map((column) => {
return (<ColumnDirective
field={column.field}
headerText={column.headerText}
template={column.template} />);
})}
</ColumnsDirective>
</GridComponent>
</div>
);
}
const mapStateToProps = (state) => ({
fields: state.fields.custom_fields['accounts'] || [],
});
const mapDispatchToProps = (dispatch) => ({
fetchResourceFields: (resourceSlug) => dispatch(fetchResourceFields({ resourceSlug })),
});
export default connect(mapStateToProps, mapDispatchToProps)(AccountsCustomFields);

View File

@@ -0,0 +1,9 @@
import React from 'react';
export default function AccountsGeneralPreferences() {
return (
<div class="preferences__inside-content preferences__inside-content--general">
</div>
);
}

View File

@@ -0,0 +1,88 @@
import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';
import {connect} from 'react-redux';
import {
Button,
FormGroup,
InputGroup,
Intent,
} from "@blueprintjs/core";
import { useAsync } from 'react-use';
import {optionsMapToArray} from 'utils';
import AppToaster from 'components/AppToaster';
import {
savePreferences,
fetchPreferences,
} from 'store/preferences/preferences.actions';
function GeneralPreferences({ savePreferences, fetchPreferences }) {
const validationSchema = Yup.object().shape({
organization_name: Yup.string().required(),
organization_industry: Yup.string().required(),
});
const asyncHook = useAsync(async () => {
await fetchPreferences();
});
const formik = useFormik({
enableReinitialize: true,
initialValues: {
},
validationSchema: validationSchema,
onSubmit: (values) => {
const options = optionsMapToArray(values).map(option => {
return {...option, group: 'general'};
});
savePreferences(options).then((response) => {
AppToaster.show({
message: 'preferences_have_been_updated',
});
}).catch(error => {
});
},
});
return (
<form onSubmit={formik.handleSubmit}>
<FormGroup
label={'Organization Name'}
className="{'form-group--organization-name'}"
inline={true}
helperText={formik.errors.organization_name && formik.errors.organization_name}
intent={formik.errors.organization_name && Intent.DANGER}>
<InputGroup
medium={true}
intent={formik.errors.organization_name && Intent.DANGER}
{...formik.getFieldProps('organization_name')} />
</FormGroup>
<FormGroup
label={'Organization Industry'}
className="{'form-group--organization-industry'}"
inline={true}
helperText={formik.errors.organization_industry && formik.errors.organization_industry}
intent={formik.errors.organization_industry && Intent.DANGER}>
<InputGroup
medium={true}
intent={formik.errors.organization_industry && Intent.DANGER}
{...formik.getFieldProps('organization_industry')} />
</FormGroup>
<div class="divider mt3 mb2"></div>
<Button intent={Intent.PRIMARY} type="submit">{ 'Save' }</Button>
</form>
)
}
const mapDispatchToProps = (dispatch) => ({
savePreferences: (options) => dispatch(savePreferences({ options })),
fetchPreferences: (keys) => dispatch(fetchPreferences())
});
export default connect(null, mapDispatchToProps)(GeneralPreferences);

View File

@@ -0,0 +1,49 @@
import React from 'react';
import {
Tabs,
Tab,
Button,
Intent,
} from '@blueprintjs/core';
import { useHistory } from 'react-router-dom';
import PreferencesSubContent from 'components/Preferences/PreferencesSubContent';
import connector from 'connectors/UsersPreferences.connector';
function UsersPreferences({
openDialog,
}) {
const history = useHistory();
const onChangeTabs = (currentTabId) => {
};
const onClickNewUser = () => {
openDialog('user-form');
};
return (
<div class="preferences__inside-content preferences__inside-content--users-roles">
<div class="preferences__tabs">
<Tabs
animate={true}
large={true}
onChange={onChangeTabs}>
<Tab id="users" title="Users" />
<Tab id="roles" title="Roles" />
</Tabs>
<div class="preferences__tabs-extra-actions">
<Button
intent={Intent.PRIMARY}
onClick={onClickNewUser}>New User</Button>
<Button
intent={Intent.PRIMARY}
onClick={onClickNewUser}>New Role</Button>
</div>
</div>
<PreferencesSubContent preferenceTab="users" />
</div>
);
}
export default connector(UsersPreferences);

View File

@@ -0,0 +1,143 @@
import React, {useState} from 'react';
import {useAsync} from 'react-use';
import {
GridComponent,
ColumnsDirective,
ColumnDirective,
} from '@syncfusion/ej2-react-grids';
import {
Alert,
Popover,
Button,
Menu,
MenuItem,
MenuDivider,
Position,
Intent,
} from '@blueprintjs/core';
import Icon from 'components/Icon';
import LoadingIndicator from 'components/LoadingIndicator';
import {snakeCase} from 'lodash';
import connector from 'connectors/UsersList.connector';
import AppToaster from 'components/AppToaster';
function UsersListPreferences({
fetchUsers,
usersList,
openDialog,
closeDialog,
deleteUser,
}) {
const [deleteUserState, setDeleteUserState] = useState(false);
const [inactiveUserState, setInactiveUserState] = useState(false);
const asyncHook = useAsync(async () => {
await Promise.all([
fetchUsers(),
]);
}, []);
const onInactiveUser = (user) => {
};
const onDeleteUser = (user) => { setDeleteUserState(user); };
const handleCancelUserDelete = () => { setDeleteUserState(false); };
const onEditUser = (user) => () => {
const form = Object.keys(user).reduce((obj, key) => {
const camelKey = snakeCase(key);
obj[camelKey] = user[key];
return obj;
}, {});
openDialog('user-form', { action: 'edit', user: form, });
};
const handleConfirmUserDelete = () => {
if (!deleteUserState) { return; }
deleteUser(deleteUserState.id).then((response) => {
setDeleteUserState(false);
AppToaster.show({
message: 'the_user_has_been_deleted',
});
});
};
const actionMenuList = (user) =>
(<Menu>
<MenuItem text="Edit User" onClick={onEditUser(user)} />
<MenuItem text="New Account" />
<MenuDivider />
<MenuItem text="Inactivate User" onClick={() => onInactiveUser(user)} />
<MenuItem text="Delete User" onClick={() => onDeleteUser(user)} />
</Menu>);
const columns = [
{
field: '',
headerText: 'Avatar',
},
{
field: 'fullName',
headerText: 'Full Name',
},
{
field: 'email',
headerText: 'Email',
},
{
field: 'phoneNumber',
headerText: 'Phone Number',
},
{
field: '',
headerText: 'Status',
template: (user) => user.active
? (<span>Active</span>) : (<span>Inactive</span>)
},
{
template: (user) => (
<Popover content={actionMenuList(user)} position={Position.RIGHT_BOTTOM}>
<Button icon={<Icon icon="ellipsis-h" />} />
</Popover>
),
}
]
return (
<LoadingIndicator loading={asyncHook.loading}>
<GridComponent
dataSource={{result: usersList.results}}>
<ColumnsDirective>
{columns.map((column) => {
return (<ColumnDirective
field={column.field}
headerText={column.headerText}
template={column.template}
allowSorting={true}
customAttributes={column.customAttributes}
/>);
})}
</ColumnsDirective>
</GridComponent>
<Alert
cancelButtonText="Cancel"
confirmButtonText="Move to Trash"
icon="trash"
intent={Intent.DANGER}
isOpen={deleteUserState}
onCancel={handleCancelUserDelete}
onConfirm={handleConfirmUserDelete}>
<p>
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
but it will become private to you.
</p>
</Alert>
</LoadingIndicator>
);
}
export default connector(UsersListPreferences);

View File

@@ -0,0 +1,92 @@
import React, {useEffect, useState} from 'react';
import { useAsync } from 'react-use';
import { useParams } from 'react-router-dom';
import { Intent, Alert } from '@blueprintjs/core';
import DashboardInsider from 'components/Dashboard/DashboardInsider';
import DashboardPageContent from 'components/Dashboard/DashboardPageContent';
import ViewForm from 'components/Views/ViewForm';
import DashboardConnect from 'connectors/Dashboard.connector';
import ResourceConnect from 'connectors/Resource.connector';
import ViewConnect from 'connectors/View.connector';
import {compose} from 'utils';
import AppToaster from 'components/AppToaster';
function ViewFormPage({
changePageTitle,
fetchResourceFields,
fetchResourceColumns,
fetchView,
getResourceColumns,
getResourceFields,
submitView,
getViewMeta,
deleteView,
}) {
const { resource_slug: resourceSlug, view_id: viewId } = useParams();
const columns = getResourceColumns('accounts');
const fields = getResourceFields('accounts');
const viewForm = (viewId) ? getViewMeta(viewId) : null;
const [stateDeleteView, setStateDeleteView] = useState(null);
useEffect(() => {
if (viewId) {
changePageTitle('Edit Custom View');
} else {
changePageTitle('New Custom View');
}
}, [viewId]);
const fetchHook = useAsync(async () => {
await Promise.all([
fetchResourceColumns('accounts'),
fetchResourceFields('accounts'),
...(viewId) ? [
fetchView(viewId),
] : [],
]);
}, []);
const handleDeleteView = (view) => { setStateDeleteView(view); };
const handleCancelDeleteView = () => { setStateDeleteView(null); };
const handleConfirmDeleteView = () => {
deleteView(stateDeleteView.id).then((response) => {
setStateDeleteView(null);
AppToaster.show({
message: 'the_custom_view_has_been_deleted',
});
})
};
return (
<DashboardInsider name={'view-form'} loading={fetchHook.loading}>
<DashboardPageContent>
<ViewForm
columns={columns}
fields={fields}
viewForm={viewForm}
onDelete={handleDeleteView} />
<Alert
cancelButtonText="Cancel"
confirmButtonText="Move to Trash"
icon="trash"
intent={Intent.DANGER}
isOpen={stateDeleteView}
onCancel={handleCancelDeleteView}
onConfirm={handleConfirmDeleteView}>
<p>
Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later,
but it will become private to you.
</p>
</Alert>
</DashboardPageContent>
</DashboardInsider>
);
}
export default compose(
DashboardConnect,
ResourceConnect,
ViewConnect,
)(ViewFormPage);

35
client/src/hooks/async.js Normal file
View File

@@ -0,0 +1,35 @@
import {useState, useCallback, useEffect} from 'react';
const useAsync = (asyncFunction, immediate = true) => {
const [pending, setPending] = useState(false);
const [value, setValue] = useState(null);
const [error, setError] = useState(null);
// The execute function wraps asyncFunction and
// handles setting state for pending, value, and error.
// useCallback ensures the below useEffect is not called
// on every render, but only if asyncFunction changes.
const execute = useCallback(() => {
setPending(true);
setValue(null);
setError(null);
return asyncFunction()
.then(response => setValue(response))
.catch(error => setError(error))
.finally(() => setPending(false));
}, [asyncFunction]);
// Call execute if we want to fire it right away.
// Otherwise execute can be called later, such as
// in an onClick handler.
useEffect(() => {
if (immediate) {
execute();
}
}, []);
return { execute, pending, value, error };
};
export default useAsync;

View File

@@ -0,0 +1,6 @@
import useAsync from './async';
// import use from 'async';
export default {
useAsync,
}

View File

@@ -0,0 +1,36 @@
import {useState} from 'react';
const useStackableState = (initialState = []) => {
const [stackableState, setStackableState] = useState(initialState);
const indexState = (state) => stackableState.indexOf(state);
const hasState = (state) => indexState(state) !== -1;
const removeState = (state) => {
if (this.hasState(state)) {
const index = indexState(state);
const mutableState = [...stackableState];
mutableState.splice(index, 1);
setStackableState(mutableState);
}
};
const setState = (state) => {
if (!hasState(state)) {
setStackableState([
...stackableState,
state,
]);
}
};
return {
state: stackableState,
removeState,
indexState,
hasState,
setState,
};
};
export default useStackableState;

View File

@@ -0,0 +1,5 @@
export default function useAppRoutes() {
}

Some files were not shown because too many files have changed in this diff Show More