@fluxo-dev/shell 0.0.8

package/src/lib/pages/settings/menu-designer/placeholder.module.css

@@ -0,0 +1,8 @@
+.root {
+  background-color: #1967d2;
+  height: 2px;
+  position: absolute;
+  right: 0;
+  transform: translateY(-50%);
+  top: 0;
+}

package/src/lib/pages/settings/menu-designer/placeholder.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { NodeModel } from "@minoru/react-dnd-treeview";
+import styles from "./placeholder.module.css";
+
+type Props = {
+  node: NodeModel;
+  depth: number;
+};
+
+export const Placeholder: React.FC<Props> = (props) => {
+  const left = props.depth * 24;
+  return <div className={styles["root"]} style={{ left }}></div>;
+};

package/src/lib/pages/settings/security/components/domani-role/domain-role-form.tsx

@@ -0,0 +1,67 @@
+import {DomainRole, DomainRoleService} from "@fluxo-dev/api-client-base";
+import {useForm} from "@mantine/form";
+import {Button, Stack, TextInput} from "@mantine/core";
+import {IconFilePlus} from '@tabler/icons-react';
+import {showNotification} from "@mantine/notifications";
+
+export interface DomainRoleFormProps {
+  domainRole: DomainRole | undefined;
+  onCreate: () => void;
+}
+
+export function DomainRoleForm (props: DomainRoleFormProps) {
+
+  const domainRoleService = new DomainRoleService();
+
+  const form = useForm<DomainRole>({
+    initialValues: {
+      name: props.domainRole?.name ?? '',
+      description: props.domainRole?.description ?? '',
+      identifier: props.domainRole?.identifier ?? '',
+    }
+  });
+
+  const save = (value: DomainRole) => {
+
+    (props.domainRole ? domainRoleService.update(props.domainRole.id!.toString(), value) : domainRoleService.create(value))
+      .then((res) => {
+
+        showNotification({
+          title: 'Operazione completata',
+          message: 'Ruolo salvato correttamente',
+          color: 'green',
+        })
+        form.reset();
+        form.resetDirty();
+        if (props.onCreate)
+          props.onCreate();
+
+      })
+      .catch((err) => {
+        showNotification({
+          title: 'Errore',
+          message: 'Si è verificato un errore: ' + err.message,
+          color: 'red',
+        })
+      })
+  }
+
+  return (
+    <form onKeyDown={event => { if (event.which === 13) event.preventDefault() }}
+          onSubmit={form.onSubmit(
+            (values, event) => {
+              event?.preventDefault();
+              save(values);
+            })}>
+      <Stack>
+        <TextInput label={"Identificatore"} placeholder={'Es: administrator'} required {...form.getInputProps('identifier')} />
+        <TextInput label={"Nome"} placeholder={'Es: Amministratore'} required {...form.getInputProps('name')} />
+        <TextInput label={"Descrizione"} placeholder={'Es: Ruolo amministratore'} required {...form.getInputProps('description')} />
+
+        <Stack align="flex-end" mt="md">
+          <Button type="submit" leftSection={<IconFilePlus />} ml='auto' disabled={!form.isDirty()}>Salva</Button>
+        </Stack >
+      </Stack>
+    </form>
+  )
+}

package/src/lib/pages/settings/security/components/domani-role/domain-role-grid.tsx

