@fluxo-dev/shell 0.0.8

package/src/lib/layouts/main/app-bar.tsx

@@ -0,0 +1,192 @@
+import React, {useEffect} from 'react';
+import {useSelector} from "react-redux";
+import {Link, useLocation, useNavigate} from "react-router-dom";
+import SearchBar from "./search-bar";
+import {FluxoClientSys, FluxoStateDispatcher} from "@fluxo-dev/api-client-base";
+import {
+  Group,
+  Avatar,
+  Stack,
+  Burger,
+  ActionIcon, Drawer, NavLink, Badge, AppShell
+} from "@mantine/core";
+import {
+  IconApps,
+  IconChevronRight,
+  IconLink,
+  IconRefresh
+} from '@tabler/icons-react';
+import { useMantineTheme } from '@mantine/core';
+import {IFluxoRootState} from "@fluxo-dev/state";
+import {AppJit} from "../../models/app-jit";
+import {AppJitManager} from "../../services/app-jit-manager";
+import {showNotification} from "@mantine/notifications";
+import {DataCard} from "@fluxo-dev/ui-components";
+import {useHotkeys} from "@mantine/hooks";
+
+export interface AppBarProps {
+  previewMode?: {
+    logo?: string,
+    logoHeight: number,
+    headerColor: string,
+  }
+}
+function AppBar(props: AppBarProps) {
+
+  const {userInfo} = useSelector((state: any) => state.user)
+  const {navbarOpened, configuration} = useSelector((state: IFluxoRootState) => state.layout);
+
+  const [jitApps, setJitApps] = React.useState<AppJit[]>([]);
+  const [jitAppsLoaded, setJitAppsLoaded] = React.useState<boolean>(false);
+  const [jitAppsDrawerOpened, setJitAppsDrawerOpened] = React.useState<boolean>(false);
+
+  const fluxoTheme = useMantineTheme();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const [developmentMode, setDevelopmentMode] = React.useState<boolean | undefined>(undefined);
+  const [lastLocation, setLastLocation] = React.useState<string | undefined>(undefined);
+
+  useHotkeys([
+    ['mod + o', () => {
+      if(navbarOpened)
+            FluxoStateDispatcher.dispatchCloseNavbar()
+        else
+            FluxoStateDispatcher.dispatchOpenNavbar()
+    }]
+  ]);
+
+  useEffect(() => {
+
+    if(!jitAppsLoaded)
+      return;
+
+    const splittedLocation = location.pathname.split('/');
+
+    if(splittedLocation.length < 2) {
+      setDevelopmentMode(false);
+      return;
+    }
+
+    const found = jitApps.filter(a => a.developmentRoute === splittedLocation[1]);
+    if(found.length > 0) {
+      setDevelopmentMode(true);
+    } else {
+      setDevelopmentMode(false);
+    }
+
+    if(lastLocation) {
+      const splittedLastLocation = lastLocation.split('/');
+      const foundInLastLocation = jitApps.filter(a => a.developmentRoute === splittedLastLocation[1]);
+      if((foundInLastLocation.length > 0 && found.length === 0) || (foundInLastLocation.length === 0 && found.length > 0)) {
+        navigate(0);
+      }
+    }
+
+    setLastLocation(location.pathname);
+
+  }, [location, jitApps])
+
+
+  const appJitManager = new AppJitManager();
+
+  useEffect(() => {
+    setJitApps(appJitManager.loadAppConfigurations());
+    setJitAppsLoaded(true);
+  }, [])
+
+  const logout = () => {
+    FluxoClientSys.Instance.auth.logout();
+  }
+
+  const refreshJitApps = (app: AppJit) => {
+    appJitManager.refreshApp(app)
+      .then((result: boolean) => {
+        if(result) {
+          setJitApps(appJitManager.loadAppConfigurations());
+          showNotification({
+            title: 'Applicazione aggiornata',
+            message: `L'applicazione ${app.name} è stata aggiornata correttamente`,
+            color: 'green',
+            icon: <IconRefresh />,
+          })
+        } else {
+          showNotification({
+            title: 'Errore',
+            message: `L'applicazione ${app.name} non è stata aggiornata. Verifica che la JIT App sia attiva e raggiungibile e che il file di configurazione sia corretto.`,
+            color: 'red',
+            icon: <IconRefresh />,
+          })
+        }
+      })
+  }
+
+  return (
+    <AppShell.Header
+      id={'fluxo-app-bar'}
+      style={{
+        borderBlockEnd: 'none',
+        position: props.previewMode ? 'relative' : 'fixed',
+        zIndex: props.previewMode ? 1 : 200,
+      }}
+    >
+      <Stack gap={0}>
+        <Group px={16} justify={'space-between'} wrap="nowrap" style={{height: '48px', backgroundColor: props.previewMode?.headerColor ?? fluxoTheme.colors['brand'][7],}}>
+          <Group>
+            <Burger
+              disabled={props.previewMode !== undefined}
+              color={'#fff'}
+              opened={navbarOpened}
+              title={'Menu'}
+              onClick={() => {
+                if(navbarOpened)
+                  FluxoStateDispatcher.dispatchCloseNavbar()
+                else
+                  FluxoStateDispatcher.dispatchOpenNavbar()
+              }}
+            />
+            <Link to={props.previewMode ? '' : '/'} style={{maxHeight: props.previewMode?.logoHeight ?? configuration.logoHeight}} >
+              <img src={props.previewMode?.logo ? props.previewMode.logo : configuration.logo} style={{maxHeight: props.previewMode?.logoHeight ?? configuration.logoHeight}} />
+            </Link>
+          </Group>
+          <Group wrap="nowrap">
+            {developmentMode &&
+              <Badge color={'red'}>Development mode</Badge>
+            }
+            {jitApps && jitApps.length > 0 &&
+              <>
+                <ActionIcon variant={'transparent'} onClick={() => setJitAppsDrawerOpened(true)}><IconApps color={'white'} size={32}/></ActionIcon>
+
+                <Drawer title={'Navigazione (App JIT)'} position={'right'} opened={jitAppsDrawerOpened} onClose={() => setJitAppsDrawerOpened(false)}>
+                  <div>
+                    {jitApps.map((app, index) => {
+                      return (
+                        <DataCard padded={false} key={index} title={app.name} actions={[{icon: <IconRefresh size={18} />, onClick: () => refreshJitApps(app),}]}>
+                          {app.menu.map((group, index) => {
+                            return (
+                              <React.Fragment key={`${group.name}_${index}`}>
+                                <NavLink leftSection={<Badge size="xs" variant="filled" color={fluxoTheme.colors['brand'][7]} w={16} h={16} p={0}>{group.items ? group.items?.length : 0}</Badge>} rightSection={<IconChevronRight size={16} />} label={group.name}>
+                                  {group.items?.map((feature, index) => {
+                                    return (
+                                      <NavLink key={`${feature.name}_${index}`} onClick={() => navigate(`${app.developmentRoute}/${feature.route}`)} label={feature.name} leftSection={<IconLink size={16} />} />
+                                    )})}
+                                </NavLink>
+                              </React.Fragment>
+                            )})}
+                        </DataCard>
+                      )
+                    })}
+                  </div>
+                </Drawer>
+              </>
+            }
+            <SearchBar disabled={props.previewMode !== undefined}/>
+            <Avatar onClick={() => props.previewMode ? undefined : logout()} color="cyan" radius="xl" size={32}>{userInfo.FirstName.substr(0, 1)}{userInfo.LastName.substr(0, 1)}</Avatar>
+          </Group>
+        </Group>
+      </Stack>
+    </AppShell.Header>
+  )
+}
+
+export default AppBar;

