@m4l/components 0.1.35 → 0.1.37

package/src/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/subcomponents/NotFound/index.tsx

@@ -0,0 +1,54 @@
+// react
+// m4l
+
+// @mui
+import { Typography } from '@mui/material';
+
+// external libraries
+import { m } from 'framer-motion';
+// components
+import { Button } from '../../../../../../../../../../../mui_extended/Button';
+import { Image } from '../../../../../../../../../../../Image';
+import { varBounce } from '../../../../../../../../../../../animate';
+// assets
+
+import { useEnvironment, useModuleDictionary } from '@m4l/core';
+import { WrapperFallBackNotFound } from './styles';
+// import { useLocation } from 'react-router-dom';
+import { FallBackNotFoundProps } from './types';
+
+export default function FallBackNotFound(props: FallBackNotFoundProps) {
+    const { setNetworkRefresh } = props;
+    const { getLabel } = useModuleDictionary();
+    const { host_static_assets, environment_assets } = useEnvironment();
+    // const path = useLocation();
+
+    const handlerClick = () => {
+        setNetworkRefresh(prop => !prop);
+    };
+
+    return (
+        <WrapperFallBackNotFound>
+            <m.div variants={varBounce().in}>
+                <Typography variant="h3" paragraph>
+                    {getLabel('loading_mf_title')}
+                </Typography>
+            </m.div>
+            <Typography sx={{ color: 'text.secondary' }}>
+                {getLabel('loading_mf_description')}
+            </Typography>
+
+            <m.div variants={varBounce().in}>
+                <Image
+                    src={`${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`}
+                    width={'292px'}
+                    height={'219px'}
+                />
+            </m.div>
+
+            <Button size="large" variant="contained" onClick={handlerClick}>
+                {getLabel('loading_mf_intro')}
+            </Button>
+        </WrapperFallBackNotFound>
+    );
+}

package/src/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/subcomponents/NotFound/styles.tsx

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material';
+
+export const WrapperFallBackNotFound = styled('div')(({ theme }) => ({
+    width: '100%',
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: theme.spacing(3),
+}));

package/src/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/subcomponents/NotFound/types.tsx

@@ -0,0 +1,3 @@
+import { FallBackProps } from '../../types';
+
+export type FallBackNotFoundProps = Pick<FallBackProps, 'setNetworkRefresh'>;

package/src/components/areas/components/Window/subcomponents/MicroFrontend/subcomponents/MFLoader/subcomponents/LoadingMF/types.ts

@@ -0,0 +1,6 @@
+export type FallBackStatus = '0' | '1';
+
+export interface FallBackProps {
+    loadingProgress: number;
+    setNetworkRefresh: React.Dispatch<React.SetStateAction<boolean>>;
+}

package/src/components/areas/components/WindowPopUp/index.tsx

@@ -0,0 +1,65 @@
+// react
+import { useState } from 'react';
+//m4l
+import { DraggableWindow, ResizeableWindow } from '../../..';
+//mui
+
+//external libraries
+
+//hooks
+
+//Styled components
+
+import { useArea } from '../../hooks/useArea';
+import { Window } from '../Window';
+
+import { WrapperPopUpWindow } from './styles';
+import { PopUpProps } from '../Area/types';
+
+// import { WrapperWindow } from './styles';
+
+//css
+//import "./resizeable.css"
+//hooks
+
+//types
+// position: absolute;
+// width: auto;
+// height: auto;
+// background-color: var(--colorBgWindow);
+// box-shadow: var(--boxShadowPopUp);
+// border-radius: 4px;
+// padding: 2px 10px 10px;
+// border: var(--borderGeneric);
+
+export const WindowPopUp = (props: PopUpProps) => {
+    const { zIndex, windowProps: rect } = props;
+    const { isWindowSelected, selectWindow, getWindowPopUpZindex } = useArea();
+    const [currentZIndex, setZindex] = useState<number>(zIndex || getWindowPopUpZindex());
+
+    const isSelected = isWindowSelected(props.container_id);
+    const onTouch = () => {
+        if (!isSelected) {
+            selectWindow(props.container_id);
+            setZindex(getWindowPopUpZindex());
+        }
+    };
+
+    return (
+        <DraggableWindow handle=".m4l_draggable_handle" cancel="" defaultPosition={rect}>
+            <ResizeableWindow
+                width={rect.width}
+                height={rect.height}
+                style={{ zIndex: currentZIndex, position: 'absolute' }}
+                className={isSelected ? 'm4l_selected' : ''}
+                onResizeStart={() => {
+                    onTouch();
+                }}
+            >
+                <WrapperPopUpWindow onMouseDown={onTouch}>
+                    <Window {...props} />
+                </WrapperPopUpWindow>
+            </ResizeableWindow>
+        </DraggableWindow>
+    );
+};

