feat(filters): perfect flac disable fields (#605)

* feat(filters): perfect flac disable fields

* feat(filters): logscore min 0 max 100

* feat(filters): validate numberfield 0 value

* feat(filters): cleanup logs

* feat(filters): set default priority 0

web/src/components/inputs/common.tsx

@@ -1,4 +1,5 @@
 import { Field, FieldProps } from "formik";
+import { classNames } from "../../utils";
 
 interface ErrorFieldProps {
     name: string;
@@ -19,12 +20,14 @@ interface CheckboxFieldProps {
     name: string;
     label: string;
     sublabel?: string;
+    disabled?: boolean;
 }
 
 const CheckboxField = ({
   name,
   label,
-  sublabel
+  sublabel,
+  disabled
 }: CheckboxFieldProps) => (
   <div className="relative flex items-start">
     <div className="flex items-center h-5">
@@ -32,7 +35,8 @@ const CheckboxField = ({
         id={name}
         name={name}
         type="checkbox" 
-        className="focus:ring-bkue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+        className={classNames("focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded", disabled ? "bg-gray-200" : "")}
+        disabled={disabled}
       />
     </div>
     <div className="ml-3 text-sm">

web/src/components/inputs/input.tsx

@@ -2,6 +2,7 @@ import { Field, FieldProps } from "formik";
 import { classNames } from "../../utils";
 import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid";
 import { useToggle } from "../../hooks/hooks";
+import { log } from "util";
 
 type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
@@ -204,6 +205,9 @@ interface NumberFieldProps {
     placeholder?: string;
     step?: number;
     disabled?: boolean;
+    required?: boolean;
+    min?: number;
+    max?: number;
 }
 
 export const NumberField = ({
@@ -211,7 +215,10 @@ export const NumberField = ({
   label,
   placeholder,
   step,
-  disabled
+  min,
+  max,
+  disabled,
+  required
 }: NumberFieldProps) => (
   <div className="col-span-12 sm:col-span-6">
     <label htmlFor={name} className="block text-xs font-bold text-gray-700 dark:text-gray-200 uppercase tracking-wide">
@@ -221,13 +228,18 @@ export const NumberField = ({
     <Field name={name} type="number">
       {({
         field,
-        meta
+        meta,
+        form
       }: FieldProps) => (
         <div className="sm:col-span-2">
           <input
             type="number"
-            step={step}
             {...field}
+            step={step}
+            min={min}
+            max={max}
+            inputMode="numeric"
+            required={required}
             className={classNames(
               meta.touched && meta.error
                 ? "focus:ring-red-500 focus:border-red-500 border-red-500"
@@ -237,6 +249,16 @@ export const NumberField = ({
             )}
             placeholder={placeholder}
             disabled={disabled}
+            onChange={event => {
+              // safeguard and validation if user removes the number
+              // it will then set 0 by default. Formik can't handle this properly
+              if (event.target.value == "") {
+                form.setFieldValue(field.name, 0);
+                return;
+              }
+
+              form.setFieldValue(field.name, event.target.value);
+            }}
           />
           {meta.touched && meta.error && (
             <div className="error">{meta.error}</div>

web/src/components/inputs/select.tsx

@@ -20,6 +20,7 @@ interface MultiSelectProps {
     options: MultiSelectOption[];
     columns?: COL_WIDTHS;
     creatable?: boolean;
+    disabled?: boolean;
 }
 
 export const MultiSelect = ({
@@ -27,7 +28,8 @@ export const MultiSelect = ({
   label,
   options,
   columns,
-  creatable
+  creatable,
+  disabled
 }: MultiSelectProps) => {
   const settingsContext = SettingsContext.useValue();
 
@@ -58,6 +60,7 @@ export const MultiSelect = ({
           <RMSC
             {...field}
             options={[...[...options, ...field.value.map((i: MultiSelectOption) => ({ value: i.value ?? i, label: i.label ?? i }))].reduce((map, obj) => map.set(obj.value, obj), new Map()).values()]}
+            disabled={disabled}
             labelledBy={name}
             isCreatable={creatable}
             onCreateOption={handleNewField}