@dashadmin/dash-admin 1.3.25 → 1.3.26

package/src/components/i18n/BridgedLocalesMenuButton.tsx

@@ -0,0 +1,159 @@
+/**
+ * BridgedLocalesMenuButton
+ * 
+ * A custom locale menu button that uses the bridged i18nProvider
+ * instead of React Admin's context-based provider.
+ * 
+ * This is necessary because AppMaterialMenu renders outside AdminContext,
+ * so it can't access the custom i18nProvider with getLocales().
+ */
+import React, { useState, useCallback } from 'react';
+import { Menu, MenuItem, Button, Tooltip, IconButton } from '@mui/material';
+import TranslateIcon from '@mui/icons-material/Translate';
+import LanguageIcon from '@mui/icons-material/Language';
+import { useI18nBridge, useBridgedLocales } from '../../contexts/I18nBridgeContext';
+import { useLocaleState } from 'react-admin';
+import { useDispatch } from 'react-redux';
+import { DASH_REDUX_ACTIONS } from 'dash-admin-state';
+
+interface BridgedLocalesMenuButtonProps {
+    /** Show icon only (compact mode) */
+    iconOnly?: boolean;
+    /** Custom icon */
+    icon?: React.ReactNode;
+}
+
+const BridgedLocalesMenuButton: React.FC<BridgedLocalesMenuButtonProps> = ({ 
+    iconOnly = true,
+    icon = <LanguageIcon />
+}) => {
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const locales = useBridgedLocales();
+    const { i18nProvider, locale: currentLocale, setLocale: setBridgedLocale } = useI18nBridge();
+    // We still use RA's useLocaleState but only to SET it if needed, 
+    // though we should really just use the bridge
+    const [, setRALocale] = useLocaleState();
+
+    const handleClick = useCallback((event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+
+    const handleClose = useCallback(() => {
+        setAnchorEl(null);
+    }, []);
+
+    const dispatch = useDispatch(); // Add dispatch
+    
+    const handleLocaleChange = useCallback(async (locale: string) => {
+        console.log('🌐 BridgedLocalesMenuButton: Changing locale to:', locale);
+        
+        // Use bridged provider to change locale (async)
+        // This updates the actual translation provider logic/internal state
+        if (i18nProvider?.changeLocale) {
+            console.log('🌐 BridgedLocalesMenuButton: Awaiting changeLocale...');
+            try {
+                await i18nProvider.changeLocale(locale);
+                console.log('🌐 BridgedLocalesMenuButton: changeLocale complete.');
+            } catch (error) {
+                console.error('🌐 BridgedLocalesMenuButton: changeLocale failed:', error);
+            }
+        }
+        
+        // Persist locale to localStorage for persistence across page reloads
+        try {
+            localStorage.setItem('dash-user-locale', locale);
+            console.log('🌐 BridgedLocalesMenuButton: Persisted locale to localStorage:', locale);
+        } catch (e) {
+            console.warn('🌐 BridgedLocalesMenuButton: Failed to persist locale to localStorage:', e);
+        }
+        
+        // UPDATE STATE LAST (after provider is ready)
+        // This triggers re-render. Since provider is ready, translations will be correct.
+        console.log('🌐 BridgedLocalesMenuButton: Updating state...');
+        
+        // 1. Update Redux state (Critical for DASHAdmin and ResourceTemplate propagation)
+        // We pass the full object if needed, but the reducer seems to handle the payload directly or we might need to check if it expects a string or object.
+        // Looking at SettingsReducer: locale: action.payload.
+        // Looking at SettingsReducer initial state: locale is an object { languageId, locale, name, icon }.
+        // But switchLanguage action just takes 'locale'.
+        // If the reducer replaces the WHOLE state.locale object with a string, it might break other things IF they expect an object.
+        // Let's check Settting.tsx: dispatch({ type: SWITCH_LANGUAGE, payload: locale });
+        // Let's check SettingsReducer: return { ...state, locale: action.payload };
+        // If action.payload is a string 'en', then state.settings.locale becomes 'en'.
+        // DASHAdmin selectLocale returns state.settings.locale.
+        // AsyncResources expects locale (any).
+        // It seems DASHAdmin handles it being a string.
+        dispatch(DASH_REDUX_ACTIONS.switchLanguage(locale) as any);
+
+        // 2. Update Bridged Context
+        setBridgedLocale(locale);
+        
+        // 3. Update React Admin State
+        setRALocale(locale);
+        
+        handleClose();
+    }, [i18nProvider, setBridgedLocale, setRALocale, handleClose, dispatch]);
+
+    // Don't render if no locales available
+    if (!locales || locales.length <= 1) {
+        console.log('🌐 BridgedLocalesMenuButton: Not rendering - locales:', locales);
+        return null;
+    }
+
+    console.log('🌐 BridgedLocalesMenuButton: Rendering with locales:', locales, 'current:', currentLocale);
+
+    const open = Boolean(anchorEl);
+    const currentLocaleName = locales.find(l => l.locale === currentLocale)?.name || currentLocale;
+
+    return (
+        <>
+            {iconOnly ? (
+                <Tooltip title={`Language: ${currentLocaleName}`}>
+                    <IconButton
+                        onClick={handleClick}
+                        color="inherit"
+                        size="small"
+                        aria-label="change language"
+                        aria-controls={open ? 'locale-menu' : undefined}
+                        aria-haspopup="true"
+                        aria-expanded={open ? 'true' : undefined}
+                    >
+                        {icon}
+                    </IconButton>
+                </Tooltip>
+            ) : (
+                <Button
+                    onClick={handleClick}
+                    color="inherit"
+                    startIcon={icon}
+                    aria-controls={open ? 'locale-menu' : undefined}
+                    aria-haspopup="true"
+                    aria-expanded={open ? 'true' : undefined}
+                >
+                    {currentLocaleName}
+                </Button>
+            )}
+            <Menu
+                id="locale-menu"
+                anchorEl={anchorEl}
+                open={open}
+                onClose={handleClose}
+                MenuListProps={{
+                    'aria-labelledby': 'locale-button',
+                }}
+            >
+                {locales.map((localeOption) => (
+                    <MenuItem
+                        key={localeOption.locale}
+                        selected={localeOption.locale === currentLocale}
+                        onClick={() => handleLocaleChange(localeOption.locale)}
+                    >
+                        {localeOption.name || localeOption.locale}
+                    </MenuItem>
+                ))}
+            </Menu>
+        </>
+    );
+};
+
+export default BridgedLocalesMenuButton;

package/src/components/i18n/LangSwitcher.tsx

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import { MouseEvent, useState, useRef, useEffect } from 'react';
+import { Avatar, useMediaQuery, useTheme } from '@mui/material';
+import LanguageIcon from '@mui/icons-material/Translate';
+import ReactDOM from 'react-dom';
+import { useWindowSize } from 'dash-utils';
+import { useLocales, useLocaleState } from '../../hooks/usePolyglotTranslation';
+import { useBridgedChangeLocale } from '../../contexts/I18nBridgeContext';
+const DefaultIcon = <LanguageIcon />;
+
+export interface LanguageSwitcherButtonProps {
+    icon?: React.ReactNode;
+    languages?: { locale: string; name: string }[];
+}
+
+const LangSwitcher = (props: LanguageSwitcherButtonProps) => {
+    const { icon = DefaultIcon, languages: languagesProp } = props;
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    
+    const languages = useLocales({ locales: languagesProp });
+    const [locale, setLocale] = useLocaleState();
+    const changeBridgedLocale = useBridgedChangeLocale();
+
+    const theme = useTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+    const [webView, setWebView] = useState<boolean>(false);
+    const [open, setOpen] = useState(false);
+    const avatarRef = useRef<HTMLDivElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
+    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    const windowSize = useWindowSize();
+    useEffect(() => {
+        if(document.body.classList.contains('webview')) {
+            setWebView(true)
+        } else {
+            setWebView(false)
+        }
+    }, []);
+
+    const getNameForLocale = (locale: string): string => {
+        const language = languages.find(language => language.locale === locale);
+        return language ? language.name : '';
+    };
+
+    const changeLocale = (newLocale: string) => (): void => {
+        setLocale(newLocale);
+        // Also update the bridge context so components like AppMaterialMenu re-render
+        changeBridgedLocale(newLocale);
+        setOpen(false);
+    };
+
+  const calculateMenuPosition = () => {
+    if (avatarRef.current && windowSize.width) {
+        const rect = avatarRef.current.getBoundingClientRect();
+        const menuWidth = 200; // minWidth from styles
+        
+        let left = rect.left + window.scrollX;
+        
+        // Ensure menu doesn't go off-screen using windowSize
+        if (left + menuWidth > windowSize.width) {
+            left = windowSize.width - menuWidth - 10; // 10px margin
+        }
+        if (left < 10) {
+            left = 10; // 10px margin
+        }
+        
+        setMenuPosition({ 
+            top: rect.top + window.scrollY + 30, 
+            left: left
+        });
+    }
+};
+
+    const handleLanguageMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        
+        // Clear any existing timeout
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        
+        setOpen(true);
+        calculateMenuPosition();
+    };
+
+    const handleLanguageClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        setOpen(prevOpen => !prevOpen);
+        calculateMenuPosition();
+    };
+
+    const handleMouseLeave = () => {
+        if (!webView) {
+            // Add a small delay before closing to allow moving to menu
+            timeoutRef.current = setTimeout(() => {
+                setOpen(false);
+            }, 100);
+        }
+    };
+
+    const handleMenuMouseEnter = () => {
+        // Clear timeout when entering menu
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    };
+
+    const handleMenuMouseLeave = () => {
+        if (!webView) {
+            setOpen(false);
+        }
+    };
+
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+
+    // Recalculate position on screen resize
+    useEffect(() => {
+        const handleResize = () => {
+            if (open) {
+                calculateMenuPosition();
+            }
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, [open, isSmallScreen]);
+
+    return (
+        <>
+            <div
+                ref={avatarRef}
+               
+                {... !webView ? { 
+                    onMouseEnter: handleLanguageMouseEnter, 
+                    onMouseLeave: handleMouseLeave 
+                } : { 
+                    onClick: handleLanguageClick 
+                }}
+            >
+                <Avatar 
+                    sizes='small' 
+                    sx={{ fontSize: '1rem' }}
+                    style={{
+                        width: '30px',
+                        height: '30px',
+                        minHeight: '30px'
+                    }}
+                  className='dash-icon-button-color dash-icon-button-bg'
+                >
+                    {getNameForLocale(locale).substring(0, 2).toUpperCase()}
+                </Avatar>
+            </div>
+
+            {open && ReactDOM.createPortal(
+                <div 
+                    ref={menuRef}
+                    className="dash-language-menu-portal"
+                    onMouseEnter={!webView ? handleMenuMouseEnter : undefined}
+                    onMouseLeave={!webView ? handleMenuMouseLeave : undefined}
+                >
+                    <div
+                        className={`dash-language-menu ${open ? 'show' : ''}`}
+                        style={{
+                            zIndex: 10000,
+                            position: 'absolute',
+                            top: menuPosition.top,
+                            left: menuPosition.left,
+                        }}
+                    >
+                        {languages.map(language => (
+                            <div
+                                key={language.locale}
+                                className={`dash-language-menu-item ${language.locale === locale ? 'selected' : ''}`}
+                                onClick={changeLocale(language.locale)}
+                                style={{
+                                    padding: '8px 16px',
+                                    cursor: 'pointer',
+                                    backgroundColor: language.locale === locale ? 'rgba(0, 0, 0, 0.08)' : 'transparent',
+                                    minWidth: '150px'
+                                }}
+                            >
+                                {language.name}
+                            </div>
+                        ))}
+                    </div>
+                </div>,
+                document.body
+            )}
+        </>
+    );
+};
+
+export default LangSwitcher;

package/src/components/loader/GlobalLoader.tsx

@@ -0,0 +1,56 @@
+/**
+ * @author Francisco Aranda - @farandal - http://www.linkedin.com/in/farandal
+ * @email farandal@gmail.com
+ * @create date 2021-06-30
+ * @desc @farandal React Boilerplate Framework - 2020
+ */
+
+import { deepmerge } from '@mui/utils';
+
+import React, { PropsWithChildren, useEffect } from 'react';
+import LoadingOverlay from 'react-loading-overlay-ts';
+import useGlobalLoaderMgr from '../../hooks/useGlobalLoaderMgr';
+
+interface IGlobalLoader extends PropsWithChildren {
+	styles?: any;
+}
+
+const GlobalLoader: React.FC<IGlobalLoader> = ({
+	styles,
+    children,
+	...props
+}) => {
+	const [loading, setLoading] = useGlobalLoaderMgr();
+
+  
+    
+    	useEffect(() => {
+    		console.log('GlobalLoader loading state changed:', loading);
+    1	}, [loading]);
+    
+
+    const _styles = deepmerge(
+        {
+            wrapper: {
+                width: '100%',
+                height: '100%',
+                overflow: loading ? 'hidden' : 'scroll',
+            },
+            overlay: (base) => ({
+                ...base,
+            }),
+        },
+        styles
+    );
+
+   
+    return loading ? <LoadingOverlay
+        className='loadingOverlay'
+        active={loading}
+        styles={_styles}
+        spinner={children}
+    /> : <></>
+
+};
+
+export default GlobalLoader;

package/src/components/logs/LogFile.tsx

@@ -0,0 +1,88 @@
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  TextareaAutosize,
+} from '@mui/material';
+
+import React, { useEffect, useState } from 'react';
+import { useRecordContext } from 'react-admin';
+import useAxios from '../../hooks/axios';
+import { saveAs } from 'file-saver';
+import { ILog, ILogTxtFileComponent } from '../../interfaces/Log';
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+
+export const LogTxtFileComponent: React.FC<ILogTxtFileComponent> = ({
+  log,
+}) => {
+  const { axios } = useAxios();
+
+  const [logFile, setlogFile] = useState<Blob>(null);
+  const [logContent, setlogContent] = useState<string>(null);
+
+  const downloadLog = async () => {
+    let fileName = log.filepath.split('/')[log.filepath.split('/').length - 1];
+    saveAs(logFile, fileName);
+  };
+  const preLoadLog = async (logID) => {
+    if (log?.filepath) {
+      const { data: file } = await axios.get(`/system/log/${log.id}/download`, {
+        responseType: 'blob',
+      });
+
+      let fileContent = await file.text();
+
+      setlogFile(file);
+      setlogContent(fileContent);
+    } else {
+      setlogContent('Proceso completado correctamente');
+    }
+  };
+
+  useEffect(() => {
+    preLoadLog(log);
+  }, []);
+
+  return (
+    <DialogContent>
+      <TextareaAutosize
+        style={{ width: '100%' }}
+        maxRows={50}
+        defaultValue={logContent !== '' ? logContent : ' Cargando... '}
+      />
+      {log?.filepath && (
+        <DialogActions>
+          <Button onClick={() => downloadLog()}>Descargar</Button>{' '}
+        </DialogActions>
+      )}
+    </DialogContent>
+  );
+};
+
+const LogTxtFileEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+  method,
+  attribute,
+}) => {
+  const log: ILog = useRecordContext();
+  return <LogTxtFileComponent log={log} />;
+};
+
+const LogTxtFileView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+  method,
+  attribute,
+}) => {
+  const log: ILog = useRecordContext();
+  return <LogTxtFileComponent log={log} />;
+};
+
+const LogTxtFile = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+  switch (method) {
+    case 'edit':
+    case 'create':
+      return <LogTxtFileEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+    case 'view':
+      return <LogTxtFileView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+  }
+};
+
+export default LogTxtFile;

