Skip to content

Commit f185c5a

Browse files
one-communityone-community
authored
Merge pull request #4535 from OneCommunityGlobal/chirag-tool-status-filter-and-sort-dropdown-addition
Chirag tool status filter and sort dropdown addition
2 parents 9ec8333 + eb69592 commit f185c5a

7 files changed

Lines changed: 232 additions & 52 deletions

File tree

‎public/index.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,13 +171,21 @@ body.bm-dashboard-dark .table {
171171
}
172172

173173
body.dark-mode .table th,
174-
body.dark-mode .table td,
174+
body.dark-mode .table td {
175+
color: #ffffff !important;
176+
border-color: #3a506b;
177+
}
178+
175179
body.bm-dashboard-dark .table th,
176180
body.bm-dashboard-dark .table td {
177181
color: #ffffff !important;
178182
border-color: #3a506b;
179183
}
180184

185+
body.bm-dashboard-dark .table th{
186+
background-color: #2e5061 !important;
187+
}
188+
181189
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
182190
body.bm-dashboard-dark .table-striped > tbody > tr:nth-of-type(odd) {
183191
background-color: rgba(46, 80, 97, 0.5);

‎src/components/BMDashboard/ItemList/ItemListView.module.css‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
table thead th, table td {
2+
vertical-align: middle !important;
3+
}
4+
15
.itemsListContainer {
26
width: 100%;
37
max-width: 1536px;
@@ -24,6 +28,10 @@
2428
height: 2rem;
2529
}
2630

31+
.itemsCell td{
32+
vertical-align: middle;
33+
}
34+
2735
.itemsCell button {
2836
cursor: pointer;
2937
}
@@ -52,8 +60,7 @@
5260

5361
.selectInput label {
5462
font-weight: bold;
55-
text-align: right;
56-
min-width: 100px;
63+
text-align: center;
5764
white-space: nowrap;
5865
margin-bottom: 8px;
5966
}
@@ -62,7 +69,7 @@
6269
.selectInput select {
6370
height: 38px;
6471
width: 100%;
65-
min-width: 220px;
72+
min-width: 180px;
6673
max-width: 240px;
6774
padding: 5px;
6875
border: 1px solid #ccc;

‎src/components/BMDashboard/ItemList/SelectForm.jsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
import { Form, FormGroup, Label, Input } from 'reactstrap';
22
import styles from './ItemListView.module.css';
33

4-
export default function SelectForm({ items, setSelectedProject, setSelectedItem }) {
4+
export default function SelectForm({
5+
items,
6+
setSelectedProject,
7+
setSelectedItem,
8+
setSelectedCondition,
9+
setSelectedToolStatus,
10+
}) {
511
let projectsSet = [];
612
if (items.length) {
713
projectsSet = [...new Set(items.map(el => el.project?.name))];
814
}
915

1016
const handleChange = event => {
1117
setSelectedItem('all');
18+
setSelectedCondition('all');
19+
setSelectedToolStatus('all');
1220
setSelectedProject(event.target.value);
1321
};
1422

‎src/components/BMDashboard/ItemList/SelectItem.jsx‎

Lines changed: 52 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,44 +6,72 @@ export default function SelectItem({
66
selectedProject,
77
selectedItem,
88
setSelectedItem,
9+
selectedToolStatus,
10+
setSelectedToolStatus,
11+
selectedCondition,
12+
setSelectedCondition,
913
label,
1014
}) {
1115
let itemSet = [];
1216
if (items?.length) {
13-
if (selectedProject === 'all') {
14-
itemSet = [
15-
...new Set(
16-
items
17-
.filter(m => m.itemType?.name) // Filter out items with null/undefined names
18-
.map(m => m.itemType.name),
19-
),
20-
];
21-
} else {
22-
itemSet = [
23-
...new Set(
24-
items
25-
.filter(mat => mat.project?.name === selectedProject && mat.itemType?.name)
26-
.map(m => m.itemType.name),
27-
),
28-
];
17+
if (label === 'Tool') {
18+
if (selectedProject === 'all') {
19+
itemSet = [...new Set(items.filter(m => m.itemType?.name).map(m => m.itemType.name))];
20+
} else {
21+
itemSet = [
22+
...new Set(
23+
items
24+
.filter(mat => mat.project?.name === selectedProject && mat.itemType?.name)
25+
.map(m => m.itemType.name),
26+
),
27+
];
28+
}
29+
} else if (label === 'Tool Status') {
30+
itemSet = ['Using', 'Available', 'Under Maintenance'];
31+
} else if (label === 'Condition') {
32+
if (selectedProject === 'all') {
33+
itemSet = [...new Set(items.filter(m => m.condition).map(m => m.condition))];
34+
} else {
35+
itemSet = [
36+
...new Set(
37+
items
38+
.filter(mat => mat.project?.name === selectedProject && mat.condition)
39+
.map(m => m.condition),
40+
),
41+
];
42+
}
2943
}
3044
}
3145

3246
return (
3347
<Form>
34-
<FormGroup className={`${styles.selectInput}`}>
35-
<Label htmlFor="select-material" style={{ marginLeft: '10px' }}>
36-
{label ? `${label}:` : 'Material:'}
37-
</Label>
48+
<FormGroup className={styles.selectInput}>
49+
<Label htmlFor="select-material">{label ? `${label}:` : 'Material:'}</Label>
50+
3851
<Input
3952
id="select-item"
4053
name="select-item"
4154
type="select"
42-
value={selectedItem}
43-
onChange={e => setSelectedItem(e.target.value)}
44-
disabled={!items.length}
55+
value={
56+
label === 'Condition'
57+
? selectedCondition
58+
: label === 'Tool Status'
59+
? selectedToolStatus
60+
: selectedItem
61+
}
62+
onChange={e => {
63+
const val = e.target.value;
64+
if (label === 'Tool Status') {
65+
setSelectedToolStatus(val);
66+
} else if (label === 'Condition') {
67+
setSelectedCondition(val);
68+
} else {
69+
setSelectedItem(val);
70+
}
71+
}}
72+
disabled={!itemSet.length}
4573
>
46-
{items.length ? (
74+
{itemSet.length ? (
4775
<>
4876
<option value="all" key="all-option">
4977
All

‎src/components/BMDashboard/ToolItemList/ToolItemListView.jsx‎

Lines changed: 90 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,75 @@ export function ToolItemListView({
1616
const [filteredItems, setFilteredItems] = useState(items);
1717
const [selectedProject, setSelectedProject] = useState('all');
1818
const [selectedItem, setSelectedItem] = useState('all');
19+
const [selectedToolStatus, setSelectedToolStatus] = useState('all');
20+
const [selectedCondition, setSelectedCondition] = useState('all');
1921
const [isError, setIsError] = useState(false);
2022

23+
useEffect(() => {
24+
try {
25+
const sp = sessionStorage.getItem('toolsSelectedProject');
26+
const si = sessionStorage.getItem('toolsSelectedItem');
27+
const sts = sessionStorage.getItem('toolsSelectedStatus');
28+
const sc = sessionStorage.getItem('toolsSelectedCondition');
29+
30+
if (sp) setSelectedProject(sp);
31+
if (si) setSelectedItem(si);
32+
if (sts) setSelectedToolStatus(sts);
33+
if (sc) setSelectedCondition(sc);
34+
} catch (e) {}
35+
}, []);
36+
37+
// Save filters / sort whenever they change
38+
useEffect(() => {
39+
try {
40+
sessionStorage.setItem('toolsSelectedProject', selectedProject);
41+
sessionStorage.setItem('toolsSelectedItem', selectedItem);
42+
sessionStorage.setItem('toolsSelectedStatus', selectedToolStatus);
43+
sessionStorage.setItem('toolsSelectedCondition', selectedCondition);
44+
} catch (e) {
45+
// ignore
46+
}
47+
}, [selectedProject, selectedItem, selectedToolStatus, selectedCondition]);
48+
2149
useEffect(() => {
2250
if (items) setFilteredItems([...items]);
2351
}, [items]);
2452

2553
useEffect(() => {
26-
let filterItems;
2754
if (!items) return;
28-
if (selectedProject === 'all' && selectedItem === 'all') {
29-
setFilteredItems([...items]);
30-
} else if (selectedProject !== 'all' && selectedItem === 'all') {
31-
filterItems = items.filter(item => item.project?.name === selectedProject);
32-
setFilteredItems([...filterItems]);
33-
} else if (selectedProject === 'all' && selectedItem !== 'all') {
34-
filterItems = items.filter(item => item.itemType?.name === selectedItem);
35-
setFilteredItems([...filterItems]);
36-
} else {
37-
filterItems = items.filter(
38-
item => item.project?.name === selectedProject && item.itemType?.name === selectedItem,
39-
);
40-
setFilteredItems([...filterItems]);
55+
56+
let filterItems = [...items];
57+
58+
if (selectedProject !== 'all') {
59+
filterItems = filterItems.filter(item => item.project?.name === selectedProject);
60+
}
61+
62+
if (selectedItem !== 'all') {
63+
filterItems = filterItems.filter(item => item.itemType?.name === selectedItem);
64+
}
65+
66+
if (selectedToolStatus !== 'all') {
67+
filterItems = filterItems.filter(item => {
68+
if (selectedToolStatus === 'Using') {
69+
return item.itemType?.using?.includes(item._id);
70+
} else if (selectedToolStatus === 'Available') {
71+
return (
72+
item.itemType?.available?.includes(item._id) &&
73+
item.condition !== 'Lost' &&
74+
item.condition !== 'Needs Replacing'
75+
);
76+
} else if (selectedToolStatus === 'Under Maintenance') {
77+
return item.condition === 'Worn' || item.condition === 'Damaged';
78+
}
79+
});
80+
}
81+
82+
if (selectedCondition !== 'all') {
83+
filterItems = filterItems.filter(item => item.condition === selectedCondition);
4184
}
42-
}, [selectedProject, selectedItem, items]);
85+
86+
setFilteredItems(filterItems);
87+
}, [items, selectedProject, selectedItem, selectedToolStatus, selectedCondition]);
4388

4489
useEffect(() => {
4590
setIsError(Object.entries(errors).length > 0);
@@ -64,21 +109,51 @@ export function ToolItemListView({
64109
items={items}
65110
setSelectedProject={setSelectedProject}
66111
setSelectedItem={setSelectedItem}
112+
setSelectedCondition={setSelectedCondition}
113+
setSelectedToolStatus={setSelectedToolStatus}
67114
/>
68115
<SelectItem
69116
items={items}
70117
selectedProject={selectedProject}
71118
selectedItem={selectedItem}
72119
setSelectedItem={setSelectedItem}
120+
selectedToolStatus={selectedToolStatus}
121+
setSelectedToolStatus={setSelectedToolStatus}
122+
selectedCondition={selectedCondition}
123+
setSelectedCondition={setSelectedCondition}
73124
label="Tool"
74125
/>
126+
<SelectItem
127+
items={items}
128+
selectedProject={selectedProject}
129+
selectedItem={selectedItem}
130+
setSelectedItem={setSelectedItem}
131+
selectedToolStatus={selectedToolStatus}
132+
setSelectedToolStatus={setSelectedToolStatus}
133+
selectedCondition={selectedCondition}
134+
setSelectedCondition={setSelectedCondition}
135+
label="Tool Status"
136+
/>
137+
<SelectItem
138+
items={items}
139+
selectedProject={selectedProject}
140+
selectedItem={selectedItem}
141+
setSelectedItem={setSelectedItem}
142+
selectedToolStatus={selectedToolStatus}
143+
setSelectedToolStatus={setSelectedToolStatus}
144+
selectedCondition={selectedCondition}
145+
setSelectedCondition={setSelectedCondition}
146+
label="Condition"
147+
/>
75148
</>
76149
)}
77150
</span>
78151
{filteredItems && (
79152
<ToolItemsTable
80153
selectedProject={selectedProject}
81154
selectedItem={selectedItem}
155+
selectedToolStatus={selectedToolStatus}
156+
selectedCondition={selectedCondition}
82157
filteredItems={filteredItems}
83158
UpdateItemModal={UpdateItemModal}
84159
dynamicColumns={dynamicColumns}

‎src/components/BMDashboard/ToolItemList/ToolItemListView.module.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
.itemsTableContainer {
99
overflow-x: scroll;
10+
align-items: center;
1011
}
1112

1213
.itemsListContainer section {
@@ -20,7 +21,7 @@
2021
font-size: small;
2122
}
2223

23-
.itemsListContainer th {
24+
.itemsTable th {
2425
height: 2rem;
2526
}
2627

@@ -47,8 +48,8 @@
4748
}
4849

4950
.conditionCell {
50-
padding-left: 15px;
51+
vertical-align: middle;
5152
display: flex;
5253
gap: 20px;
53-
justify-content: flex-start;
54+
justify-content: center;
5455
}

0 commit comments

Comments
 (0)