Create a widget to define priority

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}
+    />
+  );
+}

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}
-            value={p.rule.priority?.toString()}
+            onChange={(v) => {
-            type="number"
+              p.rule.priority = v;
-            onValueChange={(v) => {
-              p.rule.priority = v && v !== "" ? Number(v) : undefined;
               p.onChange?.();
             }}
-            size={ServerApi.Config.constraints.nwfilter_priority}
           />
         </div>
 

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}
-          value={p.nwfilter.priority?.toString()}
+          onChange={(pri) => {
-          type="number"
+            p.nwfilter.priority = pri;
-          onValueChange={(v) => {
-            p.nwfilter.priority = v && v !== "" ? Number(v) : undefined;
             p.onChange?.();
           }}
-          size={ServerApi.Config.constraints.nwfilter_priority}
         />
       </EditSection>