Fix class id input to only allow integers (#125)

AC-353

Author: qgerome

public/locales/en/messages.json

@@ -64,9 +64,9 @@
   "Choose the geographic layers used to generate the friction surface.": "Choose the geographic layers used to generate the friction surface.",
   "Choose the health facilities layer.": "Choose the health facilities layer.",
   "Class": "Class",
+  "Class id": "Class id",
   "Class label": "Class label",
   "Class labels": "Class labels",
-  "Class value": "Class value",
   "Close": "Close",
   "Computation failed. Check your input data.": "Computation failed. Check your input data.",
   "Configure your project": "Configure your project",

public/locales/fr/messages.json

@@ -67,9 +67,9 @@
   "Choose the geographic layers used to generate the friction surface.": "",
   "Choose the health facilities layer.": "",
   "Class": "",
+  "Class id": "",
   "Class label": "",
   "Class labels": "",
-  "Class value": "",
   "Close": "",
   "Computation failed. Check your input data.": "",
   "Configure your project": "",

src/features/dataset/ClassLabelsGrid.tsx

@@ -80,19 +80,29 @@ const ClassLabelsGrid = ({ labels, editable, onChange }: Props) => {
     return cols;
   }, [labels, onChange, t, editable]);
 
-  const onAddItem = useCallback(() => {
-    if (!classInputRef.current?.value || !editable) return;
+  const onAddItem = () => {
+    if (
+      !classInputRef.current?.value ||
+      !editable ||
+      !classInputRef.current?.checkValidity()
+    ) {
+      return;
+    }
     onChange([[classInputRef.current.value, ""], ...labels]);
     classInputRef.current.value = "";
-  }, [classInputRef, labels, onChange, editable]);
+  };
 
   return (
     <div>
       {editable && (
         <div className="mb-1 flex items-center gap-2">
           <Input
             ref={classInputRef}
-            placeholder={t("Class value")}
+            placeholder={t("Class id")}
+            min={0}
+            step={1}
+            required
+            pattern="\d*"
             type="number"
           />
           <Button variant="secondary" onClick={onAddItem}>