@m4l/layouts 0.1.22 → 0.1.25

package/src/layouts/MasterDetailLayout/dicctionary.ts

@@ -0,0 +1,20 @@
+import type { Dictionary } from '@m4l/core';
+import {
+    // defaultModuleLayoutDictionary,
+    getModuleLayoutComponentsDictionary,
+} from '../ModuleLayout/dicctionary';
+
+export function getMasterDetailLayoutComponentsDictionary() {
+    return ['master_detail_layout'].concat(getModuleLayoutComponentsDictionary());
+}
+
+export const defaultMasterDetailDictionary: Dictionary = {
+    master_detail_layout: {
+        split_vertical: 'Split vertically',
+        split_horizontal: 'Split horizontally',
+        no_split: 'No split',
+        view_detail: 'View detail',
+    },
+
+    //...defaultModuleLayoutDictionary,
+};

package/src/layouts/MasterDetailLayout/index.tsx

@@ -0,0 +1,165 @@
+// react
+import { useCallback, useMemo, useRef, useState } from 'react';
+//m4l
+import { useEnvironment } from '@m4l/core';
+// external libraries
+
+// componentes estilados
+
+// sub components
+import { ModuleAction, SplitLayout } from '@m4l/components';
+import { ModuleLayout } from '../ModuleLayout';
+
+// dictionary
+// import { getMasterDetailLayoutComponentsDictionary } from './dicctionary';
+// context
+import { MasterDetailProvider } from './contexts/MasterDetailContext';
+// hooks
+import { useResponsiveDesktop } from '@m4l/graphics';
+
+// types
+import type { MasterDetailLayoutProps } from './types';
+import type { SplitPosition } from '@m4l/components';
+import type { ModuleLayoutRef } from '../ModuleLayout/types';
+// constants
+
+function getTotalModuleActions(
+    splitActions: ModuleAction[],
+    moduleActions: ModuleAction[],
+    viewDetailAction: ModuleAction,
+    isDesktop: boolean | undefined,
+): ModuleAction[] {
+    let totalActions: ModuleAction[] =
+        isDesktop !== undefined && isDesktop ? [...splitActions] : [viewDetailAction];
+    // !== undefined
+    // ? [viewDetailAction]
+    // : [];
+    totalActions = moduleActions.concat(totalActions);
+
+    return totalActions;
+}
+
+export function MasterDetailLayout(props: MasterDetailLayoutProps) {
+    const {
+        moduleId,
+
+        masterComponent,
+        detailComponent,
+        moduleActions,
+
+        // defaultDictionary,
+    } = props;
+    const { host_static_assets, environment_assets } = useEnvironment();
+
+    const [splitPosition, setSplitPosition] = useState<SplitPosition>('vertical');
+    const isDesktop = useResponsiveDesktop();
+    const moduleLayoutRef = useRef<ModuleLayoutRef>(null);
+
+    const onChangePostionInternal = (newPostion: SplitPosition) => {
+        const newSplitActions = [...initialSplitActions];
+
+        for (let i = 0; i < newSplitActions.length; i++) {
+            newSplitActions[i].disabled = false;
+            if (newSplitActions[i].tag === newPostion) {
+                newSplitActions[i].disabled = true;
+            }
+        }
+        setSplitActions(newSplitActions);
+        setSplitPosition(newPostion);
+    };
+
+    const initialSplitActions: ModuleAction[] = [
+        {
+            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_vertical.svg`,
+            onClick: () => onChangePostionInternal('vertical'),
+            disabled: true,
+            visibility: 'main',
+            dictionaryField: 'master_detail_layout.split_vertical',
+            tag: 'vertical',
+            className: 'splitactions',
+        },
+        {
+            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/split_horizontal.svg`,
+            onClick: () => onChangePostionInternal('horizontal'),
+            disabled: false,
+            visibility: 'main',
+            dictionaryField: 'master_detail_layout.split_horizontal',
+            tag: 'horizontal',
+            className: 'splitactions',
+        },
+        {
+            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/no_split.svg`,
+            onClick: () => onChangePostionInternal('none'),
+            disabled: false,
+            visibility: 'main',
+            dictionaryField: 'master_detail_layout.no_split',
+            tag: 'none',
+            className: 'splitactions',
+        },
+    ];
+    const onClickViewDetail = useCallback(() => {
+        // moduleLayoutRef.current?.openModal({
+        //     title: 'master_detail_layout.view_detail',
+        //     initialWidth: 500,
+        //     initialHeigth: 680,
+        //     window: detailComponent,
+        //     actions: undefined,
+        // });
+    }, [detailComponent]);
+
+    const viewDetailAction: ModuleAction = useMemo(() => {
+        return {
+            urlIcon: `${host_static_assets}/${environment_assets}/frontend/components/masterdetaillayout/assets/icons/view_detail.svg`,
+            onClick: onClickViewDetail,
+            disabled: false,
+            visibility: 'allways',
+            dictionaryField: 'master_detail_layout.view_detail',
+            tag: 'none',
+            className: '',
+            // component: ButtonDetail,
+        };
+    }, [environment_assets, onClickViewDetail]);
+
+    const [splitActions, setSplitActions] = useState<ModuleAction[]>(initialSplitActions);
+
+    const finalModuleActions = useMemo(() => {
+        const actions = getTotalModuleActions(
+            splitActions,
+            moduleActions,
+            viewDetailAction,
+            isDesktop,
+        );
+
+        return actions;
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [splitActions, moduleActions, isDesktop, viewDetailAction]);
+
+    // const finalComponentsDictionary = useMemo(
+    //     () => componentsDictionary.concat(getMasterDetailLayoutComponentsDictionary()),
+    //     [componentsDictionary],
+    // );
+
+    // const finalDefaultDictionary = useMemo(
+    //     () => ({ ...defaultDictionary, ...defaultMasterDetailDictionary }),
+    //     [defaultDictionary],
+    // );
+
+    return (
+        <MasterDetailProvider>
+            <ModuleLayout
+                ref={moduleLayoutRef}
+                moduleId={moduleId}
+                moduleActions={finalModuleActions}
+                //defaultDictionary={finalDefaultDictionary}
+                // componentsDictionary={finalComponentsDictionary}
+            >
+                <SplitLayout
+                    splitPosition={isDesktop ? splitPosition : 'none'}
+                    firstPart={masterComponent}
+                    secondPart={detailComponent}
+                />
+            </ModuleLayout>
+        </MasterDetailProvider>
+    );
+}

package/src/layouts/MasterDetailLayout/types.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ModuleLayoutProps } from '../ModuleLayout/types';
+
+export interface ContainerProps {
+    vertical: boolean;
+}
+
+export interface MasterDetailLayoutProps extends Omit<ModuleLayoutProps, 'children'> {
+    masterComponent: ((props?: any) => JSX.Element) | ReactNode;
+    detailComponent: ((props?: any) => JSX.Element) | ReactNode;
+}

package/src/layouts/ModuleLayout/contexts/ModuleContext/index.tsx

@@ -0,0 +1,56 @@
+// react
+import { ModuleAction, useDynamicMFParameters } from '@m4l/components';
+import { createContext, useState, useMemo, useEffect } from 'react';
+
+// sub componentes
+
+// types
+import {
+    ModuleLayoutContextProps,
+    ModuleLayoutContextStateProps,
+    ModuleLayoutProviderProps,
+} from './types';
+
+// network
+
+const ModuleContext = createContext<ModuleLayoutContextProps | null>(null);
+
+function ModuleProvider(props: ModuleLayoutProviderProps) {
+    const { children, moduleActions, moduleId } = props;
+
+    const [configOptions] = useState<ModuleLayoutContextStateProps>(() => ({
+        moduleId,
+        dictionary: undefined,
+    }));
+    const { setModuleActions } = useDynamicMFParameters();
+
+    const [dynamicActions, setDynamicActions] = useState<Array<ModuleAction>>([]);
+
+    const finalModuleActions = useMemo(
+        () => moduleActions.concat(dynamicActions),
+        [moduleActions, dynamicActions],
+    );
+    useEffect(() => {
+        console.log('useEffect ModuleProvider', finalModuleActions);
+        setModuleActions(finalModuleActions);
+    }, [finalModuleActions]);
+
+    return (
+        <ModuleContext.Provider
+            value={{
+                moduleActions: finalModuleActions,
+                // dynamicActions,
+                setDynamicActions,
+                moduleId: configOptions.moduleId,
+                // moduleNameField: configOptions.moduleNameField,
+                // urlIcon: configOptions.urlIcon,
+
+                // breadcrumbLinks: configOptions.breadcrumbLinks,
+            }}
+        >
+            {children}
+        </ModuleContext.Provider>
+    );
+}
+
+export { ModuleProvider, ModuleContext };

package/src/layouts/ModuleLayout/contexts/ModuleContext/types.ts

@@ -0,0 +1,23 @@
+import { ModuleAction } from '@m4l/components';
+import type { ReactNode } from 'react';
+
+export interface ModuleLayoutContextStateProps {
+    // init: boolean,
+    // urlIcon: string;
+    moduleId: string;
+    // moduleNameField: string;
+    // breadcrumbLinks: TLink[];
+}
+
+export interface ModuleLayoutProviderProps extends Omit<ModuleLayoutContextStateProps, 'init'> {
+    children: ReactNode;
+
+    moduleActions: ModuleAction[];
+}
+
+export interface ModuleLayoutContextProps extends ModuleLayoutContextStateProps {
+    // , "dictionary" | "moduleId" | "moduleNameField" | "breadcrumbLinks"
+    moduleActions: ModuleAction[];
+    // dynamicActions: ModuleAction[];
+    setDynamicActions: (dynamicActions: ModuleAction[]) => void;
+}

package/src/layouts/ModuleLayout/dicctionary.ts

@@ -0,0 +1,11 @@
+import type { Dictionary } from '@m4l/core';
+
+import { getModalDialogComponentsDictionary } from '@m4l/components';
+
+export function getModuleLayoutComponentsDictionary() {
+    return ['module_layout'].concat(getModalDialogComponentsDictionary());
+}
+
+export const defaultModuleLayoutDictionary: Dictionary = {
+    module_layout: {},
+};

package/src/layouts/ModuleLayout/index.tsx

@@ -0,0 +1,59 @@
+// m4l
+import { ModalProvider } from '@m4l/components';
+
+// react
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+// external libraries
+
+// componentes estilados
+
+// sub components
+import { InnerModule } from './subcomponents/InnerModule';
+
+// types
+import type { ModuleLayoutProps, ModuleLayoutRef } from './types';
+import type { ModuleRef } from './subcomponents/InnerModule/types';
+import type { ModalOpenOptions } from '@m4l/components';
+// constants
+
+// context
+import { ModuleProvider } from './contexts/ModuleContext';
+
+// hooks
+//export const ModuleLayout = forwardRef<ModuleLayoutRef, ModuleLayoutProps>((props, ref) => {
+
+export const ModuleLayout = forwardRef<ModuleLayoutRef, ModuleLayoutProps>((props, ref) => {
+    const { moduleId, moduleActions, children } = props;
+    const moduleRef = useRef<ModuleRef>(null);
+
+    const openModal = (modalOpenProps: ModalOpenOptions) => {
+        moduleRef.current?.openModal(modalOpenProps);
+    };
+
+    useImperativeHandle(ref, () => ({
+        openModal,
+        current: moduleRef.current,
+    }));
+
+    return (
+        // <FlagsProvider>
+        //     <ModuleDictionaryProvider
+        //         moduleId={moduleId}
+        //         componentsDictionary={componentsDictionary}
+        //         currentLang={currentLang}
+        //     >
+        //         <ModuleSkeletonProvider flags={skeletonFlags}>
+        //             <ModulePrivilegesProvider queryPrivileges={privileges}>
+        <ModuleProvider moduleId={moduleId} moduleActions={moduleActions}>
+            <ModalProvider>
+                <InnerModule ref={moduleRef}>{children}</InnerModule>
+            </ModalProvider>
+        </ModuleProvider>
+        //             </ModulePrivilegesProvider>
+        //         </ModuleSkeletonProvider>
+        //     </ModuleDictionaryProvider>
+        // </FlagsProvider>
+    );
+});
+
+ModuleLayout.displayName = 'ModuleLayout'; //para efectos de debuggin de React

package/src/layouts/ModuleLayout/subcomponents/InnerModule/index.tsx

@@ -0,0 +1,35 @@
+// react
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+// external libraries
+
+// componentes estilados
+import { WrapperInnerModule, ModuleContent } from './styles';
+
+// sub components
+// import { Header } from './subcomponents/Header';
+
+// types
+import { ModuleProps, ModuleRef } from './types';
+// constants
+
+// hooks
+import { useModal } from '@m4l/components';
+
+export const InnerModule = forwardRef<ModuleRef, ModuleProps>((props, ref) => {
+    const { children } = props;
+    const { openModal } = useModal();
+    const divRef = useRef<HTMLDivElement>(null);
+
+    useImperativeHandle(ref, () => ({
+        openModal,
+        current: divRef.current,
+    }));
+
+    return (
+        <WrapperInnerModule id="WrapperInnerModule" className="m4l_module_layout" ref={divRef}>
+            <ModuleContent id="ModuleContent">{children}</ModuleContent>
+        </WrapperInnerModule>
+    );
+});
+
+InnerModule.displayName = 'InnerModule';

package/src/layouts/ModuleLayout/subcomponents/InnerModule/styles.tsx

@@ -0,0 +1,31 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperInnerModule = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'absolute',
+    margin: '0px 12px 12px 12px',
+
+    left: '0px',
+    right: '0px',
+    top: '0px',
+    bottom: '0px',
+
+    overflow: 'hidden',
+}));
+
+export const ModuleContent = styled('div')(({ theme }) => ({
+    display: 'flex',
+    // flexDirection: "column",
+    position: 'relative',
+    marginTop: theme.spacing(1),
+    justifyContent: 'center',
+
+    // left: "0px",
+    // right: "0px",
+    // top: "72px",
+    // bottom: "0px",
+    flexGrow: '1',
+    // padding: "16px",
+    overflow: 'hidden',
+}));

package/src/layouts/ModuleLayout/subcomponents/InnerModule/types.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { ModalOpenOptions } from '@m4l/components';
+
+export type ModuleRef = {
+    openModal: (modalOpenProps: ModalOpenOptions) => void;
+    current: HTMLDivElement | null;
+};
+
+export interface ModuleProps {
+    children: ReactNode;
+}

package/src/layouts/ModuleLayout/types.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+import type { ModalOpenOptions, ModuleAction } from '@m4l/components';
+
+import type { ModuleRef } from './subcomponents/InnerModule/types';
+
+export interface ContainerProps {
+    vertical: boolean;
+}
+
+export type ModuleLayoutRef = {
+    openModal: (modalOpenProps: ModalOpenOptions) => void;
+    current: ModuleRef | null;
+};
+
+// export type Skeleton = 'form' | 'masterdetail_1';
+
+export interface ModuleLayoutProps {
+    // skeleton: Skeleton;
+    moduleId: string;
+    // urlIcon: string;
+    // currentLang: string;
+    // skeletonFlags: string[];
+    // moduleNameField?: string;
+    // privileges: string[];
+    // breadcrumbLinks: TLink[];
+    moduleActions: ModuleAction[];
+    //defaultDictionary: ModuleDictionary;
+    // componentsDictionary: string[];
+    // master: (props: any) => JSX.Element;
+    children: ReactNode;
+}

package/src/layouts/NoAuthModuleLayout/dicctionary.ts

@@ -0,0 +1,9 @@
+import type { Dictionary } from '@m4l/core';
+
+export function getNoAuthModuleLayoutComponentsDictionary() {
+    return ['no_auth_module_layout'];
+}
+
+export const defaultNoAuthModuleLayoutDictionary: Dictionary = {
+    no_auth_module_layout: {},
+};

package/src/layouts/NoAuthModuleLayout/index.tsx

@@ -0,0 +1,85 @@
+//react
+
+//external libraries
+
+//componentes estilados
+
+//sub components
+import { InnerModule } from './subcomponents/InnerModule';
+
+//types
+import { NoAuthBaseProviderProps, NoAuthModuleLayoutProps } from './types';
+
+//constants
+
+//context
+
+import {
+    BaseProvider,
+    FlagsProvider,
+    ModuleDictionaryProvider,
+    ModuleSkeletonProvider,
+    useEnvironment,
+} from '@m4l/core';
+import { useLocales } from '@m4l/graphics';
+
+//hooks
+
+export const NoAuthModuleLayout = (props: NoAuthModuleLayoutProps) => {
+    const {
+        moduleId,
+        moduleNameField,
+        children,
+        componentsDictionary,
+        skeletonFlags,
+        subtitle,
+        companyLogoSmallUrl,
+        companyLogoNormalUrl,
+        moduleIlustrationUrl,
+    } = props;
+
+    const { host_static_assets, environment_assets } = useEnvironment();
+
+    const localeString = useLocales().currentLocale?.localeString;
+
+    const finalCompanyLogoNormalUrl =
+        companyLogoNormalUrl ||
+        `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/logotipo_m4l.svg`;
+    const finalCompanyLogoSmallUrl =
+        companyLogoSmallUrl ||
+        `${host_static_assets}/${environment_assets}/frontend/commons/assets/icons/isotipo_m4l.svg`;
+    const finalIllustrationUrl =
+        moduleIlustrationUrl ||
+        `${host_static_assets}/${environment_assets}/frontend/domain/host/commons/assets/img/illustration_noauth.png`;
+
+    const finalSkeletonFlags = skeletonFlags;
+
+    if (finalSkeletonFlags.findIndex(f => f === 'dictionary_loaded') < 0) {
+        finalSkeletonFlags.push('dictionary_loaded');
+    }
+
+    return (
+        <BaseProvider<NoAuthBaseProviderProps>
+            value={{
+                subtitle,
+                companyLogoSmallUrl: finalCompanyLogoSmallUrl,
+                companyLogoNormalUrl: finalCompanyLogoNormalUrl,
+                moduleIlustrationUrl: finalIllustrationUrl,
+            }}
+        >
+            <FlagsProvider>
+                <ModuleDictionaryProvider
+                    isAuth={false}
+                    moduleId={moduleId}
+                    moduleNameField={moduleNameField}
+                    componentsDictionary={componentsDictionary}
+                    currentLang={localeString}
+                >
+                    <ModuleSkeletonProvider flags={finalSkeletonFlags}>
+                        <InnerModule>{children}</InnerModule>
+                    </ModuleSkeletonProvider>
+                </ModuleDictionaryProvider>
+            </FlagsProvider>
+        </BaseProvider>
+    );
+};

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/index.tsx

@@ -0,0 +1,43 @@
+//react
+// m4l
+import { useResponsive } from '@m4l/graphics';
+import { HelmetPage } from '@m4l/components';
+
+//mui
+//external libraries
+
+//my components
+import { LogoLeyend } from './subcomponents/LogoLeyend';
+import { AppBarForm } from './subcomponents/AppBarForm';
+//componentes estilados
+
+import { WrapperMain } from './styles';
+
+//sub components
+
+//types
+
+//constants
+
+//hooks
+
+import { useBase, useModuleDictionary } from '@m4l/core';
+
+import { ModuleProps } from './types';
+import { NoAuthBaseProviderProps } from '../../types';
+
+export const InnerModule = (props: ModuleProps) => {
+    const { children } = props;
+    const { getModuleLabel } = useModuleDictionary();
+    const mdUp = useResponsive('up', 'md');
+    const { subtitle } = useBase<NoAuthBaseProviderProps>();
+
+    return (
+        <HelmetPage title={getModuleLabel()} subtitle={subtitle}>
+            <WrapperMain>
+                {mdUp ? <LogoLeyend /> : null}
+                <AppBarForm>{children}</AppBarForm>
+            </WrapperMain>
+        </HelmetPage>
+    );
+};

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/styles.tsx

@@ -0,0 +1,6 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperMain = styled('div')(() => ({
+    display: 'flex',
+    height: '100vh',
+}));

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/index.tsx

@@ -0,0 +1,14 @@
+import { WrapperAppBarForm } from './styles';
+import { AppBar } from './subcomponents/AppBar';
+import { Form } from './subcomponents/Form';
+import { WrapperAppBarFormProps } from './types';
+
+export const AppBarForm = (props: WrapperAppBarFormProps) => {
+    const { children } = props;
+    return (
+        <WrapperAppBarForm>
+            <AppBar />
+            <Form>{children}</Form>
+        </WrapperAppBarForm>
+    );
+};

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/styles.tsx

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperAppBarForm = styled('div')(() => ({
+    flexGrow: '1',
+    display: 'flex',
+    flexDirection: 'column',
+}));

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/subcomponents/AppBar/index.tsx

@@ -0,0 +1,25 @@
+import { Image, LanguagePopover } from '@m4l/components';
+import { useBase } from '@m4l/core';
+import { useResponsive } from '@m4l/graphics';
+import { NoAuthBaseProviderProps } from '../../../../../../types';
+
+import { WrapperAppBar } from './styles';
+export const AppBar = () => {
+    const { companyLogoSmallUrl } = useBase<NoAuthBaseProviderProps>();
+    const downMd = useResponsive('down', 'md');
+
+    return (
+        <WrapperAppBar>
+            {downMd ? (
+                <Image
+                    key={'Isotipo'}
+                    src={companyLogoSmallUrl}
+                    width={'40px'}
+                    height={'40px'}
+                    skeletonVariant="circle"
+                />
+            ) : null}
+            <LanguagePopover />
+        </WrapperAppBar>
+    );
+};

package/src/layouts/NoAuthModuleLayout/subcomponents/InnerModule/subcomponents/AppBarForm/subcomponents/AppBar/styles.tsx

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material/styles';
+
+export const WrapperAppBar = styled('header')(({ theme }) => ({
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: theme.spacing(1, 3),
+    [theme.breakpoints.up('md')]: {
+        justifyContent: 'flex-end',
+    },
+}));