Estado funcional da busca de tickets pelo conteudo

backend/src/services/TicketServices/ListTicketsService.ts

@@ -168,7 +168,7 @@ const ListTicketsService = async ({
 
     if (searchParamContent.length > 0) {
 
-      console.log('LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL')
+      // console.log('LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL')
 
       includeCondition = [
         ...includeCondition,

frontend/src/components/ContactCreateTicketModal/index.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext, useRef, useCallback } from "react";
 import { useHistory } from "react-router-dom";
 import { toast } from "react-toastify";
 
@@ -8,6 +8,7 @@ import Select from "@material-ui/core/Select";
 import FormControl from "@material-ui/core/FormControl";
 import InputLabel from "@material-ui/core/InputLabel";
 import MenuItem from "@material-ui/core/MenuItem";
+import LinearProgress from "@material-ui/core/LinearProgress";
 import { makeStyles } from "@material-ui/core";
 
 import DialogActions from "@material-ui/core/DialogActions";
@@ -28,11 +29,15 @@ const useStyles = makeStyles((theme) => ({
   },
   paper: {
     minWidth: "300px"
+  },
+  linearProgress: {
+    marginTop: "5px"
   }
 }));
 
 const ContactCreateTicketModal = ({ modalOpen, onClose, contactId }) => {
   const { user } = useContext(AuthContext);
+  let isMounted = useRef(true)
 
   const history = useHistory();
   const [queues, setQueues] = useState([]);
@@ -42,6 +47,7 @@ const ContactCreateTicketModal = ({ modalOpen, onClose, contactId }) => {
 
   useEffect(() => {
     const userQueues = user.queues.map(({ id, name, color }) => { return { id, name, color } })
+    if (userQueues.length === 1) setSelectedQueue(userQueues[0].id)
     setQueues(userQueues)
   }, [user]);
 
@@ -49,69 +55,81 @@ const ContactCreateTicketModal = ({ modalOpen, onClose, contactId }) => {
     onClose();
   };
 
-  const handleSaveTicket = async (e) => {
+  const handleSaveTicket = useCallback(async (contactId, userId, queueId) => {
-    e.preventDefault()
+    if (!contactId || !userId) {
-    if (!contactId) return;
+      console.log("Missing contactId or userId")
-    if (!selectedQueue) {
+      return
+    };
+    if (!queueId) {
       toast.warning("Nenhuma Fila Selecionada")
       return
     }
-    setLoading(true);
+    if (isMounted.current) setLoading(true);
     try {
       const { data: ticket } = await api.post("/tickets", {
         contactId: contactId,
-        userId: user?.id,
+        userId: userId,
-        queueId: selectedQueue,
+        queueId: queueId,
         status: "open",
       });
       history.push(`/tickets/${ticket.id}`);
     } catch (err) {
       toastError(err);
-      onClose()
     }
-    setLoading(false);
+    if (isMounted.current) setLoading(false);
-  };
+  }, [history])
+
+  useEffect(() => {
+    if (modalOpen && queues.length <= 1) {
+      handleSaveTicket(contactId, user.id, selectedQueue)
+    }
+    return () => {
+      isMounted.current = false;
+    };
+  }, [modalOpen, contactId, user.id, selectedQueue, handleSaveTicket, queues.length]);
+
+  if (modalOpen && queues.length <= 1) {
+    return <LinearProgress />
+  }
 
   return (
     <Dialog open={modalOpen} onClose={handleClose} maxWidth="xs" scroll="paper" classes={{ paper: classes.paper }}>
-      <form onSubmit={handleSaveTicket}>
+      <DialogTitle id="form-dialog-title">
-        <DialogTitle id="form-dialog-title">
+        {i18n.t("newTicketModal.title")}
-          {i18n.t("newTicketModal.title")}
+      </DialogTitle>
-        </DialogTitle>
+      <DialogContent dividers>
-        <DialogContent dividers>
+        <FormControl variant="outlined" className={classes.maxWidth}>
-          <FormControl variant="outlined" className={classes.maxWidth}>
+          <InputLabel>{i18n.t("Selecionar Fila")}</InputLabel>
-            <InputLabel>{i18n.t("Selecionar Fila")}</InputLabel>
+          <Select
-            <Select
+            value={selectedQueue}
-              value={selectedQueue}
+            onChange={(e) => setSelectedQueue(e.target.value)}
-              onChange={(e) => setSelectedQueue(e.target.value)}
+            label={i18n.t("Filas")}
-              label={i18n.t("Filas")}
-            >
-              <MenuItem value={''}>&nbsp;</MenuItem>
-              {queues.map(({ id, name }) => (
-                <MenuItem key={id} value={id}>{name[0].toUpperCase() + name.slice(1).toLowerCase()}</MenuItem>
-              ))}
-            </Select>
-          </FormControl>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            onClick={handleClose}
-            color="secondary"
-            disabled={loading}
-            variant="outlined"
           >
-            {i18n.t("newTicketModal.buttons.cancel")}
+            <MenuItem value={''}>&nbsp;</MenuItem>
-          </Button>
+            {queues.map(({ id, name }) => (
-          <ButtonWithSpinner
+              <MenuItem key={id} value={id}>{name[0].toUpperCase() + name.slice(1).toLowerCase()}</MenuItem>
-            variant="contained"
+            ))}
-            type="submit"
+          </Select>
-            color="primary"
+        </FormControl>
-            loading={loading}
+      </DialogContent>
-          >
+      <DialogActions>
-            {i18n.t("newTicketModal.buttons.ok")}
+        <Button
-          </ButtonWithSpinner>
+          onClick={handleClose}
-        </DialogActions>
+          color="secondary"
-      </form>
+          disabled={loading}
+          variant="outlined"
+        >
+          {i18n.t("newTicketModal.buttons.cancel")}
+        </Button>
+        <ButtonWithSpinner
+          onClick={() => handleSaveTicket(contactId, user.id, selectedQueue)}
+          variant="contained"
+          color="primary"
+          loading={loading}
+        >
+          {i18n.t("newTicketModal.buttons.ok")}
+        </ButtonWithSpinner>
+      </DialogActions>
     </Dialog>
   );
 };

frontend/src/components/TicketsManager/index.js

@@ -174,6 +174,26 @@ const TicketsManager = () => {
 
   }, [tab, setTabOption]);
 
+  useEffect(() => {
+
+
+    clearTimeout(searchContentTimeout);
+
+    setSearchParam(prev => ({ ...prev, searchParamContent: "" }))
+
+    // console.log('inputContentSearch1: ', inputContentSearch)
+
+    if (!inputContentSearch) return 
+
+    searchContentTimeout = setTimeout(() => {
+
+      setSearchParam(prev => ({ ...prev, searchParamContent: inputContentSearch }));
+
+    }, 500);
+
+
+  }, [inputContentSearch,]);
+
   useEffect(() => {
 
 
@@ -182,6 +202,7 @@ const TicketsManager = () => {
       setTabOption('')
       setSearchParam(DEFAULT_SEARCH_PARAM);
       setInputSearch('');
+      setInputContentSearch('')
       setTab("open");
       return;
     }
@@ -217,6 +238,7 @@ const TicketsManager = () => {
 
     if (searchedTerm.length < 4) {
       setSearchParam(prev => ({ ...prev, searchParamContent: "" }))
+      setInputContentSearch('')
     }
 
 
@@ -233,18 +255,16 @@ const TicketsManager = () => {
 
     console.log('searchedContentText: ', searchedContentText)
 
+    // clearTimeout(searchContentTimeout);
+
+    // searchContentTimeout = setTimeout(() => {
+
+    //   setSearchParam(prev => ({ ...prev, searchParamContent: inputContentSearch }));
+
+    // }, 500);
+
     setInputContentSearch(searchedContentText)
 
-    // setInputSearch(removeExtraSpace(searchedContentText))
-
-    clearTimeout(searchContentTimeout);
-
-    searchContentTimeout = setTimeout(() => {
-
-      setSearchParam(prev => ({ ...prev, searchParamContent: inputContentSearch }));
-
-    }, 500);
-
   }
 
   const handleOpenTooltipSearch = () => {
@@ -352,7 +372,7 @@ const TicketsManager = () => {
                     placeholder={i18n.t("Busca por conteúdo")}
                     type="search"
                     value={inputContentSearch}
-                    onChange={handleContentSearch}
+                    onChange={(e) => handleContentSearch(e)}
                   />
                 </div>) : null
             }