admin/src/views/RetailDistributors/ModalTM.js

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

const TMmodal = ({ openTMModal, handleCloseTMModal, refreshData, rdid }) => {
  const token = isAutheticated();
  const [modalTerritoryManagers, setmodalTerritoryManagers] = useState(
    []
  );
  const [modalTotalData, setModalTotalData] = useState(0);
  const [modalcurrentPage, setmodalCurrentPage] = useState(1);
  const [modalitemPerPage, setmodalItemPerPage] = useState(10);
  const [loading, setLoading] = useState(false);
  const tmnameRef = useRef();
  const tmmobileRef = useRef();

  const getTerritorymanagersData = async () => {
    setLoading(true);
    try {
      const res = await axios.get(`/api/territorymanager/getAll`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
        params: {
          page: modalcurrentPage,
          show: modalitemPerPage,
          name: tmnameRef.current?.value,
          mobileNumber: tmmobileRef.current?.value,
        },
      });
      setmodalTerritoryManagers(res.data?.territoryManager);
      setModalTotalData(res.data?.total_data);
    } 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 handleTMMap = (id) => {
    const data = {
      mappedTM: 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
        handleCloseTMModal();
      })
      .catch((err) => {
        const msg = err?.response?.data?.message || "Something went wrong!";
        swal({
          title: "Error",
          text: msg,
          icon: "error",
          button: "Retry",
          dangerMode: true,
        });
      });
  };

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

  const handleInputChange = useCallback(
    debounce(() => {
      getTerritorymanagersData();
    }, 1000),
    []
  );
  const handleNextPage = () => {
    setmodalCurrentPage((prev) => prev + 1);
  };
  const handlePreviousPage = () => {
    setmodalCurrentPage((prev) => prev - 1);
  };
  return (
    <Dialog
      open={openTMModal}
      onClose={handleCloseTMModal}
      fullWidth
      maxWidth="lg"
    >
       <DialogTitle>Search and Add Territory Manager</DialogTitle>
        <DialogContent>
          <div
            style={{
              display: "flex",
              gap: "16px",
              marginBottom: "2rem",
              marginTop: "-1rem",
            }}
          >
            <TextField
              label="Territory Manager Name"
              placeholder="Territory Manager name"
              inputRef={tmnameRef}
              onChange={handleInputChange}
              disabled={loading}
              style={{ flex: 1, marginRight: "16px" }}
            />
            <TextField
              style={{ flex: 1 }}
              label="Mobile Number"
              placeholder="Mobile Number"
              inputRef={tmmobileRef}
              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>Name</th>
                  <th>Mobile</th>
                  <th>Email</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                {modalTerritoryManagers.length > 0 ? (
                  modalTerritoryManagers.map((TM) => (
                    <tr key={TM._id}>
                      <td>{TM.uniqueId}</td>
                      <td>{TM.name}</td>
                      <td>{TM.mobileNumber}</td>
                      <td>{TM.email}</td>
                      <td>
                        <Button
                          variant="contained"
                          color="primary"
                          onClick={() => handleTMMap(TM._id)}
                        >
                          Add
                        </Button>
                      </td>
                    </tr>
                  ))
                ) : (
                  <tr>
                    <td colSpan="6" className="text-center">
                      No Territory Manager found!
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </div>
          <div className="d-flex justify-content-between">
            <div>
              Showing {modalTerritoryManagers?.length} of {modalTotalData}{" "}
              entries
            </div>
            <div>
              <button
                onClick={handlePreviousPage}
                disabled={modalcurrentPage === 1 || loading}
                className="btn btn-primary"
              >
                Previous
              </button>
              <button
                onClick={handleNextPage}
                disabled={
                  modalTerritoryManagers?.length < modalitemPerPage || loading
                }
                className="btn btn-primary ml-2"
              >
                Next
              </button>
            </div>
          </div>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleCloseTMModal} color="secondary">
            Cancel
          </Button>
        </DialogActions>
    </Dialog>
  );
};

export default TMmodal;