Skip to content

Commit

Permalink
Correção no filtro de Tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@rtenorioh
rtenorioh committed Sep 23, 2024
1 parent 94ec075 commit 5cb87ca
Show file tree
Hide file tree
Showing 4 changed files with 48 additions and 56 deletions.
12 changes: 7 additions & 5 deletions frontend/src/components/TagsFilter/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import React, { useEffect, useState } from "react";
import toastError from "../../errors/toastError";
import api from "../../services/api";

export function TagsFilter ({ onFiltered }) {
const TagsFilter = ({ onFiltered }) => {

const [tags, setTags] = useState([]);
const [selecteds, setSelecteds] = useState([]);

useEffect(() => {
async function fetchData () {
async function fetchData() {
await loadTags();
}
fetchData();
Expand All @@ -31,7 +31,7 @@ export function TagsFilter ({ onFiltered }) {
}

return (
<Paper style={{padding: 10}}>
<Paper style={{ padding: 10 }}>
<Autocomplete
multiple
size="small"
Expand All @@ -43,7 +43,7 @@ export function TagsFilter ({ onFiltered }) {
value.map((option, index) => (
<Chip
variant="outlined"
style={{backgroundColor: option.color || '#eee', textShadow: '1px 1px 1px #000', color: 'white'}}
style={{ backgroundColor: option.color || '#eee', textShadow: '1px 1px 1px #000', color: 'white' }}
label={option.name}
{...getTagProps({ index })}
size="small"
Expand All @@ -56,4 +56,6 @@ export function TagsFilter ({ onFiltered }) {
/>
</Paper>
)
}
}

export default TagsFilter;
45 changes: 22 additions & 23 deletions frontend/src/components/TicketListItem/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, { useState, useEffect, useRef, useContext } from "react";
import React, { useContext, useEffect, useRef, useState } from "react";

import {
useHistory,
useParams
} from "react-router-dom";

import {
parseISO,
format,
isSameDay
isSameDay,
parseISO
} from "date-fns";

import {
Expand All @@ -20,8 +20,8 @@ import {
ListItemAvatar,
ListItemText,
makeStyles,
Typography,
Tooltip
Tooltip,
Typography
} from "@material-ui/core";

import {
Expand All @@ -34,16 +34,16 @@ import {
import { green } from "@material-ui/core/colors";

import AcceptTicketWithouSelectQueue from "../AcceptTicketWithoutQueueModal";
import MarkdownWrapper from "../MarkdownWrapper";
import ContactTag from "../ContactTag";
import MarkdownWrapper from "../MarkdownWrapper";

import clsx from "clsx";
import { AuthContext } from "../../context/Auth/AuthContext";
import toastError from "../../errors/toastError";
import clsx from "clsx";
import { i18n } from "../../translate/i18n";
import api from "../../services/api";
import { i18n } from "../../translate/i18n";

import { system } from "../../config.json"
import { system } from "../../config.json";


const useStyles = makeStyles(theme => ({
Expand Down Expand Up @@ -150,7 +150,7 @@ const useStyles = makeStyles(theme => ({
}
}));

const TicketListItem = ({ ticket, userId }) => {
const TicketListItem = ({ ticket, userId, filteredTags }) => {
const classes = useStyles();
const history = useHistory();
const [loading, setLoading] = useState(false);
Expand Down Expand Up @@ -185,6 +185,17 @@ const TicketListItem = ({ ticket, userId }) => {
};
}, []);

const filterTicketByTags = () => {
if (!filteredTags || filteredTags.length === 0) return true;
if (!tag || tag.length === 0) return false;

return filteredTags.every(filterTag => tag.some(t => t.id === filterTag.id));
};

if (!filterTicketByTags()) {
return null;
}

const handleAcepptTicket = async id => {
setLoading(true);
try {
Expand All @@ -202,18 +213,6 @@ const TicketListItem = ({ ticket, userId }) => {
history.push(`/tickets/${id}`);
};

// const userName = selectedUserName => {
// let userName = null;
// user.queues.forEach(userId => {
// if (userId === selectedUserName.userId) {
// userName = userId.name;
// }
// });
// return {
// userName
// };
// }

const queueName = selectedTicket => {
let name = null;
let color = null;
Expand Down Expand Up @@ -318,7 +317,7 @@ const TicketListItem = ({ ticket, userId }) => {
}}
selected={ticketId && +ticketId === ticket.id}
className={clsx(classes.ticket, {
[classes.pendingTicket]: (ticket.status === "pending"),
[classes.pendingTicket]: ticket.status === "pending",
})}
>
<Tooltip
Expand Down
19 changes: 13 additions & 6 deletions frontend/src/components/TicketsList/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect, useReducer, useContext } from "react";
import React, { useContext, useEffect, useReducer, useState } from "react";
import openSocket from "../../services/socket-io";

import {
Expand All @@ -7,15 +7,16 @@ import {
Paper
} from "@material-ui/core";

import TagsFilter from "../TagsFilter";
import TicketListItem from "../TicketListItem";
import TicketsListSkeleton from "../TicketsListSkeleton";

import { AuthContext } from "../../context/Auth/AuthContext";
import useTickets from "../../hooks/useTickets";
import { i18n } from "../../translate/i18n";
import { AuthContext } from "../../context/Auth/AuthContext";

import api from "../../services/api";
import toastError from "../../errors/toastError";
import api from "../../services/api";

const useStyles = makeStyles((theme) => ({
ticketsListWrapper: {
Expand Down Expand Up @@ -173,6 +174,11 @@ const TicketsList = (props) => {
const { user } = useContext(AuthContext);
const { profile, queues } = user;
const [settings, setSettings] = useState([]);
const [filteredTags, setFilteredTags] = useState([]);

const handleTagFilter = (tags) => {
setFilteredTags(tags);
};

useEffect(() => {
dispatch({ type: "RESET" });
Expand Down Expand Up @@ -211,15 +217,15 @@ const TicketsList = (props) => {
const allticket = settings && settings.length > 0 && getSettingValue("allTicket") === "enabled";

if (allticket === true) {

if (profile === "") {
dispatch({ type: "LOAD_TICKETS", payload: filteredTickets });

} else {
dispatch({ type: "LOAD_TICKETS", payload: tickets });
}
} else {

if (profile === "user") {
dispatch({ type: "LOAD_TICKETS", payload: filteredTickets });

Expand Down Expand Up @@ -337,8 +343,9 @@ const TicketsList = (props) => {
</div>
) : (
<>
<TagsFilter onFiltered={handleTagFilter} />
{ticketsList.map((ticket) => (
<TicketListItem ticket={ticket} key={ticket.id} />
<TicketListItem key={ticket.id} ticket={ticket} filteredTags={filteredTags} />
))}
</>
)}
Expand Down
28 changes: 6 additions & 22 deletions frontend/src/components/TicketsManager/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import React, { useContext, useEffect, useState } from "react";

import {
import {
Badge,
Button,
FormControlLabel,
makeStyles,
Paper,
Switch,
Tab,
Tabs,
Switch
Tabs
} from "@material-ui/core";

import {
Expand All @@ -18,15 +18,14 @@ import {
Search
} from "@material-ui/icons";

import { Can } from "../Can";
import NewTicketModal from "../NewTicketModal";
import TicketsList from "../TicketsList";
import TabPanel from "../TabPanel";
import { TagsFilter } from "../TagsFilter";
import { Can } from "../Can";
import TicketsList from "../TicketsList";
import TicketsQueueSelect from "../TicketsQueueSelect";

import { i18n } from "../../translate/i18n";
import { AuthContext } from "../../context/Auth/AuthContext";
import { i18n } from "../../translate/i18n";

const useStyles = makeStyles((theme) => ({
ticketsWrapper: {
Expand Down Expand Up @@ -115,7 +114,6 @@ const TicketsManager = () => {

const [openCount, setOpenCount] = useState(0);
const [pendingCount, setPendingCount] = useState(0);
const [selectedTags, setSelectedTags] = useState([]);

const userQueueIds = user.queues.map((q) => q.id);
const [selectedQueueIds, setSelectedQueueIds] = useState(userQueueIds || []);
Expand All @@ -140,11 +138,6 @@ const TicketsManager = () => {

};

const handleSelectedTags = (selecteds) => {
const tags = selecteds.map(t => t.id);
setSelectedTags(tags);
}

const handleChangeTab = (e, newValue) => {
setTab(newValue);
};
Expand Down Expand Up @@ -257,7 +250,6 @@ const TicketsManager = () => {
/>
</Paper>
<TabPanel value={tab} name="open" className={classes.ticketsWrapper}>
<TagsFilter onFiltered={handleSelectedTags} />
<Paper className={classes.ticketsWrapper}>
<TicketsList
status="open"
Expand All @@ -274,31 +266,23 @@ const TicketsManager = () => {
/>
</Paper>
</TabPanel>

<TabPanel value={tab} name="pending" className={classes.ticketsWrapper}>
<TagsFilter onFiltered={handleSelectedTags} />
<TicketsList
status="pending"
showAll={true}
selectedQueueIds={selectedQueueIds}
/>
</TabPanel>



<TabPanel value={tab} name="closed" className={classes.ticketsWrapper}>
<TagsFilter onFiltered={handleSelectedTags} />
<TicketsList
status="closed"
showAll={true}
selectedQueueIds={selectedQueueIds}
/>
</TabPanel>
<TabPanel value={tab} name="search" className={classes.ticketsWrapper}>
<TagsFilter onFiltered={handleSelectedTags} />
<TicketsList
searchParam={searchParam}
tags={selectedTags}
showAll={true}
selectedQueueIds={selectedQueueIds}
/>
Expand Down

0 comments on commit 5cb87ca

Please sign in to comment.