fix: issue #120

src/components/TCForm/utils.js

@@ -2,29 +2,9 @@
  * TC Form utilty
  */
 import _ from "lodash";
+import { getSelectOptionByValue } from "utils/helpers";
 import { FORM_FIELD_TYPE } from "../../constants";
 
-/**
- * Returns the option from list of option by value
- *
- * @param {any} value value of option
- * @param {[{ label: string, value: any }]} selectOptions list of option
- *
- * @returns {{ label: string, value: any }} select option
- */
-const getSelectOptionByValue = (value, selectOptions) => {
-  const option = _.find(selectOptions, { value });
-
-  if (!option) {
-    return {
-      label: `Unsuppored value: ${value}`,
-      value,
-    };
-  }
-
-  return option;
-};
-
 /**
  * Extract value from field by type
  * @param {any} value value

src/constants/index.js

@@ -266,6 +266,17 @@ export const WORKLOAD_OPTIONS = [
   { value: "fractional", label: "fractional" },
 ];
 
+/**
+ * resourceType options
+ */
+export const RESOURCE_TYPE_OPTIONS = [
+  { value: null, label: "" },
+  { value: "designer", label: "Designer" },
+  { value: "software-developer", label: "Software Developer" },
+  { value: "data-scientist", label: "Data Scientist" },
+  { value: "data-engineer", label: "Data Engineer" },
+];
+
 /**
  * status options
  */

src/routes/JobDetails/index.jsx

@@ -6,11 +6,13 @@
  */
 import React, { useEffect, useState } from "react";
 import PT from "prop-types";
+import _ from "lodash";
 import Page from "../../components/Page";
 import PageHeader from "../../components/PageHeader";
 import { useData } from "hooks/useData";
 import { getJobById } from "services/jobs";
 import { getSkills } from "services/skills";
+import { getSelectOptionByValue } from "utils/helpers";
 import LoadingIndicator from "../../components/LoadingIndicator";
 import MarkdownEditorViewer from "../../components/MarkdownEditorViewer";
 import withAuthentication from "../../hoc/withAuthentication";
@@ -20,6 +22,7 @@ import IconComputer from "../../assets/images/icon-computer.svg";
 import IconDescription from "../../assets/images/icon-description.svg";
 import IconOpenings from "../../assets/images/icon-openings.svg";
 import Button from "../../components/Button";
+import { RESOURCE_TYPE_OPTIONS } from "../../constants";
 import { formatDate } from "utils/format";
 import "./styles.module.scss";
 import { hasPermission } from "utils/permissions";
@@ -82,7 +85,13 @@ const JobDetails = ({ teamId, jobId }) => {
                 {job.duration || "TBD"}
               </DataItem>
               <DataItem title="Resource Type" icon={<IconDescription />}>
-                {job.resourceType}
+                {_.get(
+                  getSelectOptionByValue(
+                    job.resourceType,
+                    RESOURCE_TYPE_OPTIONS
+                  ),
+                  "label"
+                )}
               </DataItem>
               <DataItem
                 title="Resource Rate Frequency"

src/routes/JobForm/utils.js

@@ -7,6 +7,7 @@ import {
   RATE_TYPE_OPTIONS,
   STATUS_OPTIONS,
   WORKLOAD_OPTIONS,
+  RESOURCE_TYPE_OPTIONS,
   FORM_ROW_TYPE,
   FORM_FIELD_TYPE,
 } from "../../constants";
@@ -79,10 +80,9 @@ export const getEditJobConfig = (skillOptions, onSubmit) => {
       },
       {
         label: "Resource Type",
-        type: FORM_FIELD_TYPE.TEXT,
+        type: FORM_FIELD_TYPE.SELECT,
         name: "resourceType",
-        maxLength: 255,
-        placeholder: "Resource Type",
+        selectOptions: RESOURCE_TYPE_OPTIONS,
       },
       {
         label: "Resource Rate Frequency",

src/utils/helpers.js

@@ -17,3 +17,24 @@ export const delay = (duration) =>
   new Promise((resolve) => {
     setTimeout(resolve, duration);
   });
+
+/**
+ * Returns the option from list of option by value
+ *
+ * @param {any} value value of option
+ * @param {[{ label: string, value: any }]} selectOptions list of option
+ *
+ * @returns {{ label: string, value: any }} select option
+ */
+export const getSelectOptionByValue = (value, selectOptions) => {
+  const option = _.find(selectOptions, { value });
+
+  if (!option) {
+    return {
+      label: `Unsuppored value: ${value}`,
+      value,
+    };
+  }
+
+  return option;
+};