package/src/lib/layouts/main/app-layout.tsx

@@ -0,0 +1,52 @@
+import React, {Suspense} from 'react';
+import AppBar from "./app-bar";
+import AppContent from "./content";
+import FooterBar from "./footer-bar";
+import {AppShell, Loader, ScrollArea} from '@mantine/core';
+import {Navbar} from "./navbar";
+import {useSelector} from "react-redux";
+import {IFluxoRootState} from "@fluxo-dev/state";
+import ShellSpotlight from './shell-spotlight';
+
+export interface AppLayoutProps {
+    appVersion: string;
+}
+
+function AppLayout(props: AppLayoutProps) {
+
+    const {navbarOpened} = useSelector((state: IFluxoRootState) => state.layout);
+
+    return (
+        <>
+            <AppShell
+                padding={0}
+                styles={{main: {backgroundColor: (1 == 1) ? '#edeff3' : '#f9f9f9'}}}
+                navbar={{width: 248, breakpoint: 'sm', collapsed: {mobile: !navbarOpened, desktop: !navbarOpened}}}
+                header={{height: 48}}
+                footer={{height: 40}}
+                transitionDuration={0}
+                layout={'default'}
+            >
+                <AppBar/>
+
+              <Navbar/>
+
+
+              <AppShell.Main>
+                    <Suspense fallback={<Loader/>}>
+                        <AppContent/>
+                    </Suspense>
+                </AppShell.Main>
+
+                <AppShell.Footer>
+                    <FooterBar appVersion={props.appVersion} />
+                </AppShell.Footer>
+
+            </AppShell>
+
+            <ShellSpotlight/>
+        </>
+    )
+}
+
+export default AppLayout;

