@fluxo-dev/shell 0.0.8

package/src/lib/pages/settings/settings.tsx

@@ -0,0 +1,298 @@
+import {
+  DataCard,
+  ShellPage,
+  SideMenuGroup,
+  WaitData,
+} from "@fluxo-dev/ui-components";
+import { Text } from '@mantine/core';
+import {
+  IconApi, IconApps, IconCode,
+  IconDashboard,
+  IconKey,
+  IconLockAccess,
+  IconMenu, IconPrinter, IconRoute, IconUsers, IconUsersGroup,
+  IconVariable,
+} from '@tabler/icons-react';
+import React, { useEffect, useState } from 'react';
+import { Ui } from './ui/ui';
+import { MenuDesigner } from './menu-designer/menu-designer';
+import { RestApiDocumentation } from '@fluxo-fe/shell/korebi';
+import {Documentation, EmbeddedModule, FluxoClientSys} from "@fluxo-dev/api-client-base";
+import { ErrorPage } from "@fluxo-dev/ui-components";
+import Tokens from './token/tokens';
+import {useNavigate} from "react-router-dom";
+import {AppsList} from "./apps/apps-list";
+import {PermissionGrid} from "./security/components/permission/permission-grid";
+import {DomainRoleGrid} from "./security/components/domani-role/domain-role-grid";
+import {UsersGrid} from "./security/components/user/users-grid";
+import {RouteRuleGrid} from "./security/components/route-rule/route-rule-grid";
+import {PrintServerList} from "@fluxo-fe/shell/printing";
+
+export interface SettingsProps {
+  pluginEndpoint: string;
+  modules: EmbeddedModule[];
+}
+
+export function Settings(props: SettingsProps) {
+  const [currentTab, setCurrentTab] = useState('ui');
+  const [apiRestDoc, setApiRestDoc] = useState<Documentation>();
+  const navigate = useNavigate();
+
+
+  useEffect(() => {
+    const hash = window.location.hash.slice(1);
+    if (hash) {
+      setCurrentTab(hash);
+    }
+  }, []);
+
+  useEffect(() => {
+    FluxoClientSys.Instance.korebi.documentation.getRestApiDocumentation().then((res) => {
+      setApiRestDoc(res);
+    });
+  }, []);
+
+  const getSideMenuGroups = (): SideMenuGroup[] => {
+    return [
+      {
+        name: "Interfaccia",
+        items: [
+          {
+            key: 'ui',
+            title: (
+              <Text>
+                Brand
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'ui';
+              setCurrentTab('ui')
+            },
+            disabled: false,
+            icon: <IconDashboard size={18} />,
+            description:
+              'Gestisci colori logo e altri impostazioni di interfaccia',
+          },
+          {
+            key: 'menu',
+            title: (
+              <Text>
+                Menu e ricerca
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'menu';
+              setCurrentTab('menu')
+            },
+            disabled: false,
+            icon: <IconMenu size={18} />,
+            description: 'Gestione del menu laterale e delle azioni veloci',
+          },
+        ],
+      },
+      {
+        name: 'Sicurezza',
+        items: [
+          {
+            key: 'users',
+            title: (
+              <Text>
+                Utenti
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'users';
+              setCurrentTab('users');
+            },
+            disabled: false,
+            icon: <IconUsers size={18} />,
+            description: 'Crea, modifica, elimina utenti',
+          },
+          {
+            key: 'roles',
+            title: (
+              <Text>
+                Ruoli
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'roles';
+              setCurrentTab('roles')
+            },
+            disabled: false,
+            icon: <IconUsersGroup size={18} />,
+            description: 'Crea, modifica, elimina ruoli',
+          },
+          {
+            key: 'permissions',
+            title: (
+              <Text>
+                Permessi
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'permissions';
+              setCurrentTab('permissions')
+            },
+            disabled: false,
+            icon: <IconKey size={18} />,
+            description: 'Gestisci i permessi utente',
+          },
+          {
+            key: 'routes',
+            title: (
+              <Text>
+                Regole sulle rotte <small><b>(Avanzato)</b></small>
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'routes';
+              setCurrentTab('routes')
+            },
+            disabled: false,
+            icon: <IconRoute size={18} />,
+            description: 'Gestisci le regole sulle rotte',
+          },
+        ]
+      },
+      {
+        name: 'Stampe',
+        items: [
+          {
+            key: 'print-server',
+            title: (
+              <Text>
+                Print server
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'print-server';
+              setCurrentTab('print-server')
+            },
+            disabled: false,
+            icon: <IconPrinter size={18} />,
+            description: 'Gestisci i print server',
+          }
+        ]
+      },
+      {
+        name: 'Sviluppatori',
+        items: [
+          {
+            key: 'tokens',
+            title: (
+              <Text>
+                Access tokens <small>(account)</small>
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'tokens';
+              setCurrentTab('tokens')
+            },
+            disabled: false,
+            icon: <IconLockAccess  size={18} />,
+            description: 'Gestisci i tuoi access tokens',
+          },
+          {
+            key: 'environment',
+            title: (
+              <Text>
+                Variabili d'ambiente <small>(Globale)</small>
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'environment';
+              setCurrentTab('environment')
+            },
+            disabled: false,
+            icon: <IconVariable size={18} />,
+            description: "Crea, modifica o elimina le variabili d'ambiente",
+          },
+          {
+            key: 'plugin',
+            title: (
+              <Text>
+                Apps <small>(Globale)</small>
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'plugin';
+              setCurrentTab('plugin')
+            },
+            disabled: false,
+            icon: <IconApps size={18} />,
+            description: 'Installa o gestisci le apps',
+          },
+          {
+            key: 'apidoc',
+            title: (
+              <Text>
+                API <small>REST</small>
+              </Text>
+            ),
+            onClick: () => {
+              window.location.hash = 'apidoc';
+              setCurrentTab('apidoc')
+            },
+            disabled: false,
+            icon: <IconApi size={18} />,
+            description: 'Documentazione delle API REST',
+          },
+          {
+            key: 'ide',
+            title: (
+              <Text>
+                Ambiente di sviluppo <small>KOREBI</small>
+              </Text>
+            ),
+            onClick: () => navigate('/korebi-ide'),
+            disabled: false,
+            icon: <IconCode size={18} />,
+            description: 'Accedi all\'ambiente di sviluppo',
+          },
+        ],
+      },
+    ];
+  };
+
+  const renderCurrentSection = (tab: string) => {
+    switch (tab) {
+      case 'ui':
+        return <Ui />;
+      case 'menu':
+        return <MenuDesigner />;
+      case 'tokens':
+        return <Tokens />;
+      case 'users':
+        return <UsersGrid />;
+      case 'roles':
+        return <DomainRoleGrid />;
+      case 'permissions':
+        return <PermissionGrid />;
+      case 'routes':
+        return <RouteRuleGrid />;
+      case 'print-server':
+        return <PrintServerList />;
+      case 'apidoc':
+        return apiRestDoc ? (
+          <DataCard title={'Documentazione API REST'}>
+            <RestApiDocumentation documentation={apiRestDoc} />
+          </DataCard>
+        ) : (
+          <WaitData />
+        );
+      case 'plugin':
+        return <AppsList pluginEndpoint={props.pluginEndpoint} modules={props.modules} />;
+      default:
+        return <ErrorPage />;
+    }
+  };
+
+  return (
+    <ShellPage
+      headerProps={{ title: 'Impostazioni', subtitle: '' }}
+      contextSidebarProps={{ groups: getSideMenuGroups(), activeKey: currentTab }}>
+      {renderCurrentSection(currentTab)}
+    </ShellPage>
+  );
+}

