@dashadmin/dash-admin 1.3.24 → 1.3.26

package/src/tenantResources.tsx

@@ -0,0 +1,223 @@
+import { TableContainer } from '@mui/material';
+// eslint-disable-next-line import/no-extraneous-dependencies
+//import Dashboard from '@mui/icons-material/Dashboard';
+import Person from '@mui/icons-material/Person';
+import { SelectInput } from 'react-admin';
+import { ImageInput } from 'react-admin';
+import { SelectArrayInput } from 'react-admin';
+import ResourceTemplate from './templates/ResourceTemplate';
+import IAppResourceConfig from './interfaces/IAppResourceConfig';
+import permissionSchema from './schemas/permissions';
+
+import roleSchema from './schemas/roles';
+import TrashTemplate from './resources/Trash/TrashTemplate';
+//import ImpersonateTenantResource, { TenantImpersonateResource } from './resources/Tenant/ImpersonateTenantResource';
+import tenantSystemAdminSchema from './schemas/tenant_superadmin';
+import notificationSchema from './schemas/notification';
+import LogResource from './resources/Log/LogResource';
+import logSchema from './schemas/log';
+
+import {DASHAppConstants} from 'dash-constants';
+
+/**
+ * Configures the system resources for the DASH Admin application.
+ * This includes resources such as permissions, roles, users, and tenant impersonation.
+ * The configuration is defined as an array of `IAppResourceConfig` objects, which specify
+ * the details of each resource, including its component, model, label, schema, icon, and menu.
+ * The configuration also includes settings for the data grid, such as sticky headers and maximum height.
+ */
+
+const drawerSettings = {
+  drawer: true,
+  drawerOptions: {
+    view: true,
+    edit: false,
+    create: false,
+  },
+  listViewButton: { props: { buttonProps: { variant: 'text', size: 'small' }, label: '' } },
+  listEditButton: { props: { buttonProps: { variant: 'text', size: 'small' }, label: '' } },
+  listDeleteButton: { confirm: true, props: { buttonProps: { variant: 'text', size: 'small' }, label: '' } },
+};
+
+const tenantResources: IAppResourceConfig[] = [
+  {
+    roles: [DASHAppConstants.system.SYSTEM_ROLE, DASHAppConstants.system.TENANT_ROLE],
+    component: ResourceTemplate,
+    trash: true,
+  
+    model: 'system/user',
+    group: 'resource.groups.system_resources',
+    label: 'Usuarios',
+    referenceFilters: [
+      // TODO: Cuando se cambia el cliente se debn mostrar sólo los CP de este filtro
+      {
+        id: 'search',
+        label: 'Buscar',
+        source: 'q',
+        reference: null,
+        optionText: '', // field from the model
+        alwaysOn: true,
+      },
+    ],
+    schema: [
+      {
+        label: 'Nombre',
+        attribute: 'name',
+        type: String,
+        tab: 'Datos Usuario',
+        //validate: (name: string) => (name && name.length >= 3 ? undefined : <div>Name is too short</div>)
+      },
+      /*{
+        label: "Apellido",
+        attribute: "lastname",
+        type: String,
+        tab: "Datos Usuario",
+        //validate: (name: string) => (name && name.length >= 3 ? undefined : <div>Name is too short</div>)
+      },*/
+      {
+        label: 'Email',
+        attribute: 'email',
+        type: String,
+        tab: 'Datos Usuario',
+        //validate: (email: string) => (email && email.indexOf('@') > 0 ? undefined : 'Invalid email')
+      },
+      {
+        label: 'Contraseña',
+        attribute: 'password',
+        type: String,
+        isPassword: true,
+        fieldProps: { fullWidth: true },
+        inList: false,
+        tab: 'Contraseña',
+        validate: (password: string) => {
+          if (password && password.length < 6 && password.length > 1) {
+            throw Error('Min 6 caracteres');
+          }
+        },
+      },
+      {
+        label: 'Confirmar Contraseña',
+        attribute: 'password_confirmation',
+        type: String,
+        isPassword: true,
+        fieldProps: { fullWidth: true },
+        inList: false,
+        tab: 'Contraseña',
+        validate: (password: string, values: any) => {
+          if (values?.password !== password) {
+            throw Error('Contraseñas no coinciden.');
+          }
+        },
+      },
+      {
+        // @TODO Solo mostrar cuando se está creando:
+        label: 'Genear Contraseña Aleatorea Automáticamente',
+        attribute: 'generate_password',
+        type: Boolean,
+        inList: false,
+        tab: 'Contraseña',
+      },
+      {
+        tab: 'Datos Usuario',
+        label: 'Roles',
+        attribute: 'role_ids',
+        //listAttribute: 'name',
+        type: 'system/role.name',
+        //type: Object,
+        // TODO Agregar un filtro, solo para traer los roles de cliente.
+        pagination: false,
+        multiple: true,
+        //custom: true,
+        //componentProps:{ options: {fullwidth: true} },
+        component: SelectArrayInput,
+        //searchField: "subdomain"
+      },
+      {
+        attribute: 'active',
+        type: Boolean,
+        inList: true,
+        label: 'Activo',
+        tab: 'Datos Usuario',
+        processor: 'Boolean',
+      },
+      {
+        attribute: 'avatar',
+        listAttribute: 'system/userclients.avatar',
+        type: ImageInput, // TODO: el componente no muestra la imágen
+        inList: false,
+        label: 'Imágen',
+        tab: 'Datos Usuario',
+        processor: 'RawFile',
+        //validate: (password: string) => (password && password.length >= 6 ? undefined : <div>Password is too short</div>)
+      },
+      {
+        tab: 'Datos Usuario',
+        label: 'Cliente',
+        attribute: 'tenant_id',
+        //listAttribute: 'name',
+        type: 'system/tenant.name',
+        //type: Object,
+        // TODO Agregar un filtro, solo para traer los roles de cliente.
+        pagination: false,
+        multiple: false,
+        //custom: true,
+        //componentProps: {multiple:false},
+        //componentProps: { options: {fullwidth: true} },
+        component: SelectInput,
+        //searchField: "subdomain"
+        processor: 'Null',
+      },
+    ],
+    //references: [{ reference: 'roles', target: 'role', schema: rolesSchema }]
+    //references: [{ reference: 'roles', target: 'id', schema: roleSchema }],
+    icon: <Person />,
+    redirectAfterUpdate: false,
+    menu: [
+      {
+        title: 'Usuarios',
+        redirect: '/system/user',
+      },
+    ],
+    //{
+    //    title: "🗑",
+    //    redirect: "/trash/admin/user",
+    //}],
+    mainAction: {
+      title: 'Crear usuario',
+      // type: "ghost",
+      redirect: '/system/user/create',
+    },
+    mutationMode: 'pessimistic',
+    //isFormData: true,
+    isFormData: false,
+    dataGridProps: { stickyHeader: true },
+    dataGridWrapper: (props: any) => (
+      <TableContainer sx={{ maxHeight: 800 }}>{props.children}</TableContainer>
+    ),
+    /*formPostFormatter: (params, form) => {
+        
+      return form;
+    },*/
+    postFormatter: (params, method) => {
+        
+      /* if (!params.meta) {
+        params.meta = {
+          method: "PUT",
+        };
+      } else {
+        params.meta.method = "PUT";
+      }*/
+     
+      if (method === 'update') {
+        params._method = 'PUT';
+      }
+      params.role_id = params.role_ids ? params.role_ids[0] : null;
+
+      return params;
+    },
+    ...drawerSettings,
+  },
+
+];
+
+export default tenantResources;

