@fluxo-dev/shell 0.0.8 → 0.0.12

package/src/lib/pages/settings/apps/embedded-module-item.tsx

@@ -1,66 +0,0 @@
-import {
-  EmbeddedModule, FluxoClientSys
-} from "@fluxo-dev/api-client-base";
-import {Badge, Button, Group, Stack} from "@mantine/core";
-import React from "react";
-import {IconRefresh} from '@tabler/icons-react';
-import {showNotification} from "@mantine/notifications";
-
-export interface EmbeddedModuleItemProps {
-  app: EmbeddedModule;
-  onUpgrade?: (app: EmbeddedModule) => void;
-  upgradable: {state: 'uptodate' | 'upgradable' | 'installable', version: string};
-}
-export function EmbeddedModuleItem(props: EmbeddedModuleItemProps) {
-
-  const [updateInProgress, setUpdateInProgress] = React.useState(false);
-
-  const installOrUpgrade = () => {
-
-    setUpdateInProgress(true);
-
-    FluxoClientSys.Instance.apps.installEmbeddedModule(props.app.getEmbeddedModule())
-      .then(() => {
-        showNotification({
-          title: 'Operazione completata',
-          message: `Il modulo (${props.app.name} - ${props.app.version}) è stata installata con successo`,
-          color: 'green',
-        })
-        props.onUpgrade?.(props.app);
-        setUpdateInProgress(false);
-      })
-      .catch(() => {
-        showNotification({
-          title: 'Operazione fallita',
-          message: `Il modulo (${props.app.name} - ${props.app.version}) non è stata installata`,
-          color: 'red',
-        })
-        setUpdateInProgress(false);
-      })
-  }
-
-  return (
-    <Group justify='space-between' style={{ border: '1px solid #dedede', padding: 15 }}>
-      <Group>
-        <Stack gap={0}>
-          <span>{props.app.description} <small>({props.app.version})</small></span>
-          <small>{props.app.name} - <b>{props.app.author}</b></small>
-        </Stack>
-      </Group>
-      <Group>
-        {props.upgradable?.state === 'upgradable' &&
-          <Button loading={updateInProgress} leftSection={<IconRefresh size={18} />} onClick={installOrUpgrade} color="yellow">Aggiorna → {props.upgradable.version}</Button>
-        }
-        {props.upgradable?.state === 'uptodate' &&
-          <>
-            <Badge color="gray">Ultima versione</Badge>
-            <Button onClick={installOrUpgrade}>Aggiorna menu</Button>
-          </>
-        }
-        {props.upgradable?.state === 'installable' &&
-          <Button loading={updateInProgress} leftSection={<IconRefresh size={18} />} onClick={installOrUpgrade} color="green">Installa → {props.upgradable.version}</Button>
-        }
-      </Group>
-    </Group>
-  )
-}

package/src/lib/pages/settings/apps/install-or-upgrade-app.tsx

