Merge pull request #141 from yoution/issue-138

fix: issue #138

Author: maxceem

src/components/DateInput/index.jsx

@@ -16,6 +16,7 @@ const DateInput = (props) => {
         dateFormat="MM/dd/yyyy"
         placeholderText={props.placeholder}
         selected={props.value}
+        disabled={props.disabled}
         onChange={props.onChange}
         onBlur={props.onBlur}
         onCalendarClose={props.onBlur}
@@ -28,6 +29,7 @@ const DateInput = (props) => {
 DateInput.propTypes = {
   value: PT.string,
   onChange: PT.func.isRequired,
+  disabled: PT.bool,
   placeholder: PT.string,
   onBlur: PT.func,
   onFocus: PT.func,

src/components/FormField/index.jsx

@@ -37,6 +37,7 @@ const FormField = ({ field }) => {
             <TextInput
               maxLength={field.maxLength}
               placeholder={field.placeholder}
+              disabled={field.disabled}
               value={input.value ?? ""}
               type="text"
               className={meta.error && meta.touched ? "error" : ""}
@@ -52,6 +53,7 @@ const FormField = ({ field }) => {
               value={input?.value ?? ""}
               isRequired={field.isRequired}
               type="number"
+              disabled={field.disabled}
               minValue={field.minValue}
               onChange={input.onChange}
               onBlur={input.onBlur}
@@ -64,6 +66,7 @@ const FormField = ({ field }) => {
             <MarkdownEditor
               placeholder={field.placeholder}
               value={input?.value ?? ""}
+              errorMessage={field.errorMessage}
               disabled={field.disabled}
               onChange={input.onChange}
               onBlur={input.onBlur}
@@ -86,6 +89,7 @@ const FormField = ({ field }) => {
               placeholder={field.placeholder}
               value={input?.value ?? ""}
               onChange={input.onChange}
+              disabled={field.disabled}
               onBlur={input.onBlur}
               onFocus={input.onFocus}
               className={meta.error && meta.touched ? "error" : ""}

src/components/MarkdownEditor/index.jsx

@@ -8,7 +8,6 @@ import cn from "classnames";
 import TuiEditor from "../TuiEditor";
 import MarkdownEditorViewer from "../MarkdownEditorViewer";
 import styles from "./styles.module.scss";
-import { DISABLED_DESCRIPTION_MESSAGE } from "constants";
 
 const MarkdownEditor = (props) => {
   const editorElement = useRef(null);
@@ -21,7 +20,9 @@ const MarkdownEditor = (props) => {
     return (
       <div styleName="editor-viewer">
         <MarkdownEditorViewer {...props} />
-        <div styleName="message">{DISABLED_DESCRIPTION_MESSAGE}</div>
+        {props.errorMessage && (
+          <div styleName="message">{props.errorMessage}</div>
+        )}
       </div>
     );
   }
@@ -34,21 +35,21 @@ const MarkdownEditor = (props) => {
         onChange={onChange}
         initialValue={props.value}
         toolbarItems={[
-          'heading',
-          'bold',
-          'italic',
-          'strike',
-          'code',
-          'divider',
-          'quote',
-          'codeblock',
-          'hr',
-          'divider',
-          'ul',
-          'ol',
-          'divider',
-          'image',
-          'link',
+          "heading",
+          "bold",
+          "italic",
+          "strike",
+          "code",
+          "divider",
+          "quote",
+          "codeblock",
+          "hr",
+          "divider",
+          "ul",
+          "ol",
+          "divider",
+          "image",
+          "link",
         ]}
         plugins={[]}
       />
@@ -59,6 +60,7 @@ const MarkdownEditor = (props) => {
 MarkdownEditor.propTypes = {
   value: PropTypes.string,
   disabled: PropTypes.bool,
+  errorMessage: PropTypes.string,
   className: PropTypes.string,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,

src/components/MarkdownEditor/styles.module.scss

@@ -2,13 +2,18 @@
 
 .editor-viewer {
     > div:first-child {
-      border: 1px solid #aaaaab;
+      // border: 1px solid #aaaaab;
       border-radius: 4px;
       overflow: hidden;
       box-sizing: border-box;
       padding: 16px 25px 0px 25px;
       height: 280px;
       overflow-y: auto;
+      border: 0;
+      background: #fafafb;
+      box-shadow: none;
+      color: #6b6b6b;
+      -webkit-text-fill-color: #808080;
     }
     .message {
       @include font-roboto;

src/components/ReactSelect/index.jsx

@@ -14,9 +14,15 @@ const ReactSelect = (props) => {
     control: (provided, state) => ({
       ...provided,
       minHeight: "40px",
-      border: "1px solid #aaaaab",
+      border: state.isDisabled ? "none" : "1px solid #aaaaab",
       borderColor: state.isFocused ? "#55a5ff" : "#aaaaab",
-      boxShadow: state.isFocused ? "0 0 2px 1px #cee6ff" : provided.boxShadow,
+      boxShadow: state.isDisabled
+        ? "none"
+        : state.isFocused
+        ? "0 0 2px 1px #cee6ff"
+        : provided.boxShadow,
+      backgroundColor: state.isDisabled ? "#fafafb" : provided.backgroundColor,
+      color: state.isDisabled ? "#6b6b6b" : provided.color,
     }),
     menu: (provided) => ({
       ...provided,
@@ -53,16 +59,21 @@ const ReactSelect = (props) => {
       textAlign: "left",
       fontWeight: "400",
     }),
-    multiValue: (provided) => ({
+    multiValue: (provided, state) => ({
       ...provided,
       margin: "3px 3px",
-      color: "#AAAAAA",
+      color: state.isDisabled ? "#808080" : "#AAAAAA",
+      paddingRight: state.isDisabled ? "6px" : "0",
       fontFamily: "Roboto",
       fontSize: "14px",
       lineHeight: "22px",
       textAlign: "left",
       borderRadius: "5px",
     }),
+    multiValueRemove: (provided, state) => ({
+      ...provided,
+      display: state.isDisabled ? "none" : provided.display,
+    }),
     dropdownIndicator: () => ({
       display: "none",
     }),

src/components/TextInput/index.jsx

@@ -14,6 +14,7 @@ function TextInput(props) {
       styleName={cn("TextInput", props.className, { readonly: props.readonly })}
       maxLength={props.maxLength}
       min={props.minValue}
+      disabled={props.disabled}
       onChange={(event) => {
         if (props.type === "number") {
           if (event.target.value >= props.minValue) {
@@ -47,6 +48,7 @@ TextInput.defaultProps = {
   maxLength: Number.MAX_VALUE,
   placeholder: "",
   minValue: 0,
+  disabled: false,
   step: null,
 };
 
@@ -58,6 +60,7 @@ TextInput.propTypes = {
   onFocus: PT.func,
   placeholder: PT.string,
   value: PT.string.isRequired,
+  disabled: PT.bool,
   type: PT.string.isRequired,
   readonly: PT.bool,
   minValue: PT.number,

src/routes/JobForm/index.jsx

@@ -108,6 +108,11 @@ const JobForm = ({ teamId, jobId }) => {
               configuration={getEditJobConfig(
                 options,
                 job.isApplicationPageActive,
+                isEdit
+                  ? job.status === "assigned" ||
+                      job.status === "closed" ||
+                      job.status === "cancelled"
+                  : false,
                 onSubmit
               )}
               initialValue={job}

src/routes/JobForm/utils.js

@@ -3,6 +3,7 @@
  */
 import { PERMISSIONS } from "constants/permissions";
 import { hasPermission } from "utils/permissions";
+import { DISABLED_DESCRIPTION_MESSAGE } from "constants";
 import {
   RATE_TYPE_OPTIONS,
   STATUS_OPTIONS,
@@ -28,11 +29,13 @@ const EDIT_JOB_ROWS = [
  * return edit job configuration
  * @param {any} skillOptions skill options
  * @param {boolean} isMarkdownEditorDisabled is markedownEditor disabled
+ * @param {onlyEnableStatus}  only can select status field
  * @param {func} onSubmit submit callback
  */
 export const getEditJobConfig = (
   skillOptions,
   isMarkdownEditorDisabled,
+  onlyEnableStatus,
   onSubmit
 ) => {
   return {
@@ -44,13 +47,15 @@ export const getEditJobConfig = (
         validationMessage: "Please, enter Job Name",
         name: "title",
         maxLength: 128,
+        disabled: onlyEnableStatus,
         placeholder: "Job Name",
       },
       {
         label: "Job Description",
         type: FORM_FIELD_TYPE.MARKDOWNEDITOR,
         name: "description",
-        disabled: isMarkdownEditorDisabled,
+        disabled: isMarkdownEditorDisabled || onlyEnableStatus,
+        errorMessage: isMarkdownEditorDisabled && DISABLED_DESCRIPTION_MESSAGE,
         placeholder: "Job Description",
       },
       {
@@ -61,19 +66,22 @@ export const getEditJobConfig = (
         name: "numPositions",
         minValue: 1,
         placeholder: "Number Of Opening",
+        disabled: onlyEnableStatus,
         step: 1,
       },
       {
         label: "Job Skills",
         type: FORM_FIELD_TYPE.SELECT,
         isMulti: true,
         name: "skills",
+        disabled: onlyEnableStatus,
         selectOptions: skillOptions,
       },
       {
         label: "Start Date",
         type: FORM_FIELD_TYPE.DATE,
         name: "startDate",
+        disabled: onlyEnableStatus,
         placeholder: "Start Date",
       },
       {
@@ -82,24 +90,28 @@ export const getEditJobConfig = (
         name: "duration",
         minValue: 1,
         placeholder: "Duration",
+        disabled: onlyEnableStatus,
         step: 1,
       },
       {
         label: "Resource Type",
         type: FORM_FIELD_TYPE.SELECT,
         name: "resourceType",
+        disabled: onlyEnableStatus,
         selectOptions: RESOURCE_TYPE_OPTIONS,
       },
       {
         label: "Resource Rate Frequency",
         type: FORM_FIELD_TYPE.SELECT,
         name: "rateType",
+        disabled: onlyEnableStatus,
         selectOptions: RATE_TYPE_OPTIONS,
       },
       {
         label: "Workload",
         type: FORM_FIELD_TYPE.SELECT,
         name: "workload",
+        disabled: onlyEnableStatus,
         selectOptions: WORKLOAD_OPTIONS,
       },
       {