diff --git a/sge-frontend/src/views/Areas/Areas.js b/sge-frontend/src/views/Areas/Areas.js index abdae25..8ec2819 100644 --- a/sge-frontend/src/views/Areas/Areas.js +++ b/sge-frontend/src/views/Areas/Areas.js @@ -1,718 +1,718 @@ -import React, { useEffect, useState } from "react"; -import { ChevronDown, Edit, MoreVertical, Plus, Trash } from "react-feather"; -import ReactPaginate from "react-paginate"; -import { useDispatch, useSelector } from "react-redux"; -import { useSnackbar } from "notistack"; -import { - Card, - CardHeader, - CardTitle, - Input, - Label, - Row, - Col, - Button, - Modal, - ModalHeader, - ModalBody, - ModalFooter, - UncontrolledDropdown, - DropdownToggle, - DropdownMenu, - DropdownItem, -} from "reactstrap"; -import { default as SweetAlert } from "sweetalert2"; -import withReactContent from "sweetalert2-react-content"; -import DataTable from "react-data-table-component"; -import { useTranslation } from "react-i18next"; -import Select from "react-select"; -import { - getAreasWithPaginate, - addArea, - updateArea, - deleteArea, -} from "../../redux/actions/areas"; -import { getCities } from "../../redux/actions/cities"; -import { getCity } from "../../redux/actions/city"; -import { getDistrict } from "../../redux/actions/district"; -import { customFilterForSelect } from "../../utility/Utils"; -import { permissionCheck } from "../../components/permission-check"; - -const Areas = () => { - const { t } = useTranslation(); - const initialColumns = [ - { - name: t("Areas.areaName"), - selector: (row) => row.tag, - sortable: true, - minWidth: "250px", - }, - { - name: t("Areas.countryName"), - selector: (row) => row.countries, - sortable: true, - minWidth: "250px", - cell: (row) => { - // Collect all possible country names - const countryNames = [ - row.neighborhoods?.[0]?.district?.city?.country?.name, - row.districts?.[0]?.city?.country?.name, - row.cities?.[0]?.country?.name, - row.countries?.[0]?.name, - ].filter(Boolean); - // Remove duplicates - const uniqueCountryNames = countryNames.filter( - (v, i, a) => a.indexOf(v) === i - ); - return ( - - {uniqueCountryNames.map((name, idx) => ( - {name} - ))} - - ); - }, - }, - { - name: t("Areas.areas"), - selector: (row) => row.areas, // Bura boştu "". - sortable: true, - minWidth: "350px", - cell: (row) => { - // Collect all area strings - const areaStrings = [ - ...(row.neighborhoods?.map((neighborhood) => - neighborhood?.name + - " - " + - neighborhood?.district?.name + - " - " + - neighborhood?.district?.city?.name - ) || []), - ...(row.districts?.map((district) => - district?.name + " - " + district?.city?.name - ) || []), - ...(row.cities?.map((city) => city?.name) || []) - ].filter(Boolean); - // Remove duplicates (case-insensitive, trimmed) - const uniqueAreaStrings = areaStrings.filter((v, i, a) => - a.findIndex(x => x && x.trim().toLowerCase() === v.trim().toLowerCase()) === i - ); - return ( - - {uniqueAreaStrings.map((str, idx) => ( - {str} - ))} - - ); - }, - }, - - { - name: t("Actions"), - allowOverflow: false, - maxWidth: "150px", - cell: (row) => { - return ( -
- - - - - - {permissionCheck("area_update") && ( - handleEditArea(row)} - > - - - {t("Cruds.edit")} - - - )} - {permissionCheck("area_delete") && ( - handleDeleteArea(row)} - > - - - {t("Cruds.delete")} - - - )} - - -
- ); - }, - }, - ]; - - useEffect(() => { - if (!(permissionCheck("area_update") || permissionCheck("area_delete"))) { - const updatedColumns = initialColumns.filter( - (column) => column.name !== ("Aksiyonlar" || "Actions") - ); - setServerSideColumns(updatedColumns); - } - }, []); - - const Swal = withReactContent(SweetAlert); - const { enqueueSnackbar } = useSnackbar(); - const dispatch = useDispatch(); - - const [currentPage, setCurrentPage] = useState(1); - const [rowsPerPage, setRowsPerPage] = useState(5); - const [searchValue, setSearchValue] = useState(""); - - const [serverSideColumns, setServerSideColumns] = useState(initialColumns); - - const citiesStore = useSelector((state) => state.cities); - const [cities, setCities] = useState([]); - const cityStore = useSelector((state) => state.city); - const [selectedCity, setSelectedCity] = useState(); - - const [districts, setDistricts] = useState([]); - const districtStore = useSelector((state) => state.district); - const [selectedDistrict, setSelectedDistrict] = useState(); - - const [neighborhoods, setNeighborhoods] = useState([]); - - const areasStore = useSelector((state) => state.areas); - const [areas, setAreas] = useState([]); - const [showAddAreaModal, setShowAddAreaModal] = useState(false); - const [editingAreaData, setEditingAreaData] = useState(); - - useEffect(() => { - dispatch(getAreasWithPaginate({ currentPage, rowsPerPage })); - }, [currentPage, rowsPerPage]); - - useEffect(() => { - if (areasStore?.areasWithPaginate?.content) { - setAreas(areasStore?.areasWithPaginate?.content); - } - }, [areasStore.areasWithPaginate?.content]); - - useEffect(() => { - dispatch(getCities()); - }, []); - - useEffect(() => { - if (selectedCity != undefined) { - dispatch(getCity(selectedCity?.[selectedCity?.length - 1]?.value)); - } - }, [selectedCity]); - - useEffect(() => { - if (selectedDistrict != undefined && selectedDistrict.length != 0) { - dispatch( - getDistrict(selectedDistrict?.[selectedDistrict?.length - 1]?.value) - ); - } - }, [selectedDistrict]); - - useEffect(() => { - if (citiesStore) { - setCities( - citiesStore.cities?.map((city) => { - return { - value: city?.id, - label: city?.name, - }; - }) - ); - } - }, [citiesStore?.cities.length, citiesStore]); - - useEffect(() => { - if (cityStore?.city) { - const list = - cityStore.city.districts?.map((district) => ({ - value: district.id, - label: `${district.name} - ${cityStore.city.name}`, - })) || []; - setDistricts((prevDistricts) => [...prevDistricts, ...list]); - } - }, [selectedCity, cityStore?.city]); - - useEffect(() => { - if (districtStore?.district) { - const list2 = - districtStore.district.neighborhoods?.map((neighborhood) => ({ - value: neighborhood.id, - label: `${neighborhood.name} - ${districtStore.district.name} - ${districtStore.district.city.name}`, - })) || []; - setNeighborhoods((prevNeighborhoods) => [...prevNeighborhoods, ...list2]); - } - }, [selectedDistrict, districtStore?.district]); - - const handleFilter = (e) => { - setSearchValue(e.target.value); - - if (e.target.value !== "") { - setAreas( - areasStore.areasWithPaginate?.content.filter((area) => - area.tag - .toUpperCase() - .normalize("NFD") - .replace(/[\u0300-\u036f]/g, "") - .includes( - e.target.value - .toUpperCase() - .normalize("NFD") - .replace(/[\u0300-\u036f]/g, "") - ) - ) - ); - } else { - setAreas(areasStore.areasWithPaginate?.content); - } - }; - - const handlePagination = (page) => { - setCurrentPage(page.selected + 1); - setAreas(areasStore.areasWithPaginate?.content); - }; - - const handlePerPage = (e) => { - setCurrentPage(1); - setRowsPerPage(parseInt(e.target.value)); - setAreas(areasStore.areasWithPaginate?.content); - }; - - const CustomPagination = () => { - const count = Number( - ( - areasStore?.areasWithPaginate?.pageInfo?.totalElements / rowsPerPage - ).toFixed(1) - ); - - return ( - 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 onAddAreaButtonPressed = () => { - setEditingAreaData({}); - setNeighborhoods([]); - setDistricts([]); - setSelectedCity(); - setSelectedDistrict(); - dispatch({ type: "GET_CITY", payload: { city: [] } }); - dispatch({ type: "GET_DISTRICT", payload: { district: [] } }); - setShowAddAreaModal(true); - }; - const onAddAreaModalButtonPressed = () => { - const arr = ( - editingAreaData?.neighborhoods || - editingAreaData?.districts || - editingAreaData?.cities || - [] - ).map((s) => s?.value || s.toString()); - const newAreaData = { - id: editingAreaData?.id || null, - tag: editingAreaData?.tag, - cities: - editingAreaData?.districts || !editingAreaData?.cities ? null : arr, - districts: - editingAreaData?.neighborhoods || !editingAreaData?.districts - ? null - : arr, - neighborhoods: editingAreaData?.neighborhoods ? arr : null, - }; - - const check = JSON.parse(JSON.stringify(newAreaData), (key, value) => - value === null || value === "" ? undefined : value - ); - - const deleteQuete = (list) => { - return list?.map((a) => a?.value || a.toString()); - }; - - const updateAreaData = { - id: editingAreaData?.id, - tag: editingAreaData?.tag, - cities: - editingAreaData?.districts?.length != 0 || - editingAreaData?.neighborhoods?.length != 0 - ? [] - : deleteQuete(editingAreaData?.cities), - districts: - editingAreaData?.neighborhoods?.length === 0 && - editingAreaData?.districts?.length != 0 - ? deleteQuete(editingAreaData?.districts) - : [], - neighborhoods: - editingAreaData?.neighborhoods?.length != 0 - ? deleteQuete(editingAreaData?.neighborhoods) - : [], - }; - const checkUpdateData = JSON.parse( - JSON.stringify(updateAreaData), - (key, value) => (value === null || value === "" ? undefined : value) - ); - - dispatch(newAreaData.id ? updateArea(checkUpdateData) : addArea(check)) - .then(() => { - enqueueSnackbar( - `${newAreaData.tag}, ${ - !newAreaData.id - ? t("Warnings.addedSuccessfully") - : t("Warnings.updatedSuccessfully") - }`, - { - variant: "success", - } - ); - setEditingAreaData(null); - setShowAddAreaModal(false); - }) - .catch((e) => { - enqueueSnackbar( - `${newAreaData.tag} ${ - !newAreaData.id - ? t("Warnings.addedFail") - : t("Warnings.updatedFail") - }`, - { - variant: "error", - } - ); - }); - }; - const renderAreaModal = () => { - return ( - { - setShowAddAreaModal(!showAddAreaModal); - //setEditingAreaData(null); - }} - className="modal-dialog-centered" - > - { - setShowAddAreaModal(!showAddAreaModal); - //setEditingAreaData(null); - }} - > - {editingAreaData?.id ? editingAreaData?.tag : t("Areas.addArea")} - - -
- - { - setEditingAreaData({ - ...editingAreaData, - tag: e.target.value, - }); - }} - /> -
-
- - { - setSelectedDistrict(value); - setEditingAreaData({ - ...editingAreaData, - districts: value, - }); - }} - /> -
- -
- - handlePerPage(e)} - > - - - - - - - -
- - - - - - - } - //onSort={onSort} - paginationComponent={CustomPagination} - data={[...areas]} - noDataComponent={ -

- {t("Areas.area")} - {t("Warnings.notFound")} -

- } - /> - - {renderAreaModal()} - - ); -}; - -export default Areas; +import React, { useEffect, useState } from "react"; +import { ChevronDown, Edit, MoreVertical, Plus, Trash } from "react-feather"; +import ReactPaginate from "react-paginate"; +import { useDispatch, useSelector } from "react-redux"; +import { useSnackbar } from "notistack"; +import { + Card, + CardHeader, + CardTitle, + Input, + Label, + Row, + Col, + Button, + Modal, + ModalHeader, + ModalBody, + ModalFooter, + UncontrolledDropdown, + DropdownToggle, + DropdownMenu, + DropdownItem, +} from "reactstrap"; +import { default as SweetAlert } from "sweetalert2"; +import withReactContent from "sweetalert2-react-content"; +import DataTable from "react-data-table-component"; +import { useTranslation } from "react-i18next"; +import Select from "react-select"; +import { + getAreasWithPaginate, + addArea, + updateArea, + deleteArea, +} from "../../redux/actions/areas"; +import { getCities } from "../../redux/actions/cities"; +import { getCity } from "../../redux/actions/city"; +import { getDistrict } from "../../redux/actions/district"; +import { customFilterForSelect } from "../../utility/Utils"; +import { permissionCheck } from "../../components/permission-check"; + +const Areas = () => { + const { t } = useTranslation(); + const initialColumns = [ + { + name: t("Areas.areaName"), + selector: (row) => row.tag, + sortable: true, + minWidth: "250px", + }, + { + name: t("Areas.countryName"), + selector: (row) => row.countries, + sortable: true, + minWidth: "250px", + cell: (row) => { + // Collect all possible country names + const countryNames = [ + row.neighborhoods?.[0]?.district?.city?.country?.name, + row.districts?.[0]?.city?.country?.name, + row.cities?.[0]?.country?.name, + row.countries?.[0]?.name, + ].filter(Boolean); + // Remove duplicates + const uniqueCountryNames = countryNames.filter( + (v, i, a) => a.indexOf(v) === i + ); + return ( + + {uniqueCountryNames.map((name, idx) => ( + {name} + ))} + + ); + }, + }, + { + name: t("Areas.areas"), + selector: (row) => row.areas, // Bura boştu "". + sortable: true, + minWidth: "350px", + cell: (row) => { + // Collect all area strings + const areaStrings = [ + ...(row.neighborhoods?.map((neighborhood) => + neighborhood?.name + + " - " + + neighborhood?.district?.name + + " - " + + neighborhood?.district?.city?.name + ) || []), + ...(row.districts?.map((district) => + district?.name + " - " + district?.city?.name + ) || []), + ...(row.cities?.map((city) => city?.name) || []) + ].filter(Boolean); + // Remove duplicates (case-insensitive, trimmed) + const uniqueAreaStrings = areaStrings.filter((v, i, a) => + a.findIndex(x => x && x.trim().toLowerCase() === v.trim().toLowerCase()) === i + ); + return ( + + {uniqueAreaStrings.map((str, idx) => ( + {str} + ))} + + ); + }, + }, + + { + name: t("Actions"), + allowOverflow: false, + maxWidth: "150px", + cell: (row) => { + return ( +
+ + + + + + {permissionCheck("area_update") && ( + handleEditArea(row)} + > + + + {t("Cruds.edit")} + + + )} + {permissionCheck("area_delete") && ( + handleDeleteArea(row)} + > + + + {t("Cruds.delete")} + + + )} + + +
+ ); + }, + }, + ]; + + useEffect(() => { + if (!(permissionCheck("area_update") || permissionCheck("area_delete"))) { + const updatedColumns = initialColumns.filter( + (column) => column.name !== ("Aksiyonlar" || "Actions") + ); + setServerSideColumns(updatedColumns); + } + }, []); + + const Swal = withReactContent(SweetAlert); + const { enqueueSnackbar } = useSnackbar(); + const dispatch = useDispatch(); + + const [currentPage, setCurrentPage] = useState(1); + const [rowsPerPage, setRowsPerPage] = useState(5); + const [searchValue, setSearchValue] = useState(""); + + const [serverSideColumns, setServerSideColumns] = useState(initialColumns); + + const citiesStore = useSelector((state) => state.cities); + const [cities, setCities] = useState([]); + const cityStore = useSelector((state) => state.city); + const [selectedCity, setSelectedCity] = useState(); + + const [districts, setDistricts] = useState([]); + const districtStore = useSelector((state) => state.district); + const [selectedDistrict, setSelectedDistrict] = useState(); + + const [neighborhoods, setNeighborhoods] = useState([]); + + const areasStore = useSelector((state) => state.areas); + const [areas, setAreas] = useState([]); + const [showAddAreaModal, setShowAddAreaModal] = useState(false); + const [editingAreaData, setEditingAreaData] = useState(); + + useEffect(() => { + dispatch(getAreasWithPaginate({ currentPage, rowsPerPage })); + }, [currentPage, rowsPerPage]); + + useEffect(() => { + if (areasStore?.areasWithPaginate?.content) { + setAreas(areasStore?.areasWithPaginate?.content); + } + }, [areasStore.areasWithPaginate?.content]); + + useEffect(() => { + dispatch(getCities()); + }, []); + + useEffect(() => { + if (selectedCity != undefined) { + dispatch(getCity(selectedCity?.[selectedCity?.length - 1]?.value)); + } + }, [selectedCity]); + + useEffect(() => { + if (selectedDistrict != undefined && selectedDistrict.length != 0) { + dispatch( + getDistrict(selectedDistrict?.[selectedDistrict?.length - 1]?.value) + ); + } + }, [selectedDistrict]); + + useEffect(() => { + if (citiesStore) { + setCities( + citiesStore.cities?.map((city) => { + return { + value: city?.id, + label: city?.name, + }; + }) + ); + } + }, [citiesStore?.cities.length, citiesStore]); + + useEffect(() => { + if (cityStore?.city) { + const list = + cityStore.city.districts?.map((district) => ({ + value: district.id, + label: `${district.name} - ${cityStore.city.name}`, + })) || []; + setDistricts((prevDistricts) => [...prevDistricts, ...list]); + } + }, [selectedCity, cityStore?.city]); + + useEffect(() => { + if (districtStore?.district) { + const list2 = + districtStore.district.neighborhoods?.map((neighborhood) => ({ + value: neighborhood.id, + label: `${neighborhood.name} - ${districtStore.district.name} - ${districtStore.district.city.name}`, + })) || []; + setNeighborhoods((prevNeighborhoods) => [...prevNeighborhoods, ...list2]); + } + }, [selectedDistrict, districtStore?.district]); + + const handleFilter = (e) => { + setSearchValue(e.target.value); + + if (e.target.value !== "") { + setAreas( + areasStore.areasWithPaginate?.content.filter((area) => + area.tag + .toUpperCase() + .normalize("NFD") + .replace(/[\u0300-\u036f]/g, "") + .includes( + e.target.value + .toUpperCase() + .normalize("NFD") + .replace(/[\u0300-\u036f]/g, "") + ) + ) + ); + } else { + setAreas(areasStore.areasWithPaginate?.content); + } + }; + + const handlePagination = (page) => { + setCurrentPage(page.selected + 1); + setAreas(areasStore.areasWithPaginate?.content); + }; + + const handlePerPage = (e) => { + setCurrentPage(1); + setRowsPerPage(parseInt(e.target.value)); + setAreas(areasStore.areasWithPaginate?.content); + }; + + const CustomPagination = () => { + const count = Number( + ( + areasStore?.areasWithPaginate?.pageInfo?.totalElements / rowsPerPage + ).toFixed(1) + ); + + return ( + 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 onAddAreaButtonPressed = () => { + setEditingAreaData({}); + setNeighborhoods([]); + setDistricts([]); + setSelectedCity(); + setSelectedDistrict(); + dispatch({ type: "GET_CITY", payload: { city: [] } }); + dispatch({ type: "GET_DISTRICT", payload: { district: [] } }); + setShowAddAreaModal(true); + }; + const onAddAreaModalButtonPressed = () => { + const arr = ( + editingAreaData?.neighborhoods || + editingAreaData?.districts || + editingAreaData?.cities || + [] + ).map((s) => s?.value || s.toString()); + const newAreaData = { + id: editingAreaData?.id || null, + tag: editingAreaData?.tag, + cities: + editingAreaData?.districts || !editingAreaData?.cities ? null : arr, + districts: + editingAreaData?.neighborhoods || !editingAreaData?.districts + ? null + : arr, + neighborhoods: editingAreaData?.neighborhoods ? arr : null, + }; + + const check = JSON.parse(JSON.stringify(newAreaData), (key, value) => + value === null || value === "" ? undefined : value + ); + + const deleteQuete = (list) => { + return list?.map((a) => a?.value || a.toString()); + }; + + const updateAreaData = { + id: editingAreaData?.id, + tag: editingAreaData?.tag, + cities: + editingAreaData?.districts?.length != 0 || + editingAreaData?.neighborhoods?.length != 0 + ? [] + : deleteQuete(editingAreaData?.cities), + districts: + editingAreaData?.neighborhoods?.length === 0 && + editingAreaData?.districts?.length != 0 + ? deleteQuete(editingAreaData?.districts) + : [], + neighborhoods: + editingAreaData?.neighborhoods?.length != 0 + ? deleteQuete(editingAreaData?.neighborhoods) + : [], + }; + const checkUpdateData = JSON.parse( + JSON.stringify(updateAreaData), + (key, value) => (value === null || value === "" ? undefined : value) + ); + + dispatch(newAreaData.id ? updateArea(checkUpdateData) : addArea(check)) + .then(() => { + enqueueSnackbar( + `${newAreaData.tag}, ${ + !newAreaData.id + ? t("Warnings.addedSuccessfully") + : t("Warnings.updatedSuccessfully") + }`, + { + variant: "success", + } + ); + setEditingAreaData(null); + setShowAddAreaModal(false); + }) + .catch((e) => { + enqueueSnackbar( + `${newAreaData.tag} ${ + !newAreaData.id + ? t("Warnings.addedFail") + : t("Warnings.updatedFail") + }`, + { + variant: "error", + } + ); + }); + }; + const renderAreaModal = () => { + return ( + { + setShowAddAreaModal(!showAddAreaModal); + //setEditingAreaData(null); + }} + className="modal-dialog-centered" + > + { + setShowAddAreaModal(!showAddAreaModal); + //setEditingAreaData(null); + }} + > + {editingAreaData?.id ? editingAreaData?.tag : t("Areas.addArea")} + + +
+ + { + setEditingAreaData({ + ...editingAreaData, + tag: e.target.value, + }); + }} + /> +
+
+ + { + setSelectedDistrict(value); + setEditingAreaData({ + ...editingAreaData, + districts: value, + }); + }} + /> +
+ +
+ + handlePerPage(e)} + > + + + + + + + +
+ + + + + + + } + //onSort={onSort} + paginationComponent={CustomPagination} + data={[...areas]} + noDataComponent={ +

+ {t("Areas.area")} + {t("Warnings.notFound")} +

+ } + /> + + {renderAreaModal()} + + ); +}; + +export default Areas;