@@ -1,105 +0,0 @@
-import {Group, Text, useMantineTheme, rem, useMantineColorScheme} from '@mantine/core';
-import React from "react";
-import {IconApps, IconUpload, IconX} from '@tabler/icons-react';
-import {Dropzone, FileWithPath} from "@mantine/dropzone";
-import {FluxoClientSys} from "@fluxo-dev/api-client-base";
-import {showNotification} from "@mantine/notifications";
-
-export interface InstallOrUpgradeAppProps {
-  onInstall?: () => void;
-  mode: 'install' | 'upgrade';
-  appIdToUpgrade?: number;
-}
-
-export function InstallOrUpgradeApp(props: InstallOrUpgradeAppProps) {
-  const theme = useMantineTheme();
-  const colorScheme = useMantineColorScheme();
-
-  const installApp = (files: FileWithPath[]) => {
-
-    const formData = new FormData();
-    formData.append('file', files[0]);
-
-    if(props.mode === 'install') {
-      FluxoClientSys.Instance.apps.installApp(formData).then(() => {
-        showNotification({
-          title: 'Operazione completata',
-          message: `L'applicazione è stata installata con successo`,
-          color: 'green',
-        })
-        props.onInstall?.();
-      }).catch((err) => {
-        showNotification({
-          title: 'Operazione fallita',
-          message: `L'applicazione non è stata installata: ${err.message}`,
-          color: 'red',
-        })
-      })
-    } else {
-
-      if(!props.appIdToUpgrade)
-        return;
-
-      FluxoClientSys.Instance.apps.upgradeApp(props.appIdToUpgrade, formData).then(() => {
-        showNotification({
-          title: 'Operazione completata',
-          message: `L'applicazione è stata aggiornata con successo`,
-          color: 'green',
-        })
-        props.onInstall?.();
-      }).catch((err) => {
-        showNotification({
-          title: 'Operazione fallita',
-          message: `L'applicazione non è stata aggiornata: ${err.message}`,
-          color: 'red',
-        })
-      })
-    }
-  }
-
-  return (
-    <Dropzone
-      onDrop={installApp}
-      onReject={(files) => {
-        showNotification({
-          title: 'Operazione fallita',
-          message: `L'applicazione non è stata installata: ${files[0].file.name} non è un file zip o la dimensione supera i 30mb`,
-          color: 'red',
-        })
-      }}
-      maxSize={1024 * 3 * 10000}
-      multiple={false}
-      accept={['zip']}
-      {...props}
-    >
-      <Group justify="center" gap="xl" style={{ minHeight: rem(220), pointerEvents: 'none' }}>
-        <Dropzone.Accept>
-          <IconUpload
-            size="3.2rem"
-            stroke={1.5}
-            color={theme.colors[theme.primaryColor][colorScheme.colorScheme === 'dark' ? 4 : 6]}
-          />
-        </Dropzone.Accept>
-        <Dropzone.Reject>
-          <IconX
-            size="3.2rem"
-            stroke={1.5}
-            color={theme.colors.red[colorScheme.colorScheme === 'dark' ? 4 : 6]}
-          />
-        </Dropzone.Reject>
-        <Dropzone.Idle>
-          <IconApps size="3.2rem" stroke={1.5} />
-        </Dropzone.Idle>
-
-        <div>
-          <Text size="xl" inline>
-            Trascina il bundle dell'applicazione qui.
-          </Text>
-          <Text size="sm" color="dimmed" inline mt={7}>
-            Il bundle deve essere in formato .zip e non deve superare i 30mb.
-          </Text>
-        </div>
-      </Group>
-    </Dropzone>
-  );
-}

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

@@ -1,34 +0,0 @@
-.root {
-  align-items: center;
-  display: grid;
-  grid-template-columns: auto auto 1fr auto;
-  height: 32px;
-  padding-inline-end: 8px;
-  cursor: pointer;
-  /*border-bottom: solid 1px #eee;*/
-}
-
-.root:hover {
-  background: #e9ecef54;
-}
-
-.expandIconWrapper {
-  align-items: center;
-  font-size: 0;
-  cursor: pointer;
-  display: flex;
-  height: 24px;
-  justify-content: center;
-  width: 32px;
-  transition: transform linear 0.1s;
-  transform: rotate(0deg);
-  margin-left: 8px;
-}
-
-.expandIconWrapper.isOpen {
-  transform: rotate(90deg);
-}
-
-.labelGridItem {
-  padding-inline-start: 8px;
-}

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

