Abdulbari/sgeUpdated
1
0
Fork 1
forked from BLC/sgeUpdated
Code Pull Requests Actions Activity

Make the datacenter creation modal mobile friendly

Browse Source
This commit is contained in:
Khaled Elagamy
2025-08-19 00:08:42 +03:00
parent 2257ec79f6
commit 47959fb35f
1 changed files with 225 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
sge-frontend/src/views/DataCenterManagement.js
View File

@@ -428,6 +428,23 @@ const DataCenterManagement = () => {
setSelectedSector(row.sector?.id); setSelectedSector(row.sector?.id);
setSelectedSubSector(row.subSector?.id); setSelectedSubSector(row.subSector?.id);
// If there are existing emission sources, fetch consumption units for each
if (
row.dataCenterEmissionSources &&
row.dataCenterEmissionSources.length > 0
) {
row.dataCenterEmissionSources.forEach((dces) => {
if (dces.emissionSource && dces.emissionSource.id) {
dispatch(
getConsuptionUnits({
id: dces.emissionSource.id,
sector: row.sector?.id,
})
);
}
});
}
// Only set map position if we have both address and valid coordinates // Only set map position if we have both address and valid coordinates
setMapPosition( setMapPosition(
row.address && row.latitude && row.longitude row.address && row.latitude && row.longitude
@@ -1029,18 +1046,47 @@ const DataCenterManagement = () => {
<Col sm="12"> <Col sm="12">
<FormGroup> <FormGroup>
<Label>Emission Sources & Consumption Units</Label> <Label>Emission Sources & Consumption Units</Label>
<div className="border p-3 rounded bg-light"> <div className="border rounded p-3 bg-light">
<small className="text-muted mb-2 d-block"> <div className="d-flex justify-content-between align-items-center mb-3">
Configure emission sources for this data center. At least <small className="text-muted">
one emission source with consumption unit is required. Configure emission sources for this data center. At
least one emission source with consumption unit is
required.
</small> </small>
<Button
color="primary"
size="sm"
onClick={() => {
setSelectedDataCenter({
...selectedDataCenter,
dataCenterEmissionSources: [
...selectedDataCenter.dataCenterEmissionSources,
{
emissionSourceId: null,
consuptionUnitId: null,
isDefault: false,
},
],
});
}}
disabled={!selectedDataCenter.subSectorId}
className="d-none d-sm-flex"
>
<Plus size={14} className="me-1" />
Add Source
</Button>
</div>
{selectedDataCenter.dataCenterEmissionSources.map( {selectedDataCenter.dataCenterEmissionSources.map(
(source, index) => ( (source, index) => (
<Row key={index} className="mb-2 align-items-end"> <div
<Col sm="5"> key={index}
className="border rounded p-3 mb-3 bg-white"
>
<Row className="g-3">
<Col xs="12" md="6">
<Label <Label
for={`emissionSource-${index}`} for={`emissionSource-${index}`}
className="form-label" className="form-label fw-bold"
> >
Emission Source * Emission Source *
</Label> </Label>
@@ -1084,13 +1130,13 @@ const DataCenterManagement = () => {
color: "#6e6b7b", color: "#6e6b7b",
}), }),
}} }}
menuPlacement="top" menuPlacement="auto"
/> />
</Col> </Col>
<Col sm="4"> <Col xs="12" md="6">
<Label <Label
for={`consuptionUnit-${index}`} for={`consuptionUnit-${index}`}
className="form-label" className="form-label fw-bold"
> >
Consumption Unit * Consumption Unit *
</Label> </Label>
@@ -1124,14 +1170,14 @@ const DataCenterManagement = () => {
color: "#6e6b7b", color: "#6e6b7b",
}), }),
}} }}
menuPlacement="top" menuPlacement="auto"
/> />
</Col> </Col>
<Col sm="3"> </Row>
<Label className="form-label d-block"> <Row className="mt-3">
Actions <Col xs="12">
</Label> <div className="d-flex flex-column flex-sm-row gap-2 justify-content-between align-items-start align-items-sm-center">
<div className="d-flex gap-2"> <div className="d-flex gap-2 flex-wrap">
<Button <Button
color={ color={
source.isDefault source.isDefault
@@ -1151,13 +1197,22 @@ const DataCenterManagement = () => {
updatedSources[index].isDefault = true; updatedSources[index].isDefault = true;
setSelectedDataCenter({ setSelectedDataCenter({
...selectedDataCenter, ...selectedDataCenter,
dataCenterEmissionSources: updatedSources, dataCenterEmissionSources:
updatedSources,
}); });
}} }}
title="Set as default emission source" title="Set as default emission source"
> >
{source.isDefault ? "★ Default" : "☆ Default"} {source.isDefault
? "★ Default"
: "☆ Set Default"}
</Button> </Button>
{source.isDefault && (
<span className="badge bg-success align-self-center">
Default Source
</span>
)}
</div>
<Button <Button
color="outline-danger" color="outline-danger"
size="sm" size="sm"
@@ -1184,13 +1239,16 @@ const DataCenterManagement = () => {
} }
title="Remove emission source" title="Remove emission source"
> >
<Trash size={14} /> <Trash size={14} className="me-1" />
Remove
</Button> </Button>
</div> </div>
</Col> </Col>
</Row> </Row>
</div>
) )
)} )}
<div className="text-center mt-3">
<Button <Button
color="primary" color="primary"
size="sm" size="sm"
@@ -1208,11 +1266,13 @@ const DataCenterManagement = () => {
}); });
}} }}
disabled={!selectedDataCenter.subSectorId} disabled={!selectedDataCenter.subSectorId}
className="w-100 d-sm-none"
> >
<Plus size={14} className="me-1" /> <Plus size={14} className="me-1" />
Add Emission Source Add Another Emission Source
</Button> </Button>
</div> </div>
</div>
</FormGroup> </FormGroup>
</Col> </Col>
<Col sm="12"> <Col sm="12">