@fluxo-dev/shell 0.0.8 → 0.0.12

package/src/lib/pages/settings/security/components/user/user-form.tsx

@@ -1,123 +0,0 @@
-import {DomainRole, FluxoClientSys, User, UserService} from "@fluxo-dev/api-client-base";
-import { Button, MultiSelect, Stack, TextInput } from "@mantine/core";
-import { useForm } from "@mantine/form";
-import { showNotification } from "@mantine/notifications";
-import { IconFilePlus } from '@tabler/icons-react';
-import {useEffect, useState} from "react";
-
-export interface UserFormProps {
-    user?: User,
-    onCreate: () => void
-}
-function UserForm(props: UserFormProps) {
-    const userService = new UserService();
-    const roles = [
-        { value: 'administrator', label: 'Amministratore' },
-        { value: 'user', label: 'Utente' }
-    ];
-
-    const [domainRoles, setDomainRoles] = useState<DomainRole[]>([]);
-
-    useEffect(() => {
-
-      FluxoClientSys.Instance.security.domainRole.find(999,0)
-        .then((res) => {
-          setDomainRoles(res.results);
-        });
-
-    }, []);
-
-    const generalForm = useForm({
-        initialValues: {
-            user: {
-                firstName: props.user?.userData?.FirstName ?? '',
-                lastName: props.user?.userData?.LastName ?? '',
-                email: props.user?.email ?? '',
-                userName: ''
-            },
-            assignToRoles: props.user?.roles ?? [],
-            assignToDomainRoles: props.user?.domainRoles.map(a => a.id!.toString()) ?? []
-        },
-        clearInputErrorOnChange: true,
-        validateInputOnChange: true,
-        validate: {
-            user: {
-                firstName: (value) => (!value ? 'Il nome è obbligatorio' : null),
-                lastName: (value) => (!value ? 'Il cognome è obbligatorio' : null),
-                email: (value) => (!value ? 'L\'email è obbligatoria' : null),
-            },
-        }
-    });
-
-    const create = (value: any) => {
-        value.user.userName = value.user.email;
-
-        const newUser = {
-          user: value.user,
-          assignToRoles: value.assignToRoles,
-          assignToDomainRoles: value.assignToDomainRoles.map((a: string) => parseInt(a))
-        };
-
-
-        (props.user ? userService.updateUser(props.user.id, newUser) : userService.createUser(newUser))
-            .then((res) => {
-                if (res.success) {
-                    showNotification({
-                        title: 'Operazione completata',
-                        message: 'Aggiornamento completato',
-                        color: 'green',
-                    })
-                    generalForm.reset();
-                    generalForm.resetDirty();
-                    if (props.onCreate)
-                        props.onCreate();
-                } else {
-                    showNotification({
-                        title: 'Errore',
-                        message: `Errore durante l'aggiornamento: ${res.errors.map(x => x.description).join(', ')}`,
-                        color: 'red',
-                    });
-                }
-            })
-            .catch((err) => {
-                showNotification({
-                    title: 'Errore',
-                    message: `Errore durante l'aggiornamento: ${err.message}`,
-                    color: 'red',
-                });
-            })
-    }
-
-    return (
-        <form
-            onKeyDown={event => { if (event.which === 13) event.preventDefault() }}
-            onSubmit={generalForm.onSubmit(
-                (values, event) => {
-                    event?.preventDefault();
-                    create(values);
-                })}>
-            <Stack gap="xs">
-                <TextInput label={'Nome'} {...generalForm.getInputProps('user.firstName')} />
-                <TextInput label={'Cognome'} {...generalForm.getInputProps('user.lastName')} />
-                <TextInput label={'Email'} disabled={!!props.user} {...generalForm.getInputProps('user.email')} />
-                <MultiSelect
-                    data={roles}
-                    label="Tipo di accesso"
-                    placeholder="Seleziona uno o più tipi di accesso"
-                    {...generalForm.getInputProps('assignToRoles')}
-                />
-                <MultiSelect
-                  data={domainRoles.map(x => ({value: x.id!.toString(), label: x.name}))}
-                  label="Ruolo"
-                  placeholder="Seleziona uno o più ruoli"
-                  {...generalForm.getInputProps('assignToDomainRoles')}
-                />
-            </Stack >
-            <Stack align="flex-end" mt="md">
-                <Button type="submit" leftSection={<IconFilePlus />} ml='auto' disabled={!generalForm.isDirty()}>Salva</Button>
-            </Stack >
-        </form>
-    );
-}
-
-export default UserForm;

