import React, { useContext, useEffect, useState } from "react";
import {
Box,
Button,
IconButton,
TextField,
Tooltip,
Typography,
} from "@mui/material";
import { useDispatch } from "react-redux";
import axios from "axios";
import { Grid } from "../components/grid/Grid";
import {
CLOSE_MODAL,
LOADING_END,
LOADING_START,
OPEN_MODAL,
} from "../lib/redux/slices/appSlice";
import ResponsiveTable from "../components/responsive-table/ResponsiveTable";
import { getFaUserRole } from "../utils/getFaUserRole";
import { useNavigate } from "react-router-dom";
import persianDate from "persian-date";
import useUserProfile from "../features/authentication/hooks/useUserProfile";
import CommentsDisabledIcon from "@mui/icons-material/CommentsDisabled";
import { AppContext } from "../contexts/AppContext";
import { CloseTicketService } from "../features/ticket/services/create-ticket";
import personalTicketImage from "../../src/assets/images/Ticket1.png";
import publicTicketImage from "../../src/assets/images/ticket2.png";
import ClosedTicketImage from "../../src/assets/images/ClosedTicketImage.png";
const TicketList = () => {
const navigate = useNavigate();
const handleTextChange = (event) => {
setTextValue(event.target.value);
};
const [role] = useUserProfile();
const isAdmin = () => {
if (
role.includes("CityOperator") ||
role.includes("ProvinceOperator") ||
role.includes("AdminX") ||
role.includes("Supporter") ||
role.includes("SuperAdmin")
) {
return true;
} else {
return false;
}
};
const [data, setData] = useState([]);
const [totalRows, setTotalRows] = useState(0);
const [perPage, setPerPage] = useState(10);
const [textValue, setTextValue] = useState("");
const [page, setPage] = useState(1);
const [tableData, setTableData] = useState([]);
const [openNotif] = useContext(AppContext);
const [value, setValue] = useState("0");
const [selectedTicket, setSelectedTicket] = useState("0");
const [unreadMessages, setUnredMessages] = useState([]);
// const [ticketCounts, setTicketCounts] = useState({
// personal: 0,
// public: 0,
// closed: 0,
// });
// const handleChange = (event, newValue) => {
// setValue(newValue);
// };
const fetchApiData = async (page) => {
let response;
try {
dispatch(LOADING_START());
let query = `ticket/?search=filter&value=${textValue}&page=${page}&page_size=${perPage}`;
if (value === "0") query += `&type=single&status=open`;
else if (value === "1") query += `&type=public&status=open`;
else if (value === "2") query += `&status=closed`;
response = await axios.get(query);
dispatch(LOADING_END());
setData(response.data.results);
setTotalRows(response.data.count);
} catch {
dispatch(LOADING_END());
}
};
const dispatch = useDispatch();
const handlePageChange = (page) => {
fetchApiData(page);
setPage(page);
};
const handlePerRowsChange = (perRows) => {
setPerPage(perRows);
setPage(1);
};
const updateTable = () => {
fetchApiData(page !== 0 ? page : 1);
};
useEffect(() => {
fetchApiData(1);
}, [dispatch, perPage, value]);
useEffect(() => {
let unread = [];
const d = data?.map((item, i) => {
if (item?.unreadMessage) {
unread[i] = true;
} else {
unread[i] = false;
}
return [
page === 1 ? i + 1 : i + (perPage * page) / 2 + 1,
item?.ticketId,
item.typeTicket === "single" ? "شخصی" : "همگانی",
`${item?.role ? getFaUserRole(item?.role) : ""} (${
item?.user?.fullname
})`,
item?.title,
`${
item?.status === "open"
? `باز${item?.readOnly === true ? " (فقط خواندنی)" : ""}`
: item?.status === "answered"
? "پاسخ داده شده"
: "بسته"
}`,
item.toUser.length
? item?.toUser?.map(
(option, index) =>
`${option?.fullname} ${
index + 1 !== item?.toUser?.length ? " - " : ""
}`
)
: item?.toRole?.map(
(option, index) =>
`${getFaUserRole(option.name)} ${
index + 1 !== item?.toRole?.length ? " - " : ""
}`
),
`${new persianDate(new Date(item?.createDate)).format(
"dddd DD MMMM"
)} (${new Date(item?.createDate).toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
hour12: false,
})})`,
{isAdmin() && (
{
dispatch(
OPEN_MODAL({
title: "از بستن تیکت اطمینان دارید؟",
content: (
در صورت بستن تیکت امکان باز کردن مجدد آن وجود ندارد!
),
})
);
}}
>
)}
,
];
});
setTableData(d);
setUnredMessages(unread);
}, [data]);
const handleSubmit = async (event) => {
event.preventDefault();
dispatch(LOADING_START());
try {
let query = `ticket/?search=filter&value=${textValue}&page=1&page_size=${perPage}`;
if (value === "0") query += `&type=single`;
else if (value === "1") query += `&type=public`;
else if (value === "2") query += `&status=closed`;
const response = await axios.get(query);
setData(response.data.results);
setTotalRows(response.data.count);
dispatch(LOADING_END());
} catch (error) {
console.error("Error fetching data:", error);
}
};
const handleTicketTypeSelect = (type) => {
setValue(type);
setSelectedTicket(type);
};
return (
<>
تیکت های من
{/*
*/}
handleTicketTypeSelect("0")}
gap={1}
>
تیکت های شخصی
handleTicketTypeSelect("1")}
gap={1}
>
تیکت های همگانی
handleTicketTypeSelect("2")}
gap={1}
>
تیکتهای بایگانی
{/*
تیکت های بسته شده: {ticketCounts.closed}
*/}
{value === "0" && (
)}
{value === "1" && (
)}
{value === "2" && (
)}
);
};
export default TicketList;