package/src/test_portal_bubbles.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+
+const SidebarItem = ({ children, onTouchStart }) => {
+    console.log('SidebarItem render');
+    return (
+        <div 
+            onTouchStart={(e) => {
+                console.log('Parent onTouchStart');
+                if (onTouchStart) onTouchStart(e);
+            }}
+            style={{ padding: '20px', border: '1px solid black' }}
+        >
+            Parent Item
+            {children}
+        </div>
+    );
+};
+
+const SubmenuItem = () => {
+    return (
+        <div 
+            onTouchStart={(e) => {
+                console.log('Child onTouchStart');
+                // e.stopPropagation(); // If we don't stop this, it bubbles to parent in React tree
+            }}
+            onClick={() => console.log('Child Click')}
+            style={{ padding: '10px', background: 'red' }}
+        >
+            Child (Portaled in React tree)
+        </div>
+    );
+};
+
+export default function Test() {
+    return (
+        <SidebarItem onTouchStart={() => console.log('Closing menu')}>
+            <SubmenuItem />
+        </SidebarItem>
+    );
+}

package/src/theme/AppHeader.tsx

@@ -0,0 +1,52 @@
+import React, { FC, JSX, ReactNode, useEffect } from 'react';
+import { Children } from 'react';
+
+import { useSelector } from 'react-redux';
+import { IPageState, IDASHAppState } from 'dash-admin-state';
+import PageTitle from './components/PageTitle';
+import { Box } from '@mui/material';
+
+export interface IAppHeader {
+	//toolbar: ReactNode[],
+	children?: JSX.Element;
+}
+
+const AppHeader: React.FC<IAppHeader> = ({
+	//toolbar,
+	children,
+	...props
+}) => {
+	const page: IPageState = useSelector(
+		(state: IDASHAppState<any, any, any>) => state.page,
+	);
+	const HeaderToolBar: FC = useSelector(
+		(state: IDASHAppState<any, any, any>) => state.common.headerToolBar,
+	);
+
+    return (
+        <Box className="dash-header" sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', px: 2, py: 1 }}>
+            {children ? (
+                children
+            ) : (
+                <PageTitle
+                    className="dash-header-title dash-d-lg-block"
+                    avatar={page.icon}
+                    title={page.title}
+                    subTitle={page.subTitle}
+                />
+            )}
+            <Box
+                className="dash-header-items"
+                sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    ml: 'auto',
+                }}
+            >
+                <HeaderToolBar />
+            </Box>
+        </Box>
+    );
+};
+
+export default AppHeader;

