data-primals-engine 1.0.10 → 1.1.0

package/client/src/DataTable.scss

@@ -0,0 +1,73 @@
+/* client/src/index.css ou un fichier CSS dédié à DataImporter */
+
+.import-progress-container {
+  margin-top: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+}
+
+.import-progress-container h3 {
+  margin-bottom: 15px;
+  color: #333;
+}
+
+.import-progress-container p {
+  margin-bottom: 8px;
+  color: #555;
+}
+
+.progress-bar-wrapper {
+  width: 100%;
+  background-color: #e0e0e0;
+  border-radius: 5px;
+  overflow: hidden;
+  margin-top: 15px;
+  height: 25px; /* Hauteur de la barre de progression */
+}
+
+.progress-bar {
+  height: 100%;
+  background-color: #4CAF50; /* Couleur verte pour la progression */
+  text-align: center;
+  color: white;
+  line-height: 25px; /* Centrer le texte verticalement */
+  transition: width 0.5s ease-in-out; /* Transition douce pour l'animation de la barre */
+  border-radius: 5px;
+}
+
+.import-errors {
+  margin-top: 20px;
+  padding: 10px;
+  border: 1px solid #f44336; /* Bordure rouge pour les erreurs */
+  background-color: #ffebee; /* Fond rouge clair */
+  border-radius: 5px;
+}
+
+.import-errors h4 {
+  color: #d32f2f; /* Rouge plus foncé pour le titre des erreurs */
+  margin-bottom: 10px;
+}
+
+.import-errors ul {
+  list-style-type: disc;
+  margin-left: 20px;
+  color: #c62828; /* Rouge pour les éléments de liste */
+}
+
+.import-errors li {
+  margin-bottom: 5px;
+}
+
+/* Ajustements pour le bouton de fermeture */
+.flex.justify-end.mt-4 button {
+  padding: 8px 15px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.flex.justify-end.mt-4 button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}

package/client/src/Dialog.jsx

@@ -0,0 +1,90 @@
+import Button from "./Button.jsx";
+import { FaWindowClose } from "react-icons/fa";
+
+import "./Dialog.scss";
+import { createContext, useContext, useEffect, useState } from "react";
+import {useUI} from "./contexts/UIContext.jsx";
+
+const DialogContext = createContext({});
+
+export const useDialogContext = () => useContext(DialogContext);
+
+export const DialogProvider = ({ children }) => {
+  const [dialogs, setDialogs] = useState(0);
+  const { locked, setLocked } = useUI()
+  const values = {
+    addDialog: () => setDialogs((dialogs) => dialogs + 1),
+    removeDialog: () =>
+      setDialogs((dialogs) => {
+        return dialogs > 0 ? dialogs - 1 : 0;
+      }),
+  };
+  useEffect(() => {
+    if( dialogs === 0){
+      setLocked(false);
+    }else{
+      setLocked(true);
+    }
+  }, [dialogs]);
+  return (
+    <DialogContext.Provider value={values}>
+      {dialogs > 0 ? (
+        <>
+          <div className="dialog-bg"></div>
+          {children}
+        </>
+      ) : (
+        children
+      )}
+    </DialogContext.Provider>
+  );
+};
+export const Dialog = ({
+  title,
+  children,
+  className,
+  onClose,
+  isClosable,
+  isModal,
+}) => {
+  const [showModal, setModalVisible] = useState(true);
+  const { addDialog, removeDialog } = useDialogContext();
+  const handleClose = () => {
+    setModalVisible(false);
+    onClose?.();
+    removeDialog();
+  };
+  const clickEvent = (e) => {
+
+    if( !e.target.closest('.dialog') && !e.target.closest('.notification') ){
+      onClose?.();
+    }
+  };
+  useEffect(() => {
+    addDialog();
+    document.addEventListener('mousedown', clickEvent);
+    return () => {
+      removeDialog();
+      document.removeEventListener('mousedown', clickEvent);
+    }
+  }, [addDialog, removeDialog]);
+  return showModal ? (
+    <div
+        aria-modal={true}
+        aria-label={title}
+      className={`${className ? className : ""} dialog ${isModal ? "dialog-modal" : ""}`}
+    >
+      <div className="dialog-header">
+        {title && <h2>{title}</h2>}
+        {isClosable && (
+          <Button className={"btn btn-close"} onClick={handleClose}>
+            <FaWindowClose />
+          </Button>
+        )}
+      </div>
+      <div className="dialog-content">{children}</div>
+    </div>
+  ) : (
+    <></>
+  );
+};

