diff --git a/src/root.component.jsx b/src/root.component.jsx
index 578361c0..797270ff 100644
--- a/src/root.component.jsx
+++ b/src/root.component.jsx
@@ -11,6 +11,7 @@ import JobForm from "./routes/JobForm";
import TeamAccess from "./routes/TeamAccess";
import CreateNewTeam from "./routes/CreateNewTeam";
import InputSkills from "./routes/CreateNewTeam/pages/InputSkills";
+import InputJobDescription from "./routes/CreateNewTeam/pages/InputJobDescription";
import SelectRole from "./routes/CreateNewTeam/pages/SelectRole";
import ReduxToastr from "react-redux-toastr";
import store from "./store";
@@ -33,6 +34,7 @@ export default function Root() {
+
diff --git a/src/routes/CreateNewTeam/components/Completeness/index.jsx b/src/routes/CreateNewTeam/components/Completeness/index.jsx
index f1b73ee3..df29ba1d 100644
--- a/src/routes/CreateNewTeam/components/Completeness/index.jsx
+++ b/src/routes/CreateNewTeam/components/Completeness/index.jsx
@@ -12,6 +12,7 @@ import CompleteProgress from "../CompleteProgress";
import "./styles.module.scss";
import IconMultipleActionsCheck from "../../../../assets/images/icon-multiple-actions-check-2.svg";
import IconListQuill from "../../../../assets/images/icon-list-quill.svg";
+import IconOfficeFileText from "../../../../assets/images/icon-office-file-text.svg";
function Completeness({
extraStyleName,
@@ -21,6 +22,16 @@ function Completeness({
stages,
percentage,
}) {
+
+ let backgroundIcon
+ if (extraStyleName === "input-skills") {
+ backgroundIcon=
+ } else if (extraStyleName === "input-job-description") {
+ backgroundIcon=
+ } else {
+ backgroundIcon=
+ }
+
return (
@@ -44,11 +55,7 @@ function Completeness({
>
{buttonLabel}
- {extraStyleName === "input-skills" ? (
-
- ) : (
-
- )}
+ {backgroundIcon}
);
}
diff --git a/src/routes/CreateNewTeam/components/Completeness/styles.module.scss b/src/routes/CreateNewTeam/components/Completeness/styles.module.scss
index 4c1e1d5a..3227642c 100644
--- a/src/routes/CreateNewTeam/components/Completeness/styles.module.scss
+++ b/src/routes/CreateNewTeam/components/Completeness/styles.module.scss
@@ -11,6 +11,10 @@
}
}
+.input-job-description {
+ background-image: linear-gradient(135deg, #2984BD 0%, #0AB88A 100%);
+}
+
.input-skills {
background-image: linear-gradient(221.5deg, #2c95d7 0%, #9d41c9 100%);
}
diff --git a/src/routes/CreateNewTeam/index.jsx b/src/routes/CreateNewTeam/index.jsx
index 2ff109dc..62fd1826 100644
--- a/src/routes/CreateNewTeam/index.jsx
+++ b/src/routes/CreateNewTeam/index.jsx
@@ -30,6 +30,10 @@ function CreateNewTeam() {
});
};
+ const goToJobDescription = () => {
+ navigate(`/taas/myteams/createnewteam/jd`);
+ };
+
return (
@@ -55,7 +59,7 @@ function CreateNewTeam() {
description="You would like to use a description to explain what you need."
icon={}
backgroundImage="linear-gradient(135deg, #2984BD 0%, #0AB88A 100%)"
- isDisabled
+ onClick={goToJobDescription}
/>
);
diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/index.jsx b/src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/index.jsx
new file mode 100644
index 00000000..60317253
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/index.jsx
@@ -0,0 +1,80 @@
+/**
+ * Temporary Popup for skill list
+ * show skill list
+ */
+import React from "react";
+import _ from "lodash";
+import PT from "prop-types";
+import Modal from "react-responsive-modal";
+import Button from "components/Button";
+import IconCrossLight from "../../../../../../assets/images/icon-cross-light.svg";
+import IconSingleManAdd from "../../../../../../assets/images/icon-single-man-add.svg";
+import "./styles.module.scss";
+import CenteredSpinner from "components/CenteredSpinner";
+
+const modalStyle = {
+ borderRadius: "8px",
+ padding: "32px 32px 22px 32px",
+ maxWidth: "460px",
+ width: "100%",
+ margin: 0,
+ "overflow-x": "hidden",
+};
+
+const containerStyle = {
+ padding: "10px",
+};
+
+function SkillListPopup({ open, skills, onClose, isLoading, onContinueClick }) {
+ return (
+
+ }
+ styles={{
+ modal: modalStyle,
+ modalContainer: containerStyle,
+ }}
+ >
+
+ {isLoading ? (
+ <>
+
+
loading skills
+
+ ) : (
+ <>
+
+
skills
+ {_.map(skills, (s) => {
+ return
{s.tag}
;
+ })}
+
+ )}
+
+
+
+
+ );
+}
+
+SkillListPopup.propTypes = {
+ open: PT.bool,
+ onClose: PT.func,
+ isLoading: PT.bool,
+ onContinueClick: PT.func,
+ skills: PT.arrayOf(PT.shape()),
+};
+
+export default SkillListPopup;
diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/styles.module.scss b/src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/styles.module.scss
new file mode 100644
index 00000000..b0270326
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/InputJobDescription/components/SkillListPopup/styles.module.scss
@@ -0,0 +1,48 @@
+@import "styles/include";
+
+.button-group {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: flex-end;
+ :first-child {
+ margin-right: 8px;
+ }
+}
+
+.modal-body {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ text-align: center;
+ margin-bottom: 80px;
+
+ svg {
+ width: 48px;
+ height: 48px;
+ margin-bottom: 16px;
+ }
+
+ h5 {
+ @include font-barlow-condensed;
+ font-size: 34px;
+ color: #1e94a3;
+ text-transform: uppercase;
+ font-weight: 500;
+ margin-bottom: 10px;
+ }
+
+ p {
+ @include font-roboto;
+ font-size: 16px;
+ color: #555555;
+ line-height: 26px;
+ }
+}
+
+.cross {
+ g {
+ stroke: #000;
+ }
+}
diff --git a/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx
new file mode 100644
index 00000000..f6bbc2de
--- /dev/null
+++ b/src/routes/CreateNewTeam/pages/InputJobDescription/index.jsx
@@ -0,0 +1,150 @@
+/**
+ * Input Job Description page
+ *
+ */
+import React, { useCallback, useEffect, useState } from "react";
+import { useData } from "hooks/useData";
+import { navigate } from "@reach/router";
+import { toastr } from "react-redux-toastr";
+import { setCurrentStage } from "utils/helpers";
+import Page from "components/Page";
+import PT from "prop-types";
+import PageHeader from "components/PageHeader";
+import LoadingIndicator from "components/LoadingIndicator";
+import MarkdownEditor from "../../../../components/MarkdownEditor";
+import { getSkillsByJobDescription } from "../../../../services/teams";
+import Completeness from "../../components/Completeness";
+import { getSkills } from "services/skills";
+import SearchCard from "../../components/SearchCard";
+import ResultCard from "../../components/ResultCard";
+import AddAnotherModal from "../../components/AddAnotherModal";
+import SkillListPopup from "./components/SkillListPopup";
+import "./styles.module.scss";
+import withAuthentication from "../../../../hoc/withAuthentication";
+import IconOfficeFileText from "../../../../assets/images/icon-office-file-text.svg";
+
+function InputJobDescription() {
+ const [stages, setStages] = useState([
+ { name: "Input Job Desccription", isCurrent: true },
+ { name: "Search Member" },
+ { name: "Overview of the Results" },
+ ]);
+ const [jdString, setJdString] = useState("");
+ const [searchState, setSearchState] = useState(null);
+ const [modalOpen, setModalOpen] = useState(false);
+ const [skillModalOpen, setSkillModalOpen] = useState(false);
+ const [submitDone, setSubmitDone] = useState(false);
+ const [skills, setSkills] = useState([]);
+ const [isLoadingSkills, setIsLoadingSkills] = useState(false);
+
+ const onSearch = useCallback(
+ (value) => {
+ setSkillModalOpen(true);
+ setIsLoadingSkills(true);
+ getSkillsByJobDescription(jdString)
+ .then((response) => {
+ setSkills(response.data);
+ setIsLoadingSkills(false);
+ setSkillModalOpen(true);
+ })
+ .catch(() => {
+ setIsLoadingSkills(false);
+ });
+ },
+ [jdString]
+ );
+
+ const onConfirationClick = useCallback(() => {
+ setSearchState("searching");
+ setCurrentStage(1, stages, setStages);
+ setTimeout(() => {
+ setCurrentStage(2, stages, setStages);
+ setSearchState("done");
+ }, 3000);
+ }, []);
+
+ const addAnother = useCallback(() => {
+ // navigate(`/taas/myteams/createnewteam/${projectId}/role`);
+ }, []);
+
+ const submitJob = () => {
+ setSubmitDone(false);
+ setModalOpen(true);
+ setTimeout(() => {
+ setSubmitDone(true);
+ }, 3000);
+ };
+
+ const onEditChange = useCallback((value) => {
+ setJdString(value);
+ }, []);
+
+ return (
+
+ {!searchState ? (
+
+
+
+
setSkillModalOpen(false)}
+ isLoading={isLoadingSkills}
+ onContinueClick={onConfirationClick}
+ />
+
+ ) : searchState === "searching" ? (
+
+
+
+
+ ) : (
+
+
+
+
setModalOpen(false)}
+ submitDone={submitDone}
+ addAnother={addAnother}
+ />
+
+ )}
+