adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
frontend/src/components/NewTicketModal/index.js
View File

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