diff --git a/backend/src/controllers/TicketController.ts b/backend/src/controllers/TicketController.ts index b08cac9..5accffc 100644 --- a/backend/src/controllers/TicketController.ts +++ b/backend/src/controllers/TicketController.ts @@ -35,6 +35,7 @@ type IndexQuery = { withUnreadMessages: string; queueIds: string; unlimited?: string; + searchParamContent?: string }; interface TicketData { @@ -71,7 +72,8 @@ export const index = async (req: Request, res: Response): Promise => { showAll, queueIds: queueIdsStringified, withUnreadMessages, - unlimited + unlimited, + searchParamContent } = req.query as IndexQuery; @@ -92,14 +94,15 @@ export const index = async (req: Request, res: Response): Promise => { userId, queueIds, withUnreadMessages, - unlimited + unlimited, + searchParamContent }); return res.status(200).json({ tickets, count, hasMore }); }; export const store = async (req: Request, res: Response): Promise => { - const { contactId, status, userId, msg }: TicketData = req.body; + const { contactId, status, userId, msg, queueId }: TicketData = req.body; console.log('TICKET CREATE: ', 'contactId: ', contactId, ' | status: ', status, ' | userId: ', userId) @@ -111,7 +114,7 @@ export const store = async (req: Request, res: Response): Promise => { } else { - ticket = await CreateTicketService({ contactId, status, userId, msg }); + ticket = await CreateTicketService({ contactId, status, userId, msg, queueId }); } const io = getIO(); diff --git a/backend/src/services/TicketServices/CreateTicketService.ts b/backend/src/services/TicketServices/CreateTicketService.ts index f019c3e..05e5b1e 100644 --- a/backend/src/services/TicketServices/CreateTicketService.ts +++ b/backend/src/services/TicketServices/CreateTicketService.ts @@ -29,7 +29,7 @@ interface Request { status: string; userId: number; msg?: string, - queueId?: string | undefined + queueId?: number | undefined } const CreateTicketService = async ({ @@ -42,7 +42,7 @@ const CreateTicketService = async ({ try { - console.log('Create contact service........') + console.log('*************** Create contact service queueId: ', queueId) const defaultWhatsapp = await GetDefaultWhatsApp(userId); diff --git a/backend/src/services/TicketServices/ListTicketsService.ts b/backend/src/services/TicketServices/ListTicketsService.ts index 2363a41..97f9932 100644 --- a/backend/src/services/TicketServices/ListTicketsService.ts +++ b/backend/src/services/TicketServices/ListTicketsService.ts @@ -31,6 +31,7 @@ interface Request { withUnreadMessages?: string; queueIds: number[]; unlimited?: string; + searchParamContent?: string; } interface Response { @@ -49,9 +50,12 @@ const ListTicketsService = async ({ showAll, userId, withUnreadMessages, - unlimited = 'false' + unlimited = 'false', + searchParamContent = "" }: Request): Promise => { + console.log('----------> searchParamContent: ', searchParamContent) + let whereCondition: Filterable["where"] = { [Op.or]: [{ userId }, { status: "pending" }], queueId: { [Op.or]: [queueIds, null] } }; console.log('PAGE NUMBER TICKET: ', pageNumber) @@ -146,6 +150,7 @@ const ListTicketsService = async ({ if (searchParam) { const sanitizedSearchParam = searchParam.toLocaleLowerCase().trim(); + const sanitizedSearchParamContent = searchParamContent.toLocaleLowerCase().trim(); // includeCondition = [ // ...includeCondition, @@ -161,20 +166,31 @@ const ListTicketsService = async ({ // } // ]; + if (searchParamContent.length > 0) { + + console.log('LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL') + + includeCondition = [ + ...includeCondition, + { + model: Message, + as: "messages", + attributes: ["id", "body"], + where: { + body: where(fn("LOWER", col("body")), "LIKE", `%${sanitizedSearchParamContent}%`) + }, + required: false, + duplicating: false + } + ]; + + whereCondition = { + ...whereCondition, + "$message.body$": where(fn("LOWER", col("body")), "LIKE", `%${sanitizedSearchParamContent}%`) + }; + + } - includeCondition = [ - ...includeCondition, - { - model: Message, - as: "messages", - attributes: ["id", "body"], - where: { - body: where(fn("LOWER", col("body")), "LIKE", `%ADRIANO ROB%`) - }, - required: false, - duplicating: false - } - ]; whereCondition = { ...whereCondition, @@ -185,13 +201,12 @@ const ListTicketsService = async ({ { "$contact.number$": { [Op.like]: `%${sanitizedSearchParam}%` } }, - // { - // "$message.body$": where(fn("LOWER", col("body")), "LIKE", `%${sanitizedSearchParam}%`) - // } ], - "$message.body$": where(fn("LOWER", col("body")), "LIKE", `%ADRIANO ROB%`) + // "$message.body$": where(fn("LOWER", col("body")), "LIKE", `%ADRIANO ROB%`) }; + console.log('whereConditionwhereConditionwhereCondition: ', whereCondition) + // whereCondition = { // ...whereCondition, diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/TicketsList/index.js index be1f699..6e5bf4b 100644 --- a/frontend/src/components/TicketsList/index.js +++ b/frontend/src/components/TicketsList/index.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useReducer, useContext } from "react"; +import React, { useState, useEffect, useReducer, useContext } from "react"; import openSocket from "socket.io-client"; @@ -177,31 +177,32 @@ const reducer = (state, action) => { }; const TicketsList = (props) => { - const { status, searchParam, showAll, selectedQueueIds, updateCount, style, tab } = props; + const { status, searchParam, searchParamContent, showAll, selectedQueueIds, updateCount, style, tab } = props; const classes = useStyles(); const [pageNumber, setPageNumber] = useState(1); const [ticketsList, dispatch] = useReducer(reducer, []); const { user } = useContext(AuthContext); - const { searchTicket } = useContext(SearchTicketContext) + const { searchTicket } = useContext(SearchTicketContext) - useEffect(() => { + useEffect(() => { dispatch({ type: "RESET" }); setPageNumber(1); - }, [status, searchParam, showAll, selectedQueueIds, searchTicket]); + }, [status, searchParam, searchParamContent, showAll, selectedQueueIds, searchTicket]); const { tickets, hasMore, loading } = useTickets({ pageNumber, searchParam, + searchParamContent, status, showAll, queueIds: JSON.stringify(selectedQueueIds), tab }); - useEffect(() => { + useEffect(() => { if (!status && !searchParam) return; diff --git a/frontend/src/components/TicketsManager/index.js b/frontend/src/components/TicketsManager/index.js index 0409d48..d00fcf6 100644 --- a/frontend/src/components/TicketsManager/index.js +++ b/frontend/src/components/TicketsManager/index.js @@ -8,6 +8,9 @@ import Tabs from "@material-ui/core/Tabs"; import Tab from "@material-ui/core/Tab"; import Badge from "@material-ui/core/Badge"; +import Tooltip from "@material-ui/core/Tooltip"; + + import SearchIcon from "@material-ui/icons/Search"; import MoveToInboxIcon from "@material-ui/icons/MoveToInbox"; import CheckBoxIcon from "@material-ui/icons/CheckBox"; @@ -152,6 +155,9 @@ const TicketsManager = () => { const [inputSearch, setInputSearch] = useState(''); const [inputContentSearch, setInputContentSearch] = useState("") + const [openTooltipSearch, setOpenTooltipSearch] = useState(false) + + useEffect(() => { if (user.profile.toUpperCase() === "ADMIN") { setShowAllTickets(true); @@ -183,6 +189,7 @@ const TicketsManager = () => { }, [tabOption, setTabOption]) let searchTimeout; + let searchContentTimeout; const removeExtraSpace = (str) => { @@ -203,10 +210,16 @@ const TicketsManager = () => { if (searchedTerm === "") { setSearchParam(prev => ({ ...prev, searchParam: searchedTerm })) setInputSearch(searchedTerm) + setShowContentSearch(false) setTab("open"); return; } + if (searchedTerm.length < 4) { + setSearchParam(prev => ({ ...prev, searchParamContent: "" })) + } + + searchTimeout = setTimeout(() => { setSearchParam(prev => ({ ...prev, searchParam: searchedTerm })); @@ -215,8 +228,36 @@ const TicketsManager = () => { }; const handleContentSearch = e => { - let searchedContentText = e.target.value.toLowerCase() - setInputContentSearch(searchedContentText) + + let searchedContentText = removeExtraSpace(e.target.value.toLowerCase()) + + console.log('searchedContentText: ', searchedContentText) + + setInputContentSearch(searchedContentText) + + // setInputSearch(removeExtraSpace(searchedContentText)) + + clearTimeout(searchContentTimeout); + + searchContentTimeout = setTimeout(() => { + + setSearchParam(prev => ({ ...prev, searchParamContent: inputContentSearch })); + + }, 500); + + } + + const handleOpenTooltipSearch = () => { + if (searchParam.searchParam.length < 4) { + setOpenTooltipSearch(true) + } + } + + const handleCloseTooltipSearch = () => { + setOpenTooltipSearch(false) + if (searchParam.searchParam.length < 4) { + searchInputRef.current.focus() + } } const handleChangeTab = (e, newValue) => { @@ -281,12 +322,28 @@ const TicketsManager = () => { value={inputSearch} onChange={handleSearch} /> - setShowContentSearch(prev => !prev)}> + {/* setShowContentSearch(prev => !prev)}> - + */} + handleOpenTooltipSearch()} + onClose={() => handleCloseTooltipSearch()} + title="Digite pelo menos 4 caracteres" + arrow> + + setShowContentSearch(prev => !prev)} + > + + + + { - showContentSearch ? + // showContentSearch ? + (showContentSearch && searchParam.searchParam.length >= 4) ? (
{ clearTimeout(delayDebounceFn); }, [ searchParam, + searchParamContent, pageNumber, status, date,