@fluxo-dev/shell 0.0.8

package/src/lib/pages/settings/menu-designer/menu-create-form.tsx

@@ -0,0 +1,109 @@
+import {Button, Group, Select, Stack, TextInput} from "@mantine/core";
+import {useCallback, useEffect, useState} from "react";
+import {AppMenuContextType, DomainRole, FluxoClientSys, User} from "@fluxo-dev/api-client-base";
+import {showNotification} from "@mantine/notifications";
+
+export interface MenuCreateFormProps {
+  onCreated: () => void;
+  onCancel: () => void;
+}
+export function MenuCreateForm(props: MenuCreateFormProps) {
+
+  const [context, setContext] = useState<string | null>('1');
+  const [user, setUser] = useState<string | null>();
+  const [role, setRole] = useState<string | null>();
+  const [name, setName] = useState<string>();
+
+  const [roles, setRoles] = useState<DomainRole[]>([]);
+  const [users, setUsers] = useState<User[]>([]);
+
+  useEffect(() => {
+    FluxoClientSys.Instance.security.domainRole.find(999,0).then((roles) => {
+      setRoles(roles.results);
+    })
+
+    FluxoClientSys.Instance.security.user.getAllUsers().then((users) => {
+      setUsers(users);
+    })
+  }, []);
+
+  const saveButtonIsDisabled = useCallback(() => {
+    if(context === '1' && !role) return true;
+    if(context === '2' && !user) return true;
+    if(!name) return true;
+
+    return false;
+  }, [context, role, user, name]);
+
+  const onSubmit = () => {
+    if(saveButtonIsDisabled()) return;
+
+    FluxoClientSys.Instance.configuration.createAppMenu({
+      contextType: context === '1' ? AppMenuContextType.DomainRole : AppMenuContextType.User,
+      name: name!,
+      domainRoleId: context === '1' ? +role! : 0,
+      copyItemsFromWebMenuId: 0,
+      userId: context === '2' ? user! : undefined,
+    }).then(() => {
+      props.onCreated();
+      showNotification({
+        title: 'Menu creato',
+        message: 'Il menu è stato creato con successo',
+        color: 'green',
+        autoClose: 5000,
+      })
+    })
+      .catch((err) => {
+        showNotification({
+          title: 'Errore',
+          message: 'Si è verificato un errore durante la creazione del menu',
+          color: 'red',
+          autoClose: 5000,
+        })
+      })
+  }
+
+  return (
+    <Stack>
+      <TextInput
+        label={'Descrizione'}
+        value={name}
+        onChange={(e) => setName(e.currentTarget.value)}
+        placeholder={'Ruolo amministrazione'} />
+      <Select
+        allowDeselect={false}
+        label={'Contesto'}
+        value={context}
+        description={'Seleziona il contesto in cui il menu sarà visibile (Ruolo o Utente)'}
+        onChange={(value) => setContext(value)}
+        data={[{label: 'Ruolo', value: '1'}, {label: 'Utente', value: '2'}]}
+      />
+
+      {context === '1' &&
+        <Select
+          label={'Ruolo'}
+          value={role}
+          onChange={(value) => setRole(value)}
+          description={'Seleziona il ruolo a cui il menu sarà visibile'}
+          data={roles.map((role) => ({label: `${role.name} (${role.identifier})`, value: role.id!.toString()}))}
+        />
+      }
+
+      {context === '2' &&
+        <Select
+          label={'Utente'}
+          value={user}
+          onChange={(value) => setUser(value)}
+          description={'Seleziona l\'utente a cui il menu sarà visibile'}
+          data={users.map((user) => ({label: `${user.userData.FirstName} ${user.userData.LastName} (${user.email})`, value: user.id!.toString()}))}
+        />
+      }
+
+      <Group justify={'end'}>
+        <Button onClick={props.onCancel} variant={'outline'}>Annulla</Button>
+        <Button disabled={saveButtonIsDisabled()} onClick={onSubmit}>Salva</Button>
+      </Group>
+
+    </Stack>
+  )
+}

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

@@ -0,0 +1,19 @@
+.app {
+  height: 100%;
+}
+
+.treeRoot {
+  height: 100%;
+}
+
+.draggingSource {
+  opacity: 0.3;
+}
+
+.placeholderContainer {
+  position: relative;
+}
+
+.dropTarget {
+  background-color: #e8f0fe;
+}

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

