[WIP] Mantine datatables

.github/workflows/qc_checks.yaml

@@ -152,6 +152,7 @@ jobs:
           apt-dependency: gettext poppler-utils
           dev-install: true
           update: true
+          npm: true
       - name: Download Python Code For `${{ env.wrapper_name }}`
         run: git clone --depth 1 https://github.com/inventree/${{ env.wrapper_name }}
           ./${{ env.wrapper_name }}

package.json

@@ -1,12 +1,6 @@
 {
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@mantine/core": "^6.0.17",
-    "@mantine/dropzone": "^6.0.17",
-    "@mantine/hooks": "^6.0.17",
-    "@mantine/notifications": "^6.0.17",
     "eslint": "^8.41.0",
-    "eslint-config-google": "^0.14.0",
-    "mantine-datatable": "^2.8.5"
+    "eslint-config-google": "^0.14.0"
   }
 }

src/frontend/package.json

@@ -30,6 +30,7 @@
         "axios": "^1.4.0",
         "dayjs": "^1.11.9",
         "html5-qrcode": "^2.3.8",
+        "mantine-datatable": "^2.9.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.14.2",

src/frontend/src/components/items/ActionButton.tsx

@@ -0,0 +1,35 @@
+import { ActionIcon, Tooltip } from '@mantine/core';
+
+/**
+ * Construct a simple action button with consistent styling
+ */
+export function ActionButton({
+  icon,
+  color = 'black',
+  tooltip = '',
+  disabled = false,
+  size = 18,
+  onClick
+}: {
+  icon: any;
+  color?: string;
+  tooltip?: string;
+  variant?: string;
+  size?: number;
+  disabled?: boolean;
+  onClick?: any;
+}) {
+  return (
+    <ActionIcon
+      disabled={disabled}
+      radius="xs"
+      color={color}
+      size={size}
+      onClick={onClick}
+    >
+      <Tooltip disabled={!tooltip} label={tooltip} position="left">
+        {icon}
+      </Tooltip>
+    </ActionIcon>
+  );
+}

src/frontend/src/components/items/ButtonMenu.tsx

