@m4l/components 0.1.35 → 0.1.37

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

@@ -0,0 +1,201 @@
+// react
+import { createContext, useCallback, useEffect, useRef, useState } from 'react';
+//m4l
+import { EmitEvents, useHostTools, useModuleDictionary, useNetwork } from '@m4l/core';
+// mui
+// external libraries
+// componentes estilados
+// internal components
+// sub components
+// hooks
+// types
+import { AreasContextProps, AreasProviderProps, AreasStatus } from './types';
+
+import type { AreaType, NewWindowProps } from '../../components/Area/types';
+import { AreaProviderRef } from '../AreaContext/types';
+import { LABEL_NEW_AREA } from '../../dictionary';
+
+// network
+// constansts
+
+const AreasContext = createContext<AreasContextProps | null>(null);
+
+function AreasProvider(props: AreasProviderProps) {
+    const { children, activeAreasNetwork, onLoad } = props;
+    const [areas, setAreas] = useState<AreaType[]>([]);
+    const { events_add_listener, events_remove_listener } = useHostTools();
+    const { getLabel } = useModuleDictionary();
+    const [status, setStatus] = useState<AreasStatus>('init');
+    const { networkOperation } = useNetwork();
+
+    const [currentArea, setCurrentArea] = useState<string>(areas.length > 0 ? areas[0].id : '');
+
+    const currentAreaRef = useRef<string>(areas.length > 0 ? areas[0].id : '');
+
+    const areaRefs = useRef<Record<string, AreaProviderRef>>({});
+
+    const addWindow = useCallback((newWindow: NewWindowProps) => {
+        let current: AreaProviderRef | undefined;
+        console.log('addWindow raw');
+        if (areaRefs.current && areaRefs.current[currentAreaRef.current]) {
+            current = areaRefs.current[currentAreaRef.current];
+        }
+
+        if (current && current.addWindow) {
+            current.addWindow(newWindow);
+        }
+    }, []);
+
+    const addArea = useCallback(() => {
+        const newId = `area_${new Date().getTime()}_${(Math.random() * 1000).toFixed(0)}`;
+        const newName = `${getLabel(LABEL_NEW_AREA)} ${areas.length + 1}`;
+        setAreas(lastAreas => [
+            ...lastAreas,
+            { id: newId, url_icon: '', name: newName, loadWindows: false },
+        ]);
+
+        selectArea(newId);
+
+        if (activeAreasNetwork) {
+            networkOperation({
+                method: 'POST',
+                endPoint: `areas`,
+                data: { id: newId, name: newName },
+                toastSuccess: false,
+                toastError: false,
+                // isRemote: false
+            });
+        }
+        return newId;
+    }, [getLabel]);
+
+    useEffect(() => {
+        events_add_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
+
+        console.log('useEffect AreasProvider Emmiter');
+        return () => {
+            events_remove_listener(EmitEvents.EMMIT_EVENT_HOST_EMERGE_WINDOW, addWindow);
+        };
+    }, []);
+
+    //Load de las areas
+    useEffect(() => {
+        let mounted = true;
+
+        if (status === 'init') {
+            if (activeAreasNetwork) {
+                setStatus('loading');
+
+                networkOperation({
+                    method: 'GET',
+                    endPoint: `areas`,
+                    parms: {},
+                    toastSuccess: false,
+                    // isRemote: false
+                })
+                    .then((response: any) => {
+                        if (mounted) {
+                            if (
+                                response?.data &&
+                                Array.isArray(response.data) &&
+                                response.data.length > 0
+                            ) {
+                                setAreas(response.data);
+                                selectArea(response.data[0].id);
+                            } else {
+                                addArea();
+                            }
+                        }
+                    })
+                    .finally(() => {
+                        setStatus('loaded');
+                    });
+            } else {
+                addArea();
+                //Ya se pueden lanzar ventanas al area de trabajo
+                setStatus('loaded');
+            }
+        }
+        console.log('useEffect AreasProvider');
+        return () => {
+            console.log('useEffect cluanUp AreasProvider *** no debería darse');
+            mounted = false;
+        };
+    }, []);
+
+    useEffect(() => {
+        if (status === 'loaded') {
+            console.log('useEffect Areas loaded');
+            onLoad && onLoad();
+        }
+    }, [status]);
+
+    const selectArea = (newId: string) => {
+        currentAreaRef.current = newId;
+        setCurrentArea(newId);
+    };
+
+    const deleteArea = (areaId: string) => {
+        let newAreas: Array<AreaType> = [];
+
+        setAreas(lastAreas => {
+            newAreas = [...lastAreas];
+            newAreas = lastAreas.filter(area => area.id !== areaId);
+
+            return newAreas;
+        });
+
+        if (currentAreaRef.current === areaId) {
+            if (newAreas.length > 0) {
+                selectArea(newAreas[0].id);
+            } else {
+                selectArea('');
+            }
+        }
+        if (activeAreasNetwork) {
+            networkOperation({
+                method: 'DELETE',
+                endPoint: `areas/${areaId}`,
+                parms: {},
+                toastSuccess: false,
+                toastError: false,
+                // isRemote: false
+            });
+        }
+    };
+
+    const setAreaRef = (areaId: string, ref: AreaProviderRef) => {
+        console.log(
+            'setAreaRef',
+            areaRefs.current[areaId] === ref,
+            areaRefs.current[areaId]?.addWindow === ref?.addWindow,
+            JSON.stringify(areaRefs.current[areaId]) === JSON.stringify(ref),
+            areaRefs.current[areaId],
+            ref,
+        );
+        //TODO optimizar la asignacion de referencia, por sus keys, mas no por el ref
+
+        if (areaRefs.current[areaId] !== ref) {
+            areaRefs.current[areaId] = ref;
+        }
+    };
+
+    return (
+        <AreasContext.Provider
+            value={{
+                status,
+                activeAreasNetwork,
+                areas,
+                currentArea,
+                addArea,
+                deleteArea,
+                selectArea,
+                setAreaRef,
+            }}
+        >
+            {children}
+        </AreasContext.Provider>
+    );
+}
+
+export { AreasProvider, AreasContext };

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

