diff --git a/src/views/SalesCoOrdinators/AddMultipleSC.js b/src/views/SalesCoOrdinators/AddMultipleSC.js index dd79669..985a595 100644 --- a/src/views/SalesCoOrdinators/AddMultipleSC.js +++ b/src/views/SalesCoOrdinators/AddMultipleSC.js @@ -2,7 +2,7 @@ import React, { useState } from "react"; import axios from "axios"; import swal from "sweetalert"; import { isAutheticated } from "src/auth"; -import { useNavigate } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import { toast } from "react-hot-toast"; const AddMultiplesc = () => { const [file, setFile] = useState(null); @@ -60,9 +60,12 @@ const AddMultiplesc = () => { setNewlyCreated(data.newlyCreated); // console.log(data.newlyCreated); } - if (data.updatedsalesCoordinators && data.updatedsalesCoordinators.length > 0) { + if ( + data.updatedsalesCoordinators && + data.updatedsalesCoordinators.length > 0 + ) { setupdatedsalesCoordinators(data.updatedsalesCoordinators); - // console.log(data.updatedsalesCoordinators); + // console.log(data.updatedsalesCoordinators); } // Redirect or display success message @@ -145,14 +148,17 @@ const AddMultiplesc = () => { + + {errors.map((error, index) => ( + @@ -169,6 +175,7 @@ const AddMultiplesc = () => {
Employee Code Sales Coordinator Name EmailPhone Message
{error.uniqueId || "N/A"} {error.name || "N/A"} {error.email || "N/A"} {error.phone || "N/A"}
+ @@ -178,6 +185,7 @@ const AddMultiplesc = () => { {updatedsalesCoordinators.map((SC, index) => ( + @@ -194,6 +202,7 @@ const AddMultiplesc = () => {
Employee Code Sales Coordinator Name Email Phone
{SC.uniqueId || "N/A"} {SC.name || "N/A"} {SC.email || "N/A"} {SC.mobileNumber || "N/A"}
+ @@ -202,6 +211,7 @@ const AddMultiplesc = () => { {newlyCreated.map((SC, index) => ( + diff --git a/src/views/SalesCoOrdinators/AddSalesCoOrdinator.js b/src/views/SalesCoOrdinators/AddSalesCoOrdinator.js index 41c1c4b..283a890 100644 --- a/src/views/SalesCoOrdinators/AddSalesCoOrdinator.js +++ b/src/views/SalesCoOrdinators/AddSalesCoOrdinator.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef, useCallback } from "react"; import axios from "axios"; import { useNavigate } from "react-router-dom"; import { isAutheticated } from "src/auth"; @@ -6,12 +6,14 @@ import Modal from "react-bootstrap/Modal"; import Button from "react-bootstrap/Button"; import Form from "react-bootstrap/Form"; import swal from "sweetalert"; +import debounce from "lodash.debounce"; const AddSalesCoOrdinator = () => { const navigate = useNavigate(); const token = isAutheticated(); const [formData, setFormData] = useState({ + uniqueId: "", name: "", email: "", countryCode: "+91", @@ -20,39 +22,118 @@ const AddSalesCoOrdinator = () => { territoryManager: "", // Add territoryManager field }); - const [territoryManagers, setTerritoryManagers] = useState([]); // State for storing fetched territory managers + const nameRef = useRef(); + const dropdownRef = useRef(); // Reference for the dropdown + const [territoryManagers, setTerritoryManagers] = useState([]); const [showModal, setShowModal] = useState(false); - const [loading, setLoading] = useState(false); // Loading state for the Territory Manager dropdown + const [showDropdown, setShowDropdown] = useState(false); + const [tmname, setTmname] = useState(""); + const getTerritoryManagers = async (query = "") => { + try { + const res = await axios.get(`/api/territorymanager/getAll-dropdown/`, { + headers: { + Authorization: `Bearer ${token}`, + }, + params: { + name: query, + }, + }); + setTerritoryManagers(res.data.territoryManager || []); + } catch (err) { + const msg = err?.response?.data?.message || "Something went wrong!"; + swal({ + title: "Error", + text: msg, + icon: "error", + button: "Retry", + dangerMode: true, + }); + } + }; // Fetch Territory Managers when the component mounts useEffect(() => { getTerritoryManagers(); }, []); - const getTerritoryManagers = () => { - setLoading(true); - axios - .get(`/api/territorymanager/getAll/`, { - headers: { - Authorization: `Bearer ${token}`, - }, - }) - .then((res) => { - setTerritoryManagers(res.data.territoryManager || []); // Store the response data - setLoading(false); - }) - .catch((err) => { - console.error(err); - setLoading(false); - }); + const debouncedSearch = useCallback( + debounce(() => { + getTerritoryManagers(nameRef.current.value); + }, 500), + [] + ); + + const handleSearchChange = (e) => { + // const { value } = e.target; + // setFormData({ ...formData, territoryManager: value }); + setShowDropdown(true); + setTmname(e.target.value); + debouncedSearch(); + }; + + const handleDropdownSelect = (tm) => { + setFormData({ ...formData, territoryManager: tm._id }); + setTmname(tm.name); + setShowDropdown(false); + }; + + const handleInputClick = () => { + setFormData({ ...formData, territoryManager: "" }); + setShowDropdown(true); + getTerritoryManagers(); }; const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; + // Listen for clicks outside the dropdown and input field to hide the dropdown + useEffect(() => { + const handleClickOutside = (event) => { + if ( + nameRef.current && + dropdownRef.current && + !nameRef.current.contains(event.target) && + !dropdownRef.current.contains(event.target) + ) { + setShowDropdown(false); // Hide the dropdown + } + }; + + document.addEventListener("mousedown", handleClickOutside); + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + const validateForm = () => { + const { uniqueId, name, email, mobileNumber, territoryManager } = formData; + if (!uniqueId || !name || !email || !mobileNumber || !territoryManager) { + swal({ + title: "Warning", + text: "All fields are required!", + icon: "warning", + button: "OK", + }); + return false; + } + if (!/^\d{10}$/.test(mobileNumber)) { + swal({ + title: "Warning", + text: "Mobile number must be 10 digits!", + icon: "warning", + button: "OK", + }); + return false; + } + return true; + }; + const handleRegister = async (e) => { e.preventDefault(); + if (!validateForm()) return; + try { await axios.post("/api/salescoordinator/register", formData, { headers: { @@ -108,7 +189,7 @@ const AddSalesCoOrdinator = () => { }; const handleCancel = () => { - navigate("/salescoordinators"); + navigate("/salescoordinators"); }; return ( @@ -130,28 +211,55 @@ const AddSalesCoOrdinator = () => {
-
- - - - {territoryManagers.map((tm) => ( - - ))} - + placeholder="Search and select Territory Manager" + ref={nameRef} + value={tmname} + onChange={handleSearchChange} + onClick={handleInputClick} + /> + {/* Dropdown */} + {showDropdown && territoryManagers.length > 0 && ( +
    + {territoryManagers.map((tm) => ( +
  • handleDropdownSelect(tm)} + > + {tm.name} +
  • + ))} +
+ )}
- + + +
+
+ { />
- + {
- + { />
- + { />
- @@ -211,25 +319,24 @@ const AddSalesCoOrdinator = () => { {/* OTP Modal */} setShowModal(false)}> - Enter OTP + Verify OTP - - OTP + + Enter OTP - setFormData({ ...formData, otp: e.target.value }) - } + onChange={handleChange} + placeholder="Enter OTP" required />
Employee Code Sales Coordinator Name Email Phone
{SC?.salesCoordinator?.uniqueId || "N/A"} {SC?.salesCoordinator?.name || "N/A"} {SC?.salesCoordinator?.email || "N/A"} {SC?.salesCoordinator?.mobileNumber || "N/A"}
+ + {errors.map((error, index) => ( + @@ -169,6 +175,7 @@ const AddMultipletm = () => {
Employee Code Territory Manager Name EmailPhone Message
{error.uniqueId || "N/A"} {error.name || "N/A"} {error.email || "N/A"} {error.phone || "N/A"}
+ @@ -178,6 +185,7 @@ const AddMultipletm = () => { {updatedtrritoryManagers.map((TM, index) => ( + @@ -194,6 +202,7 @@ const AddMultipletm = () => {
Employee Code Territory Manager Name Email Phone
{TM.uniqueId || "N/A"} {TM.name || "N/A"} {TM.email || "N/A"} {TM.mobileNumber || "N/A"}
+ @@ -202,6 +211,7 @@ const AddMultipletm = () => { {newlyCreated.map((TM, index) => ( + diff --git a/src/views/TerritoryManager/AddTerritoryManager.js b/src/views/TerritoryManager/AddTerritoryManager.js index dfa9f01..934c874 100644 --- a/src/views/TerritoryManager/AddTerritoryManager.js +++ b/src/views/TerritoryManager/AddTerritoryManager.js @@ -12,6 +12,7 @@ const AddTerritoryManager = () => { const token = isAutheticated(); const [formData, setFormData] = useState({ + uniqueId: "", name: "", email: "", countryCode: "+91", @@ -24,9 +25,31 @@ const AddTerritoryManager = () => { const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value }); }; - + const validateForm = () => { + const { uniqueId, name, email, mobileNumber } = formData; + if (!uniqueId || !name || !email || !mobileNumber) { + swal({ + title: "Warning", + text: "All fields are required!", + icon: "warning", + button: "OK", + }); + return false; + } + if (!/^\d{10}$/.test(mobileNumber)) { + swal({ + title: "Warning", + text: "Mobile number must be 10 digits!", + icon: "warning", + button: "OK", + }); + return false; + } + return true; + }; const handleRegister = async (e) => { e.preventDefault(); + if (!validateForm()) return; try { await axios.post("/api/territorymanager/register", formData, { headers: { @@ -105,8 +128,19 @@ const AddTerritoryManager = () => {
+
+ + +
- + { />
- + {
- + { />
- + { {/* OTP Modal */} setShowModal(false)}> - Enter OTP + Verify OTP - - OTP + + Enter OTP {
Employee Code Territory Manager Name Email Phone
{TM?.territoryManager?.uniqueId || "N/A"} {TM?.territoryManager?.name || "N/A"} {TM?.territoryManager?.email || "N/A"} {TM?.territoryManager?.mobileNumber || "N/A"}