@@ -0,0 +1,139 @@
+import {IconDotsVertical, IconEdit, IconLock, IconPlus, IconTrash} from "@tabler/icons-react";
+import {ActionIcon, Menu, Modal, Table} from "@mantine/core";
+import {DataCard} from "@fluxo-dev/ui-components";
+import React, {useEffect, useState} from "react";
+import {DomainRole, FluxoClientSys} from "@fluxo-dev/api-client-base";
+import {showNotification} from "@mantine/notifications";
+import {DomainRoleForm} from "./domain-role-form";
+import {PermissionNavigator} from "../permission/permission-navigator";
+
+export function DomainRoleGrid() {
+
+  const [domainRoles, setDomainRoles] = useState<DomainRole[]>([]);
+  const [currentDomainRole, setCurrentDomainRole] = useState<DomainRole>();
+  const [domainRoleModalOpen, setDomainRoleModalOpen] = useState<boolean>(false);
+  const [updateDomainRolePermissionsModal, setUpdateDomainRolePermissionsModal] = useState<boolean>(false);
+
+  useEffect(() => {
+    getAllDomainRoles();
+  }, [])
+
+  const getAllDomainRoles = () => {
+    FluxoClientSys.Instance.security.domainRole.find(9999,0, undefined, "DomainRolePermissions,DomainRolePermissions.Permission")
+      .then((res) => {
+        setDomainRoles(res.results);
+      });
+  }
+
+  const deleteDomainRole = (id: number | undefined) => {
+
+    if(!id)
+      return;
+
+    FluxoClientSys.Instance.security.domainRole.delete(id.toString())
+      .then((res) => {
+
+        showNotification({
+          title: 'Cancellazione completata',
+          message: `Il ruolo è stato cancellato con successo`,
+          color: 'green',
+        });
+
+        getAllDomainRoles();
+
+      })
+      .catch((err) => {
+        showNotification({
+          title: 'Errore',
+          message: `Errore durante la cancellazione`,
+          color: 'red',
+        });
+      });
+  }
+
+  return (
+    <DataCard title={'Ruoli utente'}
+              actions={[{icon: <IconPlus size={18}/>, label: 'Nuovo ruolo', onClick: () => {
+                  setCurrentDomainRole(undefined);
+                  setDomainRoleModalOpen(true);
+                }}]}>
+      <Table highlightOnHover>
+        <Table.Thead>
+        <Table.Tr>
+          <Table.Th>Id</Table.Th>
+          <Table.Th>Identificatore</Table.Th>
+          <Table.Th>Nome</Table.Th>
+          <Table.Th>Descrizione</Table.Th>
+          <Table.Th>Permessi</Table.Th>
+          <Table.Th></Table.Th>
+        </Table.Tr>
+        </Table.Thead>
+        <tbody>
+        {
+          domainRoles.map((element, i) =>
+            <Table.Tr key={i}>
+              <td>{element.id}</td>
+              <td>{element.identifier}</td>
+              <td>{element.name}</td>
+              <td>{element.description}</td>
+              <td>{element.permissionCount}</td>
+              <Table.Td align="right">
+                <Menu shadow="md" width={200}>
+                  <Menu.Target>
+                    <ActionIcon><IconDotsVertical size={18} /></ActionIcon>
+                  </Menu.Target>
+
+                  <Menu.Dropdown>
+                    <Menu.Item leftSection={<IconLock size={14} />} onClick={() => {
+                      setCurrentDomainRole(element);
+                      setUpdateDomainRolePermissionsModal(true)
+                    }}>
+                      Permessi
+                    </Menu.Item>
+                    <Menu.Item onClick={() => {
+                      setCurrentDomainRole(element);
+                      setDomainRoleModalOpen(true);
+                    }} leftSection={<IconEdit size={14} />}>Modifica</Menu.Item>
+                    <Menu.Divider />
+                    <Menu.Item color={'red'} onClick={() => deleteDomainRole(element.id)} leftSection={<IconTrash color={'red'} size={14} />}>Elimina</Menu.Item>
+                  </Menu.Dropdown>
+                </Menu>
+              </Table.Td>
+            </Table.Tr>
+          )
+        }
+        </tbody>
+      </Table>
+
+      <Modal centered opened={domainRoleModalOpen} onClose={() => {
+        setDomainRoleModalOpen(false);
+        setCurrentDomainRole(undefined);
+      }} title={`${currentDomainRole ? 'Modifica ruolo' : 'Crea ruolo'}`}>
+        <DomainRoleForm onCreate={() => {
+          setDomainRoleModalOpen(false);
+          getAllDomainRoles();
+          setCurrentDomainRole(undefined);
+        }} domainRole={currentDomainRole}/>
+      </Modal>
+
+      {currentDomainRole &&
+        <Modal
+          size={'60%'}
+          centered
+          opened={updateDomainRolePermissionsModal}
+          onClose={() => {
+            setUpdateDomainRolePermissionsModal(false);
+            setCurrentDomainRole(undefined);
+            getAllDomainRoles();
+          }}
+          title={`Gestione permessi ${currentDomainRole.name}`}>
+          <PermissionNavigator
+            context={{type: 'domainRole', id: currentDomainRole.id!.toString()}}
+            onUpdate={() => {}}
+          />
+        </Modal>
+      }
+
+    </DataCard>
+  )
+}

