forked from Abdulbari/sgeUpdated
1246 lines
45 KiB
JavaScript
1246 lines
45 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
||
import { ChevronDown, Edit, MoreVertical, Plus, Trash } from "react-feather";
|
||
import {
|
||
Card,
|
||
CardHeader,
|
||
CardTitle,
|
||
Input,
|
||
Label,
|
||
Row,
|
||
Col,
|
||
Button,
|
||
Modal,
|
||
ModalHeader,
|
||
ModalBody,
|
||
ModalFooter,
|
||
UncontrolledDropdown,
|
||
DropdownToggle,
|
||
DropdownMenu,
|
||
DropdownItem,
|
||
} from "reactstrap";
|
||
import Select from "react-select";
|
||
import DataTable from "react-data-table-component";
|
||
import ReactPaginate from "react-paginate";
|
||
import { useSnackbar } from "notistack";
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
import withReactContent from "sweetalert2-react-content";
|
||
import { default as SweetAlert } from "sweetalert2";
|
||
import { useTranslation } from "react-i18next";
|
||
import {
|
||
getEmissionSourcesWithPaginate,
|
||
addEmissionSource,
|
||
updateEmissionSource,
|
||
updateEmissionSourceOfWaste,
|
||
deleteEmissionSource,
|
||
} from "../../redux/actions/emissionSources/index";
|
||
import {
|
||
getSectors,
|
||
getSectorById,
|
||
getConsuptionUnits,
|
||
} from "../../redux/actions/datas";
|
||
import Factors from "../../components/emission-source/factors";
|
||
import { permissionCheck } from "../../components/permission-check";
|
||
import { customFilterForSelect } from "../../utility/Utils";
|
||
|
||
const Swal = withReactContent(SweetAlert);
|
||
|
||
const EmissionSource = () => {
|
||
const { t } = useTranslation();
|
||
|
||
const initialColumns = [
|
||
{
|
||
name: t("EmissionSources.emissionSourceName"),
|
||
selector: (row) => row.tag,
|
||
sortable: true,
|
||
minWidth: "250px",
|
||
},
|
||
{
|
||
name: t("EmissionSources.subSector"),
|
||
selector: (row) => row.subsector,
|
||
sortable: false,
|
||
minWidth: "250px",
|
||
cell: (row) => <span>{row.subSector?.tag || "-"}</span>,
|
||
},
|
||
{
|
||
name: t("EmissionSources.sector"),
|
||
selector: (row) => row.subsector,
|
||
sortable: false,
|
||
minWidth: "250px",
|
||
cell: (row) => <span>{row.subSector?.sector?.tag || "-"}</span>,
|
||
},
|
||
{
|
||
name: t("EmissionSources.emissionScopes"),
|
||
selector: (row) => row.emissionScope,
|
||
sortable: false,
|
||
minWidth: "250px",
|
||
cell: (row) => (
|
||
<span>
|
||
{row.emissionScope && row.emissionScope != "null"
|
||
? "Kapsam-" + row.emissionScope
|
||
: "-"}
|
||
</span>
|
||
),
|
||
},
|
||
{
|
||
name: t("Actions"),
|
||
allowOverflow: false,
|
||
maxWidth: "100px",
|
||
cell: (row) => {
|
||
return (
|
||
<div className="d-flex">
|
||
<UncontrolledDropdown>
|
||
<DropdownToggle className="pl-1" tag="span">
|
||
<MoreVertical size={15} />
|
||
</DropdownToggle>
|
||
<DropdownMenu container={"body"}>
|
||
{permissionCheck("emission_source_update") && (
|
||
<DropdownItem
|
||
tag="a"
|
||
className="w-100"
|
||
onClick={() => handleEditEmissionSource(row)}
|
||
>
|
||
<Edit size={15} />
|
||
<span className="align-middle ml-50">
|
||
{t("Cruds.edit")}
|
||
</span>
|
||
</DropdownItem>
|
||
)}
|
||
{permissionCheck("emission_source_delete") && (
|
||
<DropdownItem
|
||
tag="a"
|
||
className="w-100"
|
||
onClick={() => handleDeleteEmissionSource(row)}
|
||
>
|
||
<Trash size={15} />
|
||
<span className="align-middle ml-50">
|
||
{t("Cruds.delete")}
|
||
</span>
|
||
</DropdownItem>
|
||
)}
|
||
</DropdownMenu>
|
||
</UncontrolledDropdown>
|
||
</div>
|
||
);
|
||
},
|
||
},
|
||
];
|
||
|
||
useEffect(() => {
|
||
if (
|
||
!(
|
||
permissionCheck("emission_source_delete") ||
|
||
permissionCheck("emission_source_update")
|
||
)
|
||
) {
|
||
const updatedColumns = initialColumns.filter(
|
||
(column) => column.name !== ("Aksiyonlar" || "Actions")
|
||
);
|
||
setServerSideColumns(updatedColumns);
|
||
}
|
||
}, []);
|
||
|
||
const dispatch = useDispatch();
|
||
const { enqueueSnackbar } = useSnackbar();
|
||
|
||
const [currentPage, setCurrentPage] = useState(1);
|
||
const [rowsPerPage, setRowsPerPage] = useState(5);
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
const [serverSideColumns, setServerSideColumns] = useState(initialColumns);
|
||
|
||
const emissionSourceStore = useSelector((state) => state.emissionSources);
|
||
const datasStore = useSelector((state) => state.datas);
|
||
const [emissionSources, setEmissionSources] = useState([]);
|
||
const [selectedSector, setSelectedSector] = useState(null);
|
||
const [sectorsOptions, setSectorsOptions] = useState([]);
|
||
const [subSectorsOptions, setSubSectorsOptions] = useState([]);
|
||
const [showAddEmissionSourceModal, setShowAddEmissionSourceModal] =
|
||
useState(false);
|
||
const [editingEmissionSourceData, setEditingEmissionSourceData] = useState(
|
||
{}
|
||
);
|
||
const [searchValue, setSearchValue] = useState("");
|
||
const [selectedSectorFilter, setSelectedSectorFilter] = useState("");
|
||
const [showDeletedEmissionSource, setShowDeletedEmissionSource] =
|
||
useState(false);
|
||
|
||
useEffect(() => {
|
||
dispatch(
|
||
getEmissionSourcesWithPaginate({
|
||
currentPage,
|
||
rowsPerPage,
|
||
selectedSectorFilter,
|
||
showDeletedEmissionSource,
|
||
})
|
||
);
|
||
}, [
|
||
currentPage,
|
||
rowsPerPage,
|
||
selectedSectorFilter,
|
||
showDeletedEmissionSource,
|
||
]);
|
||
|
||
useEffect(() => {
|
||
dispatch(getSectors());
|
||
dispatch(getConsuptionUnits({ sector: "Atık" }));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (selectedSector != null) dispatch(getSectorById(selectedSector));
|
||
}, [selectedSector]);
|
||
|
||
useEffect(() => {
|
||
if (emissionSourceStore?.emissionSourcesWithPaginate?.content) {
|
||
setEmissionSources(
|
||
emissionSourceStore?.emissionSourcesWithPaginate?.content
|
||
);
|
||
}
|
||
}, [emissionSourceStore.emissionSourcesWithPaginate?.content]);
|
||
|
||
useEffect(() => {
|
||
setSectorsOptions(
|
||
datasStore?.sectors.map((sector) => {
|
||
return {
|
||
value: sector?.id,
|
||
label: sector?.tag,
|
||
};
|
||
})
|
||
);
|
||
}, [datasStore?.sectors]);
|
||
|
||
useEffect(() => {
|
||
setSubSectorsOptions(
|
||
datasStore?.sector?.subSectors?.map((subSector) => {
|
||
return {
|
||
value: subSector?.id,
|
||
label: subSector?.tag,
|
||
};
|
||
})
|
||
);
|
||
}, [datasStore?.sector]);
|
||
|
||
const handleFilter = (e) => {
|
||
setSearchValue(e.target.value);
|
||
|
||
if (e.target.value !== "") {
|
||
setEmissionSources(
|
||
emissionSourceStore.emissionSourcesWithPaginate?.content?.filter(
|
||
(source) =>
|
||
source.tag
|
||
.toUpperCase()
|
||
.normalize("NFD")
|
||
.replace(/[\u0300-\u036f]/g, "")
|
||
.includes(
|
||
e.target.value
|
||
.toUpperCase()
|
||
.normalize("NFD")
|
||
.replace(/[\u0300-\u036f]/g, "")
|
||
)
|
||
)
|
||
);
|
||
} else {
|
||
setEmissionSources(
|
||
emissionSourceStore.emissionSourcesWithPaginate?.content
|
||
);
|
||
}
|
||
};
|
||
|
||
const handlePagination = (page) => {
|
||
setCurrentPage(page.selected + 1);
|
||
setEmissionSources(emissionSources.emissionSourcesWithPaginate?.content);
|
||
};
|
||
|
||
const handlePerPage = (e) => {
|
||
setCurrentPage(1);
|
||
setRowsPerPage(parseInt(e.target.value));
|
||
setEmissionSources(emissionSources.emissionSourcesWithPaginate?.content);
|
||
};
|
||
|
||
const CustomPagination = () => {
|
||
const count = Number(
|
||
(
|
||
emissionSourceStore?.emissionSourcesWithPaginate?.pageInfo
|
||
?.totalElements / rowsPerPage
|
||
).toFixed(1)
|
||
);
|
||
//asdaasdasd
|
||
return (
|
||
<ReactPaginate
|
||
previousLabel={""}
|
||
nextLabel={""}
|
||
breakLabel="..."
|
||
pageCount={count || 1}
|
||
marginPagesDisplayed={2}
|
||
pageRangeDisplayed={2}
|
||
activeClassName="active"
|
||
forcePage={currentPage !== 0 ? currentPage - 1 : 0}
|
||
onPageChange={(page) => handlePagination(page)}
|
||
pageClassName={"page-item"}
|
||
nextLinkClassName={"page-link"}
|
||
nextClassName={"page-item next"}
|
||
previousClassName={"page-item prev"}
|
||
previousLinkClassName={"page-link"}
|
||
pageLinkClassName={"page-link"}
|
||
breakClassName="page-item"
|
||
breakLinkClassName="page-link"
|
||
containerClassName={
|
||
"pagination react-paginate separated-pagination pagination-sm justify-content-end pr-1 mt-1"
|
||
}
|
||
/>
|
||
);
|
||
};
|
||
|
||
const onAddEmissionSourceButtonPressed = () => {
|
||
setEditingEmissionSourceData({
|
||
emissionSourceConvertUnits: datasStore?.consuptionUnits?.map(
|
||
(consuptionUnit) => {
|
||
return {
|
||
unit: {
|
||
id: consuptionUnit.id,
|
||
tag: consuptionUnit.tag,
|
||
},
|
||
value: "",
|
||
};
|
||
}
|
||
),
|
||
});
|
||
setShowAddEmissionSourceModal(true);
|
||
};
|
||
|
||
function convertToDesiredFormatAndStringify(arr) {
|
||
const cleanedArray = arr
|
||
.filter((item) => item.unit.tag !== "TJ")
|
||
.filter((item) => item.value !== "")
|
||
.map((item) => ({
|
||
unitId: item.unit?.id || "",
|
||
convertValue: item.value || "",
|
||
}));
|
||
|
||
return JSON.stringify(cleanedArray).replace(/"([^"]+)":/g, "$1:");
|
||
}
|
||
|
||
const onAddEmissionSourceModalButtonPressed = () => {
|
||
setLoading(true);
|
||
|
||
if (!editingEmissionSourceData.id) {
|
||
const newEmissionSourceData = {
|
||
tag: editingEmissionSourceData?.tag,
|
||
description: editingEmissionSourceData?.description || "-",
|
||
emissionScope: editingEmissionSourceData?.emissionScope?.value,
|
||
subSector: editingEmissionSourceData?.subSector?.value,
|
||
co2: editingEmissionSourceData?.co2 || 0,
|
||
ch4: editingEmissionSourceData?.ch4 || 0,
|
||
n2o: editingEmissionSourceData?.n2o || 0,
|
||
emissionSourceConvertUnits: convertToDesiredFormatAndStringify(
|
||
editingEmissionSourceData.emissionSourceConvertUnits
|
||
),
|
||
};
|
||
|
||
dispatch(addEmissionSource(newEmissionSourceData))
|
||
.then(() => {
|
||
setLoading(false);
|
||
setSelectedSector(null);
|
||
setShowAddEmissionSourceModal(false);
|
||
enqueueSnackbar(t("Warnings.addedSuccessfully"), {
|
||
variant: "success",
|
||
preventDuplicate: true,
|
||
});
|
||
})
|
||
.catch(() => {
|
||
setLoading(false);
|
||
setShowAddEmissionSourceModal(false);
|
||
enqueueSnackbar(t("Warnings.addedFail"), {
|
||
variant: "error",
|
||
preventDuplicate: true,
|
||
});
|
||
});
|
||
} else {
|
||
const updateEmissionSourceData = {
|
||
id: editingEmissionSourceData.id,
|
||
tag: editingEmissionSourceData?.tag,
|
||
description: editingEmissionSourceData?.description || "-",
|
||
emissionScope: editingEmissionSourceData?.emissionScope?.value,
|
||
subSector: editingEmissionSourceData?.subSector?.value,
|
||
co2: editingEmissionSourceData?.co2 || 0,
|
||
ch4: editingEmissionSourceData?.ch4 || 0,
|
||
n2o: editingEmissionSourceData?.n2o || 0,
|
||
emissionSourceConvertUnits: convertToDesiredFormatAndStringify(
|
||
editingEmissionSourceData.emissionSourceConvertUnits
|
||
),
|
||
...editingEmissionSourceData.wasteEmissionSourceSupplement,
|
||
};
|
||
dispatch(
|
||
editingEmissionSourceData?.sector?.label != "Atık"
|
||
? updateEmissionSource(updateEmissionSourceData)
|
||
: updateEmissionSourceOfWaste(updateEmissionSourceData)
|
||
)
|
||
.then(() => {
|
||
enqueueSnackbar(t("Warnings.updatedSuccessfully"), {
|
||
variant: "success",
|
||
});
|
||
setLoading(false);
|
||
setSelectedSector(null);
|
||
setEditingEmissionSourceData(null);
|
||
setShowAddEmissionSourceModal(false);
|
||
})
|
||
.catch(() => {
|
||
enqueueSnackbar(
|
||
`${updateEmissionSourceData.tag}, ${t("Warnings.updatedFail")}`,
|
||
{
|
||
variant: "error",
|
||
}
|
||
);
|
||
setLoading(false);
|
||
});
|
||
}
|
||
};
|
||
|
||
const renderEmissionSourceModal = () => {
|
||
//Atık için Modal
|
||
if (editingEmissionSourceData?.sector?.label === "Atık") {
|
||
return (
|
||
<Modal
|
||
isOpen={showAddEmissionSourceModal}
|
||
toggle={() =>
|
||
setShowAddEmissionSourceModal(!showAddEmissionSourceModal)
|
||
}
|
||
className="modal-dialog-centered"
|
||
>
|
||
<ModalHeader
|
||
toggle={() =>
|
||
setShowAddEmissionSourceModal(!showAddEmissionSourceModal)
|
||
}
|
||
>
|
||
{editingEmissionSourceData?.id
|
||
? editingEmissionSourceData.tag
|
||
: t("EmissionSources.addEmissionSource")}
|
||
</ModalHeader>
|
||
<ModalBody>
|
||
<div className="mb-2">
|
||
<Label className="form-label" for="emission-source-name">
|
||
{t("EmissionSources.emissionSourceName")}:
|
||
</Label>
|
||
<Input
|
||
type="text"
|
||
id="emission-source-name"
|
||
placeholder=""
|
||
value={editingEmissionSourceData?.tag || ""}
|
||
onChange={(e) =>
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
tag: e.target.value,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
<div className="mb-2">
|
||
<Label className="form-label" for="data-sector-select">
|
||
{t("EmissionSources.sector")}:
|
||
</Label>
|
||
<Select
|
||
id="data-sector-select"
|
||
isClearable={false}
|
||
closeMenuOnSelect={true}
|
||
options={sectorsOptions?.filter(
|
||
(sector) => sector.label === "Atık"
|
||
)}
|
||
className="react-select"
|
||
placeholder=""
|
||
defaultValue={editingEmissionSourceData?.sector}
|
||
onChange={(value) => {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
sector: value,
|
||
});
|
||
setSelectedSector(value.value);
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div className="mb-2">
|
||
<Label className="form-label" for="subSector-select">
|
||
{t("EmissionSources.subSector")}:
|
||
</Label>
|
||
<Select
|
||
id="subSector-select"
|
||
isClearable={false}
|
||
closeMenuOnSelect={true}
|
||
options={subSectorsOptions?.filter(
|
||
(subSector) => subSector.label != "Katı Atık Bertarafı"
|
||
)}
|
||
className="react-select"
|
||
placeholder=""
|
||
filterOption={customFilterForSelect}
|
||
defaultValue={editingEmissionSourceData?.subSector}
|
||
onChange={(value) => {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
subSector: value,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="mb-2">
|
||
<Label className="form-label" for="ConvertUnits">
|
||
{t("EmissionSources.emissionFactors")}:
|
||
</Label>
|
||
{editingEmissionSourceData?.subSector?.label !=
|
||
"Yakma ve Açık Yanma" ? (
|
||
<Row className="m-1">
|
||
<Col>
|
||
<Row className="d-flex justify-content-center">
|
||
{editingEmissionSourceData?.subSector?.label !=
|
||
"Atık Su Arıtma ve Deşarjı" ? (
|
||
<Label className="form-label" for="ch4-waste">
|
||
CH<sub>4</sub> (g CH<sub>4</sub>/kg Atık)
|
||
</Label>
|
||
) : (
|
||
<Label className="form-label" for="ch4-waste">
|
||
( t CH<sub>4</sub> / t Atık)
|
||
</Label>
|
||
)}
|
||
</Row>
|
||
<Row>
|
||
<Col>
|
||
<Label className="form-label" for="dryWeightCH4">
|
||
Kuru Ağırlık
|
||
</Label>
|
||
<Input
|
||
type="text"
|
||
id="dryWeightCH4"
|
||
placeholder=""
|
||
value={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dampWeightCH4 != 0
|
||
? editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dampWeightCH4
|
||
: editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dryWeightCH4
|
||
}
|
||
readOnly={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dampWeightCH4 ===
|
||
0 &&
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dryWeightCH4 === 0
|
||
}
|
||
onChange={(e) => {
|
||
const inputValue = e.target.value;
|
||
if (
|
||
/^\d*\.?\d*$/.test(inputValue) ||
|
||
inputValue === ""
|
||
) {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
wasteEmissionSourceSupplement: {
|
||
...editingEmissionSourceData.wasteEmissionSourceSupplement,
|
||
dryWeightCH4: inputValue,
|
||
},
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
{editingEmissionSourceData?.subSector?.label !=
|
||
"Atık Su Arıtma ve Deşarjı" && (
|
||
<Col>
|
||
<Label className="form-label" for="wetWeightCH4">
|
||
Yaş Ağırlık
|
||
</Label>
|
||
<Input
|
||
type="text"
|
||
id="wetWeightCH4"
|
||
placeholder=""
|
||
value={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.wetWeightCH4
|
||
}
|
||
readOnly={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.wetWeightCH4 ===
|
||
0
|
||
}
|
||
onChange={(e) => {
|
||
const inputValue = e.target.value;
|
||
if (
|
||
/^\d*\.?\d*$/.test(inputValue) ||
|
||
inputValue === ""
|
||
) {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
wasteEmissionSourceSupplement: {
|
||
...editingEmissionSourceData.wasteEmissionSourceSupplement,
|
||
wetWeightCH4: inputValue,
|
||
},
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
)}
|
||
</Row>
|
||
</Col>
|
||
<Col>
|
||
<Row className="d-flex justify-content-center">
|
||
{editingEmissionSourceData?.subSector?.label !=
|
||
"Atık Su Arıtma ve Deşarjı" ? (
|
||
<Label className="form-label" for="n2o-waste">
|
||
N<sub>2</sub>O (g N<sub>2</sub>O/kg Atık)
|
||
</Label>
|
||
) : (
|
||
<Label className="form-label" for="n2o-waste">
|
||
(kg N<sub>2</sub>O-N/kg-N)
|
||
</Label>
|
||
)}
|
||
</Row>
|
||
<Row>
|
||
<Col>
|
||
<Label className="form-label" for="dryWeightN2O">
|
||
Kuru Ağırlık
|
||
</Label>
|
||
<Input
|
||
type="text"
|
||
id="dryWeightN2O"
|
||
placeholder=""
|
||
value={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dryWeightN2O
|
||
}
|
||
readOnly={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dryWeightN2O === 0
|
||
}
|
||
onChange={(e) => {
|
||
const inputValue = e.target.value;
|
||
if (
|
||
/^\d*\.?\d*$/.test(inputValue) ||
|
||
inputValue === ""
|
||
) {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
wasteEmissionSourceSupplement: {
|
||
...editingEmissionSourceData.wasteEmissionSourceSupplement,
|
||
dryWeightN2O: inputValue,
|
||
},
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
{editingEmissionSourceData?.subSector?.label !=
|
||
"Atık Su Arıtma ve Deşarjı" && (
|
||
<Col>
|
||
<Label className="form-label" for="wetWeightN2O">
|
||
Yaş Ağırlık
|
||
</Label>
|
||
<Input
|
||
type="text"
|
||
id="wetWeightN2O"
|
||
placeholder=""
|
||
value={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.wetWeightN2O
|
||
}
|
||
readOnly={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.wetWeightN2O ===
|
||
0
|
||
}
|
||
onChange={(e) => {
|
||
const inputValue = e.target.value;
|
||
if (
|
||
/^\d*\.?\d*$/.test(inputValue) ||
|
||
inputValue === ""
|
||
) {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
wasteEmissionSourceSupplement: {
|
||
...editingEmissionSourceData.wasteEmissionSourceSupplement,
|
||
wetWeightN2O: inputValue,
|
||
},
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
)}
|
||
</Row>
|
||
</Col>
|
||
</Row>
|
||
) : (
|
||
<Row className="m-1">
|
||
<div className="d-flex flex-column justify-content-center mb-3">
|
||
<Label className="form-label text-center mb-1">Yakma</Label>
|
||
<Row>
|
||
<Col>
|
||
<Label className="form-label" for="dryWeightCH4">
|
||
CH<sub>4</sub>
|
||
(kg CH<sub>4</sub> / t Atık) <br /> Yaş Ağırlık
|
||
</Label>
|
||
<Input
|
||
type="text"
|
||
id="dryWeightCH4"
|
||
placeholder=""
|
||
value={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dampWeightCH4 != 0
|
||
? editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dampWeightCH4
|
||
: editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dryWeightCH4
|
||
}
|
||
readOnly={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dampWeightCH4 ===
|
||
0 &&
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dryWeightCH4 === 0
|
||
}
|
||
onChange={(e) => {
|
||
const inputValue = e.target.value;
|
||
if (
|
||
/^\d*\.?\d*$/.test(inputValue) ||
|
||
inputValue === ""
|
||
) {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
wasteEmissionSourceSupplement: {
|
||
...editingEmissionSourceData.wasteEmissionSourceSupplement,
|
||
dryWeightCH4:
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement
|
||
.dryWeightCH4 != 0 && inputValue,
|
||
dampWeightCH4:
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement
|
||
.dampWeightCH4 != 0 && inputValue,
|
||
},
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
<Col>
|
||
<Label className="form-label" for="wetWeightN2O">
|
||
N<sub>2</sub>O (kg N<sub>2</sub>O / t atık) <br /> Yaş
|
||
Ağırlık
|
||
</Label>
|
||
<Input
|
||
type="text"
|
||
id="wetWeightN2O"
|
||
placeholder=""
|
||
value={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.wetWeightN2O
|
||
}
|
||
readOnly={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.wetWeightN2O === 0
|
||
}
|
||
onChange={(e) => {
|
||
const inputValue = e.target.value;
|
||
if (
|
||
/^\d*\.?\d*$/.test(inputValue) ||
|
||
inputValue === ""
|
||
) {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
wasteEmissionSourceSupplement: {
|
||
...editingEmissionSourceData.wasteEmissionSourceSupplement,
|
||
wetWeightN2O: inputValue,
|
||
},
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
<div className="d-flex flex-column justify-content-center">
|
||
<Label className="form-label text-center mb-1">
|
||
Açık Yanma
|
||
</Label>
|
||
<Row>
|
||
<Col>
|
||
<Label className="form-label" for="wetWeightCH4">
|
||
CH<sub>4</sub>
|
||
(kg CH<sub>4</sub> / t Atık) <br /> Yaş Ağırlık
|
||
</Label>
|
||
<Input
|
||
type="text"
|
||
id="wetWeightCH4"
|
||
placeholder=""
|
||
value={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.wetWeightCH4
|
||
}
|
||
readOnly={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.wetWeightCH4 === 0
|
||
}
|
||
onChange={(e) => {
|
||
const inputValue = e.target.value;
|
||
if (
|
||
/^\d*\.?\d*$/.test(inputValue) ||
|
||
inputValue === ""
|
||
) {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
wasteEmissionSourceSupplement: {
|
||
...editingEmissionSourceData.wasteEmissionSourceSupplement,
|
||
wetWeightCH4: inputValue,
|
||
},
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
<Col>
|
||
<Label className="form-label" for="dryWeightN2O">
|
||
N<sub>2</sub>O (kg N<sub>2</sub>O / t atık) <br />{" "}
|
||
Kuru Ağırlık
|
||
</Label>
|
||
<Input
|
||
type="text"
|
||
id="dryWeightN2O"
|
||
placeholder=""
|
||
value={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dryWeightN2O
|
||
}
|
||
readOnly={
|
||
editingEmissionSourceData
|
||
?.wasteEmissionSourceSupplement.dryWeightN2O === 0
|
||
}
|
||
onChange={(e) => {
|
||
const inputValue = e.target.value;
|
||
if (
|
||
/^\d*\.?\d*$/.test(inputValue) ||
|
||
inputValue === ""
|
||
) {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
wasteEmissionSourceSupplement: {
|
||
...editingEmissionSourceData.wasteEmissionSourceSupplement,
|
||
dryWeightN2O: inputValue,
|
||
},
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</Row>
|
||
)}
|
||
</div>
|
||
</ModalBody>
|
||
<ModalFooter>
|
||
<Button
|
||
disabled={
|
||
!(
|
||
editingEmissionSourceData?.subSector &&
|
||
editingEmissionSourceData?.tag &&
|
||
editingEmissionSourceData?.emissionScope
|
||
)
|
||
}
|
||
color="primary"
|
||
onClick={onAddEmissionSourceModalButtonPressed}
|
||
>
|
||
{loading
|
||
? t("Cruds.saving")
|
||
: !editingEmissionSourceData?.id
|
||
? t("Cruds.save")
|
||
: t("Cruds.update")}
|
||
</Button>
|
||
</ModalFooter>
|
||
</Modal>
|
||
);
|
||
}
|
||
|
||
//Atık hariç diğer sektörler için Modal
|
||
const convertedUnits = handleConvertUnits(
|
||
editingEmissionSourceData?.emissionSourceConvertUnits
|
||
);
|
||
|
||
return (
|
||
<Modal
|
||
isOpen={showAddEmissionSourceModal}
|
||
toggle={() =>
|
||
setShowAddEmissionSourceModal(!showAddEmissionSourceModal)
|
||
}
|
||
className="modal-dialog-centered"
|
||
>
|
||
<ModalHeader
|
||
toggle={() =>
|
||
setShowAddEmissionSourceModal(!showAddEmissionSourceModal)
|
||
}
|
||
>
|
||
{editingEmissionSourceData?.id
|
||
? editingEmissionSourceData.tag
|
||
: t("EmissionSources.addEmissionSource")}
|
||
</ModalHeader>
|
||
<ModalBody>
|
||
<div className="mb-2">
|
||
<Label className="form-label" for="emission-source-name">
|
||
{t("EmissionSources.emissionSourceName")}:
|
||
</Label>
|
||
<Input
|
||
type="text"
|
||
id="emission-source-name"
|
||
placeholder=""
|
||
value={editingEmissionSourceData?.tag || ""}
|
||
onChange={(e) =>
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
tag: e.target.value,
|
||
})
|
||
}
|
||
/>
|
||
</div>
|
||
|
||
<div className="mb-2">
|
||
<Label className="form-label" for="data-sector-select">
|
||
{t("EmissionSources.sector")}:
|
||
</Label>
|
||
<Select
|
||
id="data-sector-select"
|
||
isClearable={false}
|
||
closeMenuOnSelect={true}
|
||
options={sectorsOptions?.filter(
|
||
(sector) => sector.label != "Atık"
|
||
)}
|
||
className="react-select"
|
||
placeholder=""
|
||
defaultValue={editingEmissionSourceData?.sector}
|
||
onChange={(value) => {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
sector: value,
|
||
});
|
||
setSelectedSector(value.value);
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div className="mb-2">
|
||
<Label className="form-label" for="subSector-select">
|
||
{t("EmissionSources.subSector")}:
|
||
</Label>
|
||
<Select
|
||
id="subSector-select"
|
||
isClearable={false}
|
||
closeMenuOnSelect={true}
|
||
options={subSectorsOptions}
|
||
className="react-select"
|
||
placeholder=""
|
||
filterOption={customFilterForSelect}
|
||
defaultValue={editingEmissionSourceData?.subSector}
|
||
onChange={(value) => {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
subSector: value,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="mb-2">
|
||
<Label className="form-label" for="subSector-select">
|
||
{t("EmissionSources.emissionScopes")}:
|
||
</Label>
|
||
<Select
|
||
id="subSector-select"
|
||
isClearable={false}
|
||
closeMenuOnSelect={true}
|
||
options={[
|
||
{ value: "1", label: "Kapsam-1" },
|
||
{ value: "2", label: "Kapsam-2" },
|
||
{ value: "3", label: "Kapsam-3" },
|
||
]}
|
||
className="react-select"
|
||
placeholder=""
|
||
defaultValue={editingEmissionSourceData?.emissionScope}
|
||
onChange={(value) => {
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
emissionScope: value,
|
||
});
|
||
}}
|
||
/>
|
||
</div>
|
||
<div className="mb-2">
|
||
<Label className="form-label" for="ConvertUnits">
|
||
Dönüştürme Birimleri:
|
||
</Label>
|
||
{convertedUnits?.map((item, index) => {
|
||
return (
|
||
<Row key={item.unit.id} className="m-1">
|
||
<Input
|
||
className="w-25"
|
||
placeholder=""
|
||
disabled
|
||
value={item.unit.tag}
|
||
onChange={() => {
|
||
return null;
|
||
}}
|
||
/>
|
||
<Input
|
||
className="w-75"
|
||
type="text"
|
||
id="convert-value"
|
||
placeholder=""
|
||
value={item.unit.tag === "TJ" ? "1" : item.value || ""}
|
||
readOnly={item.unit.tag === "TJ"}
|
||
onChange={(e) => {
|
||
const inputValue = e.target.value;
|
||
if (/^\d*\.?\d*$/.test(inputValue) || inputValue === "") {
|
||
const updatedConvertUnits = [...convertedUnits];
|
||
updatedConvertUnits[index] = {
|
||
...item,
|
||
value: inputValue,
|
||
};
|
||
setEditingEmissionSourceData({
|
||
...editingEmissionSourceData,
|
||
emissionSourceConvertUnits: updatedConvertUnits,
|
||
});
|
||
}
|
||
}}
|
||
/>
|
||
</Row>
|
||
);
|
||
})}
|
||
</div>
|
||
<Factors
|
||
editingEmissionSourceData={editingEmissionSourceData}
|
||
setEditingEmissionSourceData={setEditingEmissionSourceData}
|
||
/>
|
||
{/* <ConstantEnergy
|
||
editingEmissionSourceData={editingEmissionSourceData}
|
||
setEditingEmissionSourceData={setEditingEmissionSourceData}
|
||
/> */}
|
||
</ModalBody>
|
||
<ModalFooter>
|
||
<Button
|
||
disabled={
|
||
!(
|
||
editingEmissionSourceData?.subSector &&
|
||
editingEmissionSourceData?.tag &&
|
||
editingEmissionSourceData?.emissionScope
|
||
)
|
||
}
|
||
color="primary"
|
||
onClick={onAddEmissionSourceModalButtonPressed}
|
||
>
|
||
{loading
|
||
? t("Cruds.saving")
|
||
: !editingEmissionSourceData?.id
|
||
? t("Cruds.save")
|
||
: t("Cruds.update")}
|
||
</Button>
|
||
</ModalFooter>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
const handleConvertUnits = (emissionSourceConvertUnits) => {
|
||
const existingUnitIds =
|
||
emissionSourceConvertUnits?.map((item) => item.unit.id) || [];
|
||
const missingUnits = datasStore.consuptionUnits.filter(
|
||
(unit) => !existingUnitIds.includes(unit.id)
|
||
);
|
||
const convertUnitsOfSelectedSource = [
|
||
...(emissionSourceConvertUnits || []),
|
||
...missingUnits.map((unit) => ({
|
||
unit: { id: unit.id, tag: unit.tag },
|
||
value: "", // You can set the default value for missing units here
|
||
})),
|
||
];
|
||
return convertUnitsOfSelectedSource;
|
||
};
|
||
|
||
const handleEditEmissionSource = (selectedSource) => {
|
||
const sectorOfSelectedSource = {
|
||
value: selectedSource?.subSector?.sector?.id,
|
||
label: selectedSource?.subSector?.sector?.tag,
|
||
};
|
||
const subSectorOfSelectedSource = {
|
||
value: selectedSource?.subSector?.id,
|
||
label: selectedSource?.subSector?.tag,
|
||
};
|
||
const emissionScopeOfSelectedSource = {
|
||
value: selectedSource?.emissionScope,
|
||
label: selectedSource?.emissionScope
|
||
? "Kapsam-" + selectedSource?.emissionScope
|
||
: "",
|
||
};
|
||
const convertUnitsOfSelectedSource =
|
||
selectedSource?.emissionSourceConvertUnits?.map((item) => ({
|
||
...item,
|
||
value: item.value.toString(),
|
||
}));
|
||
|
||
const wasteEmissionSourceSupplementOfSelectedSource = {
|
||
dryWeightCH4:
|
||
selectedSource?.wasteEmissionSourceSupplement?.dryWeightCH4 || 0,
|
||
wetWeightCH4:
|
||
selectedSource?.wasteEmissionSourceSupplement?.wetWeightCH4 || 0,
|
||
dryWeightN2O:
|
||
selectedSource?.wasteEmissionSourceSupplement?.dryWeightN2O || 0,
|
||
wetWeightN2O:
|
||
selectedSource?.wasteEmissionSourceSupplement?.wetWeightN2O || 0,
|
||
dampWeightCH4:
|
||
selectedSource?.wasteEmissionSourceSupplement?.dampWeightCH4 || 0,
|
||
};
|
||
setSelectedSector(selectedSource?.subSector?.sector?.id);
|
||
setShowAddEmissionSourceModal(true);
|
||
setEditingEmissionSourceData({
|
||
id: selectedSource.id,
|
||
tag: selectedSource?.tag,
|
||
description: selectedSource?.description || "-",
|
||
subSector: selectedSource?.subSector,
|
||
co2: selectedSource?.co2,
|
||
ch4: selectedSource?.ch4,
|
||
n2o: selectedSource?.n2o,
|
||
sector: sectorOfSelectedSource,
|
||
subSector: subSectorOfSelectedSource,
|
||
emissionScope: emissionScopeOfSelectedSource,
|
||
emissionSourceConvertUnits: convertUnitsOfSelectedSource,
|
||
wasteEmissionSourceSupplement:
|
||
wasteEmissionSourceSupplementOfSelectedSource,
|
||
});
|
||
};
|
||
|
||
const handleDeleteEmissionSource = async (selectedSource) => {
|
||
const result = await Swal.fire({
|
||
title: `${selectedSource.tag}, ${t("Warnings.sureForDelete")}`,
|
||
text: t("Warnings.notUndone"),
|
||
icon: "warning",
|
||
showCancelButton: true,
|
||
confirmButtonText: t("Cruds.delete"),
|
||
cancelButtonText: t("Cruds.cancel"),
|
||
customClass: {
|
||
confirmButton: "btn btn-primary",
|
||
cancelButton: "btn btn-danger ml-1",
|
||
},
|
||
buttonsStyling: false,
|
||
});
|
||
if (result.value !== null && result.value === true) {
|
||
dispatch(deleteEmissionSource(selectedSource.id));
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div style={{ marginTop: "2%" }}>
|
||
<Card>
|
||
<CardHeader className="border-bottom">
|
||
<CardTitle tag="h4">{t("EmissionSources.emissionSources")}</CardTitle>
|
||
{permissionCheck("emission_source_create") && (
|
||
<Button
|
||
className="ml-2"
|
||
color="primary"
|
||
onClick={onAddEmissionSourceButtonPressed}
|
||
>
|
||
<Plus size={15} />
|
||
<span className="align-middle ml-50">
|
||
{t("EmissionSources.addEmissionSource")}
|
||
</span>
|
||
</Button>
|
||
)}
|
||
</CardHeader>
|
||
<Row className="mx-0 mt-1 mb-50">
|
||
<Col sm="6" md="2">
|
||
<div className="d-flex align-items-center">
|
||
<Label for="sort-select">{t("Show")}</Label>
|
||
<Input
|
||
className="ml-1 dataTable-select"
|
||
type="select"
|
||
id="sort-select"
|
||
value={rowsPerPage}
|
||
onChange={(e) => handlePerPage(e)}
|
||
>
|
||
<option value={5}>5</option>
|
||
<option value={10}>10</option>
|
||
<option value={25}>25</option>
|
||
<option value={50}>50</option>
|
||
<option value={75}>75</option>
|
||
<option value={100}>100</option>
|
||
</Input>
|
||
</div>
|
||
</Col>
|
||
<Col sm="6" md="3" className="mt-1">
|
||
{permissionCheck("deleted_items") && (
|
||
<div className="ml-4">
|
||
<Input
|
||
className="dataTable-select"
|
||
id="deleted-checkbox"
|
||
type="checkbox"
|
||
checked={showDeletedEmissionSource}
|
||
onChange={(e) => {
|
||
setShowDeletedEmissionSource(e.target.checked);
|
||
setCurrentPage(1);
|
||
}}
|
||
/>
|
||
<Label for="deleted-checkbox">
|
||
{t("EmissionSources.showDeletedEmissionSource")}
|
||
</Label>
|
||
</div>
|
||
)}
|
||
</Col>
|
||
<Col
|
||
className="d-flex align-items-center justify-content-end mt-sm-0 mt-1 ml-md-auto"
|
||
sm="6"
|
||
md="4"
|
||
>
|
||
<Input
|
||
className="ml-1 mr-1 dataTable-select"
|
||
type="select"
|
||
id="sort-select"
|
||
value={selectedSectorFilter ? selectedSectorFilter : ""}
|
||
onChange={(e) => {
|
||
setSelectedSectorFilter(e.target.value);
|
||
setCurrentPage(1);
|
||
}}
|
||
>
|
||
<option value={""}>{t("EmissionSources.sector")}</option>
|
||
{sectorsOptions.map((sector, index) => (
|
||
<option key={index} value={sector.value}>
|
||
{sector.label}
|
||
</option>
|
||
))}
|
||
</Input>
|
||
<Input
|
||
className="dataTable-filter"
|
||
type="text"
|
||
bsSize="ml"
|
||
id="search-input"
|
||
value={searchValue}
|
||
onChange={handleFilter}
|
||
placeholder={t("ByName") + " " + t("Filter")}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
<DataTable
|
||
noHeader
|
||
pagination
|
||
paginationServer
|
||
className="react-dataTable"
|
||
columns={serverSideColumns}
|
||
sortIcon={<ChevronDown size={10} />}
|
||
paginationComponent={CustomPagination}
|
||
data={emissionSources}
|
||
noDataComponent={
|
||
<p className="p-2">
|
||
{t("EmissionSources.emissionSource")}
|
||
{t("Warnings.notFound")}
|
||
</p>
|
||
}
|
||
/>
|
||
</Card>
|
||
{renderEmissionSourceModal()}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default EmissionSource;
|