data-primals-engine 1.2.6 → 1.3.1

package/client/src/ModelCreatorField.jsx

@@ -74,11 +74,10 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                             }}
                             help={t('modelcreator.name.hint')}
                             required
+                            after={!(!modelLocked && isLocalUser(me) && field.locked) && !field._isNewField && (
+                                <Button type={"button"} className={"btn-form btn-last"}
+                            onClick={() => handleRenameField(index, field.name)}><FaEdit/></Button>)}
                         />
-                        {!(!modelLocked && isLocalUser(me) && field.locked) && !field._isNewField && (
-                            <Button type={"button"} className={"btn-form btn-last"}
-                                    onClick={() => handleRenameField(index, field.name)}><FaEdit/></Button>)}
-
                     </div>
 
                 </div>
@@ -284,7 +283,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.multiline}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].multiline = e.target.checked;
+                                            newFields[index].multiline = e;
                                             setFields(newFields);
                                         }}
                                         help={field.multiline && t('modelcreator.multiline.hint')}
@@ -373,7 +372,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     checked={field.multiple}
                                     onChange={(e) => {
                                         const newFields = [...fields];
-                                        newFields[index].multiple = e.target.checked;
+                                        newFields[index].multiple = e;
                                         setFields(newFields);
                                     }}
                                 /></div>
@@ -422,7 +421,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.required}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].required = e.target.checked;
+                                            newFields[index].required = e;
                                             setFields(newFields);
                                         }}
                                         help={field.required && t('modelcreator.required.hint')}
@@ -440,7 +439,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.unique}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].unique = e.target.checked;
+                                            newFields[index].unique = e;
                                             setFields(newFields);
                                         }}
                                         help={field.unique && t('modelcreator.unique.hint')}
