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 = () => {
+ Employee Code |
Sales Coordinator Name |
Email |
+ Phone |
Message |
{errors.map((error, index) => (
+ {error.uniqueId || "N/A"} |
{error.name || "N/A"} |
{error.email || "N/A"} |
{error.phone || "N/A"} |
@@ -169,6 +175,7 @@ const AddMultiplesc = () => {
+ Employee Code |
Sales Coordinator Name |
Email |
Phone |
@@ -178,6 +185,7 @@ const AddMultiplesc = () => {
{updatedsalesCoordinators.map((SC, index) => (
+ {SC.uniqueId || "N/A"} |
{SC.name || "N/A"} |
{SC.email || "N/A"} |
{SC.mobileNumber || "N/A"} |
@@ -194,6 +202,7 @@ const AddMultiplesc = () => {
+ Employee Code |
Sales Coordinator Name |
Email |
Phone |
@@ -202,6 +211,7 @@ const AddMultiplesc = () => {
{newlyCreated.map((SC, index) => (
+ {SC?.salesCoordinator?.uniqueId || "N/A"} |
{SC?.salesCoordinator?.name || "N/A"} |
{SC?.salesCoordinator?.email || "N/A"} |
{SC?.salesCoordinator?.mobileNumber || "N/A"} |
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 = () => {
@@ -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
/>