package/src/theme/AppLayoutSetting.tsx

@@ -0,0 +1,33 @@
+class AppLayoutSettings {
+	static TAB_SIZE = 992;
+	static MOBILE_SIZE = 575;
+	static THEME_TYPE = 'THEME_TYPE';
+	static THEME_TYPE_LIGHT = 'light';
+	static THEME_TYPE_DARK = 'dark';
+	static THEME_TYPE_DASH_DEFAULT = 'light';
+	static THEME_TYPE_SEMI_DARK = 'THEME_TYPE_SEMI_DARK';
+	static THEME_COLOR = 'THEME_COLOR';
+	static UPDATE_RTL_STATUS = 'UPDATE_RTL_STATUS';
+	static LAYOUT_TYPE = 'LAYOUT_TYPE';
+	static LAYOUT_TYPE_FRAMED = 'framed-layout';
+	static LAYOUT_TYPE_BOXED = 'boxed-layout';
+	static LAYOUT_TYPE_FULL = 'full-layout';
+	static NAV_STYLE = 'NAV_STYLE';
+	static NAV_STYLE_FIXED = 'NAV_STYLE_FIXED';
+	static NAV_STYLE_MINI_SIDEBAR = 'NAV_STYLE_MINI_SIDEBAR';
+	static NAV_STYLE_DRAWER = 'NAV_STYLE_DRAWER';
+	static NAV_STYLE_NO_HEADER_MINI_SIDEBAR = 'NAV_STYLE_NO_HEADER_MINI_SIDEBAR';
+	static NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR =
+		'NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR';
+	static NAV_STYLE_DEFAULT_HORIZONTAL = 'NAV_STYLE_DEFAULT_HORIZONTAL';
+	static NAV_STYLE_DARK_HORIZONTAL = 'NAV_STYLE_DARK_HORIZONTAL';
+	static NAV_STYLE_INSIDE_HEADER_HORIZONTAL =
+		'NAV_STYLE_INSIDE_HEADER_HORIZONTAL';
+	static NAV_STYLE_BELOW_HEADER = 'NAV_STYLE_BELOW_HEADER';
+	static NAV_STYLE_ABOVE_HEADER = 'NAV_STYLE_ABOVE_HEADER';
+	static NAV_STYLE_COLLAPSABLE = 'NAV_STYLE_COLLAPSABLE';
+
+	
+}
+
+export default AppLayoutSettings;

package/src/theme/AppLogo.tsx

