data-primals-engine 1.0.10 → 1.1.0

package/client/src/Dashboard.jsx

@@ -0,0 +1,210 @@
+// C:/Dev/hackersonline-engine/client/src/Dashboard.jsx
+import React, {useState, useMemo, useEffect} from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import {FaPlus, FaSpinner} from "react-icons/fa"; // Ajout FaTrash
+
+import "./Dashboard.scss"
+import {useMutation, useQuery, useQueryClient} from "react-query";
+import { useAuthContext } from "./contexts/AuthContext.jsx";
+import { SelectField } from "./Field.jsx";
+import {DashboardView} from "./DashboardView.jsx";
+import {useModelContext} from "./contexts/ModelContext.jsx";
+import {useParams, useSearchParams} from "react-router-dom";
+import {getObjectHash} from "data-primals-engine/core";
+import {getUserHash, getUserId} from "data-primals-engine/data";
+
+// --- DashboardsPage (Reste inchangé) ---
+export function DashboardsPage() {
+    const { setSelectedModel }  = useModelContext()
+    const { t } = useTranslation();
+    const { me } = useAuthContext();
+    const [selectedDashboardId, setSelectedDashboardId] = useState(null);
+
+    const [ searchParams, setSearchParams ] = useSearchParams();
+    const { hash } = useParams(); // 2. Récupérer le hash de l'URL
+
+// ... après les autres hooks useState, useQuery, etc.
+    const queryClient = useQueryClient();
+    const [newDashboardName, setNewDashboardName] = useState('');
+    const [isCreating, setIsCreating] = useState(false); // <-- AJOUTEZ CETTE LIGNE
+
+    const createDashboardMutation = useMutation(
+        async (dashboardName) => {
+            const isFirstDashboard = !dashboardsData?.data || dashboardsData.data.length === 0;
+            const response = await fetch('/api/data', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    model: 'dashboard',
+                    data: { name: dashboardName, isDefault: isFirstDashboard } // Le premier est défini par défaut
+                })
+            });
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.error || t('dashboards.errorCreate', 'Impossible de créer le tableau de bord'));
+            }
+            return response.json();
+        },
+        {
+            onSuccess: () => {
+                // Rafraîchit la liste des dashboards après la création
+                queryClient.invalidateQueries(['userDashboards', me?.username]);
+                setNewDashboardName('');
+                setIsCreating(false);
+            },
+            onError: (error) => {
+                // Idéalement, afficher une notification à l'utilisateur
+                console.error("Erreur lors de la création du dashboard:", error);
+            }
+        }
+    );
+
+    const handleCreateDashboard = (e) => {
+        e.preventDefault();
+        if (newDashboardName.trim()) {
+            createDashboardMutation.mutate(newDashboardName.trim());
+        }
+    };
+    const { data: dashboardsData, isLoading: isLoadingDashboards, error: errorDashboards } = useQuery(
+        ['userDashboards', me?.username],
+        async () => {
+            if (!me?.username) return null;
+            const response = await fetch(
+                `/api/data/search?model=dashboard&_user=${me.username}`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    // body: JSON.stringify({ sort: { name: 1 } }) // Optionnel: trier
+                });
+            if (!response.ok) {
+                const res = await response.json();
+                throw new Error(res.error || t('dashboards.errorList', 'Erreur chargement des tableaux de bord'));
+            }
+            return await response.json();
+        },
+        {
+            enabled: !!me?.username
+        }
+    );
+    const [isLoading, setIsLoading] = useState(true);
+
+    // 3. Ce useEffect trouve le bon dashboard quand le hash ou la liste change
+    useEffect(() => {
+        if (dashboardsData?.data.length > 0) {
+            if( hash ) {
+                const foundDashboard = dashboardsData?.data.find(d => d._hash+'' === hash);
+                setSelectedDashboardId(foundDashboard?._id || null); // Met à jour avec le dashboard trouvé ou null
+            }else{
+                const defaultDashboard = dashboardsData?.data.find(db => db.isDefault === true);
+                if( !defaultDashboard) {
+                    setSelectedDashboardId(dashboardsData.data[0]._id);
+                }else
+                    setSelectedDashboardId(defaultDashboard._id || null);
+            }
+        }
+        setIsLoading(false);
+    }, [hash,dashboardsData]);
+    const selectedDashboard = useMemo(() => {
+        if (!selectedDashboardId || !dashboardsData?.data) return null;
+        return dashboardsData.data.find(db => db._id === selectedDashboardId);
+    }, [selectedDashboardId, dashboardsData]);
+
+    const dashboardOptions = useMemo(() => {
+        return (dashboardsData?.data || []).map(db => ({
+            label: db.name + (db.isDefault ? ` (${t('dashboards.default', 'Défaut')})` : ''),
+            value: db._id
+        }));
+    }, [dashboardsData, t]);
+
+    useEffect(() => {
+        setSelectedModel(null)
+    }, []);
+
+
+    if (isLoading) {
+        return <div>{t('loading', 'Chargement...')}</div>;
+    }
+
+    if (!selectedDashboardId && hash) {
+        return (
+            <div className="dashboard-not-found">
+                <h2>{t('dashboards.notFound', 'Dashboard non trouvé')}</h2>
+                <p>{t('dashboards.notFoundHelp', 'Le dashboard avec l\'identifiant "{{0}}" n\'existe pas ou vous n\'y avez pas accès.',[hash] )}</p>
+            </div>
+        );
+    }
+
+    const creationForm = (
+        <form onSubmit={handleCreateDashboard} className="create-dashboard-form flex flex-start mg-v-1">
+            <input
+                type="text"
+                className="input-fit"
+                value={newDashboardName}
+                onChange={(e) => setNewDashboardName(e.target.value)}
+                placeholder={t('dashboards.newName', 'Nom du nouveau tableau de bord')}
+                disabled={createDashboardMutation.isLoading}
+                autoFocus
+            />
+            <button type="submit" className="btn" disabled={createDashboardMutation.isLoading || !newDashboardName.trim()}>
+                {createDashboardMutation.isLoading
+                    ? <><FaSpinner className="spin" /> <Trans i18nKey="creating">Création...</Trans></>
+                    : <Trans i18nKey="btns.create">Créer</Trans>
+                }
+            </button>
+            {/* Bouton pour annuler quand on a cliqué sur le "+" */}
+            {isCreating && (
+                <button type="button" className="btn" onClick={() => setIsCreating(false)}>
+                    <Trans i18nKey="btns.cancel">Annuler</Trans>
+                </button>
+            )}
+        </form>
+    );
+
+    return (
+        <div className="dashboards-page">
+            <h1>{t('dashboards.title', 'Mes Tableaux de Bord')}</h1>
+
+            {isLoadingDashboards && (
+                <p><FaSpinner className="spin" /> <Trans i18nKey="dashboards.loadingList">Chargement des tableaux de bord...</Trans></p>
+            )}
+
+            {errorDashboards && (
+                <p className="error">{errorDashboards.message}</p>
+            )}
+
+            {!isLoadingDashboards && !errorDashboards && (
+                <>
+                    {dashboardsData?.data && dashboardsData.data.length > 0 ? (
+                        <div className="dashboard-selector-container">
+                            <div className="dashboard-selector flex" style={{ alignItems: 'flex-end', gap: '8px' }}>
+                                <SelectField
+                                    name="dashboardSelection"
+                                    label={t('dashboards.select', 'Choisir un tableau de bord :')}
+                                    value={selectedDashboardId}
+                                    onChange={(selectedOption) => {
+                                        setSelectedDashboardId(selectedOption.value);
+                                        const d = dashboardsData.data.find(f => f._id === selectedOption.value);
+                                        history.pushState({}, null, '/user/'+getUserHash(me)+'/dashboards/'+d._hash);
+                                    }}
+                                    items={dashboardOptions}
+                                />
+                                <button onClick={() => setIsCreating(true)} className="btn" title={t('dashboards.add', 'Ajouter un tableau de bord')}>
+                                    <FaPlus />
+                                </button>
+                            </div>
+                            {isCreating && creationForm}
+                        </div>
+                    ) : (
+                        <>
+                            <p><Trans i18nKey="dashboards.noDashboards">Aucun tableau de bord trouvé. Vous pouvez en créer un.</Trans></p>
+                            {creationForm}
+                        </>
+                    )}
+
+                    {/* Affiche la vue du dashboard sélectionné */}
+                    {/* Passe l'objet dashboard complet */}
+                    <DashboardView dashboard={selectedDashboard} />
+                </>
+            )}
+        </div>
+    );
+}

