@inventreedb/ui 0.0.1 → 0.0.2

package/src/components/dashboard/DashboardLayout.tsx

@@ -1,327 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Alert, Card, Center, Loader, Text } from '@mantine/core';
-import { useDisclosure, useHotkeys } from '@mantine/hooks';
-import { IconInfoCircle } from '@tabler/icons-react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { type Layout, Responsive, WidthProvider } from 'react-grid-layout';
-
-import { useDashboardItems } from '../../hooks/UseDashboardItems';
-import { useUserState } from '../../states/UserState';
-import DashboardMenu from './DashboardMenu';
-import DashboardWidget, { type DashboardWidgetProps } from './DashboardWidget';
-import DashboardWidgetDrawer from './DashboardWidgetDrawer';
-
-const ReactGridLayout = WidthProvider(Responsive);
-
-/**
- * Save the dashboard layout to local storage
- */
-function saveDashboardLayout(layouts: any, userId: number | undefined): void {
-  const reducedLayouts: any = {};
-
-  // Reduce the layouts to exclude default attributes from the dataset
-  Object.keys(layouts).forEach((key) => {
-    reducedLayouts[key] = layouts[key].map((item: Layout) => {
-      return {
-        ...item,
-        moved: item.moved ? true : undefined,
-        static: item.static ? true : undefined
-      };
-    });
-  });
-
-  const data = JSON.stringify(reducedLayouts);
-
-  if (userId) {
-    localStorage?.setItem(`dashboard-layout-${userId}`, data);
-  }
-
-  localStorage?.setItem('dashboard-layout', data);
-}
-
-/**
- * Load the dashboard layout from local storage
- */
-function loadDashboardLayout(
-  userId: number | undefined
-): Record<string, Layout[]> {
-  let layout = userId && localStorage?.getItem(`dashboard-layout-${userId}`);
-
-  if (!layout) {
-    // Fallback to global layout
-    layout = localStorage?.getItem('dashboard-layout');
-  }
-
-  if (layout) {
-    return JSON.parse(layout);
-  } else {
-    return {};
-  }
-}
-
-/**
- * Save the list of selected widgets to local storage
- */
-function saveDashboardWidgets(
-  widgets: string[],
-  userId: number | undefined
-): void {
-  const data = JSON.stringify(widgets);
-
-  if (userId) {
-    localStorage?.setItem(`dashboard-widgets-${userId}`, data);
-  }
-
-  localStorage?.setItem('dashboard-widgets', data);
-}
-
-/**
- * Load the list of selected widgets from local storage
- */
-function loadDashboardWidgets(userId: number | undefined): string[] {
-  let widgets = userId && localStorage?.getItem(`dashboard-widgets-${userId}`);
-
-  if (!widgets) {
-    // Fallback to global widget list
-    widgets = localStorage?.getItem('dashboard-widgets');
-  }
-
-  if (widgets) {
-    return JSON.parse(widgets);
-  } else {
-    return [];
-  }
-}
-
-export default function DashboardLayout() {
-  const user = useUserState();
-
-  // Dashboard layout definition
-  const [layouts, setLayouts] = useState({});
-
-  // Dashboard widget selection
-  const [widgets, setWidgets] = useState<DashboardWidgetProps[]>([]);
-
-  const [editing, setEditing] = useDisclosure(false);
-  const [removing, setRemoving] = useDisclosure(false);
-
-  const [
-    widgetDrawerOpened,
-    { open: openWidgetDrawer, close: closeWidgetDrawer }
-  ] = useDisclosure(false);
-
-  const [loaded, setLoaded] = useState(false);
-
-  // Keyboard shortcut for editing the dashboard layout
-  useHotkeys([
-    [
-      'mod+E',
-      () => {
-        setEditing.toggle();
-      }
-    ]
-  ]);
-
-  // Load available widgets
-  const availableWidgets = useDashboardItems();
-
-  const widgetLabels = useMemo(() => {
-    return widgets.map((widget: DashboardWidgetProps) => widget.label);
-  }, [widgets]);
-
-  // Save the selected widgets to local storage when the selection changes
-  useEffect(() => {
-    if (loaded) {
-      saveDashboardWidgets(widgetLabels, user.userId());
-    }
-  }, [widgetLabels]);
-
-  /**
-   * Callback function to add a new widget to the dashboard
-   */
-  const addWidget = useCallback(
-    (widget: string) => {
-      const newWidget = availableWidgets.items.find(
-        (wid) => wid.label === widget
-      );
-
-      if (newWidget) {
-        setWidgets([...widgets, newWidget]);
-      }
-
-      // Update the layouts to include the new widget (and enforce initial size)
-      const _layouts: any = { ...layouts };
-
-      Object.keys(_layouts).forEach((key) => {
-        _layouts[key] = updateLayoutForWidget(_layouts[key], widgets, true);
-      });
-
-      setLayouts(_layouts);
-    },
-    [availableWidgets.items, widgets, layouts]
-  );
-
-  /**
-   * Callback function to remove a widget from the dashboard
-   */
-  const removeWidget = useCallback(
-    (widget: string) => {
-      // Remove the widget from the list
-      setWidgets(widgets.filter((item) => item.label !== widget));
-
-      // Remove the widget from the layout
-      const _layouts: any = { ...layouts };
-
-      Object.keys(_layouts).forEach((key) => {
-        _layouts[key] = _layouts[key].filter(
-          (item: Layout) => item.i !== widget
-        );
-      });
-
-      setLayouts(_layouts);
-    },
-    [widgets, layouts]
-  );
-
-  // When the layout is rendered, ensure that the widget attributes are observed
-  const updateLayoutForWidget = useCallback(
-    (layout: any[], widgets: any[], overrideSize: boolean) => {
-      return layout.map((item: Layout): Layout => {
-        // Find the matching widget
-        const widget = widgets.find(
-          (widget: DashboardWidgetProps) => widget.label === item.i
-        );
-
-        const minH = widget?.minHeight ?? 2;
-        const minW = widget?.minWidth ?? 1;
-
-        let w = Math.max(item.w ?? 1, minW);
-        let h = Math.max(item.h ?? 1, minH);
-
-        if (overrideSize) {
-          w = minW;
-          h = minH;
-        }
-
-        return {
-          ...item,
-          w: w,
-          h: h,
-          minH: minH,
-          minW: minW
-        };
-      });
-    },
-    []
-  );
-
-  // Rebuild layout when the widget list changes
-  useEffect(() => {
-    onLayoutChange({}, layouts);
-  }, [widgets]);
-
-  const onLayoutChange = useCallback(
-    (layout: any, newLayouts: any) => {
-      // Reconstruct layouts based on the widget requirements
-      Object.keys(newLayouts).forEach((key) => {
-        newLayouts[key] = updateLayoutForWidget(
-          newLayouts[key],
-          widgets,
-          false
-        );
-      });
-
-      if (layouts && loaded && availableWidgets.loaded) {
-        saveDashboardLayout(newLayouts, user.userId());
-        setLayouts(newLayouts);
-      }
-    },
-    [loaded, widgets, availableWidgets.loaded]
-  );
-
-  // Load the dashboard layout from local storage
-  useEffect(() => {
-    if (availableWidgets.loaded) {
-      const initialLayouts = loadDashboardLayout(user.userId());
-      const initialWidgetLabels = loadDashboardWidgets(user.userId());
-
-      setLayouts(initialLayouts);
-      setWidgets(
-        availableWidgets.items.filter((widget) =>
-          initialWidgetLabels.includes(widget.label)
-        )
-      );
-
-      setLoaded(true);
-    }
-  }, [availableWidgets.loaded]);
-
-  return (
-    <>
-      <DashboardWidgetDrawer
-        opened={widgetDrawerOpened}
-        onClose={closeWidgetDrawer}
-        onAddWidget={addWidget}
-        currentWidgets={widgetLabels}
-      />
-      <DashboardMenu
-        onAddWidget={openWidgetDrawer}
-        onStartEdit={setEditing.open}
-        onStartRemove={setRemoving.open}
-        onAcceptLayout={() => {
-          setEditing.close();
-          setRemoving.close();
-        }}
-        editing={editing}
-        removing={removing}
-      />
-      {layouts && loaded && availableWidgets.loaded ? (
-        <>
-          {widgetLabels.length == 0 ? (
-            <Center>
-              <Card shadow='xs' padding='xl' style={{ width: '100%' }}>
-                <Alert
-                  color='blue'
-                  title={t`No Widgets Selected`}
-                  icon={<IconInfoCircle />}
-                >
-                  <Text>{t`Use the menu to add widgets to the dashboard`}</Text>
-                </Alert>
-              </Card>
-            </Center>
-          ) : (
-            <ReactGridLayout
-              className='dashboard-layout'
-              breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
-              cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
-              rowHeight={64}
-              layouts={layouts}
-              onLayoutChange={onLayoutChange}
-              compactType={'vertical'}
-              isDraggable={editing}
-              isResizable={editing}
-              margin={[10, 10]}
-              containerPadding={[0, 0]}
-              resizeHandles={['ne', 'se', 'sw', 'nw']}
-            >
-              {widgets.map((item: DashboardWidgetProps) => {
-                return DashboardWidget({
-                  item: item,
-                  editing: editing,
-                  removing: removing,
-                  onRemove: () => {
-                    removeWidget(item.label);
-                  }
-                });
-              })}
-            </ReactGridLayout>
-          )}
-        </>
-      ) : (
-        <Center>
-          <Loader size='xl' />
-        </Center>
-      )}
-    </>
-  );
-}

