Merge pull request #419 from FalkorDB/fix-configoration

Fix #407 allowed only numbers as configuration value
FalkorDB · Sep 9, 2024 · 4ce0899 · 4ce0899
2 parents 6b759d5 + bb6c915
commit 4ce0899
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 28 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -81,6 +81,15 @@
         align-items: center;
         justify-content: center;
     }
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+input[type="number"] {
+    -moz-appearance: textfield;
 
 }
 

diff --git a/app/graph/toolbar.tsx b/app/graph/toolbar.tsx
@@ -44,15 +44,13 @@ export default function Toolbar({ disabled, chartRef, onDeleteElement, onAddEnti
         <div className="flex items-center gap-6 p-1">
             <div className="flex gap-4">
                 <Button
-                    disabled
                     variant="Secondary"
                     label="Add Entity"
                     className="flex items-center gap-2"
                     onClick={onAddEntity}
                     icon={<PlusCircle />}
                     />
                 <Button
-                    disabled
                     variant="Secondary"
                     className="flex items-center gap-2"
                     label="Add Relation"

diff --git a/app/settings/Configurations.tsx b/app/settings/Configurations.tsx
@@ -3,6 +3,7 @@
 import React, { useEffect, useState, KeyboardEvent } from "react";
 import { Toast, cn, prepareArg, securedFetch } from "@/lib/utils";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { CheckCircle2, XCircle } from "lucide-react";
 import Input from "../components/ui/Input";
 import Button from "../components/ui/Button";
 
@@ -146,16 +147,7 @@ export default function Configurations() {
         run()
     }, [])
 
-    const handelSetConfig = async (e: KeyboardEvent<HTMLInputElement>, name: string) => {
-
-        if (e.code === "Escape") {
-            setEditable("")
-            setConfigValue("")
-            return
-        }
-
-        if (e.code !== "Enter") return
-
+    const handelSetConfig = async (name: string) => {
         const result = await securedFetch(`api/graph/?config=${prepareArg(name)}&value=${prepareArg(configValue)}`, {
             method: 'POST',
         })
@@ -177,6 +169,19 @@ export default function Configurations() {
         setConfigValue("")
     }
 
+    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>, name: string) => {
+
+        if (e.code === "Escape") {
+            setEditable("")
+            setConfigValue("")
+            return
+        }
+
+        if (e.code !== "Enter") return
+
+        handelSetConfig(name)
+    }
+
     return (
         <div className="h-full w-full border border-[#57577B] rounded-lg overflow-auto">
             <Table>
@@ -192,26 +197,41 @@ export default function Configurations() {
                 <TableBody>
                     {
                         configs.map(({ name, description, value }, index) => (
-                            <TableRow key={name} className={cn("border-none", !(index % 2) && "bg-[#57577B] hover:bg-[#57577B]")}>
-                                <TableCell className="w-[20%] py-8">{name}</TableCell>
+                            <TableRow key={name} className={cn("border-none", !(index % 2) && "bg-[#57577B]")}>
+                                <TableCell className="py-8">{name}</TableCell>
                                 <TableCell className="w-[70%]">{description}</TableCell>
-                                <TableCell>
+                                <TableCell className="w-[15%]">
                                     {
                                         editable === name && !disableRunTimeConfigs.has(name) ?
-                                            <Input
-                                                ref={(ref) => {
-                                                    ref?.focus()
-                                                }}
-                                                className="w-20"
-                                                variant="Small"
-                                                onChange={(e) => setConfigValue(e.target.value)}
-                                                onBlur={() => setEditable("")}
-                                                onKeyDown={(e) => handelSetConfig(e, name)}
-                                                value={configValue}
-                                            />
+                                            <div className="flex gap-2">
+                                                <Input
+                                                    ref={(ref) => {
+                                                        ref?.focus()
+                                                    }}
+                                                    className="w-20"
+                                                    type="number"
+                                                    variant="Small"
+                                                    onChange={(e) => setConfigValue(e.target.value)}
+                                                    onKeyDown={(e) => onKeyDown(e, name)}
+                                                    value={configValue}
+                                                    style={{
+                                                        WebkitAppearance: 'none',
+                                                        margin: 0,
+                                                    }}
+                                                />
+                                                <Button
+                                                    icon={<XCircle color={!(index % 2) ? "#272746" : "#57577B"} />}
+                                                    onClick={() => setEditable("")}
+                                                    onMouseDown={(e) => e.preventDefault()}
+                                                />
+                                                <Button
+                                                    icon={<CheckCircle2 color={!(index % 2) ? "#272746" : "#57577B"} />}
+                                                    onClick={() => handelSetConfig(name)}
+                                                    onMouseDown={(e) => e.preventDefault()}
+                                                />
+                                            </div>
                                             : <Button
-                                            className={cn(disableRunTimeConfigs.has(name) && "cursor-default")}
-                                                label={typeof value === "number" ? value.toString() : value}
+                                               label={typeof value === "number" ? value.toString() : value}
                                                 onClick={() => {
                                                     setEditable(name)
                                                     setConfigValue(value.toString())