@fluxo-dev/shell 0.0.8 → 0.0.12

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

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

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

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

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

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

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

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