Skip to content

Commit 4732d63

Browse files
one-communityone-community
authored
Merge pull request #4757 from OneCommunityGlobal/Swathi-Functionality_for_Add_Material_and_Material_Dropdown
Swathi functionalities for Materials Page
2 parents d0d9999 + 0376cbd commit 4732d63

25 files changed

Lines changed: 857 additions & 316 deletions

‎src/actions/bmdashboard/invTypeActions.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ import GET_MATERIAL_TYPES, {
2121
UPDATE_INVENTORY_TYPE_ERROR,
2222
DELETE_INVENTORY_TYPE_SUCCESS,
2323
DELETE_INVENTORY_TYPE_ERROR,
24+
POST_UPDATE_NAME_AND_UNIT_SUCCESS,
25+
POST_UPDATE_NAME_AND_UNIT_FAILURE,
26+
GET_ITEM_UPDATE_HISTORY
2427
} from '../../constants/bmdashboard/inventoryTypeConstants';
2528
import {
2629
POST_TOOLS_LOG,
@@ -139,6 +142,7 @@ export const setPostErrorBuildingInventoryTypeResult = payload => {
139142
};
140143
};
141144

145+
142146
export const fetchMaterialTypes = () => {
143147
return async dispatch => {
144148
axios
@@ -395,3 +399,48 @@ export const deleteInventoryType = (invtypeId, category) => {
395399
}
396400
};
397401
};
402+
export const updateNameAndUnitResult = payload =>{
403+
return{
404+
type : POST_UPDATE_NAME_AND_UNIT_SUCCESS,
405+
payload
406+
}
407+
};
408+
export const setUpdateNamwAndUnitError = payload => {
409+
return {
410+
type: POST_UPDATE_NAME_AND_UNIT_FAILURE,
411+
payload
412+
}
413+
}
414+
export const updateNameAndUnit = (id,payload) => {
415+
return async dispatch => {
416+
axios
417+
.put(ENDPOINTS.BM_UPDATE_NAME_AND_UNIT(id), payload)
418+
.then(res => {
419+
dispatch(updateNameAndUnitResult(res.data));
420+
})
421+
.catch(err => {
422+
dispatch(
423+
setUpdateNamwAndUnitError(JSON.stringify(err.response.data) || 'Sorry! Some error occurred!',
424+
),
425+
);
426+
});
427+
};
428+
};
429+
export const setItemUpdateHistory = payload =>{
430+
return{
431+
type: GET_ITEM_UPDATE_HISTORY,
432+
payload
433+
}
434+
}
435+
export const fetchItemUpdateHistory = (id) => {
436+
return async dispatch => {
437+
axios
438+
.get(ENDPOINTS.BM_ITEM_UPDATE_HISTORY(id))
439+
.then(res => {
440+
dispatch(setItemUpdateHistory(res.data));
441+
})
442+
.catch(err => {
443+
dispatch(setErrors(err));
444+
});
445+
};
446+
};