@@ -1,160 +0,0 @@
-import React, {useState} from "react";
-import { NodeModel } from "@minoru/react-dnd-treeview";
-import styles from "./custom-node.module.css";
-import {
-  IconBoxMultiple,
-  IconChevronRight, IconEdit,
-  IconExternalLink, IconEye,
-  IconLock, IconPlus, IconSearch,
-  IconTrash
-} from '@tabler/icons-react';
-import {ActionIcon, Badge, Group, Modal, Text, ThemeIcon, Tooltip} from "@mantine/core";
-import {AppMenuItem} from "@fluxo-dev/api-client-base";
-import {IconFactory} from "../../../utils/icon-factory";
-import {PermissionNavigator} from "../security/components/permission/permission-navigator";
-
-type Props = {
-  nodes: NodeModel<AppMenuItem>[];
-  node: NodeModel<AppMenuItem>;
-  depth: number;
-  isOpen: boolean;
-  onToggle: (id: NodeModel["id"]) => void;
-  onEditButtonClick: (item: AppMenuItem) => void;
-  onDeleteButtonClick: (nodeId: string | number) => void;
-};
-
-export const CustomNode: React.FC<Props> = (props) => {
-  const { droppable, data } = props.node;
-  const indent = props.depth * 24;
-
-  const [mouseHover, setMouseHover] = useState<boolean>(false);
-  const [updatePermissionModalOpen, setUpdatePermissionModalOpen] = useState<boolean>(false);
-  const [hasPermission, setHasPermission] = useState<boolean>(props.node!.data!.hasPermissions ?? false);
-
-  const handleToggle = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    props.onToggle(props.node.id);
-  };
-
-  const isLeaf = (): boolean => {
-    const res = props.nodes.find(a => a.parent === props.node.id);
-
-    return res !== undefined;
-  }
-
-  const updatePermissionButton = () => {
-    return <ActionIcon color={!props.node.data!.id ? 'red' : hasPermission ? 'green' : undefined} onClick={() => {
-      if(!props.node.data!.id) return;
-      setUpdatePermissionModalOpen(true);
-    }}><IconEye size={16} /></ActionIcon>;
-  }
-
-  return (
-    <div
-      id={props.node.id.toString()}
-      className={`tree-node ${styles["root"]}`}
-      style={{
-        marginLeft: indent,
-        marginBottom: 16,
-        height: 48,
-        border: '1px solid #e9ecef'
-      }}
-    >
-      <div className={styles["expandIconWrapper"]}>
-        <ThemeIcon variant="light" size={30}>
-          {IconFactory.getIcon(props.node.data!.icon!)}
-        </ThemeIcon>
-      </div>
-
-      <div className={styles["labelGridItem"]}
-           onClick={handleToggle}>
-        <Text variant="text" size={'xs'}>{`${props.node.text}`}</Text>
-      </div>
-
-      <div
-        onClick={handleToggle}
-        style={{width: isLeaf() ? 24 : 8}}
-        className={`${styles["expandIconWrapper"]} ${
-          props.isOpen ? styles["isOpen"] : ""
-        }`}
-      >
-        {isLeaf() && (
-          <div onClick={handleToggle}>
-            <IconChevronRight size={16} />
-          </div>
-        )}
-      </div>
-
-      <div>
-        <Group gap={8}>
-
-          {props.node.data?.isProtectedByRule &&
-            <Badge leftSection={
-              <ActionIcon size="xs" radius="xl" variant="transparent">
-                <IconLock size={12} />
-              </ActionIcon>
-            }>Regola attiva</Badge>
-          }
-
-          {!props.node.data!.id &&
-            <Badge color={'green'} leftSection={
-              <ActionIcon size="xs" radius="xl" variant="transparent">
-                <IconPlus color={'green'} size={12} />
-              </ActionIcon>
-            }>Nuovo</Badge>
-          }
-
-          {props.node.data?.isGroup &&
-            <Badge color={'red'} leftSection={
-              <ActionIcon size="xs" radius="xl" variant="transparent">
-                <IconBoxMultiple color={'red'} size={12} />
-              </ActionIcon>
-            }>Gruppo</Badge>
-          }
-
-          {!props.node.data?.isGroup && props.node.data?.hasIndex &&
-            <Badge color={'yellow'} leftSection={
-              <ActionIcon size="xs" radius="xl" variant="transparent">
-                <IconSearch color={'orange'} size={12} />
-              </ActionIcon>
-            }>Indicizzato</Badge>
-          }
-
-          {props.node.data?.featureIdentifier === 'webclient.routing.externallink' &&
-            <Badge color={'green'} leftSection={
-              <ActionIcon size="xs" radius="xl" variant="transparent">
-                <IconExternalLink color={'green'} size={12} />
-              </ActionIcon>
-            }>Esterno</Badge>
-          }
-
-          {!props.node.data?.id ?
-            <Tooltip label={"Devi salvare il menu prima di impostare i permessi"}>
-              {updatePermissionButton()}
-            </Tooltip> :
-            <>{updatePermissionButton()}</>
-          }
-          <ActionIcon onClick={() => props.onEditButtonClick(props.node.data!)}><IconEdit size={16} /></ActionIcon>
-          <ActionIcon onClick={() => props.onDeleteButtonClick(props.node.id)}><IconTrash size={16} /></ActionIcon>
-        </Group>
-      </div>
-
-      {props.node!.data!.id &&
-        <Modal
-          size={'60%'}
-          centered
-          opened={updatePermissionModalOpen}
-          onClose={() => {
-            setUpdatePermissionModalOpen(false);
-          }}
-          title={`Gestione permessi ${props.node!.data!.label}`}>
-          <PermissionNavigator
-            context={{type: 'menu', id: props.node!.data!.id!.toString()}}
-            onUpdate={(pc) => setHasPermission(pc > 0)}
-          />
-        </Modal>
-      }
-
-    </div>
-  );
-};

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

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

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