Skip to content

Commit 3826437

Browse files
Agnes-NAgnes-N
committed
171648125-approval-table: add approval table
- add approval table UI. [Finishes#171648125]
1 parent 5735837 commit 3826437

31 files changed

+976
-4
lines changed

‎.eslintrc.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"]}],
2323
"jsx-a11y/control-has-associated-label": [0],
2424
"jsx-a11y/anchor-is-valid": [0],
25-
"react/jsx-props-no-spreading": 0
25+
"react/jsx-props-no-spreading": 0,
26+
"jsx-a11y/click-events-have-key-events": [0]
2627
}
27-
}
28+
}

‎package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
"eslint-plugin-prettier": "^3.1.3",
4343
"eslint-plugin-react": "^7.20.0",
4444
"eslint-plugin-react-hooks": "^2.5.0",
45+
"file-loader": "^6.0.0",
4546
"html-webpack-plugin": "^4.3.0",
4647
"jest": "^26.0.1",
4748
"moxios": "^0.4.0",
@@ -80,6 +81,7 @@
8081
"redux": "^4.0.5",
8182
"redux-devtools-extension": "^2.13.8",
8283
"redux-logger": "^3.0.6",
83-
"redux-thunk": "^2.3.0"
84+
"redux-thunk": "^2.3.0",
85+
"simple-flexbox": "^2.3.1"
8486
}
8587
}

‎src/Assets/DashboardAssets/home_icon.svg

+10
Loading

‎src/Assets/DashboardAssets/left.png

1.85 KB
Loading

‎src/Assets/DashboardAssets/notification_icon.svg

+10
Loading

‎src/Assets/DashboardAssets/profile_icon.svg

+10
Loading

‎src/Assets/DashboardAssets/right.png

1.83 KB
Loading

‎src/Assets/DashboardAssets/settings_icon.svg

+10
Loading

‎src/Assets/DashboardAssets/trip_icon.svg

+10
Loading

‎src/Assets/DashboardAssets/user.svg

+9
Loading

‎src/Assets/DashboardAssets/users_icon.svg

+10
Loading

‎src/Assets/leave.svg

47.9 KB
Loading

‎src/Assets/tripImage.svg

+9
Loading

‎src/Assets/user.svg

+9
Loading

‎src/Components/App.jsx

+2
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import Protected from "./Shared/ProtectedRoute/ProtectedRoute.jsx";
1313
import EmailVerificationResponse from "./Shared/EmailVerificationResponse/EmailVerificationResponse.jsx";
1414
import ResetPasswordComponent from "./Auth/ForgetPassword/ResetPassword/ResetPassword.jsx";
1515
import ChangePassword from "./Auth/ForgetPassword/ChangePassword/ChangePassword.jsx";
16+
import ApprovalTableComponent from "./ApprovalTable/approvalTable.jsx";
1617

1718
toast.configure();
1819