@@ -0,0 +1,13 @@
+import React, { FC, JSX } from 'react';
+
+export interface IAppLogo {
+	type?: 'logo';
+	horizontalLogo: JSX.Element;
+	squaredLogo: JSX.Element;
+}
+
+const AppLogo: FC<IAppLogo> = ({ type = 'logo', horizontalLogo, squaredLogo }) => {
+	return type === 'logo' ? horizontalLogo : squaredLogo;
+};
+
+export default AppLogo;

package/src/theme/AppSidebar.tsx

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+
+export interface IAppSidebar {
+	navStyle: any;
+	children?: ReactNode;
+}
+const AppSidebar: React.FC<IAppSidebar> = ({
+	children,
+	navStyle,
+	...props
+}) => <>Deprecated</>
+export default AppSidebar;

package/src/theme/AppSidebarContent.tsx

@@ -0,0 +1,105 @@
+import React, { JSX, ReactNode } from 'react';
+import AppSidebarLogo from './AppSidebarLogo';
+import { useSelector } from 'react-redux';
+
+import AppLayoutSettings from './AppLayoutSetting';
+
+import MenuOpenIcon from '@mui/icons-material/MenuOpen'	
+import MenuIcon from '@mui/icons-material/Menu'	
+import { IDASHAppState } from 'dash-admin-state';
+
+
+
+export interface IAppSidebarContent {
+	sidebarExpanded: any;
+	setSidebarExpanded: any;
+	navStyle: any;
+	themeType: any;
+	horizontalLogo: JSX.Element;
+	squaredLogo?: JSX.Element;
+	children?: ReactNode;
+}
+
+const SidebarContent: React.FC<IAppSidebarContent> = ({
+	sidebarExpanded,
+	setSidebarExpanded,
+	navStyle,
+	themeType,
+	// @ts-ignore - logo prop not in interface
+	logo,
+	squaredLogo,
+	children,
+	...props
+}) => {
+	const pathname = useSelector((state: IDASHAppState<any, any, any>) => state.common.pathname);
+
+	const getNoHeaderClass = (navStyle) => {
+		if (
+			navStyle === AppLayoutSettings.NAV_STYLE_NO_HEADER_MINI_SIDEBAR ||
+			navStyle === AppLayoutSettings.NAV_STYLE_NO_HEADER_EXPANDED_SIDEBAR
+		) {
+			return 'dash-no-header-notifications';
+		}
+		return '';
+	};
+
+	const selectedKeys = pathname.substr(1);
+	//const defaultOpenKeys = selectedKeys.split('/')[1];
+
+	return (
+		<>
+			
+			<AppSidebarLogo
+				sidebarExpanded={sidebarExpanded}
+				setSidebarExpanded={setSidebarExpanded}
+                /* @ts-ignore - logo prop not in interface */
+				logo={logo}
+				squaredLogo={squaredLogo}
+			/>
+
+			<div className='sidebar-content'>
+				{navStyle != AppLayoutSettings.NAV_STYLE_COLLAPSABLE &&
+				navStyle ===
+					AppLayoutSettings.NAV_STYLE_FIXED /*|| navStyle === NAV_STYLE_MINI_SIDEBAR*/ ? (
+					<div className='dash-linebar'>
+						<div className='sidebar-icon'>
+							<i
+								// className={`dash-icon-btn icon icon-${!sidebarExpanded ? 'menu-unfold' : 'menu-fold'} ${themeType !== THEME_TYPE_LIGHT ? 'dash-text-white' : ''}`}
+								// className={`sidebar-menu ${themeType !== THEME_TYPE_LIGHT ? 'dash-text-white' : ''}`}
+								className={`sidebar-menu`}
+								onClick={() => {
+									setSidebarExpanded(!sidebarExpanded);
+								}}
+							>
+								{sidebarExpanded ? (
+									<MenuOpenIcon sx={{ fontSize: 24 }} />
+								) : (
+									<MenuIcon sx={{ fontSize: 24 }} />
+								)}
+
+					</i>
+						</div>
+					</div>
+				) : null}
+
+				{navStyle === AppLayoutSettings.NAV_STYLE_COLLAPSABLE ? (
+					<div
+						onMouseEnter={() => setSidebarExpanded(true)}
+						onMouseLeave={() => setSidebarExpanded(false)}
+					>
+						{children}
+					</div>
+				) : (
+					children
+				)}
+
+				{/*<Auxiliary>
+            <UserProfile/>
+          </Auxiliary>*/}
+			</div>
+		</>
+	);
+};
+
+//export default React.memo(SidebarContent);
+export default SidebarContent;