package/src/lib/pages/settings/token/token-row.tsx

@@ -0,0 +1,69 @@
+import { ApiKey, ApiKeyService } from "@fluxo-dev/api-client-base";
+import { Badge, Button, Group, Stack } from "@mantine/core";
+import { showNotification } from "@mantine/notifications";
+import dayjs from 'dayjs';
+
+interface TokenRowProps {
+    token: ApiKey;
+    onChange: () => void
+}
+
+function TokenRow(props: TokenRowProps) {
+    const apiKeyService = new ApiKeyService();
+
+    const enable = () => {
+        apiKeyService.enable(props.token.id)
+            .then((res) => {
+                showNotification({
+                    title: '',
+                    message: `Token abilitato`,
+                    color: 'green',
+                });
+                props.onChange();
+            })
+    }
+
+    const disable = () => {
+        apiKeyService.disable(props.token.id)
+            .then((res) => {
+                showNotification({
+                    title: '',
+                    message: `Token disabilitato`,
+                    color: 'green',
+                });
+                props.onChange();
+            })
+    }
+
+    const deletion = () => {
+        apiKeyService.delete(props.token.id)
+            .then((res) => {
+                showNotification({
+                    title: 'Cancellazione completata',
+                    message: `Il token è stato cancellato con successo`,
+                    color: 'green',
+                });
+                props.onChange();
+            })
+    }
+
+    return (
+        <Group justify='space-between' style={{ border: '1px solid #dedede', padding: 15 }}>
+            <Stack gap={0}>
+                <span>{props.token.description}</span>
+                <small>{dayjs(props.token.expirationDate).format('DD/MM/YYYY')}</small>
+            </Stack>
+            <Group>
+                {props.token.isActive ? <Badge color="green">Attivo</Badge> : <Badge color="red">Disattivo</Badge>}
+                <Button variant="light" size="xs" onClick={props.token.isActive ? disable : enable}>
+                    {props.token.isActive ? 'Disabilita' : 'Abilita'}
+                </Button>
+                <Button variant="light" color="red" size="xs" onClick={deletion}>
+                    Cancella
+                </Button>
+            </Group>
+        </Group>
+    );
+}
+
+export default TokenRow;