package/src/lib/layouts/main/content.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import {Outlet} from "react-router-dom";
+
+function AppContent() {
+    return (
+      <Outlet />
+    )
+}
+
+export default AppContent;

package/src/lib/layouts/main/footer-bar.tsx

@@ -0,0 +1,76 @@
+import React, {useEffect} from 'react';
+import {IFluxoRootState, useAppSelector} from "@fluxo-dev/state";
+import {Group, Space, Divider, Text, Anchor, Breadcrumbs, Tooltip, AppShell} from "@mantine/core";
+import {IconChecks, IconUser} from '@tabler/icons-react';
+import {FluxoStateDispatcher} from "@fluxo-dev/api-client-base";
+import {useIdle} from "@mantine/hooks";
+import {Link} from 'react-router-dom';
+
+export interface FooterBarProps {
+  appVersion: string;
+}
+
+function FooterBar(props: FooterBarProps) {
+
+  const {userInfo} = useAppSelector((state: IFluxoRootState) => state.user);
+  const {userIdle} = useAppSelector((state: IFluxoRootState) => state.layout);
+
+  const idle = useIdle(5000);
+
+  useEffect(() => {
+    if (idle)
+      FluxoStateDispatcher.dispatchSetUserIdle();
+    else
+      FluxoStateDispatcher.dispatchUnsetUserIdle();
+  }, [idle])
+
+  const items = [
+    {title: 'Home', href: '#'},
+    {title: 'Prodotti', href: '#'},
+  ].map((item, index) => (
+    <Anchor href={item.href} key={index}>
+      {item.title}
+    </Anchor>
+  ));
+
+  return (
+    <AppShell.Footer style={{
+      height: 40
+    }}>
+      <Group px={20} justify='space-between' wrap="nowrap" style={{height: '100%'}}>
+        <Group>
+          <Tooltip label={'Stato del sistema'} position={'top'} withArrow color={'gray'}>
+            <span>
+              <IconChecks color={'green'} size={16}/>
+            </span>
+          </Tooltip>
+          <Divider orientation={'vertical'}/>
+          <Tooltip label={'Stato utente'} position={'top'} withArrow color={'gray'}>
+            <span>
+              {userIdle ?
+                <IconUser size={16} color={'orange'}/> :
+                <IconUser size={16} color={'green'}/>
+              }
+            </span>
+          </Tooltip>
+          <Divider orientation={'vertical'}/>
+          <Text c="dimmed" fz="xs">{userInfo.FirstName} {userInfo.LastName}</Text>
+          <Divider orientation={'vertical'}/>
+          <Breadcrumbs separator="→" fz={'xs'}>{items}</Breadcrumbs>
+        </Group>
+        <Space h={'md'}/>
+        <Group>
+          <Link to={'/settings'} style={{textDecoration: 'none'}}>
+            <Text c="dimmed" fz="xs">Amministrazione</Text>
+          </Link>
+          <Divider orientation={'vertical'}/>
+          <Text c="dimmed" fz="xs">Fluxo ©2022</Text>
+          <Divider orientation={'vertical'}/>
+          <Text c="dimmed" fz="xs">V. {props.appVersion}</Text>
+        </Group>
+      </Group>
+    </AppShell.Footer>
+  )
+}
+
+export default FooterBar;