package/client/src/Dialog.scss

@@ -0,0 +1,117 @@
+
+.dialog-bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10000;
+  pointer-events: none;
+  background-color: rgba(59, 59, 59, 0.51);
+}
+
+#content .dialog {
+  box-sizing: border-box;
+  filter: opacity(1);
+  pointer-events: all;
+  position: fixed;
+  overflow: visible;
+  z-index: 10000;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #F8F8F8;
+  border: 1px solid #DDDDDD;
+  border-radius: 8px;
+  color: black;
+  width: 90%;
+  max-width: 1024px;
+  min-width: 320px;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+  text-align: left;
+
+}
+
+.dialog .actions {
+  justify-content: flex-end;
+}
+
+.dark .dialog {
+    background-color: #191919;
+    color: #e3e3e3;
+}
+
+#content .dialog.dialog-relation {
+  max-width: 480px;
+}
+.dialog-header {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-start;
+  border: none;
+  border-bottom: 1px solid #E2E2E2;
+  h2 {
+    display: flex;
+    flex: 1;
+    padding: 0px;
+    margin: 0 0 0 16px;
+    font-size: 100%;
+    line-height: 208%;
+  }
+  .btn {
+    display: flex;
+    justify-self: flex-end;
+    &.btn-close  {
+      position: absolute;
+      right: 0px;
+    }
+  }
+}
+
+#ui .dialog-content {
+  padding: 16px;
+  cursor: auto;
+  word-wrap: break-word;
+  max-height: 85vh;
+  overflow-y: auto;
+  > .field {
+    margin: 0;
+  }
+}
+table {
+  width: 100%;
+  border: 1px solid #DDDDDD;
+  border-collapse: collapse;
+  td,th {
+    padding: 3px;
+    @media only screen and (min-width: 480px) {
+      padding: 5px;
+    }
+    &.mini {
+      cursor: pointer;
+      min-width: auto;
+      width: 40px;
+    }
+  }
+  thead tr {
+    background-color: #F1F1F1;
+    font-weight: lighter;
+  }
+  tbody tr {
+  }
+  @media only screen and (max-width: 480px){
+    font-size: 80%;
+  }
+}
+.dark table {
+  thead tr {
+    background-color: #191919;
+    color: #e3e3e3;
+  }
+  tbody tr {
+    background-color: #191919;
+  }
+  td,th {
+    border: 1px solid #3f3f3f;
+  }
+}

package/client/src/DisplayFlexNodeRenderer.jsx