@@ -0,0 +1,23 @@
+// export type NewWindowPopUpProps = Omit<WindowPopUpMFProps, 'container_id' | 'onClose'>;
+
+import { ReactNode } from 'react';
+import { AreaType } from '../../components/Area/types';
+import { AreaProviderRef } from '../AreaContext/types';
+
+export type AreasStatus = 'init' | 'loading' | 'loaded' | 'error';
+
+export interface AreasProviderProps {
+    children: ReactNode;
+    activeAreasNetwork: boolean;
+    onLoad?: () => void;
+}
+
+export interface AreasContextProps extends Omit<AreasProviderProps, 'children' | 'onLoad'> {
+    currentArea: string;
+    status: AreasStatus;
+    addArea: () => string;
+    deleteArea: (areaId: string) => void;
+    selectArea: (newAreaId: string) => void;
+    areas: AreaType[];
+    setAreaRef: (areaId: string, ref: AreaProviderRef) => void;
+}

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

@@ -0,0 +1,22 @@
+//react
+import { createContext } from 'react';
+// mui
+// hooks
+// utils
+// config
+// @type
+import { DynamicMFParmsContextProps, DynamicMFParmsProviderProps } from './types';
+
+// ----------------------------------------------------------------------
+
+const DynamicMFParmsContext = createContext<DynamicMFParmsContextProps | null>(null);
+
+function DynamicMFParmsProvider(props: DynamicMFParmsProviderProps) {
+    const { children, ...other } = props;
+
+    return (
+        <DynamicMFParmsContext.Provider value={other}>{children}</DynamicMFParmsContext.Provider>
+    );
+}
+
+export { DynamicMFParmsProvider, DynamicMFParmsContext };

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

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { MenuAction } from '../../../mui_extended';
+
+export type WindowActionType = 'main' | 'allways' | 'normal';
+
+export interface ModuleAction extends MenuAction {
+    visibility: WindowActionType;
+    tag?: any;
+    className?: string;
+}
+export type IsolationDynamicMFParameters = Record<string, any>;
+
+export interface DynamicMFParameters extends IsolationDynamicMFParameters {
+    // version: string;
+    setModuleActions: (newActions: ModuleAction[]) => void;
+}
+
+export interface DynamicMFParameters extends IsolationDynamicMFParameters {
+    // version: string;
+    // moduleParms: Record<string, any>;
+    // windowParms: Record<string, any>;
+    setModuleActions: (newActions: ModuleAction[]) => void;
+    // savWindowParms: (parms: Record<string, any>) => void;
+}
+
+export interface DynamicMFParmsProviderProps extends DynamicMFParameters {
+    children: ReactNode;
+}
+
+export type DynamicMFParmsContextProps = Omit<DynamicMFParmsProviderProps, 'children'>;

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

