@galadrim/galadmin 0.1.201 → 0.1.203

package/src/front/src/components/Input.js

@@ -6,6 +6,7 @@ import AddressInput from "./inputs/AddressInput";
 import FileInput from "./inputs/FileInput";
 import ForeignSelectInput from "./inputs/ForeignSelectInput";
 import ForeignDatalistInput from "./inputs/ForeignDatalistInput";
+import AutocompleteInput from "./inputs/AutocompleteInput";
 
 export default ({ column, onChange, initialData }) => {
   const { dataType } = column;
@@ -168,6 +169,14 @@ export default ({ column, onChange, initialData }) => {
         defaultValue={initialData?.[column.name]?.join(", ")}
       />
     );
+  } else if (dataType === "autocompleteText") {
+    return (
+      <AutocompleteInput
+        column={column}
+        onChange={onChange}
+        initialData={initialData}
+      />
+    );
   } else {
     return (
       <input

package/src/front/src/components/inputs/AutocompleteInput.js

@@ -0,0 +1,33 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+export default ({ column, onChange, initialData }) => {
+    const [options, setOptions] = useState([])
+    const id = Math.random().toString(36).substring(2, 15);
+
+    useEffect(() => {
+        axios.get("/customQuery", {
+            params: {
+                query: column.autocompleteListQuery
+            }
+        }).then((response) => {
+            setOptions(response.data.map(x => x[column.autocompleteListQueryResultKey]))
+        })
+    }, [])
+
+    return (
+        <>
+            <input
+                type="text"
+                onChange={(e) => onChange({ [column.name]: e.target.value })}
+                defaultValue={initialData?.[column.name]}
+                list={id}
+            />
+            <datalist id={id}>
+                {options.map((option) => (
+                    <option value={option} key={option}></option>
+                ))}
+            </datalist>
+        </>
+    );
+}

package/src/types/config.ts

@@ -119,6 +119,13 @@ export type FileColumn = {
   name: string;
 } & FileUploadProperties;
 
+export type AutocompleteColumn = {
+  dataType: "autocompleteText";
+  name: string;
+  autocompleteListQuery: string;
+  autocompleteListQueryResultKey: string;
+};
+
 export type FileUploadProperties = {
   publicPath?: string;
   subdirectory?: string;
@@ -155,6 +162,7 @@ export type Column = BaseTypeColumn &
     | BetterRichTextColumn
     | TextareaColumn
     | FileColumn
+    | AutocompleteColumn
   );
 
 export type CreateType = {