@fluxo-dev/shell 0.0.8 → 0.0.12

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

@@ -1,76 +0,0 @@
-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

@@ -1,49 +0,0 @@
-.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

@@ -1,129 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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;

package/src/lib/pages/login/account-confirmation.tsx

@@ -1,86 +0,0 @@
-import { Button, Grid, Stack, Text } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
-import {UserService} from "@fluxo-dev/api-client-base";
-
-export function AccountConfirmation() {
-
-    const [email, setEmail] = useState<string>();
-    const [token, setToken] = useState<string>();
-    const [linkIsValid, setLinkIsValid] = useState<boolean>(true);
-
-    const [recoveryResult, setRecoveryResult] = useState<{ success: boolean, errors: { code: string, description: string }[] } | undefined>();
-
-    const userService = new UserService();
-    let [searchParams] = useSearchParams();
-
-    useEffect(() => {
-
-        const currentEmail = searchParams.get('email');
-        const currentToken = searchParams.get('token');
-
-        if (!currentEmail || !currentToken) {
-            setLinkIsValid(false)
-        } else {
-            setEmail(currentEmail)
-            setToken(currentToken)
-        }
-
-
-    }, [searchParams]);
-
-    const onFormSubmitClickHandler = () => {
-        if (email && token) {
-            userService.confirmEmail({ email: email, token: token })
-                .then(async (res) => {
-                    setRecoveryResult(res);
-                })
-                .catch(_err => setRecoveryResult({ success: false, errors: [{ code: 'unkown', description: 'Errore sconosciuto' }] }));
-        }
-    }
-
-    return (
-        <Grid justify="center">
-            <Grid.Col span={3}>
-
-                {linkIsValid &&
-                    <Stack gap={16}>
-                        {(!recoveryResult) &&
-                            <Stack gap={16}>
-                                <h2 style={{ textAlign: 'center' }}>Conferma attivazione account</h2>
-                                <Text style={{ marginTop: 0, marginBottom: 32, textAlign: 'center' }}>{email}</Text>
-
-                                <Button onClick={onFormSubmitClickHandler}>Clicca qui per attivare il tuo account</Button>
-                            </Stack>
-                        }
-
-                        {recoveryResult?.success ?
-                            <div style={{ marginTop: 32 }}>
-                                <Stack gap={16} style={{ textAlign: 'center' }}>
-                                    <Text>Account attivato con successo</Text>
-                                    <Link to={'/identity/login'}>Effettua il login</Link>
-                                </Stack>
-                            </div> :
-                            <div style={{ textAlign: 'center', marginTop: 32 }}>
-                                {recoveryResult?.errors.map((err, index) => {
-                                    return <Text key={err.code + index} >{err.description}</Text>
-                                })}
-                            </div>
-                        }
-
-                    </Stack>
-                }
-
-                {!linkIsValid &&
-                    <Stack gap={16}>
-                        <Text>Link non valido</Text>
-                        <Link to={'/identity/login'} style={{ textAlign: 'center' }}>Effettua il login</Link>
-                    </Stack>
-                }
-
-            </Grid.Col>
-        </Grid>
-    )
-}
-
-export default AccountConfirmation;

package/src/lib/pages/login/change-password.tsx

@@ -1,58 +0,0 @@
-import { Button, Grid, Stack, TextInput, Text } from '@mantine/core';
-import { useState } from 'react';
-import {UserService} from "@fluxo-dev/api-client-base";
-
-export function ChangePassword() {
-
-    const [currentPassword, setCurrentPassword] = useState<string>();
-    const [newPassword, setNewPassword] = useState<string>();
-    const [confirmNewPassword, setConfirmNewPassword] = useState<string>();
-
-    const userService = new UserService();
-
-    const [recoveryResult, setRecoveryResult] = useState<{ success: boolean, errors: { code: string, description: string }[] } | undefined>();
-
-    const onFormSubmitClickHandler = () => {
-        if (currentPassword && newPassword && confirmNewPassword) {
-            userService.changePassword({ currentPassword: currentPassword, newPassword: newPassword })
-                .then(async (_res) => {
-                    setRecoveryResult(_res);
-                })
-                .catch(_err => {
-                    setRecoveryResult({ success: false, errors: [{ code: 'unkown', description: 'Errore sconosciuto' }] })
-                });
-        }
-    }
-
-    return (
-        <Grid justify="center">
-            <Grid.Col span={3}>
-
-                <Stack gap={16}>
-                    {(!recoveryResult || !recoveryResult.success) &&
-                        <Stack gap={16}>
-                            <h2>Cambio password</h2>
-                            <TextInput type={'password'} label={'Password attuale'} onChange={(e) => setCurrentPassword(e.target.value)} />
-                            <TextInput type={'password'} label={'Nuova password'} onChange={(e) => setNewPassword(e.target.value)} />
-                            <TextInput type={'password'} label={'Conferma nuova password'} onChange={(e) => setConfirmNewPassword(e.target.value)} />
-
-                            {recoveryResult?.errors.map((err) => {
-                                return <Text>{err.description}</Text>
-                            })}
-
-                            <Button onClick={onFormSubmitClickHandler} disabled={!(newPassword && (newPassword === confirmNewPassword)) || (currentPassword === newPassword)}>Cambia password</Button>
-                        </Stack>
-                    }
-
-                    {recoveryResult && recoveryResult.success &&
-                        <h2>Password modificata con successo</h2>
-                    }
-
-                </Stack>
-
-            </Grid.Col>
-        </Grid>
-    )
-}
-
-export default ChangePassword;

package/src/lib/pages/login/forgot-password.tsx

@@ -1,53 +0,0 @@
-import { Button, Grid, Stack, Text, TextInput } from '@mantine/core';
-import { useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import {UserService} from "@fluxo-dev/api-client-base";
-
-export function ForgotPassword() {
-
-    const [email, setEmail] = useState<string>();
-    const [errorMessage, setErrorMessage] = useState<string | undefined>();
-    const [successMessage, setSuccessMessage] = useState<string | undefined>();
-
-    const navigateTo = useNavigate();
-    const userService = new UserService();
-
-    const onFormSubmitClickHandler = () => {
-        if (email) {
-            userService.forgotPassword(email)
-                .then((_res) => setSuccessMessage("Richiesta inviata correttamente. Apri la tua casella e-mail."))
-                .catch(_err => setErrorMessage("Errore durante il login"));
-        }
-    }
-
-    return (
-        <Grid justify="center">
-            <Grid.Col span={3}>
-                {!successMessage &&
-                    <div>
-                        <h2>Hai dimenticato la password?</h2>
-                        <Stack gap={16}>
-                            <TextInput onChange={(e) => setEmail(e.target.value)} placeholder={'Il tuo indirizzo e-mail'} label={'Inserisci il tuo indirizzo e-mail per recuperarla.'} />
-                            <Button onClick={onFormSubmitClickHandler} disabled={!email}>Recupera</Button>
-                            <Link to={'/auth/login'} style={{ textAlign: 'center' }}>Effettua il login</Link>
-
-                            {errorMessage &&
-                                <Text>{errorMessage}</Text>
-                            }
-
-                        </Stack>
-                    </div>
-                }
-
-                {successMessage &&
-                    <Stack gap={16}>
-                        <Text style={{ textAlign: 'center', width: '100%', display: 'block' }}>{successMessage}</Text>
-                        <Link to={'/auth/login'} style={{ textAlign: 'center' }}>Effettua il login</Link>
-                    </Stack>
-                }
-            </Grid.Col>
-        </Grid>
-    )
-}
-
-export default ForgotPassword;