diff --git a/src/frontend/src/components/images/Thumbnail.tsx b/src/frontend/src/components/images/Thumbnail.tsx index c9315dcbcc..2007e8dec0 100644 --- a/src/frontend/src/components/images/Thumbnail.tsx +++ b/src/frontend/src/components/images/Thumbnail.tsx @@ -1,5 +1,5 @@ import { t } from '@lingui/core/macro'; -import { Anchor, Group } from '@mantine/core'; +import { Anchor, Group, HoverCard, Image } from '@mantine/core'; import { type ReactNode, useMemo } from 'react'; import { ApiImage } from './ApiImage'; @@ -13,7 +13,9 @@ export function Thumbnail({ size = 20, link, text, - align + align, + hover, + hoverSize = 128 }: Readonly<{ src?: string; alt?: string; @@ -21,6 +23,8 @@ export function Thumbnail({ text?: ReactNode; align?: string; link?: string; + hover?: boolean; + hoverSize?: number; }>) { const backup_image = '/static/img/blank_image.png'; @@ -37,16 +41,35 @@ export function Thumbnail({ }, [link, text]); return ( - - - {inner} - + + + + + {inner} + + + + {alt} + + ); } diff --git a/src/frontend/src/tables/ColumnRenderers.tsx b/src/frontend/src/tables/ColumnRenderers.tsx index 6c15e21b45..d750bb40bf 100644 --- a/src/frontend/src/tables/ColumnRenderers.tsx +++ b/src/frontend/src/tables/ColumnRenderers.tsx @@ -31,6 +31,7 @@ export function PartColumn({ {part?.active == false && ( @@ -55,6 +56,26 @@ export function PartColumn({ ); } +export function CompanyColumn({ + company +}: { + company: any; +}) { + return company ? ( + + + {company.name} + + ) : ( + + ); +} + export function LocationColumn(props: TableColumnProps): TableColumn { return { accessor: 'location', diff --git a/src/frontend/src/tables/company/CompanyTable.tsx b/src/frontend/src/tables/company/CompanyTable.tsx index 2c56c44943..cd49026c58 100644 --- a/src/frontend/src/tables/company/CompanyTable.tsx +++ b/src/frontend/src/tables/company/CompanyTable.tsx @@ -1,5 +1,4 @@ import { t } from '@lingui/core/macro'; -import { Group, Text } from '@mantine/core'; import { useCallback, useMemo, useState } from 'react'; import { useNavigate } from 'react-router-dom'; @@ -10,7 +9,6 @@ import { apiUrl } from '@lib/functions/Api'; import { navigateToLink } from '@lib/functions/Navigation'; import type { TableFilter } from '@lib/types/Filters'; import { AddItemButton } from '../../components/buttons/AddItemButton'; -import { Thumbnail } from '../../components/images/Thumbnail'; import { companyFields } from '../../forms/CompanyForms'; import { useCreateApiFormModal, @@ -18,7 +16,11 @@ import { } from '../../hooks/UseForm'; import { useTable } from '../../hooks/UseTable'; import { useUserState } from '../../states/UserState'; -import { BooleanColumn, DescriptionColumn } from '../ColumnRenderers'; +import { + BooleanColumn, + CompanyColumn, + DescriptionColumn +} from '../ColumnRenderers'; import { InvenTreeTable } from '../InvenTreeTable'; import { type RowAction, RowEditAction } from '../RowActions'; @@ -45,16 +47,7 @@ export function CompanyTable({ sortable: true, switchable: false, render: (record: any) => { - return ( - - - {record.name} - - ); + return ; } }, DescriptionColumn({}), diff --git a/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx b/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx index 0c4dd73735..89bd8e0c37 100644 --- a/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx +++ b/src/frontend/src/tables/purchasing/ManufacturerPartTable.tsx @@ -6,7 +6,6 @@ import { ModelType } from '@lib/enums/ModelType'; import { UserRoles } from '@lib/enums/Roles'; import { apiUrl } from '@lib/functions/Api'; import { AddItemButton } from '../../components/buttons/AddItemButton'; -import { Thumbnail } from '../../components/images/Thumbnail'; import { useManufacturerPartFields } from '../../forms/CompanyForms'; import { useCreateApiFormModal, @@ -16,7 +15,12 @@ import { import { useTable } from '../../hooks/UseTable'; import { useUserState } from '../../states/UserState'; import type { TableColumn } from '../Column'; -import { DescriptionColumn, LinkColumn, PartColumn } from '../ColumnRenderers'; +import { + CompanyColumn, + DescriptionColumn, + LinkColumn, + PartColumn +} from '../ColumnRenderers'; import { InvenTreeTable } from '../InvenTreeTable'; import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions'; @@ -42,16 +46,9 @@ export function ManufacturerPartTable({ { accessor: 'manufacturer', sortable: true, - render: (record: any) => { - const manufacturer = record?.manufacturer_detail ?? {}; - - return ( - - ); - } + render: (record: any) => ( + + ) }, { accessor: 'MPN', diff --git a/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx b/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx index 7f7a071c10..a86399efd4 100644 --- a/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx +++ b/src/frontend/src/tables/purchasing/PurchaseOrderTable.tsx @@ -7,13 +7,13 @@ import { UserRoles } from '@lib/enums/Roles'; import { apiUrl } from '@lib/functions/Api'; import type { TableFilter } from '@lib/types/Filters'; import { AddItemButton } from '../../components/buttons/AddItemButton'; -import { Thumbnail } from '../../components/images/Thumbnail'; import { formatCurrency } from '../../defaults/formatters'; import { usePurchaseOrderFields } from '../../forms/PurchaseOrderForms'; import { useCreateApiFormModal } from '../../hooks/UseForm'; import { useTable } from '../../hooks/UseTable'; import { useUserState } from '../../states/UserState'; import { + CompanyColumn, CompletionDateColumn, CreatedByColumn, CreationDateColumn, @@ -106,17 +106,9 @@ export function PurchaseOrderTable({ accessor: 'supplier__name', title: t`Supplier`, sortable: true, - render: (record: any) => { - const supplier = record.supplier_detail ?? {}; - - return ( - - ); - } + render: (record: any) => ( + + ) }, { accessor: 'supplier_reference' diff --git a/src/frontend/src/tables/purchasing/SupplierPartTable.tsx b/src/frontend/src/tables/purchasing/SupplierPartTable.tsx index cd3d56b95f..305c45a99c 100644 --- a/src/frontend/src/tables/purchasing/SupplierPartTable.tsx +++ b/src/frontend/src/tables/purchasing/SupplierPartTable.tsx @@ -8,7 +8,6 @@ import { UserRoles } from '@lib/enums/Roles'; import { apiUrl } from '@lib/functions/Api'; import type { TableFilter } from '@lib/types/Filters'; import { AddItemButton } from '../../components/buttons/AddItemButton'; -import { Thumbnail } from '../../components/images/Thumbnail'; import { useSupplierPartFields } from '../../forms/CompanyForms'; import { useCreateApiFormModal, @@ -20,6 +19,7 @@ import { useUserState } from '../../states/UserState'; import type { TableColumn } from '../Column'; import { BooleanColumn, + CompanyColumn, DescriptionColumn, LinkColumn, NoteColumn, @@ -53,18 +53,9 @@ export function SupplierPartTable({ { accessor: 'supplier', sortable: true, - render: (record: any) => { - const supplier = record?.supplier_detail ?? {}; - - return supplier?.pk ? ( - - ) : ( - '-' - ); - } + render: (record: any) => ( + + ) }, { accessor: 'SKU', @@ -76,18 +67,9 @@ export function SupplierPartTable({ accessor: 'manufacturer', title: t`Manufacturer`, sortable: true, - render: (record: any) => { - const manufacturer = record?.manufacturer_detail ?? {}; - - return manufacturer?.pk ? ( - - ) : ( - '-' - ); - } + render: (record: any) => ( + + ) }, { accessor: 'MPN', diff --git a/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx b/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx index 42f3616a4a..47e3984428 100644 --- a/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx +++ b/src/frontend/src/tables/purchasing/SupplierPriceBreakTable.tsx @@ -9,7 +9,6 @@ import { apiUrl } from '@lib/functions/Api'; import { getDetailUrl } from '@lib/functions/Navigation'; import type { ApiFormFieldSet } from '@lib/types/Forms'; import { AddItemButton } from '../../components/buttons/AddItemButton'; -import { Thumbnail } from '../../components/images/Thumbnail'; import { formatCurrency } from '../../defaults/formatters'; import { useCreateApiFormModal, @@ -19,6 +18,7 @@ import { import { useTable } from '../../hooks/UseTable'; import { useUserState } from '../../states/UserState'; import type { TableColumn } from '../Column'; +import { CompanyColumn } from '../ColumnRenderers'; import { InvenTreeTable } from '../InvenTreeTable'; import { type RowAction, RowDeleteAction, RowEditAction } from '../RowActions'; @@ -36,21 +36,9 @@ export function SupplierPriceBreakColumns(): TableColumn[] { title: t`Supplier`, sortable: true, switchable: true, - render: (record: any) => { - return ( - - - {record.supplier_detail?.name} - - ); - } + render: (record: any) => ( + + ) }, { accessor: 'part_detail.SKU', diff --git a/src/frontend/src/tables/sales/ReturnOrderTable.tsx b/src/frontend/src/tables/sales/ReturnOrderTable.tsx index 463ce53985..244fd1b2a5 100644 --- a/src/frontend/src/tables/sales/ReturnOrderTable.tsx +++ b/src/frontend/src/tables/sales/ReturnOrderTable.tsx @@ -7,13 +7,13 @@ import { UserRoles } from '@lib/enums/Roles'; import { apiUrl } from '@lib/functions/Api'; import type { TableFilter } from '@lib/types/Filters'; import { AddItemButton } from '../../components/buttons/AddItemButton'; -import { Thumbnail } from '../../components/images/Thumbnail'; import { formatCurrency } from '../../defaults/formatters'; import { useReturnOrderFields } from '../../forms/ReturnOrderForms'; import { useCreateApiFormModal } from '../../hooks/UseForm'; import { useTable } from '../../hooks/UseTable'; import { useUserState } from '../../states/UserState'; import { + CompanyColumn, CompletionDateColumn, CreatedByColumn, CreationDateColumn, @@ -111,17 +111,9 @@ export function ReturnOrderTable({ accessor: 'customer__name', title: t`Customer`, sortable: true, - render: (record: any) => { - const customer = record.customer_detail ?? {}; - - return ( - - ); - } + render: (record: any) => ( + + ) }, { accessor: 'customer_reference' diff --git a/src/frontend/src/tables/sales/SalesOrderTable.tsx b/src/frontend/src/tables/sales/SalesOrderTable.tsx index 6355462605..073664a8e9 100644 --- a/src/frontend/src/tables/sales/SalesOrderTable.tsx +++ b/src/frontend/src/tables/sales/SalesOrderTable.tsx @@ -7,7 +7,6 @@ import { UserRoles } from '@lib/enums/Roles'; import { apiUrl } from '@lib/functions/Api'; import type { TableFilter } from '@lib/types/Filters'; import { AddItemButton } from '../../components/buttons/AddItemButton'; -import { Thumbnail } from '../../components/images/Thumbnail'; import { ProgressBar } from '../../components/items/ProgressBar'; import { formatCurrency } from '../../defaults/formatters'; import { useSalesOrderFields } from '../../forms/SalesOrderForms'; @@ -15,6 +14,7 @@ import { useCreateApiFormModal } from '../../hooks/UseForm'; import { useTable } from '../../hooks/UseTable'; import { useUserState } from '../../states/UserState'; import { + CompanyColumn, CreatedByColumn, CreationDateColumn, DescriptionColumn, @@ -136,17 +136,9 @@ export function SalesOrderTable({ accessor: 'customer__name', title: t`Customer`, sortable: true, - render: (record: any) => { - const customer = record.customer_detail ?? {}; - - return ( - - ); - } + render: (record: any) => ( + + ) }, { accessor: 'customer_reference',