@galadrim/galadmin 0.1.209 → 0.1.210

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

@@ -3,6 +3,7 @@ import RichTextInput from "./inputs/RichTextInput";
 import BetterRichTextInput from "./inputs/BetterRichTextInput";
 import DatetimeInput from "./inputs/DatetimeInput";
 import AddressInput from "./inputs/AddressInput";
+import CompanyInput from "./inputs/CompanyInput";
 import FileInput from "./inputs/FileInput";
 import ForeignSelectInput from "./inputs/ForeignSelectInput";
 import ForeignDatalistInput from "./inputs/ForeignDatalistInput";
@@ -91,6 +92,14 @@ export default ({ column, onChange, initialData }) => {
         initialData={initialData}
       />
     );
+  } else if (dataType === "company") {
+    return (
+      <CompanyInput
+        column={column}
+        onChange={onChange}
+        initialData={initialData}
+      />
+    );
   } else if (dataType === "color") {
     return (
       <ColorInput

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

@@ -0,0 +1,187 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import debounce from 'lodash.debounce';
+import axios from "axios";
+
+export default ({ column, onChange, initialData }) => {
+    const [inputValue, setInputValue] = useState(initialData?.[column.companyNameField]);
+    const [suggestions, setSuggestions] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isListVisible, setIsListVisible] = useState(false);
+    const latestQueryRef = useRef(inputValue);
+    const minSearchLength = 3;
+
+    const fetchSuggestions = async (query) => {
+        if (query.length < minSearchLength) {
+            setSuggestions([]);
+            setIsListVisible(false);
+            return;
+        }
+
+        setIsLoading(true);
+        setSuggestions([]);
+        latestQueryRef.current = query
+
+        try {
+            const response = await axios.get(`/searchCompanies`, {
+                params: {
+                    query: query
+                }
+            });
+            const data = response.data;
+            if (query === latestQueryRef.current) {
+                setSuggestions(data);
+                setIsListVisible(data.length > 0);
+            }
+
+        } catch (err) {
+            console.error(err)
+        } finally {
+            if (query === latestQueryRef.current) {
+                setIsLoading(false);
+            }
+        }
+    };
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const debouncedFetchSuggestions = useCallback(
+        debounce(fetchSuggestions, 300),
+        [inputValue]
+    );
+
+    const handleInputChange = (event) => {
+        const value = event.target.value;
+        setInputValue(value);
+
+        if (value.length === 0) {
+            setSuggestions([]);
+            setIsListVisible(false);
+            setIsLoading(false);
+            debouncedFetchSuggestions.cancel();
+            latestQueryRef.current = '';
+        } else if (value.length >= minSearchLength) {
+            setIsLoading(true);
+            debouncedFetchSuggestions(value);
+        } else {
+            setSuggestions([]);
+            setIsListVisible(false);
+            setIsLoading(false);
+            debouncedFetchSuggestions.cancel();
+            latestQueryRef.current = value;
+        }
+    };
+
+    const handleSelectCompany = (company) => {
+        setInputValue(company.companyName);
+        setSuggestions([]);
+        setIsListVisible(false);
+        const fieldValues = {
+            companyNameField: company.companyName,
+            sirenField: company.siren,
+            siretField: company.siret,
+            addressField: company.address,
+            cityField: company.city,
+            zipCodeField: company.zipCode,
+            activityNumberField: company.activityNumber,
+        }
+        const data = {}
+        for (const key in fieldValues) {
+            if (column[key]) {
+                data[column[key]] = fieldValues[key]
+            }
+        }
+        onChange(data);
+    };
+
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (!event.target.closest('.company-input-container')) {
+                setIsListVisible(false);
+            }
+        };
+
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, []);
+
+    return (
+        <div
+            className={`company-input-container`}
+            style={{ position: 'relative' }}
+        >
+            <input
+                type="text"
+                value={inputValue}
+                onChange={handleInputChange}
+                onFocus={() => {
+                    if (suggestions.length > 0 && inputValue.length >= minSearchLength) {
+                        setIsListVisible(true);
+                    }
+                }}
+                placeholder={"Rechercher une entreprise..."}
+                aria-autocomplete="list"
+                aria-expanded={isListVisible}
+                style={{ width: '100%', boxSizing: 'border-box' }}
+            />
+
+            {isLoading && <div style={styles.loader}>Chargement...</div>}
+
+            {isListVisible && suggestions.length > 0 && (
+                <ul style={styles.suggestionList}>
+                    {suggestions.map((company) => (
+                        <li
+                            key={company.id}
+                            style={styles.suggestionItem}
+                            onClick={() => handleSelectCompany(company)}
+                            onMouseDown={(e) => e.preventDefault()}
+                            role="option"
+                            aria-selected="false"
+                        >
+                            <div style={styles.companyName}>{company.companyName}</div>
+                            <div style={styles.companyAddress}>{company.siren} - {company.address}</div>
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+};
+
+const styles = {
+    loader: {
+        position: 'absolute',
+        right: '10px',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        fontSize: '0.8em',
+        color: '#888',
+    },
+    suggestionList: {
+        listStyleType: 'none',
+        padding: 0,
+        margin: 0,
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        right: 0,
+        border: '1px solid #ccc',
+        backgroundColor: 'white',
+        maxHeight: '200px',
+        overflowY: 'auto',
+        zIndex: 1000,
+        boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+    },
+    suggestionItem: {
+        padding: '8px 12px',
+        cursor: 'pointer',
+        borderBottom: '1px solid #eee',
+    },
+    companyName: {
+        fontWeight: 'bold',
+    },
+    companyAddress: {
+        fontSize: '0.9em',
+        color: '#555',
+    },
+};

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

@@ -39,7 +39,7 @@ export default ({ column, onChange, initialData, withTime }) => {
     <div>
       <input
         type="text"
-        autocomplete="one-time-code"
+        autoComplete="one-time-code"
         ref={datepicker}
         data-timepicker={withTime ? "true" : "false"}
       />

package/src/front/src/pages/EditRecord.js

@@ -24,13 +24,6 @@ export default () => {
     )
     const [isUpdating, setIsUpdating] = useState(false)
 
-    for (let column of view.columns) {
-        if (column.displayCondition) {
-            console.log({ ...record, ...dataToUpdate })
-            console.log(column.displayCondition({ ...record, ...dataToUpdate }))
-        }
-    }
-
     useEffect(() => {
         axios.get("/record", {
             params: {

package/src/front/src/utils/getFormattedValue.js

@@ -97,6 +97,8 @@ export default (column, record, config, onTable) => {
     return <div>{record[column.name]?.join(", ")}</div>;
   } else if (column.dataType === "datetimeUTC") {
     return <div>{new Date(record[column.name] + "Z").toLocaleString()}</div>;
+  } else if (column.dataType === "company") {
+    return <div>{record[column.companyNameField]}</div>;
   } else {
     return <div>{record[column.name]}</div>;
   }

package/src/types/config.ts

@@ -51,6 +51,17 @@ export type AddressColumn = {
   postalCodeField?: string;
 };
 
+export type CompanyColumn = {
+  dataType: "company";
+  sirenField?: string;
+  siretField?: string;
+  companyNameField?: string;
+  addressField?: string;
+  zipCodeField?: string;
+  cityField?: string;
+  activityNumberField?: string;
+};
+
 export type DateColumn = {
   dataType: "date";
   name: string;
@@ -450,6 +461,9 @@ export type Config = {
   /** Clé API Google Maps pour les champs adresses et l'affichage de cartes */
   googleMapsKey?: string;
 
+  /** Clé API INSEE pour la recherche de sociétés */
+  inseeKey?: string;
+
   /** Désactiver la sélection multiple dans les vues de type table */
   hideMultiselect?: boolean;
 

package/src/front/ckeditor5-build/node_modules/.bin/semver

@@ -1,12 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../semver/bin/semver.js" "$@"
-else 
-  exec node  "$basedir/../semver/bin/semver.js" "$@"
-fi

package/src/front/ckeditor5-build/node_modules/.bin/semver.cmd

@@ -1,17 +0,0 @@
-@ECHO off
-GOTO start
-:find_dp0
-SET dp0=%~dp0
-EXIT /b
-:start
-SETLOCAL
-CALL :find_dp0
-
-IF EXIST "%dp0%\node.exe" (
-  SET "_prog=%dp0%\node.exe"
-) ELSE (
-  SET "_prog=node"
-  SET PATHEXT=%PATHEXT:;.JS;=;%
-)
-
-endLocal & goto #_undefined_# 2>NUL || title %COMSPEC% & "%_prog%"  "%dp0%\..\semver\bin\semver.js" %*

package/src/front/ckeditor5-build/node_modules/.bin/semver.ps1

@@ -1,28 +0,0 @@
-#!/usr/bin/env pwsh
-$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
-
-$exe=""
-if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
-  # Fix case when both the Windows and Linux builds of Node
-  # are installed in the same directory
-  $exe=".exe"
-}
-$ret=0
-if (Test-Path "$basedir/node$exe") {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "$basedir/node$exe"  "$basedir/../semver/bin/semver.js" $args
-  } else {
-    & "$basedir/node$exe"  "$basedir/../semver/bin/semver.js" $args
-  }
-  $ret=$LASTEXITCODE
-} else {
-  # Support pipeline input
-  if ($MyInvocation.ExpectingInput) {
-    $input | & "node$exe"  "$basedir/../semver/bin/semver.js" $args
-  } else {
-    & "node$exe"  "$basedir/../semver/bin/semver.js" $args
-  }
-  $ret=$LASTEXITCODE
-}
-exit $ret