From 2649bfbd25c116702fdc8ef3423f01aed5552912 Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Thu, 4 Jan 2024 15:38:58 +0100
Subject: [PATCH] Create a widget to define priority

---
 .../widgets/forms/NWFilterPriorityInput.tsx   | 21 +++++++++++++++++++
 .../src/widgets/forms/NWFilterRules.tsx       | 13 ++++++------
 .../src/widgets/nwfilter/NWFilterDetails.tsx  | 13 ++++++------
 3 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 virtweb_frontend/src/widgets/forms/NWFilterPriorityInput.tsx

diff --git a/virtweb_frontend/src/widgets/forms/NWFilterPriorityInput.tsx b/virtweb_frontend/src/widgets/forms/NWFilterPriorityInput.tsx
new file mode 100644
index 0000000..79ccf6b
--- /dev/null
+++ b/virtweb_frontend/src/widgets/forms/NWFilterPriorityInput.tsx
@@ -0,0 +1,21 @@
+import { ServerApi } from "../../api/ServerApi";
+import { TextInput } from "./TextInput";
+
+export function NWFilterPriorityInput(p: {
+  editable: boolean;
+  label: string;
+  value?: number;
+  onChange: (priority?: number) => void;
+}): React.ReactElement {
+  return (
+    <TextInput
+      {...p}
+      value={p.value?.toString()}
+      type="number"
+      onValueChange={(v) => {
+        p.onChange?.(v && v !== "" ? Number(v) : undefined);
+      }}
+      size={ServerApi.Config.constraints.nwfilter_priority}
+    />
+  );
+}
diff --git a/virtweb_frontend/src/widgets/forms/NWFilterRules.tsx b/virtweb_frontend/src/widgets/forms/NWFilterRules.tsx
index 84eac90..b68dc2f 100644
--- a/virtweb_frontend/src/widgets/forms/NWFilterRules.tsx
+++ b/virtweb_frontend/src/widgets/forms/NWFilterRules.tsx
@@ -26,6 +26,7 @@ import { MACInput } from "./MACInput";
 import { PortInput } from "./PortInput";
 import { SelectInput } from "./SelectInput";
 import { TextInput } from "./TextInput";
+import { NWFilterPriorityInput } from "./NWFilterPriorityInput";
 
 export function NWFilterRules(p: {
   editable: boolean;
@@ -133,16 +134,14 @@ function NWRuleEdit(p: {
             ]}
           />
           <span style={{ width: "20px" }}></span>
-          <TextInput
+          <NWFilterPriorityInput
+            {...p}
             label="Priority"
-            editable={p.editable}
-            value={p.rule.priority?.toString()}
-            type="number"
-            onValueChange={(v) => {
-              p.rule.priority = v && v !== "" ? Number(v) : undefined;
+            value={p.rule.priority}
+            onChange={(v) => {
+              p.rule.priority = v;
               p.onChange?.();
             }}
-            size={ServerApi.Config.constraints.nwfilter_priority}
           />
         </div>
 
diff --git a/virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx b/virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx
index 531b678..cd248b2 100644
--- a/virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx
+++ b/virtweb_frontend/src/widgets/nwfilter/NWFilterDetails.tsx
@@ -18,6 +18,7 @@ import { ServerApi } from "../../api/ServerApi";
 import { SelectInput } from "../forms/SelectInput";
 import { NWFSelectReferencedFilters } from "../forms/NWFSelectReferencedFilters";
 import { NWFilterRules } from "../forms/NWFilterRules";
+import { NWFilterPriorityInput } from "../forms/NWFilterPriorityInput";
 
 interface DetailsProps {
   nwfilter: NWFilter;
@@ -133,16 +134,14 @@ function NetworkFilterDetailsTabGeneral(
           })}
         />
 
-        <TextInput
+        <NWFilterPriorityInput
+          {...p}
           label="Priority"
-          editable={p.editable}
-          value={p.nwfilter.priority?.toString()}
-          type="number"
-          onValueChange={(v) => {
-            p.nwfilter.priority = v && v !== "" ? Number(v) : undefined;
+          value={p.nwfilter.priority}
+          onChange={(pri) => {
+            p.nwfilter.priority = pri;
             p.onChange?.();
           }}
-          size={ServerApi.Config.constraints.nwfilter_priority}
         />
       </EditSection>