package/src/theme/AppSidebarLogo.tsx

@@ -0,0 +1,48 @@
+import React, { JSX } from 'react';
+import { useSelector } from 'react-redux';
+
+import AppLogo from './AppLogo';
+export interface IAppSidebarLogo {
+	horizontalLogo: JSX.Element;
+	squaredLogo?: JSX.Element;
+	setSidebarExpanded?: Function;
+	sidebarExpanded: boolean;
+}
+const AppSidebarLogo: React.FC<IAppSidebarLogo> = ({
+	// @ts-ignore - logo prop not in interface
+	logo,
+	sidebarExpanded,
+	squaredLogo,
+	setSidebarExpanded,
+	...props
+}) => {
+	/*const {themeType} =useSelector((state:IDASHAppState) => state.settings);
+  const {width} =useSelector((state:IDASHAppState) => state.common);
+
+  let navStyle =useSelector((state:IDASHAppState) => state.settings.navStyle);*/
+	/*if (width < TAB_SIZE && navStyle === NAV_STYLE_FIXED) {
+    navStyle = NAV_STYLE_DRAWER;
+  }*/
+
+	return (
+		<div className='dash-layout-sider-header'>
+			{!sidebarExpanded ? (
+				// @ts-ignore - AppLogo props compatibility issue
+				<AppLogo type='logo' logoBig={logo} squaredLogo={squaredLogo} />
+			) : (
+				// @ts-ignore - AppLogo props compatibility issue
+				<AppLogo type='iso' logoBig={logo} squaredLogo={squaredLogo} />
+			)}
+
+			{/*<Link to="/" className="dash-site-logo">
+        {navStyle === NAV_STYLE_NO_HEADER_MINI_SIDEBAR && width >= TAB_SIZE ?
+          <img alt="lo" src={("/assets/images/w-logo.png")}/> :
+          themeType === THEME_TYPE_LIGHT ?
+            <img alt="logo1" src={("/assets/images/logo-white.png")}/> :
+            <img alt="logo2" src={("/assets/images/logo.png")}/>}
+      </Link>*/}
+		</div>
+	);
+};
+
+export default AppSidebarLogo;

package/src/theme/components/PageTitle.tsx

@@ -0,0 +1,37 @@
+// @Deprecated: not in use.
+
+import React, { PropsWithChildren, ReactNode } from 'react';
+
+export interface IPageTitle extends PropsWithChildren {
+	avatar: ReactNode;
+	// @ts-ignore - JSX namespace issue
+	title: string | JSX.Element;
+	subTitle?: string;
+	className?: string;
+	// @ts-ignore - JSX namespace issue
+	extra?: JSX.Element[];
+	// custom component props
+}
+
+const PageTitle: React.FC<IPageTitle> = ({
+	avatar,
+	title,
+	subTitle,
+	className,
+	extra,
+	children,
+	...props
+}) => {
+
+    if(!title || title === "") { return <></>}
+	return (
+		<div className={`dash-page-header ${className || ''}`} {...props}>
+			<h3>{title}</h3>
+			<b>{subTitle}</b>
+			{/*...(avatar && {avatar:{src: avatar}})*/}
+			{children || extra}
+		</div>
+	);
+};
+
+export default PageTitle;

package/src/utils/cache/CacheInvalidatorContext.tsx