@@ -0,0 +1,7 @@
+export * from './AreasContext';
+
+export type {
+    DynamicMFParameters,
+    IsolationDynamicMFParameters,
+    ModuleAction,
+} from './DynamicMFParmsContext/types';

package/src/components/areas/dictionary.ts

@@ -0,0 +1,27 @@
+//Calling other modules
+export const MODULE_NAME_ADD = 'module_name_add';
+export const MODULE_NAME_EDIT = 'module_name_edit';
+
+export const LABEL_NEW_AREA = 'label_new_area';
+export const LABEL_DELETE_AREA = 'label_delete_area';
+
+// Modal
+export const MODAL_DELETE_MESSAGE = 'modal_delete_message';
+export const MODAL_DELETE_TITLE = 'modal_delete_title';
+
+// Row Actions
+export const ROW_ACTION_EDIT = 'row_action_edit';
+export const ROW_ACTION_DELETE = 'row_action_delete';
+
+// Grid Master adicionales
+export const LABEL_ID = 'label_id';
+
+// Detail
+export const ACCORDION_BASIC_INFORMATION = 'accordion_basic_information';
+
+export const ACCORDION_CONTACT_DATA = 'accordion_contact_data';
+
+// Grid Privileges
+export const LABEL_ROLE_NAME = 'label_role_name';
+export const LABEL_PRIVILEGE_NAME = 'label_privilege_name';
+export const LABEL_PRIVILEGE_ACTIVE = 'label_privilege_active';

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

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { AreaContext } from '../../contexts/AreaContext';
+
+// ----------------------------------------------------------------------
+export const useArea = () => {
+    const context = useContext(AreaContext);
+    if (!context) throw new Error('useArea context must be use inside AreaContext');
+
+    return context;
+};

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

@@ -0,0 +1,14 @@
+import { useContext } from 'react';
+import { AreasContext } from '../../contexts/AreasContext';
+
+// ----------------------------------------------------------------------
+
+export function useAreas() {
+    const context = useContext(AreasContext);
+
+    if (!context) throw new Error('useAreas context must be use inside AreasContext');
+
+    return context;
+}
+
+export default useAreas;

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

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { DynamicMFParmsContext } from '../../contexts/DynamicMFParmsContext';
+
+// ----------------------------------------------------------------------
+export const useDynamicMFParameters = () => {
+    const context = useContext(DynamicMFParmsContext);
+    if (!context)
+        throw new Error('useDynamicMFParameters context must be use inside DynamicMFParmsContext');
+
+    return context;
+};

package/src/components/areas/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './contexts';

package/src/components/formatters/BooleanFormatter/index.tsx