package/src/lib/pages/settings/token/tokens.tsx

@@ -0,0 +1,73 @@
+import { DataCard } from "@fluxo-dev/ui-components";
+import { ApiKey, ApiKeyService } from "@fluxo-dev/api-client-base";
+import { Button, Modal, Stack, TextInput } from "@mantine/core";
+import {DatePickerInput} from '@mantine/dates';
+import { showNotification } from "@mantine/notifications";
+import { IconFilePlus, IconPlus } from '@tabler/icons-react';
+import { useEffect, useState } from "react";
+import TokenRow from "./token-row";
+
+function Tokens() {
+    const [tokens, setTokens] = useState<ApiKey[]>([]);
+    const [newTokenDescr, setNewTokenDescr] = useState<string>('');
+    const [newTokenDate, setNewTokenDate] = useState<Date | null>();
+    const [newTokenModalOpen, setNewTokenModalOpen] = useState<boolean>(false);
+    const apiKeyService = new ApiKeyService();
+
+    useEffect(() => {
+        getApiKeys();
+    }, [])
+
+    const getApiKeys = () => {
+        apiKeyService.getApiKeys().then(res => {
+            setTokens(res);
+        })
+    }
+
+    const create = () => {
+        apiKeyService.create({ description: newTokenDescr, expirationDate: newTokenDate! })
+            .then((res) => {
+                showNotification({
+                    title: 'Salvataggio completato',
+                    message: `Il menu è stato salvato con successo`,
+                    color: 'green',
+                });
+                getApiKeys();
+                setNewTokenModalOpen(false);
+                setNewTokenDescr('');
+                setNewTokenDate(undefined);
+            }).catch((err) => {
+                showNotification({
+                    title: 'Errore',
+                    message: `Errore durante il salvataggio del token. ${err.message}`,
+                    color: 'red',
+                })
+            })
+    }
+
+    return (
+        <>
+            <DataCard
+                title={'Access token'}
+                actions={[
+                    { icon: <IconPlus size={18} />, label: 'Genera un nuovo token', onClick: () => setNewTokenModalOpen(true) },
+                ]}>
+                <Stack gap={16}>
+                    {
+                        tokens.map((v, i) => <TokenRow key={i} token={v} onChange={getApiKeys} />)
+                    }
+                </Stack>
+            </DataCard>
+
+            <Modal centered opened={newTokenModalOpen} onClose={() => setNewTokenModalOpen(false)} title="Nuovo token">
+                <Stack align="flex-start" justify="flex-start">
+                    <DatePickerInput w='100%' label="Data scadenza" onChange={(v) => setNewTokenDate(v)} />
+                    <TextInput w='100%' label='Descrizione' onChange={(v) => setNewTokenDescr(v.currentTarget.value)} />
+                    <Button onClick={create} leftSection={<IconFilePlus />} ml='auto'>Salva</Button>
+                </Stack>
+            </Modal>
+        </>
+    );
+}
+
+export default Tokens;

package/src/lib/pages/settings/ui/ui.tsx

