@dashadmin/dash-admin 1.3.25 → 1.3.26

package/src/components/tenant/TenantAttributes.tsx

@@ -0,0 +1,153 @@
+import { DashAutoFormGroups, DashAutoFormTabs, IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+import React, { useState, useEffect, useContext, createContext, useRef } from "react";
+import { useGetList, Loading, useRecordContext } from "react-admin";
+import { useAxios } from 'dash-axios-hook';
+import { useFormContext, useWatch } from "react-hook-form";
+import { Tenant } from "../../interfaces/Tenant";
+import MUISimpleJsonTable from "../misc/MuiSimpleJsonTable";
+import { useTenantAttributesFormats } from "./TenantAttributesContext";
+import { useSystemRequestsCache } from "../../contexts/SystemRequestsCache";
+
+/** Wrapper creating a React component boundary so DashAutoFormTabs hooks don't violate Rules of Hooks */
+const FormTabsRenderer: React.FC<{schema: any; method: "list" | "create" | "edit" | "view"; label: string}> = ({schema, method, label}) => (
+    <>{DashAutoFormTabs({schema, resourceConfig: null, options: {mode: method, label}})}</>
+);
+
+const TenantAttributesEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, tenant }) => {
+  const [attributeFormatsSchema, setAttributeFormatsSchema] = useState<any>(null);
+  /*const formContext = useFormContext();
+  const formValues = useWatch({
+    control: formContext.control
+  });*/
+
+  const { formats: formatsData, loading } = useSystemRequestsCache();
+
+  useEffect(() => {
+    if (formatsData && formatsData.data && formatsData.data.attribute_formats) {
+     
+      const parsedSchema = formatsData.data.attribute_formats.map((entry) => {
+        /*const defaultValue =
+          (tenant.attributes && tenant.attributes[entry.attribute]) ||
+          entry?.default_value;
+*/
+
+        const settingName = entry.attribute ? entry.attribute.replace('attributes.', '') : entry.id;
+        
+        const defaultValue =
+          (tenant.attributes && tenant.attributes[settingName]) ||
+          entry?.default_value;
+    
+        return {
+          ...entry,
+          .../*method === "edit" &&*/ ((defaultValue !== null ||
+            defaultValue !== undefined) && {
+            fieldOptions: {
+              defaultValue: defaultValue,
+              fullWidth: true,
+            },
+          }),
+          ...(method === 'view' && {
+            readOnly: true,
+          }),
+        };
+      });
+
+      console.log('ATTRIBUTES SCHEMA', parsedSchema);
+
+      setAttributeFormatsSchema(parsedSchema);
+
+    }
+
+  }, [formatsData])
+
+  return <section>
+    {attributeFormatsSchema && <FormTabsRenderer schema={attributeFormatsSchema} method={method} label="Datos de contacto" />}
+  </section>
+
+}
+
+const TenantAttributesCreate: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute }) => {
+  
+  const [attributeFormatsSchema, setAttributeFormatsSchema] = useState<any>(null);
+  /*const formContext = useFormContext();
+  const formValues = useWatch({
+    control: formContext.control
+  });*/
+
+  const { formats: formatsData, loading } = useSystemRequestsCache();
+
+  useEffect(() => {
+
+    if (!loading && formatsData && formatsData.data && formatsData.data.attribute_formats) {
+      const parsedSchema = formatsData.data.attribute_formats.map((entry) => ({
+        ...entry,
+        ...(method === 'view' && {
+          readOnly: true,
+        }),
+      }));
+
+      setAttributeFormatsSchema(parsedSchema);
+
+    }
+
+  }, [formatsData, loading])
+
+  return <section>
+    {attributeFormatsSchema && <FormTabsRenderer schema={attributeFormatsSchema} method={method} label="Datos de contacto" />}
+  </section>
+
+}
+
+const TenantAttributesView: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, tenant }) => {
+
+  const { formats: attributeFormats, loading } = useTenantAttributesFormats();
+  const [attributeFormatsParsedValues, setAttributeFormatsParsedValues] = useState<any>(null);
+
+  const parseValue = (value) => {
+    switch (typeof value) {
+      case "boolean":
+        return value ? "Sí" : "No";
+      case "number":
+      case "string":
+      default:
+        return value
+    }
+  }
+
+  useEffect(() => {
+    let object = {};
+    if (attributeFormats && tenant) {
+
+      attributeFormats.forEach((entry) => {
+        const defaultValue = tenant.attributes && tenant.attributes.hasOwnProperty(entry.id) ? tenant.attributes[entry.id] : entry?.default_value;
+
+        object[entry.label] = <>{parseValue(defaultValue)}</>;
+      });
+
+      console.log("ATTRIBUTES SCHEMA", object);
+
+      setAttributeFormatsParsedValues(object);
+
+    }
+
+  }, [attributeFormats, tenant])
+
+  return attributeFormatsParsedValues ? <MUISimpleJsonTable tableData={attributeFormatsParsedValues} vertical={true} /> : <Loading />
+
+}
+
+const TenantAttributes = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+  const tenant: Tenant = useRecordContext();
+  switch (method) {
+    case "edit":
+      return <TenantAttributesEdit attribute={attribute} method={method} tenant={tenant} resourceConfig={resourceConfig} />
+    case "view":
+      return <TenantAttributesView attribute={attribute} method={method} tenant={tenant} resourceConfig={resourceConfig} />
+    case "create":
+      return <TenantAttributesCreate attribute={attribute} method={method} resourceConfig={resourceConfig} />
+    case "list":
+      return <></>
+  }
+}
+
+export default TenantAttributes;

