@irontec/ivoz-ui 1.7.8 → 1.7.9

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("p", { children: _jsx("img", { src: logo || './logo.svg', className: 'logo' }) }), _jsxs("p", { children: [_('Version'), ": ", version, " (", commit, ") ", _jsx("br", {}), _('Last update'), ": ", lastUpdated] }), _jsx("p", { children: _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/css/main.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.7.8",
+  "version": "1.7.9",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",
@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@date-io/date-fns": "^2.10.8",
+    "@irontec/ivoz-ui": "^1.7.8",
     "@types/react-color": "^3.0.12",
     "axios": "^0.21.1",
     "date-fns": "^2.21.1",

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();