diff --git a/package.json b/package.json index 3a16e2cc..a53574fb 100644 --- a/package.json +++ b/package.json @@ -59,17 +59,21 @@ "axios": "^0.21.0", "classnames": "^2.2.6", "express": "^4.17.1", + "final-form": "^4.20.1", "immutability-helper": "^3.1.1", "lodash": "^4.17.20", "moment": "^2.29.1", "prop-types": "^15.7.2", "react": "^16.12.0", "react-avatar": "^3.9.7", + "react-datepicker": "^3.4.1", "react-dom": "^16.12.0", + "react-final-form": "^6.5.2", "react-outside-click-handler": "^1.3.0", "react-popper": "^2.2.3", "react-redux": "^7.2.2", "react-redux-toastr": "^7.6.5", + "react-select": "^4.0.2", "react-use": "^15.3.4", "redux": "^4.0.5", "redux-logger": "^3.0.6", diff --git a/server.js b/server.js index 81f5c040..0753bddd 100644 --- a/server.js +++ b/server.js @@ -4,7 +4,8 @@ const express = require("express"); const app = express(); -app.use('/taas-app', +app.use( + "/taas-app", express.static("./dist", { setHeaders: function setHeaders(res) { res.header("Access-Control-Allow-Origin", "*"); @@ -17,9 +18,9 @@ app.use('/taas-app', }) ); -app.get('/', function (req, res) { - res.send('alive') -}) +app.get("/", function (req, res) { + res.send("alive"); +}); const PORT = process.env.PORT || 8501; app.listen(PORT); diff --git a/src/assets/images/icon-bag.svg b/src/assets/images/icon-bag.svg new file mode 100644 index 00000000..b15a9ec3 --- /dev/null +++ b/src/assets/images/icon-bag.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/icon-computer.svg b/src/assets/images/icon-computer.svg new file mode 100644 index 00000000..2ac66471 --- /dev/null +++ b/src/assets/images/icon-computer.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/icon-description.svg b/src/assets/images/icon-description.svg new file mode 100644 index 00000000..185971e0 --- /dev/null +++ b/src/assets/images/icon-description.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/icon-money.svg b/src/assets/images/icon-money.svg index 198a0932..8e1fa9b5 100644 --- a/src/assets/images/icon-money.svg +++ b/src/assets/images/icon-money.svg @@ -1,9 +1,9 @@ - - - + + + @@ -12,4 +12,4 @@ - + \ No newline at end of file diff --git a/src/assets/images/icon-openings.svg b/src/assets/images/icon-openings.svg new file mode 100644 index 00000000..f713e013 --- /dev/null +++ b/src/assets/images/icon-openings.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/images/icon-skill.svg b/src/assets/images/icon-skill.svg new file mode 100644 index 00000000..9b79ee65 --- /dev/null +++ b/src/assets/images/icon-skill.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/ActionsMenu/styles.module.scss b/src/components/ActionsMenu/styles.module.scss index e0024961..c9556de7 100644 --- a/src/components/ActionsMenu/styles.module.scss +++ b/src/components/ActionsMenu/styles.module.scss @@ -39,7 +39,7 @@ } .option { - color: #0D61BF; + color: #0d61bf; cursor: pointer; font-size: 14px; line-height: 20px; diff --git a/src/components/AvatarGroup/styles.module.scss b/src/components/AvatarGroup/styles.module.scss index d9d5aa2e..54d41108 100644 --- a/src/components/AvatarGroup/styles.module.scss +++ b/src/components/AvatarGroup/styles.module.scss @@ -14,10 +14,10 @@ .rest-count { align-items: center; - border: 1px solid #0D61BF; + border: 1px solid #0d61bf; border-radius: 100%; box-sizing: border-box; - color: #0D61BF; + color: #0d61bf; display: flex; font-size: 14px; height: 40px; diff --git a/src/components/Button/index.jsx b/src/components/Button/index.jsx index 7264af96..77edd3e7 100644 --- a/src/components/Button/index.jsx +++ b/src/components/Button/index.jsx @@ -27,6 +27,7 @@ const Button = ({ routeTo, href, target, + isSubmit, }) => { if (href) { return ( @@ -49,6 +50,7 @@ const Button = ({ className={className} ref={innerRef} disabled={disabled} + type={isSubmit ? "submit" : "button"} > {children} @@ -68,6 +70,7 @@ Button.propTypes = { disabled: PT.bool, routeTo: PT.string, href: PT.string, + isSubmit: PT.bool, }; export default Button; diff --git a/src/components/Button/styles.module.scss b/src/components/Button/styles.module.scss index 91dc4bb7..7302f649 100644 --- a/src/components/Button/styles.module.scss +++ b/src/components/Button/styles.module.scss @@ -42,51 +42,51 @@ } .type-primary { - border: 1px solid #137D60; - background-color: #137D60; + border: 1px solid #137d60; + background-color: #137d60; color: #fff; } .type-warning { - border: 1px solid #EF476F; - background-color: #EF476F; + border: 1px solid #ef476f; + background-color: #ef476f; color: #fff; } .type-secondary { background-color: #fff; - border: 1px solid #137D60; + border: 1px solid #137d60; color: #229174; } .type-secondary[disabled] { - border-color: #E9E9E9; - color: #E9E9E9; + border-color: #e9e9e9; + color: #e9e9e9; } .type-segment { background-color: transparent; border: 1px solid transparent; - color: #2A2A2A; + color: #2a2a2a; font-size: 12px; font-weight: normal; } .type-segment-selected { - border: 1px solid #7F7F7F; - background-color: #7F7F7F; + border: 1px solid #7f7f7f; + background-color: #7f7f7f; color: #fff; font-size: 12px; font-weight: normal; } .type-segment[disabled] { - color: #E9E9E9; + color: #e9e9e9; } .type-primary[disabled], .type-warning[disabled], .type-segment-selected[disabled] { - background-color: #E9E9E9; - border-color: #E9E9E9; + background-color: #e9e9e9; + border-color: #e9e9e9; } diff --git a/src/components/DataItem/styles.module.scss b/src/components/DataItem/styles.module.scss index 78b71dc9..cf2750e1 100644 --- a/src/components/DataItem/styles.module.scss +++ b/src/components/DataItem/styles.module.scss @@ -1,13 +1,19 @@ @import "styles/include"; .data-item { - align-items: center; + align-items: flex-start; display: flex; flex-direction: row; + svg { + margin-top: 4px; + } } .data { margin-left: 16px; + display: flex; + flex-direction: column; + flex-basis: 90%; } .title { @@ -16,7 +22,6 @@ letter-spacing: 0.5px; line-height: 16px; text-align: left; - white-space: nowrap; } .value { @@ -25,5 +30,5 @@ font-weight: 500; margin-top: 2px; text-align: left; - white-space: nowrap; + word-break: break-all; } diff --git a/src/components/DateInput/index.jsx b/src/components/DateInput/index.jsx new file mode 100644 index 00000000..916080e1 --- /dev/null +++ b/src/components/DateInput/index.jsx @@ -0,0 +1,34 @@ +/** + * DateInput + * + * Date Input control. + */ +import React from "react"; +import PT from "prop-types"; +import DatePicker from "react-datepicker"; +import "./styles.module.scss"; + +const DateInput = (props) => { + return ( +
+ +
+ ); +}; + +DateInput.propTypes = { + value: PT.string, + onChange: PT.func.isRequired, + placeholder: PT.string, + onBlur: PT.func, + onFocus: PT.func, +}; + +export default DateInput; diff --git a/src/components/DateInput/styles.module.scss b/src/components/DateInput/styles.module.scss new file mode 100644 index 00000000..6d2904a4 --- /dev/null +++ b/src/components/DateInput/styles.module.scss @@ -0,0 +1,11 @@ +@import "styles/include"; + +.datepicker-wrapper { + & > div { + width: 100%; + } +} + +.datepicker-wrapper > div:nth-child(2) > div:nth-child(2) { + z-index: 100; +} diff --git a/src/components/FormField/index.jsx b/src/components/FormField/index.jsx new file mode 100644 index 00000000..e7b281cc --- /dev/null +++ b/src/components/FormField/index.jsx @@ -0,0 +1,119 @@ +/** + * FormField + * + * FormField Component. + */ +import React from "react"; +import PT from "prop-types"; +import { Field } from "react-final-form"; +import { FORM_FIELD_TYPE } from "../../constants"; +import TextInput from "../../components/TextInput"; +import TextArea from "../../components/TextArea"; +import ReactSelect from "../../components/ReactSelect"; +import DateInput from "../../components/DateInput"; +import "./styles.module.scss"; + +const FormField = ({ field, isGroupField }) => { + return ( + + {({ input, meta }) => ( +
+ { !field.readonly && ( + + )} + {field.type === FORM_FIELD_TYPE.TEXT && ( + + )} + {field.type === FORM_FIELD_TYPE.NUMBER && ( + + )} + {field.type === FORM_FIELD_TYPE.TEXTAREA && ( +