package/src/lib/layouts/main/navbar-item.module.css

@@ -0,0 +1,49 @@
+.control {
+  font-weight: 500;
+  height: auto;
+  display: block;
+  width: 100%;
+  color: black;
+  font-size: 14px;
+  padding-left: 8px;
+  padding-right: 8px;
+  &:hover {
+    background-color: #ececec;
+    color: black;
+  };
+}
+
+.controlSub {
+  font-weight: 500;
+  width: calc(100% - 30px);
+  display: block;
+  text-decoration: none;
+  padding: 8px 10px 8px 24px;
+  margin-left: 30px;
+  font-size: 18px;
+  color: black;
+  border-left: #ececec;
+
+  &:hover {
+    background-color: black;
+    color: black;
+  }
+}
+
+.link {
+  font-weight: 500;
+  display: block;
+  text-decoration: none;
+  padding: 8px 16px;
+  padding-left: 24px;
+  margin-left: 30px;
+  font-size: 14px;
+  &:hover {
+    background-color: #ececec;
+    color: black;
+  }
+}
+
+.chevron {
+  transition: transform 200ms ease;
+}

package/src/lib/layouts/main/navbar-item.tsx

@@ -0,0 +1,129 @@
+import { useState } from 'react';
+import {
+  Group,
+  Box,
+  Collapse,
+  ThemeIcon,
+  UnstyledButton, useMantineTheme, useMantineColorScheme
+} from '@mantine/core';
+import {IconChevronLeft, IconH6} from '@tabler/icons-react';
+import {IFluxoRootState} from "@fluxo-dev/state";
+import {useSelector} from "react-redux";
+import {Link, useNavigate} from "react-router-dom";
+import {AppMenuItem, UserService} from "@fluxo-dev/api-client-base";
+import style from './navbar-item.module.css';
+
+interface NavBarItemProps {
+  icon: JSX.Element;
+  label: string;
+  routerLink?: string;
+  initiallyOpened?: boolean;
+  links?: AppMenuItem[];
+  level: number;
+}
+
+export function NavBarItem({ icon: Icon, label, routerLink, initiallyOpened, links, level }: NavBarItemProps) {
+
+  const hasLinks = Array.isArray(links);
+  const [opened, setOpened] = useState(initiallyOpened || false);
+  const {navbarOpened} = useSelector((state: IFluxoRootState) => state.layout);
+  const navigate = useNavigate();
+
+  const theme = useMantineTheme();
+  const colorScheme = useMantineColorScheme();
+  const ChevronIcon = IconChevronLeft;
+  const userService = new UserService();
+
+  const items = (hasLinks ? links : []).map((link, i) => {
+
+    if(link.hasPermissions) {
+
+      if(!userService.currentUserHasPermissions(link.permissions!)) {
+        return null;
+      }
+    }
+
+    if(link.isGroup) {
+      return (
+        <NavBarItem
+          key={link.label + '_' + i}
+          label={link.label}
+          icon={<IconH6/>}
+          links={link.children}
+          routerLink={link.routerLink}
+          initiallyOpened={false}
+          level={level + 1}
+        />
+      )
+    }
+
+    if(link.featureIdentifier === 'webclient.routing.externallink') {
+      return (
+        <Link
+          className={style['link']}
+          style={{
+            color: colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+            borderLeft: `1px solid ${colorScheme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`
+          }}
+          key={link.label + '_' + i}
+          to={link.routerLink!}
+          target={'_blank'}>
+          {link.label}
+        </Link>
+      );
+    } else {
+      return (
+        <Link
+          className={style['link']}
+          style={{
+            color: colorScheme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],
+            borderLeft: `1px solid ${colorScheme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[3]}`
+          }}
+          key={link.label + '_' + i}
+          to={'/' + link.routerLink}>
+          {link.label}
+        </Link>
+      );
+    }
+  });
+
+  return (
+    <>
+      {navbarOpened ?
+        <>
+          <UnstyledButton onClick={() => {
+            if(hasLinks)
+              setOpened((o) => !o)
+            else
+              navigate('/' + routerLink)
+          }} className={level === 0 ? style['control'] : style['controlSub']}>
+            <Group justify='space-between' gap={0}>
+              <Box style={{ display: 'flex', alignItems: 'center' }}>
+                {level === 0 &&
+                  <ThemeIcon variant="light" size={30}>
+                    {Icon}
+                  </ThemeIcon>
+                }
+                <Box ml="md" style={{marginLeft: level === 0 ? '1rem' : 0}}>{label}</Box>
+              </Box>
+              {hasLinks && (
+                <ChevronIcon
+                  className={style['chevron']}
+                  size={14}
+                  stroke={1.5}
+                  style={{
+                    transform: opened ? `rotate(90deg)` : 'none',
+                  }}
+                />
+              )}
+            </Group>
+          </UnstyledButton>
+          {hasLinks ? <Collapse style={{width: '100%', marginBottom: 8}} in={opened}>{items}</Collapse> : null}
+        </> :
+        <>
+          {/*<NavBarItemMinimal leftSection={Icon} label={label} initiallyOpened={initiallyOpened} links={links} />*/}
+        </>
+      }
+    </>
+  );
+}

