Skip to content

Commit ce8b8ee

Browse files
one-communityone-community
authored
Merge pull request #4696 from OneCommunityGlobal/593-darkmode-dix-3161
uha optimize darkmode fix
2 parents 2aa77c2 + 0a3625d commit ce8b8ee

File tree

11 files changed

+611
-1110
lines changed

11 files changed

+611
-1110
lines changed

‎src/actions/bmdashboard/consumableActions.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,3 +140,8 @@ export const rejectConsumablePurchase = purchaseId => {
140140
}
141141
};
142142
};
143+
144+
export default {
145+
approveConsumablePurchase,
146+
rejectConsumablePurchase,
147+
};

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

Lines changed: 25 additions & 177 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,12 @@
11
import { useState, useEffect } from 'react';
2-
import { useSelector, useDispatch } from 'react-redux';
32
import PropTypes from 'prop-types';
4-
import DatePicker from 'react-datepicker';
5-
import 'react-datepicker/dist/react-datepicker.css';
3+
import { useSelector } from 'react-redux';
4+
65
import BMError from '../shared/BMError';
76
import SelectForm from './SelectForm';
87
import SelectItem from './SelectItem';
98
import ItemsTable from './ItemsTable';
10-
import UpdateHistoryModal from '../UpdateHistory/UpdateHistoryModal';
119
import styles from './ItemListView.module.css';
12-
import { Form, FormGroup, Label } from 'reactstrap';
13-
import AddMaterialModal from '../AddMaterial/AddMaterialModal';
14-
import {
15-
fetchMaterialTypes,
16-
fetchConsumableTypes,
17-
} from '../../../actions/bmdashboard/invTypeActions';
18-
import EditNameUnitModal from './EditNameUnitModal';
19-
import ViewUpdateHistoryModal from './ViewUpdateHistoryModal';
20-
import AddConsumableModal from '../AddConsumable/AddConsumableModal';
2110