@@ -449,11 +448,11 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                             </div>
 
                             {!['file', 'relation', 'array', 'calculated'].includes(field.type) && (<div
-                                className="flex flex-no-wrap field-bg mg-item">
+                                className="flex flex-no-wrap mg-item">
 
                                 {['string_t', 'string', 'richtext', 'password', 'url', 'phone', 'email'].includes(field.type) && (<>
                                     {hint('modelcreator.default.hint')}
-                                    <div className="flex flex-1">
+                                    <div className="flex flex-1 field-bg">
                                         <TextField
                                             className="flex-1"
                                             value={field.default}
@@ -522,7 +521,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                             disabled={modelLocked || (isLocalUser(me) && field.locked)}
                                             onChange={(e) => {
                                                 const newFields = [...fields];
-                                                newFields[index].default = e.target.checked;
+                                                newFields[index].default = e;
                                                 setFields(newFields);
                                             }}
                                         />
@@ -612,7 +611,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.condition !== undefined}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            if (e.target.checked) {
+                                            if (e) {
                                                 newFields[index].condition = null;
                                             } else {
                                                 delete newFields[index].condition;
@@ -701,7 +700,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.asMain}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].asMain = e.target.checked;
+                                            newFields[index].asMain = e;
                                             setFields(newFields);
                                         }}
                                         help={field.asMain && t('modelcreator.asMain.hint')}
@@ -752,7 +751,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                         checked={field.hiddenable}
                                         onChange={(e) => {
                                             const newFields = [...fields];
-                                            newFields[index].hiddenable = e.target.checked;
+                                            newFields[index].hiddenable = e;
                                             setFields(newFields);
                                         }}
                                         help={field.unique && t('modelcreator.hiddenable.hint')}
@@ -768,7 +767,7 @@ const ModelCreatorField = ({model, handleRenameField, handleRemoveField, handleU
                                     checked={field.anonymized}
                                     onChange={(e) => {
                                         const newFields = [...fields];
-                                        newFields[index].anonymized = e.target.checked;
+                                        newFields[index].anonymized = e;
                                         setFields(newFields);
                                     }}
                                 />

package/client/src/PackGallery.jsx

@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
 import {useMutation, useQuery, useQueryClient} from 'react-query';
 import { Trans, useTranslation } from 'react-i18next';
-import { FaBoxOpen, FaChevronLeft, FaDownload, FaStar, FaTag, FaUser } from 'react-icons/fa';
+import {FaBoxOpen, FaChevronLeft, FaDownload, FaPlus, FaStar, FaTag, FaUser} from 'react-icons/fa';
 import Button from './Button.jsx';
 import { useNotificationContext } from './NotificationProvider.jsx';
 import { useModelContext } from './contexts/ModelContext.jsx';
 
 import './PackGallery.scss';
 import {elementsPerPage} from "../../src/constants.js";
+import Markdown from "react-markdown";
+import {Dialog, DialogProvider} from "./Dialog.jsx";
+import {TextField} from "./Field.jsx";
 
 // --- API Fetching Functions ---
 const fetchPacks = async (sortBy, lang) => {
@@ -117,7 +120,8 @@ const PackDetail = ({ packId, onBack }) => {
             </div>
             <div className="pack-content">
                 <h2><Trans i18nKey="packs.description">Description</Trans></h2>
-                <div className="description-content" dangerouslySetInnerHTML={{__html: pack.description || ''}}/>
+
+                <div className="description-content"><Markdown>{pack.description}</Markdown></div>
 
                 <h2><Trans i18nKey="packs.modelsIncluded">Modèles inclus</Trans></h2>
                 <p>{renderModelsList(pack.models)}</p>
@@ -127,6 +131,8 @@ const PackDetail = ({ packId, onBack }) => {
                     <pre>{JSON.stringify(pack.data, null, 2)}</pre>
                 </div>
             </div>
+
+
         </div>
     );
 };
@@ -151,11 +157,15 @@ const installPackMutationFn = async ({packId, lang}) => {
 const PackGallery = () => {
     const { t, i18n } = useTranslation();
     const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
+    const { addNotification } = useNotificationContext();
 
+    const [showManualInstallDialog, setShowManualInstallDialog] = useState(false);
+    const [manualPackJson, setManualPackJson] = useState('');
     const [view, setView] = useState('list'); // 'list' ou 'detail'
     const [selectedPackId, setSelectedPackId] = useState(null);
     const [sortBy, setSortBy] = useState({ field: '_updatedAt', order: -1 });
 
+    const queryClient = useQueryClient()
     const { data: packs, isLoading, isError } = useQuery(['packs', sortBy], () => fetchPacks(sortBy, lang));
 
     const handleSelectPack = (packId) => {
@@ -163,6 +173,40 @@ const PackGallery = () => {
         setView('detail');
     };
 
+    const handleManualInstall = async () => {
+        try {
+            const packData = JSON.parse(manualPackJson.trim());
+            addNotification({ status: 'info', title: t('packs.install.started', `Installation du pack personnalisé...`) });
+
+            const response = await fetch('/api/packs/install', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ packData, lang }),
+            });
+
+            if (!response.ok) {
+                throw new Error(await response.text());
+            }
+
+            addNotification({
+                status: 'completed',
+                title: t('datatable.pack.install.success', 'Pack installé avec succès !')
+            });
+            setShowManualInstallDialog(false);
+            setManualPackJson('');
+            queryClient.invalidateQueries(['packs', sortBy]); // Rafraîchir la liste
+
+        } catch (error) {
+            addNotification({
+                status: 'error',
+                title: t('datatable.pack.install.error', `Échec de l'installation`),
+                message: error.message
+            });
+        }
+    };
+
     const handleBackToList = () => {
         setSelectedPackId(null);
         setView('list');
@@ -182,16 +226,52 @@ const PackGallery = () => {
             <>
                 <div className="gallery-header">
                     <h1><Trans i18nKey="packs.galleryTitle">Galerie de Packs</Trans></h1>
-                    <div className="sort-options">
-                        <span><Trans i18nKey="packs.sortBy">Trier par :</Trans></span>
-                        <Button onClick={() => setSortBy({ field: '_updatedAt', order: -1 })} className={sortBy.field === '_updatedAt' ? 'active' : ''}>
-                            <Trans i18nKey="packs.sort.lastUpdated">Derniers ajouts</Trans>
-                        </Button>
-                        <Button onClick={() => setSortBy({ field: 'stars', order: -1 })} className={sortBy.field === 'stars' ? 'active' : ''}>
-                            <Trans i18nKey="packs.sort.mostStarred">Plus populaires</Trans>
+                    <div className="header-actions">
+                        <div className="sort-options">
+                            <span><Trans i18nKey="packs.sortBy">Trier par :</Trans></span>
+                            <Button onClick={() => setSortBy({ field: '_updatedAt', order: -1 })} className={sortBy.field === '_updatedAt' ? 'active' : ''}>
+                                <Trans i18nKey="packs.sort.lastUpdated">Derniers ajouts</Trans>
+                            </Button>
+                            <Button onClick={() => setSortBy({ field: 'stars', order: -1 })} className={sortBy.field === 'stars' ? 'active' : ''}>
+                                <Trans i18nKey="packs.sort.mostStarred">Plus populaires</Trans>
+                            </Button>
+                        </div>
+                        <Button
+                            onClick={() => setShowManualInstallDialog(true)}
+                            className="add-pack-button"
+                        >
+                            <FaPlus /> <Trans i18nKey="packs.manualInstall">Importer</Trans>
                         </Button>
                     </div>
                 </div>
+                {showManualInstallDialog && (
+                    <DialogProvider>
+                        <Dialog
+                            isModal={true}
+                            onClose={() => setShowManualInstallDialog(false)}
+                            title={t('packs.manualInstall.title', 'Installation manuelle de pack')}
+                        >
+                            <div className="manual-install-dialog">
+                                <p>
+                                    <Trans i18nKey="packs.manualInstall.instructions">
+                                        Collez ici le JSON de configuration du pack que vous souhaitez installer.
+                                    </Trans>
+                                </p>
+                                <TextField
+                                    multiline={true}
+                                    value={manualPackJson}
+                                    onChange={(e) => setManualPackJson(e.target.value)}
+                                    placeholder={t('packs.manualInstall.placeholder', '{"name": "Mon Pack", "description": "...", "models": [...], "data": [...]}')}
+                                    rows={15}
+                                />
+                                <div className="flex actions right">
+                                    <Button onClick={() => setShowManualInstallDialog(false)}><Trans i18nKey={"btns.cancel"}>Annuler</Trans></Button>
+                                    <Button disabled={!manualPackJson.trim()} className="btn-primary" onClick={() => handleManualInstall()}><Trans i18nKey={"packs.install"}>Installer</Trans></Button>
+                                </div>
+                            </div>
+                        </Dialog>
+                    </DialogProvider>
+                )}
                 <div className="pack-list">
                     {packs.map(pack => (
                         <PackCard key={pack._id} pack={pack} onSelect={handleSelectPack} />

package/client/src/PackGallery.scss

@@ -7,20 +7,38 @@
 
   .gallery-header {
     display: flex;
+    flex-wrap: wrap;
+    gap: 1rem ;
     justify-content: space-between;
     align-items: center;
     padding-bottom: 1rem;
     border-bottom: 1px solid #e0e0e0;
     margin-bottom: 1rem;
+
     h1 {
       margin: 0;
+      flex: 1; // Permet au titre de prendre l'espace disponible
+      min-width: 200px; // Empêche le titre de devenir trop petit
     }
-    .sort-options {
+
+    .header-actions {
       display: flex;
-      gap: 0.5rem;
+      gap: 1rem;
       align-items: center;
-      .btn.active {
-        color: white;
+
+      .sort-options {
+        display: flex;
+        gap: 0.5rem;
+        align-items: center;
+        flex-wrap: wrap; // Pour le responsive
+
+        .btn.active {
+          color: white;
+        }
+      }
+
+      .add-pack-button {
+        white-space: nowrap; // Empêche le texte du bouton de se casser
       }
     }
   }
@@ -153,4 +171,40 @@
       }
     }
   }
+}
+
+// À ajouter à la fin de votre fichier CSS
+.manual-install-dialog {
+  width: 100%;
+
+  p {
+    margin-top: 0;
+    color: #666;
+    font-size: 0.9em;
+  }
+
+  textarea {
+    width: 100%;
+    padding: 1rem;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-family: monospace;
+    resize: vertical;
+    min-height: 300px;
+    background-color: #f9f9f9;
+    color: #333;
+
+    &:focus {
+      outline: none;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
+    }
+  }
+
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
 }

package/client/src/RTETrans.jsx

@@ -53,6 +53,16 @@ const RTETrans = ({ value, onChange, field }) => {
     };
     const languagesToAdd = availableLangs.filter(lang => !existingLangs.includes(lang.code));
 
+    const confirmDelete = (e, lang) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if( !confirm(t('rte.confirmLangDeletion', 'Confirm lang deletion ?')))
+            return;
+        const val = {...value};
+        delete val[lang];
+        onChange(val);
+        setActiveTab(Object.keys(val)[0]     || null);
+    }
     return (
         <div className="rte-trans-container">
             <div className="tabs-container flex items-center border-b border-gray-200">
@@ -64,6 +74,7 @@ const RTETrans = ({ value, onChange, field }) => {
                         title={availableLangs.find(f=>f.code===lang)?.name.value || ''}
                     >
                         {lang.toUpperCase()}
+                        <button onClick={(e) => confirmDelete(e, lang)}>x</button>
                     </button>
                 ))}
                 {languagesToAdd.length > 0 && (

package/client/src/RelationValue.jsx

@@ -187,8 +187,7 @@ const RelationValue = ({ field, data, align }) => {
                                         if (f.type === 'code') {
                                             let t;
                                             try {
-                                                 t = f.language === 'json' ? JSON.stringify(intVal[f.name], null, 2) : '';
-
+                                                t = f.language === 'json' ? JSON.stringify(intVal[f.name], null, 2) : t = intVal[f.name].toString();
                                             } catch (e) {
                                                 t = intVal[f.name].toString();
                                             }
@@ -196,8 +195,8 @@ const RelationValue = ({ field, data, align }) => {
                                                 <dt>{columnName} {span}</dt>
                                                 <dd>
                                                     <CodeField onChange={() => {
-                                                    }} language={field.language || 'json'}
-                                                               name={f.name} value={field.language === 'json' ? JSON.stringify(intVal[f.name], null, 2) : t} />
+                                                    }} language={f.language || 'json'}
+                                                               name={f.name} value={f.language === 'json' ? JSON.stringify(intVal[f.name], null, 2) : t}  />
                                                 </dd>
                                             </>;
                                         }

package/client/src/constants.js

@@ -65,7 +65,7 @@ export const OPERAND_TYPES = {
 
 
 export const getHost = () => {
-    return process.env.HOST || host || 'localhost';
+    return import.meta.env.HOST || host || 'localhost';
 }
 
 

package/client/src/core/data.js

@@ -1,4 +1,5 @@
-import {getHost, MONGO_OPERATORS} from "../constants.js";
+import { MONGO_OPERATORS} from "../constants.js";
+import {getHost} from "../../../src/constants";
 
 const isProd = import.meta.env.MODE === 'production';
 export const urlData = isProd ? 'https://'+getHost()+'/' : 'http://localhost:7633/';

package/client/src/hooks/useTutorials.jsx

@@ -195,7 +195,7 @@ export const useTutorials = () => {
 
     // Écoute les événements de modification de données pour vérifier la progression en arrière-plan.
     useEffect(() => {
-        const handleDataChange = (payload) => {
+        const handleDataChange = async (payload) => {
             console.log(`[Tutoriels] Événement de données reçu.`, payload);
             if (me?.activeTutorial) {
                 triggerTutorialCheck();