From 307e5d1b505422e48f8c0770e6f9f194a5540b24 Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Thu, 4 Jan 2024 16:28:10 +0100
Subject: [PATCH] Make NWFilter clickable when not editable

---
 .../src/widgets/forms/NWFSelectReferencedFilters.tsx | 12 ++++++++++--
 .../src/widgets/forms/NWFilterSelectInput.tsx        | 12 ++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/virtweb_frontend/src/widgets/forms/NWFSelectReferencedFilters.tsx b/virtweb_frontend/src/widgets/forms/NWFSelectReferencedFilters.tsx
index e035393..ae1feb2 100644
--- a/virtweb_frontend/src/widgets/forms/NWFSelectReferencedFilters.tsx
+++ b/virtweb_frontend/src/widgets/forms/NWFSelectReferencedFilters.tsx
@@ -1,7 +1,8 @@
 import React from "react";
-import { NWFilter } from "../../api/NWFilterApi";
-import { NWFilterSelectInput } from "./NWFilterSelectInput";
+import { useNavigate } from "react-router-dom";
+import { NWFilter, NWFilterURL } from "../../api/NWFilterApi";
 import { NWFilterItem } from "../nwfilter/NWFilterItem";
+import { NWFilterSelectInput } from "./NWFilterSelectInput";
 
 export function NWFSelectReferencedFilters(p: {
   editable: boolean;
@@ -10,6 +11,8 @@ export function NWFSelectReferencedFilters(p: {
   onChange?: () => void;
   excludedFilters?: string[];
 }): React.ReactElement {
+  const navigate = useNavigate();
+
   const nwfilters = React.useMemo(
     () =>
       p.excludedFilters
@@ -37,6 +40,11 @@ export function NWFSelectReferencedFilters(p: {
                 }
               : undefined
           }
+          onClick={
+            !p.editable && entry
+              ? () => navigate(NWFilterURL(entry))
+              : undefined
+          }
         />
       ))}
 
diff --git a/virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx b/virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx
index 71806f2..b28cb7c 100644
--- a/virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx
+++ b/virtweb_frontend/src/widgets/forms/NWFilterSelectInput.tsx
@@ -1,7 +1,8 @@
 import { Autocomplete, TextField } from "@mui/material";
-import { NWFilter } from "../../api/NWFilterApi";
-import { NWFilterItem } from "../nwfilter/NWFilterItem";
 import React from "react";
+import { useNavigate } from "react-router-dom";
+import { NWFilter, NWFilterURL } from "../../api/NWFilterApi";
+import { NWFilterItem } from "../nwfilter/NWFilterItem";
 
 export function NWFilterSelectInput(p: {
   editable: boolean;
@@ -11,6 +12,8 @@ export function NWFilterSelectInput(p: {
   onChange?: (name?: string) => void;
   canBeNull: boolean;
 }): React.ReactElement {
+  const navigate = useNavigate();
+
   const [open, setOpen] = React.useState(false);
 
   const selectedValue = p.nwfilters.find((o) => o.name === p.value);
@@ -21,6 +24,11 @@ export function NWFilterSelectInput(p: {
       <NWFilterItem
         value={selectedValue}
         onDelete={p.editable ? () => p.onChange?.(undefined) : undefined}
+        onClick={
+          !p.editable && selectedValue
+            ? () => navigate(NWFilterURL(selectedValue))
+            : undefined
+        }
       />
     );