fix: issue #138

Author: yoution

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}
@@ -86,6 +88,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/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,7 @@ 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

@@ -28,11 +28,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 +46,14 @@ 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,
         placeholder: "Job Description",
       },
       {
@@ -61,19 +64,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 +88,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,
       },
       {