package/src/components/tenant/TenantAttributesContext.tsx

@@ -0,0 +1,163 @@
+import { useAxios } from "dash-axios-hook";
+import { createContext, useState, useRef, useEffect, useContext } from "react";
+
+// --- IndexedDB Utility ---
+const DB_NAME = "TenantAttributesCacheDB";
+const STORE_NAME = "kvstore";
+const DB_VERSION = 1;
+
+function openDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onupgradeneeded = () => {
+      req.result.createObjectStore(STORE_NAME);
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+export async function idbSet(key: string, value: any) {
+  const db = await openDB();
+  return new Promise<void>((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    tx.objectStore(STORE_NAME).put(value, key);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+export async function idbGet(key: string) {
+  const db = await openDB();
+  return new Promise<any>((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readonly");
+    const req = tx.objectStore(STORE_NAME).get(key);
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+// Global request tracking to prevent multiple requests across component instances
+let GLOBAL_FETCH_PROMISE: Promise<any> | null = null;
+let GLOBAL_FORMATS: any = null;
+let LAST_FETCH_TIME = 0;
+
+// --- Context and Provider for memoizing attributes formats ---
+const TenantAttributesFormatsContext = createContext<{
+  formats: any;
+  fetchFormats: () => Promise<void>;
+  loading: boolean;
+}>({
+  formats: null,
+  fetchFormats: async () => {},
+  loading: false,
+});
+
+export const TenantAttributesFormatsProvider: React.FC<{children: React.ReactNode}> = ({ children }) => {
+  const axios = useAxios();
+  // Use global formats if available or initialize with null
+  const [formats, setFormats] = useState<any>(GLOBAL_FORMATS);
+  const [loading, setLoading] = useState<boolean>(!!GLOBAL_FETCH_PROMISE);
+  const [initialized, setInitialized] = useState<boolean>(!!LAST_FETCH_TIME);
+  
+  const fetchFormats = async () => {
+    // If there's already a global fetch in progress, return that promise
+    if (GLOBAL_FETCH_PROMISE) {
+      return GLOBAL_FETCH_PROMISE;
+    }
+    
+    // Check if we recently fetched (within 10 seconds)
+    const now = Date.now();
+    if (!LAST_FETCH_TIME) {
+      try {
+        // Try to get last fetch time from IndexedDB
+        LAST_FETCH_TIME = await idbGet("tenant_attributes_cache") || 0;
+      } catch (error) {
+        console.error("Error reading from IndexedDB:", error);
+      }
+    }
+    
+    // Return early if we have formats and fetched recently
+    if (GLOBAL_FORMATS && now - LAST_FETCH_TIME < 10000) {
+      if (!formats) {
+        setFormats(GLOBAL_FORMATS);
+      }
+      return;
+    }
+    
+    // Start a new fetch
+    setLoading(true);
+    
+    // Create global fetch promise and store it
+    GLOBAL_FETCH_PROMISE = (async () => {
+      try {
+        console.log("FETCHING ATTRIBUTES FORMATS");
+        const { data } = await axios.get('system/tenant/systemAttributeFormats');
+        const formatsData = data.data?.attribute_formats || data.data;
+        
+        // Update global state
+        GLOBAL_FORMATS = formatsData;
+        LAST_FETCH_TIME = Date.now();
+        
+        // Update component state
+        setFormats(formatsData);
+        
+        // Cache in IndexedDB
+        try {
+          await idbSet("tenant_attributes_cache", LAST_FETCH_TIME);
+          await idbSet("tenant_attributes_formats", formatsData);
+        } catch (error) {
+          console.error("Error writing to IndexedDB:", error);
+        }
+      } catch (error) {
+        console.error("Error fetching attributes formats:", error);
+      } finally {
+        setLoading(false);
+        // Clear the global promise so future calls can initiate new fetches
+        GLOBAL_FETCH_PROMISE = null;
+      }
+    })();
+    
+    return GLOBAL_FETCH_PROMISE;
+  };
+  
+  useEffect(() => {
+    const loadCachedFormats = async () => {
+      try {
+        // Try to load from IndexedDB first
+        if (!GLOBAL_FORMATS) {
+          const cachedFormats = await idbGet("tenant_attributes_formats");
+          if (cachedFormats) {
+            GLOBAL_FORMATS = cachedFormats;
+            setFormats(cachedFormats);
+            setLoading(false);
+          }
+        }
+        // Always fetch if not recently fetched
+        await fetchFormats();
+      } catch (error) {
+        console.error("Error loading cached formats:", error);
+        // Fallback to fetching
+        await fetchFormats();
+      }
+    };
+    loadCachedFormats();
+    // eslint-disable-next-line
+  }, []);
+  
+  useEffect(() => {
+    if (formats) {
+      setLoading(false);
+    }
+  }, [formats]);
+  
+  return (
+    <TenantAttributesFormatsContext.Provider value={{ formats, fetchFormats, loading }}>
+      {children}
+    </TenantAttributesFormatsContext.Provider>
+  );
+};
+
+export function useTenantAttributesFormats() {
+  return useContext(TenantAttributesFormatsContext);
+}

package/src/components/tenant/TenantSelector.tsx

@@ -0,0 +1,139 @@
+import { Autocomplete, Box, CircularProgress, TextField } from '@mui/material';
+import React, { useEffect, useImperativeHandle, useState } from 'react';
+import { useController } from 'react-hook-form';
+import { useGetList } from 'react-admin';
+import useAxios from '../../hooks/axios';
+import { Tenant } from '../../interfaces/Tenant';
+import { Loading } from 'react-admin';
+import { AutocompleteInput } from 'react-admin';
+import { ReferenceInput } from 'react-admin';
+
+export type TTenantSelectorHandlers = {
+	getSelectedTenant: () => Tenant;
+};
+
+export interface ITenantSelectorProps {
+	selectedTenantInput?: string;
+	[x: string]: any;
+}
+
+const TenantSelector = React.forwardRef<
+	TTenantSelectorHandlers,
+	ITenantSelectorProps
+>(({ selectedTenantInput, ...props }, ref) => {
+	const { axios } = useAxios();
+	const [q, setQ] = useState('');
+	//const [selectedTenant,setSelectedTenant] = useState<string>(selectedTenantInput ?? null);
+	const [tenant, setTenant] = useState<Tenant>(null);
+
+	const selectLabel = 'Seleccionar Cliente';
+	const tenantField = useController({ name: 'tenant' });
+
+	useImperativeHandle(ref, () => {
+		return {
+			getSelectedTenant: getSelectedTenant,
+		};
+	});
+
+	const getSelectedTenant = () => {
+		return tenant;
+	};
+
+	useEffect(() => {
+		const getOne = async (_selectedTenantInput: string) => {
+			const { data } = await axios.get(`tenant/${_selectedTenantInput}`);
+			setTenant(data);
+		};
+		if (selectedTenantInput && selectedTenantInput !== 'null') {
+			// porque queda guardado null en local storage como string
+			//
+			getOne(selectedTenantInput);
+		}
+	}, [selectedTenantInput]);
+
+	const {
+		data: tenants,
+		total,
+		isLoading,
+		error: tenantsError,
+	} = useGetList('tenant', {
+		//pagination: false,
+		filter: { q: q },
+	});
+
+	const handleSearch = (search) => {
+		setQ(search);
+	};
+
+	const autocompleteOptionChange = (event: any, value: Tenant) => {
+		//setSelectedTenant(value);
+		tenantField.field.onChange(value);
+	};
+
+	const [open, setOpen] = React.useState(false);
+
+	if (isLoading) {
+		return <Loading />;
+	}
+
+	return (
+		<>
+			Cliente impersonado: {selectedTenantInput}
+			<Autocomplete
+				fullWidth
+				loading={isLoading && open}
+				sx={{ width: 300 }}
+				options={tenants ? (tenants as Tenant[]) : []}
+				open={open}
+				onOpen={() => {
+					setOpen(true);
+				}}
+				onClose={() => {
+					setOpen(false);
+				}}
+				autoHighlight
+				getOptionLabel={(option: Tenant) => option.name}
+				renderOption={(props, option: Tenant) => (
+					<Box
+						component='li'
+						sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+						{...props}
+					>
+						{option.name}
+					</Box>
+				)}
+				onChange={autocompleteOptionChange}
+				//onChange={handleSearch}
+				defaultValue={tenant}
+				renderInput={(params) => (
+					<TextField
+						fullWidth
+						{...params}
+						label={selectLabel}
+						variant='outlined'
+						onChange={(ev) => {
+							// dont fire API if the user delete or not entered anything
+							if (ev.target.value !== '' || ev.target.value !== null) {
+								handleSearch(ev.target.value);
+							}
+						}}
+						InputProps={{
+							...params.InputProps,
+							autoComplete: 'new-password',
+							endAdornment: (
+								<>
+									{isLoading ? (
+										<CircularProgress color='inherit' size={20} />
+									) : null}
+									{params.InputProps.endAdornment}
+								</>
+							),
+						}}
+					/>
+				)}
+			/>
+		</>
+	);
+});
+
+export default TenantSelector;

package/src/components/tenant/TenantSettings.tsx

@@ -0,0 +1,172 @@
+import { DashAutoFormGroups, DashAutoFormTabs, IDashAutoAdminCustomFieldComponent } from "dash-auto-admin";
+import React, { useState, useEffect, useContext, createContext, useRef } from "react";
+import { useGetList, Loading, useRecordContext } from "react-admin";
+import { useAxios } from 'dash-axios-hook';
+import { useFormContext, useWatch } from "react-hook-form";
+import { Tenant } from "../../interfaces/Tenant";
+import MUISimpleJsonTable from "../misc/MuiSimpleJsonTable";
+import { useTenantSettingsFormats } from "./TenantSettingsContext";
+import { useSystemRequestsCache } from "../../contexts/SystemRequestsCache";
+
+/** Wrapper creating a React component boundary so DashAutoFormTabs hooks don't violate Rules of Hooks */
+const FormTabsRenderer: React.FC<{schema: any; method: "list" | "create" | "edit" | "view"; label: string}> = ({schema, method, label}) => (
+    <>{DashAutoFormTabs({schema, resourceConfig: null, options: {mode: method, label}})}</>
+);
+
+const TenantSettingsEdit: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, tenant }) => {
+    const [settingFormatsSchema, setSettingFormatsSchema] = useState<any>(null);
+    /*const formContext = useFormContext();
+    const formValues = useWatch({
+        control: formContext.control
+    });*/
+
+    const { formats: formatsData, loading } = useSystemRequestsCache();
+
+    useEffect(() => {
+     
+        if (formatsData && formatsData.data && formatsData.data.setting_formats) {
+         
+            const parsedSchema = formatsData.data.setting_formats
+                .filter((entry) => entry.tab !== 'colors' && entry.visible !== false)
+                .map((entry) => {
+                // Extract the actual setting name from 'settings.setting_name'
+                const settingName = entry.attribute ? entry.attribute.replace('settings.', '') : entry.id;
+
+                const defaultValue =
+                    (tenant.settings && tenant.settings[settingName]) ||
+                    entry?.default_value;
+
+                return {
+                    ...entry,
+                    .../*method === "edit" &&*/ ((defaultValue !== null ||
+                        defaultValue !== undefined) && {
+                        fieldOptions: {
+                            defaultValue: defaultValue,
+                            fullWidth: true,
+                        },
+                    }),
+                    ...(method === 'view' && {
+                        readOnly: true,
+                    }),
+                };
+            });
+
+            console.log('SCHEMA', parsedSchema);
+           
+            setSettingFormatsSchema(parsedSchema);
+
+        }
+
+    }, [formatsData])
+
+    /*useEffect(() => {
+        if(settingFormatsSchema) { 
+            formContext.setValue('settings_schema', settingFormatsSchema); 
+        }
+    }, [settingFormatsSchema]);*/
+
+    /*const readOnlyComponent = ({...props}) => {
+        return <>{props.defaultValue}</>
+    }*/
+    //if (!settingFormatsSchema || loading) return <Loading />
+    return <section>
+        {settingFormatsSchema && <FormTabsRenderer schema={settingFormatsSchema} method={method} label="Opciones de configuración" />}
+    </section>
+
+}
+
+const TenantSettingsCreate: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute }) => {
+
+    const [settingFormatsSchema, setSettingFormatsSchema] = useState<any>(null);
+    /*const formContext = useFormContext();
+    const formValues = useWatch({
+        control: formContext.control
+    });*/
+
+
+    const { formats: formatsData, loading } = useSystemRequestsCache();
+
+    useEffect(() => {
+
+        if (!loading && formatsData && formatsData.data && formatsData.data.setting_formats) {
+            const parsedSchema = formatsData.data.setting_formats
+                .filter((entry) => entry.tab !== 'colors' && entry.visible !== false)
+                .map((entry) => ({
+                ...entry,
+                ...(method === 'view' && {
+                    readOnly: true,
+                }),
+            }));
+
+            setSettingFormatsSchema(parsedSchema);
+
+        }
+
+    }, [formatsData, loading])
+
+
+    //if (!settingFormatsSchema || loading) return <Loading />
+    return <section>
+        {settingFormatsSchema && <FormTabsRenderer schema={settingFormatsSchema} method={method} label="Opciones de configuración" />}
+    </section>
+
+}
+
+const TenantSettingsView: React.FC<IDashAutoAdminCustomFieldComponent> = ({ method, attribute, tenant }) => {
+
+    const { formats: settingFormats, loading } = useTenantSettingsFormats();
+    const [settingFormatsParsedValues, setSettingFormatsParsedValues] = useState<any>(null);
+
+    const parseValue = (value) => {
+        switch (typeof value) {
+            case "boolean":
+                return value ? "Sí" : "No";
+            case "number":
+            case "string":
+            default:
+                return value
+        }
+    }
+
+    useEffect(() => {
+        let object = {};
+        if (settingFormats && tenant) {
+
+            settingFormats
+                .filter((entry) => entry.tab !== 'colors' && entry.visible !== false)
+                .forEach((entry) => {
+                const defaultValue = tenant.settings && tenant.settings.hasOwnProperty(entry.id) ? tenant.settings[entry.id] : entry?.default_value;
+
+                object[entry.label] = <>{parseValue(defaultValue)}</>;
+            });
+
+
+            console.log("SCHEMA", object);
+
+            setSettingFormatsParsedValues(object);
+
+        }
+
+    }, [settingFormats, tenant])
+
+
+    return settingFormatsParsedValues ? <MUISimpleJsonTable tableData={settingFormatsParsedValues} vertical={true} /> : <Loading />
+
+
+}
+
+const TenantSettings = ({ method, attribute, resourceConfig }: IDashAutoAdminCustomFieldComponent) => {
+    const tenant: Tenant = useRecordContext();
+    switch (method) {
+        case "edit":
+            return <TenantSettingsEdit attribute={attribute} method={method} tenant={tenant} resourceConfig={resourceConfig} />
+        case "view":
+            return <TenantSettingsView attribute={attribute} method={method} tenant={tenant} resourceConfig={resourceConfig} />
+        case "create":
+            return <TenantSettingsCreate attribute={attribute} method={method} resourceConfig={resourceConfig} />
+        case "list":
+            return <></>
+    }
+}
+
+export default TenantSettings;