@fluxo-dev/shell 0.0.8

package/src/lib/pages/settings/security/components/route-rule/route-rule-create-form.tsx

@@ -0,0 +1,59 @@
+import React, {useState} from "react";
+import {FluxoClientSys, RouteRule} from "@fluxo-dev/api-client-base";
+import {showNotification} from "@mantine/notifications";
+import {Alert, Button, Divider, Group, Stack, TextInput} from "@mantine/core";
+import {IconInfoCircle} from "@tabler/icons-react";
+
+export interface RouteRuleCreateFormProps {
+  scope: string;
+  packageName: string;
+  onCanceled: () => void;
+  onCreated: () => void;
+}
+
+export function RouteRuleCreateForm(props: RouteRuleCreateFormProps) {
+  const [identifier, setIdentifier] = useState<string>('');
+
+  const createRouteRule = () => {
+    if(!identifier) return;
+
+    const command: RouteRule = {
+      scope: props.scope,
+      packageName: props.packageName,
+      route: identifier,
+    }
+    FluxoClientSys.Instance.security.routeRule.create(command)
+      .then(() => {
+        showNotification({
+          title: 'Regola creata',
+          message: `La regola ${props.scope}.${props.packageName}.${identifier} è stato creata con successo.`,
+          color: 'green'
+        })
+        props.onCreated();
+      })
+      .catch(() => {
+        showNotification({
+          title: 'Errore',
+          message: `Si è verificato un errore durante la creazione della regola ${props.scope}.${props.packageName}.${identifier}.`,
+          color: 'red'
+        })
+      });
+  }
+
+  return (
+    <Stack>
+      <TextInput label={"Identificatore"} placeholder={'Es: create'} required onChange={(v) => setIdentifier(v.target.value)} />
+
+      <p>Rotta: {`${props.scope}/${props.packageName}/${identifier}`}</p>
+      <Divider />
+      <Group justify={'right'}>
+        <Button variant={'subtle'} onClick={props.onCanceled}>Annulla</Button>
+        <Button
+          disabled={!identifier}
+          onClick={createRouteRule}>
+          Salva
+        </Button>
+      </Group>
+    </Stack>
+  )
+}

package/src/lib/pages/settings/security/components/route-rule/route-rule-grid.tsx

