diff --git a/src/components/TCForm/utils.js b/src/components/TCForm/utils.js index 2c5fbcce..bdb33703 100644 --- a/src/components/TCForm/utils.js +++ b/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 diff --git a/src/constants/index.js b/src/constants/index.js index 359d223c..980cfc12 100644 --- a/src/constants/index.js +++ b/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 */ diff --git a/src/routes/JobDetails/index.jsx b/src/routes/JobDetails/index.jsx index 707f9db8..908432f8 100644 --- a/src/routes/JobDetails/index.jsx +++ b/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"} }> - {job.resourceType} + {_.get( + getSelectOptionByValue( + job.resourceType, + RESOURCE_TYPE_OPTIONS + ), + "label" + )} { }, { 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", diff --git a/src/utils/helpers.js b/src/utils/helpers.js index 2a3dcf73..53f24cd2 100644 --- a/src/utils/helpers.js +++ b/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; +};