@@ -0,0 +1,36 @@
+import { ActionIcon, Menu, Tooltip } from '@mantine/core';
+import { Component } from 'react';
+
+/**
+ * A ButtonMenu is a button that opens a menu when clicked.
+ * It features a number of actions, which can be selected by the user.
+ */
+export function ButtonMenu({
+  icon,
+  actions,
+  tooltip = '',
+  label = ''
+}: {
+  icon: any;
+  actions: any[];
+  label?: string;
+  tooltip?: string;
+}) {
+  let idx = 0;
+
+  return (
+    <Menu shadow="xs">
+      <Menu.Target>
+        <ActionIcon>
+          <Tooltip label={tooltip}>{icon}</Tooltip>
+        </ActionIcon>
+      </Menu.Target>
+      <Menu.Dropdown>
+        {label && <Menu.Label>{label}</Menu.Label>}
+        {actions.map((action) => (
+          <Menu.Item key={idx++}>{action}</Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

src/frontend/src/components/items/Thumbnail.tsx

@@ -0,0 +1,57 @@
+import { t } from '@lingui/macro';
+import { Image } from '@mantine/core';
+import { Group } from '@mantine/core';
+import { Text } from '@mantine/core';
+
+export function Thumbnail({
+  src,
+  alt = t`Thumbnail`,
+  size = 24
+}: {
+  src: string;
+  alt?: string;
+  size?: number;
+}) {
+  // TODO: Use api to determine the correct URL
+  let url = 'http://localhost:8000' + src;
+
+  // TODO: Use HoverCard to display a larger version of the image
+
+  return (
+    <Image
+      src={url}
+      alt={alt}
+      width={size}
+      fit="contain"
+      radius="xs"
+      withPlaceholder
+      imageProps={{
+        style: {
+          maxHeight: size
+        }
+      }}
+    />
+  );
+}
+
+export function ThumbnailHoverCard({
+  src,
+  text,
+  link = '',
+  alt = t`Thumbnail`,
+  size = 24
+}: {
+  src: string;
+  text: string;
+  link?: string;
+  alt?: string;
+  size?: number;
+}) {
+  // TODO: Handle link
+  return (
+    <Group position="left" spacing={10}>
+      <Thumbnail src={src} alt={alt} size={size} />
+      <Text>{text}</Text>
+    </Group>
+  );
+}

src/frontend/src/components/tables/Column.tsx

@@ -0,0 +1,15 @@
+/**
+ * Interface for the table column definition
+ */
+export type TableColumn = {
+  accessor: string; // The key in the record to access
+  ordering?: string; // The key in the record to sort by (defaults to accessor)
+  title: string; // The title of the column
+  sortable?: boolean; // Whether the column is sortable
+  switchable?: boolean; // Whether the column is switchable
+  hidden?: boolean; // Whether the column is hidden
+  render?: (record: any) => any; // A custom render function
+  filter?: any; // A custom filter function
+  filtering?: boolean; // Whether the column is filterable
+  width?: number; // The width of the column
+};

src/frontend/src/components/tables/ColumnSelect.tsx

@@ -0,0 +1,40 @@
+import { t } from '@lingui/macro';
+import { Checkbox, Menu, Tooltip } from '@mantine/core';
+import { ActionIcon } from '@mantine/core';
+import { IconAdjustments } from '@tabler/icons-react';
+
+export function TableColumnSelect({
+  columns,
+  onToggleColumn
+}: {
+  columns: any[];
+  onToggleColumn: (columnName: string) => void;
+}) {
+  return (
+    <Menu shadow="xs">
+      <Menu.Target>
+        <ActionIcon>
+          <Tooltip label={t`Select Columns`}>
+            <IconAdjustments />
+          </Tooltip>
+        </ActionIcon>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        <Menu.Label>{t`Select Columns`}</Menu.Label>
+        {columns
+          .filter((col) => col.switchable)
+          .map((col) => (
+            <Menu.Item key={col.accessor}>
+              <Checkbox
+                checked={!col.hidden}
+                label={col.title || col.accessor}
+                onChange={(event) => onToggleColumn(col.accessor)}
+                radius="sm"
+              />
+            </Menu.Item>
+          ))}
+      </Menu.Dropdown>
+    </Menu>
+  );
+}

src/frontend/src/components/tables/DownloadAction.tsx

@@ -0,0 +1,45 @@
+import { Trans, t } from '@lingui/macro';
+import { ActionIcon, Divider, Group, Menu, Select } from '@mantine/core';
+import { Tooltip } from '@mantine/core';
+import { Button, Modal, Stack } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+import { IconDownload } from '@tabler/icons-react';
+import { useState } from 'react';
+
+export function DownloadAction({
+  downloadCallback
+}: {
+  downloadCallback: (fileFormat: string) => void;
+}) {
+  const formatOptions = [
+    { value: 'csv', label: t`CSV` },
+    { value: 'tsv', label: t`TSV` },
+    { value: 'xlsx', label: t`Excel` }
+  ];
+
+  return (
+    <>
+      <Menu>
+        <Menu.Target>
+          <ActionIcon>
+            <Tooltip label={t`Download selected data`}>
+              <IconDownload />
+            </Tooltip>
+          </ActionIcon>
+        </Menu.Target>
+        <Menu.Dropdown>
+          {formatOptions.map((format) => (
+            <Menu.Item
+              key={format.value}
+              onClick={() => {
+                downloadCallback(format.value);
+              }}
+            >
+              {format.label}
+            </Menu.Item>
+          ))}
+        </Menu.Dropdown>
+      </Menu>
+    </>
+  );
+}

src/frontend/src/components/tables/Filter.tsx

@@ -0,0 +1,21 @@
+/**
+ * Interface for the table filter choice
+ */
+export type TableFilterChoice = {
+  value: string;
+  label: string;
+};
+
+/**
+ * Interface for the table filter,
+ */
+export type TableFilter = {
+  name: string;
+  label: string;
+  description?: string;
+  type: string;
+  choices?: TableFilterChoice[];
+  choiceFunction?: () => TableFilterChoice[];
+  defaultValue?: any;
+  value?: any;
+};

src/frontend/src/components/tables/FilterBadge.tsx

@@ -0,0 +1,50 @@
+import { t } from '@lingui/macro';
+import { Badge, CloseButton } from '@mantine/core';
+import { Text, Tooltip } from '@mantine/core';
+import { Group } from '@mantine/core';
+
+import { TableFilter } from './Filter';
+
+export function FilterBadge({
+  filter,
+  onFilterRemove
+}: {
+  filter: TableFilter;
+  onFilterRemove: () => void;
+}) {
+  /**
+   * Construct text to display for the given badge ID
+   */
+  function filterDescription() {
+    let text = filter.label || filter.name;
+
+    text += ' = ';
+    text += filter.value;
+
+    return text;
+  }
+
+  return (
+    <Badge
+      size="lg"
+      radius="lg"
+      variant="outline"
+      color="gray"
+      styles={(theme) => ({
+        root: {
+          paddingRight: '4px'
+        },
+        inner: {
+          textTransform: 'none'
+        }
+      })}
+    >
+      <Group spacing={1}>
+        <Text>{filterDescription()}</Text>
+        <Tooltip label={t`Remove filter`}>
+          <CloseButton color="red" onClick={() => onFilterRemove()} />
+        </Tooltip>
+      </Group>
+    </Badge>
+  );
+}

src/frontend/src/components/tables/FilterGroup.tsx

@@ -0,0 +1,58 @@
+import { t } from '@lingui/macro';
+import { ActionIcon, Group, Text, Tooltip } from '@mantine/core';
+import { IconFilterMinus } from '@tabler/icons-react';
+import { IconFilterPlus } from '@tabler/icons-react';
+
+import { TableFilter } from './Filter';
+import { FilterBadge } from './FilterBadge';
+
+/**
+ * Return a table filter group component:
+ * - Displays a list of active filters for the table
+ * - Allows the user to add/remove filters
+ * - Allows the user to clear all filters
+ */
+export function FilterGroup({
+  activeFilters,
+  onFilterAdd,
+  onFilterRemove,
+  onFilterClearAll
+}: {
+  activeFilters: TableFilter[];
+  onFilterAdd: () => void;
+  onFilterRemove: (filterName: string) => void;
+  onFilterClearAll: () => void;
+}) {
+  return (
+    <Group position="right" spacing={5}>
+      {activeFilters.length == 0 && (
+        <Text italic={true} size="sm">{t`Add table filter`}</Text>
+      )}
+      {activeFilters.map((f) => (
+        <FilterBadge
+          key={f.name}
+          filter={f}
+          onFilterRemove={() => onFilterRemove(f.name)}
+        />
+      ))}
+      {activeFilters.length && (
+        <ActionIcon
+          radius="sm"
+          variant="outline"
+          onClick={() => onFilterClearAll()}
+        >
+          <Tooltip label={t`Clear all filters`}>
+            <IconFilterMinus color="red" />
+          </Tooltip>
+        </ActionIcon>
+      )}
+      {
+        <ActionIcon radius="sm" variant="outline" onClick={() => onFilterAdd()}>
+          <Tooltip label={t`Add filter`}>
+            <IconFilterPlus color="green" />
+          </Tooltip>
+        </ActionIcon>
+      }
+    </Group>
+  );
+}