Skip to content

Commit 9dfe994

Browse files
NewtonLCutsab
andauthored
fix(UI): enhancements to the admin dashboard page issue #532 (#535)
* Feature: Enhancements to the Admin Dashboard Page Co-Authored By: Carly Thomas <[email protected]> * Address review comment: Consolidate styling code, dynamically generate footer Co-Authored By: Carly Thomas <[email protected]> * Address review comment: Consolidate styling code, dynamically generate footer Updated adminTable testing snapshot Co-Authored By: Carly Thomas <[email protected]> * Fixed pathing issue with redirect user * Added CSS file for Admin Dashboard * Updated test snapshot --------- Co-authored-by: Utsab Saha <[email protected]>
1 parent c1adcb3 commit 9dfe994

File tree

4 files changed

+259
-97
lines changed

4 files changed

+259
-97
lines changed

__tests__/components/__snapshots__/adminTable.test.jsx.snap

Lines changed: 94 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -2,69 +2,38 @@
22

33
exports[`AdminTable displays 3 rows of data with expected column names: name, email, role, action 1`] = `
44
<table
5+
className="table"
56
role="table"
6-
style={
7-
{
8-
"border": "solid 1px #0a0a23",
9-
"fontFamily": "monospace",
10-
"margin": "auto",
11-
"width": "100%",
12-
}
13-
}
147
>
158
<thead>
169
<tr
1710
role="row"
1811
>
1912
<th
13+
className="headerCell"
2014
colSpan={1}
2115
role="columnheader"
22-
style={
23-
{
24-
"borderBottom": "solid 3px grey",
25-
"color": "black",
26-
"fontWeight": "bold",
27-
}
28-
}
2916
>
3017
Name
3118
</th>
3219
<th
20+
className="headerCell"
3321
colSpan={1}
3422
role="columnheader"
35-
style={
36-
{
37-
"borderBottom": "solid 3px grey",
38-
"color": "black",
39-
"fontWeight": "bold",
40-
}
41-
}
4223
>
43-
UserEmail
24+
Email
4425
</th>
4526
<th
27+
className="headerCell"
4628
colSpan={1}
4729
role="columnheader"
48-
style={
49-
{
50-
"borderBottom": "solid 3px grey",
51-
"color": "black",
52-
"fontWeight": "bold",
53-
}
54-
}
5530
>
5631
Role
5732
</th>
5833
<th
34+
className="headerCell"
5935
colSpan={1}
6036
role="columnheader"
61-
style={
62-
{
63-
"borderBottom": "solid 3px grey",
64-
"color": "black",
65-
"fontWeight": "bold",
66-
}
67-
}
6837
>
6938
Actions
7039
</th>
@@ -74,54 +43,47 @@ exports[`AdminTable displays 3 rows of data with expected column names: name, em
7443
role="rowgroup"
7544
>
7645
<tr
46+
className="row"
7747
role="row"
7848
>
7949
<td
50+
className="cell"
8051
role="cell"
8152
style={
8253
{
83-
"border": "solid 1px 0px grey",
84-
"padding": "10px",
85-
"textAlign": "center",
8654
"width": "20%",
8755
}
8856
}
8957
>
9058
Hamzat Victor
9159
</td>
9260
<td
61+
className="cell"
9362
role="cell"
9463
style={
9564
{
96-
"border": "solid 1px 0px grey",
97-
"padding": "10px",
98-
"textAlign": "center",
9965
"width": "20%",
10066
}
10167
}
10268
>
10369
10470
</td>
10571
<td
72+
className="cell"
10673
role="cell"
10774
style={
10875
{
109-
"border": "solid 1px 0px grey",
110-
"padding": "10px",
111-
"textAlign": "center",
11276
"width": "20%",
11377
}
11478
}
11579
>
11680
ADMIN
11781
</td>
11882
<td
83+
className="cell"
11984
role="cell"
12085
style={
12186
{
122-
"border": "solid 1px 0px grey",
123-
"padding": "10px",
124-
"textAlign": "center",
12587
"width": "20%",
12688
}
12789
}
@@ -137,54 +99,47 @@ exports[`AdminTable displays 3 rows of data with expected column names: name, em
13799
</td>
138100
</tr>
139101
<tr
102+
className="row"
140103
role="row"
141104
>
142105
<td
106+
className="cell"
143107
role="cell"
144108
style={
145109
{
146-
"border": "solid 1px 0px grey",
147-
"padding": "10px",
148-
"textAlign": "center",
149110
"width": "20%",
150111
}
151112
}
152113
>
153114
Alade Christopher
154115
</td>
155116
<td
117+
className="cell"
156118
role="cell"
157119
style={
158120
{
159-
"border": "solid 1px 0px grey",
160-
"padding": "10px",
161-
"textAlign": "center",
162121
"width": "20%",
163122
}
164123
}
165124
>
166125
167126
</td>
168127
<td
128+
className="cell"
169129
role="cell"
170130
style={
171131
{
172-
"border": "solid 1px 0px grey",
173-
"padding": "10px",
174-
"textAlign": "center",
175132
"width": "20%",
176133
}
177134
}
178135
>
179136
TEACHER
180137
</td>
181138
<td
139+
className="cell"
182140
role="cell"
183141
style={
184142
{
185-
"border": "solid 1px 0px grey",
186-
"padding": "10px",
187-
"textAlign": "center",
188143
"width": "20%",
189144
}
190145
}
@@ -200,54 +155,47 @@ exports[`AdminTable displays 3 rows of data with expected column names: name, em
200155
</td>
201156
</tr>
202157
<tr
158+
className="row"
203159
role="row"
204160
>
205161
<td
162+
className="cell"
206163
role="cell"
207164
style={
208165
{
209-
"border": "solid 1px 0px grey",
210-
"padding": "10px",
211-
"textAlign": "center",
212166
"width": "20%",
213167
}
214168
}
215169
>
216170
Ayomide onifade
217171
</td>
218172
<td
173+
className="cell"
219174
role="cell"
220175
style={
221176
{
222-
"border": "solid 1px 0px grey",
223-
"padding": "10px",
224-
"textAlign": "center",
225177
"width": "20%",
226178
}
227179
}
228180
>
229181
230182
</td>
231183
<td
184+
className="cell"
232185
role="cell"
233186
style={
234187
{
235-
"border": "solid 1px 0px grey",
236-
"padding": "10px",
237-
"textAlign": "center",
238188
"width": "20%",
239189
}
240190
}
241191
>
242192
TEACHER
243193
</td>
244194
<td
195+
className="cell"
245196
role="cell"
246197
style={
247198
{
248-
"border": "solid 1px 0px grey",
249-
"padding": "10px",
250-
"textAlign": "center",
251199
"width": "20%",
252200
}
253201
}
@@ -263,5 +211,78 @@ exports[`AdminTable displays 3 rows of data with expected column names: name, em
263211
</td>
264212
</tr>
265213
</tbody>
214+
<tfoot>
215+
<tr>
216+
<td
217+
className="footer"
218+
colSpan="4"
219+
>
220+
<div
221+
className="paginationContainer"
222+
>
223+
<label>
224+
Rows per page:
225+
<select
226+
onChange={[Function]}
227+
value={10}
228+
>
229+
<option
230+
value={3}
231+
>
232+
3
233+
</option>
234+
</select>
235+
</label>
236+
<span
237+
className="paginationInfo"
238+
>
239+
1
240+
-
241+
3
242+
of
243+
3
244+
</span>
245+
<button
246+
className="paginationButton paginationButtonDisabled"
247+
disabled={true}
248+
onClick={[Function]}
249+
>
250+
|
251+
<b>
252+
&lt;
253+
</b>
254+
</button>
255+
<button
256+
className="paginationButton paginationButtonDisabled"
257+
disabled={true}
258+
onClick={[Function]}
259+
>
260+
<b>
261+
&lt;
262+
</b>
263+
</button>
264+
<button
265+
className="paginationButton paginationButtonDisabled"
266+
disabled={true}
267+
onClick={[Function]}
268+
>
269+
<b>
270+
&gt;
271+
</b>
272+
</button>
273+
<button
274+
className="paginationButton paginationButtonDisabled"
275+
disabled={true}
276+
onClick={[Function]}
277+
>
278+
<b>
279+
&gt;
280+
</b>
281+
|
282+
</button>
283+
</div>
284+
</td>
285+
</tr>
286+
</tfoot>
266287
</table>
267288
`;

0 commit comments

Comments
 (0)