@irontec/ivoz-ui 1.7.8 → 1.7.10

package/components/layout/Header/Header.js

@@ -1,22 +1,38 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import MenuIcon from '@mui/icons-material/Menu';
-import { Box, MenuItem, Typography, useMediaQuery, useTheme, } from '@mui/material';
-import { LightButton } from '../../../components/shared/Button/Button.styles';
-import { useStoreActions } from '../../../store';
+import { Box, Dialog, DialogActions, DialogContent, MenuItem, Typography, useMediaQuery, useTheme, } from '@mui/material';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { LightButton, SolidButton, } from '../../../components/shared/Button/Button.styles';
+import { useStoreActions, useStoreState } from '../../../store';
 import Avatar from './Avatar';
 import Breadcrumbs from './Breadcrumbs';
 import Settings from './Settings/Settings';
 import _ from '../../../services/translations/translate';
+import { useState } from 'react';
+import Logo from '../Menu/Logo';
 export default function Header(props) {
     const { routeMap, className } = props;
+    const [open, setOpen] = useState(false);
     const resetAuth = useStoreActions((actions) => actions.auth.resetAll);
     const toggleVisibility = useStoreActions((actions) => actions.menu.toggleVisibility);
+    const logo = useStoreState((state) => state.theme.logo);
+    const version = useStoreState((state) => state.aboutInfo.version);
+    const lastUpdated = useStoreState((state) => state.aboutInfo.lastUpdated);
+    const commit = useStoreState((state) => state.aboutInfo.commit);
     const handleLogout = () => {
         resetAuth();
     };
     const theme = useTheme();
     const desktop = useMediaQuery(theme.breakpoints.up('md'));
-    return (_jsxs(Box, Object.assign({ className: className }, { children: [_jsx(Box, Object.assign({ className: 'start' }, { children: _jsx(Breadcrumbs, { desktop: desktop, routeMap: routeMap }) })), _jsxs(Box, Object.assign({ className: 'end' }, { children: [desktop && (_jsxs(_Fragment, { children: [_jsx(Settings, {}), _jsx(Avatar, { children: _jsx(MenuItem, Object.assign({ onClick: handleLogout }, { children: _jsx(Typography, Object.assign({ textAlign: 'center' }, { children: _('Logout') })) }), 'logout') })] })), !desktop && (_jsx(LightButton, Object.assign({ onClick: () => {
+    const handleModal = () => {
+        setOpen(!open);
+    };
+    return (_jsxs(Box, Object.assign({ className: className }, { children: [_jsx(Box, Object.assign({ className: 'start' }, { children: _jsx(Breadcrumbs, { desktop: desktop, routeMap: routeMap }) })), _jsxs(Box, Object.assign({ className: 'end' }, { children: [desktop && (_jsxs(_Fragment, { children: [_jsx(Settings, {}), _jsxs(Avatar, { children: [_jsx(MenuItem, Object.assign({ onClick: handleModal }, { children: _jsx(Typography, Object.assign({ textAlign: 'center' }, { children: _('About') })) }), 'about'), _jsx(MenuItem, Object.assign({ onClick: handleLogout }, { children: _jsx(Typography, Object.assign({ textAlign: 'center' }, { children: _('Logout') })) }), 'logout')] })] })), !desktop && (_jsx(LightButton, Object.assign({ onClick: () => {
                             toggleVisibility();
-                        } }, { children: _jsx(MenuIcon, {}) })))] }))] })));
+                        } }, { children: _jsx(MenuIcon, {}) }))), open && (_jsxs(Dialog, Object.assign({ open: open, onClose: handleModal, keepMounted: true, "aria-labelledby": 'dialog-about', "aria-describedby": 'dialog-about' }, { children: [_jsx(CloseRoundedIcon, { className: 'close-icon', onClick: handleModal }), _jsxs(DialogContent, Object.assign({ className: 'dialog-about' }, { children: [_jsx("img", { src: logo || './logo.svg', className: 'logo' }), _jsxs("p", { children: [_('Version'), ": ", version, " (", commit, ") ", _jsx("br", {}), _('Last update'), ": ", lastUpdated] }), _jsxs(Box, Object.assign({ sx: {
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            gap: 1,
+                                        }, className: 'logo' }, { children: ["Powered by ", _jsx(Logo, {})] })), _jsx("p", { children: "\u00A92025 Irontec | All rights reserved" })] })), _jsx(DialogActions, { children: _jsx(SolidButton, Object.assign({ onClick: handleModal, sx: { width: '100%' } }, { children: _('ACCEPT') })) })] })))] }))] })));
 }