package/src/lib/pages/settings/security/components/permission/create-custom-permission-form.tsx

@@ -0,0 +1,64 @@
+import {Alert, Button, Divider, Group, Stack, TextInput} from "@mantine/core";
+import {CreateCustomPermissionCommand, FluxoClientSys, PermissionScope} from "@fluxo-dev/api-client-base";
+import React, {useState} from "react";
+import {showNotification} from "@mantine/notifications";
+import {IconInfoCircle} from "@tabler/icons-react";
+
+export interface CreateCustomPermissionFormProps {
+  permissionScope: PermissionScope;
+  onCanceled: () => void;
+  onCreated: () => void;
+}
+export function CreateCustomPermissionForm(props: CreateCustomPermissionFormProps) {
+
+  const [identifier, setIdentifier] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+
+  const createCustomPermission = () => {
+    if(!identifier || !description) return;
+
+    const command: CreateCustomPermissionCommand = {
+      scope: props.permissionScope.scope,
+      packageName: props.permissionScope.packageName,
+      namespace: props.permissionScope.namespace,
+      identifier: identifier,
+      description: description
+    }
+    FluxoClientSys.Instance.security.permission.createCustomPermission(command)
+      .then(() => {
+        showNotification({
+          title: 'Permesso creato',
+          message: `Il permesso ${props.permissionScope.scope}.${props.permissionScope.packageName}.${props.permissionScope.namespace}.${identifier} è stato creato con successo.`,
+          color: 'green'
+        })
+        props.onCreated();
+      })
+      .catch(() => {
+        showNotification({
+          title: 'Errore',
+          message: `Si è verificato un errore durante la creazione del permesso ${props.permissionScope.scope}.${props.permissionScope.packageName}.${props.permissionScope.namespace}.${identifier}.`,
+          color: 'red'
+        })
+      });
+  }
+
+  return (
+    <Stack>
+      <Alert color={'yellow'} icon={<IconInfoCircle />}>
+        <b>Informazioni: </b> crea nuovi permessi personalizzati da utilizzare nei servizi dinamici, nei menu e nelle pagine DynamicUI.
+      </Alert>
+      <TextInput label={"Identificatore"} placeholder={'Es: create'} required onChange={(v) => setIdentifier(v.target.value)} />
+      <TextInput label={"Descrizione"} placeholder={'Es: Crea'} required onChange={(v) => setDescription(v.target.value)} />
+
+      <Divider />
+      <Group justify={'right'}>
+        <Button variant={'subtle'} onClick={props.onCanceled}>Annulla</Button>
+        <Button
+          disabled={!identifier || !description}
+          onClick={createCustomPermission}>
+          Salva
+        </Button>
+      </Group>
+    </Stack>
+  )
+}

package/src/lib/pages/settings/security/components/permission/create-scope-form.tsx

