data-primals-engine 1.0.11 → 1.1.0

package/client/src/FlexBuilder.jsx

@@ -0,0 +1,269 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './FlexBuilder.scss';
+import { useAuthContext } from "./contexts/AuthContext.jsx";
+import { useTranslation } from "react-i18next";
+import { applyFilter } from "data-primals-engine/data";
+import { FieldSelectorModal } from "./FlexNode.jsx";
+import { deepInsertNode, deepRemoveNode } from "./FlexBuilderUtils.js";
+import useDragAndDrop from './hooks/useDragAndDrop.js';
+import RichTextEditorModal from "./RichTextEditorModal.jsx";
+import FlexBuilderControls from './FlexBuilderControls.jsx';
+import FlexBuilderPreview from './FlexBuilderPreview.jsx';
+import {
+    createNewNode,
+    cleanNodeForOutput,
+    findNodeRecursive,
+    updateNodeRecursive,
+    deleteNodeRecursive,
+    clearMappingsRecursive
+} from './FlexTreeUtils.js';
+import {DialogProvider} from "./Dialog.jsx";
+
+const FlexBuilder = ({ initialConfig = null, models = [], onChange, data = [], lang = 'fr' }) => {
+    const { me: user } = useAuthContext();
+    const { t } = useTranslation();
+    const dnd = useDragAndDrop();
+
+    const [editingHtmlInfo, setEditingHtmlInfo] = useState(null);
+
+    const defaultConfig = useMemo(() => ({
+        id: 'root', type: 'container',
+        containerStyle: { customCss: '', display: 'flex', flexDirection: 'column', flexWrap: 'nowrap', gap: '10px', padding: '10px', border: '1px dashed #999', width: '100%' },
+        children: [createNewNode('container')],
+        selectedModelName: null, dataFilter: null,
+        dataLimit: 3, refreshInterval: 60000,
+    }), [createNewNode]);
+
+    // --- CORRECTION ---
+    // Fonction utilitaire pour construire l'état à partir de la configuration chargée.
+    // Elle fusionne correctement les données par défaut, les métadonnées et la structure de la vue.
+    const buildStateFromConfig = useCallback((config) => {
+        if (config && config.flexStructure) {
+            const { flexStructure: structureData, ...metaData } = config;
+            return { ...defaultConfig, ...metaData, ...structureData };
+        }
+        return defaultConfig;
+    }, [defaultConfig]);
+
+    const [flexStructure, setFlexStructure] = useState(() => buildStateFromConfig(initialConfig));
+
+    const [selectedNodeId, setSelectedNodeId] = useState(null);
+    const [isFieldSelectorOpen, setIsFieldSelectorOpen] = useState(false);
+    const currentlyEditingViewIdRef = useRef(initialConfig?.id || null);
+
+    useEffect(() => {
+        const newViewId = initialConfig?.id || null;
+        if (newViewId !== currentlyEditingViewIdRef.current) {
+            // Utilise la même logique de construction d'état lors du changement de vue
+            setFlexStructure(buildStateFromConfig(initialConfig));
+            setSelectedNodeId(null);
+            currentlyEditingViewIdRef.current = newViewId;
+        }
+    }, [initialConfig, buildStateFromConfig]);
+    // --- FIN DE LA CORRECTION ---
+
+    const selectedNode = useMemo(() => {
+        if (!selectedNodeId) return null;
+        if (flexStructure.id === selectedNodeId) return flexStructure;
+        return findNodeRecursive(flexStructure.children, selectedNodeId);
+    }, [flexStructure, selectedNodeId]);
+
+    const currentModelFields = useMemo(() => {
+        if (!flexStructure.selectedModelName || !Array.isArray(models)) return [];
+        const model = models.find(m => m.name === flexStructure.selectedModelName);
+        return model?.fields || [];
+    }, [flexStructure.selectedModelName, models]);
+
+    const filteredData = useMemo(() => {
+        if (!flexStructure.selectedModelName) return [];
+        return applyFilter(data || [], flexStructure.dataFilter);
+    }, [data, flexStructure.dataFilter, flexStructure.selectedModelName]);
+
+    const dataIndexRef = useRef(0);
+    useEffect(() => { dataIndexRef.current = 0; }, [filteredData, flexStructure]);
+
+    useEffect(() => {
+        if (onChange) {
+            const { children, containerStyle, id, type, ...rootProps } = flexStructure;
+            const output = {
+                ...rootProps,
+                id: currentlyEditingViewIdRef.current,
+                flexStructure: cleanNodeForOutput({ children, containerStyle, id, type }),
+            };
+            onChange(output);
+        }
+    }, [flexStructure, onChange]);
+
+    const handleUpdateNode = (nodeId, propertyPath, value) => {
+        setFlexStructure(prev => {
+            const updateFn = (nodeToUpdate) => {
+                const newNode = JSON.parse(JSON.stringify(nodeToUpdate)); // Deep copy for safety
+                let current = newNode;
+                const pathArray = propertyPath.split('.');
+                for (let i = 0; i < pathArray.length - 1; i++) {
+                    current[pathArray[i]] = current[pathArray[i]] || {};
+                    current = current[pathArray[i]];
+                }
+                current[pathArray[pathArray.length - 1]] = value;
+                return newNode;
+            };
+
+            if (nodeId === prev.id) {
+                if (['selectedModelName', 'dataFilter', 'dataLimit', 'refreshInterval'].includes(propertyPath)) {
+                    return { ...prev, [propertyPath]: value };
+                }
+                return updateFn(prev);
+            }
+            return { ...prev, children: updateNodeRecursive(prev.children, nodeId, updateFn) };
+        });
+    };
+
+    const handleAddChildNode = (parentId, type) => {
+        const newNode = createNewNode(type);
+        const updateFn = (node) => ({ ...node, children: [...(node.children || []), newNode] });
+        setFlexStructure(prev => {
+            if (prev.id === parentId) return updateFn(prev);
+            return { ...prev, children: updateNodeRecursive(prev.children, parentId, updateFn) };
+        });
+        setSelectedNodeId(newNode.id);
+    };
+
+    const handleMakeItemNestedContainer = (itemId) => {
+        const updateFn = (node) => {
+            if (node.type === 'item' && node.content.type !== 'nestedContainer') {
+                const newNestedContainer = createNewNode('container');
+                newNestedContainer.children = [createNewNode('item')];
+                return { ...node, content: { type: 'nestedContainer', nestedContainer: newNestedContainer } };
+            }
+            return node;
+        };
+        setFlexStructure(prev => ({ ...prev, children: updateNodeRecursive(prev.children, itemId, updateFn) }));
+    };
+
+    const handleDeleteNode = () => {
+        if (!selectedNodeId || selectedNodeId === flexStructure.id) {
+            alert(t('flexBuilder.cannotDeleteRoot'));
+            return;
+        }
+        if (window.confirm(t('flexBuilder.confirmDeleteNode'))) {
+            setFlexStructure(prev => ({ ...prev, children: deleteNodeRecursive(prev.children, selectedNodeId) }));
+            setSelectedNodeId(null);
+        }
+    };
+
+    const handleModelChange = (modelName) => {
+        setFlexStructure(prev => ({
+            ...prev,
+            selectedModelName: modelName,
+            dataFilter: null,
+            children: clearMappingsRecursive(prev.children)
+        }));
+        setSelectedNodeId(null);
+    };
+
+    const handleFieldSelectedForMapping = (field) => {
+        if (selectedNode && selectedNode.type === 'item') {
+            const fieldPath = field.path || field.name;
+            const displayName = field.displayName || field.name;
+            if (!fieldPath) return;
+            const newContent = { type: 'dataField', mapping: { fieldPath, displayName } };
+            handleUpdateNode(selectedNode.id, 'content', newContent);
+        }
+        setIsFieldSelectorOpen(false);
+    };
+
+    const handleMoveNode = useCallback((nodeId, newParentId, newIndex) => {
+        if (!nodeId || !newParentId) {
+            dnd.handleItemDragEnd();
+            return;
+        }
+        setFlexStructure(prev => {
+            const removal = deepRemoveNode(prev, nodeId);
+            if (!removal.removedNode) return prev;
+            const insertion = deepInsertNode(removal.newStructure, newParentId, removal.removedNode, newIndex);
+            if (!insertion.inserted) return prev;
+            if (selectedNodeId === nodeId) setSelectedNodeId(null);
+            return insertion.newStructure;
+        });
+    }, [dnd, selectedNodeId]);
+
+    const handleSaveHtmlContent = (newHtml) => {
+        if (editingHtmlInfo) {
+            const newContent = { type: 'richtext', html: newHtml };
+            handleUpdateNode(editingHtmlInfo.nodeId, 'content', newContent);
+            setEditingHtmlInfo(null);
+        }
+    };
+
+    const modelOptions = useMemo(() => models.map(m => ({ value: m.name, label: t(`model_${m.name}`, m.name) })), [models, t]);
+    const flexOptions = useMemo(() => ({
+        flexDirection: ['row', 'row-reverse', 'column', 'column-reverse'],
+        flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
+        justifyContent: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'],
+        alignItems: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'],
+    }), []);
+
+    return (
+        <div className="flex-builder">
+            <FlexBuilderControls
+                flexStructure={flexStructure}
+                selectedNode={selectedNode}
+                models={models}
+                user={user}
+                lang={lang}
+                modelOptions={modelOptions}
+                flexOptions={flexOptions}
+                currentModelFields={currentModelFields}
+                onModelChange={handleModelChange}
+                onUpdateNode={handleUpdateNode}
+                onDeleteNode={handleDeleteNode}
+                onAddChildNode={handleAddChildNode}
+                onMakeItemNestedContainer={handleMakeItemNestedContainer}
+                onSetIsFieldSelectorOpen={setIsFieldSelectorOpen}
+                onSetEditingHtmlInfo={setEditingHtmlInfo}
+            />
+
+            <FlexBuilderPreview
+                flexStructure={flexStructure}
+                onSelectNode={setSelectedNodeId}
+                selectedNodeId={selectedNodeId}
+                filteredData={filteredData}
+                dataIndexRef={dataIndexRef}
+                modelFields={currentModelFields}
+                dnd={dnd}
+                onMoveNode={handleMoveNode}
+            />
+
+            <DialogProvider>
+            {selectedNode?.type === 'item' && (
+                <FieldSelectorModal
+                    isOpen={isFieldSelectorOpen}
+                    onClose={() => setIsFieldSelectorOpen(false)}
+                    modelFields={currentModelFields}
+                    allModels={models}
+                    onSelectField={handleFieldSelectedForMapping}
+                />
+            )}
+
+            {editingHtmlInfo && (
+                <RichTextEditorModal
+                    initialContent={editingHtmlInfo.initialContent}
+                    onClose={() => setEditingHtmlInfo(null)}
+                    onSave={handleSaveHtmlContent}
+                />
+            )}
+            </DialogProvider>
+        </div>
+    );
+};
+
+FlexBuilder.propTypes = {
+    initialConfig: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    data: PropTypes.array,
+    models: PropTypes.array.isRequired,
+    lang: PropTypes.string,
+};
+
+export default FlexBuilder;

