Tabs and Manager list fix some functions

WIP

Project stop by order chef

frontend/src/components/Base/Badge/BadgeComponent.jsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { BadgeComponentStyled } from "./BadgeComponent.style";
 
-const BadgeComponent = ({ counter, position, top, left, right, bottom }) => {
+const BadgeComponent = ({ counter,fontSize, position, top, left, right, bottom,bgcolor }) => {
   return (
-    <BadgeComponentStyled position={position} top={top} left={left} right={right} bottom={bottom}>
+    <BadgeComponentStyled position={position} top={top} left={left} right={right} bottom={bottom} fontSize={fontSize} bgcolor={bgcolor}>
       {counter}
     </BadgeComponentStyled>
   );

frontend/src/components/Base/Badge/BadgeComponent.style.jsx

@@ -15,8 +15,8 @@ export const BadgeComponentStyled = styled.span`
   object-fit: cover;
   width: 21px;
   height: 21px;
-  font-size: 16px;
+  font-size: ${({ fontSize }) => (fontSize ? fontSize : "16px")};
   color: ${color.pricinpal.blanco};
-  background-color: ${color.status.yes};
+  background-color: ${({ bgcolor }) => (bgcolor ? bgcolor : color.status.yes)};
 `;
 

frontend/src/components/LoginComponents/LoginForm/Inputs/InputComponent.style.jsx

@@ -3,7 +3,7 @@ import { color } from "../../../../style/varibles";
 
 const InputComponentStyled = styled.input`
   width: 100%;
-  background: transparent;
+  background: ${color.complement.azulOscuro};
   border: none;
   color: ${color.complement.azulCielo};
 `;

frontend/src/components/Ticket/Ticket.jsx

@@ -88,13 +88,9 @@ const Ticket = () => {
     setDrawerOpen(false);
   };
 
-  const style ={
-    height: "fit-content",
-    width: "100%",
-    position: "relative",
-  }
+
   return (
-    <div className="test" style={style} >
+    <div className="test" >
       <TicketHeader loading={loading}>
         <div>
           <TicketInfo contact={contact} ticket={ticket} onClick={handleDrawerOpen} />

frontend/src/components/Ticket/Ticket.style.jsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+import { color } from "../../style/varibles";
+
+export const TicketStyled = styled.div`
+  width: 100%;
+  background-color: ${color.status.no};
+`;

frontend/src/components/Ticket/TicketsManager/TicketsList/TicketListItem/TicketListItem.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {color} from "../../../../../style/varibles";
+import { color } from "../../../../../style/varibles";
 import { useHistory } from "react-router-dom";
 import { parseISO, format, isSameDay } from "date-fns";
 
@@ -8,7 +8,7 @@ import { i18n } from "../../../../../translate/i18n";
 import api from "../../../../../services/api";
 import { AuthContext } from "../../../../../context/Auth/AuthContext";
 import toastError from "../../../../../errors/toastError";
-import Btn from "../../../../Base/Btn/Btn"
+import Btn from "../../../../Base/Btn/Btn";
 import {
   TicketDateStyled,
   TicketImgStyled,
@@ -24,7 +24,6 @@ const TicketListItem = ({ tickets }) => {
   const [loading, setLoading] = React.useState(false);
   const isMounted = React.useRef(true);
   const { user } = React.useContext(AuthContext);
-
   React.useEffect(() => {
     return () => {
       isMounted.current = false;
@@ -32,7 +31,7 @@ const TicketListItem = ({ tickets }) => {
   }, []);
 
   const handleAcepptTicket = async (id) => {
-    setLoading(true)
+    setLoading(true);
     try {
       await api.put(`/tickets/${id}`, {
         status: "open",
@@ -54,10 +53,14 @@ const TicketListItem = ({ tickets }) => {
   const handleSelectTicket = (id) => {
     history.push(`/tickets/${id}`);
   };
-  if (loading) return <LoadingScreen />;
+
+  
   return (
-    <React.Fragment key={tickets.id} >
-      <TicketListItemStyled queuecolor={tickets.queue} onClick={()=>handleSelectTicket(tickets.id)}>
+    <React.Fragment key={tickets.id}>
+      <TicketListItemStyled
+        queuecolor={tickets.queue}
+        onClick={() => handleSelectTicket(tickets.id)}
+      >
         {tickets.contact.profilePicUrl ? (
           <TicketImgStyled src={tickets.contact.profilePicUrl} alt={tickets.id} />
         ) : (
@@ -86,7 +89,13 @@ const TicketListItem = ({ tickets }) => {
           )}
         </TicketDateStyled>
         {tickets.status === "pending" ? (
-          <Btn text="Aceitar" bgcolor={color.complement.azulCielo} fontcolor={color.pricinpal.blanco} fontSize="12px"/>
+          <Btn
+            onClick={() => handleAcepptTicket(tickets.id)}
+            text="Aceitar"
+            bgcolor={color.complement.azulCielo}
+            fontcolor={color.pricinpal.blanco}
+            fontSize="12px"
+          />
         ) : (
           ""
         )}

frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.jsx

@@ -2,6 +2,8 @@ import React from "react";
 
 import openSocket from "socket.io-client";
 
+import LoadingScreen from "../../../LoadingScreen/LoadingScreen";
+
 import TicketListStyled from "./TicketsList.style";
 import useTickets from "../../../../hooks/useTickets";
 import TicketListItem from "../TicketsList/TicketListItem/TicketListItem";
@@ -94,10 +96,14 @@ const reducer = (state, action) => {
     return [];
   }
 };
-const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCount }) => {
+const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCount, valueTab }) => {
   const [pageNumber, setPageNumber] = React.useState(1);
   const [ticketsList, dispatch] = React.useReducer(reducer, []);
   const { user } = React.useContext(AuthContext);
+  React.useEffect(() => {
+    dispatch({ type: "RESET" });
+    setPageNumber(1);
+  }, [status, searchParam, dispatch, showAll, selectedQueueIds]);
   const { tickets, loading } = useTickets({
     pageNumber,
     searchParam,
@@ -105,10 +111,13 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou
     showAll,
     queueIds: JSON.stringify(selectedQueueIds),
   });
+
   React.useEffect(() => {
-    dispatch({ type: "RESET" });
-    setPageNumber(1);
-  }, [status, searchParam, dispatch, showAll, selectedQueueIds]);
+    if (typeof updateCount === "function") {
+      updateCount(ticketsList.length);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ticketsList]);
 
   React.useEffect(() => {
     if (!status && !searchParam) return;
@@ -116,7 +125,7 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou
       type: "LOAD_TICKETS",
       payload: tickets,
     });
-  }, [tickets, searchParam]);
+  }, [tickets, status, searchParam]);
 
   React.useEffect(() => {
     const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
@@ -162,6 +171,8 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou
 
     socket.on("appMessage", (data) => {
       if (data.action === "create" && shouldUpdateTicket(data.ticket)) {
+        // console.log('((((((((((((((((((( DATA.MESSAGE: ', data.message)
+
         dispatch({
           type: "UPDATE_TICKET_UNREAD_MESSAGES",
           // payload: data.ticket,
@@ -185,13 +196,16 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou
   }, [status, showAll, user, selectedQueueIds]);
 
   if (loading) return <TicketsListSkeleton />;
-  return (
-    <TicketListStyled>
-      {ticketsList.map((ticket) => (
-        <TicketListItem tickets={ticket} status={status} key={ticket.id} />
-      ))}
-    </TicketListStyled>
-  );
+  
+  if (status === valueTab)
+    return (
+      <TicketListStyled>
+        {ticketsList.map((ticket) => (
+          <TicketListItem tickets={ticket} key={ticket.id} />
+        ))}
+      </TicketListStyled>
+    );
+  return null;
 };
 
 export default TicketsList;

frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx

@@ -2,24 +2,25 @@ import React from "react";
 
 import TicketsManagerStyled from "./TicketsManager.style";
 import TicketsTabs from "./TicketsTabs/TicketsTabs";
+
+import TicketSearch from "../TicketSearch/TicketSearch";
 import TicketsList from "./TicketsList/TicketsList";
 import NewTicketModal from "../../NewTicketModal";
-import useTickets from "../../../hooks/useTickets";
+
 import { AuthContext } from "../../../context/Auth/AuthContext";
-import TicketSearch from "../TicketSearch/TicketSearch";
 
 const TicketsManager = () => {
   const [valueTab, setValueTab] = React.useState("open");
   const [searchParam, setSearchParam] = React.useState("");
   const [spinning, setSpinning] = React.useState(false);
   const [newTicketModalOpen, setNewTicketModalOpen] = React.useState(false);
+  const [openCount, setOpenCount] = React.useState(0);
+  const [pendingCount, setPendingCount] = React.useState(0);
+  const [closedCount, setClosedCount] = React.useState(0);
   const [showAllTickets, setShowAllTickets] = React.useState(false);
   const { user } = React.useContext(AuthContext);
   const userQueueIds = user.queues.map((q) => q.id);
   const [selectedQueueIds, setSelectedQueueIds] = React.useState(userQueueIds || []);
-  const { tickets } = useTickets({
-    searchParam
-  });
 
   let searchTimeout;
   const handleSearch = (e) => {
@@ -47,23 +48,47 @@ const TicketsManager = () => {
 
   return (
     <TicketsManagerStyled>
-      <TicketsTabs tickets={tickets} setValueTab={setValueTab} valueTab={valueTab} />
+      <TicketsTabs
+        setValueTab={setValueTab}
+        valueTab={valueTab}
+        count={{ openCount, pendingCount, closedCount }}
+      />
+
       <TicketSearch
         spinning={spinning}
         handleSearch={handleSearch}
         setNewTicketModalOpen={setNewTicketModalOpen}
       />
+
       <TicketsList
+        status="open"
+        updateCount={(v) => setOpenCount(v)}
         showAll={showAllTickets}
-        status={valueTab}
         selectedQueueIds={selectedQueueIds}
         searchParam={searchParam}
+        valueTab={valueTab}
       />
 
+      <TicketsList
+        status="pending"
+        updateCount={(v) => setPendingCount(v)}
+        selectedQueueIds={selectedQueueIds}
+        searchParam={searchParam}
+        valueTab={valueTab}
+      />
+      <TicketsList
+        status="closed"
+        updateCount={(v) => setClosedCount(v)}
+        selectedQueueIds={selectedQueueIds}
+        searchParam={searchParam}
+        valueTab={valueTab}
+      />
+      
       <NewTicketModal
         modalOpen={newTicketModalOpen}
         onClose={(e) => setNewTicketModalOpen(false)}
       />
+
     </TicketsManagerStyled>
   );
 };

frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTab/TicketsTab.jsx

@@ -1,7 +1,10 @@
 import React from "react";
 import { TicketsTabStyled } from "./TicketsTab.style";
+import { color } from "../../../../../style/varibles";
 
-const TicketsTab = ({ text, id, setValueTab, valueTab }) => {
+import BadgeComponent from "../../../../Base/Badge/BadgeComponent";
+
+const TicketsTab = ({ text, id, setValueTab, valueTab, count }) => {
   const [active, setActive] = React.useState(false);
 
   const handleClick = ({ target }) => {
@@ -11,6 +14,7 @@ const TicketsTab = ({ text, id, setValueTab, valueTab }) => {
   React.useEffect(() => {
     valueTab === id ? setActive(true) : setActive(false);
   }, [valueTab, id]);
+
   return (
     <TicketsTabStyled
       id={id}
@@ -19,6 +23,18 @@ const TicketsTab = ({ text, id, setValueTab, valueTab }) => {
       className={active ? "active" : ""}
     >
       {text}
+      {id !== "open" ? (
+        <BadgeComponent
+          counter={count}
+          position="absolute"
+          right="4px"
+          top="6px"
+          fontSize="12px"
+          bgcolor={id === "pending" ? color.status.warning : color.status.no}
+        />
+      ) : (
+        ""
+      )}
     </TicketsTabStyled>
   );
 };

frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTabs.jsx

@@ -1,16 +1,32 @@
 import React from "react";
+import TicketsTab from "../TicketsTabs/TicketsTab/TicketsTab";
 import { TicketTabsStyled } from "./TicketsTabs.style";
 
-import TicketsTab from "./TicketsTab/TicketsTab";
+const TicketsTabs = ({ setValueTab, valueTab, count }) => {
 
-const TicketsTabs = ({ tickets, setValueTab, valueTab }) => {
- 
-  if (!setValueTab) return null;
   return (
     <TicketTabsStyled>
-      <TicketsTab text="Aberto" id="open" setValueTab={setValueTab} valueTab={valueTab} />
-      <TicketsTab text="Aguardando" id="pending" setValueTab={setValueTab} valueTab={valueTab} />
-      <TicketsTab text="Fechado" id="closed" setValueTab={setValueTab} valueTab={valueTab} />
+      <TicketsTab
+        text="Aberto"
+        id="open"
+        setValueTab={setValueTab}
+        valueTab={valueTab}
+        count={count.openCount}
+      />
+      <TicketsTab
+        text="Aguardando"
+        id="pending"
+        setValueTab={setValueTab}
+        valueTab={valueTab}
+        count={count.pendingCount}
+      />
+      <TicketsTab
+        text="Fechado"
+        id="closed"
+        setValueTab={setValueTab}
+        valueTab={valueTab}
+        count={count.closedCount}
+      />
     </TicketTabsStyled>
   );
 };

frontend/src/style/varibles.jsx

@@ -47,7 +47,7 @@ export const color = {
   status: {
     no: "#FF0000",
     yes: "#00BE1E",
-    warning: "#FFC700",
+    warning: "#ffc800c7",
   },
   gradient: {
     bgOpacity: "#212f3cd7",