fixed styles for job-rb

src/components/DataItem/styles.module.scss

@@ -30,4 +30,5 @@
   font-weight: 500;
   margin-top: 2px;
   text-align: left;
+  word-break: break-all;
 }

src/components/DateInput/index.jsx

@@ -8,14 +8,16 @@ import PT from "prop-types";
 import DatePicker from "react-datepicker";
 import "./styles.module.scss";
 
-const DateInput = ({ value, onChange, placeholder }) => {
+const DateInput = (props) => {
   return (
     <div styleName="datepicker-wrapper">
       <DatePicker
         dateFormat="MM/dd/yyyy"
-        placeholderText={placeholder}
-        selected={value}
-        onChange={onChange}
+        placeholderText={props.placeholder}
+        selected={props.value}
+        onChange={props.onChange}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
       />
     </div>
   );
@@ -25,6 +27,8 @@ DateInput.propTypes = {
   value: PT.string,
   onChange: PT.func.isRequired,
   placeholder: PT.string,
+  onBlur: PT.func,
+  onFocus: PT.func,
 };
 
 export default DateInput;

src/components/FormField/index.jsx

@@ -20,7 +20,7 @@ const FormField = ({ field, isGroupField }) => {
         <div styleName={isGroupField ? "field-group-field" : ""}>
           <label
             styleName={
-              input.value
+              input.value || meta.active
                 ? "job-field-label"
                 : "job-field-label job-field-no-label"
             }
@@ -36,8 +36,14 @@ const FormField = ({ field, isGroupField }) => {
               onChange={(v) => {
                 input.onChange(v);
               }}
-              className={meta.error ? "error" : ""}
+              className={meta.error && meta.touched ? "error" : ""}
               readonly={field.readonly}
+              onBlur={(event) => {
+                input.onBlur(event);
+              }}
+              onFocus={(event) => {
+                input.onFocus(event);
+              }}
             />
           )}
           {field.type === FORM_FIELD_TYPE.NUMBER && (
@@ -47,15 +53,27 @@ const FormField = ({ field, isGroupField }) => {
               type="number"
               minValue={field.minValue}
               onChange={input.onChange}
-              className={meta.error ? "error" : ""}
+              onBlur={(event) => {
+                input.onBlur(event);
+              }}
+              onFocus={(event) => {
+                input.onFocus(event);
+              }}
+              className={meta.error && meta.touched ? "error" : ""}
             />
           )}
           {field.type === FORM_FIELD_TYPE.TEXTAREA && (
             <TextArea
               placeholder={field.placeholder}
               value={input?.value ?? ""}
               onChange={input.onChange}
-              className={meta.error ? "error" : ""}
+              onBlur={(event) => {
+                input.onBlur(event);
+              }}
+              onFocus={(event) => {
+                input.onFocus(event);
+              }}
+              className={meta.error && meta.touched ? "error" : ""}
             />
           )}
           {field.type === FORM_FIELD_TYPE.DATE && (
@@ -65,6 +83,12 @@ const FormField = ({ field, isGroupField }) => {
               onChange={(date) => {
                 input.onChange(date);
               }}
+              onBlur={(event) => {
+                input.onBlur(event);
+              }}
+              onFocus={(event) => {
+                input.onFocus(event);
+              }}
             />
           )}
           {field.type === FORM_FIELD_TYPE.SELECT && (
@@ -75,9 +99,15 @@ const FormField = ({ field, isGroupField }) => {
               }}
               options={field.selectOptions}
               isMulti={field.isMulti}
+              onBlur={(event) => {
+                input.onBlur(event);
+              }}
+              onFocus={(event) => {
+                input.onFocus(event);
+              }}
             />
           )}
-          {field.isRequired && meta.error && (
+          {field.isRequired && meta.error &&  meta.touched && (
             <div styleName="field-error">{meta.error}</div>
           )}
         </div>

src/components/FormField/styles.module.scss

@@ -12,6 +12,7 @@
   top: 12px;
   background: white;
   z-index: 1;
+  padding: 0 3px;
 }
 
 .job-field-no-label {
@@ -21,6 +22,13 @@
 input:not([type="checkbox"]),
 textarea {
   margin-bottom: 0px;
+  &::placeholder {
+    color: #AAAAAA;
+    font-family: Roboto;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: left;
+  }
 }
 
 input:read-only {

src/components/ReactSelect/index.jsx

@@ -8,53 +8,75 @@ import PT from "prop-types";
 import Select from "react-select";
 import "./styles.module.scss";
 
-const ReactSelect = ({
-  value,
-  onChange,
-  placeholder,
-  error,
-  isMulti,
-  options,
-}) => {
+const ReactSelect = (props) => {
   const customStyles = {
     control: (provided, state) => ({
       ...provided,
       minHeight: "36px",
+      borderColor: state.isFocused ? "#55a5ff" : provided.borderColor,
+      boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow
     }),
-    menu: (provided, state) => ({
+    menu: (provided) => ({
       ...provided,
       minHeight: "36px",
       zIndex: 10,
     }),
-    valueContainer: (provided, state) => ({
+    valueContainer: (provided) => ({
       ...provided,
-      padding: "0 6px",
+      padding: "1px 6px",
     }),
-    input: (provided, state) => ({
+    input: (provided) => ({
       ...provided,
       margin: "0px",
-      height: "36px",
+      height: "auto",
+      padding: "0",
+
     }),
-    indicatorSeparator: (state) => ({
+    indicatorSeparator: () => ({
       display: "none",
     }),
-    indicatorsContainer: (provided, state) => ({
+    indicatorsContainer: (provided) => ({
+      ...provided,
+      height: "36px",
+    }),
+    option: (provided) => ({
       ...provided,
-      height: "40px",
+      minHeight: "32px"
     }),
+    placeholder: (provided) => ({
+      ...provided,
+      color: "#AAAAAA",
+      fontFamily: "Roboto",
+      fontSize: "16px",
+      lineHeight: "22px",
+      textAlign: "left",
+      fontWeight: "300"
+    }),
+    multiValue: (provided) => ({
+      ...provided,
+      margin: "4px 4px",
+      color: "#AAAAAA",
+      fontFamily: "Roboto",
+      fontSize: "14px",
+      lineHeight: "22px",
+      textAlign: "left",
+      borderRadius: "5px"
+    })
   };
 
   return (
     <div styleName="select-wrapper">
       <Select
-        value={value}
+        value={props.value}
         styles={customStyles}
         onChange={(val) => {
-          onChange(val);
+          props.onChange(val);
         }}
-        options={options}
-        styleName={error ? "error" : ""}
-        isMulti={isMulti}
+        options={props.options}
+        styleName={props.error ? "error" : ""}
+        isMulti={props.isMulti}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
       />
     </div>
   );
@@ -66,6 +88,8 @@ ReactSelect.propTypes = {
   placeholder: PT.string,
   error: PT.string,
   isMulti: PT.bool,
+  onBlur: PT.func,
+  onFocus: PT.func,
   options: PT.arrayOf(
     PT.shape({
       value: PT.string.isRequired,

src/components/ReactSelect/styles.module.scss

@@ -10,3 +10,11 @@
     box-shadow: none !important;
   }
 }
+
+.react-select__option{
+  min-height: 32px;
+}
+
+input{
+  transition: none !important;
+}

src/components/TCForm/styles.module.scss

@@ -1,6 +1,13 @@
 @import "styles/include";
 @import "~react-datepicker/dist/react-datepicker.css";
 
+
+@media (max-width: 1421px) {
+  .tc-form  > .job-form-fields {
+      padding: 0px !important;
+    }
+}
+
 .tc-form {
   width: 100%;
 
@@ -50,3 +57,4 @@
 .datepicker-wrapper > div:nth-child(2) > div:nth-child(2) {
   z-index: 100;
 }
+

src/components/TextArea/index.jsx

@@ -16,6 +16,8 @@ function TextArea(props) {
       placeholder={props.placeholder}
       value={props.value}
       autoFocus={props.autoFocus}
+      onBlur={props.onBlur}
+      onFocus={props.onFocus}
     />
   );
 }
@@ -31,6 +33,8 @@ TextArea.propTypes = {
   onChange: PT.func,
   placeholder: PT.string,
   value: PT.string.isRequired,
+  onBlur: PT.func,
+  onFocus: PT.func,
 };
 
 export default TextArea;

src/components/TextInput/index.jsx

@@ -31,6 +31,8 @@ function TextInput(props) {
       value={props.value}
       autoFocus={props.autoFocus}
       readOnly={props.readonly ?? false}
+      onBlur={props.onBlur}
+      onFocus={props.onFocus}
     />
   );
 }
@@ -46,6 +48,8 @@ TextInput.propTypes = {
   className: PT.string,
   maxLength: PT.number,
   onChange: PT.func,
+  onBlur: PT.func,
+  onFocus: PT.func,
   placeholder: PT.string,
   value: PT.string.isRequired,
   type: PT.string.isRequired,

src/routes/JobForm/index.jsx

@@ -78,7 +78,7 @@ const JobForm = ({ teamId, jobId }) => {
 
   useEffect(() => {
     if (skills && job && !options) {
-      const skillOptions = skills.map((item) => {
+      const skillOptions = skills.slice(0, 10).map((item) => {
         return {
           value: item.id,
           label: item.name,
@@ -110,7 +110,7 @@ const JobForm = ({ teamId, jobId }) => {
                   : getCreateJobConfig(options, onSubmit)
               }
               initialValue={job}
-              submitButton={{ text: "Save" }}
+              submitButton={{ text: isEdit ? "Save" : "Create" }}
               backButton={{
                 text: "Cancel",
                 backTo: isEdit

src/routes/JobForm/utils.js

@@ -18,6 +18,7 @@ const CREATE_JOB_ROWS = [
   { type: FORM_ROW_TYPE.SINGLE, fields: ["resourceType"] },
   { type: FORM_ROW_TYPE.SINGLE, fields: ["rateType"] },
   { type: FORM_ROW_TYPE.SINGLE, fields: ["workload"] },
+  { type: FORM_ROW_TYPE.SINGLE, fields: ["status"] },
 ];
 
 const EDIT_JOB_ROWS = [
@@ -186,6 +187,14 @@ export const getCreateJobConfig = (skillOptions, onSubmit) => {
         name: "workload",
         selectOptions: WORKLOAD_OPTIONS,
       },
+      {
+        label: "Status",
+        type: FORM_FIELD_TYPE.SELECT,
+        isRequired: true,
+        validationMessage: "Please, select Status",
+        name: "status",
+        selectOptions: STATUS_OPTIONS,
+      },
     ],
     onSubmit: onSubmit,
     rows: CREATE_JOB_ROWS,

src/routes/ResourceBookingForm/utils.js

@@ -27,17 +27,17 @@ export const getEditResourceBookingConfig = (onSubmit) => {
       { readonly: true, type: FORM_FIELD_TYPE.TEXT, name: "title" },
       { readonly: true, type: FORM_FIELD_TYPE.TEXT, name: "handle" },
       {
-        label: "Customer Rate",
+        label: "Client Rate",
         type: FORM_FIELD_TYPE.NUMBER,
         name: "customerRate",
-        minValue: 1,
-        placeholder: "Customer Rate",
+        minValue: 0,
+        placeholder: "Client Rate",
       },
       {
         label: "Member Rate",
         type: FORM_FIELD_TYPE.NUMBER,
         name: "memberRate",
-        minValue: 1,
+        minValue: 0,
         placeholder: "Member Rate",
       },
       {

src/services/jobs.js

@@ -28,6 +28,7 @@ export const getEmptyJob = (teamId) => {
       workload: "full-time",
       rateType: "weekly",
       skills: [],
+      status: "sourcing",
     },
   });
 };