package/components/shared/ConfirmDialog.styles.d.ts

@@ -10,8 +10,8 @@ export declare const StyledDialogContentText: import("@emotion/styled").StyledCo
     noWrap?: boolean | undefined;
     paragraph?: boolean | undefined;
     sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
-    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "subtitle1" | "subtitle2" | "body1" | "body2" | "overline", string>> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "variant" | "align" | ("color" | "p" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/css/main.css

@@ -323,6 +323,12 @@ code {
 .MuiDialog-paper .MuiDialogActions-root button {
   flex-grow: 1;
 }
+.MuiDialog-paper .logo svg {
+  height: 12px;
+}
+.MuiDialog-paper img.logo {
+  height: 50px;
+}
 
 :root {
   /** COLORS **/

package/entities/DefaultEntityBehavior/Form/useMultilangSync.d.ts

@@ -0,0 +1,12 @@
+import { Language } from 'store/i18n';
+import { useFormikType } from 'services';
+import { FormOnChangeEvent } from 'entities';
+declare type Params = {
+    formik?: useFormikType;
+    languages: Array<Language>;
+    changeHandler: (e: FormOnChangeEvent) => void;
+};
+export declare const useMultilangSync: ({ formik, languages, changeHandler, }: Params) => {
+    handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+};
+export {};

package/entities/DefaultEntityBehavior/Form/useMultilangSync.js

@@ -0,0 +1,32 @@
+import { useRef } from 'react';
+export const useMultilangSync = ({ formik, languages, changeHandler, }) => {
+    const propagateTimeoutRef = useRef(null);
+    const latestTypingRef = useRef(null);
+    const handleChange = (e) => {
+        changeHandler(e);
+        const [fieldKey, currentLang] = e.target.name.split('.');
+        const currentValue = e.target.value;
+        latestTypingRef.current = { lang: currentLang, value: currentValue };
+        if (propagateTimeoutRef.current) {
+            clearTimeout(propagateTimeoutRef.current);
+        }
+        propagateTimeoutRef.current = setTimeout(() => {
+            if (!latestTypingRef.current) {
+                return;
+            }
+            const { lang: typingLang, value: typingValue } = latestTypingRef.current;
+            const updatedValues = {};
+            languages.forEach((lng) => {
+                var _a, _b, _c;
+                const locale = (_b = (_a = lng.locale) === null || _a === void 0 ? void 0 : _a.split('-')[0]) !== null && _b !== void 0 ? _b : 'en';
+                const existingVal = (_c = formik === null || formik === void 0 ? void 0 : formik.values[fieldKey]) === null || _c === void 0 ? void 0 : _c[locale];
+                updatedValues[locale] =
+                    locale === typingLang || !(existingVal === null || existingVal === void 0 ? void 0 : existingVal.trim())
+                        ? typingValue
+                        : existingVal;
+            });
+            formik === null || formik === void 0 ? void 0 : formik.setFieldValue(fieldKey, updatedValues);
+        }, 1800);
+    };
+    return { handleChange };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.7.8",
+  "version": "1.7.10",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",

package/services/form/Field/Multilang.js

@@ -3,12 +3,18 @@ import { Box } from '@mui/material';
 import { useStoreState } from 'store';
 import { StyledFieldset, StyledFieldsetRoot, } from './CustomComponentWrapper.styles';
 import { StyledMultilangTextField } from './TextField/TextField.styles';
+import { useMultilangSync } from '../../../entities/DefaultEntityBehavior/Form/useMultilangSync';
 const Multilang = (props) => {
     const { _columnName, disabled, properties, formik, inputProps, onBlur, changeHandler, } = props;
     let { InputProps } = props;
     const languages = useStoreState((state) => state.i18n.languages);
     const mlValue = (formik === null || formik === void 0 ? void 0 : formik.values[_columnName]) || {};
     const rootProperty = properties[_columnName];
+    const { handleChange } = useMultilangSync({
+        formik,
+        languages,
+        changeHandler,
+    });
     return (_jsx(StyledFieldsetRoot, Object.assign({ label: rootProperty.label, hasChanged: false, required: rootProperty.required, disabled: disabled, className: 'multilang' }, { children: _jsx(StyledFieldset, { children: _jsx(Box, { children: languages === null || languages === void 0 ? void 0 : languages.map((lng) => {
                     var _a, _b, _c;
                     const locale = (_a = lng.locale.split('-').shift()) !== null && _a !== void 0 ? _a : 'en';
@@ -22,7 +28,7 @@ const Multilang = (props) => {
                     const error = formik === null || formik === void 0 ? void 0 : formik.errors[name];
                     InputProps = InputProps !== null && InputProps !== void 0 ? InputProps : {};
                     InputProps.startAdornment = (_jsx("span", Object.assign({ className: 'preffix' }, { children: lng.name.substring(0, 3).toUpperCase() })));
-                    return (_jsx(StyledMultilangTextField, { name: name, type: 'text', multiline: multiline, value: value, disabled: disabled, label: undefined, required: required, onChange: changeHandler, onBlur: onBlur, error: touched && Boolean(error), errorMsg: touched && error, helperText: property.helpText, InputProps: Object.assign({}, InputProps), inputProps: inputProps, hasChanged: false, margin: 'dense', size: 'small' }, name));
+                    return (_jsx(StyledMultilangTextField, { name: name, type: 'text', multiline: multiline, value: value, disabled: disabled, label: undefined, required: required, onChange: handleChange, onBlur: onBlur, error: touched && Boolean(error), errorMsg: touched && error, helperText: property.helpText, InputProps: Object.assign({}, InputProps), inputProps: inputProps, hasChanged: false, margin: 'dense', size: 'small' }, name));
                 }) }) }) })));
 };
 export default Multilang;

package/store/aboutInfo.d.ts

@@ -0,0 +1,14 @@
+import { Action } from 'easy-peasy';
+interface AboutInfoState {
+    version: string;
+    commit: string;
+    lastUpdated: string;
+}
+interface AboutInfoActions {
+    setVersion: Action<AboutInfoState, string>;
+    setCommit: Action<AboutInfoState, string>;
+    setLastUpdated: Action<AboutInfoState, string>;
+}
+export declare type AboutInfoStore = AboutInfoActions & AboutInfoState;
+declare const aboutInfo: AboutInfoStore;
+export default aboutInfo;

package/store/aboutInfo.js

@@ -0,0 +1,16 @@
+import { action } from 'easy-peasy';
+const aboutInfo = {
+    version: 'development',
+    commit: 'HEAD',
+    lastUpdated: 'now',
+    setVersion: action((state, version) => {
+        state.version = version;
+    }),
+    setCommit: action((state, commit) => {
+        state.commit = commit;
+    }),
+    setLastUpdated: action((state, lastUpdated) => {
+        state.lastUpdated = lastUpdated;
+    }),
+};
+export default aboutInfo;

package/store/index.d.ts

@@ -12,6 +12,7 @@ import { MenuStore } from './menu';
 import { ThemeStore } from './theme';
 import { EntitiesStore } from './entities';
 import { LanguagesStore } from './i18n';
+import { AboutInfoStore } from './aboutInfo';
 export interface IvozStore {
     auth: AuthStore;
     spec: SpecStore;
@@ -25,6 +26,7 @@ export interface IvozStore {
     entities: EntitiesStore;
     i18n: LanguagesStore;
     theme: ThemeStore;
+    aboutInfo: AboutInfoStore;
 }
 export declare type IvozStoreState = StateMapper<FilterActionTypes<IvozStore>>;
 export declare const storeModel: IvozStore;

package/store/index.js

@@ -12,6 +12,7 @@ import menu from './menu';
 import theme from './theme';
 import entities from './entities';
 import i18n from './i18n';
+import aboutInfo from './aboutInfo';
 export const storeModel = {
     auth,
     spec,
@@ -25,6 +26,7 @@ export const storeModel = {
     entities,
     i18n,
     theme,
+    aboutInfo,
 };
 StoreContainer.store = createStore(storeModel);
 const { useStoreActions, useStoreState, useStoreDispatch, useStore } = createTypedHooks();