diff --git a/devfront/src/features/clients/ClientConsentsPage.tsx b/devfront/src/features/clients/ClientConsentsPage.tsx index 1f44f2f6..ee9a31ab 100644 --- a/devfront/src/features/clients/ClientConsentsPage.tsx +++ b/devfront/src/features/clients/ClientConsentsPage.tsx @@ -34,8 +34,8 @@ function ClientConsentsPage() { const clientId = params.id ?? ""; const [subjectInput, setSubjectInput] = useState(""); const [subject, setSubject] = useState(""); - const [statusFilter, setStatusFilter] = useState("all"); - const [scopeFilter, setScopeFilter] = useState("all"); + const [statusFilter, setStatusFilter] = useState([]); + const [scopeFilter, setScopeFilter] = useState([]); const [isAdvancedFilterOpen, setIsAdvancedFilterOpen] = useState(false); const { data: clientData } = useQuery({ @@ -49,8 +49,8 @@ function ClientConsentsPage() { error, refetch, } = useQuery({ - queryKey: ["consents", clientId, subject, statusFilter], - queryFn: () => fetchConsents(subject, clientId, statusFilter), + queryKey: ["consents", clientId, subject], + queryFn: () => fetchConsents(subject, clientId, "all"), enabled: clientId.length > 0, }); const revokeMutation = useMutation({ @@ -77,7 +77,12 @@ function ClientConsentsPage() { const rows = consentsData?.items ?? []; const allScopes = Array.from(new Set(rows.flatMap((r) => r.grantedScopes))); const filteredRows = rows.filter((row) => { - return scopeFilter === "all" || row.grantedScopes.includes(scopeFilter); + const matchStatus = + statusFilter.length === 0 || statusFilter.includes(row.status); + const matchScope = + scopeFilter.length === 0 || + scopeFilter.some((s) => row.grantedScopes.includes(s)); + return matchStatus && matchScope; }); const handleExportCSV = () => { @@ -130,6 +135,30 @@ function ClientConsentsPage() { document.body.removeChild(link); }; + const handleStatusFilterChange = (status: string, checked: boolean) => { + if (checked) { + setStatusFilter((prev) => [...prev, status]); + } else { + setStatusFilter((prev) => prev.filter((s) => s !== status)); + } + }; + + const handleScopeFilterChange = (scope: string, checked: boolean) => { + if (checked) { + setScopeFilter((prev) => [...prev, scope]); + } else { + setScopeFilter((prev) => prev.filter((s) => s !== scope)); + } + }; + + const handleAllScopesChange = (checked: boolean) => { + if (checked) { + setScopeFilter(allScopes); + } else { + setScopeFilter([]); + } + }; + return (
@@ -175,7 +204,7 @@ function ClientConsentsPage() {
{clientData?.client?.status === "active" @@ -252,59 +281,88 @@ function ClientConsentsPage() {
{isAdvancedFilterOpen && ( -
-
- +
+
+ {t("ui.dev.clients.consents.status_label", "Status:")} - + handleStatusFilterChange("active", e.target.checked) + } + /> {t("ui.common.status.active", "Active")} - - - + +
-
- +
+ {t("ui.dev.clients.consents.scope_label", "Scope:")} - 0 + } + onChange={(e) => handleAllScopesChange(e.target.checked)} + /> + ALL + + )} {allScopes.map((scope) => ( - + ))} - +
- +
+ +
)}