package/src/components/dashboard/DashboardMenu.tsx

@@ -1,136 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { Trans } from '@lingui/react/macro';
-import {
-  ActionIcon,
-  Group,
-  Indicator,
-  Menu,
-  Paper,
-  Tooltip
-} from '@mantine/core';
-import {
-  IconCircleCheck,
-  IconDotsVertical,
-  IconLayout2,
-  IconLayoutGridAdd,
-  IconLayoutGridRemove
-} from '@tabler/icons-react';
-import { useMemo } from 'react';
-
-import useInstanceName from '../../hooks/UseInstanceName';
-import { useUserState } from '../../states/UserState';
-import { StylishText } from '../items/StylishText';
-
-/**
- * A menu for editing the dashboard layout
- */
-export default function DashboardMenu({
-  editing,
-  removing,
-  onAddWidget,
-  onStartEdit,
-  onStartRemove,
-  onAcceptLayout
-}: Readonly<{
-  editing: boolean;
-  removing: boolean;
-  onAddWidget: () => void;
-  onStartEdit: () => void;
-  onStartRemove: () => void;
-  onAcceptLayout: () => void;
-}>) {
-  const user = useUserState();
-  const instanceName = useInstanceName();
-
-  const title = useMemo(() => {
-    const username = user.username();
-
-    return (
-      <StylishText size='lg'>{`${instanceName} - ${username}`}</StylishText>
-    );
-  }, [user, instanceName]);
-
-  return (
-    <Paper p='sm' pr={0}>
-      <Group justify='space-between' wrap='nowrap'>
-        {title}
-
-        <Group justify='right' wrap='nowrap'>
-          {(editing || removing) && (
-            <Tooltip label={t`Accept Layout`} onClick={onAcceptLayout}>
-              <ActionIcon
-                aria-label={'dashboard-accept-layout'}
-                color='green'
-                variant='transparent'
-              >
-                <IconCircleCheck />
-              </ActionIcon>
-            </Tooltip>
-          )}
-          <Menu
-            shadow='md'
-            width={200}
-            openDelay={100}
-            closeDelay={400}
-            position='bottom-end'
-          >
-            <Menu.Target>
-              <Indicator
-                color='red'
-                position='bottom-center'
-                processing
-                disabled={!editing}
-              >
-                <ActionIcon variant='transparent' aria-label='dashboard-menu'>
-                  <IconDotsVertical />
-                </ActionIcon>
-              </Indicator>
-            </Menu.Target>
-
-            <Menu.Dropdown>
-              <Menu.Label>
-                <Trans>Dashboard</Trans>
-              </Menu.Label>
-
-              {!editing && !removing && (
-                <Menu.Item
-                  leftSection={<IconLayout2 color='blue' size={14} />}
-                  onClick={onStartEdit}
-                >
-                  <Trans>Edit Layout</Trans>
-                </Menu.Item>
-              )}
-
-              {!editing && !removing && (
-                <Menu.Item
-                  leftSection={<IconLayoutGridAdd color='green' size={14} />}
-                  onClick={onAddWidget}
-                >
-                  <Trans>Add Widget</Trans>
-                </Menu.Item>
-              )}
-
-              {!editing && !removing && (
-                <Menu.Item
-                  leftSection={<IconLayoutGridRemove color='red' size={14} />}
-                  onClick={onStartRemove}
-                >
-                  <Trans>Remove Widgets</Trans>
-                </Menu.Item>
-              )}
-
-              {(editing || removing) && (
-                <Menu.Item
-                  leftSection={<IconCircleCheck color='green' size={14} />}
-                  onClick={onAcceptLayout}
-                >
-                  <Trans>Accept Layout</Trans>
-                </Menu.Item>
-              )}
-            </Menu.Dropdown>
-          </Menu>
-        </Group>
-      </Group>
-    </Paper>
-  );
-}

