Tab Tickets ready

frontend/src/components/Base/MainContainer/MainContainer.style.jsx

@@ -24,7 +24,6 @@ const ContentContainerStyled = styled.div`
   margin-top: 16px;
   border-radius: 5px;
   background-color: ${color.complement.azulOscuro};
-  padding: 6px;
 `;
 
 export default MainContainerStyled;

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

@@ -0,0 +1,62 @@
+import React from "react";
+
+import NewTicketModal from "../../NewTicketModal";
+import TicketsList from "../../TicketsList/TicketsList";
+
+import { AuthContext } from "../../../context/Auth/AuthContext";
+import { i18n } from "../../../translate/i18n";
+import { Can } from "../../Can";
+import TicketsQueueSelect from "../../TicketsQueueSelect";
+import TicketsManagerStyled from "./TicketsManager.style";
+import TicketsTabs from "./TicketsTabs/TicketsTabs";
+
+const TicketsManager = () => {
+  const [valueTab, setValueTab] = React.useState("open");
+  const [searchParam, setSearchParam] = React.useState("");
+
+  const [newTicketModalOpen, setNewTicketModalOpen] = React.useState(false);
+  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 || []);
+
+  let searchTimeout;
+  const handleSearch = (e) => {
+    const searchedTerm = e.target.value.toLowerCase();
+
+    clearTimeout(searchTimeout);
+
+    if (searchedTerm === "") {
+      setSearchParam(searchedTerm);
+      return;
+    }
+
+    searchTimeout = setTimeout(() => {
+      setSearchParam(searchedTerm);
+    }, 200);
+  };
+
+  React.useEffect(() => {
+    if (user.profile.toUpperCase() === "ADMIN") {
+      setShowAllTickets(true);
+    }
+  }, [user.profile]);
+
+  return (
+    <TicketsManagerStyled>
+      <TicketsTabs setValueTab={setValueTab} valueTab={valueTab} />
+      <div style={{ display: "flex", flexDirection: "row", justifyContent: "center" }}>
+        <input type="text" style={{ width: "100%", margin: "0 6px" }}  onChange={handleSearch}/>
+        <button onClick={() => setNewTicketModalOpen(true)}>+</button>
+      </div>
+      <TicketsList status={valueTab} selectedQueueIds={selectedQueueIds} searchParam={searchParam} />
+      <NewTicketModal
+        modalOpen={newTicketModalOpen}
+        onClose={(e) => setNewTicketModalOpen(false)}
+      />
+    </TicketsManagerStyled>
+  );
+};
+
+export default TicketsManager;

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

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import {color} from "../../../style/varibles"
+
+const TicketsManagerStyled = styled.div`
+  display:flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  max-width: 425px;
+  border-right:1px solid ${color.gradient.border};
+`
+export default TicketsManagerStyled

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { TicketsTabStyled } from "./TicketsTab.style";
+
+const TicketsTab = ({ text, id, setValueTab, valueTab }) => {
+  const [active, setActive] = React.useState(false);
+
+  const handleClick = ({ target }) => {
+    setValueTab(target.id);
+  };
+
+  React.useEffect(() => {
+    valueTab === id ? setActive(true) : setActive(false);
+  }, [valueTab, id]);
+  return (
+    <TicketsTabStyled
+      id={id}
+      valueTab={valueTab}
+      onClick={handleClick}
+      className={active ? "active" : ""}
+    >
+      {text}
+    </TicketsTabStyled>
+  );
+};
+
+export default TicketsTab;
+

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

@@ -0,0 +1,36 @@
+import styled from "styled-components";
+import { color } from "../../../../../style/varibles";
+
+export const TicketsTabStyled = styled.li`
+  width: 100%;
+  position: relative;
+  cursor: pointer;
+  color: ${color.pricinpal.blanco};
+  font-size: 0.9rem;
+  text-transform: uppercase;
+  font-family: "Helvetica85";
+  padding: 1rem 1.5rem;
+  text-align: center;
+  &:after {
+    content: "";
+    display: block;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 0;
+    height: 2px;
+    background-color: white;
+    transition: width 0.2s linear;
+  }
+  &.active {
+    &:after {
+      width: 100%;
+      transition: width 0.2s linear;
+    }
+  }
+  &:nth-child(2) {
+    border-left: 1px solid ${color.gradient.border};
+    border-right: 1px solid ${color.gradient.border};
+  }
+`;
+

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

