forked from BLC/sgeUpdated
Add 'sge-frontend/' from commit '5fa787e054b25ac53edc7ff0275ea7960a709401'
git-subtree-dir: sge-frontend git-subtree-mainline:876c278ac4git-subtree-split:5fa787e054
This commit is contained in:
718
sge-frontend/src/views/Areas/Areas.js
Normal file
718
sge-frontend/src/views/Areas/Areas.js
Normal file
@@ -0,0 +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 (
|
||||
<span style={{ display: "flex", flexDirection: "column" }}>
|
||||
{uniqueCountryNames.map((name, idx) => (
|
||||
<span key={idx}>{name}</span>
|
||||
))}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
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 (
|
||||
<span style={{ display: "flex", flexDirection: "column" }}>
|
||||
{uniqueAreaStrings.map((str, idx) => (
|
||||
<span key={idx}>{str}</span>
|
||||
))}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
name: t("Actions"),
|
||||
allowOverflow: false,
|
||||
maxWidth: "150px",
|
||||
cell: (row) => {
|
||||
return (
|
||||
<div className="d-flex">
|
||||
<UncontrolledDropdown>
|
||||
<DropdownToggle className="pl-1" tag="span">
|
||||
<MoreVertical size={15} />
|
||||
</DropdownToggle>
|
||||
<DropdownMenu container={"body"} end>
|
||||
{permissionCheck("area_update") && (
|
||||
<DropdownItem
|
||||
tag="a"
|
||||
className="w-100"
|
||||
onClick={() => handleEditArea(row)}
|
||||
>
|
||||
<Edit size={15} />
|
||||
<span className="align-middle ml-50">
|
||||
{t("Cruds.edit")}
|
||||
</span>
|
||||
</DropdownItem>
|
||||
)}
|
||||
{permissionCheck("area_delete") && (
|
||||
<DropdownItem
|
||||
tag="a"
|
||||
className="w-100"
|
||||
onClick={() => handleDeleteArea(row)}
|
||||
>
|
||||
<Trash size={15} />
|
||||
<span className="align-middle ml-50">
|
||||
{t("Cruds.delete")}
|
||||
</span>
|
||||
</DropdownItem>
|
||||
)}
|
||||
</DropdownMenu>
|
||||
</UncontrolledDropdown>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
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 (
|
||||
<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 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 (
|
||||
<Modal
|
||||
isOpen={showAddAreaModal}
|
||||
toggle={() => {
|
||||
setShowAddAreaModal(!showAddAreaModal);
|
||||
//setEditingAreaData(null);
|
||||
}}
|
||||
className="modal-dialog-centered"
|
||||
>
|
||||
<ModalHeader
|
||||
toggle={() => {
|
||||
setShowAddAreaModal(!showAddAreaModal);
|
||||
//setEditingAreaData(null);
|
||||
}}
|
||||
>
|
||||
{editingAreaData?.id ? editingAreaData?.tag : t("Areas.addArea")}
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
<div className="mb-2">
|
||||
<Label className="form-label" for="area-tag">
|
||||
{t("Areas.areaName")}:
|
||||
</Label>
|
||||
<Input
|
||||
type="text"
|
||||
id="area-tag"
|
||||
placeholder=""
|
||||
defaultValue={editingAreaData?.tag}
|
||||
onChange={(e) => {
|
||||
setEditingAreaData({
|
||||
...editingAreaData,
|
||||
tag: e.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Label className="form-label" for="city-name">
|
||||
{t("Areas.city")}:
|
||||
</Label>
|
||||
<Select
|
||||
id="city-name"
|
||||
placeholder=""
|
||||
options={cities}
|
||||
className="react-select"
|
||||
isClearable={false}
|
||||
closeMenuOnSelect={false}
|
||||
isMulti
|
||||
filterOption={customFilterForSelect}
|
||||
defaultValue={editingAreaData?.cities}
|
||||
onChange={(value) => {
|
||||
setSelectedCity(value);
|
||||
setEditingAreaData({
|
||||
...editingAreaData,
|
||||
cities: value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-2">
|
||||
<Label className="form-label" for="district-name">
|
||||
{t("Areas.district")}:
|
||||
</Label>
|
||||
<Select
|
||||
id="district-name"
|
||||
isClearable={false}
|
||||
closeMenuOnSelect={false}
|
||||
isMulti
|
||||
className="react-select"
|
||||
placeholder=""
|
||||
filterOption={customFilterForSelect}
|
||||
options={districts}
|
||||
defaultValue={editingAreaData?.districts}
|
||||
onChange={(value) => {
|
||||
setSelectedDistrict(value);
|
||||
setEditingAreaData({
|
||||
...editingAreaData,
|
||||
districts: value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-2">
|
||||
<Label className="form-label" for="neighborhoods-name">
|
||||
{t("Areas.neighborhood")}:
|
||||
</Label>
|
||||
<Select
|
||||
id="neighborhoods-name"
|
||||
isClearable={false}
|
||||
closeMenuOnSelect={false}
|
||||
isMulti
|
||||
className="react-select"
|
||||
placeholder=""
|
||||
filterOption={customFilterForSelect}
|
||||
options={neighborhoods}
|
||||
defaultValue={editingAreaData?.neighborhoods}
|
||||
onChange={(value) => {
|
||||
setEditingAreaData({
|
||||
...editingAreaData,
|
||||
neighborhoods: value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button
|
||||
color="primary"
|
||||
onClick={(e) => {
|
||||
onAddAreaModalButtonPressed();
|
||||
}}
|
||||
>
|
||||
{editingAreaData?.id ? t("Cruds.update") : t("Cruds.save")}
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
const handleDeleteArea = async (selectedArea) => {
|
||||
const result = await Swal.fire({
|
||||
title: ` ${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(deleteArea(selectedArea.id.trim()))
|
||||
.then(() => {
|
||||
enqueueSnackbar(
|
||||
`${selectedArea.tag} ${t("Warnings.deletedSuccessfully")}`,
|
||||
{
|
||||
variant: "success",
|
||||
}
|
||||
);
|
||||
})
|
||||
.catch((e) => {
|
||||
enqueueSnackbar(`${selectedArea.tag} ${t("Warnings.deletedFail")}`, {
|
||||
variant: "error",
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditArea = (selectedArea) => {
|
||||
const selectedCities = (selectedArea.cities || []).map((city) => ({
|
||||
value: city?.id,
|
||||
label: city?.name,
|
||||
}));
|
||||
|
||||
const selectedDistricts = (selectedArea.districts || []).map(
|
||||
(district) => ({
|
||||
value: district?.id,
|
||||
label: district?.name,
|
||||
})
|
||||
);
|
||||
|
||||
const selectedCitiesOfDistricts = (selectedArea.districts || [])
|
||||
.map((district) => ({
|
||||
value: district?.city?.id,
|
||||
label: district?.city?.name,
|
||||
}))
|
||||
.filter(
|
||||
(tag, index, array) =>
|
||||
array.findIndex(
|
||||
(t) => t.value === tag.value && t.label === tag.label
|
||||
) === index
|
||||
);
|
||||
|
||||
const selectedNeighborhoods = (selectedArea.neighborhoods || []).map(
|
||||
(neighborhood) => ({
|
||||
value: neighborhood?.id,
|
||||
label:
|
||||
neighborhood?.name +
|
||||
"-" +
|
||||
neighborhood?.district?.name +
|
||||
"-" +
|
||||
neighborhood?.district?.city?.name,
|
||||
})
|
||||
);
|
||||
|
||||
const selectedCitiesOfNeighborhoods = (selectedArea.neighborhoods || [])
|
||||
.map((neighborhood) => ({
|
||||
value: neighborhood?.district?.city?.id,
|
||||
label: neighborhood?.district?.city?.name,
|
||||
}))
|
||||
.filter(
|
||||
(tag, index, array) =>
|
||||
array.findIndex(
|
||||
(t) => t.value === tag.value && t.label === tag.label
|
||||
) === index
|
||||
);
|
||||
|
||||
const selectedDistrictsOfNeighborhoods = (selectedArea.neighborhoods || [])
|
||||
.map((neighborhood) => ({
|
||||
value: neighborhood?.district?.id,
|
||||
label:
|
||||
neighborhood?.district?.name +
|
||||
"-" +
|
||||
neighborhood?.district?.city?.name,
|
||||
}))
|
||||
.filter(
|
||||
(tag, index, array) =>
|
||||
array.findIndex(
|
||||
(t) => t.value === tag.value && t.label === tag.label
|
||||
) === index
|
||||
);
|
||||
|
||||
setShowAddAreaModal(true);
|
||||
|
||||
setEditingAreaData({
|
||||
...selectedArea,
|
||||
cities:
|
||||
selectedCitiesOfNeighborhoods.length === 0
|
||||
? selectedCitiesOfDistricts.length === 0
|
||||
? selectedCities
|
||||
: selectedCitiesOfDistricts
|
||||
: selectedCitiesOfNeighborhoods,
|
||||
districts:
|
||||
selectedDistrictsOfNeighborhoods.length === 0
|
||||
? selectedDistricts
|
||||
: selectedDistrictsOfNeighborhoods,
|
||||
neighborhoods: selectedNeighborhoods,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ marginTop: "2%" }}>
|
||||
<Card>
|
||||
<CardHeader className="border-bottom">
|
||||
<CardTitle tag="h4">{t("Areas.areas")}</CardTitle>
|
||||
{permissionCheck("area_create") && (
|
||||
<Button
|
||||
className="ml-2"
|
||||
color="primary"
|
||||
onClick={onAddAreaButtonPressed}
|
||||
>
|
||||
<Plus size={15} />
|
||||
<span className="align-middle ml-50">{t("Areas.addArea")}</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
|
||||
className="d-flex align-items-center justify-content-end mt-sm-0 mt-1 ml-md-auto"
|
||||
sm="6"
|
||||
md="3"
|
||||
>
|
||||
<Label className="mr-1" for="search-input">
|
||||
{t("Filter")}
|
||||
</Label>
|
||||
<Input
|
||||
className="dataTable-filter"
|
||||
type="text"
|
||||
bsSize="sm"
|
||||
id="search-input"
|
||||
value={searchValue}
|
||||
onChange={handleFilter}
|
||||
placeholder={t("ByName")}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<DataTable
|
||||
noHeader
|
||||
pagination
|
||||
paginationServer
|
||||
className="react-dataTable"
|
||||
columns={serverSideColumns}
|
||||
sortIcon={<ChevronDown size={10} />}
|
||||
//onSort={onSort}
|
||||
paginationComponent={CustomPagination}
|
||||
data={[...areas]}
|
||||
noDataComponent={
|
||||
<p className="p-2">
|
||||
{t("Areas.area")}
|
||||
{t("Warnings.notFound")}
|
||||
</p>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
{renderAreaModal()}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Areas;
|
||||
Reference in New Issue
Block a user