data-primals-engine 1.0.10 → 1.1.0

package/client/src/FlexBuilderModal.jsx

@@ -0,0 +1,75 @@
+// src/components/FlexBuilderModal.jsx
+import React, { useState, useEffect, useCallback } from 'react'; // Ajout de useCallback
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import FlexBuilder from './FlexBuilder';
+import './FlexBuilderModal.scss';
+import {useAuthContext} from "./contexts/AuthContext.jsx";
+
+const FlexBuilderModal = ({ isOpen, onClose, onSave, models, data, initialConfig = null }) => {
+    const { t } = useTranslation();
+    const [currentFlexConfig, setCurrentFlexConfig] = useState(initialConfig);
+    const {me} = useAuthContext();
+
+    useEffect(() => {
+        // Met à jour currentFlexConfig si initialConfig (venant du parent DashboardView) change
+        // ou si la modale est (ré)ouverte.
+        // Cela est utile si l'utilisateur ferme la modale puis la rouvre pour éditer un autre item
+        // ou le même item avec des données potentiellement mises à jour de l'extérieur.
+        setCurrentFlexConfig(initialConfig);
+    }, [isOpen, initialConfig]); // S'assurer de réagir aux changements de initialConfig
+
+    // Stabiliser handleFlexConfigChange avec useCallback
+    const handleFlexConfigChange = useCallback((newConfig) => {
+        setCurrentFlexConfig(newConfig);
+    }, []); // Les dépendances sont vides car setCurrentFlexConfig est stable
+
+    const handleSave = () => {
+        if (currentFlexConfig) {
+            onSave(currentFlexConfig);
+        }
+        // onClose(); // La fermeture est gérée par le parent (DashboardView) après la sauvegarde.
+    };
+
+    if (!isOpen) {
+        return null;
+    }
+
+    return (
+        <div className="flex-builder-config-modal-overlay" onClick={onClose}>
+            <div className="flex-builder-config-modal-content" onClick={(e) => e.stopPropagation()}>
+                <div className="flex-builder-config-modal-header">
+                    <h3>{t('dashboard.configureFlexView', 'Configurer la Vue Flex')}</h3>
+                    <button onClick={onClose} className="btn-close-x">&times;</button>
+                </div>
+                <div className="flex-builder-config-modal-body">
+                    <FlexBuilder
+                        initialConfig={currentFlexConfig}
+                        models={(models || []).filter(f => f._user === me?.username)}
+                        data={data}
+                        onChange={handleFlexConfigChange} // Maintenant, cette prop est stable
+                    />
+                </div>
+                <div className="flex-builder-config-modal-footer">
+                    <button onClick={onClose} className="btn-secondary">
+                        {t('btns.cancel', 'Annuler')}
+                    </button>
+                    <button onClick={handleSave} className="btn-primary">
+                        {t('btns.save', 'Enregistrer la Vue')}
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+FlexBuilderModal.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+    models: PropTypes.array.isRequired,
+    data: PropTypes.array,
+    initialConfig: PropTypes.object,
+};
+
+export default FlexBuilderModal;

package/client/src/FlexBuilderModal.scss

@@ -0,0 +1,109 @@
+// src/components/FlexBuilderModal.scss
+
+.flex-builder-config-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1040; // Un peu moins que la modale de type de widget si elle reste ouverte
+  padding: 10px; // Pour petits écrans
+}
+
+.flex-builder-config-modal-content {
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
+  display: flex;
+  flex-direction: column;
+  width: 95vw; // Très large pour accommoder FlexBuilder
+  height: 90vh; // Très haut
+  max-width: 1400px; // Limite maximale
+  overflow: hidden; // Le scroll sera géré par les enfants
+
+  .flex-builder-config-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    border-bottom: 1px solid #e0e0e0;
+    background-color: #f7f7f7;
+
+    h3 {
+      margin: 0;
+      font-size: 1.4em;
+      color: #333;
+    }
+
+    .btn-close-x {
+      background: none;
+      border: none;
+      font-size: 1.8em;
+      cursor: pointer;
+      color: #777;
+      padding: 0 5px;
+      line-height: 1;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+
+  .flex-builder-config-modal-body {
+    flex-grow: 1;
+    overflow-y: auto; // Permettre le scroll si FlexBuilder est plus grand
+    padding: 0; // FlexBuilder a son propre padding
+
+    // Le composant FlexBuilder prendra toute la place ici
+    .flex-builder {
+      height: 100%; // Essayer de faire en sorte que FlexBuilder remplisse la modale
+      border: none; // Enlever la bordure par défaut de FlexBuilder s'il est dans une modale
+      border-radius: 0;
+      box-shadow: none;
+
+      .flex-builder-controls {
+        // Ajustements potentiels pour les contrôles dans la modale
+        height: 100%; // S'assurer qu'il prend toute la hauteur
+      }
+      .flex-builder-preview-area {
+         // Ajustements potentiels pour l'aperçu dans la modale
+         height: 100%;
+      }
+    }
+  }
+
+  .flex-builder-config-modal-footer {
+    padding: 15px 20px;
+    border-top: 1px solid #e0e0e0;
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    background-color: #f7f7f7;
+
+    button {
+      padding: 10px 20px;
+      font-size: 1em;
+      border-radius: 5px;
+      cursor: pointer;
+      border: none;
+    }
+    .btn-secondary {
+      background-color: #6c757d;
+      color: white;
+      &:hover {
+        background-color: #5a6268;
+      }
+    }
+    .btn-primary {
+      background-color: #007bff;
+      color: white;
+      &:hover {
+        background-color: #0056b3;
+      }
+    }
+  }
+}

package/client/src/FlexBuilderPreview.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { FlexNodeRenderer } from "./FlexNode.jsx";
+
+const FlexBuilderPreview = ({
+                                flexStructure,
+                                onSelectNode,
+                                selectedNodeId,
+                                filteredData,
+                                dataIndexRef,
+                                modelFields,
+                                dnd,
+                                onMoveNode
+                            }) => {
+    const { t } = useTranslation();
+
+    return (
+        <div className="flex-builder-preview-area">
+            <h3>{t('preview', 'Aperçu')}</h3>
+            <FlexNodeRenderer
+                node={flexStructure}
+                path={[]}
+                t={t}
+                onSelectNode={onSelectNode}
+                selectedNodeId={selectedNodeId}
+                data={filteredData}
+                dataIndexRef={dataIndexRef}
+                modelFields={modelFields}
+                dnd={dnd}
+                onMoveNode={onMoveNode}
+            />
+        </div>
+    );
+};
+
+FlexBuilderPreview.propTypes = {
+    flexStructure: PropTypes.object.isRequired,
+    onSelectNode: PropTypes.func.isRequired,
+    selectedNodeId: PropTypes.string,
+    filteredData: PropTypes.array.isRequired,
+    dataIndexRef: PropTypes.shape({ current: PropTypes.number }).isRequired,
+    modelFields: PropTypes.array.isRequired,
+    dnd: PropTypes.object.isRequired,
+    onMoveNode: PropTypes.func.isRequired,
+};
+
+export default FlexBuilderPreview;

package/client/src/FlexBuilderUtils.js

@@ -0,0 +1,84 @@
+
+
+
+// Helper to recursively remove a node. Returns { newStructure: object, removedNode: object | null }
+export const deepRemoveNode = (current, nodeIdToRemove) => {
+    let removedNodeInstance = null;
+
+    if (!current.children) {
+        return { newStructure: current, removedNode: null };
+    }
+
+    const newChildren = [];
+    let modifiedChildren = false;
+
+    for (const child of current.children) {
+        if (child.id === nodeIdToRemove) {
+            removedNodeInstance = child;
+            modifiedChildren = true;
+        } else {
+            if (child.type === 'container' || (child.type === 'item' && child.content?.type === 'nestedContainer')) {
+                const containerNode = child.type === 'container' ? child : child.content.nestedContainer;
+                const result = deepRemoveNode(containerNode, nodeIdToRemove);
+
+                if (result.removedNode) {
+                    removedNodeInstance = result.removedNode;
+                    modifiedChildren = true;
+                    if (child.type === 'container') {
+                        newChildren.push(result.newStructure);
+                    } else {
+                        newChildren.push({ ...child, content: { ...child.content, nestedContainer: result.newStructure } });
+                    }
+                } else {
+                    newChildren.push(child);
+                }
+            } else {
+                newChildren.push(child);
+            }
+        }
+    }
+
+    if (modifiedChildren) {
+        return { newStructure: { ...current, children: newChildren }, removedNode: removedNodeInstance };
+    }
+    return { newStructure: current, removedNode: null };
+};
+
+// Helper to recursively insert a node. Returns { newStructure: object, inserted: boolean }
+export const deepInsertNode = (current, targetParentId, nodeToInsert, index) => {
+    if (current.id === targetParentId) {
+        const currentChildren = current.children || [];
+        const newTargetChildren = [...currentChildren];
+        newTargetChildren.splice(index, 0, nodeToInsert);
+        return { newStructure: { ...current, children: newTargetChildren }, inserted: true };
+    }
+
+    if (!current.children) {
+        return { newStructure: current, inserted: false };
+    }
+
+    let opCompleted = false;
+    const newChildren = current.children.map(child => {
+        if (opCompleted) return child;
+
+        if (child.type === 'container' || (child.type === 'item' && child.content?.type === 'nestedContainer')) {
+            const containerNode = child.type === 'container' ? child : child.content.nestedContainer;
+            const result = deepInsertNode(containerNode, targetParentId, nodeToInsert, index);
+
+            if (result.inserted) {
+                opCompleted = true;
+                if (child.type === 'container') {
+                    return result.newStructure;
+                } else {
+                    return { ...child, content: { ...child.content, nestedContainer: result.newStructure } };
+                }
+            }
+        }
+        return child;
+    });
+
+    if (opCompleted) {
+        return { newStructure: { ...current, children: newChildren }, inserted: true };
+    }
+    return { newStructure: current, inserted: false };
+};

package/client/src/FlexDataRenderer.jsx

@@ -0,0 +1,170 @@
+// src/components/FlexDataRenderer.jsx
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import {FaCheckSquare, FaCopy, FaExternalLinkAlt, FaImage, FaRegSquare} from 'react-icons/fa';
+import './FlexDataRenderer.scss';
+import {useModelContext} from "./contexts/ModelContext.jsx";
+import RelationValue from "./RelationValue.jsx";
+import {CodeField, ColorField} from "./Field.jsx";
+import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {DialogProvider} from "./Dialog.jsx";
+
+// Helper for date formatting
+const formatDate = (value, type, t) => {
+    if (!value) return '';
+    try {
+        const date = new Date(value);
+        if (isNaN(date.getTime())) return t('flexDataRenderer.invalidDate', 'Date invalide');
+
+        // Adjust formatting as needed, or use a library like date-fns or moment
+        if (type === 'datetime-local' || type === 'datetime') {
+            return date.toLocaleString();
+        }
+        if (type === 'date') {
+            return date.toLocaleDateString();
+        }
+        return date.toISOString(); // Fallback
+    } catch (e) {
+        console.error("Error formatting date:", e);
+        return t('flexDataRenderer.invalidDate', 'Date invalide');
+    }
+};
+
+const FlexDataRenderer = ({ value, fieldDefinition,data }) => {
+    const { t, i18n } = useTranslation();
+    const {models} = useModelContext()
+    const {me} = useAuthContext()
+    // 'translatedLabel' is added by getFieldDefinitionByPath
+    const field = fieldDefinition;
+    const translatedLabel = t('model_'+field.name, field.name);
+
+    const renderContent = () => {
+
+        if (value === undefined || value === null) {
+            return <span className="data-value-empty">({t('flexDataRenderer.noValue', 'N/A')})</span>;
+        }
+        if( field.type === 'relation' && !models.find(f => f.name === field.relation && f._user === me?.username ))
+            return '';
+        if (field.type === "relation" && typeof field.relation === "string") {
+            return <RelationValue field={field} data={data}/>;
+        }
+        if ((field.type === "date" || field.type === "datetime") && value) {
+            return new Date(value).toLocaleDateString(i18n.resolvedLanguage || i18n.language, {
+                day: "numeric",
+                month: "numeric",
+                year: "numeric",
+                hour: "numeric",
+                minute: "numeric"
+            });
+        }
+        if (field.type === "enum") {
+            return field.items.includes(value) ? `${t(value, value)}` : `${value || ''}`;
+        }
+        if (field.type === "code") {
+            const v = typeof(value) === "string" ? value : (value ? JSON.stringify(value) : '');
+            return <CodeField language={field.language} name={field.name} value={v} disabled={true} />
+        }
+        if (field.type === "object") {
+            return <CodeField language={'json'} name={field.name} value={value ? JSON.stringify(value) : ''} disabled={true} />
+        }
+        if (field.type === 'email') {
+            return <a href={"mailto:"+value}>{value}</a>;
+        }
+        if (field.type === 'phone') {
+            return <a href={"tel:"+value}>{value}</a>;
+        }
+        if (field.type === 'model') {
+            return value;
+        }
+        if (field.type === 'password') {
+            return <></>;
+        }
+        if (field.type === 'array') {
+            let t;
+            if (field.itemsType === 'file') {
+                t = (value || []).map(it =>
+                    it &&
+                    <a key={it.guid} href={`/resources/${it.guid}`} target="_blank"
+                       rel="noopener noreferrer"><img src={`/resources/${it.guid}`}
+                                                      alt={`${it.name} (${it.guid})`}/></a>
+                );
+                return {t};
+            }
+            return value.join(', ');
+        }
+        if (field.type === 'url') {
+            return value && (<><a href={value}
+                                           title={value} style={{color: field.color}}
+                                           className={"link-value"}
+                                           target="_blank">{value}</a>
+                    <button title={"Copy URL"} onClick={(e) => {
+                        navigator.clipboard.writeText(value).then(function () {
+                            console.log('Async: Copying to clipboard was successful!');
+                        }, function (err) {
+                            console.error('Async: Could not copy text: ', err);
+                        });
+                    }}><FaCopy/></button>
+                </>)
+        }
+        if (field.type === "file" && value) {
+            if (['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/svg+xml', 'image/webp', 'image/bmp', 'image/tiff', 'image/x-icon', 'image/x-windows-bmp'].includes(value.type))
+                return <a
+                    href={`/resources/${value.guid}`} target="_blank"
+                    rel="noopener noreferrer"><img
+                    src={`/resources/${value.guid}`}
+                    alt={`${value.name} (${value.guid})`}/></a>;
+            return <a style={{color: field.color}}
+            href={`/resources/${value.guid}`}
+            target="_blank"
+            rel="noopener noreferrer">{value.name} ({value.guid})</a>;
+        }
+        if (field.type === 'number') {
+            let val = value;
+            if (val && field.unit) {
+                let formatter = new Intl.NumberFormat(lang);
+                val = formatter.format(value);
+            }
+            return val ? `${val} ${field.unit || ''}` : '';
+        }
+        if (field.type === "boolean") {
+            return value ? t('yes') : t('no');
+        }
+        if (field.type === 'string_t') {
+            return t(value.value, '') || value.key || (typeof(value) === 'string' ? value : '');
+        }
+        if (field.type === 'richtext') {
+            return <div className="rte-value"
+                     dangerouslySetInnerHTML={{__html: value}}></div>
+        }
+        if (field.type === 'color') {
+            return <ColorField name={field.name} disabled={true}
+                          value={value}/>;
+        }
+        return value;
+    };
+
+    return (
+        renderContent()
+    );
+};
+
+FlexDataRenderer.propTypes = {
+    value: PropTypes.any,
+    fieldDefinition: PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        labelKey: PropTypes.string,
+        label: PropTypes.string,
+        translatedLabel: PropTypes.string,
+        options: PropTypes.shape({
+            items: PropTypes.arrayOf(PropTypes.shape({
+                value: PropTypes.any.isRequired,
+                label: PropTypes.string.isRequired,
+                labelKey: PropTypes.string,
+            }))
+        }),
+    }).isRequired,
+};
+
+export default FlexDataRenderer;

