Alteração para consultar o numero somente quando digitado por completo. Alteração para o cursor nao ir para o final do textfield
adriano
parent
9ecad6f9b5
commit
441f1fa83e
|
|
@ -8,10 +8,10 @@ import Dialog from "@material-ui/core/Dialog";
|
|||
import DialogActions from "@material-ui/core/DialogActions";
|
||||
import DialogContent from "@material-ui/core/DialogContent";
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import Autocomplete, {
|
||||
createFilterOptions,
|
||||
} from "@material-ui/lab/Autocomplete";
|
||||
import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
// import Autocomplete, {
|
||||
// createFilterOptions,
|
||||
// } from "@material-ui/lab/Autocomplete";
|
||||
// import CircularProgress from "@material-ui/core/CircularProgress";
|
||||
|
||||
import { i18n } from "../../translate/i18n";
|
||||
import api from "../../services/api";
|
||||
|
|
@ -20,23 +20,23 @@ import ContactModal from "../ContactModal";
|
|||
import toastError from "../../errors/toastError";
|
||||
import { AuthContext } from "../../context/Auth/AuthContext";
|
||||
|
||||
const filter = createFilterOptions({
|
||||
trim: true,
|
||||
});
|
||||
// const filter = createFilterOptions({
|
||||
// trim: true,
|
||||
// });
|
||||
|
||||
const NewTicketModal = ({ modalOpen, onClose }) => {
|
||||
const history = useHistory();
|
||||
|
||||
const [options, setOptions] = useState([]);
|
||||
// const [options, setOptions] = useState([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [searchParam, setSearchParam] = useState("");
|
||||
const [selectedContact, setSelectedContact] = useState(null);
|
||||
const [newContact, setNewContact] = useState({});
|
||||
// const [newContact, setNewContact] = useState({});
|
||||
const [contactModalOpen, setContactModalOpen] = useState(false);
|
||||
const { user } = useContext(AuthContext);
|
||||
const { user } = useContext(AuthContext);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
|
||||
|
||||
const regex = /^[0-9\b]+$/; // Regular expression to match only numbers
|
||||
if (searchParam && !searchParam.match(regex)) return
|
||||
|
|
@ -52,29 +52,29 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
|
|||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
const delayDebounceFn = setTimeout(() => {
|
||||
const fetchContacts = async () => {
|
||||
try {
|
||||
const { data } = await api.get("contacts", {
|
||||
params: { searchParam },
|
||||
});
|
||||
// setLoading(true);
|
||||
// const delayDebounceFn = setTimeout(() => {
|
||||
// const fetchContacts = async () => {
|
||||
// try {
|
||||
// const { data } = await api.get("contacts", {
|
||||
// params: { searchParam },
|
||||
// });
|
||||
|
||||
// console.log('data.contacts: ', data.contacts)
|
||||
// // console.log('data.contacts: ', data.contacts)
|
||||
|
||||
setOptions(data.contacts);
|
||||
setLoading(false);
|
||||
} catch (err) {
|
||||
setLoading(false);
|
||||
toastError(err);
|
||||
}
|
||||
// setOptions(data.contacts);
|
||||
// setLoading(false);
|
||||
// } catch (err) {
|
||||
// setLoading(false);
|
||||
// toastError(err);
|
||||
// }
|
||||
|
||||
};
|
||||
// };
|
||||
|
||||
fetchContacts();
|
||||
}, 500);
|
||||
// fetchContacts();
|
||||
// }, 500);
|
||||
|
||||
return () => clearTimeout(delayDebounceFn);
|
||||
// return () => clearTimeout(delayDebounceFn);
|
||||
}, [searchParam, modalOpen]);
|
||||
|
||||
const handleClose = () => {
|
||||
|
|
@ -87,11 +87,11 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
|
|||
|
||||
try {
|
||||
|
||||
// console.log('=========> options: ', options)
|
||||
const { data: data0 } = await api.get("/contacts/", { params: { searchParam, pageNumber: "1" }, });
|
||||
|
||||
if (options && options.length > 0) {
|
||||
console.log('-----> options[0].id: ', options[0].id)
|
||||
contactId = options[0].id
|
||||
if (data0 && data0.contacts.length > 0) {
|
||||
console.log('-----> data: ', data0.contacts[0].id)
|
||||
contactId = data0.contacts[0].id
|
||||
}
|
||||
else {
|
||||
console.log('NO CONTACT whith this searchParam: ', searchParam)
|
||||
|
|
@ -152,10 +152,10 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
|
|||
|
||||
const handleChange = (number) => {
|
||||
|
||||
const regex = /^[0-9\b]+$/; // Regular expression to match only numbers
|
||||
|
||||
// setPhone(event.target.value);
|
||||
|
||||
const regex = /^[0-9\b]+$/; // Regular expression to match only numbers
|
||||
|
||||
setSearchParam(number)
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
let newValue = ''
|
||||
|
|
@ -173,41 +173,42 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
|
|||
|
||||
setSearchParam(newValue)
|
||||
|
||||
}, 100);
|
||||
}, 30);
|
||||
|
||||
};
|
||||
|
||||
const handleSelectOption = (e, newValue) => {
|
||||
};
|
||||
|
||||
|
||||
if (newValue?.number) {
|
||||
|
||||
console.log('newValue: ', newValue)
|
||||
|
||||
setSelectedContact(newValue);
|
||||
|
||||
} else if (newValue?.name) {
|
||||
|
||||
// console.log('newValue?.name: ', newValue?.name)
|
||||
|
||||
const regex = /^[0-9\b]+$/; // Regular expression to match only numbers
|
||||
|
||||
if (newValue.name.match(regex)) {
|
||||
|
||||
console.log('==========> newValue.name', newValue.name)
|
||||
setNewContact({ name: newValue.name, number: newValue.name });
|
||||
|
||||
}
|
||||
else {
|
||||
|
||||
setNewContact({ name: newValue.name });
|
||||
setContactModalOpen(true);
|
||||
|
||||
}
|
||||
// const handleSelectOption = (e, newValue) => {
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
// if (newValue?.number) {
|
||||
|
||||
// console.log('newValue: ', newValue)
|
||||
|
||||
// setSelectedContact(newValue);
|
||||
|
||||
// } else if (newValue?.name) {
|
||||
|
||||
// // console.log('newValue?.name: ', newValue?.name)
|
||||
|
||||
// const regex = /^[0-9\b]+$/; // Regular expression to match only numbers
|
||||
|
||||
// if (newValue.name.match(regex)) {
|
||||
|
||||
// console.log('==========> newValue.name', newValue.name)
|
||||
// setNewContact({ name: newValue.name, number: newValue.name });
|
||||
|
||||
// }
|
||||
// else {
|
||||
|
||||
// setNewContact({ name: newValue.name });
|
||||
// setContactModalOpen(true);
|
||||
|
||||
// }
|
||||
|
||||
|
||||
// }
|
||||
// };
|
||||
|
||||
const handleCloseContactModal = () => {
|
||||
setContactModalOpen(false);
|
||||
|
|
@ -217,39 +218,39 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
|
|||
handleSaveTicket(contact.id);
|
||||
};
|
||||
|
||||
const createAddContactOption = (filterOptions, params) => {
|
||||
const filtered = filter(filterOptions, params);
|
||||
// const createAddContactOption = (filterOptions, params) => {
|
||||
// const filtered = filter(filterOptions, params);
|
||||
|
||||
if (params.inputValue !== "" && !loading && searchParam.length >= 3) {
|
||||
filtered.push({
|
||||
name: `${params.inputValue}`,
|
||||
});
|
||||
}
|
||||
// if (params.inputValue !== "" && !loading && searchParam.length >= 3) {
|
||||
// filtered.push({
|
||||
// name: `${params.inputValue}`,
|
||||
// });
|
||||
// }
|
||||
|
||||
return filtered;
|
||||
};
|
||||
// return filtered;
|
||||
// };
|
||||
|
||||
const renderOption = option => {
|
||||
if (option.number) {
|
||||
return `${option.name} - ${option.number}`;
|
||||
} else {
|
||||
return `${i18n.t("newTicketModal.add")} ${option.name}`;
|
||||
}
|
||||
};
|
||||
// const renderOption = option => {
|
||||
// if (option.number) {
|
||||
// return `${option.name} - ${option.number}`;
|
||||
// } else {
|
||||
// return `${i18n.t("newTicketModal.add")} ${option.name}`;
|
||||
// }
|
||||
// };
|
||||
|
||||
const renderOptionLabel = option => {
|
||||
if (option.number) {
|
||||
return `${option.name} - ${option.number}`;
|
||||
} else {
|
||||
return `${option.name}`;
|
||||
}
|
||||
};
|
||||
// const renderOptionLabel = option => {
|
||||
// if (option.number) {
|
||||
// return `${option.name} - ${option.number}`;
|
||||
// } else {
|
||||
// return `${option.name}`;
|
||||
// }
|
||||
// };
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContactModal
|
||||
open={contactModalOpen}
|
||||
initialValues={newContact}
|
||||
// initialValues={newContact}
|
||||
onClose={handleCloseContactModal}
|
||||
onSave={handleAddNewContactTicket}
|
||||
></ContactModal>
|
||||
|
|
@ -264,31 +265,18 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
|
|||
label={i18n.t("newTicketModal.fieldLabel")}
|
||||
variant="outlined"
|
||||
autoFocus
|
||||
|
||||
value={searchParam}
|
||||
onChange={e => handleChange(e.target.value)}
|
||||
|
||||
// onChange={e => setSearchParam(e.target.value)}
|
||||
onChange={e => {
|
||||
|
||||
handleChange(e.target.value)
|
||||
|
||||
// setSearchParam(e.target.value)
|
||||
}}
|
||||
onKeyPress={e => {
|
||||
if (loading || !selectedContact) return;
|
||||
else if (e.key === "Enter") {
|
||||
handleSaveTicket(selectedContact.id);
|
||||
}
|
||||
}}
|
||||
// InputProps={{
|
||||
// ...params.InputProps,
|
||||
// endAdornment: (
|
||||
// <React.Fragment>
|
||||
// {loading ? (
|
||||
// <CircularProgress color="inherit" size={20} />
|
||||
// ) : null}
|
||||
// {params.InputProps.endAdornment}
|
||||
// </React.Fragment>
|
||||
// ),
|
||||
// }}
|
||||
}}
|
||||
|
||||
/>
|
||||
</DialogContent>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue