forked from Abdulbari/sgeUpdated
Make the datacenter creation modal mobile friendly
This commit is contained in:
@@ -428,6 +428,23 @@ const DataCenterManagement = () => {
|
||||
setSelectedSector(row.sector?.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
|
||||
setMapPosition(
|
||||
row.address && row.latitude && row.longitude
|
||||
@@ -1029,189 +1046,232 @@ const DataCenterManagement = () => {
|
||||
<Col sm="12">
|
||||
<FormGroup>
|
||||
<Label>Emission Sources & Consumption Units</Label>
|
||||
<div className="border p-3 rounded bg-light">
|
||||
<small className="text-muted mb-2 d-block">
|
||||
Configure emission sources for this data center. At least
|
||||
one emission source with consumption unit is required.
|
||||
</small>
|
||||
<div className="border rounded p-3 bg-light">
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<small className="text-muted">
|
||||
Configure emission sources for this data center. At
|
||||
least one emission source with consumption unit is
|
||||
required.
|
||||
</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(
|
||||
(source, index) => (
|
||||
<Row key={index} className="mb-2 align-items-end">
|
||||
<Col sm="5">
|
||||
<Label
|
||||
for={`emissionSource-${index}`}
|
||||
className="form-label"
|
||||
>
|
||||
Emission Source *
|
||||
</Label>
|
||||
<Select
|
||||
id={`emissionSource-${index}`}
|
||||
placeholder="Select emission source..."
|
||||
options={emissionSourcesOptions}
|
||||
value={emissionSourcesOptions?.find(
|
||||
(option) =>
|
||||
option.value === source.emissionSourceId
|
||||
)}
|
||||
onChange={(option) => {
|
||||
const updatedSources = [
|
||||
...selectedDataCenter.dataCenterEmissionSources,
|
||||
];
|
||||
updatedSources[index] = {
|
||||
...updatedSources[index],
|
||||
emissionSourceId: option?.value,
|
||||
consuptionUnitId: null, // Reset consumption unit when emission source changes
|
||||
};
|
||||
setSelectedDataCenter({
|
||||
...selectedDataCenter,
|
||||
dataCenterEmissionSources: updatedSources,
|
||||
});
|
||||
// Fetch consumption units for the selected emission source
|
||||
if (option?.value) {
|
||||
dispatch(
|
||||
getConsuptionUnits({
|
||||
id: option.value,
|
||||
sector: selectedDataCenter?.sectorId,
|
||||
})
|
||||
);
|
||||
}
|
||||
}}
|
||||
isClearable
|
||||
filterOption={customFilterForSelect}
|
||||
isDisabled={!selectedDataCenter.subSectorId}
|
||||
styles={{
|
||||
placeholder: (provided) => ({
|
||||
...provided,
|
||||
color: "#6e6b7b",
|
||||
}),
|
||||
}}
|
||||
menuPlacement="top"
|
||||
/>
|
||||
</Col>
|
||||
<Col sm="4">
|
||||
<Label
|
||||
for={`consuptionUnit-${index}`}
|
||||
className="form-label"
|
||||
>
|
||||
Consumption Unit *
|
||||
</Label>
|
||||
<Select
|
||||
id={`consuptionUnit-${index}`}
|
||||
placeholder="Select consumption unit..."
|
||||
options={consuptionUnitsOptions}
|
||||
value={consuptionUnitsOptions?.find(
|
||||
(option) =>
|
||||
option.value === source.consuptionUnitId
|
||||
)}
|
||||
onChange={(option) => {
|
||||
const updatedSources = [
|
||||
...selectedDataCenter.dataCenterEmissionSources,
|
||||
];
|
||||
updatedSources[index] = {
|
||||
...updatedSources[index],
|
||||
consuptionUnitId: option?.value,
|
||||
};
|
||||
setSelectedDataCenter({
|
||||
...selectedDataCenter,
|
||||
dataCenterEmissionSources: updatedSources,
|
||||
});
|
||||
}}
|
||||
isClearable
|
||||
filterOption={customFilterForSelect}
|
||||
isDisabled={!source.emissionSourceId}
|
||||
styles={{
|
||||
placeholder: (provided) => ({
|
||||
...provided,
|
||||
color: "#6e6b7b",
|
||||
}),
|
||||
}}
|
||||
menuPlacement="top"
|
||||
/>
|
||||
</Col>
|
||||
<Col sm="3">
|
||||
<Label className="form-label d-block">
|
||||
Actions
|
||||
</Label>
|
||||
<div className="d-flex gap-2">
|
||||
<Button
|
||||
color={
|
||||
source.isDefault
|
||||
? "primary"
|
||||
: "outline-secondary"
|
||||
}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
<div
|
||||
key={index}
|
||||
className="border rounded p-3 mb-3 bg-white"
|
||||
>
|
||||
<Row className="g-3">
|
||||
<Col xs="12" md="6">
|
||||
<Label
|
||||
for={`emissionSource-${index}`}
|
||||
className="form-label fw-bold"
|
||||
>
|
||||
Emission Source *
|
||||
</Label>
|
||||
<Select
|
||||
id={`emissionSource-${index}`}
|
||||
placeholder="Select emission source..."
|
||||
options={emissionSourcesOptions}
|
||||
value={emissionSourcesOptions?.find(
|
||||
(option) =>
|
||||
option.value === source.emissionSourceId
|
||||
)}
|
||||
onChange={(option) => {
|
||||
const updatedSources = [
|
||||
...selectedDataCenter.dataCenterEmissionSources,
|
||||
];
|
||||
// First, set all sources to not default
|
||||
updatedSources.forEach(
|
||||
(s) => (s.isDefault = false)
|
||||
);
|
||||
// Then set the selected one as default
|
||||
updatedSources[index].isDefault = true;
|
||||
updatedSources[index] = {
|
||||
...updatedSources[index],
|
||||
emissionSourceId: option?.value,
|
||||
consuptionUnitId: null, // Reset consumption unit when emission source changes
|
||||
};
|
||||
setSelectedDataCenter({
|
||||
...selectedDataCenter,
|
||||
dataCenterEmissionSources: updatedSources,
|
||||
});
|
||||
}}
|
||||
title="Set as default emission source"
|
||||
>
|
||||
{source.isDefault ? "★ Default" : "☆ Default"}
|
||||
</Button>
|
||||
<Button
|
||||
color="outline-danger"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const updatedSources =
|
||||
selectedDataCenter.dataCenterEmissionSources.filter(
|
||||
(_, i) => i !== index
|
||||
// Fetch consumption units for the selected emission source
|
||||
if (option?.value) {
|
||||
dispatch(
|
||||
getConsuptionUnits({
|
||||
id: option.value,
|
||||
sector: selectedDataCenter?.sectorId,
|
||||
})
|
||||
);
|
||||
// If we're removing the default source and there are other sources, make the first one default
|
||||
if (
|
||||
source.isDefault &&
|
||||
updatedSources.length > 0
|
||||
) {
|
||||
updatedSources[0].isDefault = true;
|
||||
}
|
||||
}}
|
||||
isClearable
|
||||
filterOption={customFilterForSelect}
|
||||
isDisabled={!selectedDataCenter.subSectorId}
|
||||
styles={{
|
||||
placeholder: (provided) => ({
|
||||
...provided,
|
||||
color: "#6e6b7b",
|
||||
}),
|
||||
}}
|
||||
menuPlacement="auto"
|
||||
/>
|
||||
</Col>
|
||||
<Col xs="12" md="6">
|
||||
<Label
|
||||
for={`consuptionUnit-${index}`}
|
||||
className="form-label fw-bold"
|
||||
>
|
||||
Consumption Unit *
|
||||
</Label>
|
||||
<Select
|
||||
id={`consuptionUnit-${index}`}
|
||||
placeholder="Select consumption unit..."
|
||||
options={consuptionUnitsOptions}
|
||||
value={consuptionUnitsOptions?.find(
|
||||
(option) =>
|
||||
option.value === source.consuptionUnitId
|
||||
)}
|
||||
onChange={(option) => {
|
||||
const updatedSources = [
|
||||
...selectedDataCenter.dataCenterEmissionSources,
|
||||
];
|
||||
updatedSources[index] = {
|
||||
...updatedSources[index],
|
||||
consuptionUnitId: option?.value,
|
||||
};
|
||||
setSelectedDataCenter({
|
||||
...selectedDataCenter,
|
||||
dataCenterEmissionSources: updatedSources,
|
||||
});
|
||||
}}
|
||||
disabled={
|
||||
selectedDataCenter.dataCenterEmissionSources
|
||||
.length === 1
|
||||
}
|
||||
title="Remove emission source"
|
||||
>
|
||||
<Trash size={14} />
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
isClearable
|
||||
filterOption={customFilterForSelect}
|
||||
isDisabled={!source.emissionSourceId}
|
||||
styles={{
|
||||
placeholder: (provided) => ({
|
||||
...provided,
|
||||
color: "#6e6b7b",
|
||||
}),
|
||||
}}
|
||||
menuPlacement="auto"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className="mt-3">
|
||||
<Col xs="12">
|
||||
<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 flex-wrap">
|
||||
<Button
|
||||
color={
|
||||
source.isDefault
|
||||
? "primary"
|
||||
: "outline-secondary"
|
||||
}
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const updatedSources = [
|
||||
...selectedDataCenter.dataCenterEmissionSources,
|
||||
];
|
||||
// First, set all sources to not default
|
||||
updatedSources.forEach(
|
||||
(s) => (s.isDefault = false)
|
||||
);
|
||||
// Then set the selected one as default
|
||||
updatedSources[index].isDefault = true;
|
||||
setSelectedDataCenter({
|
||||
...selectedDataCenter,
|
||||
dataCenterEmissionSources:
|
||||
updatedSources,
|
||||
});
|
||||
}}
|
||||
title="Set as default emission source"
|
||||
>
|
||||
{source.isDefault
|
||||
? "★ Default"
|
||||
: "☆ Set Default"}
|
||||
</Button>
|
||||
{source.isDefault && (
|
||||
<span className="badge bg-success align-self-center">
|
||||
Default Source
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
color="outline-danger"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const updatedSources =
|
||||
selectedDataCenter.dataCenterEmissionSources.filter(
|
||||
(_, i) => i !== index
|
||||
);
|
||||
// If we're removing the default source and there are other sources, make the first one default
|
||||
if (
|
||||
source.isDefault &&
|
||||
updatedSources.length > 0
|
||||
) {
|
||||
updatedSources[0].isDefault = true;
|
||||
}
|
||||
setSelectedDataCenter({
|
||||
...selectedDataCenter,
|
||||
dataCenterEmissionSources: updatedSources,
|
||||
});
|
||||
}}
|
||||
disabled={
|
||||
selectedDataCenter.dataCenterEmissionSources
|
||||
.length === 1
|
||||
}
|
||||
title="Remove emission source"
|
||||
>
|
||||
<Trash size={14} className="me-1" />
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
<Button
|
||||
color="primary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedDataCenter({
|
||||
...selectedDataCenter,
|
||||
dataCenterEmissionSources: [
|
||||
...selectedDataCenter.dataCenterEmissionSources,
|
||||
{
|
||||
emissionSourceId: null,
|
||||
consuptionUnitId: null,
|
||||
isDefault: false,
|
||||
},
|
||||
],
|
||||
});
|
||||
}}
|
||||
disabled={!selectedDataCenter.subSectorId}
|
||||
>
|
||||
<Plus size={14} className="me-1" />
|
||||
Add Emission Source
|
||||
</Button>
|
||||
<div className="text-center mt-3">
|
||||
<Button
|
||||
color="primary"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setSelectedDataCenter({
|
||||
...selectedDataCenter,
|
||||
dataCenterEmissionSources: [
|
||||
...selectedDataCenter.dataCenterEmissionSources,
|
||||
{
|
||||
emissionSourceId: null,
|
||||
consuptionUnitId: null,
|
||||
isDefault: false,
|
||||
},
|
||||
],
|
||||
});
|
||||
}}
|
||||
disabled={!selectedDataCenter.subSectorId}
|
||||
className="w-100 d-sm-none"
|
||||
>
|
||||
<Plus size={14} className="me-1" />
|
||||
Add Another Emission Source
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
</Col>
|
||||
|
||||
Reference in New Issue
Block a user