package/client/src/FlexBuilder.scss

@@ -0,0 +1,226 @@
+// src/components/FlexBuilder.scss
+
+.flex-builder {
+  display: flex;
+  font-family: sans-serif;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  min-height: 600px; // Give it some space
+  background-color: #f9f9f9;
+
+  .flex-builder-controls {
+    width: 350px;
+    padding: 15px;
+    background-color: #fff;
+    border-right: 1px solid #ccc;
+    overflow-y: auto;
+    box-shadow: 2px 0 5px rgba(0,0,0,0.05);
+
+    h3, h4 {
+      margin-top: 0;
+      margin-bottom: 10px;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #eee;
+      color: #333;
+    }
+    h4 {
+      font-size: 1em;
+      margin-top: 15px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .control-group {
+      margin-bottom: 12px;
+      label {
+        display: block;
+        margin-bottom: 4px;
+        font-size: 0.9em;
+        color: #555;
+        font-weight: 500;
+      }
+      input[type="text"],
+      input[type="number"],
+      select,
+      .select-field-container .select-field { // Target your SelectField specifically
+        width: 100%;
+        padding: 8px;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-sizing: border-box;
+        font-size: 0.9em;
+      }
+      button {
+        padding: 6px 10px;
+        margin-right: 5px;
+        margin-top: 5px;
+        border: 1px solid #ccc;
+        background-color: #f0f0f0;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 0.85em;
+        color: #575757;
+        &:hover {
+          background-color: #e0e0e0;
+        }
+        &.btn-delete-node {
+          background-color: transparent;
+          border: none;
+          color: #dc3545;
+          padding: 2px 5px;
+          &:hover {
+            color: #c82333;
+            background-color: rgba(220, 53, 69, 0.1);
+          }
+        }
+      }
+      &.actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 5px;
+      }
+    }
+    .selected-node-controls {
+      border-top: 2px solid #007bff;
+      padding-top: 10px;
+      margin-top: 15px;
+    }
+    .no-node-selected-hint {
+      color: #777;
+      font-style: italic;
+      text-align: center;
+      margin-top: 20px;
+    }
+  }
+
+  .flex-builder-preview-area {
+    flex-grow: 1;
+    padding: 15px;
+    overflow: auto; // Important for deeply nested structures
+
+    h3 {
+      margin-top: 0;
+      margin-bottom: 15px;
+    }
+
+    .flex-node { // Common styles for both container and item in preview
+      transition: outline 0.2s ease-in-out;
+      background-color: #f5f5f5;
+      &.is-selected {
+        outline: 2px solid #007bff !important; // Force outline for selected
+        box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
+      }
+    }
+
+    .preview-container {
+      // Default styles are applied via JS, this is for base and selection
+      border: 1px dashed #aaa; // Default border for all containers
+      padding: 8px; // Default padding
+      min-height: 40px; // Minimum height to be clickable
+      position: relative; // For placeholder text
+
+      &.is-selected {
+        border-style: solid;
+        border-color: #007bff;
+      }
+      &:hover:not(.is-selected) {
+        border-color: #66afe9;
+      }
+      .empty-container-placeholder {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: #aaa;
+        font-size: 0.9em;
+        pointer-events: none; // Allow clicks to pass through to the container
+      }
+    }
+
+    .preview-item {
+      border: 1px solid #ccc;
+      padding: 8px;
+      min-height: 30px; // Minimum height
+      display: flex; // To center content by default
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      overflow: hidden;
+      word-break: break-word;
+      cursor: pointer;
+      background-color: #fff;
+
+      &.is-selected {
+        border-color: #007bff;
+        background-color: #e7f3ff;
+      }
+      &:hover:not(.is-selected) {
+        border-color: #66afe9;
+        background-color: #f8f9fa;
+      }
+
+      .preview-item-content {
+        font-size: 0.9em;
+        color: #333;
+        max-width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap; // Prevent content from wrapping and breaking layout
+      }
+
+      // When an item contains a nested container
+      & > .preview-container { // Direct child container
+        margin: -8px; // Offset parent item's padding
+        width: calc(100% + 16px); // Expand to fill parent item, accounting for offset padding
+        height: calc(100% + 16px);
+        min-height: calc(100% + 16px); // Ensure it fills
+      }
+    }
+  }
+}
+
+// Styles for FieldSelectorModal (can be reused or adapted from previous version)
+.flex-builder-modal-overlay {
+  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex; align-items: center; justify-content: center;
+  z-index: 1050; padding: 15px;
+}
+.flex-builder-modal-content {
+  background-color: white; padding: 25px; border-radius: 8px;
+  min-width: 320px; max-width: 600px; width: 90%; max-height: 85vh;
+  display: flex; flex-direction: column; box-shadow: 0 5px 20px rgba(0,0,0,0.25);
+  h4 {
+    margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid #e0e0e0;
+    padding-bottom: 15px; font-size: 1.2em; color: #333;
+  }
+  .field-selector-list {
+    list-style: none; padding: 0; margin: 0 0 20px 0;
+    overflow-y: auto; flex-grow: 1;
+    li {
+      padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f0f0f0;
+      transition: background-color 0.2s ease, color 0.2s ease;
+      display: flex; justify-content: space-between; align-items: center;
+      &:last-child { border-bottom: none; }
+      &:hover {
+        background-color: #007bff; color: white;
+        .field-path { color: #e0e0e0; }
+      }
+      em { font-style: italic; color: #6c757d; }
+      .field-path { font-size: 0.85em; color: #6c757d; margin-left: 10px; white-space: nowrap; }
+    }
+  }
+  .btn-cancel {
+    margin-top: auto; padding: 10px 18px; background-color: #6c757d;
+    color: white; border: none; border-radius: 4px; cursor: pointer;
+    align-self: flex-end;
+    &:hover { background-color: #5a6268; }
+  }
+}
+
+// Styles for ConditionBuilder integration
+.flex-builder-controls .control-group .condition-builder {
+  border: 1px solid #e0e0e0; padding: 10px; border-radius: 4px;
+  background-color: #fdfdfd; margin-top: 5px;
+}

package/client/src/FlexBuilderControls.jsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { FaTrash, FaBox, FaExpandArrowsAlt, FaObjectGroup, FaEdit, FaFileAlt } from 'react-icons/fa';
+import { CodeField, NumberField, SelectField } from './Field.jsx';
+import ConditionBuilder from "./ConditionBuilder.jsx";
+
+const FlexBuilderControls = ({
+                                 flexStructure,
+                                 selectedNode,
+                                 models,
+                                 user,
+                                 lang,
+                                 modelOptions,
+                                 flexOptions,
+                                 currentModelFields,
+                                 onModelChange,
+                                 onUpdateNode,
+                                 onDeleteNode,
+                                 onAddChildNode,
+                                 onMakeItemNestedContainer,
+                                 onSetIsFieldSelectorOpen,
+                                 onSetEditingHtmlInfo,
+                             }) => {
+    const { t } = useTranslation();
+
+    const handleDataLimitChange = (e) => {
+        let value = parseInt(e.target.value, 10);
+        if (isNaN(value) || value < 1) value = 1;
+        if (value > 8) value = 8;
+        onUpdateNode(flexStructure.id, 'dataLimit', value);
+    };
+
+    const handleRefreshIntervalChange = (e) => {
+        onUpdateNode(flexStructure.id, 'refreshInterval', parseInt(e.target.value, 10) || 0);
+    };
+
+    return (
+        <div className="flex-builder-controls">
+            {/* Section des paramètres de données */}
+            <h3>{t('dataSettings', 'Paramètres des données')}</h3>
+            <div className="control-group">
+                <label htmlFor="selectedModel">{t('flexBuilder.selectDataModel', 'Modèle de données')}:</label>
+                <SelectField
+                    id="selectedModel"
+                    value={flexStructure.selectedModelName}
+                    onChange={(selected) => onModelChange(selected.value)}
+                    items={[{ value: null, label: t('flexBuilder.selectAModel', 'Sélectionner un modèle...') }, ...modelOptions]}
+                />
+            </div>
+            {flexStructure.selectedModelName && (
+                <>
+                    <label>{t('dataFilter', 'Filtre des données')}:</label>
+                    <div className="control-group">
+                        <ConditionBuilder
+                            modelFields={models.find(f => f.name === flexStructure.selectedModelName)?.fields || []}
+                            model={flexStructure.selectedModelName}
+                            models={models}
+                            selectableModels={false}
+                            initialValue={flexStructure.dataFilter}
+                            onChange={(newCondition) => onUpdateNode(flexStructure.id, 'dataFilter', newCondition || {})}
+                            lang={lang}
+                        />
+                    </div>
+                    <div className="form">
+                        <NumberField
+                            label={t('flexBuilder.dataLimit', "Nombre d'éléments affichés (1-8)")}
+                            id="flex-data-limit"
+                            value={flexStructure.dataLimit || 1}
+                            onChange={handleDataLimitChange}
+                            min="1"
+                            max="8"
+                        />
+                        <NumberField
+                            label={t('flexBuilder.refreshInterval', "Intervalle de rafraîchissement (ms)")}
+                            id="flex-refresh-interval"
+                            value={flexStructure.refreshInterval || 60000}
+                            onChange={handleRefreshIntervalChange}
+                            min="0"
+                            placeholder="0 pour désactiver"
+                        />
+                    </div>
+                </>
+            )}
+
+            {/* Section des paramètres du nœud sélectionné */}
+            {selectedNode && (
+                <div className="selected-node-controls">
+                    <h4>
+                        {t('flexBuilder.selectedNodeSettings', 'Paramètres')}: {t(selectedNode.type)} ({selectedNode.id.substring(0, 8)})
+                        {selectedNode.id !== flexStructure.id &&
+                            <button onClick={onDeleteNode} className="btn-delete-node" title={t('flexBuilder.deleteThisNode', 'Supprimer cet élément')}><FaTrash /></button>
+                        }
+                    </h4>
+
+                    {/* Contrôles pour un conteneur */}
+                    {selectedNode.type === 'container' && (
+                        <>
+                            <p>{t('flexBuilder.containerControlsTitle', 'Propriétés du conteneur Flex:')}</p>
+                            <div className="control-group actions">
+                                <button onClick={() => onAddChildNode(selectedNode.id, 'item')}><FaBox /> {t('flexBuilder.addItem', 'Ajouter une case')}</button>
+                                <button onClick={() => onAddChildNode(selectedNode.id, 'container')}><FaExpandArrowsAlt /> {t('flexBuilder.addNestedContainer', 'Ajouter un conteneur')}</button>
+                            </div>
+                            <div className="control-group"><label>{t('flexDirection')}:</label><SelectField items={flexOptions.flexDirection.map(o => ({ label: t(o, o), value: o }))} value={selectedNode.containerStyle.flexDirection} onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.flexDirection', sel.value)} /></div>
+                            <div className="control-group"><label>{t('flexWrap')}:</label><SelectField items={flexOptions.flexWrap.map(o => ({ label: t(o, o), value: o }))} value={selectedNode.containerStyle.flexWrap} onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.flexWrap', sel.value)} /></div>
+                            <div className="control-group"><label>{t('justifyContent')}:</label><SelectField items={flexOptions.justifyContent.map(o => ({ label: t(o, o), value: o }))} value={selectedNode.containerStyle.justifyContent} onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.justifyContent', sel.value)} /></div>
+                            <div className="control-group"><label>{t('alignItems')}:</label><SelectField items={flexOptions.alignItems.map(o => ({ label: t(o, o), value: o }))} value={selectedNode.containerStyle.alignItems} onChange={sel => onUpdateNode(selectedNode.id, 'containerStyle.alignItems', sel.value)} /></div>
+                            <div className="control-group"><label>{t('gap')}:</label><input type="text" value={selectedNode.containerStyle.gap || ''} onChange={e => onUpdateNode(selectedNode.id, 'containerStyle.gap', e.target.value)} placeholder="ex: 10px" /></div>
+                            <div className="form-group"><CodeField id="customCss" name="customCss" language="css" value={selectedNode.containerStyle.customCss || ''} onChange={(e) => onUpdateNode(selectedNode.id, 'containerStyle.customCss', e.value)} placeholder={t('flexBuilder.customCssPlaceholder', 'Ex: background-color: red;')} rows={4} /></div>
+                        </>
+                    )}
+
+                    {/* Contrôles pour un item */}
+                    {selectedNode.type === 'item' && (
+                        <>
+                            <p>{t('flexBuilder.itemControlsTitle', 'Propriétés de la case:')}</p>
+                            <div className="control-group actions">
+                                {flexStructure.selectedModelName && (
+                                    <button onClick={() => onSetIsFieldSelectorOpen(true)}>
+                                        <FaEdit /> {selectedNode.content.type === 'dataField' ? t('flexBuilder.editDataMapping', 'Modifier le champ lié') : t('flexBuilder.mapDataField', 'Lier un champ de données')}
+                                    </button>
+                                )}
+                                <button onClick={(e) => {
+                                    onSetEditingHtmlInfo({ nodeId: selectedNode.id, initialContent: selectedNode.content.html || '' });
+                                    e.stopPropagation()
+                                }}>
+                                    <FaFileAlt /> {t('flexBuilder.editHTML', 'Éditer le contenu')}
+                                </button>
+                                {selectedNode.content.type !== 'nestedContainer' && (
+                                    <button onClick={() => onMakeItemNestedContainer(selectedNode.id)}>
+                                        <FaObjectGroup /> {t('flexBuilder.makeNestedContainer', 'Transformer en conteneur')}
+                                    </button>
+                                )}
+                            </div>
+                            <div className="control-group"><label>{t('itemWidth')}:</label><input type="text" value={selectedNode.itemStyle.width || ''} onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.width', e.target.value)} placeholder="ex: 100px, 20%" /></div>
+                            <div className="control-group"><label>{t('itemHeight')}:</label><input type="text" value={selectedNode.itemStyle.height || ''} onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.height', e.target.value)} placeholder="ex: 50px, auto" /></div>
+                            <div className="control-group"><label>{t('flexBuilder.itemFlexGrow', 'Flex Grow')}:</label><input type="number" value={selectedNode.itemStyle.flexGrow || 0} onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.flexGrow', parseFloat(e.target.value) || 0)} min="0" step="0.1" /></div>
+                            <div className="control-group"><label>{t('flexBuilder.itemFlexShrink', 'Flex Shrink')}:</label><input type="number" value={selectedNode.itemStyle.flexShrink === undefined ? 1 : selectedNode.itemStyle.flexShrink} onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.flexShrink', parseFloat(e.target.value))} min="0" step="0.1" /></div>
+                            <div className="control-group"><label>{t('flexBuilder.itemFlexBasis', 'Flex Basis')}:</label><input type="text" value={selectedNode.itemStyle.flexBasis || 'auto'} onChange={e => onUpdateNode(selectedNode.id, 'itemStyle.flexBasis', e.target.value)} placeholder="auto, 100px, 20%" /></div>
+                            <div className="form-group"><CodeField id="customCssItem" name="customCssItem" language="css" value={selectedNode.itemStyle.customCss || ''} onChange={(e) => onUpdateNode(selectedNode.id, 'itemStyle.customCss', e.value)} placeholder={t('flexBuilder.customCssPlaceholder', 'Ex: background-color: blue;')} rows={4} /></div>
+                        </>
+                    )}
+                </div>
+            )}
+            {!selectedNode &&
+                <p className="no-node-selected-hint">{t('flexBuilder.clickToSelectNode', 'Cliquez sur un élément dans l\'aperçu pour le configurer.')}</p>
+            }
+        </div>
+    );
+};
+
+FlexBuilderControls.propTypes = {
+    flexStructure: PropTypes.object.isRequired,
+    selectedNode: PropTypes.object,
+    models: PropTypes.array.isRequired,
+    user: PropTypes.object,
+    lang: PropTypes.string.isRequired,
+    modelOptions: PropTypes.array.isRequired,
+    flexOptions: PropTypes.object.isRequired,
+    currentModelFields: PropTypes.array.isRequired,
+    onModelChange: PropTypes.func.isRequired,
+    onUpdateNode: PropTypes.func.isRequired,
+    onDeleteNode: PropTypes.func.isRequired,
+    onAddChildNode: PropTypes.func.isRequired,
+    onMakeItemNestedContainer: PropTypes.func.isRequired,
+    onSetIsFieldSelectorOpen: PropTypes.func.isRequired,
+    onSetEditingHtmlInfo: PropTypes.func.isRequired,
+};
+
+export default FlexBuilderControls;