fix: issue #35

src/routes/MyTeamsDetails/components/TeamPositions/index.jsx

@@ -13,7 +13,7 @@ import "./styles.module.scss";
 import { formatDateRange } from "utils/format";
 import { Link } from "@reach/router";
 
-const TeamPositions = ({ teamId, positions }) => {
+const TeamPositions = ({ teamId, positions, getOpenPositionsLabel }) => {
   return (
     <div styleName="team-positions">
       <div styleName="team-position-header">
@@ -41,6 +41,7 @@ const TeamPositions = ({ teamId, positions }) => {
                     <strong>{position.title}</strong>
                   </Link>
                   <SkillsList skills={position.skills} limit={5} />
+                  <div>{getOpenPositionsLabel(position)}</div>
                 </div>
                 <div styleName="table-group-first-inner">
                   <div styleName="table-cell cell-date">
@@ -78,6 +79,7 @@ const TeamPositions = ({ teamId, positions }) => {
 
 TeamPositions.propTypes = {
   teamId: PT.string,
+  getOpenPositionsLabel: PT.func,
   positions: PT.arrayOf(
     PT.shape({
       title: PT.string,

src/routes/MyTeamsDetails/index.jsx

@@ -11,6 +11,7 @@ import PageHeader from "components/PageHeader";
 import { useData } from "hooks/useData";
 import { getTeamById } from "services/teams";
 import LoadingIndicator from "components/LoadingIndicator";
+import { formatOpenPositions } from "utils/format";
 import TeamSummary from "./components/TeamSummary";
 import TeamMembers from "./components/TeamMembers";
 import TeamPositions from "./components/TeamPositions";
@@ -19,6 +20,10 @@ import withAuthentication from "../../hoc/withAuthentication";
 const MyTeamsDetails = ({ teamId }) => {
   const [team, loadingError] = useData(getTeamById, teamId);
 
+  const getOpenPositionsLabel = (job) => {
+    return formatOpenPositions(job, team.resources);
+  };
+
   return (
     <Page title="Team Details">
       {!team ? (
@@ -28,7 +33,11 @@ const MyTeamsDetails = ({ teamId }) => {
           <PageHeader title={team.name} backTo="/taas/myteams" />
           <TeamSummary team={team} />
           <TeamMembers team={team} />
-          <TeamPositions positions={team.jobs || []} teamId={teamId} />
+          <TeamPositions
+            positions={team.jobs || []}
+            teamId={teamId}
+            getOpenPositionsLabel={getOpenPositionsLabel}
+          />
         </>
       )}
     </Page>

src/utils/format.js

@@ -200,3 +200,27 @@ export const formatPageTitle = (pageTitle) => {
 
   return formattedPageTitle;
 };
+
+/**
+ * Format open positions.
+ *
+ * @param {Object} job job object
+ * @param {Array} resources resource list
+ *
+ * @returns {string} open positions string
+ */
+export const formatOpenPositions = (job, resources) => {
+  const jobs = _.filter(resources, (r) => {
+    return r.jobId === job.id;
+  });
+  if (jobs.length === 0) {
+    if (job.numPositions <= 1) {
+      return `${job.numPositions} open position`;
+    }
+    return `${job.numPositions} open positions`;
+  } else if (job.numPositions === 1) {
+    return `${jobs.length} / ${job.numPositions}  open position`;
+  } else {
+    return `${jobs.length} / ${job.numPositions}  open positions`;
+  }
+};