@@ -0,0 +1,115 @@
+// C:/Dev/hackersonline-engine/client/src/DisplayFlexNodeRenderer.jsx
+import {useTranslation} from "react-i18next";
+import {cssProps} from "data-primals-engine/core";
+import FlexDataRenderer from "./FlexDataRenderer.jsx";
+import React from "react";
+import {getFieldPathValue} from "data-primals-engine/data";
+import {getFieldDefinitionFromPath} from "./core/data.js";
+
+const DisplayFlexNodeRenderer = ({ node, data, dataIndexRef, allModels, baseModelFields, model }) => {
+    const { t } = useTranslation();
+
+    const baseStyle = node.type === 'container' ? node.containerStyle : node.itemStyle;
+    // MODIFICATION: Correction pour appliquer le CSS custom sur les items aussi
+    const customCssStyle = (node.type === 'container' ? node.containerStyle?.customCss : node.itemStyle?.customCss) || '';
+    const customStyle = customCssStyle ? cssProps(customCssStyle) : {};
+    const nodeStyle = { ...baseStyle, border: 'none', ...customStyle };
+
+    if (node.type === 'container') {
+        return (
+            <div
+                className="flex-node preview-container"
+                style={nodeStyle}
+            >
+                {node.children.length === 0 && <div className="empty-container-placeholder">{t('flexBuilder.emptyContainer', 'Conteneur vide.')}</div>}
+                {node.children.map((child) => (
+                    <DisplayFlexNodeRenderer
+                        key={child.id || `flex-child-${Math.random()}`}
+                        node={child}
+                        data={data}
+                        dataIndexRef={dataIndexRef}
+                        allModels={allModels}
+                        baseModelFields={baseModelFields}
+                        model={model}
+                    />
+                ))}
+            </div>
+        );
+    } else if (node.type === 'item') {
+        let contentToRender;
+
+        if (node.content.type === 'dataField' && node.content.mapping) {
+            const dataItem = data && data.length > 0 ? data[dataIndexRef.current % data.length] : null;
+            let fieldValue;
+            let valueStatus = 'ok';
+
+            if (dataItem) {
+                fieldValue = getFieldPathValue(dataItem, node.content.mapping.fieldPath);
+                if (fieldValue === undefined || fieldValue === null) {
+                    valueStatus = 'valueNotFound';
+                }
+            } else {
+                valueStatus = 'noDataAvailable';
+            }
+
+            const fieldDefinition = getFieldDefinitionFromPath(
+                node.content.mapping.fieldPath,
+                model,
+                allModels
+            );
+
+            if (valueStatus === 'ok' && fieldDefinition) {
+                contentToRender = (
+                    <FlexDataRenderer
+                        value={fieldValue}
+                        data={dataItem}
+                        fieldDefinition={fieldDefinition}
+                    />
+                );
+            } else {
+                const placeholderLabel = fieldDefinition?.translatedLabel || node.content.mapping.displayName || node.content.mapping.fieldPath;
+                if (valueStatus === 'valueNotFound') {
+                    contentToRender = null;
+                } else if (valueStatus === 'noDataAvailable') {
+                    contentToRender = <span className="preview-item-content-placeholder">{t('flexDataRenderer.noDataFor', '{{label}}: (pas de données)', { label: placeholderLabel })}</span>;
+                } else {
+                    contentToRender = <span className="preview-item-content-placeholder error">{t('flexDataRenderer.missingDefFor', '{{label}}: (erreur/déf. manquante)', { label: placeholderLabel })}</span>;
+                }
+            }
+            dataIndexRef.current++;
+        } else if (node.content.type === 'nestedContainer' && node.content.nestedContainer) {
+            contentToRender = (
+                <DisplayFlexNodeRenderer
+                    node={node.content.nestedContainer}
+                    data={data}
+                    dataIndexRef={dataIndexRef}
+                    allModels={allModels}
+                    baseModelFields={baseModelFields}
+                    model={model}
+                />
+            );
+        } else if (node.content.type === 'richtext' && node.content.html) {
+            // --- NOUVEAU : GESTION DU RICHTEXT ---
+            contentToRender = (
+                <div className="richtext-content" dangerouslySetInnerHTML={{ __html: node.content.html }} />
+            );
+        } else {
+            contentToRender = (
+                <span className="preview-item-content-placeholder">
+                    {/* Placeholder pour les autres types ou les items non configurés */}
+                </span>
+            );
+        }
+        return (
+            contentToRender && <div
+                className={`flex-node preview-item ${node.content.type === 'dataField' ? 'is-data-badge-item' : ''} ${node.content.type === 'richtext' ? 'is-richtext-item' : ''}`}
+                style={nodeStyle}
+                title={node.content.type === 'dataField' && node.content.mapping ? `${t('mappedTo')} ${node.content.mapping.displayName}` : ''}
+            >
+                {contentToRender}
+            </div>
+        );
+    }
+    return null;
+};
+export { DisplayFlexNodeRenderer};

