Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit 59410d7

Browse files
nikolay83nikolay83
authored
Merge pull request #308 from mbaghel/feature/frontend-submit
Feature/frontend submit
2 parents deded31 + a6c6feb commit 59410d7

File tree

34 files changed

+1210
-471
lines changed

34 files changed

+1210
-471
lines changed

‎src/components/Checkbox/index.jsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from "react";
2+
import PT from "prop-types";
3+
import "./styles.module.scss";
4+
5+
function Checkbox({ label, checked, onClick }) {
6+
return (
7+
<label styleName="container">
8+
{label}
9+
<input type="checkbox" checked={checked} onClick={onClick} />
10+
<span styleName="checkmark"></span>
11+
</label>
12+
);
13+
}
14+
15+
Checkbox.propTypes = {
16+
label: PT.string,
17+
checked: PT.bool,
18+
onClick: PT.func,
19+
};
20+
21+
export default Checkbox;

‎src/components/Checkbox/styles.module.scss

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@import "styles/include";
2+
3+
/* The container */
4+
.container {
5+
@include font-roboto;
6+
color: #2a2a2a;
7+
font-size: 14px;
8+
line-height: 20px;
9+
display: block;
10+
position: relative;
11+
padding-left: 30px;
12+
cursor: pointer;
13+
-webkit-user-select: none;
14+
-moz-user-select: none;
15+
-ms-user-select: none;
16+
user-select: none;
17+
}
18+
19+
/* Hide the browser's default checkbox */
20+
.container input {
21+
position: absolute;
22+
opacity: 0;
23+
cursor: pointer;
24+
height: 0;
25+
width: 0;
26+
}
27+
28+
/* Create a custom checkbox */
29+
.checkmark {
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
height: 20px;
34+
width: 20px;
35+
background-color: #fff;
36+
border: 1px solid #AAA;
37+
border-radius: 3px;
38+
}
39+
40+
/* On mouse-over, add a grey background color */
41+
.container:hover input ~ .checkmark {
42+
background-color: #eee;
43+
}
44+
45+
/* When the checkbox is checked, add a green background */
46+
.container input:checked ~ .checkmark {
47+
background-color: #0AB88A;
48+
box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.29);
49+
}
50+
51+
/* Create the checkmark/indicator (hidden when not checked) */
52+
.checkmark:after {
53+
content: "";
54+
position: absolute;
55+
display: none;
56+
}
57+
58+
/* Show the checkmark when checked */
59+
.container input:checked ~ .checkmark:after {
60+
display: block;
61+
}
62+
63+
/* Style the checkmark/indicator */
64+
.container .checkmark:after {
65+
left: 6px;
66+
top: 3px;
67+
width: 6px;
68+
height: 11px;
69+
border: solid white;
70+
border-width: 0 3px 3px 0;
71+
-webkit-transform: rotate(45deg);
72+
-ms-transform: rotate(45deg);
73+
transform: rotate(45deg);
74+
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.35);
75+
}

‎src/constants/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -250,6 +250,14 @@ export const ACTION_TYPE = {
250250
ADD_MEMBERS_ERROR: "ADD_MEMBERS_ERROR",
251251
RESET_MEMBERS_STATE: "RESET_MEMBERS_STATE",
252252
CLEAR_MEMBERS_SUGGESTIONS: "CLEAR_MEMBERS_SUGGESTIONS",
253+
254+
/*
255+
Searched Roles
256+
*/
257+
CLEAR_SEARCHED_ROLES: "CLEAR_SEARCHED_ROLES",
258+
ADD_SEARCHED_ROLE: "ADD_SEARCHED_ROLE",
259+
ADD_ROLE_SEARCH_ID: "ADD_ROLE_SEARCH_ID",
260+
REPLACE_SEARCHED_ROLES: "REPLACE_SEARCHED_ROLES",
253261
};
254262

255263
/**

‎src/reducers/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ import positionDetailsReducer from "../routes/PositionDetails/reducers";
77
import teamMembersReducer from "../routes/TeamAccess/reducers";
88
import emailPopupReducer from "../components/EmailPopup/reducers";
99
import authUserReducer from "../hoc/withAuthentication/reducers";
10+
import searchedRolesReducer from "../routes/CreateNewTeam/reducers";
1011

1112
const rootReducer = combineReducers({
1213
toastr: toastrReducer,
1314
positionDetails: positionDetailsReducer,
1415
teamMembers: teamMembersReducer,
1516
emailPopup: emailPopupReducer,
1617
authUser: authUserReducer,
18+
searchedRoles: searchedRolesReducer,
1719
});
1820

1921
export default rootReducer;

‎src/root.component.jsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export default function Root() {
3434
<ResourceBookingForm path="/taas/myteams/:teamId/rb/:resourceBookingId/edit" />
3535
<PositionDetails path="/taas/myteams/:teamId/positions/:positionId/candidates" />
3636
<TeamAccess path="/taas/myteams/:teamId/access" />
37-
<InputJobDescription path="/taas/myteams/createnewteam/jd" />
38-
<InputSkills path="/taas/myteams/createnewteam/skills" />
39-
<SelectRole path="/taas/myteams/createnewteam/role" />
37+
<InputJobDescription path="/taas/myteams/createnewteam/jd/*" />
38+
<InputSkills path="/taas/myteams/createnewteam/skills/*" />
39+
<SelectRole path="/taas/myteams/createnewteam/role/*" />
4040
</Router>
4141

4242
{/* Global config for Toastr popups */}