@@ -0,0 +1,149 @@
+import {DataCard} from "@fluxo-dev/ui-components";
+import {
+  Alert,
+  Box,
+  Button,
+  ColorInput,
+  ColorSwatch,
+  Divider,
+  FileButton,
+  Group,
+  NumberInput,
+  Stack,
+  Text, useMantineTheme
+} from "@mantine/core";
+import AppBar from "../../../layouts/main/app-bar";
+import {IconDeviceFloppy, IconInfoSquare, IconUpload} from '@tabler/icons-react';
+import {useEffect, useState} from "react";
+import {IFluxoRootState, useAppSelector} from "@fluxo-dev/state";
+import {showNotification} from "@mantine/notifications";
+import {FluxoClientSys} from "@fluxo-dev/api-client-base";
+
+export function Ui() {
+
+  const {configuration} = useAppSelector((state: IFluxoRootState) => state.layout);
+  const theme = useMantineTheme();
+
+  const [newLogo, setNewLogo] = useState<File | null>(null);
+  const [newLogoBase64, setNewLogoBase64] = useState<string | undefined>(configuration.logo);
+  const [newLogoHeight, setNewLogoHeight] = useState<number>(configuration.logoHeight);
+  const [newBrandColors, setNewBrandColors] = useState(configuration.colors);
+
+  const swatches = Object.keys(theme.colors).map((color) => (
+    <ColorSwatch
+      key={color}
+      color={theme.colors[color][6]}
+      onClick={() => {
+        setNewBrandColors(theme.colors[color])
+      }}
+    />
+  ));
+
+  const saveClientUIConfiguration = () => {
+    if(newLogoBase64 && newLogoHeight && newLogoHeight > 0 && newBrandColors && newBrandColors.length === 10) {
+
+      FluxoClientSys.Instance.configuration.updateClientUi({
+        colors: newBrandColors,
+        logo: newLogoBase64,
+        logoHeight: newLogoHeight
+      })
+        .then((res) => {
+          showNotification({
+            title: 'Salvataggio completato',
+            message: 'La configurazione è stata salvata correttamente.',
+            color: 'green',
+          })
+        })
+        .catch((err) => {
+          showNotification({
+            title: 'Errore',
+            message: err.message,
+            color: 'red',
+          })
+        })
+
+    } else {
+      showNotification({
+        title: 'Errore',
+        message: 'Compilare tutti i campi richiesti',
+        color: 'red',
+      })
+    }
+  }
+
+  const toBase64 = (file: File) => new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result?.toString() ?? '');
+    reader.onerror = error => reject(error);
+  });
+
+  const elaborateColorsArray = (colors: any, position: number, value: string) => {
+    const tmpColors = [...colors];
+    tmpColors[position] = value;
+    return tmpColors;
+  }
+
+  useEffect(() => {
+    if(newLogo) {
+      toBase64(newLogo)
+        .then((res) => {
+          setNewLogoBase64(res);
+        })
+    }
+  }, [newLogo])
+
+  return (
+    <Stack align={'stretch'} >
+
+      <div>
+        <DataCard title={'Anteprima'}>
+          <Stack>
+            <Box style={{border: '0px solid #888'}} p={0}>
+              <AppBar previewMode={{logo: newLogoBase64, logoHeight: newLogoHeight, headerColor: newBrandColors[6]}} />
+            </Box>
+          </Stack>
+        </DataCard>
+      </div>
+
+      <div>
+        <DataCard title={'Logo'} actions={[{icon: <IconDeviceFloppy />, onClick: () => console.log}]}>
+          <Stack align={'end'}>
+            <FileButton onChange={setNewLogo} accept="image/png,image/jpeg">
+              {(props) => <Button w={'100%'} leftSection={<IconUpload />} {...props}>Carica nuovo logo</Button>}
+            </FileButton>
+            <NumberInput max={50} min={10} w={'100%'} label={'Altezza del logo'} defaultValue={newLogoHeight} onChange={(v) => setNewLogoHeight(v !== '' ? +v! : 10)} />
+            <Divider color={'#e9ecef'} w={'100%'} />
+            <Button onClick={() => saveClientUIConfiguration()} leftSection={<IconDeviceFloppy />}>Salva</Button>
+          </Stack>
+        </DataCard>
+      </div>
+
+      <div>
+        <DataCard title={'Colori del brand'}>
+          <Stack align={'end'}>
+            <Alert w={'100%'} icon={<IconInfoSquare size={18} />} title="Informazioni">
+              Nota che tutti i colori dovrebbero sempre avere 10 sfumature. <a href={'https://smart-swatch.netlify.app/'} target={'_blank'}>Clicca qui</a> per generare la tua palette personalizzata.
+            </Alert>
+            <Text w={'100%'}>Preset</Text>
+            <Group w={'100%'} justify="left" gap="xs">
+              {swatches}
+            </Group>
+            <ColorInput w={'100%'} placeholder="Colore 1" label="Colore 1" value={newBrandColors[0]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 0, v)])} />
+            <ColorInput w={'100%'} placeholder="Colore 2" label="Colore 2" format={'hex'} value={newBrandColors[1]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 1, v)])} />
+            <ColorInput w={'100%'} placeholder="Colore 3" label="Colore 3" format={'hex'} value={newBrandColors[2]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 2, v)])} />
+            <ColorInput w={'100%'} placeholder="Colore 4" label="Colore 4" format={'hex'} value={newBrandColors[3]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 3, v)])} />
+            <ColorInput w={'100%'} placeholder="Colore 5" label="Colore 5" format={'hex'} value={newBrandColors[4]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 4, v)])} />
+            <ColorInput w={'100%'} placeholder="Colore 6" label="Colore 6" format={'hex'} value={newBrandColors[5]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 5, v)])} />
+            <ColorInput w={'100%'} placeholder="Colore 7" label="Colore 7" format={'hex'} value={newBrandColors[6]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 6, v)])} description={'Primario, headerbar'} />
+            <ColorInput w={'100%'} placeholder="Colore 8" label="Colore 8" format={'hex'} value={newBrandColors[7]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 7, v)])} />
+            <ColorInput w={'100%'} placeholder="Colore 9" label="Colore 9" format={'hex'} value={newBrandColors[8]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 8, v)])} />
+            <ColorInput w={'100%'} placeholder="Colore 10" label="Colore 10" format={'hex'} value={newBrandColors[9]} onChange={(v) => setNewBrandColors((o: any) => [...elaborateColorsArray(o, 9, v)])} />
+            <Divider color={'#e9ecef'} w={'100%'} />
+            <Button onClick={() => saveClientUIConfiguration()} leftSection={<IconDeviceFloppy />}>Salva</Button>
+          </Stack>
+        </DataCard>
+      </div>
+    </Stack>
+  )
+}

