@inventreedb/ui 0.0.1

package/src/tables/ColumnRenderers.tsx

@@ -0,0 +1,320 @@
+/**
+ * Common rendering functions for table column data.
+ */
+import { t } from '@lingui/core/macro';
+import { Anchor, Group, Skeleton, Text, Tooltip } from '@mantine/core';
+import { IconBell, IconExclamationCircle, IconLock } from '@tabler/icons-react';
+
+import type { ModelType } from '@lib/enums/ModelType';
+import { YesNoButton } from '../components/buttons/YesNoButton';
+import { Thumbnail } from '../components/images/Thumbnail';
+import { ProgressBar } from '../components/items/ProgressBar';
+import { TableStatusRenderer } from '../components/render/StatusRenderer';
+import { RenderOwner, RenderUser } from '../components/render/User';
+import { formatCurrency, formatDate } from '../defaults/formatters';
+import { resolveItem } from '../functions/conversion';
+import { cancelEvent } from '../functions/events';
+import { useGlobalSettingsState } from '../states/SettingsState';
+import type { TableColumn, TableColumnProps } from './Column';
+import { ProjectCodeHoverCard } from './TableHoverCard';
+
+// Render a Part instance within a table
+export function PartColumn({
+  part,
+  full_name
+}: {
+  part: any;
+  full_name?: boolean;
+}) {
+  return part ? (
+    <Group justify='space-between' wrap='nowrap'>
+      <Thumbnail
+        src={part?.thumbnail ?? part?.image}
+        text={full_name ? part?.full_name : part?.name}
+      />
+      <Group justify='flex-end' wrap='nowrap' gap='xs'>
+        {part?.active == false && (
+          <Tooltip label={t`Part is not active`}>
+            <IconExclamationCircle color='red' size={16} />
+          </Tooltip>
+        )}
+        {part?.locked && (
+          <Tooltip label={t`Part is Locked`}>
+            <IconLock size={16} />
+          </Tooltip>
+        )}
+        {part?.starred && (
+          <Tooltip label={t`You are subscribed to notifications for this part`}>
+            <IconBell size={16} color='green' />
+          </Tooltip>
+        )}
+      </Group>
+    </Group>
+  ) : (
+    <Skeleton />
+  );
+}
+
+export function LocationColumn(props: TableColumnProps): TableColumn {
+  return {
+    accessor: 'location',
+    title: t`Location`,
+    sortable: true,
+    ordering: 'location',
+    render: (record: any) => {
+      const location = resolveItem(record, props.accessor ?? '');
+
+      if (!location) {
+        return (
+          <Text
+            size='sm'
+            style={{ fontStyle: 'italic' }}
+          >{t`No location set`}</Text>
+        );
+      }
+
+      return <Text size='sm'>{location.name}</Text>;
+    },
+    ...props
+  };
+}
+
+export function BooleanColumn(props: TableColumn): TableColumn {
+  return {
+    sortable: true,
+    switchable: true,
+    render: (record: any) => (
+      <YesNoButton value={resolveItem(record, props.accessor ?? '')} />
+    ),
+    ...props
+  };
+}
+
+export function DescriptionColumn(props: TableColumnProps): TableColumn {
+  return {
+    accessor: 'description',
+    title: t`Description`,
+    sortable: false,
+    switchable: true,
+    ...props
+  };
+}
+
+export function LinkColumn(props: TableColumnProps): TableColumn {
+  return {
+    accessor: 'link',
+    sortable: false,
+    render: (record: any) => {
+      const url = resolveItem(record, props.accessor ?? 'link');
+
+      if (!url) {
+        return '-';
+      }
+
+      return (
+        <Anchor
+          href={url}
+          target='_blank'
+          rel='noreferrer noopener'
+          onClick={(event: any) => {
+            cancelEvent(event);
+
+            window.open(url, '_blank', 'noopener,noreferrer');
+          }}
+        >
+          {url}
+        </Anchor>
+      );
+    },
+    ...props
+  };
+}
+
+export function ReferenceColumn(props: TableColumnProps): TableColumn {
+  return {
+    accessor: 'reference',
+    title: t`Reference`,
+    sortable: true,
+    switchable: true,
+    ...props
+  };
+}
+
+export function NoteColumn(props: TableColumnProps): TableColumn {
+  return {
+    accessor: 'note',
+    sortable: false,
+    title: t`Note`,
+    render: (record: any) => record.note ?? record.notes,
+    ...props
+  };
+}
+
+export function LineItemsProgressColumn(): TableColumn {
+  return {
+    accessor: 'line_items',
+    sortable: true,
+    render: (record: any) => (
+      <ProgressBar
+        progressLabel={true}
+        value={record.completed_lines}
+        maximum={record.line_items}
+      />
+    )
+  };
+}
+
+export function ProjectCodeColumn(props: TableColumnProps): TableColumn {
+  const globalSettings = useGlobalSettingsState.getState();
+  const enabled = globalSettings.isSet('PROJECT_CODES_ENABLED', true);
+
+  return {
+    accessor: 'project_code',
+    ordering: 'project_code',
+    sortable: true,
+    title: t`Project Code`,
+    hidden: !enabled,
+    render: (record: any) => {
+      const project_code = resolveItem(
+        record,
+        props.accessor ?? 'project_code_detail'
+      );
+      return <ProjectCodeHoverCard projectCode={project_code} />;
+    },
+    ...props
+  };
+}
+
+export function StatusColumn({
+  model,
+  sortable,
+  ordering,
+  accessor,
+  title,
+  hidden
+}: {
+  model: ModelType;
+  sortable?: boolean;
+  accessor?: string;
+  ordering?: string;
+  hidden?: boolean;
+  title?: string;
+}) {
+  return {
+    accessor: accessor ?? 'status',
+    sortable: sortable ?? true,
+    ordering: ordering,
+    title: title,
+    hidden: hidden,
+    render: TableStatusRenderer(model, accessor ?? 'status_custom_key')
+  };
+}
+
+export function CreatedByColumn(props: TableColumnProps): TableColumn {
+  return {
+    accessor: 'created_by',
+    title: t`Created By`,
+    sortable: true,
+    switchable: true,
+    render: (record: any) =>
+      record.created_by && RenderUser({ instance: record.created_by }),
+    ...props
+  };
+}
+
+export function ResponsibleColumn(props: TableColumnProps): TableColumn {
+  return {
+    accessor: 'responsible',
+    sortable: true,
+    switchable: true,
+    render: (record: any) =>
+      record.responsible &&
+      RenderOwner({ instance: record.responsible_detail }),
+    ...props
+  };
+}
+
+export function DateColumn(props: TableColumnProps): TableColumn {
+  return {
+    accessor: 'date',
+    sortable: true,
+    title: t`Date`,
+    switchable: true,
+    render: (record: any) =>
+      formatDate(resolveItem(record, props.accessor ?? 'date')),
+    ...props
+  };
+}
+
+export function StartDateColumn(props: TableColumnProps): TableColumn {
+  return DateColumn({
+    accessor: 'start_date',
+    title: t`Start Date`,
+    ...props
+  });
+}
+
+export function TargetDateColumn(props: TableColumnProps): TableColumn {
+  return DateColumn({
+    accessor: 'target_date',
+    title: t`Target Date`,
+    ...props
+  });
+}
+
+export function CreationDateColumn(props: TableColumnProps): TableColumn {
+  return DateColumn({
+    accessor: 'creation_date',
+    title: t`Creation Date`,
+    ...props
+  });
+}
+
+export function CompletionDateColumn(props: TableColumnProps): TableColumn {
+  return DateColumn({
+    accessor: 'completion_date',
+    title: t`Completion Date`,
+    ...props
+  });
+}
+
+export function ShipmentDateColumn(props: TableColumnProps): TableColumn {
+  return DateColumn({
+    accessor: 'shipment_date',
+    title: t`Shipment Date`,
+    ...props
+  });
+}
+
+export function CurrencyColumn({
+  accessor,
+  title,
+  currency,
+  currency_accessor,
+  sortable
+}: {
+  accessor: string;
+  title?: string;
+  currency?: string;
+  currency_accessor?: string;
+  sortable?: boolean;
+}): TableColumn {
+  return {
+    accessor: accessor,
+    title: title ?? t`Currency`,
+    sortable: sortable ?? true,
+    render: (record: any) => {
+      const currency_key = currency_accessor ?? `${accessor}_currency`;
+      return formatCurrency(resolveItem(record, accessor), {
+        currency: currency ?? resolveItem(record, currency_key)
+      });
+    }
+  };
+}
+
+export function TotalPriceColumn(): TableColumn {
+  return CurrencyColumn({
+    accessor: 'total_price',
+    title: t`Total Price`
+  });
+}