‎src/routes/CreateNewTeam/actions/index.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ACTION_TYPE } from "constants";
2+
3+
export const clearSearchedRoles = () => ({
4+
type: ACTION_TYPE.CLEAR_SEARCHED_ROLES,
5+
});
6+
7+
export const addSearchedRole = (searchedRole) => ({
8+
type: ACTION_TYPE.ADD_SEARCHED_ROLE,
9+
payload: searchedRole,
10+
});
11+
12+
export const addRoleSearchId = (id) => ({
13+
type: ACTION_TYPE.ADD_ROLE_SEARCH_ID,
14+
payload: id,
15+
});
16+
17+
export const replaceSearchedRoles = (roles) => ({
18+
type: ACTION_TYPE.REPLACE_SEARCHED_ROLES,
19+
payload: { roles, lastRoleId: roles[roles.length - 1].searchId },
20+
});

‎src/routes/CreateNewTeam/components/AddAnotherModal/index.jsx

+30-60
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,9 @@
66
*/
77
import React from "react";
88
import PT from "prop-types";
9-
import Modal from "react-responsive-modal";
109
import Button from "components/Button";
11-
import IconCrossLight from "../../../../assets/images/icon-cross-light.svg";
1210
import IconSingleManAdd from "../../../../assets/images/icon-single-man-add.svg";
13-
import "./styles.module.scss";
14-
import CenteredSpinner from "components/CenteredSpinner";
15-
16-
const modalStyle = {
17-
borderRadius: "8px",
18-
padding: "32px 32px 22px 32px",
19-
maxWidth: "460px",
20-
width: "100%",
21-
margin: 0,
22-
"overflow-x": "hidden",
23-
};
24-
25-
const containerStyle = {
26-
padding: "10px",
27-
};
11+
import BaseCreateModal from "../BaseCreateModal";
2812

2913
function AddAnotherModal({
3014
open,
@@ -33,52 +17,38 @@ function AddAnotherModal({
3317
submitDone,
3418
addAnother,
3519
}) {
20+
const buttons = (
21+
<>
22+
<Button
23+
type="secondary"
24+
size="medium"
25+
disabled={!submitDone}
26+
onClick={addAnother}
27+
>
28+
Add Another Position
29+
</Button>
30+
<Button
31+
type="primary"
32+
size="medium"
33+
onClick={onContinueClick}
34+
disabled={!submitDone}
35+
>
36+
Continue
37+
</Button>
38+
</>
39+
);
40+
3641
return (
37-
<Modal
42+
<BaseCreateModal
3843
open={open}
39-
center
4044
onClose={onClose}
41-
closeIcon={
42-
<IconCrossLight height="18px" width="18px" styleName="cross" />
43-
}
44-
styles={{
45-
modal: modalStyle,
46-
modalContainer: containerStyle,
47-
}}
48-
>
49-
<div styleName="modal-body">
50-
{!submitDone ? (
51-
<>
52-
<CenteredSpinner />
53-
<h5>Submitting Request...</h5>
54-
</>
55-
) : (
56-
<>
57-
<IconSingleManAdd />
58-
<h5>Add Another Position</h5>
59-
<p>You can add another position to your request if you want to.</p>
60-
</>
61-
)}
62-
</div>
63-
<div styleName="button-group">
64-
<Button
65-
type="secondary"
66-
size="medium"
67-
disabled={!submitDone}
68-
onClick={addAnother}
69-
>
70-
Add Another Position
71-
</Button>
72-
<Button
73-
type="primary"
74-
size="medium"
75-
onClick={onContinueClick}
76-
disabled={!submitDone}
77-
>
78-
Continue
79-
</Button>
80-
</div>
81-
</Modal>
45+
headerIcon={<IconSingleManAdd />}
46+
title="Add Another Position"
47+
subtitle="You can add another position to your request if you want to."
48+
buttons={buttons}
49+
isLoading={!submitDone}
50+
maxWidth="480px"
51+
/>
8252
);
8353
}
8454

‎src/routes/CreateNewTeam/components/AddAnotherModal/styles.module.scss

-48
This file was deleted.

‎src/routes/CreateNewTeam/components/BaseCreateModal/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ function BaseCreateModal({
6161
) : (
6262
<>
6363
<div styleName={cn("modal-header", { "dark-header": darkHeader })}>
64-
<div styleName="header-icon">{headerIcon}</div>
64+
{headerIcon && <div styleName="header-icon">{headerIcon}</div>}
6565
<h5>{title}</h5>
6666
{subtitle && <p>{subtitle}</p>}
6767
</div>

0 commit comments

Comments
 (0)