package/client/src/Dashboard.scss

@@ -0,0 +1,445 @@
+@import "_variables.scss"; // Importer tes variables
+.dashboards-page {
+  padding: 16px;
+}
+.dashboard-view {
+  .kpi-grid {
+    display: grid;
+    // Ajuste minmax pour la largeur minimale/maximale des KPIs
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px; // Espace entre les KPIs
+    margin-top: 20px;
+  }
+
+  .add-buttons-inline {
+    display: flex;
+    gap: 8px;
+    align-self: center;
+  }
+  .add-chart-button, .add-kpi-button {
+    // Style pour le bouton d'ajout
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 15px;
+    border: 2px dashed $medium-gray; // Style pointillé
+    border-radius: 8px;
+    background-color: $light-gray;
+    color: $dark-gray;
+    cursor: pointer;
+    transition: background-color 0.2s, border-color 0.2s;
+
+    &:hover {
+      background-color: darken($light-gray, 5%);
+      border-color: $primary-color;
+      color: $primary-color;
+    }
+  }
+}
+
+// ... (styles existants du KPIWidget) ...
+
+.kpi-widget {
+  position: relative; // Nécessaire pour positionner le bouton remove
+  text-align: right;
+  padding: 24px;
+
+  min-width: 240px;
+  .kpi-title {
+    display: flex; /* Aligner nom et icône info */
+    align-items: center;
+  }
+  .kpi-content {
+    padding-left: 24px;
+  }
+  .kpi-title {
+    display: flex;
+    justify-content: right;
+  }
+  .kpi-info {
+    outline: 1px solid transparent;
+    margin-left: 5px;
+    cursor: help;
+    opacity: 0.7;
+    &:hover {
+      outline: 1px solid gray;
+    }
+    width: 24px;
+    height: 24px;
+    text-align: center;
+  }
+  .kpi-remove-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    padding: 3px;
+    line-height: 1;
+    border-radius: 50%;
+    opacity: 0.5; // Moins visible par défaut
+    transition: opacity 0.2s, color 0.2s;
+
+    &:hover {
+      color: $danger-color; // Rouge au survol
+      opacity: 1;
+    }
+  }
+
+  &:hover .kpi-remove-button {
+    opacity: 1; // Rendre visible au survol du widget
+  }
+
+  .kpi-value-number {
+    font-size: 240%;
+    padding: 4px;
+  }
+
+  .kpi-icon {
+    position: absolute;
+    font-size: 340%;
+    bottom: 6px;
+    left: 24px;
+  }
+
+  /* Dans votre fichier CSS global ou spécifique aux composants */
+
+  .kpi-value-with-total .kpi-main-value {
+    /* Style pour la valeur principale si nécessaire */
+    font-weight: bold; /* Exemple */
+  }
+
+  .kpi-value-with-total .kpi-separator {
+    opacity: 0.8;
+    margin: 0 0.2em; /* Un peu d'espace autour du slash */
+  }
+
+  .kpi-value-with-total .kpi-total-value {
+    font-size: 0.85em; /* Rur le total */
+    opacity: 0.9;
+  }
+
+  .kpi-percentage {
+    font-weight: bold; /* Mettre le pourcentage en gras par exemple */
+  }
+
+  .kpi-value-simple .kpi-value-number {
+    /* Style pour le nombre seul si nécessaire */
+  }
+
+  .kpi-unit-suffix {
+    margin-left: 0.2em; /* Espace avant l'unité */
+    font-size: 1.4em;
+    opacity: 0.8;
+  }
+
+  .kpi-error {
+    color: red; /* Ou une couleur adaptée à votre thème */
+    font-weight: bold;
+  }
+
+  .kpi-loading {
+    opacity: 0.7;
+  }
+
+  .kpi-value-nodata {
+    opacity: 0.7;
+  }
+
+  .kpi-widget:hover .kpi-remove-button {
+    opacity: 1;
+  }
+
+  .kpi-remove-button:hover {
+    background: rgba(0, 0, 0, 0.3);
+  }
+
+}
+
+.dashboard-sections {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+      .dashboard-section {
+        border: 1px solid #e0e0e0;
+        padding: 1rem;
+        border-radius: 4px;
+        position: relative; // Pour positionner le bouton de suppression
+    
+          .section-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1rem;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 0.5rem;
+      
+              .section-title {
+                flex-grow: 1;
+                margin: 0;
+                padding: 0.25rem 0; // Un peu d'espace pour cliquer/éditer
+                border-radius: 3px;
+                cursor: text; // Indique qu'on peut cliquer
+        
+                  &:focus, &.editing {
+                    outline: 2px solid dodgerblue; // Mise en évidence lors de l'édition
+                    background-color: #f0f8ff;
+                    cursor: initial;
+                  }
+              }
+      
+              .edit-section-name-button {
+                background: none;
+                border: none;
+                color: #666;
+                cursor: pointer;
+                padding: 0.25rem;
+                  &:hover {
+                    color: #333;
+                  }
+              }
+          }
+    
+          .kpi-grid {
+            // ... (styles existants pour kpi-grid)
+          }
+    
+          .remove-section-button {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            background: none;
+            border: none;
+            color: #aaa;
+            cursor: pointer;
+            font-size: 0.9em;
+            padding: 0.25rem;
+      
+              &:hover {
+                color: red;
+              }
+          }
+    
+          .empty-section-message {
+            color: #888;
+            font-style: italic;
+            text-align: center;
+            padding: 1rem 0;
+          }
+      }
+}
+// C:/Dev/hackersonline-engine/client/src/Dashboard.scss
+// ... (autres styles existants) ...
+
+// Styles pour les badges de données dans FlexView
+.flex-view-content-wrapper {
+  // Style pour le conteneur de chaque "carte" répétée
+  // Chaque DisplayFlexNodeRenderer généré par le .map() sera un enfant direct ici.
+  // Vous pouvez ajouter des styles pour espacer les cartes, leur donner des bordures, etc.
+  // Par exemple, pour que chaque carte (chaque instance de flexStructure) soit distincte :
+  & > .flex-node.preview-container { // Cible la racine de chaque structure Flex répétée
+    border: 1px solid #e0e0e0;
+    padding: 15px;
+    border-radius: 4px;
+    background-color: #fff;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  }
+}
+
+.preview-item.is-data-badge-item {
+  // Styles spécifiques pour les cases qui contiennent un data-badge
+  // Par défaut, preview-item a déjà display: flex, align-items: center, justify-content: center
+  // On peut vouloir ajuster ça pour les badges
+  align-items: flex-start; // Aligner les badges en haut de la case
+  justify-content: flex-start; // Aligner les badges à gauche de la case
+  padding: 5px; // Réduire un peu le padding interne de la case si besoin
+}
+
+.data-badge {
+  display: inline-flex; // Pour que le label et la valeur soient sur la même ligne par défaut
+  align-items: baseline; // Aligner le texte du label et de la valeur
+  padding: 4px 8px;
+  border: 1px solid #d1d5db; // Gris clair
+  border-radius: 4px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+  background-color: #f9fafb; // Fond très clair
+  font-size: 0.9em;
+  margin: 2px; // Petit espacement si plusieurs badges sont dans la même case (si la case elle-même est un flex container)
+  width: 100%; // Pour que le badge prenne la largeur de la case
+  box-sizing: border-box;
+
+  .data-badge-label {
+    font-weight: 600; // Semi-bold pour le libellé
+    color: #374151; // Gris foncé
+    margin-right: 6px; // Espace entre le libellé et la valeur
+    white-space: nowrap; // Empêcher le libellé de passer à la ligne trop vite
+  }
+
+  .data-badge-value {
+    color: #1f2937; // Gris un peu plus foncé pour la valeur
+    word-break: break-word; // Permettre à la valeur de passer à la ligne si elle est longue
+
+    .data-badge-novalue,
+    .data-badge-nodata {
+      color: #9ca3af; // Gris plus clair pour les messages d'absence de données
+      font-style: italic;
+    }
+  }
+}
+
+// Si vous voulez que les badges s'empilent verticalement dans une case,
+// et que chaque badge prenne toute la largeur :
+.preview-item.is-data-badge-item {
+  // Si la case (preview-item) est un conteneur flex pour ses enfants (les data-badges)
+  // et que vous voulez que les badges s'empilent verticalement :
+  // display: flex; // Déjà défini sur preview-item
+  // flex-direction: column; // Empiler verticalement
+  // align-items: stretch; // Étirer les badges sur la largeur
+
+  // Si la case n'est pas un conteneur flex pour ses enfants directs (les data-badges)
+  // ou si vous voulez simplement que chaque badge soit sur sa propre ligne :
+  .data-badge {
+    display: flex; // Pour un meilleur contrôle interne du badge
+    // width: 100%; // Déjà défini ci-dessus, assure que le badge prend la largeur
+    margin-bottom: 5px; // Espace entre les badges s'ils s'empilent
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+
+.empty-data-message {
+  padding: 20px;
+  text-align: center;
+  color: #6b7280; // Gris moyen
+  font-style: italic;
+  border: 1px dashed #d1d5db;
+  border-radius: 4px;
+  margin-top: 10px;
+}
+
+.loading-overlay-flexview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  font-size: 1.2em;
+  color: #333;
+  .spin {
+    margin-right: 10px;
+  }
+}
+
+.flex-view-placeholder {
+  padding: 20px;
+  text-align: center;
+  color: #6b7280;
+  border: 1px dashed #d1d5db;
+  border-radius: 4px;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  &.error {
+    color: #ef4444; // Rouge pour les erreurs
+    border-color: #ef4444;
+  }
+  .spin {
+    margin-right: 8px;
+  }
+}
+
+.flex-view-content-wrapper{
+  display: flex;
+  flex-wrap: wrap;
+  gap:16px;
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-node{
+  margin: 0;
+  max-width: 480px;
+  .relation-value{
+      padding: 6px 10px;
+      border-radius: 20px;
+  }
+}
+// Styles pour les wrappers d'items dans le dashboard
+.dashboard-item-wrapper {
+  position: relative; // Pour les boutons d'action
+  border: 1px solid #e5e7eb; // Bordure légère
+  border-radius: 6px;
+  // box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); // Ombre subtile
+  display: flex; // Pour que le contenu flex s'ende bien
+  flex-direction: column; // Empiler le contenu et les actions
+  min-width: 280px; // Largeur minimale pour une carte
+
+  &.flex-view-wrapper {
+    // Styles spécifiques si un flex-view a besoin de plus d'espace ou d'un traitement différent
+    // Par exemple, si la structure flex interne doit gérer son propre défilement :
+    // overflow: auto; // Attention, cela peut cacher les ombres ou les bordures si mal géré
+  }
+
+  .flex-view-content-wrapper {
+    flex-grow: 1; // Permettre au contenu de la vue flex de prendre l'espace disponible
+    // padding: 10px; // Padding autour du contenu de la vue flex si nécessaire
+    // Si vous avez déjà un padding sur .flex-node.preview-container, ce n'est peut-as nécessaire ici.
+  }
+
+  .item-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 4px 8px;
+
+    button {
+      background: none;
+      border: none;
+      color: #6b7280; // Gris
+      cursor: pointer;
+      padding: 6px;
+      margin-left: 4px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      font-size: 0.9rem;
+
+      &:hover {
+        color: #1f2937; // Noir/Gris foncé
+        background-color: #e5e7eb; // Fond au survol
+      }
+      &:disabled {
+        color: #d1d5db;
+        cursor: not-allowed;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+// Assurez-vous que les items flex dans la grille du dashboard s'affichent correctement
+.items-grid.flex {
+  display: grid; // Ou flex si vous préférez une disposition en ligne
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); // Exemple de grille responsive
+  gap: 1rem; // Espace entre les items
+}
+
+.preview-item {
+  text-align: center;
+}
+
+.dashboard-selector {
+  label {
+    text-align: right;
+  }
+}