fix: issue #35

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

@@ -10,10 +10,10 @@ import SkillsList, { skillShape } from "components/SkillsList";
 import Button from "components/Button";
 import { POSITION_STATUS, POSITION_STATUS_TO_TEXT, RATE_TYPE } from "constants";
 import "./styles.module.scss";
-import { formatJobDate } from "utils/format";
+import { formatJobDate, formatOpenPositions } from "utils/format";
 import { Link } from "@reach/router";
 
-const TeamPositions = ({ teamId, positions }) => {
+const TeamPositions = ({ teamId, positions, resources }) => {
   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>{formatOpenPositions(position, resources)}</div>
                 </div>
                 <div styleName="table-group-first-inner">
                   <div styleName="table-cell cell-date">
@@ -89,6 +90,16 @@ TeamPositions.propTypes = {
       status: PT.oneOf(Object.values(POSITION_STATUS)),
     })
   ),
+  resources: PT.arrayOf(
+    PT.shape({
+      id: PT.string,
+      handle: PT.string,
+      firstName: PT.string,
+      lastName: PT.string,
+      skills: PT.arrayOf(skillShape),
+      skillsMatched: PT.number,
+    })
+  ),
 };
 
 export default TeamPositions;

src/routes/MyTeamsDetails/index.jsx

@@ -28,7 +28,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}
+            resources={team.resources}
+          />
         </>
       )}
     </Page>

src/utils/format.js

@@ -201,6 +201,26 @@ 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 jobResources = _.filter(resources, { jobId: job.id });
+  if (jobResources.length === 0) {
+    return `${formatPlural(job.numPositions, "open position")}`;
+  } else {
+    return `${jobResources.length} / ${formatPlural(
+      job.numPositions,
+      "open position"
+    )}`;
+  }
+};
+
 /**
  * Format job date
  *