@@ -36,6 +37,7 @@ const App = () => (
3637
component={ResetPasswordComponent}
3738
/>
3839
<Route exact path="/reset-password" component={ChangePassword} />
40+
<Route exact path="/approval" component={ApprovalTableComponent} />
3941
</Switch>
4042
</Router>
4143
</div>

‎src/Components/ApprovalTable/approvalTable.jsx

+232
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
import React, { Component } from "react";
2+
import { connect } from "react-redux";
3+
import PropTypes from "prop-types";
4+
5+
import Sidebar from "../Shared/Dashboard/Sidebar/Sidebar.jsx";
6+
import Header from "../Shared/Dashboard/Header/Header.jsx";
7+
import "./approvalTable.scss";
8+
import tripImage from "../../Assets/tripImage.svg";
9+
import user from "../../Assets/user.svg";
10+
import { approvalResponse } from "../../Redux/Actions/ApprovalTable/approvalTableAction.js";
11+
12+
/**
13+
* This class contains methods
14+
* for accepting or rejecting component
15+
*/
16+
export class ApprovalTable extends Component {
17+
/**
18+
* This method has a constructor which calls super() method
19+
* and initialize state object
20+
* @param {object} props props passed to this class.
21+
* @returns {void}
22+
*/
23+
constructor(props) {
24+
super(props);
25+
this.state = {
26+
status: ""
27+
};
28+
}
29+
30+
/**
31+
* This method handles onChange event.
32+
* @param {object} event event information.
33+
* @returns {void}
34+
*/
35+
onChange = event => {
36+
const { name, value } = event.target;
37+
this.setState({
38+
[name]: value
39+
});
40+
};
41+
42+
/**
43+
* This method handles onSubmit event.
44+
* @param {object} event event information.
45+
* @returns {void}
46+
*/
47+
handleSubmit = event => {
48+
event.preventDefault();
49+
const { ApprovalTableAction } = this.props;
50+
const { status } = this.state;
51+
const form = {
52+
status
53+
};
54+
ApprovalTableAction(form);
55+
};
56+
57+
/**
58+
* This method renders content in the DOM
59+
* @returns {JSX} to be rendered on the screen
60+
*/
61+
62+
render() {
63+
const { status } = this.state;
64+
return (
65+
<div className="container">
66+
<Header />
67+
<Sidebar />
68+
69+
<section className="content-section">
70+
<div className="approval-table">
71+
<div className="approval-table__site-title">
72+
<h3>Assigned Trips</h3>
73+
<hr />
74+
</div>
75+
76+
<div className="page-filter">
77+
<div className="page-filter__filter-by-status">
78+
<span className="page-filter__filter-text">Filter</span>
79+
<select>
80+
<option>Status</option>
81+
<option>Pending</option>
82+
<option>Rejected</option>
83+
<option>Accepted</option>
84+
</select>
85+
</div>
86+
</div>
87+
88+
<div className="approval-item">
89+
<div className="approval-item__item-space">
90+
<img src={tripImage} alt="profile" />
91+
92+
<div className="approval-item__reason">
93+
<h5>Going to visit my parent</h5>
94+
<div className="approval-item__destination">
95+
<span className="approval-item__from">
96+
<span className="approval-item__label">From:</span> Kigali
97+
branch
98+
</span>
99+
<span className="approval-item__to">
100+
<span className="approval-item__label">To:</span> New York
101+
</span>
102+
</div>
103+
<div className="approval-item__date">Date: 12 Dec 2020</div>
104+
</div>
105+
106+
<div className="approval-item__button">
107+
<button
108+
type="button"
109+
className="approval-item__button--btn-primary"
110+
onClick={status}
111+
>
112+
Accept
113+
</button>
114+
<button
115+
type="button"
116+
className="approval-item__button--btn-danger"
117+
onClick={status}
118+
>
119+
Reject
120+
</button>
121+
</div>
122+
123+
<div className="item-details">
124+
<img
125+
src={user}
126+
alt="profile"
127+
className="item-details__profile-picture"
128+
/>
129+
130+
<div className="item-details__text">
131+
<h4>Kalisa Arsene</h4>
132+
<span className="item-details__requester">Requester</span>
133+
<br />
134+
<span className="item-details__email">
135+
[email protected]
136+
</span>
137+
<br />
138+
<span className="item-details__department">
139+
IT Department
140+
</span>
141+
<br />
142+
</div>
143+
</div>
144+
</div>
145+
</div>
146+
147+
<div className="approval-item">
148+
<div className="approval-item__item-space">
149+
<img src={tripImage} alt="profile" />
150+
151+
<div className="approval-item__reason">
152+
<h5>Going to visit my parent</h5>
153+
<div className="approval-item__destination">
154+
<span className="approval-item__from">
155+
<span className="approval-item__label">From:</span> Kigali
156+
branch
157+
</span>
158+
<span className="approval-item__to">
159+
<span className="approval-item__label">To:</span> New York
160+
</span>
161+
</div>
162+
<div className="approval-item__date">Date: 12 Dec 2020</div>
163+
</div>
164+
165+
<div className="approval-item__button">
166+
<button
167+
type="button"
168+
className="approval-item__button--btn-primary"
169+
onClick={status}
170+
>
171+
Accept
172+
</button>
173+
<button
174+
type="button"
175+
className="approval-item__button--btn-danger"
176+
onClick={status}
177+
>
178+
Reject
179+
</button>
180+
</div>
181+
182+
<div className="item-details">
183+
<img
184+
src={user}
185+
alt="profile"
186+
className="item-details__profile-picture"
187+
/>
188+
189+
<div className="item-details__text">
190+
<h4>Kalisa Arsene</h4>
191+
<span className="item-details__requester">Requester</span>
192+
<br />
193+
<span className="item-details__email">
194+
[email protected]
195+
</span>
196+
<br />
197+
<span className="item-details__department">
198+
IT Department
199+
</span>
200+
<br />
201+
</div>
202+
</div>
203+
</div>
204+
</div>
205+
</div>
206+
</section>
207+
</div>
208+
);
209+
}
210+
}
211+
212+
ApprovalTable.propTypes = {
213+
ApprovalTableAction: PropTypes.func.isRequired
214+
// status: PropTypes.string,
215+
// loading: PropTypes.bool
216+
};
217+
218+
ApprovalTable.defaultProps = {
219+
// status: "",
220+
// loading: false
221+
};
222+
223+
export const mapStateToProps = state => ({
224+
status: state.approvalResponse.status,
225+
loading: state.approvalResponse.loading
226+
});
227+
228+
export const mapDispatchToProps = dispatch => ({
229+
ApprovalTableAction: form => dispatch(approvalResponse(form))
230+
});
231+
232+
export default connect(mapStateToProps, mapDispatchToProps)(ApprovalTable);

0 commit comments

Comments
 (0)