Merge pull request #2094 from Inist-CNRS/feat/theme/config-autocomplete

Theme config autocomplete
Inist-CNRS · Jul 18, 2024 · 830ad21 · 830ad21
2 parents a5c57c6 + 068760c
commit 830ad21
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 40 deletions.
diff --git a/src/api/models/themes.js b/src/api/models/themes.js
@@ -92,6 +92,7 @@ export const getAvailableThemes = () => {
             value,
             name: theme.name,
             description: theme.description,
+            defaultVariables: theme.customTemplateVariables,
         });
     });
     return toReturn;

diff --git a/src/app/custom/themes/voscouleurs/lodex-theme.json b/src/app/custom/themes/voscouleurs/lodex-theme.json
@@ -2,50 +2,50 @@
     "version": "6",
     "licence": "CeCILL",
     "name": {
-        "fr": "voscouleurs",
-        "en": "yourcolors"
+        "fr": "Voscouleurs",
+        "en": "Voscouleurs"
     },
     "description": {
-        "fr": "Theme personnalisable",
-        "en": "customizable Theme"
+        "fr": "Thème personnalisable",
+        "en": "Customizable theme"
     },
     "configuration": {
         "files": {
             "index": "index.ejs",
             "palette": ""
-        }
-    },
-    "variables": {
-        "siteTitle": "titre du site",
-        "summary": "promesse du site",
-        "logo": {
-            "file": "path vers le fichier du logo",
-            "alt": "nom de l'organisme",
-            "url": "url de l'organisme",
-            "size": "100"
-        },
-        "font": {
-            "family": "",
-            "title": ""
         },
-        "color": {
-            "themePrimary": "",
-            "themeSecondary": "",
-            "themeRGBA": "",
-            "bgBody": "#fff",
-            "bgHeader": "",
-            "headerTitle": "",
-            "bgContent": "",
-            "bgFacet": "",
-            "titles": "",
-            "titleGraph": "",
-            "text": "",
-            "icon": "",
-            "iconHover": "",
-            "button": "",
-            "buttonHover": "",
-            "textContrast": "",
-            "bgContrast": ""
+        "variables": {
+            "siteTitle": "titre du site",
+            "summary": "promesse du site",
+            "logo": {
+                "file": "path vers le fichier du logo",
+                "alt": "nom de l'organisme",
+                "url": "url de l'organisme",
+                "size": "100"
+            },
+            "font": {
+                "family": "",
+                "title": ""
+            },
+            "color": {
+                "themePrimary": "",
+                "themeSecondary": "",
+                "themeRGBA": "",
+                "bgBody": "#fff",
+                "bgHeader": "",
+                "headerTitle": "",
+                "bgContent": "",
+                "bgFacet": "",
+                "titles": "",
+                "titleGraph": "",
+                "text": "",
+                "icon": "",
+                "iconHover": "",
+                "button": "",
+                "buttonHover": "",
+                "textContrast": "",
+                "bgContrast": ""
+            }
         }
     }
 }
diff --git a/src/app/js/admin/configTenant/ConfigTenantForm.js b/src/app/js/admin/configTenant/ConfigTenantForm.js
@@ -52,6 +52,7 @@ export const ConfigTenantForm = ({
     history,
     onLoadConfigTenant,
 }) => {
+    const [initialConfig, setInitialConfig] = useState('');
     const [configTenant, setConfigTenant] = useState('');
     const [enableAutoPublication, setEnableAutoPublication] = useState(false);
     const [userAuth, setUserAuth] = useState({});
@@ -61,6 +62,7 @@ export const ConfigTenantForm = ({
     const [theme, setTheme] = useState('default');
     const [themes, setThemes] = useState([
         {
+            defaultVariables: {},
             name: {
                 fr: 'Classique',
                 en: 'Classic',
@@ -88,6 +90,7 @@ export const ConfigTenantForm = ({
             delete response.theme;
 
             const stringified = JSON.stringify(response, null, 2);
+            setInitialConfig(stringified);
             setConfigTenant(stringified);
 
             const themesResponse = await getConfigTenantAvailableTheme();
@@ -132,6 +135,39 @@ export const ConfigTenantForm = ({
         setConfigTenant(newConfigTenant);
     };
 
+    const handleThemeChange = (event) => {
+        setIsFormModified(true);
+        setTheme(event.target.value);
+
+        try {
+            const themeValue = themes.find(
+                (value) => value.value === event.target.value,
+            );
+
+            try {
+                const parsedConfig = JSON.parse(configTenant);
+
+                if (parsedConfig.front) {
+                    parsedConfig.front.theme = themeValue.defaultVariables;
+                }
+
+                setConfigTenant(JSON.stringify(parsedConfig, null, 2));
+            } catch (_) {
+                // If we can't parse the actual config fallback to the initial
+
+                const parsedConfig = JSON.parse(initialConfig);
+
+                if (parsedConfig.front) {
+                    parsedConfig.front.theme = themeValue.defaultVariables;
+                }
+
+                setConfigTenant(JSON.stringify(parsedConfig, null, 2));
+            }
+        } catch (_) {
+            /* empty */
+        }
+    };
+
     return (
         <Box className="container">
             <h1>{polyglot.t('config_tenant')}</h1>
@@ -213,10 +249,7 @@ export const ConfigTenantForm = ({
                     width: 'min(505px, 100%)',
                 }}
                 sx={{ mb: 2 }}
-                onChange={(event) => {
-                    setIsFormModified(true);
-                    setTheme(event.target.value);
-                }}
+                onChange={handleThemeChange}
             >
                 {themes.map((t) => (
                     <MenuItem key={t.value} value={t.value}>