adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Tab Tickets ready

pull/14/head^2
RenatoDiGiacomo 2022-07-25 15:18:27 -03:00
parent b5975993be
commit 0e39226e96
13 changed files with 178 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/Base/MainContainer/MainContainer.style.jsx
View File

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

62
frontend/src/components/Ticket/TicketsManager/TicketsManager.jsx 100644
View File

@ -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;

12
frontend/src/components/Ticket/TicketsManager/TicketsManager.style.jsx 100644
View File

@ -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

27
frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTab/TicketsTab.jsx 100644
View File

@ -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;

36
frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTab/TicketsTab.style.jsx 100644
View File

@ -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};
}
`;

18
frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTabs.jsx 100644
View File

@ -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;

12
frontend/src/components/Ticket/TicketsManager/TicketsTabs/TicketsTabs.style.jsx 100644
View File

@ -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;
`;

0
frontend/src/components/TicketsManager/index.js → frontend/src/components/Ticket/TicketsManager/index.js
View File

1
frontend/src/components/TicketListItem/TicketListItem.jsx
View File

@ -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 (

65
frontend/src/components/TicketsManager/TicketsManager.jsx
View File

@ -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;

7
frontend/src/components/TicketsManager/TicketsManager.style.jsx
View File

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

2
frontend/src/pages/Tickets/Tickets.jsx
View File

@ -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 = () => {

19
frontend/src/style/varibles.jsx
View File

@ -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"
}
};