data-primals-engine 1.0.11 → 1.1.0

package/client/src/ContentView.jsx

@@ -0,0 +1,274 @@
+// C:/Dev/hackersonline-engine/client/src/pages/ContentView.jsx
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {useParams, Link, useLocation } from 'react-router-dom'; // NavLink supprimé car non utilisé
+import { useQuery } from 'react-query';
+import { useTranslation } from 'react-i18next';
+import { urlData } from './core/data.js'; // urlData ajouté et correction espacement
+// import Loading from '../components/Loading.jsx'; // Pour un meilleur affichage du chargement
+// import NotFoundPage from './NotFoundPage'; // Si vous avez une page 404 dédiée
+
+import './DocumentationPageLayout.scss';
+import {FaChevronDown, FaChevronRight} from "react-icons/fa";
+import APIInfo from "./APIInfo.jsx";
+import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {useModelContext} from "./contexts/ModelContext.jsx";
+import {renderToString} from "react-dom/server";
+import {CodeField} from "./Field.jsx";
+import uniqid from "uniqid";
+
+// Styles SCSS (à créer ou adapter)
+// import './ContentView.scss'; // Si vous voulez des styles spécifiques
+
+// Ce composant est bien défini ici, au niveau supérieur du module.
+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 ContentView = () => { // Le prop 'menu' a été retiré car non passé par App.jsx pour cette route
+
+    const [root, setRoot] = useState();
+
+    const { me} = useAuthContext();
+    const { models, setSelectedModel } = useModelContext();
+    const wildcard = useParams()['*'];
+    const [cat, ...slugArr] = wildcard.split("/"); // 'cat' est l'identifiant de la catégorie parente, 'slug' celui du contenu
+    const slug = slugArr.join("/");
+    const {t, i18n} = useTranslation();
+    const location = useLocation();
+    const langCode = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
+
+    // 2. Récupérer le contenu principal basé sur le slug et la langue
+    const {data: contentData, isLoading: isLoadingContent, error: errorContent} = useQuery(
+        ['contentPage', slug, langCode, cat], // Ajout de cat pour la spécificité de la clé
+        () => fetch('/api/website/content?lang='+langCode+'&slug='+slug+'&limit=1&sort=_id:DESC', { headers: { 'Content-Type': 'application/json'}}).then(e => e.json())
+    );
+    const pageContent = contentData?.data?.[0];
+
+    console.log({contentData})
+    // 4. Récupérer les sous-catégories de la catégorie parente 'cat'
+    const {data: childCategoriesData, isLoading: isLoadingChildCategories} = useQuery(
+        ['childDocCategories', cat, langCode], // Clé de query mise à jour
+        () => fetch('/api/website/taxonomies?lang='+langCode+'&identifier='+cat, { headers: { 'Content-Type': 'application/json' }}).then(e => e.json()), // Tri par order, puis par nom
+        { enabled: !!cat && !!langCode } // Activer si cat et langCode sont présents
+    );
+    const childCategories = childCategoriesData?.data || [];
+
+    // 5. Récupérer les contenus pour la table des matières (TOC)
+    const childCategoryIds = useMemo(() => childCategories.map(c => c._id), [childCategories]);
+
+    const {data: tocContentQuery, isLoading: isLoadingTocContent} = useQuery(
+        ['tocContent', childCategoryIds, langCode], // Clé de query mise à jour
+        () => fetch( '/api/website/content?cats='+childCategoryIds.join(',')+'&lang='+langCode+'&sort=order:ASC,title:ASC', { headers: { 'Content-Type': 'application/json' }}).then(e => e.json()), // Tri par order, puis par titre
+        {enabled: !!langCode && childCategoryIds.length > 0} // Activer si langCode et des IDs de catégories enfants sont présents
+    );
+
+    const tocItemsByCategories = useMemo(() => {
+        if (!tocContentQuery?.data || !childCategories.length) return {};
+
+        const grouped = {};
+        // Initialiser les groupes en respectant l'ordre des childCategories (déjà triées)
+        childCategories.forEach(c => {
+            const categoryName = t(c.name.key, c.name.value); // Utiliser name_translated si disponible
+            grouped[categoryName] = [];
+        });
+
+        tocContentQuery.data.forEach(item => {
+            // Assumant que item.category est un tableau de relations et on prend la première
+            const itemCategoryId = item.category?._id;
+            const parentCategory = childCategories.find(c => c._id === itemCategoryId);
+
+            if (parentCategory) {
+                console.log({pt:parentCategory.name});
+                const categoryName = parentCategory.name.value || t('toc.unknownCategory', 'Autres');
+                if (grouped[categoryName]) { // La catégorie doit exister car initialisée plus haut
+                    grouped[categoryName].push(item); // Les items sont déjà triés par la query
+                }
+            } else {
+                // Gérer les items sans catégorie ou avec catégorie non listée (optionnel)
+                const fallbackCategoryName = t('toc.unknownCategory', 'Autres');
+                if (!grouped[fallbackCategoryName]) {
+                    grouped[fallbackCategoryName] = [];
+                }
+                grouped[fallbackCategoryName].push(item);
+            }
+        });
+        // Filtrer les catégories vides
+        return Object.fromEntries(Object.entries(grouped).filter(([_, v]) => v.length > 0));
+    }, [tocContentQuery, childCategories, langCode, t]);
+
+    const pageTitle = pageContent?.title.value;
+    const pageHtml = pageContent?.html[langCode] || pageContent?.html['en'] || pageContent?.html['fr'];
+
+    const refContent = useRef();
+
+    useEffect(() => {
+        if( contentData && refContent.current){
+            setTimeout(() => {
+                refContent.current.scrollIntoView({behavior:'smooth'});
+            }, 50);
+        }
+    }, [contentData])
+    
+    const [codeFields, setCodeFields] = useState([]);
+    useEffect(() => {
+
+        if (pageContent)
+            gtag('event', '['+langCode+'] read ' + pageContent?.slug);
+
+        const r= document.createElement("div");
+        setRoot(r);
+
+        r.innerHTML = pageHtml || '';
+        const cf = [];
+        document.body.appendChild(r);
+        r.querySelectorAll('pre > code').forEach(cc =>{
+            const rawLanguage = (cc.getAttribute('class')||'language-json').split('-');
+            const language = rawLanguage[rawLanguage.length-1];
+            cf.push({c:cc.innerText,a: language});
+            cc.parentNode.innerHTML = '<i>[@codeField]</i>';
+        })
+        document.body.removeChild(r);
+        setCodeFields(cf);
+
+
+    }, [pageHtml, pageContent]);
+
+
+    useEffect(() => {
+       if( slug && slug.startsWith('api/models/') ){
+           let v = slug.split("/")[2];
+           const mod = models.find(f => f.name === v && f._user === me?.username);
+           setSelectedModel(mod);
+       }
+    }, [slug, models, me]);
+
+    useEffect(() => {
+        const mainTitle = pageContent?.title_translated?.[langCode] || pageContent?.title.value;
+        if (mainTitle) {
+            document.title = `${t(mainTitle, mainTitle)} - ${t('siteName', 'data-primals-engine')}`;
+        } else if (!isLoadingContent && !pageContent) {
+            document.title = `${t('pageNotFound.title', 'Page non trouvée')} - ${t('siteName', 'data-primals-engine')}`;
+        }
+    }, [pageContent, isLoadingContent, t, langCode]);
+
+    const isLoading = isLoadingContent || isLoadingChildCategories || isLoadingTocContent;
+
+    if (isLoading) {
+        // return <Loading />; // Idéalement, utiliser un composant de chargement
+        return '...';
+    }
+
+    if (errorContent) {
+        return <div>{t('error.fetchContent', "Erreur lors de la récupération du contenu.")} ({errorContent.message})</div>;
+    }
+
+    // La définition de DocMenuGroup à l'intérieur de ContentView a été supprimée car elle existe déjà au niveau module.
+
+    const navMenu = <nav className="documentation-menu">
+        {Object.entries(tocItemsByCategories).map(([categoryName, items]) => (
+            // Utilisation du composant DocMenuGroup défini au niveau module
+            <DocMenuGroup key={categoryName} title={categoryName} initialOpen={true}> {/* Ouvre tous les groupes par défaut, ou ajustez la logique */}
+                {items.map(item => {
+                    const itemTitle = item.title.value;
+                    return (
+                        <li key={item._id}>
+                            <Link className={`doc-menu-item ${location.pathname === `/${langCode}/${cat}${item.slug}` ? 'active' : ''}`} to={`/${langCode}/${cat}${item.slug}`}> {/* Assurez-vous que item.slug commence par "/" si nssaire */}
+                                {t(itemTitle, itemTitle)}
+                            </Link>
+                        </li>
+                    );
+                })}
+            </DocMenuGroup>
+        ))}
+        {Object.keys(tocItemsByCategories).length === 0 && !isLoading && (
+            <p>{t('toc.noContent', 'Aucun contenu disponible pour la table des matières.')}</p>
+        )}
+    </nav>;
+
+    if (!pageContent && cat === 'documentation' && !isLoadingContent) {
+        return (
+            <div className="flex flex-no-wrap documentation-layout">
+                <aside className="documentation-sidebar">
+                    <h3>{t('toc.title', 'Documentation')}</h3>
+                    {navMenu}
+                </aside>
+                <main className="documentation-content">
+
+                    {slug.startsWith('api/') || slug==='api' ? (
+                        <APIInfo/>
+                    ) : <>
+                    <h1>{t('pageNotFound.title', 'Page non trouvée')}</h1>
+                    <p>{t('pageNotFound.message', 'Le contenu que vous recherchez n\'existe pas ou n\'est plus disponible.')}</p>
+                     <Link to={`/`}>{t('pageNotFound.goHome', `Retourner à l'accueil`)}</Link></>}
+
+                </main>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-no-wrap documentation-layout content-view-layout">
+
+            {cat === 'documentation' && (<aside className="documentation-sidebar">
+                <h3>{t('toc.title', 'Documentation')}</h3>
+                {navMenu}
+            </aside>)}
+
+            {pageContent && (
+            <main className="documentation-content" ref={refContent}>
+                {pageContent.image && (
+                    <img
+                        src={typeof pageContent.image === 'string' ? pageContent.image : (pageContent.image.guid ? `${urlData}resources/${pageContent.image.guid}` : '')}
+                        alt={pageTitle}
+                        className="content-main-image"
+                        style={{maxWidth: '100%', height: 'auto', marginBottom: '1em'}}
+                    />
+                )}
+                <h1>{t(pageTitle, pageTitle)}</h1>
+                <div className="content-meta">
+                    {pageContent.publishedAt && (
+                        <p>
+                            {t('content.publishedOn', 'Publié le')}: {new Date(pageContent.publishedAt).toLocaleDateString(i18n.language)}
+                        </p>
+                    )}
+                    {/* Vous pouvez ajouter l'auteur ici si besoin, en utilisant getDataAsString */}
+                    {/* pageContent.author && (
+                        <p>
+                            {t('content.author', 'Auteur')}: {getDataAsString( modèleAuteur , pageContent.author)}
+                        </p>
+                    )*/}
+                </div>
+
+                {slug.startsWith('api/') || slug==='api' ? (
+                    <APIInfo/>
+                ) : root?.innerHTML.split("<pre><i>[@codeField]</i></pre>").map((m,index)=>{
+                    const cc = codeFields[index];
+                    console.log({cc, index});
+                    return <div><div dangerouslySetInnerHTML={{__html: m}}></div>{cc && <div className={"fs-regular"}>
+                            <CodeField
+                                key={uniqid()}
+                                value={cc.c}
+                                language={cc.a}
+                                name={"code" + uniqid()}
+                                disabled={true}/>
+                            </div>}
+                        </div>;
+                })}
+
+            </main>
+            )}
+        </div>
+    );
+};
+
+export default ContentView;

package/client/src/CronBuilder.jsx

@@ -0,0 +1,126 @@
+import React, { useState, useEffect } from 'react';
+import { CronPartBuilder } from './CronPartBuilder.jsx';
+import cronstrue from 'cronstrue/i18n';
+import { useTranslation } from 'react-i18next';
+import './CronBuilder.scss';
+
+const CronBuilder = ({ cronExpression, cronMask, defaultCronExpression, onCronChange }) => {
+    const { t, i18n } = useTranslation();
+    const [parts, setParts] = useState({
+        second: '*',
+        minute: '*',
+        hour: '*',
+        dayOfMonth: '*',
+        month: '*',
+        dayOfWeek: '*',
+    });
+    const [defaultParts, setDefaultParts] = useState({
+        second: '*',
+        minute: '*',
+        hour: '*',
+        dayOfMonth: '*',
+        month: '*',
+        dayOfWeek: '*',
+    });
+    const [humanReadable, setHumanReadable] = useState('');
+    // Nouvel état pour suivre l'initialisation et éviter les boucles de rendu.
+    const [isReady, setIsReady] = useState(false);
+
+    useEffect(() => {
+        setIsReady(false);
+
+        const cronParts = (cronExpression || '* * * * * *').split(' ');
+        if (cronParts.length === 5) {
+            cronParts.unshift('*');
+        }
+
+        const defaultParts = (defaultCronExpression || '* * * * * *').split(' ');
+        if (defaultParts.length === 5) {
+            defaultParts.unshift('*');
+        }
+        console.log({cronMask})
+        setParts({
+            second: cronMask && !cronMask[0] ? '0' : cronParts[0] || defaultParts[0] || '*',
+            minute: cronMask && !cronMask[1] ? '0' : cronParts[1] || defaultParts[1] || '*',
+            hour: cronMask && !cronMask[2] ? '0' : cronParts[2] || defaultParts[2] || '*',
+            dayOfMonth: cronMask && !cronMask[3] ? '0' : cronParts[3] || defaultParts[3] || '*',
+            month: cronMask && !cronMask[4] ? '0' : cronParts[4] || defaultParts[4] || '*',
+            dayOfWeek: cronMask && !cronMask[5] ? '0' : cronParts[5] || defaultParts[5] || '*',
+        });
+        setIsReady(true);
+    }, [cronExpression, defaultCronExpression]); // Ajouter defaultCronExpression aux dépendances
+
+    // Met à jour la chaîne CRON complète et sa version lisible.
+    // Ce `useEffect` se déclenche lorsque les `parts` ou la langue changent.
+    useEffect(() => {
+        // **CORRECTION CLÉ :** On ne fait rien tant que le composant n'est pas prêt.
+        // Cela empêche l'appel à `onCronChange` avec l'état par défaut lors du montage initial.
+        if (!isReady) {
+            return;
+        }
+
+        const newCronString = `${parts.second} ${parts.minute} ${parts.hour} ${parts.dayOfMonth} ${parts.month} ${parts.dayOfWeek}`;
+
+        // Met à jour le parent si la chaîne a changé.
+        // Cette condition est maintenant sûre car elle ne s'exécute qu'après l'initialisation.
+        if (newCronString !== cronExpression) {
+            onCronChange(newCronString);
+        }
+
+        // Met à jour la version lisible (logique inchangée).
+        try {
+            const lang = (i18n.language || 'en').split('-')[0];
+            setHumanReadable(cronstrue.toString(newCronString, { locale: lang }));
+        } catch (e) {
+            setHumanReadable(t('cron.invalid', 'Expression CRON invalide'));
+        }
+    }, [parts, i18n.language, isReady]); // `isReady` est ajouté aux dépendances.
+
+    const handlePartChange = (partName, newValue) => {
+        // Si une partie devient invalide, CronPartBuilder renvoie `*`.
+        // Ce changement est géré normalement.
+        setParts(p => ({ ...p, [partName]: newValue || '*' }));
+    };
+
+    const cronPartsConfig = [
+        { name: 'second', label: t('cron.second', 'Seconde'), min: 0, max: 59 },
+        { name: 'minute', label: t('cron.minute', 'Minute'), min: 0, max: 59 },
+        { name: 'hour', label: t('cron.hour', 'Heure'), min: 0, max: 23 },
+        { name: 'dayOfMonth', label: t('cron.dayOfMonth', 'Jour du mois'), min: 1, max: 31 },
+        { name: 'month', label: t('cron.month', 'Mois'), min: 1, max: 12 },
+        { name: 'dayOfWeek', label: t('cron.dayOfWeek', 'Jour de la semaine'), min: 0, max: 6 },
+    ];
+
+    return (
+        <div className="cron-builder-wrapper">
+            <div className="cron-builder-inputs">
+                {cronPartsConfig.map((part,ind)=>
+                    {
+                            return <div className="cron-part" key={part.name}>
+                                <label htmlFor={`cron-${part.name}`}>{part.label}</label>
+                                <CronPartBuilder
+                                    label={part.label}
+                                    id={`cron-${part.name}`}
+                                    value={parts[part.name]}
+                                    masked={!(!cronMask || cronMask[ind])}
+                                    onChange={(val) => handlePartChange(part.name, val)}
+                                    min={part.min}
+                                    max={part.max}
+                                /></div>
+                    })}
+            </div>
+            <div className="cron-builder-output">
+                <div className="cron-string-preview">
+                    <span className="label">{t('cron.expression', 'Expression CRON :')}</span>
+                    <code>{cronExpression}</code>
+                </div>
+                <div className="cron-human-readable">
+                    <span className="label">{t('cron.preview', 'Aperçu :')}</span>
+                    <span className="preview-text">{humanReadable}</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CronBuilder;

package/client/src/CronBuilder.scss

@@ -0,0 +1,128 @@
+// C:/Dev/hackersonline-engine/client/src/CronBuilder.scss
+
+// J'utilise ici des variables pour les couleurs et espacements.
+// Si votre projet a déjà un fichier de variables SCSS, il serait bon de les utiliser
+// pour une cohérence parfaite.
+$primary-border-color: #e0e0e0;
+$secondary-text-color: #555;
+$code-bg-color: #f0f0f0;
+$code-text-color: #c7254e;
+$input-bg-color: #fff;
+$input-border-color: #ccc;
+$input-focus-border-color: #337ab7;
+$label-color: #333;
+$preview-bg-color: #f9f9f9;
+$gap-small: 8px;
+$gap-medium: 16px;
+$border-radius: 4px;
+
+.cron-builder-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-medium;
+  padding: $gap-medium;
+  border: 1px solid $primary-border-color;
+  border-radius: $border-radius;
+  background-color: #fff; // Fond clair
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.cron-builder-inputs {
+  display: flex;
+  flex-wrap: wrap; // Permet aux éléments de passer à la ligne sur mobile
+  gap: $gap-medium;
+  align-items: flex-end; // Aligne les champs sur le bas pour un rendu net
+}
+
+.cron-part {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-small / 2;
+  flex: 1 1 120px; // Permet aux champs de s'adapter en largeur
+
+  label {
+    font-size: 0.875rem;
+    color: $label-color;
+    font-weight: 500;
+    margin-bottom: 2px;
+  }
+
+  // En supposant que CronPartBuilder génère un input ou une div stylisable.
+  // Le style s'appliquera à l'input à l'intérieur.
+  input {
+    width: 100%;
+    padding: $gap-small;
+    border: 1px solid $input-border-color;
+    border-radius: $border-radius;
+    background-color: $input-bg-color;
+    font-family: monospace;
+    font-size: 1rem;
+    line-height: 1.5;
+    box-sizing: border-box;
+    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+    &:focus {
+      outline: none;
+      border-color: $input-focus-border-color;
+      box-shadow: 0 0 0 2px rgba($input-focus-border-color, 0.25);
+    }
+  }
+}
+
+.cron-builder-output {
+  display: flex;
+  flex-direction: column;
+  gap: $gap-small;
+  padding: $gap-small $gap-medium;
+  background-color: $preview-bg-color;
+  border-radius: $border-radius;
+  border-top: 1px solid $primary-border-color;
+  font-size: 0.9rem;
+
+  .cron-string-preview, .cron-human-readable {
+    display: flex;
+    align-items: center;
+    gap: $gap-small;
+    flex-wrap: wrap;
+  }
+
+  .label {
+    font-weight: 600;
+    color: $secondary-text-color;
+    white-space: nowrap;
+  }
+
+  code {
+    background-color: $code-bg-color;
+    color: $code-text-color;
+    padding: 3px 6px;
+    border-radius: $border-radius;
+    font-family: monospace;
+  }
+
+  .preview-text {
+    color: #000;
+    font-style: italic;
+  }
+}
+
+// Ajustements pour les  {
+.cron-builder-inputs {
+  gap: $gap-small;
+}
+
+.cron-part {
+  // Sur tablette, 3 champs par ligne
+  flex-basis: calc(33.333% - #{$gap-small});
+  label {
+    font-weight: bold;
+  }
+}
+
+@media (max-width: 480px) {
+  .cron-part {
+    // Sur mobile, 2 champs par ligne pour plus de lisibilité
+    flex-basis: calc(50% - #{$gap-small});
+  }
+}

package/client/src/CronPartBuilder.jsx

@@ -0,0 +1,150 @@
+// C:/Dev/hackersonline-engine/client/src/CronPartBuilder.jsx
+
+import React, { useMemo } from 'react';
+import { SelectField, TextField, NumberField } from './Field.jsx';
+import { useTranslation } from 'react-i18next';
+
+/**
+ * Ce composant gère une seule partie de l'expression CRON.
+ * Il est "contrôlé" : son affichage est entièrement dérivé de la prop `value`
+ * et les interactions utilisateur appellent directement `onChange` avec la nouvelle valeur.
+ * Cette version renforce la logique de parsing pour éviter les interprétations incorrectes.
+ */
+export const CronPartBuilder = ({ label, masked, value, defaultValue, onChange, min, max, id }) => {
+    const { t } = useTranslation();
+
+
+    const { mode, specificValue, intervalValue, rangeStart, rangeEnd } = useMemo(() => {
+        const initialState = {
+            mode: 'every',
+            specificValue: '',
+            intervalValue: 5,
+            rangeStart: min,
+            rangeEnd: max,
+        };
+
+        // --- CORRECTION ICI ---
+        // On utilise la prop `defaultValue` quand le champ est masqué.
+        const valStr = String(value || '');
+        // --- FIN DE LA CORRECTION ---
+
+        if (valStr === '*') {
+            return { ...initialState, mode: 'every' };
+        }
+        // ... (le reste du useMemo est correct)
+        if (valStr.includes('/')) {
+            const parts = valStr.split('/');
+            // Assurez-vous que la valeur par défaut est bien parsée si elle est de type intervalle
+            return { ...initialState, mode: 'interval', intervalValue: parseInt(parts[1], 10) || 5 };
+        }
+        if (valStr.includes('-')) {
+            const parts = valStr.split('-');
+            const start = parseInt(parts[0], 10);
+            const end = parseInt(parts[1], 10);
+            return { ...initialState, mode: 'range', rangeStart: isNaN(start) ? min : start, rangeEnd: isNaN(end) ? max : end };
+        }
+        if (valStr.includes(',')) {
+            return { ...initialState, mode: 'specific_multiple', specificValue: valStr };
+        }
+        if (/^\d+$/.test(valStr)) {
+            return { ...initialState, mode: 'specific_single', specificValue: valStr };
+        }
+
+        return initialState;
+
+    }, [value, min, max, masked, defaultValue]);
+
+    // GESTIONNAIRES D'ÉVNEMENTS : Calculent la nouvelle chaîne et appellent `onChange` directement.
+
+    const handleModeChange = (item) => {
+        const newMode = item.value;
+        let newValue = defaultValue;
+        switch (newMode) {
+            case 'every':
+                newValue = '*';
+                break;
+            case 'specific_single':
+                newValue = String(min);
+                break;
+            case 'specific_multiple':
+                newValue = `${min},${min + 1 > max ? min : min + 1}`;
+                break;
+            case 'interval':
+                newValue = '*/5';
+                break;
+            case 'range':
+                newValue = `${min}-${max}`;
+                break;
+            default:
+                newValue = defaultValue;
+        }
+        if (newValue !== value) {
+            onChange(newValue);
+        }
+    };
+
+    const handleSpecificValueChange = (e) => {
+        const cleanedValue = e.target.value.replace(/[^0-9,]/g, '');
+        onChange(cleanedValue || '*'); // Retour à '*' si le champ est vide
+    };
+
+    const handleIntervalChange = (e) => {
+        const newInterval = parseInt(e.target.value, 10) || 1;
+        onChange(`*/${newInterval}`);
+    };
+
+    const handleRangeChange = (part, e) => {
+        const newRangeValue = parseInt(e.target.value, 10);
+        if (isNaN(newRangeValue)) return; // Ne pas mettre à jour si l'entrée n'est pas un nombre
+
+        if (part === 'start') {
+            onChange(`${newRangeValue}-${rangeEnd}`);
+        } else {
+            onChange(`${rangeStart}-${newRangeValue}`);
+        }
+    };
+
+    const modeOptions = [
+        { value: 'every', label: t('cron.every', `Chaque {{label}}`, {label:label.toLowerCase()}) },
+        { value: 'specific_single', label: t('cron.specific_single', `Spécifique (ex: 15)`) },
+        { value: 'specific_multiple', label: t('cron.specific_multiple', `Spécifiques (ex: 0,15,30)`) },
+        { value: 'interval', label: t('cron.interval', `Toutes les X {{label}}s`, {label:label.toLowerCase()}) },
+        { value: 'range', label: t('cron.range', `Plage (ex: 9-17)`) },
+    ];
+
+    console.log({label, masked})
+
+    return (
+        <div className="cron-part-controls">
+            <SelectField disabled={masked} items={modeOptions} value={mode} onChange={handleModeChange} />
+
+            <div className="cron-part-inputs">
+                {['specific_single', 'specific_multiple'].includes(mode) && (
+                    <TextField
+                        id={id}
+                        disabled={masked}
+                        value={specificValue}
+                        onChange={handleSpecificValueChange}
+                        placeholder={mode === 'specific_single' ? '15' : '0,15,30,45'}
+                    />
+                )}
+                {mode === 'interval' && (
+                    <NumberField
+                        id={id}
+                        value={intervalValue}
+                        onChange={handleIntervalChange}
+                        min={1}
+                        max={max}
+                    />
+                )}
+                {mode === 'range' && (
+                    <div className="range-inputs">
+                        <NumberField id={id} value={rangeStart} onChange={(e) => handleRangeChange('start', e)} min={min} max={max} />
+                        <span>-</span>
+                        <NumberField value={rangeEnd} onChange={(e) => handleRangeChange('end', e)} min={min} max={max} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};