package/src/components/dashboard/DashboardWidget.tsx

@@ -1,82 +0,0 @@
-import { t } from '@lingui/core/macro';
-import { ActionIcon, Box, Group, Overlay, Paper, Tooltip } from '@mantine/core';
-import { IconX } from '@tabler/icons-react';
-
-import { Boundary } from '../Boundary';
-
-/**
- * Dashboard widget properties.
- *
- * @param title The title of the widget
- * @param visible A function that returns whether the widget should be visible
- * @param render A function that renders the widget
- */
-export interface DashboardWidgetProps {
-  label: string;
-  title: string;
-  description: string;
-  enabled?: boolean;
-  minWidth?: number;
-  minHeight?: number;
-  render: () => JSX.Element;
-  visible?: () => boolean;
-}
-
-/**
- * Wrapper for a dashboard widget.
- */
-export default function DashboardWidget({
-  item,
-  editing,
-  removing,
-  onRemove
-}: Readonly<{
-  item: DashboardWidgetProps;
-  editing: boolean;
-  removing: boolean;
-  onRemove: () => void;
-}>) {
-  if (item.enabled == false) {
-    return null;
-  }
-
-  return (
-    <Paper withBorder key={item.label} shadow='sm' p='xs'>
-      <Boundary label={`dashboard-widget-${item.label}`}>
-        <Box
-          key={`dashboard-widget-${item.label}`}
-          style={{
-            width: '100%',
-            height: '100%',
-            padding: '0px',
-            margin: '0px',
-            overflowY: 'hidden'
-          }}
-        >
-          {item.render()}
-        </Box>
-        {removing && (
-          <Overlay color='black' opacity={0.7} zIndex={1000}>
-            {removing && (
-              <Group justify='right'>
-                <Tooltip
-                  label={t`Remove this widget from the dashboard`}
-                  position='bottom'
-                >
-                  <ActionIcon
-                    aria-label={`remove-dashboard-item-${item.label}`}
-                    variant='filled'
-                    color='red'
-                    onClick={onRemove}
-                  >
-                    <IconX />
-                  </ActionIcon>
-                </Tooltip>
-              </Group>
-            )}
-          </Overlay>
-        )}
-      </Boundary>
-    </Paper>
-  );
-}