package/src/components/areas/components/WindowPopUp/styles.ts

@@ -0,0 +1,10 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperPopUpWindow = styled('div')(() => ({
+    height: '100%',
+
+    // position: 'absolute',
+    '&.m4l_selected': {
+        borderTop: '1px solid green',
+    },
+}));

package/src/components/areas/components/index.ts

@@ -0,0 +1,5 @@
+export * from './Area';
+export * from './AreasAdmin';
+export * from './AreasContainer';
+
+export type { NewWindowProps as NewWindow, MicroFrontendProps } from './Area/types';

package/src/components/areas/contexts/AreaContext/index.tsx

@@ -0,0 +1,397 @@
+//react
+import React, {
+    createContext,
+    forwardRef,
+    useCallback,
+    useEffect,
+    useImperativeHandle,
+    useRef,
+    useState,
+} from 'react';
+import isEqual from 'lodash/isEqual';
+import debounce from 'lodash/debounce';
+import type { Layout, Layouts } from 'react-grid-layout';
+import {
+    HashWindowsByLayouts,
+    NewLayoutProps,
+    NewModalProps,
+    NewPopUpProps,
+    PopUpProps,
+} from '../../components/Area/types';
+import {
+    AreaContextProps,
+    AreaProviderProps,
+    AreaProviderRef,
+    AreaStatus,
+    WinLayout,
+} from './types';
+import { NewWindowProps } from '../../components/Area/types';
+import { Window } from '../../components/Window';
+import { useModal } from '../../../../hooks/useModal';
+import { useNetwork } from '@m4l/core';
+import useAreas from '../../hooks/useAreas';
+
+// mui
+// hooks
+// utils
+// config
+// @type
+
+// ----------------------------------------------------------------------
+
+const AreaContext = createContext<AreaContextProps | null>(null);
+
+const getParmsFromValue = (key: string, data: []) => {
+    try {
+        if (Array.isArray(data)) {
+            let ob: any = data.find((f: any) => f.id === key);
+            if (ob) {
+                ob = JSON.parse(ob.value);
+            }
+
+            return ob;
+        }
+    } catch (error) {}
+
+    return undefined;
+};
+
+const AreaProvider = forwardRef<AreaProviderRef, AreaProviderProps>((props, ref) => {
+    //function AreaProvider(props: AreaProviderProps) {
+    const { children, id, active } = props;
+    const { networkOperation } = useNetwork();
+    const [status, setStatus] = useState<AreaStatus>('init');
+
+    const [layouts, setLayouts] = useState<Layout[]>([]);
+    const [allLayouts, setAllLayouts] = useState<Layouts>({});
+    const [hashWindowsLayouts, setHashhWindowsLayouts] = useState<HashWindowsByLayouts>({});
+    const windowsLayoutsBack = useRef<Record<string, WinLayout>>({});
+
+    const [windowsPopUps, setWindowsPopUps] = useState<PopUpProps[]>([]);
+    const [, setSelectedWindow] = useState<string>('');
+    const { openModal, closeModal } = useModal();
+    const { activeAreasNetwork } = useAreas();
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            addWindow,
+            // current: windowsLayoutsBack.current,
+        }),
+        [],
+    );
+
+    const WindowPopUpZindex = useRef(999);
+
+    const getWindowPopUpZindex = useCallback(() => {
+        WindowPopUpZindex.current++;
+
+        return WindowPopUpZindex.current;
+    }, []);
+
+    useEffect(() => {
+        console.log('useEffect AreaProvider');
+
+        return () => {
+            console.log('useEffect cluanUp AreaProvider****');
+        };
+    }, []);
+
+    useEffect(() => {
+        if (active && status === 'init') {
+            setStatus('load');
+        }
+    }, [active]);
+    console.log('Rendeer AreaProvider status', status, activeAreasNetwork);
+    useEffect(() => {
+        let mounted = true;
+        if (status === 'load') {
+            if (activeAreasNetwork) {
+                //Cargar las cookies asociadas a las areas
+                console.log('useEffect Load Cargarcokies');
+                networkOperation({
+                    method: 'GET',
+                    endPoint: `cookies`,
+                    parms: { f: [{ n: 'container_id', o: 'c', o1: id }] },
+                    toastSuccess: false,
+                    toastError: false,
+
+                    // isRemote: false
+                })
+                    .then((_response: any) => {
+                        if (mounted) {
+                            const layoutParms = getParmsFromValue('layout_parms', _response.data);
+                            const windows = getParmsFromValue('windows', _response.data);
+
+                            if (layoutParms) {
+                                setAllLayouts(layoutParms);
+                            }
+                            if (windows) {
+                                const newLayouts = [];
+                                const newHashLayouts: HashWindowsByLayouts = {};
+                                for (const key in windows) {
+                                    const element = windows[key];
+
+                                    if (
+                                        element &&
+                                        element['layoutProps'] &&
+                                        element['mfProps'] &&
+                                        element['emergeType'] === 'layout' &&
+                                        element['winType'] === 'microfrontend'
+                                    ) {
+                                        element['layoutProps'].i = key;
+                                        newLayouts.push(element['layoutProps']);
+
+                                        newHashLayouts[key] = {
+                                            ...element,
+                                            container_id: key,
+                                            emergeType: 'layout',
+                                            onClose: onCloseWindowLayout,
+                                        };
+                                    }
+
+                                    // const newElement = { ...element };
+                                    // delete newElement.onClose;
+                                    // if (element.winType === 'microfrontend') {
+                                    //     saveObjetc[key] = newElement;
+                                    //     nrKeys++;
+                                    // }
+                                }
+                                console.log('GET cookies', layoutParms, newHashLayouts);
+                                setLayouts(newLayouts);
+                                setHashhWindowsLayouts(newHashLayouts);
+                            }
+                            setStatus('loaded');
+                        }
+                    })
+                    .catch((_response: any) => {
+                        setStatus('loaded');
+                    });
+            } else {
+                setStatus('loaded');
+            }
+        }
+
+        return () => {
+            mounted = false;
+        };
+    }, [status]);
+
+    //Grabado de ventanas
+    useEffect(() => {
+        console.log('useEffect SaveWindow', status, hashWindowsLayouts);
+        if (status === 'loaded') {
+            let nrKeys = 0;
+            const saveObjetc: Record<string, any> = {};
+            for (const key in hashWindowsLayouts) {
+                const element = hashWindowsLayouts[key];
+                const newElement = { ...element };
+                delete newElement.onClose;
+
+                if (element.winType === 'microfrontend') {
+                    saveObjetc[key] = newElement;
+                    nrKeys++;
+                }
+            }
+            console.log('saveWindows', nrKeys, saveObjetc, JSON.stringify(saveObjetc));
+            if (activeAreasNetwork && nrKeys > 0) {
+                networkOperation({
+                    method: 'PUT',
+                    endPoint: `cookies/windows/${id}/nomodule`,
+                    data: {
+                        // id: 'layout_parms',
+                        // container_id: id,
+                        // module_id: '-',
+                        value: JSON.stringify(saveObjetc),
+                    },
+                    toastSuccess: false,
+                    toastError: false,
+                    // isRemote: false
+                });
+            }
+        }
+    }, [hashWindowsLayouts]);
+
+    const debouncedLayoutChange = useCallback(
+        debounce(
+            (currentLayouts: Layout[], newAllLayouts: Layouts) => {
+                currentLayouts.forEach(layout => {
+                    const { i } = layout;
+
+                    if (i === 'none') return;
+
+                    if (isEqual(layout, windowsLayoutsBack.current[i])) return;
+                });
+
+                //setLayouts(currentLayouts);
+                setAllLayouts(newAllLayouts);
+                if (activeAreasNetwork) {
+                    networkOperation({
+                        method: 'PUT',
+                        endPoint: `cookies/layout_parms/${id}/nomodule`,
+                        data: {
+                            // id: 'layout_parms',
+                            // container_id: id,
+                            // module_id: '-',
+                            value: JSON.stringify(newAllLayouts),
+                        },
+                        toastSuccess: false,
+                        toastError: false,
+                        // isRemote: false
+                    });
+                }
+            },
+
+            2000,
+        ),
+        [layouts],
+    );
+
+    const onLayoutChange = useCallback(
+        (currentLayouts: Layout[], newAllLayouts: Layouts) => {
+            debouncedLayoutChange(currentLayouts, newAllLayouts);
+        },
+        [debouncedLayoutChange],
+    );
+
+    const onCloseWindowLayout = useCallback((removeLayoutId: string) => {
+        setHashhWindowsLayouts(lastHashhWL => {
+            const newLayouts = { ...lastHashhWL };
+
+            delete newLayouts[removeLayoutId];
+
+            return newLayouts;
+        });
+
+        delete windowsLayoutsBack.current[removeLayoutId];
+    }, []);
+
+    const onCloseWindowPopUp = useCallback((removePopUpId: string) => {
+        setWindowsPopUps(lastPopUpsMfs => {
+            const newPopUps = [...lastPopUpsMfs];
+
+            return newPopUps.filter(p => p.container_id !== removePopUpId);
+        });
+    }, []);
+
+    const onCloseWindowModal = useCallback((_removePopUpId: string) => {
+        closeModal();
+    }, []);
+
+    const addWindowPopUp = useCallback(
+        (container_id: string, newWindowPopupProps: NewPopUpProps) => {
+            setWindowsPopUps(lastPopUpsMfs => {
+                return [
+                    {
+                        ...newWindowPopupProps,
+
+                        emergeType: 'popup',
+                        container_id: container_id,
+                        onClose: onCloseWindowPopUp,
+                    },
+                    ...lastPopUpsMfs,
+                ];
+            });
+        },
+        [],
+    );
+
+    const addWindowModal = useCallback((container_id: string, newWindowProps: NewModalProps) => {
+        openModal({
+            window: (
+                <Window
+                    {...newWindowProps}
+                    container_id={container_id}
+                    onClose={onCloseWindowModal}
+                />
+            ),
+        });
+    }, []);
+
+    const addWindowLayout = useCallback((container_id: string, newWindow: NewLayoutProps) => {
+        const newLayout: WinLayout = {
+            ...newWindow.layoutProps,
+            i: container_id,
+            isDraggable: true,
+            isResizable: true,
+            winType: newWindow.winType,
+        };
+
+        setLayouts(lastLayout => [...lastLayout, newLayout]);
+        setHashhWindowsLayouts(lastHashWindowsLayouts => {
+            return {
+                ...lastHashWindowsLayouts,
+                [container_id]: {
+                    ...newWindow,
+                    container_id: container_id,
+                    emergeType: 'layout',
+                    onClose: onCloseWindowLayout,
+                },
+            };
+        });
+
+        windowsLayoutsBack.current[container_id] = { ...newLayout };
+    }, []);
+
+    const addWindow = useCallback((newWindow: NewWindowProps) => {
+        const newId = `${id}_window_${new Date().getTime()}_${(Math.random() * 1000).toFixed(0)}`;
+
+        console.log('addWindow', newWindow.winType, newWindow.emergeType, newId);
+        if (newWindow.emergeType === 'layout') {
+            addWindowLayout(newId, newWindow);
+        } else if (newWindow.emergeType === 'popup') {
+            addWindowPopUp(newId, newWindow);
+        } else if (newWindow.emergeType === 'modal') {
+            addWindowModal(newId, newWindow);
+        }
+
+        return newId;
+    }, []);
+
+    const isWindowSelected = useCallback(
+        (lookForThisId: string) => {
+            // if (hashWindowsLayouts.findIndex(wl => wl.windowMFprops.id === lookForThisId) > -1) {
+            //     return true;
+            // }
+            if (windowsPopUps.findIndex(wp => wp.container_id === lookForThisId) > -1) {
+                return true;
+            }
+            return false;
+        },
+        [hashWindowsLayouts, windowsPopUps],
+    );
+
+    const selectWindow = useCallback((newSeletectedId: string) => {
+        setSelectedWindow(newSeletectedId);
+    }, []);
+
+    return (
+        <AreaContext.Provider
+            value={{
+                id,
+                status,
+                isWindowSelected,
+                selectWindow,
+                getWindowPopUpZindex,
+                allLayouts,
+                layouts,
+                hashWindowsLayouts,
+                addWindow,
+                onCloseWindowLayout,
+                onLayoutChange,
+
+                windowsPopUps,
+
+                onCloseWindowPopUp,
+            }}
+        >
+            {children}
+        </AreaContext.Provider>
+    );
+});
+
+AreaProvider.displayName = 'AreaProvider';
+
+const MemonizedAreaProvider = React.memo(AreaProvider);
+
+export { AreaProvider, AreaContext, MemonizedAreaProvider };