2211
export function ItemListView({
2312
itemType,
@@ -27,29 +16,11 @@ export function ItemListView({
2716
dynamicColumns,
2817
children,
2918
}) {
19+
const darkMode = useSelector(state => state.theme.darkMode);
3020
const [filteredItems, setFilteredItems] = useState(items);
3121
const [selectedProject, setSelectedProject] = useState('all');
3222
const [selectedItem, setSelectedItem] = useState('all');
3323
const [isError, setIsError] = useState(false);
34-
const [selectedTime, setSelectedTime] = useState(new Date());
35-
const [updateHistoryModalOpen, setUpdateHistoryModalOpen] = useState(false);
36-
const darkMode = useSelector(state => state.theme.darkMode);
37-
38-
const toggleUpdateHistoryModal = () => {
39-
setUpdateHistoryModalOpen(prev => !prev);
40-
};
41-
const dispatch = useDispatch();
42-
const materialTypes = useSelector(state => state.bmInvTypes.list);
43-
const consumableTypes = useSelector(state => state.bmInvTypes.consumablesList);
44-
const [isAMOpen, setisAMOpen] = useState(false); //MaterialsPage
45-
const [selectedCondition, setSelectedCondition] = useState('all');
46-
const [selectedToolStatus, setSelectedToolStatus] = useState('all');
47-
const [isEditOpen, setisEditOpen] = useState(false);
48-
const [selectedRow, setSelectedRow] = useState(null);
49-
const [viewUpdate, setViewUpdate] = useState(false);
50-
const [isACOpen, setisACOpen] = useState(false); //Consumables Page
51-
const selectList = itemType === 'Consumables' ? consumableTypes : materialTypes;
52-
const [rowToEdit, setRowtoEdit] = useState(null);
5324

5425
useEffect(() => {
5526
if (items) setFilteredItems([...items]);
@@ -58,17 +29,14 @@ export function ItemListView({
5829
useEffect(() => {
5930
let filterItems;
6031
if (!items) return;
32+
6133
if (selectedProject === 'all' && selectedItem === 'all') {
6234
setFilteredItems([...items]);
6335
} else if (selectedProject !== 'all' && selectedItem === 'all') {
6436
filterItems = items.filter(item => item.project?.name === selectedProject);
6537
setFilteredItems([...filterItems]);
6638
} else if (selectedProject === 'all' && selectedItem !== 'all') {
67-
if (itemType === 'Materials') {
68-
filterItems = items.filter(item => item.name === selectedItem);
69-
} else if (itemType === 'Consumables') {
70-
filterItems = items.filter(item => item.itemType?.name === selectedItem);
71-
}
39+
filterItems = items.filter(item => item.itemType?.name === selectedItem);
7240
setFilteredItems([...filterItems]);
7341
} else {
7442
filterItems = items.filter(
@@ -82,131 +50,44 @@ export function ItemListView({
8250
setIsError(Object.entries(errors).length > 0);
8351
}, [errors]);
8452

85-
useEffect(() => {
86-
if (itemType === 'Materials') dispatch(fetchMaterialTypes());
87-
if (itemType === 'Consumables') dispatch(fetchConsumableTypes());
88-
}, [dispatch, itemType]);
89-
9053
if (isError) {
9154
return (
92-
<main className={`${styles.itemsListContainer} ${darkMode ? styles.darkMode : ''}`}>
93-
<h2>
94-
{itemType}
95-
{' List'}
96-
</h2>
55+
<main className={`${styles.items_list_container} ${darkMode ? 'dark-mode dm-text' : ''}`}>
56+
<h2 className={darkMode ? 'dm-text' : ''}>{itemType} List</h2>
9757
<BMError errors={errors} />
9858
</main>
9959
);
10060
}
10161

102-
const openAddModal = () => {
103-
if (itemType === 'Materials') {
104-
setisAMOpen(true);
105-
} else if (itemType === 'Consumables') {
106-
setisACOpen(true);
107-
}
108-
};
109-
const handleEditClick = () => {
110-
if (!selectedRow) return;
111-
setRowtoEdit(selectedRow); // save for modal
112-
setisEditOpen(true);
113-
setSelectedRow(null);
114-
};
115-
116-
const handleUpdateHistory = () => {
117-
if (!selectedRow) return;
118-
setRowtoEdit(selectedRow);
119-
setViewUpdate(true);
120-
setSelectedRow(null);
121-
};
122-
12362
return (
124-
<main className={`${styles.itemsListContainer} ${darkMode ? styles.darkMode : ''}`}>
125-
<h3>{itemType}</h3>
126-
<section>
127-
<div
128-
style={{ display: 'flex', flexDirection: 'column', gap: '15px', marginBottom: '20px' }}
63+
<main className={`${styles.items_list_container} ${darkMode ? 'dark-mode dm-text' : ''}`}>
64+
<h3 className={darkMode ? 'dm-text dm-heading' : ''}>{itemType}</h3>
65+
66+
<section className={darkMode ? 'dm-bg dm-border dm-section-solid' : ''}>
67+
<span
68+
style={{ display: 'flex', margin: '5px' }}
69+
className={darkMode ? 'dm-bg dm-filter-contrast dm-border dm-text' : ''}
12970
>
13071
{items && (
131-
<div className={`${styles.dropdownRow}`}>
132-
<Form>
133-
<FormGroup className={styles.datePickerGroup}>
134-
<Label htmlFor="itemListTime">Time:</Label>
135-
<DatePicker
136-
selected={selectedTime}
137-
onChange={date => setSelectedTime(date)}
138-
showTimeSelect
139-
timeFormat="HH:mm"
140-
timeIntervals={15}
141-
dateFormat="yyyy-MM-dd HH:mm:ss"
142-
placeholderText="Select date and time"
143-
id="itemListTime"
144-
inputId="itemListTime" // This is the key line
145-
className={darkMode ? styles.darkDatePickerInput : styles.lightDatePickerInput}
146-
calendarClassName={darkMode ? styles.darkDatePicker : styles.lightDatePicker}
147-
popperClassName={
148-
darkMode ? styles.darkDatePickerPopper : styles.lightDatePickerPopper
149-
}
150-
/>
151-
</FormGroup>
152-
</Form>
72+
<>
15373
<SelectForm
15474
items={items}
155-
selectedProject={selectedProject}
15675
setSelectedProject={setSelectedProject}
15776
setSelectedItem={setSelectedItem}
158-
setSelectedCondition={setSelectedCondition}
159-
setSelectedToolStatus={setSelectedToolStatus}
16077
/>
161-
16278
<SelectItem
163-
items={selectList}
164-
selectedItem={selectedItem}
79+
items={items}
16580
selectedProject={selectedProject}
81+
selectedItem={selectedItem}
16682
setSelectedItem={setSelectedItem}
167-
label={itemType}
83+
label={itemType === 'Materials' ? 'Material' : itemType}
84+
darkMode={darkMode}
16885
/>
169-
</div>
86+
</>
17087
)}
88+
</span>
17189

172-
<div className={`${styles.buttonsRow}`}>
173-
<button type="button" className={`${styles.btnPrimary}`} onClick={openAddModal}>
174-
Add {itemType}
175-
</button>
176-
<button type="button" className={`${styles.btnPrimary}`} onClick={handleEditClick}>
177-
Edit Name/Measurement
178-
</button>
179-
<button type="button" className={`${styles.btnPrimary}`} onClick={handleUpdateHistory}>
180-
View Update History
181-
</button>
182-
</div>
183-
</div>
184-
185-
<UpdateHistoryModal
186-
isOpen={updateHistoryModalOpen}
187-
toggle={toggleUpdateHistoryModal}
188-
itemType={itemType}
189-
selectedProject={selectedProject}
190-
/>
191-
192-
{children && (
193-
<div
194-
style={{
195-
display: 'flex',
196-
justifyContent: 'space-between',
197-
alignItems: 'center',
198-
marginBottom: '15px',
199-
flexWrap: 'wrap',
200-
gap: '15px',
201-
backgroundColor: darkMode ? '#2d2d2d' : '#f8f9fa',
202-
padding: '12px 15px',
203-
borderRadius: '6px',
204-
border: darkMode ? '1px solid #444' : '1px solid #dee2e6',
205-
}}
206-
>
207-
{children}
208-
</div>
209-
)}
90+
{children}
21091

21192
{filteredItems && (
21293
<ItemsTable
@@ -217,57 +98,24 @@ export function ItemListView({
21798
dynamicColumns={dynamicColumns}
21899
darkMode={darkMode}
219100
itemType={itemType}
220-
selectedRowId={selectedRow?._id}
221-
onRowSelect={setSelectedRow}
222101
/>
223102
)}
224103
</section>
225-
<section>
226-
<AddMaterialModal isAMOpen={isAMOpen} toggle={() => setisAMOpen(false)} />
227-
</section>
228-
<section>
229-
<EditNameUnitModal
230-
item={rowToEdit}
231-
isOpen={isEditOpen}
232-
toggle={() => setisEditOpen(false)}
233-
/>
234-
</section>
235-
<section>
236-
<ViewUpdateHistoryModal
237-
item={rowToEdit}
238-
isOpen={viewUpdate}
239-
toggle={() => setViewUpdate(false)}
240-
/>
241-
</section>
242-
<section>
243-
<AddConsumableModal isACOpen={isACOpen} toggle={() => setisACOpen(false)} />
244-
</section>
245104
</main>
246105
);
247106
}
248107

249108
ItemListView.propTypes = {
109+
itemType: PropTypes.string.isRequired,
250110
items: PropTypes.arrayOf(
251111
PropTypes.shape({
252-
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
253-
itemType: PropTypes.shape({
254-
name: PropTypes.string,
255-
unit: PropTypes.string,
256-
}),
257-
project: PropTypes.shape({
258-
_id: PropTypes.string,
259-
name: PropTypes.string,
260-
}),
261-
stockAvailable: PropTypes.number,
262-
stockBought: PropTypes.number,
263-
stockUsed: PropTypes.number,
264-
stockWasted: PropTypes.number,
112+
id: PropTypes.number,
113+
name: PropTypes.string,
265114
}),
266115
).isRequired,
267116
errors: PropTypes.shape({
268117
message: PropTypes.string,
269118
}),
270-
itemType: PropTypes.string.isRequired,
271119
UpdateItemModal: PropTypes.elementType.isRequired,
272120
dynamicColumns: PropTypes.arrayOf(
273121
PropTypes.shape({

0 commit comments

Comments
 (0)