diff --git a/frontend/src/components/Base/MainContainer/MainContainer.style.jsx b/frontend/src/components/Base/MainContainer/MainContainer.style.jsx index ac76b22..3ee5bbd 100644 --- a/frontend/src/components/Base/MainContainer/MainContainer.style.jsx +++ b/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; diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx new file mode 100644 index 0000000..da928ae --- /dev/null +++ b/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 ( + + +
+ + +
+ + setNewTicketModalOpen(false)} + /> + + ); +}; + +export default TicketsManager; diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsManager.style.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsManager.style.jsx new file mode 100644 index 0000000..660129e --- /dev/null +++ b/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 \ No newline at end of file diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTab/TicketsTab.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTab/TicketsTab.jsx new file mode 100644 index 0000000..dde8583 --- /dev/null +++ b/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 ( + + {text} + + ); +}; + +export default TicketsTab; + diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTab/TicketsTab.style.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTab/TicketsTab.style.jsx new file mode 100644 index 0000000..17c27b4 --- /dev/null +++ b/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}; + } +`; + diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTabs.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTabs.jsx new file mode 100644 index 0000000..a86715e --- /dev/null +++ b/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 ( + + + + + + ); +}; + +export default TicketsTabs; + diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTabs.style.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTabs.style.jsx new file mode 100644 index 0000000..0ba690e --- /dev/null +++ b/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; +`; + diff --git a/frontend/src/components/TicketsManager/index.js b/frontend/src/components/Ticket/TicketsManager/index.js similarity index 100% rename from frontend/src/components/TicketsManager/index.js rename to frontend/src/components/Ticket/TicketsManager/index.js diff --git a/frontend/src/components/TicketListItem/TicketListItem.jsx b/frontend/src/components/TicketListItem/TicketListItem.jsx index 9673a1f..7260c7e 100644 --- a/frontend/src/components/TicketListItem/TicketListItem.jsx +++ b/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 ( diff --git a/frontend/src/components/TicketsManager/TicketsManager.jsx b/frontend/src/components/TicketsManager/TicketsManager.jsx deleted file mode 100644 index 29b74fb..0000000 --- a/frontend/src/components/TicketsManager/TicketsManager.jsx +++ /dev/null @@ -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 ( - - - setPendingCount(val)} - /> - setNewTicketModalOpen(true)} - /> - - ); -}; - -export default TicketsManager; diff --git a/frontend/src/components/TicketsManager/TicketsManager.style.jsx b/frontend/src/components/TicketsManager/TicketsManager.style.jsx deleted file mode 100644 index 1ed325f..0000000 --- a/frontend/src/components/TicketsManager/TicketsManager.style.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import styled from "styled-components" - -const TicketsManagerStyled = styled.div` - display:flex; - flex-direction: column; -` -export default TicketsManagerStyled \ No newline at end of file diff --git a/frontend/src/pages/Tickets/Tickets.jsx b/frontend/src/pages/Tickets/Tickets.jsx index fa7eb4c..f6fbc1f 100644 --- a/frontend/src/pages/Tickets/Tickets.jsx +++ b/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 = () => { diff --git a/frontend/src/style/varibles.jsx b/frontend/src/style/varibles.jsx index ecf66e6..ef0e05a 100644 --- a/frontend/src/style/varibles.jsx +++ b/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:{ - bgOpacity:"#212F3CD8", - placeholder:"#ffffff83" + gradient: { + bgOpacity: "#212f3cd7", + placeholder: "#ffffff83", + border: "#55A5DC3F", + }, + shadow: { + dark: "2px 2px 4px 2px", }, - shadow:{ - dark:"2px 2px 4px 2px" - } };