@@ -0,0 +1,463 @@
+import React, {useEffect, useState} from "react";
+import {getBackendOptions, MultiBackend, NodeModel, Tree,} from "@minoru/react-dnd-treeview";
+import {DndProvider} from "react-dnd";
+import {DataCard} from "@fluxo-dev/ui-components";
+import {CustomNode} from "./custom-node";
+import {Placeholder} from "./placeholder";
+import styles from './menu-designer.module.css';
+import {
+  IconApps,
+  IconArrowDown,
+  IconBoxModel,
+  IconDeviceFloppy,
+  IconFolderPlus,
+  IconPlus,
+  IconX
+} from '@tabler/icons-react';
+import {IFluxoRootState, useAppSelector} from "@fluxo-dev/state";
+import {AppMenu, AppMenuContextType, AppMenuItem, Feature, FeatureList, FluxoClientSys} from "@fluxo-dev/api-client-base";
+import {
+  Button,
+  Center,
+  Chip,
+  Divider,
+  Grid,
+  Group,
+  Loader,
+  LoadingOverlay,
+  Modal,
+  rem,
+  Select,
+  Stack
+} from "@mantine/core";
+import {MenuItemEdit} from "./menu-item-edit";
+import {showNotification} from "@mantine/notifications";
+import {useNavigate} from "react-router-dom";
+import {MenuCreateForm} from "./menu-create-form";
+
+export function MenuDesigner() {
+
+  const [sysFeatures, setSysFeatures] = useState<FeatureList>();
+  const [currentSelectedFeatures, setCurrentSelectedFeatures] = useState<Feature[]>();
+  const [currentSelectedFeatureId, setCurrentSelectedFeatureId] = useState<string | undefined | null>();
+  const [featureSearchValue, setFeatureSearchValue] = useState<string | undefined>();
+  const [treeData, setTreeData] = useState<NodeModel<AppMenuItem>[]>([]);
+  const [editMenuItemModalOpened, setEditMenuItemModalOpened] = useState<boolean>(false);
+  const [editMenuItem, setEditMenuItem] = useState<AppMenuItem>();
+  const [editNodeId, setEditNodeId] = useState<string | number>();
+  const [loadData, setLoadData] = useState<boolean>(false);
+  const [webMenu, setWebMenu] = useState<AppMenu[]>([]);
+  const [currentWebMenu, setCurrentWebMenu] = useState<AppMenu | undefined>(undefined);
+  const [currentWebMenuLoaded, setCurrentWebMenuLoaded] = useState<boolean>(false);
+  const [showMenuCreateForm, setShowMenuCreateForm] = useState<boolean>(false);
+
+  const [currentAppMenuItemsAreChanged, setCurrentAppMenuItemsAreChanged] = useState<boolean>(false);
+
+  const handleDrop = (newTree: NodeModel<AppMenuItem>[]) => setTreeData(newTree);
+
+  const {appMenu} = useAppSelector((state: IFluxoRootState) => state.layout);
+  const navigation = useNavigate();
+
+  useEffect(() => {
+    //const result = generateMenuObjectFromMenu((appMenu as AppMenuItem[]));
+    //setTreeData(result);
+  }, [appMenu])
+
+  useEffect(() => {
+    loadAppMenuList();
+  }, []);
+
+  const loadAppMenuList = () => {
+    FluxoClientSys.Instance.configuration.getAppMenuList()
+      .then((r) => {
+        setWebMenu(r);
+        setCurrentWebMenu(r[0]);
+        setCurrentWebMenuLoaded(true);
+      })
+  }
+
+  useEffect(() => {
+
+    if(currentWebMenu) {
+      onWebMenuChanged(currentWebMenu.id);
+    }
+
+  }, [currentWebMenu]);
+
+  useEffect(() => {
+
+    if(treeData) {
+      const r = generateMenuFromDesigner(treeData);
+    }
+
+  }, [treeData])
+
+  useEffect(() => {
+    FluxoClientSys.Instance.configuration.getSystemFeatures()
+      .then((res) => {
+        setSysFeatures(res);
+      })
+  }, [])
+
+  const generateMenuFromDesigner = (nodes: NodeModel<AppMenuItem>[], parent: string | number | undefined = 'root'): AppMenuItem[] => {
+
+    const res: AppMenuItem[] = [];
+
+    nodes.filter(a => a.parent === parent).map((item) => {
+
+      item.data!.children = generateMenuFromDesigner(nodes.filter(a => a.id !== item.id), item.id);
+      res.push(item.data!);
+
+    });
+
+    return res;
+  }
+
+  const generateMenuObjectFromMenu = (menu: AppMenuItem[], parent: string | number | undefined = 'root'): NodeModel<AppMenuItem>[] => {
+
+    const res: NodeModel<AppMenuItem>[] = [];
+
+    menu.map((menuItem: AppMenuItem) => {
+
+      const omit = (prop: string, { [prop]: _, ...rest }) => rest as AppMenuItem;
+
+      const tmpId = getRandomIntInclusive(1000000,9999999);
+      const obj: NodeModel<AppMenuItem> = {
+        droppable: true,
+        data: omit('children', menuItem),
+        text: menuItem.label,
+        id: tmpId,
+        parent: parent,
+      };
+
+      res.push(obj)
+
+      if(menuItem.children && menuItem.children.length > 0)
+        res.push(...generateMenuObjectFromMenu(menuItem.children, tmpId))
+
+    });
+
+    return res;
+  }
+
+  function getRandomIntInclusive(min: number, max: number) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1) + min); // The maximum is inclusive and the minimum is inclusive
+  }
+
+  const addGroupToMenuHandler = () => {
+
+    const tmpId = getRandomIntInclusive(1000000,9999999);
+
+    const tData = [...treeData]
+    tData?.push({
+      id: tmpId,
+      droppable: true,
+      data: {icon: 'dashboard', featureIdentifier: '', children: [], label: 'Nuovo gruppo', routerLink: undefined, isGroup: true},
+      parent: 'root',
+      text: 'Nuovo gruppo',
+    })
+    setTreeData(tData);
+    setCurrentAppMenuItemsAreChanged(true);
+  }
+
+  const addFeatureToMenuHandler = () => {
+    const currentFeature = sysFeatures?.features.filter(a => a.identifier === currentSelectedFeatureId)[0];
+
+    if(!currentFeature)
+      return;
+
+    const tmpId = getRandomIntInclusive(1000000,9999999);
+
+    const menuItemLabel = currentFeature.identifier === 'webclient.routing.menugroup' ? 'Nuovo gruppo' : currentFeature.description;
+
+    if(currentFeature) {
+      const tData = [...treeData]
+      tData?.push({
+        id: tmpId,
+        droppable: true,
+        data: {
+          icon: 'dashboard',
+          featureIdentifier: currentFeature.identifier,
+          children: [],
+          label: menuItemLabel,
+          routerLink: currentFeature.routerLink,
+          isGroup: false,
+          menuItemId: currentFeature.menuItemId,
+        },
+        parent: 'root',
+        text: menuItemLabel,
+      })
+      setTreeData(tData);
+      setCurrentAppMenuItemsAreChanged(true);
+    }
+  }
+
+  const saveButtonHandler = () => {
+
+    if(currentWebMenu === undefined)
+      return;
+
+    setLoadData(true);
+    const result = generateAppMenuItem(treeData);
+
+    FluxoClientSys.Instance.configuration.saveAppMenu(currentWebMenu.id, result)
+      .then((res) => {
+
+        showNotification({
+          title: 'Salvataggio completato',
+          message: `Il menu è stato salvato con successo`,
+          color: 'green',
+        })
+
+        navigation(0);
+
+      }).catch((err) => {
+
+        showNotification({
+          title: 'Errore',
+          message: `Errore durante il salvataggio del menu. ${err.message}`,
+          color: 'red',
+        })
+
+      })
+      .finally(() => {
+        setLoadData(false);
+      })
+  }
+
+  const generateAppMenuItem = (menuItems: NodeModel<AppMenuItem>[], parent: string | number = 'root') => {
+
+    const appMenuItems: AppMenuItem[] = []
+
+    menuItems.filter(a => a.parent === parent).forEach((node) => {
+
+      const currentMenuItem = node.data!
+
+      currentMenuItem.children = generateAppMenuItem(menuItems, node.id);
+
+      appMenuItems.push(currentMenuItem);
+    })
+
+    return appMenuItems;
+
+  }
+
+  const updateAppMenuItem = (nodeId: string | number, menuItem: AppMenuItem) => {
+    const tData = [...treeData];
+
+    tData.forEach((n) => {
+      if(n.id === nodeId) {
+        n.text = menuItem.label;
+        n.data = menuItem;
+      }
+    })
+
+    setTreeData(tData);
+    setEditMenuItemModalOpened(false);
+  }
+
+  const deleteAppMenuItem = (nodeId: string | number) => {
+    const tData = deleteDescendants([...treeData], nodeId);
+    setTreeData(tData);
+  }
+
+  function deleteDescendants(nodes: NodeModel<AppMenuItem>[], nodeId: number | string): NodeModel<AppMenuItem>[] {
+    const descendants = nodes.filter((node) => node.parent === nodeId);
+    descendants.forEach((descendant) => {
+      nodes = deleteDescendants(nodes, descendant.id);
+    });
+    return nodes.filter((node) => node.id !== nodeId);
+  }
+
+  const onWebMenuChanged = (webMenuId: number) => {
+    setCurrentWebMenuLoaded(false);
+
+    FluxoClientSys.Instance.configuration.getAppMenu(webMenuId)
+      .then((res) => {
+        const result = generateMenuObjectFromMenu((res as AppMenuItem[]));
+        setTreeData(result);
+        setCurrentWebMenuLoaded(true);
+        setCurrentAppMenuItemsAreChanged(false);
+      })
+
+  }
+
+  return (
+    <Stack gap={8}>
+
+      <DataCard title={'Gestione Menu'}>
+        <Stack>
+          <Grid gutter={16} align={'flex-start'}>
+            <Grid.Col span={10.5}>
+              <Select
+                allowDeselect={false}
+                value={currentWebMenu?.id.toString()} data={webMenu?.map(a => {return {label: a.name, value: a.id.toString()}})}
+                onChange={(v) => {
+                  const tmp = webMenu?.filter(a => a.id.toString() === v)[0];
+                  setCurrentWebMenu(tmp);
+                }}
+              />
+            </Grid.Col>
+            <Grid.Col span={1.5}>
+              <Button fullWidth leftSection={<IconPlus size={18} />} onClick={() => setShowMenuCreateForm(true)}>Crea menu</Button>
+            </Grid.Col>
+          </Grid>
+        </Stack>
+      </DataCard>
+
+      {!currentWebMenuLoaded &&
+        <Center>
+          <Loader size={32} />
+        </Center>
+      }
+
+      {currentWebMenu && currentWebMenuLoaded &&
+        <>
+          <Center>
+            <IconArrowDown size={48} color={'gray'} />
+          </Center>
+          <DataCard title={`Menu designer - ${currentWebMenu.name}`}
+            elements={[
+              <Chip
+                icon={<IconDeviceFloppy style={{ width: rem(14), height: rem(14) }} />}
+                color={currentAppMenuItemsAreChanged ? 'yellow' : 'green'}
+                variant="filled"
+                size={'xs'}
+                checked={true}
+              >
+                {currentAppMenuItemsAreChanged ? 'Modifiche non salvate' : 'Salvato'}
+              </Chip>
+            ]}
+          >
+
+            <Stack>
+              <Grid gutter={16} align={'flex-start'}>
+                <LoadingOverlay visible={loadData} />
+
+                <Grid.Col span={{lg: 3}}>
+                  {sysFeatures &&
+                    <Select
+                      placeholder="Seleziona un modulo"
+                      onChange={(module) => {
+                        setCurrentSelectedFeatures(sysFeatures?.features.filter(a => a.moduleKey === module));
+                        setCurrentSelectedFeatureId(null);
+                        setFeatureSearchValue(undefined);
+                      }}
+                      leftSection={<IconBoxModel />}
+                      data={sysFeatures?.modules.map((e) => {
+                        return {
+                          value: `${e.key}.${e.name}`,
+                          label: `${e.description} (${e.name})`,
+                        }
+                      })}
+                    />
+                  }
+                </Grid.Col>
+                <Grid.Col span={{lg: 9}}>
+                  <Group align={'end'}>
+                    <div style={{width: 'calc(100% - 336px)'}}>
+                      <Select
+                        disabled={!currentSelectedFeatures}
+                        placeholder="Seleziona una feature"
+                        searchable
+                        leftSection={<IconApps />}
+                        value={currentSelectedFeatureId}
+                        onChange={(v) => {
+                          setCurrentSelectedFeatureId(v)
+                        }}
+                        onSearchChange={(v) => setFeatureSearchValue(v)}
+                        searchValue={featureSearchValue}
+                        clearable
+                        data={currentSelectedFeatures === undefined ? [] : currentSelectedFeatures?.map((e) => {
+                          return {
+                            value: e.identifier,
+                            label: e.name,
+                          }
+                        })}
+                      />
+                    </div>
+                    <div style={{width: 150}}>
+                      <Button onClick={() => addFeatureToMenuHandler()} disabled={!currentSelectedFeatureId} fullWidth leftSection={<IconPlus size={18} />}>Voce</Button>
+                    </div>
+                    <div style={{width: 150}}>
+                      <Button onClick={() => addGroupToMenuHandler()} fullWidth leftSection={<IconFolderPlus size={18} />}>Gruppo</Button>
+                    </div>
+                  </Group>
+                </Grid.Col>
+              </Grid>
+              <DndProvider backend={MultiBackend} options={getBackendOptions()}>
+                <Tree
+                  listComponent={'div'}
+                  listItemComponent={'div'}
+                  placeholderComponent={'div'}
+                  tree={treeData ?? []}
+                  rootId={'root'}
+                  sort={false}
+                  onDrop={handleDrop}
+                  dropTargetOffset={10}
+                  canDrop={(tree, { dragSource, dropTargetId, dropTarget }) => {
+                    return dropTarget?.data?.isGroup || dropTarget === undefined;
+                  }}
+                  classes={{
+                    root: styles["treeRoot"],
+                    draggingSource: styles["draggingSource"],
+                    placeholder: styles["placeholderContainer"]
+                  }}
+                  placeholderRender={(node, { depth }) => (
+                    <Placeholder node={node} depth={depth} />
+                  )}
+                  render={(node, { depth, isOpen, onToggle }) => (
+                    <CustomNode
+                      nodes={treeData ?? []}
+                      node={node}
+                      depth={depth}
+                      isOpen={isOpen}
+                      onToggle={onToggle}
+                      onDeleteButtonClick={(nodeId) => deleteAppMenuItem(nodeId)}
+                      onEditButtonClick={(i) => {
+                        setEditMenuItem(i);
+                        setEditNodeId(node.id);
+                        setEditMenuItemModalOpened(true);
+                      }}
+                    />
+                  )}
+                />
+              </DndProvider>
+              {(editMenuItem && editNodeId) &&
+                <Modal title={'Modifica voce di menu'} closeOnEscape={false} closeOnClickOutside={false} centered opened={editMenuItemModalOpened} onClose={() => setEditMenuItemModalOpened(false)}>
+                  <MenuItemEdit
+                    nodeId={editNodeId}
+                    menuItem={editMenuItem}
+                    onCancelClick={() => {setEditMenuItemModalOpened(false); setEditMenuItem(undefined)}}
+                    onSaveClick={(nodeId, i) => updateAppMenuItem(nodeId, i)}
+                  />
+                </Modal>
+              }
+
+              <Divider />
+
+              <Group justify={'end'}>
+                <Button color={'red'} disabled={currentWebMenu.contextType == AppMenuContextType.Default} onClick={() => navigation(0)} variant={'outline'}>Elimina</Button>
+                <Button onClick={() => saveButtonHandler()}>Salva</Button>
+              </Group>
+
+            </Stack>
+          </DataCard>
+        </>
+      }
+
+      <Modal centered title={'Aggiungi menu'} opened={showMenuCreateForm} onClose={() => setShowMenuCreateForm(false)} size={'md'} padding={'md'}>
+        <MenuCreateForm
+          onCancel={() => setShowMenuCreateForm(false)}
+          onCreated={() => {
+            setShowMenuCreateForm(false)
+            loadAppMenuList();
+          }}
+        />
+      </Modal>
+
+    </Stack>
+  );
+}

