@inventreedb/ui 0.0.1 → 0.0.3

package/src/tables/ColumnRenderers.tsx

@@ -1,320 +0,0 @@
-/**
- * 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

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

@@ -1,297 +0,0 @@
-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
-  };
-}