package/src/components/areas/contexts/AreaContext/types.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+
+import type { Layout, Layouts } from 'react-grid-layout';
+import { NewWindowProps, PopUpProps, WinType } from '../../components/Area/types';
+
+import { AreaProps, HashWindowsByLayouts } from '../../components/Area/types';
+
+export type AreaStatus = 'init' | 'load' | 'loaded' | 'error';
+
+export interface AreaProviderProps extends AreaProps {
+    children: ReactNode;
+}
+export type WinLayout = Layout & { winType: WinType };
+
+export type AreaProviderRef = {
+    addWindow: (newWindowMF: NewWindowProps) => string;
+    // current: Record<string, Layout>;
+};
+
+export interface AreaContextProps extends Omit<AreaProps, 'children' | 'active'> {
+    status: AreaStatus;
+
+    isWindowSelected: (id: string) => boolean;
+    selectWindow: (newSeletectedId: string) => void;
+    getWindowPopUpZindex: () => number;
+    allLayouts: Layouts;
+    layouts: Layout[];
+    hashWindowsLayouts: HashWindowsByLayouts;
+    addWindow: (newWindow: NewWindowProps) => string;
+    onCloseWindowLayout: (removeLayoutId: string) => void;
+    onLayoutChange: (currentLayouts: Layout[], allLayouts: Layouts) => void;
+    windowsPopUps: PopUpProps[];
+    onCloseWindowPopUp: (removePopUpId: string) => void;
+}