package/src/lib/layouts/main/navbar.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import {Burger, Center, AppShell, Stack, ScrollArea, useMantineTheme} from "@mantine/core";
+import {NavBarItem} from "./navbar-item";
+import {IconBadge} from '@tabler/icons-react';
+import {IFluxoRootState} from "@fluxo-dev/state";
+import {useSelector} from "react-redux";
+import {IconFactory} from "../../utils/icon-factory";
+import {AppMenuItem, UserService} from "@fluxo-dev/api-client-base";
+
+export function Navbar() {
+
+  const {navbarOpened, appMenu} = useSelector((state: IFluxoRootState) => state.layout);
+  const fluxoTheme = useMantineTheme();
+
+  const getPermittedNavBarItems = () => {
+    const userService = new UserService();
+
+    return (appMenu as AppMenuItem[])?.filter(a => !a.hasPermissions || userService.currentUserHasPermissions(a.permissions ?? []));
+  }
+
+  return (
+    <AppShell.Navbar>
+        <AppShell.Section grow my="md" component={ScrollArea}>
+          <Stack justify="center" align={'center'} gap={8}>
+            {getPermittedNavBarItems().map((e, i) => {
+              const IconComponent = e.icon ?
+                  IconFactory.getIcon(e.icon) :
+                  IconFactory.getIcon('Dashboard');
+
+              return (
+                  <NavBarItem level={0} key={i} routerLink={e.routerLink} icon={IconComponent} label={e.label} links={e.children && e.children.length > 0 ? e.children : undefined}/>
+              )
+            })}
+          </Stack>
+        </AppShell.Section>
+    </AppShell.Navbar>
+  )
+}

package/src/lib/layouts/main/search-bar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {Text, TextInput} from "@mantine/core";
+import {IconSearch} from '@tabler/icons-react';
+import {openSpotlight} from "@mantine/spotlight";
+import {useOs} from "@mantine/hooks";
+
+export interface SearchBarProps {
+  disabled: boolean,
+}
+function SearchBar(props: SearchBarProps) {
+
+  const currentOs = useOs();
+
+  const rightSection = (
+    <div style={{display: 'flex', alignItems: 'center'}}>
+      <Text style={{backgroundColor: '#f4f4f4', fontSize: 11, fontWeight: 700, padding: '2px 7px', borderRadius: 4, border: '1px solid #e9ecef'}}>
+        {currentOs === "macos" ?
+          <>⌘</> :
+          <>Ctrl</>
+        }
+        <span style={{margin: '0 5px'}}>+</span>
+        K
+      </Text>
+    </div>
+  );
+
+  return (
+    <div>
+      <TextInput
+        disabled={props.disabled}
+        size={'xs'}
+        placeholder="Cerca..."
+        onClick={() => props.disabled ? undefined : openSpotlight()}
+        leftSection={<IconSearch size={16}/>}
+        rightSectionWidth={90}
+        width={150}
+        rightSection={rightSection}
+        styles={{input: {cursor: 'pointer', borderRadius: 4}, section: {pointerEvents: 'none'}}}
+      />
+    </div>
+  )
+}
+
+export default SearchBar;

