From 1230348bb8c06b6e8d196e7caa3b668004db7420 Mon Sep 17 00:00:00 2001 From: RenatoDiGiacomo Date: Tue, 26 Jul 2022 17:51:57 -0300 Subject: [PATCH] Tickets Manager in progress, List of tickets update Organize and styled styled and input seach in function. Badge msg unread done, dating msg done --- .../src/assets/images/User/clientDefault.png | Bin 0 -> 5712 bytes .../components/Base/Badge/BadgeComponent.jsx | 13 ++ .../Base/Badge/BadgeComponent.style.jsx | 22 ++++ frontend/src/components/MessagesList/index.js | 1 + frontend/src/components/Ticket/Ticket.jsx | 122 ++++++++++++++++++ .../TicketListItem/TicketListItem.jsx | 50 ++++--- .../TicketListItem/TicketListItem.style.jsx | 71 ++++++++++ .../{ => Ticket}/TicketListItem/index.js | 6 +- .../Ticket/TicketSearch/TicketSearch.jsx | 10 ++ .../TicketSearch/TicketSearch.styled.jsx | 1 + .../TicketSearchBtn/TicketSearchBtn.jsx | 10 ++ .../TicketSearchBtn.styled.jsx | 12 ++ .../TicketSearchInput/TicketSearchInput.jsx | 15 +++ .../TicketSearchInput.styled.jsx | 17 +++ .../Ticket/TicketSkeleton/TicketSkeleton.jsx | 9 ++ .../TicketSkeleton/TicketSkeleton.style.jsx | 4 + .../TicketsList/TicketsList.jsx | 53 ++------ .../TicketsManager}/TicketsList/index.js | 12 +- .../Ticket/TicketsManager/TicketsManager.jsx | 14 +- .../TicketsManager/TicketsManager.style.jsx | 1 + .../TicketsTab/TicketsTab.style.jsx | 1 + .../TicketsTabs/TicketsTabs.jsx | 2 +- .../components/Ticket/TicketsManager/index.js | 14 +- .../TicketListItem/TicketListItem.style.jsx | 31 ----- frontend/src/pages/Tickets/Tickets.jsx | 2 +- frontend/src/pages/Tickets/index.js | 2 +- frontend/src/style/varibles.jsx | 1 + 27 files changed, 378 insertions(+), 118 deletions(-) create mode 100644 frontend/src/assets/images/User/clientDefault.png create mode 100644 frontend/src/components/Base/Badge/BadgeComponent.jsx create mode 100644 frontend/src/components/Base/Badge/BadgeComponent.style.jsx create mode 100644 frontend/src/components/Ticket/Ticket.jsx rename frontend/src/components/{ => Ticket}/TicketListItem/TicketListItem.jsx (52%) create mode 100644 frontend/src/components/Ticket/TicketListItem/TicketListItem.style.jsx rename frontend/src/components/{ => Ticket}/TicketListItem/index.js (97%) create mode 100644 frontend/src/components/Ticket/TicketSearch/TicketSearch.jsx create mode 100644 frontend/src/components/Ticket/TicketSearch/TicketSearch.styled.jsx create mode 100644 frontend/src/components/Ticket/TicketSearch/TicketSearchBtn/TicketSearchBtn.jsx create mode 100644 frontend/src/components/Ticket/TicketSearch/TicketSearchBtn/TicketSearchBtn.styled.jsx create mode 100644 frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.jsx create mode 100644 frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.styled.jsx create mode 100644 frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.jsx create mode 100644 frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.style.jsx rename frontend/src/components/{ => Ticket/TicketsManager}/TicketsList/TicketsList.jsx (79%) rename frontend/src/components/{ => Ticket/TicketsManager}/TicketsList/index.js (96%) delete mode 100644 frontend/src/components/TicketListItem/TicketListItem.style.jsx diff --git a/frontend/src/assets/images/User/clientDefault.png b/frontend/src/assets/images/User/clientDefault.png new file mode 100644 index 0000000000000000000000000000000000000000..75dbecebb122ae06ddd64a8c04696f6951bd97b9 GIT binary patch literal 5712 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 { + return ( + + {counter} + + ); +}; + +export default BadgeComponent; + diff --git a/frontend/src/components/Base/Badge/BadgeComponent.style.jsx b/frontend/src/components/Base/Badge/BadgeComponent.style.jsx new file mode 100644 index 0000000..471ad11 --- /dev/null +++ b/frontend/src/components/Base/Badge/BadgeComponent.style.jsx @@ -0,0 +1,22 @@ +import styled from "styled-components"; +import { color } from "../../../style/varibles"; + +export const BadgeComponentStyled = styled.span` + position: ${({ position }) => (position ? position : "relative")}; + top: ${({ top }) => (top ? top : "initial")}; + left: ${({ left }) => (left ? left : "initial")}; + right: ${({ right }) => (right ? right : "initial")}; + bottom: ${({ bottom }) => (bottom ? bottom : "initial")}; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + border-radius: 50px; + object-fit: cover; + width: 21px; + height: 21px; + font-size: 16px; + color: ${color.pricinpal.blanco}; + background-color: ${color.status.yes}; +`; + diff --git a/frontend/src/components/MessagesList/index.js b/frontend/src/components/MessagesList/index.js index 3eedb23..6a4745e 100644 --- a/frontend/src/components/MessagesList/index.js +++ b/frontend/src/components/MessagesList/index.js @@ -45,6 +45,7 @@ const useStyles = makeStyles((theme) => ({ flexGrow: 1, padding: "20px 20px 20px 20px", overflowY: "scroll", + height: "50vh", [theme.breakpoints.down("sm")]: { paddingBottom: "90px", }, diff --git a/frontend/src/components/Ticket/Ticket.jsx b/frontend/src/components/Ticket/Ticket.jsx new file mode 100644 index 0000000..738e433 --- /dev/null +++ b/frontend/src/components/Ticket/Ticket.jsx @@ -0,0 +1,122 @@ +import React, { useState, useEffect } from "react"; +import { useParams, useHistory } from "react-router-dom"; + +import { toast } from "react-toastify"; +import openSocket from "socket.io-client"; +import clsx from "clsx"; + +import ContactDrawer from "../ContactDrawer"; +import MessageInput from "../MessageInput"; +import TicketHeader from "../TicketHeader"; +import TicketInfo from "../TicketInfo"; +import TicketActionButtons from "../TicketActionButtons"; +import MessagesList from "../MessagesList"; +import api from "../../services/api"; +import { ReplyMessageProvider } from "../../context/ReplyingMessage/ReplyingMessageContext"; +import toastError from "../../errors/toastError"; + +const Ticket = () => { + const { ticketId } = useParams(); + const history = useHistory(); + + const [drawerOpen, setDrawerOpen] = useState(false); + const [loading, setLoading] = useState(true); + const [contact, setContact] = useState({}); + const [ticket, setTicket] = useState({}); + + const [statusChatEnd, setStatusChatEnd] = useState({}); + + useEffect(() => { + setLoading(true); + const delayDebounceFn = setTimeout(() => { + const fetchTicket = async () => { + try { + const { data } = await api.get("/tickets/" + ticketId); + + setContact(data.contact.contact); + setTicket(data.contact); + + setStatusChatEnd(data.statusChatEnd); + + setLoading(false); + } catch (err) { + setLoading(false); + toastError(err); + } + }; + fetchTicket(); + }, 500); + return () => clearTimeout(delayDebounceFn); + }, [ticketId, history]); + + useEffect(() => { + const socket = openSocket(process.env.REACT_APP_BACKEND_URL); + + socket.on("connect", () => socket.emit("joinChatBox", ticketId)); + + socket.on("ticket", (data) => { + if (data.action === "update") { + setTicket(data.ticket); + } + + if (data.action === "delete") { + toast.success("Ticket deleted sucessfully."); + history.push("/tickets"); + } + }); + + socket.on("contact", (data) => { + if (data.action === "update") { + setContact((prevState) => { + if (prevState.id === data.contact?.id) { + return { ...prevState, ...data.contact }; + } + return prevState; + }); + } + }); + + return () => { + socket.disconnect(); + }; + }, [ticketId, history]); + + const handleDrawerOpen = () => { + setDrawerOpen(true); + }; + + const handleDrawerClose = () => { + setDrawerOpen(false); + }; + + const style ={ + height: "fit-content", + width: "100%", + position: "relative", + } + return ( +
+ +
+ +
+
+ +
+ + + + + + + +
+ ); +}; + +export default Ticket; diff --git a/frontend/src/components/TicketListItem/TicketListItem.jsx b/frontend/src/components/Ticket/TicketListItem/TicketListItem.jsx similarity index 52% rename from frontend/src/components/TicketListItem/TicketListItem.jsx rename to frontend/src/components/Ticket/TicketListItem/TicketListItem.jsx index 5a1a341..1a0a397 100644 --- a/frontend/src/components/TicketListItem/TicketListItem.jsx +++ b/frontend/src/components/Ticket/TicketListItem/TicketListItem.jsx @@ -2,26 +2,27 @@ import React, { useState, useEffect, useRef, useContext } from "react"; import { useHistory, useParams } from "react-router-dom"; import { parseISO, format, isSameDay } from "date-fns"; -import clsx from "clsx"; -import { i18n } from "../../translate/i18n"; +import { i18n } from "../../../translate/i18n"; -import api from "../../services/api"; -import { AuthContext } from "../../context/Auth/AuthContext"; -import toastError from "../../errors/toastError"; +import api from "../../../services/api"; +import { AuthContext } from "../../../context/Auth/AuthContext"; +import toastError from "../../../errors/toastError"; import { TicketDateStyled, TicketImgStyled, TicketListItemStyled, TicketTitleStyled, } from "./TicketListItem.style"; +import Loading from "../../LoadingScreen/Loading"; +import BadgeComponent from "../../Base/Badge/BadgeComponent"; +import DefaultUser from "../../../assets/images/User/clientDefault.png"; const TicketListItem = ({ tickets }) => { const history = useHistory(); - const [loading, setLoading] = useState(false); - const { ticketId } = useParams(); - const isMounted = useRef(true); - const { user } = useContext(AuthContext); + const [loading, setLoading] = React.useState(false); + const isMounted = React.useRef(true); + const { user } = React.useContext(AuthContext); useEffect(() => { return () => { @@ -33,7 +34,7 @@ const TicketListItem = ({ tickets }) => { setLoading(true); try { await api.put(`/tickets/${id}`, { - status: "open", + status: tickets.status, userId: user?.id, }); } catch (err) { @@ -47,17 +48,32 @@ const TicketListItem = ({ tickets }) => { }; const handleSelectTicket = (id) => { - history.push(`/tickets/${id}`); + history.push(`/tickets/${tickets.id}`); }; - - if (!tickets) return null; + console.log(tickets); + if (!tickets) return ; return ( - - - + + + {tickets.contact.profilePicUrl ? ( + + ) : ( + + )} +

{tickets.contact.name}

{tickets.lastMessage}

+ {tickets.unreadMessages ? ( + + ) : ( + "" + )} {isSameDay(parseISO(tickets.updatedAt), new Date()) ? ( @@ -65,9 +81,7 @@ const TicketListItem = ({ tickets }) => { ) : ( <>{format(parseISO(tickets.updatedAt), "dd/MM/yyyy")} )} -

badge

 - ); diff --git a/frontend/src/components/Ticket/TicketListItem/TicketListItem.style.jsx b/frontend/src/components/Ticket/TicketListItem/TicketListItem.style.jsx new file mode 100644 index 0000000..8162421 --- /dev/null +++ b/frontend/src/components/Ticket/TicketListItem/TicketListItem.style.jsx @@ -0,0 +1,71 @@ +import styled from "styled-components"; +import { color } from "../../../style/varibles"; + +export const TicketListItemStyled = styled.li` + cursor: pointer; + position: relative; + background-color: ${color.complement.azulOscuro}; + display: flex; + align-items: center; + padding: 0.5rem 6px; + border-bottom: 1.5px solid ${color.gradient.border}; + height: fit-content; + transition: filter .2s linear; + &:before { + position: absolute; + left: 0; + content: ""; + display: block; + background-color: ${({ queuecolor }) => (queuecolor ? queuecolor : color.gradient.border)}; + width: 4px; + height: 55px; + } + &:nth-child(1) { + margin-top: 6px; + } + &:hover{ + filter: brightness(1.2); + transition: filter .2s linear; + } +`; + +export const TicketTitleStyled = styled.div` + position: relative; + display: flex; + flex-direction: column; + flex-grow: 1; + row-gap: 6px; + & p { + color: ${color.pricinpal.blanco}; + width: 190px; + font-size: 12px; + font-family: "Helvetica55"; + &:nth-child(1) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + &:nth-child(2) { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: ${color.gradient.text}; + } + } +`; +export const TicketDateStyled = styled.div` + color: ${color.pricinpal.blanco}; + font-size: 12px; + font-family: "Helvetica55"; + display: block; + color: white; +`; + +export const TicketImgStyled = styled.img` + width: 40px; + height: 40px; + object-fit: contain; + border-radius: 50%; + margin: 0 6px; +`; + diff --git a/frontend/src/components/TicketListItem/index.js b/frontend/src/components/Ticket/TicketListItem/index.js similarity index 97% rename from frontend/src/components/TicketListItem/index.js rename to frontend/src/components/Ticket/TicketListItem/index.js index 5cc3008..4774b8c 100644 --- a/frontend/src/components/TicketListItem/index.js +++ b/frontend/src/components/Ticket/TicketListItem/index.js @@ -102,10 +102,10 @@ const useStyles = makeStyles(theme => ({ })); const TicketListItem = ({ ticket }) => { - const classes = ReactDOM.useStyles(); - const history = ReactDOM.useHistory(); + const classes = useStyles(); + const history = useHistory(); const [loading, setLoading] = useState(false); - const { ticketId } = ReactDOM.useParams(); + const { ticketId } = useParams(); const isMounted = useRef(true); const { user } = useContext(AuthContext); diff --git a/frontend/src/components/Ticket/TicketSearch/TicketSearch.jsx b/frontend/src/components/Ticket/TicketSearch/TicketSearch.jsx new file mode 100644 index 0000000..d5e2f72 --- /dev/null +++ b/frontend/src/components/Ticket/TicketSearch/TicketSearch.jsx @@ -0,0 +1,10 @@ +import React from 'react' +import TicketSearchInput from './TicketSearchInput/TicketSearchInput' + +const TicketSearch = ({setNewTicketModalOpen, handleSearch}) => { + return ( + + ) +} + +export default TicketSearch \ No newline at end of file diff --git a/frontend/src/components/Ticket/TicketSearch/TicketSearch.styled.jsx b/frontend/src/components/Ticket/TicketSearch/TicketSearch.styled.jsx new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/frontend/src/components/Ticket/TicketSearch/TicketSearch.styled.jsx @@ -0,0 +1 @@ + diff --git a/frontend/src/components/Ticket/TicketSearch/TicketSearchBtn/TicketSearchBtn.jsx b/frontend/src/components/Ticket/TicketSearch/TicketSearchBtn/TicketSearchBtn.jsx new file mode 100644 index 0000000..166d26e --- /dev/null +++ b/frontend/src/components/Ticket/TicketSearch/TicketSearchBtn/TicketSearchBtn.jsx @@ -0,0 +1,10 @@ +import React from 'react'; +import {TicketSearchBtnStyled} from "./TicketSearchBtn.styled" + +const TicketSearchBtn = ({setNewTicketModalOpen}) => { + return ( + setNewTicketModalOpen(true)}>+ + ) +} + +export default TicketSearchBtn \ No newline at end of file diff --git a/frontend/src/components/Ticket/TicketSearch/TicketSearchBtn/TicketSearchBtn.styled.jsx b/frontend/src/components/Ticket/TicketSearch/TicketSearchBtn/TicketSearchBtn.styled.jsx new file mode 100644 index 0000000..15cd837 --- /dev/null +++ b/frontend/src/components/Ticket/TicketSearch/TicketSearchBtn/TicketSearchBtn.styled.jsx @@ -0,0 +1,12 @@ +import styled from "styled-components"; +import { color } from "../../../../style/varibles"; + +export const TicketSearchBtnStyled = styled.button` + cursor: pointer; + background-color: transparent; + color: ${color.pricinpal.blanco}; + font-size: 26px; + border: none; + font-family: "Helvetica55"; +`; + diff --git a/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.jsx b/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.jsx new file mode 100644 index 0000000..3edf9f6 --- /dev/null +++ b/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.jsx @@ -0,0 +1,15 @@ +import React from "react"; +import TicketSearchBtn from "../TicketSearchBtn/TicketSearchBtn"; +import { TicketSearchDivStyled, TicketSearchInputStyled } from "./TicketSearchInput.styled"; + +const TicketSearchInput = ({ setNewTicketModalOpen, handleSearch }) => { + return ( + + + + + ); +}; + +export default TicketSearchInput; + diff --git a/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.styled.jsx b/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.styled.jsx new file mode 100644 index 0000000..98a7f49 --- /dev/null +++ b/frontend/src/components/Ticket/TicketSearch/TicketSearchInput/TicketSearchInput.styled.jsx @@ -0,0 +1,17 @@ +import styled from "styled-components"; +import { color } from "../../../../style/varibles"; + +export const TicketSearchDivStyled = styled.div` + padding: 0 6px; + display: flex; + flex-direction: row; +`; +export const TicketSearchInputStyled = styled.input` + width: 100%; + margin-right: 12px; + background-color: ${color.complement.azulOscuro}; + border: 2px solid ${color.pricinpal.blanco}; + color: ${color.pricinpal.blanco}; + border-radius: 4px; + padding: 4px; +`; diff --git a/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.jsx b/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.jsx new file mode 100644 index 0000000..48ffecd --- /dev/null +++ b/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.jsx @@ -0,0 +1,9 @@ +import React from 'react' + +const TicketSkeleton = () => { + return ( +
TicketSkeleton
+ ) +} + +export default TicketSkeleton \ No newline at end of file diff --git a/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.style.jsx b/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.style.jsx new file mode 100644 index 0000000..51fb82d --- /dev/null +++ b/frontend/src/components/Ticket/TicketSkeleton/TicketSkeleton.style.jsx @@ -0,0 +1,4 @@ +import styled from "styled-components"; +import {color} from "../../../style/varibles" + +export const TicketSkeletonStyled = styled.div``; diff --git a/frontend/src/components/TicketsList/TicketsList.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.jsx similarity index 79% rename from frontend/src/components/TicketsList/TicketsList.jsx rename to frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.jsx index d3f7c66..234f42a 100644 --- a/frontend/src/components/TicketsList/TicketsList.jsx +++ b/frontend/src/components/Ticket/TicketsManager/TicketsList/TicketsList.jsx @@ -2,20 +2,17 @@ import React from "react"; import { useHistory } from "react-router-dom"; import openSocket from "socket.io-client"; -import useTickets from "../../hooks/useTickets"; -import TicketListItem from "../TicketListItem/TicketListItem"; -import TicketsListSkeleton from "../TicketsListSkeleton"; +import useTickets from "../../../../hooks/useTickets"; +import TicketListItem from "../../TicketListItem/TicketListItem"; +import TicketsListSkeleton from "../../../TicketsListSkeleton"; -import { i18n } from "../../translate/i18n"; -import { AuthContext } from "../../context/Auth/AuthContext"; +import { i18n } from "../../../../translate/i18n"; +import { AuthContext } from "../../../../context/Auth/AuthContext"; const reducer = (state, action) => { if (action.type === "LOAD_TICKETS") { const newTickets = action.payload; - newTickets.forEach((ticket) => { - // console.log("* ticket.unreadMessages: ", ticket.unreadMessages); - const ticketIndex = state.findIndex((t) => t.id === ticket.id); if (ticketIndex !== -1) { state[ticketIndex] = ticket; @@ -26,7 +23,6 @@ const reducer = (state, action) => { state.push(ticket); } }); - return [...state]; } @@ -37,22 +33,17 @@ const reducer = (state, action) => { if (ticketIndex !== -1) { state[ticketIndex].unreadMessages = 0; } - return [...state]; } - if (action.type === "UPDATE_TICKET") { const ticket = action.payload; - // console.log('++++++++++++ UPDATE_TICKET: ',ticket) - const ticketIndex = state.findIndex((t) => t.id === ticket.id); if (ticketIndex !== -1) { state[ticketIndex] = ticket; } else { state.unshift(ticket); } - return [...state]; } @@ -79,6 +70,7 @@ const reducer = (state, action) => { if (action.type === "UPDATE_TICKET_CONTACT") { const contact = action.payload; + const ticketIndex = state.findIndex((t) => t.contactId === contact.id); if (ticketIndex !== -1) { state[ticketIndex].contact = contact; @@ -88,6 +80,7 @@ const reducer = (state, action) => { if (action.type === "DELETE_TICKET") { const ticketId = action.payload; + const ticketIndex = state.findIndex((t) => t.id === ticketId); if (ticketIndex !== -1) { state.splice(ticketIndex, 1); @@ -112,7 +105,6 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou showAll, queueIds: JSON.stringify(selectedQueueIds), }); - React.useEffect(() => { dispatch({ type: "RESET" }); setPageNumber(1); @@ -124,7 +116,7 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou type: "LOAD_TICKETS", payload: tickets, }); - }, [tickets, status, searchParam]); + }, [tickets, searchParam]); React.useEffect(() => { const socket = openSocket(process.env.REACT_APP_BACKEND_URL); @@ -170,8 +162,6 @@ 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, @@ -194,31 +184,14 @@ const TicketsList = ({ status, searchParam, showAll, selectedQueueIds, updateCou }; }, [status, showAll, user, selectedQueueIds]); - React.useEffect(() => { - if (typeof updateCount === "function") { - updateCount(ticketsList.length); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ticketsList]); - const loadMore = () => { - setPageNumber((prevState) => prevState + 1); - }; + if (ticketsList <= 0) return

carregando

; - const handleScroll = (e) => { - if (!hasMore || loading) return; - - const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; - - if (scrollHeight - (scrollTop + 100) < clientHeight) { - loadMore(); - } - }; - console.log(ticketsList); return ( -
    - {ticketsList && - ticketsList.map((ticket) => )} +
      + {ticketsList.map((ticket) => ( + + ))}
    ); }; diff --git a/frontend/src/components/TicketsList/index.js b/frontend/src/components/Ticket/TicketsManager/TicketsList/index.js similarity index 96% rename from frontend/src/components/TicketsList/index.js rename to frontend/src/components/Ticket/TicketsManager/TicketsList/index.js index 1fb3263..c002abc 100644 --- a/frontend/src/components/TicketsList/index.js +++ b/frontend/src/components/Ticket/TicketsManager/TicketsList/index.js @@ -5,12 +5,12 @@ import { makeStyles } from "@material-ui/core/styles"; import List from "@material-ui/core/List"; import Paper from "@material-ui/core/Paper"; -import TicketListItem from "../TicketListItem"; -import TicketsListSkeleton from "../TicketsListSkeleton"; +import TicketListItem from "../../../TicketListItem"; +import TicketsListSkeleton from "../../../TicketsListSkeleton"; -import useTickets from "../../hooks/useTickets"; -import { i18n } from "../../translate/i18n"; -import { AuthContext } from "../../context/Auth/AuthContext"; +import useTickets from "../../../../hooks/useTickets"; +import { i18n } from "../../../../translate/i18n"; +import { AuthContext } from "../../../../context/Auth/AuthContext"; const useStyles = makeStyles(theme => ({ ticketsListWrapper: { @@ -74,8 +74,6 @@ const useStyles = makeStyles(theme => ({ const reducer = (state, action) => { if (action.type === "LOAD_TICKETS") { const newTickets = action.payload; - - newTickets.forEach(ticket => { // console.log('* ticket.unreadMessages: ',ticket.unreadMessages) diff --git a/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx b/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx index 6b16cc0..cbdf41f 100644 --- a/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx +++ b/frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx @@ -2,10 +2,11 @@ import React from "react"; import TicketsManagerStyled from "./TicketsManager.style"; import TicketsTabs from "./TicketsTabs/TicketsTabs"; -import TicketsList from "../../TicketsList/TicketsList"; +import TicketsList from "./TicketsList/TicketsList"; import NewTicketModal from "../../NewTicketModal"; import { AuthContext } from "../../../context/Auth/AuthContext"; +import TicketSearch from "../TicketSearch/TicketSearch"; const TicketsManager = () => { const [valueTab, setValueTab] = React.useState("open"); @@ -39,18 +40,13 @@ const TicketsManager = () => { setShowAllTickets(true); } }, [user.profile]); - return ( + - {/*Input and add new call*/} -
    - - -
    - {/*Input and add new call*/} - + { return ( - + ); diff --git a/frontend/src/components/Ticket/TicketsManager/index.js b/frontend/src/components/Ticket/TicketsManager/index.js index 7a2ed26..44c89bc 100644 --- a/frontend/src/components/Ticket/TicketsManager/index.js +++ b/frontend/src/components/Ticket/TicketsManager/index.js @@ -13,14 +13,14 @@ import FormControlLabel from "@material-ui/core/FormControlLabel"; import Switch from "@material-ui/core/Switch"; import { Button } from "@material-ui/core"; -import NewTicketModal from "../NewTicketModal"; -import TicketsList from "../TicketsList"; -import TabPanel from "../TabPanel"; +import NewTicketModal from "../../NewTicketModal/index"; +import TicketsList from "../../TicketsList"; +import TabPanel from "../../TabPanel"; -import { i18n } from "../../translate/i18n"; -import { AuthContext } from "../../context/Auth/AuthContext"; -import { Can } from "../Can"; -import TicketsQueueSelect from "../TicketsQueueSelect"; +import { i18n } from "../../../translate/i18n"; +import { AuthContext } from "../../../context/Auth/AuthContext"; +import { Can } from "../../Can"; +import TicketsQueueSelect from "../../TicketsQueueSelect"; const useStyles = makeStyles((theme) => ({ ticketsWrapper: { diff --git a/frontend/src/components/TicketListItem/TicketListItem.style.jsx b/frontend/src/components/TicketListItem/TicketListItem.style.jsx deleted file mode 100644 index ccef80d..0000000 --- a/frontend/src/components/TicketListItem/TicketListItem.style.jsx +++ /dev/null @@ -1,31 +0,0 @@ -import styled from "styled-components"; -import { color } from "../../style/varibles"; - -export const TicketListItemStyled = styled.li` - background-color: ${color.pricinpal.grisOscuro}; - display: flex; - align-items: center; - padding: 0.5rem 6px; - border-bottom: 1.5px solid ${color.gradient.border}; - &:nth-child(1){ - margin-top: 6px; - } -`; - -export const TicketTitleStyled = styled.div` - display: flex; - flex-direction: column; - flex-grow: 1; -`; -export const TicketDateStyled = styled.div` - display: block; - color: white; -`; - -export const TicketImgStyled = styled.img` - width: 40px; - height: 40px; - object-fit: contain; - border-radius: 50%; -`; - diff --git a/frontend/src/pages/Tickets/Tickets.jsx b/frontend/src/pages/Tickets/Tickets.jsx index f6fbc1f..78ef468 100644 --- a/frontend/src/pages/Tickets/Tickets.jsx +++ b/frontend/src/pages/Tickets/Tickets.jsx @@ -4,7 +4,7 @@ import { useParams } from "react-router-dom"; import TicketsStyled from "./Tickets.style"; import TicketsManager from "../../components/Ticket/TicketsManager/TicketsManager"; -import Ticket from "../../components/Ticket/"; +import Ticket from "../../components/Ticket/Ticket"; const Tickets = () => { const { ticketId } = useParams(); diff --git a/frontend/src/pages/Tickets/index.js b/frontend/src/pages/Tickets/index.js index 461145a..1c68971 100644 --- a/frontend/src/pages/Tickets/index.js +++ b/frontend/src/pages/Tickets/index.js @@ -4,7 +4,7 @@ import Grid from "@material-ui/core/Grid"; import Paper from "@material-ui/core/Paper"; import { makeStyles } from "@material-ui/core/styles"; -import TicketsManager from "../../components/TicketsManager/"; +import TicketsManager from "../../components/Ticket/TicketsManager/index"; import Ticket from "../../components/Ticket/"; import { i18n } from "../../translate/i18n"; diff --git a/frontend/src/style/varibles.jsx b/frontend/src/style/varibles.jsx index ef0e05a..6fc6387 100644 --- a/frontend/src/style/varibles.jsx +++ b/frontend/src/style/varibles.jsx @@ -53,6 +53,7 @@ export const color = { bgOpacity: "#212f3cd7", placeholder: "#ffffff83", border: "#55A5DC3F", + text: "#AEBAC1", }, shadow: { dark: "2px 2px 4px 2px",