package/src/components/logs/LogFileById.tsx

@@ -0,0 +1,68 @@
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  TextareaAutosize,
+} from '@mui/material';
+
+import React, { useEffect, useState } from 'react';
+import useAxios from '../../hooks/axios';
+import { saveAs } from 'file-saver';
+
+interface LogFileByIdProps {
+  id: string | number;
+}
+
+export const LogFileById: React.FC<LogFileByIdProps> = ({ id }) => {
+  const { axios } = useAxios();
+ 
+  const [logFile, setLogFile] = useState<Blob>(null);
+  const [logContent, setLogContent] = useState<string>(null);
+  const [filepath, setFilepath] = useState<string>(null);
+
+  const downloadLog = async () => {
+    if (filepath) {
+      let fileName = filepath.split('/')[filepath.split('/').length - 1];
+      saveAs(logFile, fileName);
+    }
+  };
+
+  const preLoadLog = async () => {
+    try {
+      const { data: file } = await axios.get(`/system/log/${id}/download`, {
+        responseType: 'blob',
+      });
+
+      const { data: logData } = await axios.get(`/system/log/${id}`);
+      setFilepath(logData.filepath);
+
+      let fileContent = await file.text();
+
+      setLogFile(file);
+      setLogContent(fileContent);
+    } catch (error) {
+      setLogContent('Error al cargar el archivo');
+    }
+  };
+
+  useEffect(() => {
+    preLoadLog();
+  }, [id]);
+
+  return (
+    <DialogContent>
+      <TextareaAutosize
+        style={{ width: '100%' }}
+        maxRows={50}
+        defaultValue={logContent !== '' ? logContent : ' Cargando... '}
+      />
+      {filepath && (
+        <DialogActions>
+          <Button onClick={downloadLog}>Descargar</Button>
+        </DialogActions>
+      )}
+    </DialogContent>
+  );
+};
+
+export default LogFileById;