package/src/lib/pages/settings/security/components/user/users-grid.tsx

@@ -1,127 +0,0 @@
-import React, {useEffect, useState} from "react";
-import {FluxoClientSys, User} from "@fluxo-dev/api-client-base";
-import {showNotification} from "@mantine/notifications";
-import {ActionIcon, Badge, Menu, Modal, Stack, Table} from "@mantine/core";
-import {DataCard} from "@fluxo-dev/ui-components";
-import {IconDotsVertical, IconEdit, IconPlus, IconTrash} from "@tabler/icons-react";
-import UserForm from "./user-form";
-
-export function UsersGrid() {
-  const [users, setUsers] = useState<User[]>([]);
-
-  const [currentUser, setCurrentUser] = useState<User>();
-
-  const [newUserModalOpen, setNewUserModalOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    getAllUsers();
-  }, [])
-
-  const getAllUsers = () => {
-    FluxoClientSys.Instance.security.user.getAllUsers().then(res => {
-      setUsers(res);
-    })
-  }
-
-  const deletion = (id: string) => {
-    FluxoClientSys.Instance.security.user.deleteUser(id)
-      .then((res) => {
-        if (res.success) {
-          showNotification({
-            title: 'Cancellazione completata',
-            message: `L'utente è stato cancellato con successo`,
-            color: 'green',
-          });
-        } else {
-          showNotification({
-            title: 'Errore',
-            message: `Errore durante la cancellazione: ${res.errors.map(x => x.description).join(', ')}`,
-            color: 'red',
-          });
-        }
-        getAllUsers();
-      })
-  }
-
-  return (
-    <Stack>
-      <DataCard
-        title={'Utenti'}
-        actions={[
-          {icon: <IconPlus size={18}/>, label: 'Nuovo utente', onClick: () => setNewUserModalOpen(true)},
-        ]}>
-
-        <Table highlightOnHover>
-          <Table.Thead>
-            <Table.Tr>
-              <Table.Th>Nome</Table.Th>
-              <Table.Th>Cognome</Table.Th>
-              <Table.Th>Email</Table.Th>
-              <Table.Th>Tipo di accesso</Table.Th>
-              <Table.Th>Ruoli</Table.Th>
-              <Table.Th></Table.Th>
-            </Table.Tr>
-          </Table.Thead>
-          <Table.Tbody>
-          {
-            users.map((element, i) =>
-              <Table.Tr key={i}>
-                <Table.Td>{element.userData.FirstName}</Table.Td>
-                <Table.Td>{element.userData.LastName}</Table.Td>
-                <Table.Td>{element.email}</Table.Td>
-                <Table.Td>
-                  <Stack gap={8}>
-                    {element.roles.map((d) => {
-                      return (
-                        <Badge key={d} color={'orange'}>{d}</Badge>
-                      )
-                    })}
-                  </Stack>
-                </Table.Td>
-                <Table.Td>
-                  <Stack gap={8}>
-                    {element.domainRoles.map((d) => {
-                      return (
-                        <Badge key={d.id}>{d.name}</Badge>
-                      )
-                    })}
-                  </Stack>
-                </Table.Td>
-                <Table.Td align="right">
-                  <Menu shadow="md" width={200}>
-                    <Menu.Target>
-                      <ActionIcon><IconDotsVertical size={18} /></ActionIcon>
-                    </Menu.Target>
-
-                    <Menu.Dropdown>
-                      <Menu.Item onClick={() => {
-                        setCurrentUser(element);
-                        setNewUserModalOpen(true);
-                      }} leftSection={<IconEdit size={14} />}>Modifica</Menu.Item>
-                      <Menu.Item color={'red'} onClick={() => deletion(element.id)} leftSection={<IconTrash color={'red'} size={14} />}>Elimina</Menu.Item>
-                    </Menu.Dropdown>
-                  </Menu>
-                </Table.Td>
-              </Table.Tr>
-            )
-          }
-          </Table.Tbody>
-        </Table>
-      </DataCard>
-
-
-      <Modal centered opened={newUserModalOpen} onClose={() => {
-        setNewUserModalOpen(false);
-        setCurrentUser(undefined);
-      }} title={`${currentUser ? 'Modifica utente' : 'Crea utente'}`}>
-        <UserForm onCreate={() => {
-          setNewUserModalOpen(false);
-          getAllUsers();
-          setCurrentUser(undefined);
-        }} user={currentUser}/>
-      </Modal>
-
-
-    </Stack>
-  );
-}

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

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

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

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