package/src/tables/ColumnSelect.tsx

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

package/src/tables/Filter.tsx

@@ -0,0 +1,297 @@
+import { t } from '@lingui/core/macro';
+
+import { ApiEndpoints } from '@lib/enums/ApiEndpoints';
+import { ModelType } from '@lib/enums/ModelType';
+import { apiUrl } from '@lib/functions/Api';
+import type { TableFilter, TableFilterChoice } from '@lib/types/Filters';
+import type {
+  StatusCodeInterface,
+  StatusCodeListInterface
+} from '../components/render/StatusRenderer';
+import { useGlobalSettingsState } from '../states/SettingsState';
+import { type StatusLookup, useGlobalStatusState } from '../states/StatusState';
+
+/**
+ * Return list of available filter options for a given filter
+ * @param filter - TableFilter object
+ * @returns - A list of TableFilterChoice objects
+ */
+export function getTableFilterOptions(
+  filter: TableFilter
+): TableFilterChoice[] {
+  if (filter.choices) {
+    return filter.choices;
+  }
+
+  if (filter.choiceFunction) {
+    return filter.choiceFunction();
+  }
+
+  // Default fallback is a boolean filter
+  return [
+    { value: 'true', label: t`Yes` },
+    { value: 'false', label: t`No` }
+  ];
+}
+
+/*
+ * Construct a table filter which allows filtering by status code
+ */
+export function StatusFilterOptions(
+  model: ModelType
+): () => TableFilterChoice[] {
+  return () => {
+    const statusCodeList: StatusLookup | undefined =
+      useGlobalStatusState.getState().status;
+
+    if (!statusCodeList) {
+      return [];
+    }
+
+    const codes: StatusCodeListInterface | undefined = statusCodeList[model];
+
+    if (codes) {
+      return Object.keys(codes.values).map((key) => {
+        const entry: StatusCodeInterface = codes.values[key];
+        return {
+          value: entry.key.toString(),
+          label: entry.label?.toString() ?? entry.key.toString()
+        };
+      });
+    }
+
+    return [];
+  };
+}
+
+// Define some commonly used filters
+
+export function AssignedToMeFilter(): TableFilter {
+  return {
+    name: 'assigned_to_me',
+    type: 'boolean',
+    label: t`Assigned to me`,
+    description: t`Show orders assigned to me`
+  };
+}
+
+export function OutstandingFilter(): TableFilter {
+  return {
+    name: 'outstanding',
+    label: t`Outstanding`,
+    description: t`Show outstanding items`
+  };
+}
+
+export function OverdueFilter(): TableFilter {
+  return {
+    name: 'overdue',
+    label: t`Overdue`,
+    description: t`Show overdue items`
+  };
+}
+
+export function MinDateFilter(): TableFilter {
+  return {
+    name: 'min_date',
+    label: t`Minimum Date`,
+    description: t`Show items after this date`,
+    type: 'date'
+  };
+}
+
+export function MaxDateFilter(): TableFilter {
+  return {
+    name: 'max_date',
+    label: t`Maximum Date`,
+    description: t`Show items before this date`,
+    type: 'date'
+  };
+}
+
+export function CreatedBeforeFilter(): TableFilter {
+  return {
+    name: 'created_before',
+    label: t`Created Before`,
+    description: t`Show items created before this date`,
+    type: 'date'
+  };
+}
+
+export function CreatedAfterFilter(): TableFilter {
+  return {
+    name: 'created_after',
+    label: t`Created After`,
+    description: t`Show items created after this date`,
+    type: 'date'
+  };
+}
+
+export function StartDateBeforeFilter(): TableFilter {
+  return {
+    name: 'start_date_before',
+    label: t`Start Date Before`,
+    description: t`Show items with a start date before this date`,
+    type: 'date'
+  };
+}
+
+export function StartDateAfterFilter(): TableFilter {
+  return {
+    name: 'start_date_after',
+    label: t`Start Date After`,
+    description: t`Show items with a start date after this date`,
+    type: 'date'
+  };
+}
+
+export function TargetDateBeforeFilter(): TableFilter {
+  return {
+    name: 'target_date_before',
+    label: t`Target Date Before`,
+    description: t`Show items with a target date before this date`,
+    type: 'date'
+  };
+}
+
+export function TargetDateAfterFilter(): TableFilter {
+  return {
+    name: 'target_date_after',
+    label: t`Target Date After`,
+    description: t`Show items with a target date after this date`,
+    type: 'date'
+  };
+}
+
+export function CompletedBeforeFilter(): TableFilter {
+  return {
+    name: 'completed_before',
+    label: t`Completed Before`,
+    description: t`Show items completed before this date`,
+    type: 'date'
+  };
+}
+
+export function CompletedAfterFilter(): TableFilter {
+  return {
+    name: 'completed_after',
+    label: t`Completed After`,
+    description: t`Show items completed after this date`,
+    type: 'date'
+  };
+}
+
+export function HasProjectCodeFilter(): TableFilter {
+  const globalSettings = useGlobalSettingsState.getState();
+  const enabled = globalSettings.isSet('PROJECT_CODES_ENABLED', true);
+
+  return {
+    name: 'has_project_code',
+    type: 'boolean',
+    label: t`Has Project Code`,
+    description: t`Show orders with an assigned project code`,
+    active: enabled
+  };
+}
+
+export function OrderStatusFilter({
+  model
+}: { model: ModelType }): TableFilter {
+  return {
+    name: 'status',
+    label: t`Status`,
+    description: t`Filter by order status`,
+    choiceFunction: StatusFilterOptions(model)
+  };
+}
+
+export function ProjectCodeFilter(): TableFilter {
+  const globalSettings = useGlobalSettingsState.getState();
+  const enabled = globalSettings.isSet('PROJECT_CODES_ENABLED', true);
+
+  return {
+    name: 'project_code',
+    label: t`Project Code`,
+    description: t`Filter by project code`,
+    active: enabled,
+    type: 'api',
+    apiUrl: apiUrl(ApiEndpoints.project_code_list),
+    model: ModelType.projectcode,
+    modelRenderer: (instance) => instance.code
+  };
+}
+
+export function OwnerFilter({
+  name,
+  label,
+  description
+}: {
+  name: string;
+  label: string;
+  description: string;
+}): TableFilter {
+  return {
+    name: name,
+    label: label,
+    description: description,
+    type: 'api',
+    apiUrl: apiUrl(ApiEndpoints.owner_list),
+    model: ModelType.owner,
+    modelRenderer: (instance: any) => instance.name
+  };
+}
+
+export function ResponsibleFilter(): TableFilter {
+  return OwnerFilter({
+    name: 'assigned_to',
+    label: t`Responsible`,
+    description: t`Filter by responsible owner`
+  });
+}
+
+export function UserFilter({
+  name,
+  label,
+  description
+}: {
+  name?: string;
+  label?: string;
+  description?: string;
+}): TableFilter {
+  return {
+    name: name ?? 'user',
+    label: label ?? t`User`,
+    description: description ?? t`Filter by user`,
+    type: 'api',
+    apiUrl: apiUrl(ApiEndpoints.user_list),
+    model: ModelType.user,
+    modelRenderer: (instance: any) => instance.username
+  };
+}
+
+export function CreatedByFilter(): TableFilter {
+  return UserFilter({
+    name: 'created_by',
+    label: t`Created By`,
+    description: t`Filter by user who created the order`
+  });
+}
+
+export function IssuedByFilter(): TableFilter {
+  return UserFilter({
+    name: 'issued_by',
+    label: t`Issued By`,
+    description: t`Filter by user who issued the order`
+  });
+}
+
+export function PartCategoryFilter(): TableFilter {
+  return {
+    name: 'category',
+    label: t`Category`,
+    description: t`Filter by part category`,
+    apiUrl: apiUrl(ApiEndpoints.category_list),
+    model: ModelType.partcategory,
+    modelRenderer: (instance: any) => instance.name
+  };
+}