@@ -0,0 +1,51 @@
+// react
+import { useMemo } from 'react';
+
+import { useEnvironment, useModuleDictionary } from '@m4l/core';
+// mui
+
+// types
+import { BooleanFormatterProps } from './types';
+import { Icon } from '../../../components/Icon';
+import { WrapperComponent } from '../../WrapperComponent';
+
+export function BooleanFormatter(props: BooleanFormatterProps) {
+    const { presentationType, value, Component = WrapperComponent } = props;
+    const { getLabel } = useModuleDictionary();
+    const { host_static_assets, environment_assets } = useEnvironment();
+    const final_value = value ?? false;
+    const srcCheckTrue = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_true.svg`;
+    const srcCheckFalse = `${host_static_assets}/${environment_assets}/frontend/components/data_grid/components/boolean_formatter/assets/icons/check_false.svg`;
+
+    const memoComponent = useMemo(() => {
+        if (presentationType === 'string_yes_no') {
+            return (
+                <Component>
+                    {final_value
+                        ? getLabel('formatters.boolean_yes')
+                        : getLabel('formatters.boolean_no')}
+                </Component>
+            );
+        }
+        if (presentationType === 'string_true_false') {
+            return (
+                <Component>
+                    {final_value
+                        ? getLabel('formatters.boolean_true')
+                        : getLabel('formatters.boolean_false')}
+                </Component>
+            );
+        }
+
+        return (
+            <Component>
+                <Icon
+                    src={final_value ? srcCheckTrue : srcCheckFalse}
+                    bgColor={'action.disabled'}
+                />
+            </Component>
+        );
+    }, [final_value]);
+
+    return memoComponent;
+}

package/src/components/formatters/BooleanFormatter/types.ts

@@ -0,0 +1,7 @@
+export type PresentationType = 'string_yes_no' | 'string_true_false' | 'check';
+
+export interface BooleanFormatterProps {
+    Component?: React.ElementType;
+    presentationType: PresentationType;
+    value?: boolean;
+}

package/src/components/formatters/DateFormatter/index.tsx

@@ -0,0 +1,51 @@
+// @m4l
+import { useFormatter } from '@m4l/graphics';
+// mui
+
+import { WrapperComponent } from '../../WrapperComponent';
+// types
+import { DateFormatterProps } from './types';
+
+export function DateFormatter(props: DateFormatterProps) {
+    // const dateFormatter = new Intl.DateTimeFormat(navigator.language);
+
+    const { presentationType, value, format, Component = WrapperComponent } = props;
+
+    const { dateFormatter } = useFormatter();
+
+    let finalFormat: string = format || dateFormatter.datetimeFormat; // OOOO
+    let result: string;
+    let resultDate: Date;
+
+    if (value === undefined || value === null) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return <>{'-'}</>;
+    }
+    switch (presentationType) {
+        case 'datetime':
+            finalFormat = format || dateFormatter.datetimeFormat;
+            break;
+        case 'date':
+            finalFormat = format || dateFormatter.dateFormat;
+            break;
+        case 'time':
+            finalFormat = format || dateFormatter.timeFormat;
+            break;
+    }
+
+    try {
+        if (typeof value === 'number' || typeof value === 'string') {
+            // timestamp
+            resultDate = new Date(value);
+        } else {
+            //en date
+            resultDate = value;
+        }
+
+        result = dateFormatter.formatDate(resultDate, finalFormat);
+    } catch (e) {
+        result = 'err_typing';
+    }
+
+    return <Component>{result}</Component>;
+}

package/src/components/formatters/DateFormatter/types.ts

@@ -0,0 +1,10 @@
+import { Maybe } from '@m4l/core';
+
+export type PresentationType = 'date' | 'datetime' | 'time';
+
+export interface DateFormatterProps {
+    Component?: React.ElementType;
+    presentationType: PresentationType;
+    format?: string;
+    value: Maybe<Date | string | number>;
+}

package/src/components/formatters/PointsFormatter/index.tsx

@@ -0,0 +1,33 @@
+// @m4l
+
+// mui
+
+import { getPropertyByString } from '@m4l/core';
+import { WrapperComponent } from '../../WrapperComponent';
+// types
+import { CalibrationPoint, PointsFormatterProps } from './types';
+
+export function getFormatPoints(obProps: any, fieldValue: string, fieldUnit: string): string {
+    let result = '';
+
+    const points = getPropertyByString(obProps, fieldValue);
+    const unit = getPropertyByString(obProps, fieldUnit) || '';
+
+    if (points === undefined || points === null || !Array.isArray(points)) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return '[]';
+    }
+
+    points.map((point: CalibrationPoint) => {
+        if (point) {
+            result = result.concat(`[${point}${unit}]`);
+        }
+    });
+    return result;
+}
+
+export function PointsFormatter(props: PointsFormatterProps) {
+    const { obProps, fieldValue, fieldUnit, Component = WrapperComponent } = props;
+    // eslint-disable-next-line react/display-name
+    return <Component>{getFormatPoints(obProps, fieldValue, fieldUnit)}</Component>;
+}

package/src/components/formatters/PointsFormatter/types.ts

@@ -0,0 +1,8 @@
+export type CalibrationPoint = number | null;
+
+export interface PointsFormatterProps {
+    Component?: React.ElementType;
+    obProps: any;
+    fieldUnit: string;
+    fieldValue: string;
+}

package/src/components/formatters/PriceFormatter/index.tsx

@@ -0,0 +1,58 @@
+// react
+import { getPropertyByString } from '@m4l/core';
+import { useFormatter } from '@m4l/graphics';
+import { WrapperComponent } from '../../WrapperComponent';
+
+// mui
+
+// types
+import { PriceFormatterProps } from './types';
+
+export function getFormatPrice(
+    obProps: any,
+    fieldValue: string,
+    currency: string,
+    decimalDigits: number,
+): string {
+    let result = '';
+    const value = getPropertyByString(obProps, fieldValue);
+
+    try {
+        // console.log('PriceFormatter **', currencyFormatter.code, currencyFormatter.decimalDigits);
+        result =
+            Number(value).toLocaleString(navigator.language, {
+                currency: currency,
+                style: 'currency',
+                currencyDisplay: 'symbol',
+                useGrouping: true,
+                maximumFractionDigits: decimalDigits,
+            }) || '';
+    } catch (error) {
+        // console.warn('PriceFormatter', error);
+        result =
+            Number(value).toLocaleString('en-US', {
+                style: 'currency',
+                currency: 'USD',
+                currencyDisplay: 'symbol',
+                useGrouping: true,
+                maximumFractionDigits: decimalDigits,
+            }) || '';
+    }
+    return result;
+}
+
+export function PriceFormatter(props: PriceFormatterProps) {
+    const { obProps, fieldValue, Component = WrapperComponent } = props;
+    const { currencyFormatter } = useFormatter();
+    // eslint-disable-next-line react/display-name
+    return (
+        <Component>
+            {getFormatPrice(
+                obProps,
+                fieldValue,
+                currencyFormatter.code,
+                currencyFormatter.decimalDigits,
+            )}
+        </Component>
+    );
+}

package/src/components/formatters/PriceFormatter/types.ts

@@ -0,0 +1,5 @@
+export interface PriceFormatterProps {
+    Component?: React.ElementType;
+    obProps: any;
+    fieldValue: string;
+}

package/src/components/formatters/UncertaintyFormatter/index.tsx

@@ -0,0 +1,68 @@
+// @m4l
+
+// mui
+
+import { getPropertyByString } from '@m4l/core';
+import { WrapperComponent } from '../../WrapperComponent';
+// types
+import { UncertaintyRange, UncertaintyFormatterProps } from './types';
+
+// export const getUncertainty = (ranges: Array<UncertaintyRange>, symbol: string, unit: string) => {
+//     let result = '';
+//     ranges.map((obj: UncertaintyRange, idx) => {
+//         const cmc_min_closed = obj.cmc_min_closed != true ? '<' : '≤';
+//         const cmc_max_closed = obj.cmc_max_closed != true ? '<' : '≤';
+//         result = result.concat(
+//             `${idx > 0 ? ' ' : ''}`,
+//             `[${obj.cmc_min}${unit} ${cmc_min_closed} ${symbol} ${cmc_max_closed} ${obj.cmc_max}${unit} ± ${obj.cmc_uncertainty}]`,
+//         );
+//     });
+//     return result;
+// };
+
+export function getUncertaintyFormat(
+    obProps: any,
+    fieldValue: string,
+    fieldSymbol: string,
+    fieldUnit: string,
+): string {
+    let result = '';
+
+    const ranges = getPropertyByString(obProps, fieldValue);
+    const symbol = getPropertyByString(obProps, fieldSymbol);
+    const unit = getPropertyByString(obProps, fieldUnit);
+
+    if (
+        ranges === undefined ||
+        ranges === null ||
+        !Array.isArray(ranges) ||
+        typeof symbol !== 'string' ||
+        typeof unit !== 'string'
+    ) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return '[]';
+    }
+
+    ranges.map((obj: UncertaintyRange, idx) => {
+        const cmc_min_closed = obj.cmc_min_closed != true ? '<' : '≤';
+        const cmc_max_closed = obj.cmc_max_closed != true ? '<' : '≤';
+        result = result.concat(
+            `${idx > 0 ? ' ' : ''}`,
+
+            obj.cmc_min !== obj.cmc_max
+                ? `[${obj.cmc_min}${unit} ${cmc_min_closed} ${symbol} ${cmc_max_closed} ${obj.cmc_max}${unit} ± ${obj.cmc_uncertainty}]`
+                : `[${obj.cmc_min}${unit} ± ${obj.cmc_uncertainty}]`,
+        );
+    });
+
+    return result;
+}
+
+export function UncertaintyFormatter(props: UncertaintyFormatterProps) {
+    const { obProps, fieldValue, fieldSymbol, fieldUnit, Component = WrapperComponent } = props;
+
+    // eslint-disable-next-line react/display-name
+    return (
+        <Component>{getUncertaintyFormat(obProps, fieldValue, fieldSymbol, fieldUnit)}</Component>
+    );
+}

package/src/components/formatters/UncertaintyFormatter/types.ts

@@ -0,0 +1,15 @@
+export interface UncertaintyRange {
+    cmc_min_closed: boolean;
+    cmc_min: number;
+    cmc_max_closed: boolean;
+    cmc_max: number;
+    cmc_uncertainty: number;
+}
+
+export interface UncertaintyFormatterProps {
+    Component?: React.ElementType;
+    obProps: any;
+    fieldValue: string;
+    fieldSymbol: string;
+    fieldUnit: string;
+}