data-primals-engine 1.0.10 → 1.1.0

package/client/src/PackGallery.jsx

@@ -0,0 +1,211 @@
+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 Button from './Button.jsx';
+import { useNotificationContext } from './NotificationProvider.jsx';
+import { useModelContext } from './contexts/ModelContext.jsx';
+
+import './PackGallery.scss';
+import {elementsPerPage} from "data-primals-engine/constants";
+
+// --- API Fetching Functions ---
+const fetchPacks = async (sortBy, lang) => {
+    const response = await fetch(`/api/packs?lang=${lang}&sortBy=${sortBy.field}&order=${sortBy.order}`);
+    if (!response.ok) {
+        throw new Error('Network response was not ok');
+    }
+    return response.json();
+};
+
+const fetchPackDetails = async (packId, lang) => {
+    if (!packId) return null;
+    const response = await fetch(`/api/packs/${packId}?lang=${lang}`);
+    if (!response.ok) {
+        throw new Error('Failed to fetch pack details');
+    }
+    return response.json();
+};
+
+// --- Sub-components ---
+
+// Carte pour afficher un pack dans la galerie
+const PackCard = ({ pack, onSelect }) => {
+    const { t } = useTranslation();
+    return (
+        <div className="pack-card" onClick={() => onSelect(pack._id)}>
+            <div className="pack-card-header">
+                <h3><FaBoxOpen /> {pack.name}</h3>
+                <span className="pack-stars"><FaStar /> {pack.stars || 0}</span>
+            </div>
+            <p className="pack-description">{pack.description?.substring(0, 120) || t('packs.noDescription', 'Aucune description.')}... </p>
+            <div className="pack-card-footer">
+                <span className="pack-author"><FaUser /> {pack._user}</span>
+                <div className="pack-tags">
+                    {(pack.tags || []).map(tag => <span key={tag} className="tag"><FaTag /> {tag}</span>)}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// Vue détaillée d'un pack
+const PackDetail = ({ packId, onBack }) => {
+    const { t,i18n } = useTranslation();
+    const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
+    const { addNotification } = useNotificationContext();
+    const queryClient = useQueryClient();
+    const { selectedModel, page, pagedFilters, pagedSort } = useModelContext();
+    const { data: pack, isLoading, isError } = useQuery(['packDetails', packId], () => fetchPackDetails(packId, lang));
+
+    const { mutate: installPack, isLoading: isInstalling } = useMutation(
+        installPackMutationFn,
+        {
+            onSuccess: (data) => {
+                addNotification({
+                    status: 'completed',
+                    title: t('datatable.pack.install.success', `Pack '${pack.name}' installé avec succès !`)
+                });
+                gtag('event', 'pack install '+pack.name);
+                queryClient.invalidateQueries('api/models');
+                queryClient.invalidateQueries(['api/data', selectedModel?.name, 'page', page, elementsPerPage, pagedFilters[selectedModel?.name], pagedSort[selectedModel?.name]]);
+
+                onBack(); // Retourner à la galerie
+            },
+            onError: (error) => {
+                addNotification({
+                    status: 'error',
+                    title: t('datatable.pack.install.error', `Échec de l'installation du pack`),
+                    message: error.message
+                });
+            }
+        }
+    );
+
+    const handleInstall = async () => {
+        addNotification({ status: 'info', title: t('packs.install.started', `Installation du pack '${pack.name}'...`) });
+        installPack({ packId: pack._id, lang });
+    };
+
+    if (isLoading) return <div className="spinner-loader"></div>;
+    if (isError) return <p className="error-text">{t('packs.error.details', 'Erreur lors du chargement des détails du pack.')}</p>;
+    if (!pack) return null;
+
+    const renderModelsList = (models) => {
+        if (!models || models.length === 0) return t('packs.noModelsIncluded', 'Aucun modèle spécifié.');
+
+        return models.map(model => {
+            // Si l'élément est un objet, on prend sa propriété 'name', sinon on prend la chaîne de caractères
+            const modelName = typeof model === 'object' && model !== null ? model.name : model;
+            return modelName;
+        }).join(', ');
+    };
+
+    return (
+        <div className="pack-detail">
+            <Button onClick={onBack} className="back-button"><FaChevronLeft /> <Trans i18nKey="btns.back">Retour</Trans></Button>
+            <div className="pack-detail-header">
+                <h1>{pack.name}</h1>
+                <Button onClick={handleInstall} disabled={isInstalling}>
+                    <FaDownload /> {isInstalling ? t('packs.installing', 'Installation...') : t('packs.install', 'Installer')}
+                </Button>
+            </div>
+            <div className="pack-meta">
+                <span><FaUser /> {pack._user}</span>
+                <span><FaStar /> {pack.stars || 0}</span>
+                <span><FaTag /> {(pack.tags || []).join(', ')}</span>
+            </div>
+            <div className="pack-content">
+                <h2><Trans i18nKey="packs.description">Description</Trans></h2>
+                <div className="description-content" dangerouslySetInnerHTML={{__html: pack.description || ''}}/>
+
+                <h2><Trans i18nKey="packs.modelsIncluded">Modèles inclus</Trans></h2>
+                <p>{renderModelsList(pack.models)}</p>
+
+                <h2><Trans i18nKey="packs.dataPreview">Aperçu des données à installer</Trans></h2>
+                <div className="data-preview">
+                    <pre>{JSON.stringify(pack.data, null, 2)}</pre>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+// --- NOUVELLE FONCTION POUR LA MUTATION D'INSTALLATION ---
+const installPackMutationFn = async ({packId, lang}) => {
+    const response = await fetch(`/api/packs/${packId}/install?lang=${lang}`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+    });
+    if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || 'Failed to install pack');
+    }
+    return response.json();
+};
+
+// --- Main Gallery Component ---
+const PackGallery = () => {
+    const { t, i18n } = useTranslation();
+    const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
+
+    const [view, setView] = useState('list'); // 'list' ou 'detail'
+    const [selectedPackId, setSelectedPackId] = useState(null);
+    const [sortBy, setSortBy] = useState({ field: '_updatedAt', order: -1 });
+
+    const { data: packs, isLoading, isError } = useQuery(['packs', sortBy], () => fetchPacks(sortBy, lang));
+
+    const handleSelectPack = (packId) => {
+        setSelectedPackId(packId);
+        setView('detail');
+    };
+
+    const handleBackToList = () => {
+        setSelectedPackId(null);
+        setView('list');
+    };
+
+    const renderContent = () => {
+        if (view === 'detail') {
+            return <PackDetail packId={selectedPackId} onBack={handleBackToList} />;
+        }
+
+        // Vue 'list'
+        if (isLoading) return <div className="spinner-loader"></div>;
+        if (isError) return <p className="error-text">{t('packs.error.loading', 'Erreur lors du chargement des packs.')}</p>;
+        if (!packs || packs.length === 0) return <p>{t('packs.noPacks', 'Aucun pack n\'est disponible pour le moment.')}</p>;
+
+        return (
+            <>
+                <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>
+                        </Button>
+                    </div>
+                </div>
+                <div className="pack-list">
+                    {packs.map(pack => (
+                        <PackCard key={pack._id} pack={pack} onSelect={handleSelectPack} />
+                    ))}
+                </div>
+            </>
+        );
+    };
+
+    return (
+        <div className="pack-gallery-container">
+            {renderContent()}
+        </div>
+    );
+};
+
+export default PackGallery;

package/client/src/PackGallery.scss

@@ -0,0 +1,156 @@
+.pack-gallery-container {
+  width: 100%;
+  max-width: 90vw;
+  height: 80vh;
+  display: flex;
+  flex-direction: column;
+
+  .gallery-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid #e0e0e0;
+    margin-bottom: 1rem;
+    h1 {
+      margin: 0;
+    }
+    .sort-options {
+      display: flex;
+      gap: 0.5rem;
+      align-items: center;
+      .btn.active {
+        color: white;
+      }
+    }
+  }
+
+  .pack-list {
+    display: grid;
+    gap: 1rem;
+    padding: 0.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    @media only screen and (min-width: 480px) {
+      overflow-y: auto;
+    }
+  }
+
+  .pack-card {
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 1rem;
+    cursor: pointer;
+    transition: box-shadow 0.2s, transform 0.2s;
+    background-color: #fff;
+
+    &:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+      transform: translateY(-3px);
+    }
+
+    .pack-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 0.5rem;
+      h3 {
+        margin: 0;
+        font-size: 1.2em;
+        color: var(--primary-color);
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .pack-stars {
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+        color: #f0ad4e;
+      }
+    }
+
+    .pack-description {
+      font-size: 0.9em;
+      color: #666;
+      min-height: 50px;
+    }
+
+    .pack-card-footer {
+      margin-top: 1rem;
+      padding-top: 0.5rem;
+      border-top: 1px solid #eee;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.8em;
+      color: #888;
+      .pack-author {
+        display: flex;
+        align-items: center;
+        gap: 0.3rem;
+      }
+      .pack-tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        .tag {
+          background-color: #f0f0f0;
+          padding: 2px 6px;
+          border-radius: 4px;
+          display: flex;
+          align-items: center;
+          gap: 0.2rem;
+        }
+      }
+    }
+  }
+
+  .pack-detail {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    .back-button {
+      align-self: flex-start;
+      margin-bottom: 1rem;
+    }
+    .pack-detail-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      h1 { margin: 0; }
+    }
+    .pack-meta {
+      display: flex;
+      gap: 1rem;
+      color: #777;
+      margin: 0.5rem 0 1rem 0;
+      span {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
+      }
+    }
+    .pack-content {
+      flex-grow: 1;
+      overflow-y: auto;
+      padding-right: 1rem;
+      h2 {
+        border-bottom: 1px solid #eee;
+        padding-bottom: 0.3rem;
+        margin-top: 1.5rem;
+      }
+      .data-preview {
+        background-color: #2d2d2d;
+        color: #f1f1f1;
+        padding: 1rem;
+        border-radius: 4px;
+        max-height: 300px;
+        overflow: auto;
+        pre {
+          margin: 0;
+          font-size: 0.85em;
+        }
+      }
+    }
+  }
+}