package/src/lib/layouts/main/shell-spotlight.tsx

@@ -0,0 +1,58 @@
+import {useSelector} from "react-redux";
+import {IFluxoRootState} from "@fluxo-dev/state";
+import React, {useEffect, useState} from "react";
+import {Spotlight, SpotlightActionGroupData} from "@mantine/spotlight";
+import {AppMenuService} from "../../services/app-menu.service";
+import {useNavigate} from "react-router-dom";
+import {FluxoStateDispatcher} from "@fluxo-dev/api-client-base";
+import {IconSearch} from "@tabler/icons-react";
+import {SpotlightActions} from "@mantine/spotlight/lib/Spotlight";
+import { rem } from "@mantine/core";
+
+function ShellSpotlight() {
+
+    const {configuration, appMenu} = useSelector((state: IFluxoRootState) => state.layout);
+    const [spotlightActions, setSpotlightActions] = useState<SpotlightActionGroupData[] | SpotlightActions[]>([]);
+    const navigateTo = useNavigate();
+
+    useEffect(() => {
+
+        const appMenuService = new AppMenuService();
+
+        if(appMenu) {
+            appMenuService.getSpotlightMenu(appMenu)
+                .then((res) => {
+
+                    const result: SpotlightActionGroupData[] = res.map((group) => {
+                        return {
+                            ...group,
+                            actions: group.actions.map((action) => {
+                                return {
+                                    ...action,
+                                    onClick: () => navigateTo(action.id),
+                                }
+                            })
+                        }
+                    });
+
+                    setSpotlightActions(result)
+                })
+        }
+    }, [configuration, appMenu, navigateTo])
+
+    return (
+        <Spotlight
+            onSpotlightOpen={() => FluxoStateDispatcher.dispatchOpenSearchPanel()}
+            onSpotlightClose={() => FluxoStateDispatcher.dispatchCloseSearchPanel()}
+            actions={spotlightActions}
+            searchProps={{
+                leftSection: <IconSearch style={{ width: rem(20), height: rem(20) }} stroke={1.5} />,
+                placeholder: "Cerca funzione..."
+            }}
+            shortcut="mod + k"
+            nothingFound="Nessun risultato..."
+        />
+    )
+}
+
+export default ShellSpotlight;

package/src/lib/models/app-jit.ts

@@ -0,0 +1,6 @@
+import {FluxoFrontendAppConfiguration} from "@fluxo-dev/api-client-base";
+
+export interface AppJit extends FluxoFrontendAppConfiguration {
+  developmentRoute: string;
+  developmentUrl: string;
+}

package/src/lib/pages/general/fluxo-plugin-loader.tsx

@@ -0,0 +1,22 @@
+import React, {Suspense, useState} from 'react';
+import { ModuleLoader } from "@fluxo-fe/shell/mfe";
+
+export interface FluxoPluginLoaderProps {
+  url: string,
+  scope: string,
+  module: string
+}
+function FluxoPluginLoader(props: FluxoPluginLoaderProps) {
+
+    const [remote, setRemote] = useState<any>({url: props.url, scope: props.scope, module: props.module});
+
+    return (
+        <Suspense fallback={'Loading . . . '}>
+            {
+                remote && <ModuleLoader url={remote.url} scope={remote.scope} module={remote.module} />
+            }
+        </Suspense>
+    )
+}
+
+export default FluxoPluginLoader;