package/src/lib/services/app-jit-manager.ts

@@ -0,0 +1,92 @@
+import {AppJit} from "../models/app-jit";
+import {AppState, AppType, FluxoFrontendAppConfiguration} from "@fluxo-dev/api-client-base";
+
+export class AppJitManager {
+
+  public loadAppConfigurations(): AppJit[] {
+    const apps = localStorage.getItem('fluxo-jit-apps');
+
+    if (apps) {
+      const parsedApps: AppJit[] = JSON.parse(apps);
+      return parsedApps;
+    }
+
+    return [];
+  }
+
+  public refreshApp(app: AppJit): Promise<boolean> {
+    return fetch(`${app.developmentUrl}/fluxo-fe-app-configuration.json`)
+      .then((response) => {
+        return response.json()
+          .then((json) => {
+
+            this.removeAppConfiguration(json.scope, json.name);
+            this.addAppConfiguration(json, app.developmentUrl, app.developmentRoute);
+
+            return true;
+          });
+      })
+      .catch((error) => {
+
+        return false;
+      });
+  }
+
+  public checkIfAppExists(app: AppJit): boolean {
+    const apps = this.loadAppConfigurations();
+    return !!apps.find(x => x.scope === app.scope);
+  }
+
+  public addAppConfiguration(app: FluxoFrontendAppConfiguration, devUrl: string, devRoute: string) {
+    const apps = this.loadAppConfigurations();
+
+    if(apps.find(x => x.scope === app.scope && x.name === app.name)) {
+      return;
+    }
+
+    const a: AppJit = {
+      name: app?.name || '',
+      type: AppType.Frontend,
+      version: app?.version || '',
+      author: app?.author || '',
+      scope: app?.scope || '',
+      state: AppState.Active,
+      description: app?.description || '',
+      developmentRoute: devRoute,
+      installationDate: new Date(),
+      installationDirectory: '',
+      developmentUrl: devUrl,
+      id: 0,
+      menu: app?.menu || [],
+      isEmbedded: false
+    }
+
+    apps.push(a);
+    localStorage.setItem('fluxo-jit-apps', JSON.stringify(apps));
+  }
+
+  public setAppEnabled(appScope: string, appName: string, enabled: boolean) {
+    const apps = this.loadAppConfigurations();
+    const app = apps.find(x => x.scope === appScope && x.name === appName);
+
+    if(!app) {
+      return;
+    }
+
+    app.state = enabled ? AppState.Active : AppState.Inactive;
+    localStorage.setItem('fluxo-jit-apps', JSON.stringify(apps));
+  }
+
+  public removeAppConfiguration(appScope: string, appName: string) {
+    const apps = this.loadAppConfigurations();
+    const app = apps.find(x => x.scope === appScope && x.name === appName);
+
+    if(!app) {
+      return;
+    }
+
+    const index = apps.indexOf(app);
+    apps.splice(index, 1);
+    localStorage.setItem('fluxo-jit-apps', JSON.stringify(apps));
+  }
+}