feat(theme): autocomplete the config with the default theme values

Inist-CNRS · Jul 17, 2024 · 2039c3e · 2039c3e
1 parent 4f58b48
commit 2039c3e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 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/js/admin/configTenant/ConfigTenantForm.js b/src/app/js/admin/configTenant/ConfigTenantForm.js
@@ -28,6 +28,7 @@ import CancelButton from '../../lib/components/CancelButton';
 import { toast } from '../../../../common/tools/toast';
 import { loadConfigTenant } from '.';
 import { SaveAs } from '@mui/icons-material';
+import _ from 'lodash';
 
 const shake = keyframes`
 10%, 90% {
@@ -61,6 +62,7 @@ export const ConfigTenantForm = ({
     const [theme, setTheme] = useState('default');
     const [themes, setThemes] = useState([
         {
+            defaultVariables: {},
             name: {
                 fr: 'Classique',
                 en: 'Classic',
@@ -132,6 +134,27 @@ 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,
+            );
+
+            const clonedConfig = _.cloneDeep(JSON.parse(configTenant));
+
+            if (clonedConfig.front) {
+                clonedConfig.front.theme = themeValue.defaultVariables;
+            }
+
+            setConfigTenant(JSON.stringify(clonedConfig, null, 2));
+        } catch (_) {
+            /* empty */
+        }
+    };
+
     return (
         <Box className="container">
             <h1>{polyglot.t('config_tenant')}</h1>
@@ -213,10 +236,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}>