Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 3721e52

Browse files
dashu-babadashu-baba
committed
fixed styles for job-rb
1 parent 7c9a7be commit 3721e52

File tree

13 files changed

+137
-36
lines changed

13 files changed

+137
-36
lines changed

‎src/components/DataItem/styles.module.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,5 @@
3030
font-weight: 500;
3131
margin-top: 2px;
3232
text-align: left;
33+
word-break: break-all;
3334
}

‎src/components/DateInput/index.jsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,16 @@ import PT from "prop-types";
88
import DatePicker from "react-datepicker";
99
import "./styles.module.scss";
1010

11-
const DateInput = ({ value, onChange, placeholder }) => {
11+
const DateInput = (props) => {
1212
return (
1313
<div styleName="datepicker-wrapper">
1414
<DatePicker
1515
dateFormat="MM/dd/yyyy"
16-
placeholderText={placeholder}
17-
selected={value}
18-
onChange={onChange}
16+
placeholderText={props.placeholder}
17+
selected={props.value}
18+
onChange={props.onChange}
19+
onBlur={props.onBlur}
20+
onFocus={props.onFocus}
1921
/>
2022
</div>
2123
);
@@ -25,6 +27,8 @@ DateInput.propTypes = {
2527
value: PT.string,
2628
onChange: PT.func.isRequired,
2729
placeholder: PT.string,
30+
onBlur: PT.func,
31+
onFocus: PT.func,
2832
};
2933

3034
export default DateInput;

‎src/components/FormField/index.jsx

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const FormField = ({ field, isGroupField }) => {
2020
<div styleName={isGroupField ? "field-group-field" : ""}>
2121
<label
2222
styleName={
23-
input.value
23+
input.value || meta.active
2424
? "job-field-label"
2525
: "job-field-label job-field-no-label"
2626
}
@@ -36,8 +36,14 @@ const FormField = ({ field, isGroupField }) => {
3636
onChange={(v) => {
3737
input.onChange(v);
3838
}}
39-
className={meta.error ? "error" : ""}
39+
className={meta.error && meta.touched ? "error" : ""}
4040
readonly={field.readonly}
41+
onBlur={(event) => {
42+
input.onBlur(event);
43+
}}
44+
onFocus={(event) => {
45+
input.onFocus(event);
46+
}}
4147
/>
4248
)}
4349
{field.type === FORM_FIELD_TYPE.NUMBER && (
@@ -47,15 +53,27 @@ const FormField = ({ field, isGroupField }) => {
4753
type="number"
4854
minValue={field.minValue}
4955
onChange={input.onChange}
50-
className={meta.error ? "error" : ""}
56+
onBlur={(event) => {
57+
input.onBlur(event);
58+
}}
59+
onFocus={(event) => {
60+
input.onFocus(event);
61+
}}
62+
className={meta.error && meta.touched ? "error" : ""}
5163
/>
5264
)}
5365
{field.type === FORM_FIELD_TYPE.TEXTAREA && (
5466
<TextArea
5567
placeholder={field.placeholder}
5668
value={input?.value ?? ""}
5769
onChange={input.onChange}
58-
className={meta.error ? "error" : ""}
70+
onBlur={(event) => {
71+
input.onBlur(event);
72+
}}
73+
onFocus={(event) => {
74+
input.onFocus(event);
75+
}}
76+
className={meta.error && meta.touched ? "error" : ""}
5977
/>
6078
)}
6179
{field.type === FORM_FIELD_TYPE.DATE && (
@@ -65,6 +83,12 @@ const FormField = ({ field, isGroupField }) => {
6583
onChange={(date) => {
6684
input.onChange(date);
6785
}}
86+
onBlur={(event) => {
87+
input.onBlur(event);
88+
}}
89+
onFocus={(event) => {
90+
input.onFocus(event);
91+
}}
6892
/>
6993
)}
7094
{field.type === FORM_FIELD_TYPE.SELECT && (
@@ -75,9 +99,15 @@ const FormField = ({ field, isGroupField }) => {
7599
}}
76100
options={field.selectOptions}
77101
isMulti={field.isMulti}
102+
onBlur={(event) => {
103+
input.onBlur(event);
104+
}}
105+
onFocus={(event) => {
106+
input.onFocus(event);
107+
}}
78108
/>
79109
)}
80-
{field.isRequired && meta.error && (
110+
{field.isRequired && meta.error && meta.touched && (
81111
<div styleName="field-error">{meta.error}</div>
82112
)}
83113
</div>

‎src/components/FormField/styles.module.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
top: 12px;
1313
background: white;
1414
z-index: 1;
15+
padding: 0 3px;
1516
}
1617

1718
.job-field-no-label {
@@ -21,6 +22,13 @@
2122
input:not([type="checkbox"]),
2223
textarea {
2324
margin-bottom: 0px;
25+
&::placeholder {
26+
color: #AAAAAA;
27+
font-family: Roboto;
28+
font-size: 14px;
29+
line-height: 22px;
30+
text-align: left;
31+
}
2432
}
2533

2634
input:read-only {

‎src/components/ReactSelect/index.jsx

Lines changed: 45 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,53 +8,75 @@ import PT from "prop-types";
88
import Select from "react-select";
99
import "./styles.module.scss";
1010

11-
const ReactSelect = ({
12-
value,
13-
onChange,
14-
placeholder,
15-
error,
16-
isMulti,
17-
options,
18-
}) => {
11+
const ReactSelect = (props) => {
1912
const customStyles = {
2013
control: (provided, state) => ({
2114
...provided,
2215
minHeight: "36px",
16+
borderColor: state.isFocused ? "#55a5ff" : provided.borderColor,
17+
boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow
2318
}),
24-
menu: (provided, state) => ({
19+
menu: (provided) => ({
2520
...provided,
2621
minHeight: "36px",
2722
zIndex: 10,
2823
}),
29-
valueContainer: (provided, state) => ({
24+
valueContainer: (provided) => ({
3025
...provided,
31-
padding: "0 6px",
26+
padding: "1px 6px",
3227
}),
33-
input: (provided, state) => ({
28+
input: (provided) => ({
3429
...provided,
3530
margin: "0px",
36-
height: "36px",
31+
height: "auto",
32+
padding: "0",
33+
3734
}),
38-
indicatorSeparator: (state) => ({
35+
indicatorSeparator: () => ({
3936
display: "none",
4037
}),
41-
indicatorsContainer: (provided, state) => ({
38+
indicatorsContainer: (provided) => ({
39+
...provided,
40+
height: "36px",
41+
}),
42+
option: (provided) => ({
4243
...provided,
43-
height: "40px",
44+
minHeight: "32px"
4445
}),
46+
placeholder: (provided) => ({
47+
...provided,
48+
color: "#AAAAAA",
49+
fontFamily: "Roboto",
50+
fontSize: "16px",
51+
lineHeight: "22px",
52+
textAlign: "left",
53+
fontWeight: "300"
54+
}),
55+
multiValue: (provided) => ({
56+
...provided,
57+
margin: "4px 4px",
58+
color: "#AAAAAA",
59+
fontFamily: "Roboto",
60+
fontSize: "14px",
61+
lineHeight: "22px",
62+
textAlign: "left",
63+
borderRadius: "5px"
64+
})
4565
};
4666

4767
return (
4868
<div styleName="select-wrapper">
4969
<Select
50-
value={value}
70+
value={props.value}
5171
styles={customStyles}
5272
onChange={(val) => {
53-
onChange(val);
73+
props.onChange(val);
5474
}}
55-
options={options}
56-
styleName={error ? "error" : ""}
57-
isMulti={isMulti}
75+
options={props.options}
76+
styleName={props.error ? "error" : ""}
77+
isMulti={props.isMulti}
78+
onBlur={props.onBlur}
79+
onFocus={props.onFocus}
5880
/>
5981
</div>
6082
);
@@ -66,6 +88,8 @@ ReactSelect.propTypes = {
6688
placeholder: PT.string,
6789
error: PT.string,
6890
isMulti: PT.bool,
91+
onBlur: PT.func,
92+
onFocus: PT.func,
6993
options: PT.arrayOf(
7094
PT.shape({
7195
value: PT.string.isRequired,

‎src/components/ReactSelect/styles.module.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,11 @@
1010
box-shadow: none !important;
1111
}
1212
}
13+
14+
.react-select__option{
15+
min-height: 32px;
16+
}
17+
18+
input{
19+
transition: none !important;
20+
}

‎src/components/TCForm/styles.module.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
@import "styles/include";
22
@import "~react-datepicker/dist/react-datepicker.css";
33

4+
5+
@media (max-width: 1421px) {
6+
.tc-form > .job-form-fields {
7+
padding: 0px !important;
8+
}
9+
}
10+
411
.tc-form {
512
width: 100%;
613

@@ -50,3 +57,4 @@
5057
.datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {
5158
z-index: 100;
5259
}
60+

‎src/components/TextArea/index.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@ function TextArea(props) {
1616
placeholder={props.placeholder}
1717
value={props.value}
1818
autoFocus={props.autoFocus}
19+
onBlur={props.onBlur}
20+
onFocus={props.onFocus}
1921
/>
2022
);
2123
}
@@ -31,6 +33,8 @@ TextArea.propTypes = {
3133
onChange: PT.func,
3234
placeholder: PT.string,
3335
value: PT.string.isRequired,
36+
onBlur: PT.func,
37+
onFocus: PT.func,
3438
};
3539

3640
export default TextArea;

‎src/components/TextInput/index.jsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ function TextInput(props) {
3131
value={props.value}
3232
autoFocus={props.autoFocus}
3333
readOnly={props.readonly ?? false}
34+
onBlur={props.onBlur}
35+
onFocus={props.onFocus}
3436
/>
3537
);
3638
}
@@ -46,6 +48,8 @@ TextInput.propTypes = {
4648
className: PT.string,
4749
maxLength: PT.number,
4850
onChange: PT.func,
51+
onBlur: PT.func,
52+
onFocus: PT.func,
4953
placeholder: PT.string,
5054
value: PT.string.isRequired,
5155
type: PT.string.isRequired,

‎src/routes/JobForm/index.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const JobForm = ({ teamId, jobId }) => {
7878

7979
useEffect(() => {
8080
if (skills && job && !options) {
81-
const skillOptions = skills.map((item) => {
81+
const skillOptions = skills.slice(0, 10).map((item) => {
8282
return {
8383
value: item.id,
8484
label: item.name,
@@ -110,7 +110,7 @@ const JobForm = ({ teamId, jobId }) => {
110110
: getCreateJobConfig(options, onSubmit)
111111
}
112112
initialValue={job}
113-
submitButton={{ text: "Save" }}
113+
submitButton={{ text: isEdit ? "Save" : "Create" }}
114114
backButton={{
115115
text: "Cancel",
116116
backTo: isEdit

‎src/routes/JobForm/utils.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ const CREATE_JOB_ROWS = [
1818
{ type: FORM_ROW_TYPE.SINGLE, fields: ["resourceType"] },
1919
{ type: FORM_ROW_TYPE.SINGLE, fields: ["rateType"] },
2020
{ type: FORM_ROW_TYPE.SINGLE, fields: ["workload"] },
21+
{ type: FORM_ROW_TYPE.SINGLE, fields: ["status"] },
2122
];
2223

2324
const EDIT_JOB_ROWS = [
@@ -186,6 +187,14 @@ export const getCreateJobConfig = (skillOptions, onSubmit) => {
186187
name: "workload",
187188
selectOptions: WORKLOAD_OPTIONS,
188189
},
190+
{
191+
label: "Status",
192+
type: FORM_FIELD_TYPE.SELECT,
193+
isRequired: true,
194+
validationMessage: "Please, select Status",
195+
name: "status",
196+
selectOptions: STATUS_OPTIONS,
197+
},
189198
],
190199
onSubmit: onSubmit,
191200
rows: CREATE_JOB_ROWS,

‎src/routes/ResourceBookingForm/utils.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,17 @@ export const getEditResourceBookingConfig = (onSubmit) => {
2727
{ readonly: true, type: FORM_FIELD_TYPE.TEXT, name: "title" },
2828
{ readonly: true, type: FORM_FIELD_TYPE.TEXT, name: "handle" },
2929
{
30-
label: "Customer Rate",
30+
label: "Client Rate",
3131
type: FORM_FIELD_TYPE.NUMBER,
3232
name: "customerRate",
33-
minValue: 1,
34-
placeholder: "Customer Rate",
33+
minValue: 0,
34+
placeholder: "Client Rate",
3535
},
3636
{
3737
label: "Member Rate",
3838
type: FORM_FIELD_TYPE.NUMBER,
3939
name: "memberRate",
40-
minValue: 1,
40+
minValue: 0,
4141
placeholder: "Member Rate",
4242
},
4343
{

‎src/services/jobs.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const getEmptyJob = (teamId) => {
2828
workload: "full-time",
2929
rateType: "weekly",
3030
skills: [],
31+
status: "sourcing",
3132
},
3233
});
3334
};

0 commit comments

Comments
 (0)