‎src/components/BMDashboard/AddConsumable/AddConsumable.jsx‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
55
import Joi from 'joi-browser';
66
import { toast } from 'react-toastify';
77
import Select from 'react-select';
8+
import PropTypes from 'prop-types';
89
import { fetchInvUnits } from '../../../actions/bmdashboard/invUnitActions';
910
import {
1011
fetchConsumableTypes,
@@ -13,7 +14,7 @@ import {
1314
} from '../../../actions/bmdashboard/invTypeActions';
1415
import styles from './AddConsumable.module.css';
1516

16-
function AddConsumable() {
17+
function AddConsumable({ toggle }) {
1718
const [newConsumable, setNewConsumable] = useState({
1819
consumableName: '',
1920
consumableDescription: '',
@@ -29,6 +30,7 @@ function AddConsumable() {
2930
const buildingInventoryUnits = useSelector(state => state.bmInvUnits.list);
3031
const postBuildingInventoryResult = useSelector(state => state.bmInvTypes.postedResult);
3132
const selectInputRef = useRef();
33+
const darkMode = useSelector(state => state.theme.darkMode);
3234

3335
useEffect(() => {
3436
dispatch(fetchInvUnits());
@@ -143,27 +145,28 @@ function AddConsumable() {
143145
size: newConsumable.consumableSize,
144146
};
145147
dispatch(postBuildingConsumableType(postObj));
148+
toggle();
146149
}
147150
}
148151

149152
return (
150153
<Container fluid className={`${styles.consumableContainer}`}>
151-
<div className={`${styles.consumablePage}`}>
152-
<div className={`${styles.consumable}`}>
154+
<div className={`${styles.consumablePage} ${darkMode ? styles.darkBg : ''}`}>
155+
<div className={`${styles.consumable} ${darkMode ? styles.lightBg : ''}`}>
153156
<div className={`${styles.consumableTitle}`}>ADD CONSUMABLES FORM</div>
154157
<Card>
155158
<CardBody>
156159
<Form id="AddConsumableForm">
157-
<FormGroup row className="align-items-center justify-content-start">
158-
<Label for="" lg={2} sm={4} className={`${styles.consumableFormLabel}`}>
160+
<FormGroup row className=" justify-content-start">
161+
<Label for="" lg={4} sm={4} className={`${styles.consumableFormLabel}`}>
159162
Item Type
160163
</Label>
161164
<Col lg={8} sm={8} className={`${styles.consumableFormValue}`}>
162165
<Input name="consumable" type="text" value="Consumable" disabled />
163166
</Col>
164167
</FormGroup>
165-
<FormGroup row className="align-items-center justify-content-start">
166-
<Label for="name" lg={2} sm={4} className={`${styles.consumableFormLabel}`}>
168+
<FormGroup row className=" justify-content-start">
169+
<Label for="name" lg={4} sm={4} className={`${styles.consumableFormLabel}`}>
167170
Consumable Name
168171
</Label>
169172
<Col lg={8} sm={8} className={`${styles.consumableFormValue}`}>
@@ -188,8 +191,8 @@ function AddConsumable() {
188191
)}
189192
</FormGroup>
190193

191-
<FormGroup row className="align-items-center justify-content-start">
192-
<Label for="name" lg={2} sm={4} className={`${styles.consumableFormLabel}`}>
194+
<FormGroup row className=" justify-content-start">
195+
<Label for="name" lg={4} sm={4} className={`${styles.consumableFormLabel}`}>
193196
Description
194197
</Label>
195198
<Col lg={8} sm={8} className={`${styles.consumableFormValue}`}>
@@ -214,8 +217,8 @@ function AddConsumable() {
214217
)}
215218
</FormGroup>
216219

217-
<FormGroup row className="align-items-center justify-content-start">
218-
<Label for="name" lg={2} sm={4} className={`${styles.consumableFormLabel}`}>
220+
<FormGroup row className=" justify-content-start">
221+
<Label for="name" lg={4} sm={4} className={`${styles.consumableFormLabel}`}>
219222
Size (optional)
220223
</Label>
221224
<Col lg={8} sm={8} className={`${styles.consumableFormValue}`}>
@@ -240,14 +243,16 @@ function AddConsumable() {
240243
)}
241244
</FormGroup>
242245

243-
<FormGroup row className="align-items-center justify-content-start">
244-
<Label for="unit" lg={2} sm={4} className={`${styles.consumableFormLabel}`}>
246+
<FormGroup row className=" justify-content-start">
247+
<Label for="unit" lg={4} sm={4} className={`${styles.consumableFormLabel}`}>
245248
Measurement
246249
</Label>
247250
<Col lg={8} sm={8}>
248251
<Select
249252
id="unit"
250253
name="unit"
254+
className={darkMode ? styles.select : ''}
255+
classNamePrefix="rs"
251256
onChange={event => unitSelectHandler(event)}
252257
ref={selectInputRef}
253258
options={formattedUnits}
@@ -270,8 +275,8 @@ function AddConsumable() {
270275
</FormGroup>
271276

272277
{allowNewMeasurement && (
273-
<FormGroup row className="align-items-center justify-content-start">
274-
<Label for="name" lg={2} sm={4} className={`${styles.consumableFormLabel}`}>
278+
<FormGroup row className=" justify-content-start">
279+
<Label for="name" lg={4} sm={4} className={`${styles.consumableFormLabel}`}>
275280
New Measurement Unit
276281
</Label>
277282
<Col lg={8} sm={8} className={`${styles.consumableFormValue}`}>
@@ -303,5 +308,7 @@ function AddConsumable() {
303308
</Container>
304309
);
305310
}
306-
311+
AddConsumable.propTypes = {
312+
toggle: PropTypes.func.isRequired,
313+
};
307314
export default AddConsumable;

‎src/components/BMDashboard/AddConsumable/AddConsumable.module.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,31 @@
6060
justify-content: flex-start;
6161
}
6262

63+
.darkBg{
64+
background-color: #2E5061;
65+
}
66+
67+
.lightBg{
68+
background-color: #607D8B;
69+
}
70+
71+
.select :global(.rs__control) {
72+
background-color: #2a3f5f !important;
73+
border: none;
74+
}
75+
.select :global(.rs__menu) {
76+
background-color: #2a3f5f !important;
77+
}
78+
79+
/* Focused */
80+
.select :global(.rs__control--is-focused) {
81+
border-color: #2a3f5f;
82+
box-shadow: 0 0 0 1px #2a3f5f;
83+
}
84+
85+
.select :global(.rs__option--is-focused) {
86+
background-color: #99b2e3;
87+
}
6388
@media (max-width: 780px) {
6489

6590
#AddConsumableForm {

‎src/components/BMDashboard/AddConsumable/AddConsumableModal.jsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
2+
import AddConsumable from './AddConsumable';
3+
import PropTypes from 'prop-types';
4+
5+
export default function AddConsumableModal({ isACOpen, toggle }) {
6+
return (
7+
<Modal isOpen={isACOpen} toggle={toggle} size="md">
8+
<ModalHeader toggle={toggle}>Add Consumable</ModalHeader>
9+
<ModalBody>
10+
<AddConsumable toggle={toggle} />
11+
</ModalBody>
12+
<ModalFooter>
13+
<Button onClick={toggle}>Close</Button>
14+
</ModalFooter>
15+
</Modal>
16+
);
17+
}
18+
AddConsumableModal.propTypes = {
19+
toggle: PropTypes.func.isRequired,
20+
isACOpen: PropTypes.any,
21+
};

‎src/components/BMDashboard/AddConsumable/__tests__/AddConsumable.test.jsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,9 @@ const mockInvUnits = [
3636
const initialState = {
3737
bmInvUnits: { list: mockInvUnits },
3838
bmInvTypes: { postedResult: null },
39+
theme: {
40+
darkMode: false,
41+
},
3942
};
4043

4144
const renderComponent = (customState = {}) => {

‎src/components/BMDashboard/AddMaterial/AddMaterial.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -453,6 +453,7 @@ export default function AddMaterialForm() {
453453
<Label for="currency">Currency</Label>
454454
<Input
455455
id="currency"
456+
className={styles.currency}
456457
type="select"
457458
name="currency"
458459
value={formData.currency}

‎src/components/BMDashboard/AddMaterial/AddMaterial.module.css‎

Lines changed: 65 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,15 +49,15 @@ font-size: .8em;
4949
padding-left: 1em;
5050
margin-top: 1em;
5151
transition: background-color 0.3s ease, color 0.3s ease;
52-
}
53-
54-
.addMaterialCreatedby div{
55-
width: 50%;
52+
gap: 6px;
53+
flex-wrap: wrap;
5654
}
5755

5856
.createdby{
5957
text-align: end;
6058
padding-right: 1em;
59+
word-break: break-all;
60+
overflow-wrap: anywhere;
6161
}
6262

6363
.filePreviewContainer{
@@ -66,6 +66,7 @@ font-size: .8em;
6666
gap: 0.5rem;
6767
width: 100%;
6868
margin-top: 1rem;
69+
6970
}
7071

7172
.materialFormError {
@@ -137,6 +138,10 @@ font-size: .8em;
137138
font-size: 0.9rem;
138139
}
139140

141+
.currency{
142+
width: fit-content;
143+
}
144+
140145
/* ================== DARK MODE STYLES ================== */
141146

142147
/* Only styles for elements with hardcoded light colors not covered by global BMDashboard styles */
@@ -277,3 +282,59 @@ font-size: .8em;
277282
border-bottom-color: #fff !important;
278283
border-top-color: transparent !important;
279284
}
285+
286+
:global(body.dark-mode) .fieldRequired,:global(body.bm-dashboard-dark) .fieldRequired {
287+
color: #F87171 !important;
288+
}
289+
290+
.dragWrapper :global(label) {
291+
background-color: #2a3f5f !important;
292+
}
293+
294+
.phoneDark :global(.react-tel-input .flag-dropdown), .phoneDark :global(.react-tel-input .flag-dropdown.open) {
295+
background-color: #2a3f5f !important;
296+
border-color: #444;
297+
}
298+
299+
.phoneDark :global(.react-tel-input .country-list) {
300+
background-color: #2a3f5f;
301+
border-color: #444;
302+
}
303+
304+
.phoneDark :global(.react-tel-input .country:hover) {
305+
background-color: #514141;
306+
}
307+
308+
.phoneDark :global(.react-tel-input .country.highlight) {
309+
background-color: #4b3737;
310+
}
311+
312+
.phoneDark :global(.react-tel-input .selected-flag) {
313+
background-color: #2a3f5f;
314+
}
315+
316+
.darkBackground{
317+
background-color: #e57373;
318+
}
319+
320+
.darkBackgroundId{
321+
background-color: #4fc3f7;
322+
}
323+
324+
:global(body.dark-mode .form-control) {
325+
background-color: #2a3f5f !important;
326+
}
327+
328+
:global(body.dark-mode select.form-control), :global(body.bm-dashboard-dark select.form-control){
329+
background-image: none !important;
330+
}
331+
332+
:global(body.dark-mode:not(.no-global-theme) select.form-control),
333+
:global(body.bm-dashboard-dark:not(.no-global-theme) select.form-control){
334+
background-image: none !important;
335+
}
336+
337+
:global(.bm-dashboard-dark select){
338+
background-color: #2e5061;
339+
border: none;
340+
}

‎src/components/BMDashboard/AddMaterial/AddMaterialModal.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from 'reactstrap';
2+
import AddMaterialForm from './AddMaterial';
3+
4+
export default function AddMaterialModal({ isAMOpen, toggle }) {
5+
return (
6+
<Modal isOpen={isAMOpen} toggle={toggle} size="md">
7+
<ModalHeader toggle={toggle}>Add Material</ModalHeader>
8+
<ModalBody>
9+
<AddMaterialForm />
10+
</ModalBody>
11+
<ModalFooter>
12+
<Button onClick={toggle}>Close</Button>
13+
</ModalFooter>
14+
</Modal>
15+
);
16+
}

0 commit comments

Comments
 (0)