@m4l/components 0.1.39 → 0.1.41

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

@@ -1,54 +0,0 @@
-// 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

@@ -1,11 +0,0 @@
-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

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

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

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

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

@@ -1,65 +0,0 @@
-// 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

@@ -1,10 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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

@@ -1,397 +0,0 @@
-//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

@@ -1,34 +0,0 @@
-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;
-}