sgeUpdated/sge-frontend/src/views/Areas/Areas.js

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;