admin/src/views/RetailDistributors/ModalPD.js

import React, { useState, useEffect, useRef, useCallback } from "react";
import axios from "axios";
import {
  Box,
  Typography,
  Grid,
  Paper,
  Dialog,
  DialogContent,
  DialogTitle,
  Button,
  TextField,
  DialogActions,
} from "@mui/material";
import { isAutheticated } from "../../auth";
import swal from "sweetalert";
import debounce from "lodash.debounce";

const PDmodal = ({ openPDModal, handleClosePDModal, refreshData, rdid }) => {
  const token = isAutheticated();
  const [modalPrincipalDistributors, setmodalPrincipalDistributors] = useState(
    []
  );
  const [modalTotalData, setModalTotalData] = useState(0);
  const [modalcurrentPage, setmodalCurrentPage] = useState(1);
  const [modalitemPerPage, setmodalItemPerPage] = useState(10);
  const [loading, setLoading] = useState(false);
  const pdnameRef = useRef();
  const pdmobileRef = useRef();

  const getprincipaldistributorData = async () => {
    setLoading(true);
    try {
      const res = await axios.get(`/api/v1/admin/users`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
        params: {
          page: modalcurrentPage,
          show: modalitemPerPage,
          name: pdnameRef.current?.value,
          mobileNumber: pdmobileRef.current?.value,
        },
      });
      setmodalPrincipalDistributors(res.data?.users);
      setModalTotalData(res.data?.totalUsers);
    } catch (err) {
      const msg = err?.response?.data?.message || "Something went wrong!";
      swal({
        title: "Error",
        text: msg,
        icon: "error",
        button: "Retry",
        dangerMode: true,
      });
    } finally {
      setLoading(false);
    }
  };

  const handlePDMap = (id) => {
    const data = {
      principal_distributor: id,
    };
    axios
      .put(`/api/mapped/${rdid}`, data, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
      .then((res) => {
        swal({
          title: "Success",
          text: "Principal Distributor mapped successfully!",
          icon: "success",
          button: "Ok",
        });
        refreshData(); // Call the refresh function
        handleClosePDModal();
      })
      .catch((err) => {
        const msg = err?.response?.data?.message || "Something went wrong!";
        swal({
          title: "Error",
          text: msg,
          icon: "error",
          button: "Retry",
          dangerMode: true,
        });
      });
  };

  useEffect(() => {
    getprincipaldistributorData();
  }, [modalcurrentPage]);

  const handleInputChange = useCallback(
    debounce(() => {
      getprincipaldistributorData();
    }, 1000),
    []
  );
  const handleNextPage = () => {
    setmodalCurrentPage((prev) => prev + 1);
  };
  const handlePreviousPage = () => {
    setmodalCurrentPage((prev) => prev - 1);
  };
  return (
    <Dialog
      open={openPDModal}
      onClose={handleClosePDModal}
      fullWidth
      maxWidth="lg"
    >
      <DialogTitle>Map Principal Distributor</DialogTitle>
      <DialogTitle>Search and Add Principal Distributor</DialogTitle>
      <DialogContent>
        <div
          style={{
            display: "flex",
            gap: "16px",
            marginBottom: "2rem",
            marginTop: "-1rem",
          }}
        >
          <TextField
            label="Principal Distributor Name"
            placeholder="Principal Distributor name"
            inputRef={pdnameRef}
            onChange={handleInputChange}
            disabled={loading}
            style={{ flex: 1, marginRight: "16px" }}
          />
          <TextField
            style={{ flex: 1 }}
            label="Mobile Number"
            placeholder="Mobile Number"
            inputRef={pdmobileRef}
            onChange={handleInputChange}
            disabled={loading}
          />
        </div>
        <div className="table-responsive table-shoot mt-3">
          <table className="table table-centered table-nowrap">
            <thead>
              <tr>
                <th>Id</th>
                <th>SBU</th>
                <th>Name</th>
                <th>Mobile</th>
                <th>Email</th>
                <th>SC</th>
                <th>TM</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              {modalPrincipalDistributors.length > 0 ? (
                modalPrincipalDistributors.map((PD) => (
                  <tr key={PD._id}>
                    <td>{PD.uniqueId}</td>
                    <td>{PD.SBU}</td>
                    <td>{PD.name}</td>
                    <td>{PD.phone}</td>
                    <td>{PD.email}</td>
                    <td>{PD.mappedbySC?.name || "N/A"}</td>
                    <td>{PD.mappedby?.name || "N/A"}</td>
                    <td>
                      <Button
                        variant="contained"
                        color="primary"
                        onClick={() => handlePDMap(PD._id)}
                      >
                        Add
                      </Button>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan="8" className="text-center">
                    No Principal Distributor found!
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
        <div className="d-flex justify-content-between">
          <div>
            Showing {modalPrincipalDistributors.length} of {modalTotalData}{" "}
            entries
          </div>
          <div>
            <Button
              onClick={handlePreviousPage}
              disabled={modalcurrentPage === 1 || loading}
              className="btn btn-primary"
            >
              Previous
            </Button>
            <Button
              onClick={handleNextPage}
              disabled={
                modalPrincipalDistributors.length < modalitemPerPage || loading
              }
              className="btn btn-primary ml-2"
            >
              Next
            </Button>
          </div>
        </div>
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClosePDModal} color="secondary">
          Cancel
        </Button>
      </DialogActions>
    </Dialog>
  );
};

export default PDmodal;