package/src/components/logs/LogViewer.tsx

@@ -0,0 +1,43 @@
+import { IDashAutoAdminCustomFieldComponent } from 'dash-auto-admin';
+import React from 'react';
+import { useRecordContext } from 'react-admin';
+
+export interface ILogViewerComponent {
+	log: any;
+}
+export const LogViewerComponent: React.FC<ILogViewerComponent> = ({ log }) => {
+	return (
+		<>
+			<h1>Log</h1>
+		</>
+	);
+};
+
+const LogViewerEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+	method,
+	attribute,
+}) => {
+	const log = useRecordContext();
+
+	return <>{log && <LogViewerComponent log={log} />}</>;
+};
+
+const LogViewerView: React.FC<IDashAutoAdminCustomFieldComponent> = ({
+	method,
+	attribute,
+}) => {
+	const log: any = useRecordContext();
+	return <>{log && <LogViewerComponent log={log} />}</>;
+};
+
+const LogViewer = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+	switch (method) {
+		case 'edit':
+		case 'create':
+			return <LogViewerEdit attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+		case 'view':
+			return <LogViewerView attribute={attribute} method={method} resourceConfig={resourceConfig} />;
+	}
+};
+
+export default LogViewer;

package/src/components/menu/AppMenu.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export interface IAppMenu {
+  //hasDashboard: boolean;
+  children?: React.ReactNode;
+  autoHideScroll?: boolean;
+  [key: string]: any;
+}
+
+// Group icons
+export const AppMenu: React.FC<IAppMenu> = ({
+  hasDashboard,
+  autoHideScroll = false,
+  children,
+}) => {
+  
+  return (
+    <>
+      Deprecated
+    </>
+  );
+};