@@ -0,0 +1,125 @@
+
+import React, {
+	FC,
+	PropsWithChildren,
+	useContext,
+	useEffect
+} from 'react';
+import useLocalStorage from '../../hooks/useLocalStorage';
+import { dashStorage } from 'dash-utils';
+
+const currentTimestamp = ():string => {
+	const currentdate = new Date(); 
+	const datetime = currentdate.getFullYear() + ""
+                    + (currentdate.getMonth()+1) + "" 
+                    + currentdate.getDate() + ""  
+                    + currentdate.getHours() + ""  
+                    + currentdate.getMinutes() + "" 
+                    + currentdate.getSeconds();
+
+										return datetime;
+}
+
+export class CacheInvalidatorContextClass {
+	static values: Partial<ICacheInvalidatorContextProps>;
+}
+
+export interface ICacheInvalidatorStore {
+  [x:string]: string
+}
+
+export interface ICacheInvalidatorContextProps {
+	cacheInvalidatorStore: ICacheInvalidatorStore;
+}
+
+export interface ICacheInvalidatorContext extends Partial<ICacheInvalidatorContextProps> {
+	updateEntry: (entry: string) => void;
+  //removeEntry: (entry: string) => void;
+}
+
+const defaultValues: ICacheInvalidatorContextProps = {
+	cacheInvalidatorStore: {},
+};
+
+export const CacheInvalidatorContext = React.createContext<ICacheInvalidatorContext>(null);
+
+export interface ICacheInvalidatorContextProvider extends PropsWithChildren {
+	values?: Partial<ICacheInvalidatorContextProps>;
+}
+export const CacheInvalidatorContextProvider: FC<ICacheInvalidatorContextProvider> = (props) => {
+	const { children, values } = props;
+
+	const initialValue = JSON.stringify(values || defaultValues);
+	
+	const [currentValues, setCurrentValues] = useLocalStorage(
+		'SerializedCacheInvalidatorContext',
+		initialValue,
+	);
+
+	const updateEntry = (entry: string) => {
+		setCurrentValues((state) => {
+
+			//const _state:ICacheInvalidatorContextProps = JSON.parse(state);
+			const _state:ICacheInvalidatorContextProps = typeof state === "string" ? JSON.parse(state) : state;
+			_state.cacheInvalidatorStore = !!_state.cacheInvalidatorStore ? {..._state.cacheInvalidatorStore, ...{[entry]: currentTimestamp() }} : {[entry]: currentTimestamp() }
+			return _state;
+		});
+	};
+	// Deuda Técnica: Tch debt: el currentValues no se propaga con el useEffect. es posible accederlo por el localstorage cuando es requerido
+	// sin embargo, cuando se actualiza el currentValue no se puede acceder a él por useState, posiblemente por memoización, no ocurre el re-render. 
+	// Bug minor - No afecta la característica.
+	return (
+		<CacheInvalidatorContext.Provider value={{ ...currentValues, updateEntry }}>
+			{children}
+		</CacheInvalidatorContext.Provider>
+	);
+  
+};
+
+export const CacheInvalidatorContextConsumer = CacheInvalidatorContext.Consumer;
+
+export const useCacheInvalidatorContext = () => {
+	const cacheInvalidatorContext: ICacheInvalidatorContext = useContext(CacheInvalidatorContext);
+	return cacheInvalidatorContext;
+};
+
+export const getCacheInvalidatorContext = () => {
+	const response = JSON.parse(
+		dashStorage.getItem('SerializedCacheInvalidatorContext')
+	) as ICacheInvalidatorContextProps;
+
+	return response;
+};
+
+function findKeysWithStringValue(obj, searchString) {
+	return Object.keys(obj).filter(key => {
+		 return searchString.includes(key);
+	});
+ }
+
+export const cacheInvalidatorHash = (resource:string): string | null => {
+
+	const store = getCacheInvalidatorContext();
+	if(!store) return null;
+
+	const find =  findKeysWithStringValue(store.cacheInvalidatorStore, resource);
+
+	if(!find) return null;
+	return store.cacheInvalidatorStore[find[0]]
+	
+}
+
+export const updateCacheInvalidatorContext = (values: Partial<ICacheInvalidatorContextProps>) => {
+	const prevState = getCacheInvalidatorContext();
+
+	dashStorage.setItem(
+		'SerializedCacheInvalidatorContext',
+		JSON.stringify({ ...prevState, ...values }),
+	);
+};
+
+export const setCacheInvalidatorContext = (values: Partial<ICacheInvalidatorContextProps>) => {
+	dashStorage.setItem('SerializedCacheInvalidatorContext', JSON.stringify(values));
+};
+
+export default CacheInvalidatorContext;