@@ -0,0 +1,158 @@
+import React, {useState} from "react";
+import {Button, Divider, Group, Select, Stack, TextInput} from "@mantine/core";
+import {CreatePermissionScopeCommand, FluxoClientSys, PermissionScope} from "@fluxo-dev/api-client-base";
+import {showNotification} from "@mantine/notifications";
+
+export interface CreateScopeFormProps {
+  permissionScopes: PermissionScope[],
+  onCreated: () => void;
+  onCanceled: () => void;
+}
+
+export function CreateScopeForm(props: CreateScopeFormProps) {
+
+  const [permissionScopes] = useState<PermissionScope[]>(props.permissionScopes);
+  const [createdScopes, setCreatedScopes] = useState<string[]>([]);
+  const [createdPackageNames, setCreatedPackageNames] = useState<string[]>([]);
+  const [createdNamespaces, setCreatedNamespaces] = useState<string[]>([]);
+
+  const [currentScope, setCurrentScope] = useState<string | null>(null);
+  const [currentPackageName, setCurrentPackageName] = useState<string | null>(null);
+  const [currentNamespace, setCurrentNamespace] = useState<string | undefined>(undefined);
+  const [namespaceDescription, setNamespaceDescription] = useState<string>('');
+  const [namespaceIdentifierError, setNamespaceIdentifierError] = useState<string | null>(null);
+  const createPermissionScope = () => {
+    if(!currentScope || !currentPackageName || !currentNamespace) {
+      return;
+    }
+
+    const command: CreatePermissionScopeCommand = {
+      scope: currentScope,
+      packageName: currentPackageName,
+      namespace: currentNamespace,
+      namespaceDescription: namespaceDescription
+    }
+
+    FluxoClientSys.Instance.security.permission.createPermissionScope(command)
+      .then((res) => {
+        showNotification({
+          title: 'Scope creato',
+          message: `Lo scope ${currentScope}.${currentPackageName}.${currentNamespace} è stato creato con successo.`,
+          color: 'green'
+        });
+        props.onCreated();
+      })
+      .catch(() => {
+        showNotification({
+          title: 'Errore',
+          message: `Si è verificato un errore durante la creazione dello scope ${currentScope}.${currentPackageName}.${currentNamespace}.`,
+          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))];
+  }
+
+  const getNamespaces = (scope: string | null, packageName: string | null) => {
+    if(permissionScopes === undefined || !scope || !packageName) return [];
+    return [...new Set(permissionScopes.filter(a => a.scope === scope && a.packageName === packageName).map(a => a.namespace))];
+  }
+
+  return (
+    <Stack>
+      {/*<Select
+        label="Scope"
+        description={'Seleziona uno scope esistente oppure crea un nuovo scope.'}
+        data={[...getScopes(), ...createdScopes]}
+        nothingFoundMessage="Nessuno scope trovato"
+        searchable
+        onChange={(v) => setCurrentScope(v)}
+        creatable
+        getCreateLabel={(query) => `+ Crea ${query}`}
+        onCreate={(query) => {
+          setCreatedScopes([query]);
+          return query;
+        }}
+      />
+
+      <Select
+        label="Package Name"
+        description={'Seleziona un package name esistente oppure crea un nuovo package name.'}
+        data={[...getPackageNames(currentScope), ...createdPackageNames]}
+        disabled={!currentScope}
+        nothingFoundMessage="Nessuno package name trovato"
+        searchable
+        creatable
+        onChange={(v) => setCurrentPackageName(v)}
+        getCreateLabel={(query) => `+ Crea ${query}`}
+        onCreate={(query) => {
+          setCreatedPackageNames([query]);
+          return query;
+        }}
+      />*/}
+
+      <Select
+        label="Scope"
+        description={'Seleziona uno scope esistente oppure crea un nuovo scope.'}
+        data={[...getScopes(), ...createdScopes]}
+        nothingFoundMessage="Nessuno scope trovato"
+        searchable
+        onChange={(v) => setCurrentScope(v)}
+      />
+
+      <Select
+        label="Package Name"
+        description={'Seleziona un package name esistente oppure crea un nuovo package name.'}
+        data={[...getPackageNames(currentScope), ...createdPackageNames]}
+        disabled={!currentScope}
+        nothingFoundMessage="Nessuno package name trovato"
+        searchable
+      />
+
+      <TextInput
+        disabled={!currentPackageName}
+        description={'Identificatore del nuovo namespace. Non è possibile selezionare un namespace già esistente.'}
+        label={'Identificatore del namespace'}
+        value={currentNamespace}
+        error={namespaceIdentifierError}
+        onChange={(e) => {
+          if(getNamespaces(currentScope, currentPackageName).includes(e.currentTarget.value)) {
+            setNamespaceIdentifierError(`Il namespace inserito è già presente nel percorso ${currentScope}.${currentPackageName}.`);
+          } else {
+            setNamespaceIdentifierError(null);
+          }
+
+          setCurrentNamespace(e.currentTarget.value)
+        }}
+      />
+
+      <TextInput
+        disabled={!currentNamespace}
+        label={'Descrizione del namespace'}
+        placeholder={'Descrizione del namespace'}
+        value={namespaceDescription}
+        onChange={(e) => {
+          setNamespaceDescription(e.currentTarget.value)
+        }}
+      />
+
+      <Divider />
+      <Group justify={'right'}>
+        <Button variant={'subtle'} onClick={props.onCanceled}>Annulla</Button>
+        <Button
+          disabled={!currentScope || !currentPackageName || !currentNamespace || !namespaceDescription || namespaceIdentifierError !== null}
+          onClick={createPermissionScope}>
+          Salva
+        </Button>
+      </Group>
+    </Stack>
+  )
+}