package/client/src/DocumentationPageLayout.jsx

@@ -0,0 +1,93 @@
+// C:/Dev/hackersonline-engine/client/src/DocumentationPageLayout.jsx
+import React from 'react';
+import { Outlet } from 'react-router-dom';
+import './DocumentationPageLayout.scss'; // Nous créerons ce fichier SCSS ensuite
+// C:/Dev/hackersonline-engine/client/src/DocumentationMenu.jsx
+import { NavLink } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { FaChevronDown, FaChevronRight } from 'react-icons/fa';
+
+const DocMenuGroup = ({ title, children, initialOpen = true }) => {
+    const [isOpen, setIsOpen] = React.useState(initialOpen);
+
+    return (
+        <div className="doc-menu-group">
+            <button onClick={() => setIsOpen(!isOpen)} className="doc-menu-group-title">
+                {isOpen ? <FaChevronDown /> : <FaChevronRight />}
+                <span>{title}</span>
+            </button>
+            {isOpen && <ul className="doc-menu-sublist">{children}</ul>}
+        </div>
+    );
+};
+
+const DocumentationMenu = () => {
+    const { t } = useTranslation();
+
+    // Définissez ici votre structure de menu
+    // Vous pouvez la rendre plus dynamique si nécessaire, par exemple en la chargeant depuis un JSON
+    const menuItems = [
+        {
+            title: t('doc.menu.gettingStarted', 'Bien commencer'),
+            links: [
+                { path: '/documentation/getting-started', label: t('doc.menu.welcome', 'Les bases') },
+                { path: '/documentation/concepts/model-vs-data', label: t('doc.menu.modelVsData', 'Modèles vs. Données') },
+            ],
+        },
+        {
+            title: t('doc.menu.data', 'Concevez votre application'),
+            links: [
+                { path: '/documentation/modeling/creating-models', label: t('doc.menu.creatingModels', 'Créer un modèle') },
+                // Ajoutez d'autres liens ici: Types de champs, Relations
+            ],
+        },
+        {
+            title: t('doc.menu.apiUsage', 'Utiliser l\'API'),
+            links: [
+                { path: '/documentation/api/guide', label: t('doc.menu.apiGuide', 'Documentation de l\'API') },
+                // Pour lister dynamiquement les modèles pour API Reference :
+                // Vous pourriez récupérer la liste des modèles via useModelContext ici
+                // et générer des liens comme `/documentation/api/reference/${model.name}`
+                // Exemple (simplifié, à adapter) :
+                // ...models.map(model => ({ path: `/documentation/api/reference/${model.name}`, label: model.name }))
+            ],
+        }
+    ];
+
+    return (
+        <nav className="documentation-menu">
+            {menuItems.map((group, index) => (
+                <DocMenuGroup key={index} title={group.title} initialOpen={index === 0}> {/* Ouvre le premier groupe par défaut */}
+                    {group.links.map((link, linkIndex) => (
+                        <li key={linkIndex}>
+                            <NavLink
+                                to={link.path}
+                                className={({ isActive }) => (isActive ? 'doc-menu-item active' : 'doc-menu-item')}
+                            >
+                                {link.label}
+                            </NavLink>
+                        </li>
+                    ))}
+                </DocMenuGroup>
+            ))}
+        </nav>
+    );
+};
+
+const DocumentationPageLayout = ({ topBarMenu }) => {
+    return (
+        <>
+            {topBarMenu} {/* Affiche la barre de menu supérieure globale */}
+            <div className="documentation-layout">
+                <aside className="documentation-sidebar">
+                    <DocumentationMenu />
+                </aside>
+                <main className="documentation-content">
+                    <Outlet /> {/* Affiche le contenu de la page de documentation active */}
+                </main>
+            </div>
+        </>
+    );
+};
+
+export default DocumentationPageLayout;