package/src/components/dashboard/DashboardWidgetDrawer.tsx

@@ -1,130 +0,0 @@
-import { t } from '@lingui/core/macro';
-import {
-  ActionIcon,
-  Alert,
-  Divider,
-  Drawer,
-  Group,
-  Stack,
-  Table,
-  Text,
-  TextInput,
-  Tooltip
-} from '@mantine/core';
-import { useDebouncedValue } from '@mantine/hooks';
-import { IconBackspace, IconLayoutGridAdd } from '@tabler/icons-react';
-import { useMemo, useState } from 'react';
-
-import { useDashboardItems } from '../../hooks/UseDashboardItems';
-import { StylishText } from '../items/StylishText';
-
-/**
- * Drawer allowing the user to add new widgets to the dashboard.
- */
-export default function DashboardWidgetDrawer({
-  opened,
-  onClose,
-  onAddWidget,
-  currentWidgets
-}: Readonly<{
-  opened: boolean;
-  onClose: () => void;
-  onAddWidget: (widget: string) => void;
-  currentWidgets: string[];
-}>) {
-  // Load available widgets
-  const availableWidgets = useDashboardItems();
-
-  const [filter, setFilter] = useState<string>('');
-  const [filterText] = useDebouncedValue(filter, 500);
-
-  // Memoize available (not currently used) widgets
-  const unusedWidgets = useMemo(() => {
-    return (
-      availableWidgets.items.filter(
-        (widget) => !currentWidgets.includes(widget.label)
-      ) ?? []
-    );
-  }, [availableWidgets.items, currentWidgets]);
-
-  // Filter widgets based on search text
-  const filteredWidgets = useMemo(() => {
-    const words = filterText.trim().toLowerCase().split(' ');
-
-    return unusedWidgets.filter((widget) => {
-      return words.every((word) =>
-        widget.title.toLowerCase().includes(word.trim())
-      );
-    });
-  }, [unusedWidgets, filterText]);
-
-  return (
-    <Drawer
-      position='right'
-      size='50%'
-      opened={opened}
-      onClose={onClose}
-      title={
-        <Group justify='space-between' wrap='nowrap'>
-          <StylishText size='lg'>Add Dashboard Widgets</StylishText>
-        </Group>
-      }
-    >
-      <Stack gap='xs'>
-        <Divider />
-        <TextInput
-          aria-label='dashboard-widgets-filter-input'
-          placeholder={t`Filter dashboard widgets`}
-          value={filter}
-          onChange={(event) => setFilter(event.currentTarget.value)}
-          rightSection={
-            filter && (
-              <IconBackspace
-                aria-label='dashboard-widgets-filter-clear'
-                color='red'
-                onClick={() => setFilter('')}
-              />
-            )
-          }
-          styles={{ root: { width: '100%' } }}
-        />
-        <Table>
-          <Table.Tbody>
-            {filteredWidgets.map((widget) => (
-              <Table.Tr key={widget.label}>
-                <Table.Td>
-                  <Tooltip
-                    position='left'
-                    label={t`Add this widget to the dashboard`}
-                  >
-                    <ActionIcon
-                      aria-label={`add-widget-${widget.label}`}
-                      variant='transparent'
-                      color='green'
-                      onClick={() => {
-                        onAddWidget(widget.label);
-                      }}
-                    >
-                      <IconLayoutGridAdd />
-                    </ActionIcon>
-                  </Tooltip>
-                </Table.Td>
-                <Table.Td>
-                  <Text>{widget.title}</Text>
-                </Table.Td>
-                <Table.Td>
-                  <Text size='sm'>{widget.description}</Text>
-                </Table.Td>
-              </Table.Tr>
-            ))}
-          </Table.Tbody>
-        </Table>
-        {unusedWidgets.length === 0 && (
-          <Alert color='blue' title={t`No Widgets Available`}>
-            <Text>{t`There are no more widgets available for the dashboard`}</Text>
-          </Alert>
-        )}
-      </Stack>
-    </Drawer>
-  );
-}