@@ -0,0 +1,229 @@
+import {ActionIcon, Button, Center, Divider, Grid, Group, Modal, Select, Stack, Table, Text} from "@mantine/core";
+import {DataCard} from "@fluxo-dev/ui-components";
+import React, {useEffect, useState} from "react";
+import {FluxoClientSys, PermissionScope, RouteRule} from "@fluxo-dev/api-client-base";
+import {IconCloudOff, IconLock, IconPlus, IconTrash} from "@tabler/icons-react";
+import {PermissionNavigator} from "../permission/permission-navigator";
+import {RouteRuleCreateForm} from "./route-rule-create-form";
+import {showNotification} from "@mantine/notifications";
+
+export function RouteRuleGrid() {
+
+  const [permissionScopes, setPermissionScopes] = useState<PermissionScope[]>([]);
+  const [permissionScopesLoaded, setPermissionScopesLoaded] = useState<boolean>(false);
+
+  const [currentScope, setCurrentScope] = useState<string | null>(null);
+  const [currentPackageName, setCurrentPackageName] = useState<string | null>(null);
+  const [routeRules, setRouteRules] = useState<RouteRule[]>([]);
+  const [permissionLoading, setPermissionLoading] = useState<boolean>(false);
+
+  const [currentRouteRule, setCurrentRouteRule] = useState<RouteRule | undefined>();
+  const [managePermissionModalOpened, setManagePermissionModalOpened] = useState<boolean>(false);
+
+  const [createRouteRuleModalOpened, setCreateRouteRuleModalOpened] = useState<boolean>(false);
+
+  useEffect(() => {
+    loadPermissionScopes();
+  }, [])
+
+  useEffect(() => {
+    if(currentScope && currentPackageName)
+      getRouteRulesForScope();
+    else
+      setRouteRules([]);
+  }, [currentScope, currentPackageName]);
+
+  const getRouteRulesForScope = () => {
+
+    if(!currentScope || !currentPackageName) {
+      return;
+    }
+
+    setPermissionLoading(true);
+
+    FluxoClientSys.Instance.security.routeRule.getRouteRulesForScope(currentScope, currentPackageName)
+      .then((res) => {
+        setRouteRules(res);
+        setPermissionLoading(false);
+      })
+  }
+
+  const loadPermissionScopes = () => {
+    FluxoClientSys.Instance.security.permission.getPermissionScopes()
+      .then((res) => {
+        setPermissionScopes(res);
+        setPermissionScopesLoaded(true);
+      })
+  }
+
+  const deleteRouteRule = (routeRule: RouteRule) => {
+    FluxoClientSys.Instance.security.routeRule.delete(routeRule.id!.toString())
+      .then(() => {
+        showNotification({
+          title: 'Regola eliminata',
+          message: `La regola ${routeRule.scope}.${routeRule.packageName}.${routeRule.route} è stato eliminata con successo.`,
+          color: 'green'
+        })
+        getRouteRulesForScope();
+      })
+      .catch(() => {
+        showNotification({
+          title: 'Errore',
+          message: `Si è verificato un errore durante l'eliminazione della regola ${routeRule.scope}.${routeRule.packageName}.${routeRule.route}.`,
+          color: 'red'
+        })
+      });
+  }
+
+  const getScopes = () => {
+    if(permissionScopes === undefined) return [];
+    return [...new Set(permissionScopes.map(a => a.scope))];
+  }
+
+  const getPackageNames = (scope: string | null) => {
+    if(permissionScopes === undefined || !scope) return [];
+    return [...new Set(permissionScopes.filter(a => a.scope === scope).map(a => a.packageName))];
+  }
+
+  return (
+    <DataCard title={'Regole sulle rotte'}>
+      <Stack>
+        <Grid>
+          <Grid.Col span={6}>
+            <Select
+              data={getScopes()}
+              searchable
+              placeholder={'Seleziona uno scope'}
+              value={currentScope}
+              label={'Scope'}
+              onChange={(v) => {
+                setCurrentScope(v)
+                setCurrentPackageName(null);
+              }} />
+          </Grid.Col>
+          <Grid.Col span={6}>
+            <Select
+              disabled={!currentScope}
+              searchable
+              placeholder={'Seleziona un package name'}
+              data={getPackageNames(currentScope)}
+              value={currentPackageName}
+              label={'Package name'}
+              onChange={(v) => {
+                setCurrentPackageName(v)
+              }} />
+          </Grid.Col>
+        </Grid>
+
+        <Divider />
+
+        {(currentScope && currentPackageName && !permissionLoading && routeRules.length) === 0 &&
+          <Stack>
+            <Group justify={'right'} align={'center'}>
+              <Button leftSection={<IconPlus size={18}/>} onClick={() => setCreateRouteRuleModalOpened(true)}>Nuova regola</Button>
+            </Group>
+            <Center>
+              <Text size={'md'}>Nessuna regola esistente.</Text>
+            </Center>
+          </Stack>
+        }
+
+        {(!currentScope || !currentPackageName) &&
+          <Stack align={'center'} mt={32} mb={32}>
+            <IconCloudOff color={'gray'} size={64} />
+            <Center>
+              <Text size={'md'}>Seleziona uno scope e un package name per visualizzare i permessi associati.</Text>
+            </Center>
+          </Stack>
+        }
+
+        {!permissionLoading && routeRules.length > 0 &&
+          <Stack>
+            <Group justify={'right'} align={'center'}>
+              <Button leftSection={<IconPlus size={18}/>} onClick={() => setCreateRouteRuleModalOpened(true)}>Nuova regola</Button>
+            </Group>
+            <Table highlightOnHover>
+              <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Id</Table.Th>
+                <Table.Th>Scope</Table.Th>
+                <Table.Th>Rotta</Table.Th>
+                <Table.Th>Permessi</Table.Th>
+                <Table.Th style={{maxWidth: 80, width: 80}}>Azioni</Table.Th>
+              </Table.Tr>
+              </Table.Thead>
+              <Table.Tbody>
+              {routeRules.map((element, i) => {
+                return (
+                  <Table.Tr key={i}>
+                    <Table.Td>{element.id}</Table.Td>
+                    <Table.Td>{`${element.scope}.${element.packageName}`}</Table.Td>
+                    <Table.Td>{`/${element.scope}/${element.packageName}/${element.route}`}</Table.Td>
+                    <Table.Td>{element.permissionsCount}</Table.Td>
+                    <Table.Td style={{maxWidth: 130, width: 130}}>
+                      <Group>
+                        <ActionIcon onClick={() => {
+                          setCurrentRouteRule(element);
+                          setManagePermissionModalOpened(true);
+                        }}>
+                          <IconLock size={18} />
+                        </ActionIcon>
+                        <ActionIcon onClick={() => {
+                          deleteRouteRule(element);
+                        }}>
+                          <IconTrash size={18} />
+                        </ActionIcon>
+                      </Group>
+
+                    </Table.Td>
+                  </Table.Tr>
+                )
+              })}
+              </Table.Tbody>
+            </Table>
+          </Stack>
+        }
+
+      </Stack>
+
+      {currentRouteRule &&
+        <Modal
+          size={'60%'}
+          centered
+          opened={managePermissionModalOpened}
+          onClose={() => {
+            getRouteRulesForScope();
+            setManagePermissionModalOpened(false);
+            setCurrentRouteRule(undefined);
+          }}
+          title={`Gestione permessi ${currentRouteRule.route}`}>
+          <PermissionNavigator
+            context={{type: 'route-rule', id: currentRouteRule.id!.toString()}}
+            onUpdate={() => {}}
+          />
+        </Modal>
+      }
+
+      <Modal
+        size={'60%'}
+        centered
+        opened={createRouteRuleModalOpened}
+        onClose={() => {
+          getRouteRulesForScope();
+          setCreateRouteRuleModalOpened(false);
+        }}
+        title={`Crea nuova regola`}>
+        <RouteRuleCreateForm
+          scope={currentScope!}
+          packageName={currentPackageName!}
+          onCreated={() => {
+            getRouteRulesForScope();
+            setCreateRouteRuleModalOpened(false);
+          }}
+          onCanceled={() => {setCreateRouteRuleModalOpened(false)}}
+        />
+      </Modal>
+
+    </DataCard>
+  )
+}

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

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

@@ -0,0 +1,127 @@
+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>
+  );
+}