diff --git a/apps/client/pages/issues/closed.tsx b/apps/client/pages/issues/closed.tsx index f9033c8e2..38f410f43 100644 --- a/apps/client/pages/issues/closed.tsx +++ b/apps/client/pages/issues/closed.tsx @@ -1,37 +1,37 @@ import useTranslation from "next-translate/useTranslation"; import { useRouter } from "next/router"; +import { useEffect, useMemo, useState } from "react"; import Loader from "react-spinners/ClipLoader"; -import { useState, useMemo, useEffect } from "react"; +import { toast } from "@/shadcn/hooks/use-toast"; +import { cn } from "@/shadcn/lib/utils"; +import { Button } from "@/shadcn/ui/button"; +import { + Command, + CommandEmpty, + CommandGroup, + CommandInput, + CommandItem, + CommandList, + CommandSeparator, +} from "@/shadcn/ui/command"; import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, - ContextMenuTrigger, ContextMenuSub, - ContextMenuSubTrigger, ContextMenuSubContent, + ContextMenuSubTrigger, + ContextMenuTrigger, } from "@/shadcn/ui/context-menu"; +import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover"; import { getCookie } from "cookies-next"; +import { CheckIcon, Filter, X } from "lucide-react"; import moment from "moment"; import Link from "next/link"; import { useQuery } from "react-query"; import { useUser } from "../../store/session"; -import { Popover, PopoverContent, PopoverTrigger } from "@/shadcn/ui/popover"; -import { CheckIcon, Filter, X } from "lucide-react"; -import { Button } from "@/shadcn/ui/button"; -import { - Command, - CommandEmpty, - CommandGroup, - CommandInput, - CommandItem, - CommandList, - CommandSeparator, -} from "@/shadcn/ui/command"; -import { cn } from "@/shadcn/lib/utils"; -import { toast } from "@/shadcn/hooks/use-toast"; async function getUserTickets(token: any) { const res = await fetch(`/api/v1/tickets/completed`, { @@ -83,11 +83,32 @@ export default function Tickets() { const normal = "bg-green-100 text-green-800"; const [filterSelected, setFilterSelected] = useState(); - const [selectedPriorities, setSelectedPriorities] = useState([]); - const [selectedStatuses, setSelectedStatuses] = useState([]); - const [selectedAssignees, setSelectedAssignees] = useState([]); + const [selectedPriorities, setSelectedPriorities] = useState(() => { + const saved = localStorage.getItem('closed_selectedPriorities'); + return saved ? JSON.parse(saved) : []; + }); + const [selectedStatuses, setSelectedStatuses] = useState(() => { + const saved = localStorage.getItem('closed_selectedStatuses'); + return saved ? JSON.parse(saved) : []; + }); + const [selectedAssignees, setSelectedAssignees] = useState(() => { + const saved = localStorage.getItem('closed_selectedAssignees'); + return saved ? JSON.parse(saved) : []; + }); const [users, setUsers] = useState([]); + useEffect(() => { + localStorage.setItem('closed_selectedPriorities', JSON.stringify(selectedPriorities)); + }, [selectedPriorities]); + + useEffect(() => { + localStorage.setItem('closed_selectedStatuses', JSON.stringify(selectedStatuses)); + }, [selectedStatuses]); + + useEffect(() => { + localStorage.setItem('closed_selectedAssignees', JSON.stringify(selectedAssignees)); + }, [selectedAssignees]); + const handlePriorityToggle = (priority: string) => { setSelectedPriorities((prev) => prev.includes(priority) diff --git a/apps/client/pages/issues/index.tsx b/apps/client/pages/issues/index.tsx index ae9388e88..a487ba404 100644 --- a/apps/client/pages/issues/index.tsx +++ b/apps/client/pages/issues/index.tsx @@ -82,9 +82,28 @@ export default function Tickets() { const low = "bg-blue-100 text-blue-800"; const normal = "bg-green-100 text-green-800"; - const [selectedPriorities, setSelectedPriorities] = useState([]); - const [selectedStatuses, setSelectedStatuses] = useState([]); - const [selectedAssignees, setSelectedAssignees] = useState([]); + const [selectedPriorities, setSelectedPriorities] = useState(() => { + const saved = localStorage.getItem('all_selectedPriorities'); + return saved ? JSON.parse(saved) : []; + }); + + const [selectedStatuses, setSelectedStatuses] = useState(() => { + const saved = localStorage.getItem('all_selectedStatuses'); + return saved ? JSON.parse(saved) : []; + }); + + const [selectedAssignees, setSelectedAssignees] = useState(() => { + const saved = localStorage.getItem('all_selectedAssignees'); + return saved ? JSON.parse(saved) : []; + }); + + // Update local storage when filters change + useEffect(() => { + localStorage.setItem('all_selectedPriorities', JSON.stringify(selectedPriorities)); + localStorage.setItem('all_selectedStatuses', JSON.stringify(selectedStatuses)); + localStorage.setItem('all_selectedAssignees', JSON.stringify(selectedAssignees)); + }, [selectedPriorities, selectedStatuses, selectedAssignees]); + const [users, setUsers] = useState([]); const handlePriorityToggle = (priority: string) => { diff --git a/apps/client/pages/issues/open.tsx b/apps/client/pages/issues/open.tsx index 8196f0a8e..6604e0ab2 100644 --- a/apps/client/pages/issues/open.tsx +++ b/apps/client/pages/issues/open.tsx @@ -83,11 +83,41 @@ export default function Tickets() { const normal = "bg-green-100 text-green-800"; const [filterSelected, setFilterSelected] = useState(); - const [selectedPriorities, setSelectedPriorities] = useState([]); - const [selectedStatuses, setSelectedStatuses] = useState([]); - const [selectedAssignees, setSelectedAssignees] = useState([]); + const [selectedPriorities, setSelectedPriorities] = useState(() => { + const saved = localStorage.getItem('open_selectedPriorities'); + return saved ? JSON.parse(saved) : []; + }); + const [selectedStatuses, setSelectedStatuses] = useState(() => { + const saved = localStorage.getItem('open_selectedStatuses'); + return saved ? JSON.parse(saved) : []; + }); + const [selectedAssignees, setSelectedAssignees] = useState(() => { + const saved = localStorage.getItem('open_selectedAssignees'); + return saved ? JSON.parse(saved) : []; + }); const [users, setUsers] = useState([]); + useEffect(() => { + localStorage.setItem('open_selectedPriorities', JSON.stringify(selectedPriorities)); + }, [selectedPriorities]); + + useEffect(() => { + localStorage.setItem('open_selectedStatuses', JSON.stringify(selectedStatuses)); + }, [selectedStatuses]); + + useEffect(() => { + localStorage.setItem('open_selectedAssignees', JSON.stringify(selectedAssignees)); + }, [selectedAssignees]); + + const clearAllFilters = () => { + setSelectedPriorities([]); + setSelectedStatuses([]); + setSelectedAssignees([]); + localStorage.removeItem('open_selectedPriorities'); + localStorage.removeItem('open_selectedStatuses'); + localStorage.removeItem('open_selectedAssignees'); + }; + const handlePriorityToggle = (priority: string) => { setSelectedPriorities((prev) => prev.includes(priority) @@ -480,11 +510,7 @@ export default function Tickets() { variant="ghost" size="sm" className="h-6 px-2 text-xs" - onClick={() => { - setSelectedPriorities([]); - setSelectedStatuses([]); - setSelectedAssignees([]); - }} + onClick={clearAllFilters} > Clear all