package/client/src/FlexDataRenderer.scss

@@ -0,0 +1,80 @@
+// src/components/FlexDataRenderer.scss
+
+// Using the same overall structure as .data-badge for consistency.
+// Specific styles for the values rendered by FlexDataRenderer:
+
+.flex-data-renderer { // This class is on the same element as .data-badge
+  .data-badge-value {
+    // General container for the rendered value, if specific styling is needed here
+  }
+
+  .data-value-empty {
+    color: #9ca3af; // Tailwind gray-400
+    font-style: italic;
+  }
+
+  .data-value-boolean {
+    font-size: 1.1em; // Make icons slightly larger
+    &.true {
+      color: #10b981; // Tailwind green-500
+    }
+    &.false {
+      color: #6b7280; // Tailwind gray-500
+    }
+  }
+
+  .data-value-date {
+    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 0.95em;
+  }
+
+  .data-value-email,
+  .data-value-url {
+    color: #3b82f6; // Tailwind blue-500
+    text-decoration: none;
+    &:hover {
+      text-decoration: underline;
+    }
+    svg { // For the external link icon
+      margin-left: 0.25em;
+      font-size: 0.8em;
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  .data-value-image {
+    max-width: 120px; // Adjust as needed
+    max-height: 80px;  // Adjust as needed
+    height: auto;
+    display: block;
+    border: 1px solid #e5e7eb; // Tailwind gray-200
+    border-radius: 3px;
+    margin-top: 2px; // Small space if label is above
+  }
+
+  .data-value-color {
+    display: inline-flex;
+    align-items: center;
+    .color-swatch {
+      width: 1.2em;
+      height: 1.2em;
+      border: 1px solid #d1d5db; // Tailwind gray-300
+      margin-right: 0.5em;
+      display: inline-block;
+      border-radius: 2px;
+    }
+  }
+
+  .data-value-array {
+    // Custom styling for arrays if needed, e.g., tags
+    font-style: italic;
+    color: #4b5563; // Tailwind gray-600
+  }
+
+  .data-value-select,
+  .data-value-text,
+  .data-value-default {
+    // General text styling, if different from default .data-badge-value
+  }
+}