Alteração para consultar o numero somente quando digitado por completo. Alteração para o cursor nao ir para o final do textfield

adriano 2023-06-09 15:24:30 -03:00
parent 9ecad6f9b5
commit 441f1fa83e
1 changed files with 97 additions and 109 deletions

View File

@ -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,18 +20,18 @@ 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);
@ -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)
@ -154,7 +154,7 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
const regex = /^[0-9\b]+$/; // Regular expression to match only numbers
// setPhone(event.target.value);
setSearchParam(number)
setTimeout(() => {
@ -173,41 +173,42 @@ const NewTicketModal = ({ modalOpen, onClose }) => {
setSearchParam(newValue)
}, 100);
}, 30);
};
const handleSelectOption = (e, newValue) => {
// const handleSelectOption = (e, newValue) => {
if (newValue?.number) {
// if (newValue?.number) {
console.log('newValue: ', newValue)
// console.log('newValue: ', newValue)
setSelectedContact(newValue);
// setSelectedContact(newValue);
} else if (newValue?.name) {
// } else if (newValue?.name) {
// console.log('newValue?.name: ', newValue?.name)
// // console.log('newValue?.name: ', newValue?.name)
const regex = /^[0-9\b]+$/; // Regular expression to match only numbers
// const regex = /^[0-9\b]+$/; // Regular expression to match only numbers
if (newValue.name.match(regex)) {
// if (newValue.name.match(regex)) {
console.log('==========> newValue.name', newValue.name)
setNewContact({ name: newValue.name, number: newValue.name });
// console.log('==========> newValue.name', newValue.name)
// setNewContact({ name: newValue.name, number: newValue.name });
}
else {
// }
// else {
setNewContact({ name: newValue.name });
setContactModalOpen(true);
// 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>