package/client/src/Pagination.jsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from "react";
+import Button from "./Button.jsx";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import {useQueryClient} from "react-query";
+import {Trans} from "react-i18next";
+import {useModelContext} from "./contexts/ModelContext.jsx";
+
+export const Pagination = ({
+  hasPreviousNext,
+  visibleItemsCount,
+  onRenderItem,
+  totalCount,
+  onChange,
+  page,
+  setPage,
+  useParam = false,
+    showElementsPerPage=false
+}) => {
+  const { elementsPerPage, setElementsPerPage } = useModelContext();
+  let pageCount = Math.ceil(totalCount / elementsPerPage);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const handleFirst = (e) => {
+      setPage(1);
+      onChange?.(1);
+    e.preventDefault();
+  };
+  const handleLast = (e) => {
+      setPage(pageCount);
+      onChange?.(pageCount);
+    e.preventDefault();
+  };
+  const handlePrevious = (e) => {
+    if (page > 1) {
+      setPage(page - 1);
+      if (useParam) {
+        searchParams.set("page", page - 1 + "");
+        setSearchParams(
+            (params) => {
+              params.set("page", page - 1 + "");
+              return params;
+            },
+            { replace: true },
+        );
+      }
+      onChange?.(page - 1);
+    }
+    e.preventDefault();
+  };
+  const handleNext = (e) => {
+    if (page < pageCount) {
+      setPage(page + 1);
+      if (useParam) {
+        searchParams.set("page", page + 1 + "");
+        setSearchParams(
+          (params) => {
+            params.set("page", page + 1 + "");
+            return params;
+          },
+          { replace: true },
+        );
+      }
+      onChange?.(page + 1);
+    }
+    e.preventDefault();
+  };
+
+  const handleChange = (p) => {
+    if (p !== page) {
+      setPage(p);
+      if (useParam) {
+        searchParams.set("page", p + "");
+        setSearchParams(
+          (params) => {
+            params.set("page", p + "");
+            return params;
+          },
+          { replace: true },
+        );
+      }
+      onChange?.(p);
+    }
+  };
+
+  const handleElementsPerPageChange = (event) => {
+    const newPerPage = parseInt(event.target.value, 10);
+    if (!isNaN(newPerPage) && newPerPage > 0 && newPerPage <= 100) {
+      setElementsPerPage(newPerPage);
+      setPage(1);
+      onChange?.(1);
+    }
+  };
+  return (
+      <div className="pagination-wrapper flex">
+        {page >= 1 && page <= pageCount && (
+            <div className="pagination">
+              {hasPreviousNext && page > 1 && (
+                  <>
+                    <Button onClick={handleFirst}>&lt;&lt;</Button>&nbsp;
+                  </>
+              )}
+              {hasPreviousNext && page > 1 && (
+                  <>
+                    <Button onClick={handlePrevious}>&lt;</Button>&nbsp;
+                  </>
+              )}
+              {Array.from(
+                  {length: parseInt(visibleItemsCount, 10)},
+                  (_, i) => page + i - parseInt(visibleItemsCount / 2, 10),
+              ).map((p, i) => {
+                return p >= 1 && p <= pageCount ? (
+                    <Button disabled={p === page} onClick={() => handleChange(p)}>
+                      {p}
+                    </Button>
+                ) : (
+                    <></>
+                );
+              })}
+              {hasPreviousNext && page < pageCount && (
+                  <>
+                    &nbsp;<Button onClick={handleNext}>&gt;</Button>
+                  </>
+              )}
+              {hasPreviousNext && page < pageCount && (
+                  <>
+                    &nbsp;<Button onClick={handleLast}>&gt;&gt;</Button>
+                  </>
+              )}
+            </div>
+        )}
+        {showElementsPerPage&& (<div className="form flex flex-no-wrap elementsPerPage">
+          <label htmlFor="elementsPerPage"><Trans i18nKey="pagination.elementsPerPage">Éléments par page:</Trans></label>
+          <select id="elementsPerPage" value={elementsPerPage} onChange={handleElementsPerPageChange}>
+              <option value="20">20</option>
+              <option value="50">50</option>
+              <option value="100">100</option>
+          </select>
+        </div>)}
+      </div>
+  );
+};