Skip to content

Commit 3e43dc9

Browse files
vamsidharpanithivamsidharpanithi
committed
Convert ProjectDetails.css to module.css, add loading state, and enhance table filtering with clear filters button
1 parent 371c041 commit 3e43dc9

10 files changed

Lines changed: 146 additions & 50 deletions

File tree

‎src/components/BMDashboard/Projects/ProjectDetails/LogBar.jsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { v4 as uuidv4 } from 'uuid';
22
import { Button } from 'reactstrap';
33
import { Link } from 'react-router-dom';
4+
import styles from './ProjectDetails.module.css';
45
// button styles for each section
56
const buttonStyles = {
67
dailyLogging: 'green',
@@ -31,9 +32,9 @@ function LogBar(props) {
3132
};
3233

3334
return (
34-
<div className="log-bar">
35+
<div className={styles['log-bar']}>
3536
{Object.keys(buttonStyles).map(section => (
36-
<div key={uuidv4()} className="log-bar__section">
37+
<div key={uuidv4()} className={styles['log-bar__section']}>
3738
<h2>
3839
{(() => {
3940
switch (section) {
@@ -46,18 +47,24 @@ function LogBar(props) {
4647
}
4748
})()}
4849
</h2>
49-
<ul className="log-bar__btn-group">
50+
<ul className={styles['log-bar__btn-group']}>
5051
{buttonLabels[section].name.map((label, index) => (
5152
<li key={uuidv4()}>
5253
{label !== 'Log Issue' ? (
5354
<Link to={buttonLabels[section].url[index]}>
54-
<Button type="button" className={`button button--${buttonStyles[section]}`}>
55+
<Button
56+
type="button"
57+
className={`${styles.button} ${styles[`button--${buttonStyles[section]}`]}`}
58+
>
5559
{label}
5660
</Button>
5761
</Link>
5862
) : (
5963
<Link to={`/bmdashboard/issues/add/${projectId}`}>
60-
<Button type="button" className="button button--maroon">
64+
<Button
65+
type="button"
66+
className={`${styles.button} ${styles['button--maroon']}`}
67+
>
6168
Log Issue
6269
</Button>
6370
</Link>

‎src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialCard.jsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1+
import styles from '../ProjectDetails.module.css';
2+
13
function MaterialCard() {
24
return (
3-
<div className="single-card">
4-
<div className="single-card__img">
5+
<div className={styles['single-card']}>
6+
<div className={styles['single-card__img']}>
57
<img
68
alt=""
79
src="https://www.theforkliftcenter.com/images/forklift-hero-left.png"
810
width="100%"
911
/>
1012
</div>
11-
<div className="single-card__body">
13+
<div className={styles['single-card__body']}>
1214
<h3>Card title</h3>
13-
<div className="single-card__info">Less than ___% left</div>
15+
<div className={styles['single-card__info']}>Less than ___% left</div>
1416
</div>
1517
</div>
1618
);

‎src/components/BMDashboard/Projects/ProjectDetails/Materials/Materials.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import MaterialCard from './MaterialCard';
2+
import styles from '../ProjectDetails.module.css';
23

34
function Materials() {
45
return (
5-
<div className="cards-container__content">
6+
<div className={styles['cards-container__content']}>
67
<MaterialCard />
78
<MaterialCard />
89
<MaterialCard />

‎src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialsDisplay.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { Card } from 'reactstrap';
22
import Materials from './Materials';
3+
import styles from '../ProjectDetails.module.css';
34

45
function MaterialsDisplay() {
56
return (
6-
<Card className="cards-container">
7-
<h2 className="cards-container__header">Materials with quantity less than 20% left</h2>
7+
<Card className={`card ${styles['cards-container']}`}>
8+
<h2>Materials with quantity less than 20% left</h2>
89
<Materials />
910
</Card>
1011
);

‎src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.jsx‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,63 @@
1+
import { useEffect, useState } from 'react';
12
import { useParams } from 'react-router-dom';
2-
import { useSelector } from 'react-redux';
3+
import { useSelector, useDispatch } from 'react-redux';
34
import { Container, Row, Col } from 'reactstrap';
5+
import { fetchBMProjects } from '~/actions/bmdashboard/projectActions';
6+
import Loading from '~/components/common/Loading';
47
import LogBar from './LogBar';
58
import RentedToolsDisplay from './RentedTools/RentedToolsDisplay';
69
import MaterialsDisplay from './Materials/MaterialsDisplay';
710
import ProjectLog from './ProjectLog';
8-
import './ProjectDetails.css';
11+
import styles from './ProjectDetails.module.css';
912

1013
function ProjectDetails() {
1114
const { projectId } = useParams();
15+
const dispatch = useDispatch();
1216
const darkMode = useSelector(state => state.theme.darkMode);
1317
const projects = useSelector(state => state.bmProjects) || [];
18+
const [isLoading, setIsLoading] = useState(true);
1419
const currProject = projects.find(project => String(project._id) === String(projectId));
1520

21+
useEffect(() => {
22+
const fetchProjects = async () => {
23+
setIsLoading(true);
24+
try {
25+
await dispatch(fetchBMProjects());
26+
} finally {
27+
setIsLoading(false);
28+
}
29+
};
30+
fetchProjects();
31+
}, [dispatch, projectId]);
32+
33+
if (isLoading) {
34+
return (
35+
<Container className={`${styles['project-details']} text-center mt-5`}>
36+
<Loading align="center" darkMode={darkMode} />
37+
</Container>
38+
);
39+
}
40+
1641
if (!currProject) {
1742
return (
18-
<Container className="project-details text-center mt-5">
43+
<Container className={`${styles['project-details']} text-center mt-5`}>
1944
<h2 className="text-danger">Project Not Found</h2>
2045
<p>Please check if the project exists or try selecting another project.</p>
2146
</Container>
2247
);
2348
}
2449

2550
return (
26-
<Container fluid className={`${darkMode ? 'project-details-dark' : 'project-details'} `}>
51+
<Container
52+
fluid
53+
className={`${darkMode ? styles['project-details-dark'] : styles['project-details']} `}
54+
>
2755
<Row className="justify-content-center">
2856
<Col xs="12" lg="10">
2957
<h1
30-
className={`${darkMode ? 'project-details-title-dark' : 'project-details-title'} mb-2 `}
58+
className={`${
59+
darkMode ? styles['project-details-title-dark'] : styles['project-details-title']
60+
} mb-2 `}
3161
>
3262
{currProject.name} Dashboard{' '}
3363
</h1>

src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.css renamed to src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.module.css

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,9 @@ background-color: rgb(1, 1, 38);
5353
margin-top: 1em;
5454
}
5555

56-
.log-bar__section h2,
57-
.card.cards-container h2,
58-
.project-log h2 {
56+
.log-bar__section :global(h2),
57+
.cards-container :global(h2),
58+
.project-log :global(h2) {
5959
font-size: 1em;
6060
font-weight: bold;
6161
}
@@ -64,32 +64,32 @@ background-color: rgb(1, 1, 38);
6464
list-style-type: none;
6565
}
6666

67-
.button.btn {
67+
.button {
6868
border: 0;
6969
border-radius: 10px;
7070
margin: 0.1em;
7171
width: 100%;
7272
}
7373

74-
.button.btn:hover {
74+
.button:hover {
7575
outline: auto;
7676
filter: brightness(130%);
7777
}
7878

7979
/* buttons custom colors */
80-
.button.btn.button--green {
80+
.button--green {
8181
background-color: #015d4a;
8282
}
8383

84-
.button.btn.button--blue {
84+
.button--blue {
8585
background-color: #0f6386;
8686
}
8787

88-
.button.btn.button--indigo {
88+
.button--indigo {
8989
background-color: #203844;
9090
}
9191

92-
.button.btn.button--maroon {
92+
.button--maroon {
9393
background-color: #980101;
9494
margin-top: 2em;
9595
}
@@ -106,11 +106,11 @@ background-color: rgb(1, 1, 38);
106106
justify-content: center;
107107
}
108108

109-
.button.btn.btn-secondary {
109+
.button {
110110
width: auto;
111111
}
112112

113-
.button.btn.btn-secondary.button--maroon {
113+
.button.button--maroon {
114114
margin-top: auto;
115115
}
116116
}
@@ -129,17 +129,17 @@ background-color: rgb(1, 1, 38);
129129
flex: auto;
130130
}
131131

132-
.button.btn.btn-secondary {
132+
.button {
133133
width: auto;
134134
}
135135

136-
.button.btn.btn-secondary.button--maroon {
136+
.button.button--maroon {
137137
margin-left: 2em;
138138
}
139139
}
140140

141141
/* styling for containers with cards */
142-
.card.cards-container {
142+
.cards-container {
143143
align-items: center;
144144
margin: 1em 2em;
145145
padding: 1em;
@@ -191,7 +191,7 @@ background-color: rgb(1, 1, 38);
191191
padding: 0.5em;
192192
}
193193

194-
.single-card__body h3 {
194+
.single-card__body :global(h3) {
195195
font-size: 1em;
196196
margin-bottom: -0.2em;
197197
}
@@ -243,17 +243,17 @@ background-color: rgb(1, 1, 38);
243243
white-space: nowrap;
244244
}
245245

246-
.project-log thead {
246+
.project-log :global(thead) {
247247
background-color: transparent;
248248
}
249249

250250
@media (max-width: 768px) {
251-
.project-log td,
252-
.project-log th {
251+
.project-log :global(td),
252+
.project-log :global(th) {
253253
font-size: 0.6em;
254254
}
255255
}
256256

257-
ul.log-bar__btn-group {
257+
.log-bar__btn-group {
258258
padding: 0px;
259259
}

‎src/components/BMDashboard/Projects/ProjectDetails/ProjectLog.jsx‎

Lines changed: 58 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { Card, Table } from 'reactstrap';
1+
import { Card, Table, Button } from 'reactstrap';
22
import React from 'react';
33
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
44
import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons';
5+
import styles from './ProjectDetails.module.css';
56

67
const DummyData = [
78
{
@@ -80,6 +81,21 @@ class ProjectLog extends React.Component {
8081
this.setState({ todaysHrsSearchText: e.target.value });
8182
};
8283

84+
handleClearFilters = () => {
85+
this.setState({
86+
idSearchText: '',
87+
firstNameSearchText: '',
88+
lastNameSearchText: '',
89+
roleSearchText: '',
90+
teamSearchText: '',
91+
currentTaskSearchText: '',
92+
totalHrsSearchText: '',
93+
todaysHrsSearchText: '',
94+
sortColumn: null,
95+
sortDirection: 'asc',
96+
});
97+
};
98+
8399
handleSort = column => {
84100
this.setState(prevState => {
85101
if (prevState.sortColumn === column) {
@@ -196,7 +212,18 @@ class ProjectLog extends React.Component {
196212
return filtered;
197213
};
198214
render() {
199-
const tableRows = this.filteredData().map(person => (
215+
const filteredData = this.filteredData();
216+
const hasActiveFilters =
217+
this.state.idSearchText ||
218+
this.state.firstNameSearchText ||
219+
this.state.lastNameSearchText ||
220+
this.state.roleSearchText ||
221+
this.state.teamSearchText ||
222+
this.state.currentTaskSearchText ||
223+
this.state.totalHrsSearchText ||
224+
this.state.todaysHrsSearchText;
225+
226+
const tableRows = filteredData.map(person => (
200227
<tr key={person.id}>
201228
<th scope="row">{person.id}</th>
202229
<td>{person.firstName}</td>
@@ -210,8 +237,22 @@ class ProjectLog extends React.Component {
210237
));
211238

212239
return (
213-
<Card className="project-log">
214-
<h2>Members working on site today</h2>
240+
<Card className={styles['project-log']}>
241+
<div
242+
style={{
243+
display: 'flex',
244+
justifyContent: 'space-between',
245+
alignItems: 'center',
246+
marginBottom: '1rem',
247+
}}
248+
>
249+
<h2 style={{ margin: 0 }}>Members working on site today</h2>
250+
{hasActiveFilters && (
251+
<Button color="secondary" size="sm" onClick={this.handleClearFilters}>
252+
Clear Filters
253+
</Button>
254+
)}
255+
</div>
215256
<Table hover responsive striped>
216257
<thead>
217258
<tr>
@@ -347,7 +388,19 @@ class ProjectLog extends React.Component {
347388
</td>
348389
</tr>
349390
</thead>
350-
<tbody>{tableRows}</tbody>
391+
<tbody>
392+
{tableRows.length > 0 ? (
393+
tableRows
394+
) : (
395+
<tr>
396+
<td colSpan="8" style={{ textAlign: 'center', padding: '2rem' }}>
397+
<p style={{ margin: 0, color: '#6c757d' }}>
398+
No members match the current filters.
399+
</p>
400+
</td>
401+
</tr>
402+
)}
403+
</tbody>
351404
</Table>
352405
</Card>
353406
);

‎src/components/BMDashboard/Projects/ProjectDetails/RentedTools/RentedToolsDisplay.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import { Card } from 'reactstrap';
22
import ToolCards from './ToolCards';
3+
import styles from '../ProjectDetails.module.css';
34

45
function RentedToolsDisplay() {
56
return (
6-
<Card className="cards-container">
7-
<h2 className="cards-container__header">
8-
Rented Tools or equipment to be returned in 3 days.
9-
</h2>
7+
<Card className={`card ${styles['cards-container']}`}>
8+
<h2>Rented Tools or equipment to be returned in 3 days.</h2>
109
<ToolCards />
1110
</Card>
1211
);

0 commit comments

Comments
 (0)