package/src/lib/pages/settings/menu-designer/menu-item-edit.tsx

@@ -0,0 +1,115 @@
+import {forwardRef, useEffect, useState} from "react";
+import {Button, Divider, Group, Select, Stack, Switch, TextInput, Text} from "@mantine/core";
+import {AppMenuItem} from "@fluxo-dev/api-client-base";
+import {IconFactory} from "../../../utils/icon-factory";
+
+export interface MenuItemEditProps {
+
+  nodeId: string | number,
+  menuItem: AppMenuItem,
+  onCancelClick: () => void,
+  onSaveClick: (nodeId: string | number, item: AppMenuItem) => void;
+}
+export function MenuItemEdit(props: MenuItemEditProps) {
+
+  const [label, setLabel] = useState(props.menuItem.label);
+  const [hasIndex, setHasIndex] = useState<boolean>(props.menuItem.hasIndex ?? false);
+  const [icon, setIcon] = useState<string | undefined>(props.menuItem.icon ?? undefined);
+  const [identifier] = useState(props.menuItem.featureIdentifier);
+  const [routerLink, setRouterLink] = useState<string | undefined>(props.menuItem.routerLink);
+  const [routerLinkTextValue, setRouterLinkTextValue] = useState<string>(props.menuItem.routerLink ? props.menuItem.routerLink : '');
+  const [routerLinkError, setRouterLinkError] = useState<string | null>();
+
+  const [isValid, setIsValid] = useState<boolean>(true);
+
+  const [item, setItem] = useState<AppMenuItem>(props.menuItem);
+
+  useEffect(() => {
+    setItem({
+      icon: icon,
+      featureIdentifier: identifier,
+      hasIndex: hasIndex,
+      label: label,
+      children: props.menuItem.children,
+      routerLink: routerLink,
+      isGroup: props.menuItem.isGroup,
+      menuItemId: props.menuItem.menuItemId
+    });
+
+    if(!props.menuItem.isGroup) {
+      if (label && routerLink && icon)
+        setIsValid(true)
+      else
+        setIsValid(false);
+    } else {
+      if (label && icon)
+        setIsValid(true)
+      else
+        setIsValid(false);
+    }
+
+  }, [label, hasIndex, icon, routerLink])
+
+  const handleRouterLinkChanged = (v: string) => {
+
+    setRouterLinkTextValue(v);
+
+    const isExternalLink = props.menuItem.featureIdentifier === 'webclient.routing.externallink';
+    let regex = /^[\w-]+(?:\/[\w-]+)*$/;
+
+    if(isExternalLink)
+      regex = /^(https?:\/\/)?([\w]+\.)+[\w]{2,63}\.[a-zA-Z]{2,6}[\/\?\#]?.*$/;
+
+    if (regex.test(v)) {
+      setRouterLink(v);
+      setRouterLinkError(null)
+    } else {
+      setRouterLink(undefined);
+      setRouterLinkError(isExternalLink ? 'Link non valido' : 'Link non valido, es: registries/product/create')
+    }
+  }
+
+  const SelectItem = forwardRef<HTMLDivElement, any>(
+    ({ label, value, ...others }: any, ref) => (
+      <div ref={ref} {...others}>
+        <Group wrap="nowrap">
+          {IconFactory.getIcon(value ?? '')}
+
+          <div>
+            <Text size="sm">{label}</Text>
+          </div>
+        </Group>
+      </div>
+    )
+  );
+
+  return (
+    <Stack>
+      <TextInput label={'Etichetta'} value={label} onChange={(v) => setLabel(v.currentTarget.value)} />
+
+      {!props.menuItem.isGroup &&
+        <Switch label={'Indicizzato'} checked={hasIndex} offLabel={'NO'} onLabel={'SI'} onChange={(e) => setHasIndex(e.currentTarget.checked)} />
+      }
+
+      <Select
+        leftSection={IconFactory.getIcon(icon ?? '')}
+        data={IconFactory.getIconIdentifiers().map((e) => {return {
+          label: e,
+          value: e,
+        }})}
+        searchable
+        label={'Icona'} value={icon} onChange={(v) => setIcon(v!)}
+      />
+
+      {!props.menuItem.isGroup &&
+        <TextInput label={'Route'} disabled={true} value={routerLinkTextValue} error={routerLinkError} onChange={(v) => handleRouterLinkChanged(v.currentTarget.value)} />
+      }
+
+      <Divider />
+      <Group align={'end'} justify={'right'}>
+        <Button variant={'subtle'} onClick={() => props.onCancelClick()}>Annulla</Button>
+        <Button disabled={!isValid} onClick={() => props.onSaveClick(props.nodeId, item)}>Salva</Button>
+      </Group>
+    </Stack>
+  )
+}