@@ -0,0 +1,18 @@
+import React from "react";
+import { TicketTabsStyled } from "./TicketsTabs.style";
+
+import TicketsTab from "./TicketsTab/TicketsTab";
+
+const TicketsTabs = ({ setValueTab, valueTab }) => {
+  if (!setValueTab) return null;
+  return (
+    <TicketTabsStyled>
+      <TicketsTab text="Aberto" id="open" setValueTab={setValueTab} valueTab={valueTab} />
+      <TicketsTab text="Pendente" id="pending" setValueTab={setValueTab} valueTab={valueTab} />
+      <TicketsTab text="Fechado" id="closed" setValueTab={setValueTab} valueTab={valueTab} />
+    </TicketTabsStyled>
+  );
+};
+
+export default TicketsTabs;
+

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

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { color } from "../../../../style/varibles";
+
+export const TicketTabsStyled = styled.ul`
+  display: flex;
+  justify-content: center;
+  border-bottom: 1px solid ${color.gradient.border};
+  margin-bottom: 1rem;
+  margin-left: 0;
+  margin-right: 0;
+`;
+

frontend/src/components/TicketListItem/TicketListItem.jsx

@@ -21,7 +21,6 @@ const TicketListItem = ({ ticket, status }) => {
   const handleSelectTicket = (id) => {
     history.push(`/tickets/${id}`);
   };
-  console.log(ticket.id);
 
   if (ticket.status !== status) return null;
   return (

frontend/src/components/TicketsManager/TicketsManager.jsx

@@ -1,65 +0,0 @@
-import React from "react";
-
-import NewTicketModal from "../NewTicketModal";
-import TicketsList from "../TicketsList/TicketsList";
-
-import { i18n } from "../../translate/i18n";
-import { AuthContext } from "../../context/Auth/AuthContext";
-import { Can } from "../Can";
-import TicketsQueueSelect from "../TicketsQueueSelect";
-import TicketsManagerStyled from "./TicketsManager.style";
-
-const TicketsManager = () => {
-  const [valueTab, setValueTab] = React.useState("open");
-
-  const [newTicketModalOpen, setNewTicketModalOpen] = React.useState(false);
-  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 || []);
-
-  React.useEffect(() => {
-    if (user.profile.toUpperCase() === "ADMIN") {
-      setShowAllTickets(true);
-    }
-  }, [user.profile]);
-
-
-
-  const styleTmp = {
-    padding:"12px 0 ",
-    cursor: "pointer",
-  }
-
-  
-  console.log(valueTab);
-
-  return (
-    <TicketsManagerStyled>
-      <ul>
-        <li style={styleTmp} id="open" onClick={(e) => setValueTab(e.target.id)}>
-          Abertos
-        </li>
-        <li style={styleTmp} id="pending" onClick={(e) => setValueTab(e.target.id)}>
-          Pendentes
-        </li>
-        <li style={styleTmp} id="closed" onClick={(e) => setValueTab(e.target.id)}>
-          Fechados
-        </li>
-      </ul>
-      <TicketsList
-        status={valueTab}
-        selectedQueueIds={selectedQueueIds}
-        updateCount={(val) => setPendingCount(val)}
-      />
-      <NewTicketModal
-        modalOpen={newTicketModalOpen}
-        onClose={(e) => setNewTicketModalOpen(true)}
-      />
-    </TicketsManagerStyled>
-  );
-};
-
-export default TicketsManager;

frontend/src/components/TicketsManager/TicketsManager.style.jsx

@@ -1,7 +0,0 @@
-import styled from "styled-components"
-
-const TicketsManagerStyled = styled.div`
-  display:flex;
-  flex-direction: column;
-`
-export default TicketsManagerStyled

frontend/src/pages/Tickets/Tickets.jsx

@@ -3,7 +3,7 @@ import { useParams } from "react-router-dom";
 
 import TicketsStyled from "./Tickets.style";
 
-import TicketsManager from "../../components/TicketsManager/TicketsManager";
+import TicketsManager from "../../components/Ticket/TicketsManager/TicketsManager";
 import Ticket from "../../components/Ticket/";
 
 const Tickets = () => {

frontend/src/style/varibles.jsx

@@ -39,22 +39,23 @@ export const color = {
     grisOscuro: "#3C3C3B",
     blanco: "#FFFFFF",
   },
-  complement:{
+  complement: {
     azulCielo: "#55A5DC",
     azulOscuro: "#212F3C",
     crisClaro: "#F6F6F6",
   },
-  status:{
+  status: {
     no: "#FF0000",
     yes: "#00BE1E",
-    warning: "#FFC700"
+    warning: "#FFC700",
   },
-  gradient:{
+  gradient: {
-    bgOpacity:"#212F3CD8",
+    bgOpacity: "#212f3cd7",
-    placeholder:"#ffffff83"
+    placeholder: "#ffffff83",
+    border: "#55A5DC3F",
+  },
+  shadow: {
+    dark: "2px 2px 4px 2px",
   },
-  shadow:{
-    dark:"2px 2px 4px 2px"
-  }
 };