mirror of
https://github.com/inventree/InvenTree.git
synced 2025-07-13 08:21:26 +00:00
[WIP] Mantine datatables (#5218)
* Create dependency-review.yml * Create scan.yml * Create sonar-project.properties * add option to use sections and refactro * translate error messages * remove unneeded vars * move function code * move data inside * add global section * add plugin section * use translated section titles * add translation strings * rename scan action * add user settings * use ordered data * fix settings url * use debounced value for strings (not choices!) * rename contex to context * move i18n provider up * move theme options into seperate context/ component * renmae statrtup vars * move translations out * reactivate sentry * move i18n provider to seperate context * move langauge state completly out of App * use theme out * move theme context * move LanguageContext * move function into state * make sentry optional for now * add key to accordion * init langauge context on top * remove unneeded css files * move errorpage to tsx * add translation for error page * Add error to title * add typecast for error * move type definition out * remove todo -> type was already added * upgrade deps * add bootstrap * remove @mantine/core * readd core * switch to bootstrap * simplify import * Add SPA views for react #2789 * split up frontend urls * Add settings for frontend url loading * add new UI scaffold * remove tracking insert * add platform app * ensure static indexes work too * add lingui * add lingui config * add mgmt tasks * add base locales * settings for frontend dev * fix typo * update deps * add pre-commit * add eslint * add testing scaffold * fix paths * remove error - tests trip correctly * merge workflow * cleanup samples * use name inline with other tests * Add real worl frontend tests * setup env * tun migrations first * optimize setup time * setup demo dataset * optimize run setup * add test for class ui * rename * fix typo * and another typo * do install * run migrations first * fix name * cleanup * use other credentials * use other credentials * fix qc * move envs to qc * remove create_site * reduce testing env * fix test * fix test call * allaccess user * add ui plattform check * add better check * remove unneeded env * enable debug * reduce wait time * also build frontend on static * add sekeleton * fix various issues * add locales * clean output before building * cleanup dir * remove bootstrap * clean up deps * fix settings panel * remove assets * move logo * split out router * split up chunks * fix zustand import syntax * bundl * update pre-render * use vendor splitting * maximes space usage * enlarge breakpoints * remove wired color changes * cleanup tabs * fix error * update auth functions * default to mail login * add placeholder marking * Add text to placeholder * readd codespell * add another test * add sort plugin * add sort plugin * sort imports * fix order * Add mega menu * run pre-commit fixes * add node min version * Docker container (#129) * Fix allocation check for completing build order (#5199) - Allocation check only applies to untracked line items * docker dev Install required node packages to docker development image * add import order settings * cleanout built ui * Add "parttable" component * Add task to serve front-end code dev * remove default arg from build * remove eslint * optimize svg * Adds generic function for rendering a table with server-side data * Implement pagination and sorting * Add more example columns * Enable selection of table data rows * add build step for plattform UI * fix install command * optional parameters * Add simple stock table * Add optional parameter for default sort * Change "no records" text based on query result * Translate * Start writing some helper functions * Add thumbnail component * Fill out more columns for stock table * Add simple skeleton for table search input * Adjust default table properties * Change loader variant * Drop-down for selecting table columns * Add search text callback * use alpine commands * do not use cache when creating image * More updates for inventree table - Fix search text entry - Add "refresh" button - Adjust variable names * Search input improvements - Add button to clear search input * Enable mantine notification system * Add "not yet implemented" notification message * Add download action button * Adds ButtonMenu component - Button which expands to show other actions - Add hooks for adding action menus to tables * Add basic build order list table * Add custom filters button for table * Allow columns to be toggled * Column visibility saved across table loads * Adds display for table filters - Define interface for table filter definition - Add component for displaying filters - Cleanup for part table * Cleanup * Define type for controlling column data * Allow custom ordering term for table column - Replaces "sortName" concept from bootstrap-table * Improve build order table - Fancy progress bars * Reimplement invoke task to serve frontend files via yarn * Update package files with mantine * Implement callback when record selection is changed * Adds generic "actionbutton" component * Remove duplicate form components * Remove tracked files in web/static * Remove a bunch of files - tracked in from the wrong original branch * More page fixes * Revert changes to reqiurements-dev.txt * Spelling fix * Component updates * Cleanup components * Cleanup * Use spread operator * Add some new dummy pages for testing * Cleanup / simplify stockitem table * Cleanup for part table * Cleanup build order table * Cleanup column toggle function * Remove hard-coded URL * Format updates * Update deps * npm required for inventree-python checks * Fix search input - Better debouncing - Cleaner code * Update package files * vite polling fixes * Implementation for download button - Dropdown menu with file format options * Implement callback for download of table data * Better state management for hidden columns * Implement state framework for active custom filters * Silence some errors * Revert change to vite config * Implement collapsible filter list group - Save active filters to local storage - Add some example filters to the part table - Add FilterBadge component * Fix page names * Simplify search input - useDebouncedValue * linting * Refactor * Remove debug msg * Simplify search state * Refactor function for constructing API query * Add tooltip * Update icons * Add modal for selecting filter options * Add more table filters for part table * render custom item for filter select * Complete implementation for selectable filters - Allow choices to be specified as attribute - Allow choices to be specified as function - Handle state management for filter choice form * Tweak badge * Cleanup top-level yarn and npm files * Less roundy --------- Co-authored-by: Matthias Mair <code@mjmair.com>
This commit is contained in:
Oliver
GitHub
210
src/frontend/src/components/tables/part/PartTable.tsx
Normal file
210
src/frontend/src/components/tables/part/PartTable.tsx
Normal file
@ -0,0 +1,210 @@
|
||||
import { t } from '@lingui/macro';
|
||||
import { Text } from '@mantine/core';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { notYetImplemented } from '../../../functions/notifications';
|
||||
import { shortenString } from '../../../functions/tables';
|
||||
import { ThumbnailHoverCard } from '../../items/Thumbnail';
|
||||
import { TableColumn } from '../Column';
|
||||
import { TableFilter } from '../Filter';
|
||||
import { InvenTreeTable } from '../InvenTreeTable';
|
||||
|
||||
/**
|
||||
* Construct a list of columns for the part table
|
||||
*/
|
||||
function partTableColumns(): TableColumn[] {
|
||||
return [
|
||||
{
|
||||
accessor: 'name',
|
||||
sortable: true,
|
||||
title: t`Part`,
|
||||
render: function (record: any) {
|
||||
// TODO - Link to the part detail page
|
||||
return (
|
||||
<ThumbnailHoverCard
|
||||
src={record.thumbnail || record.image}
|
||||
text={record.name}
|
||||
link=""
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
accessor: 'IPN',
|
||||
title: t`IPN`,
|
||||
sortable: true,
|
||||
switchable: true
|
||||
},
|
||||
{
|
||||
accessor: 'units',
|
||||
sortable: true,
|
||||
title: t`Units`,
|
||||
switchable: true
|
||||
},
|
||||
{
|
||||
accessor: 'description',
|
||||
title: t`Description`,
|
||||
sortable: true,
|
||||
switchable: true
|
||||
},
|
||||
{
|
||||
accessor: 'category',
|
||||
title: t`Category`,
|
||||
sortable: true,
|
||||
render: function (record: any) {
|
||||
// TODO: Link to the category detail page
|
||||
return shortenString({
|
||||
str: record.category_detail.pathstring
|
||||
});
|
||||
}
|
||||
},
|
||||
{
|
||||
accessor: 'total_in_stock',
|
||||
title: t`Stock`,
|
||||
sortable: true,
|
||||
switchable: true
|
||||
},
|
||||
{
|
||||
accessor: 'price_range',
|
||||
title: t`Price Range`,
|
||||
sortable: false,
|
||||
switchable: true,
|
||||
render: function (record: any) {
|
||||
// TODO: Render price range
|
||||
return '-- price --';
|
||||
}
|
||||
},
|
||||
{
|
||||
accessor: 'link',
|
||||
title: t`Link`,
|
||||
switchable: true
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Construct a set of filters for the part table
|
||||
*/
|
||||
function partTableFilters(): TableFilter[] {
|
||||
return [
|
||||
{
|
||||
name: 'active',
|
||||
label: t`Active`,
|
||||
description: t`Filter by part active status`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'assembly',
|
||||
label: t`Assembly`,
|
||||
description: t`Filter by assembly attribute`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'cascade',
|
||||
label: t`Include Subcategories`,
|
||||
description: t`Include parts in subcategories`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'component',
|
||||
label: t`Component`,
|
||||
description: t`Filter by component attribute`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'trackable',
|
||||
label: t`Trackable`,
|
||||
description: t`Filter by trackable attribute`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'has_units',
|
||||
label: t`Has Units`,
|
||||
description: t`Filter by parts which have units`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'has_ipn',
|
||||
label: t`Has IPN`,
|
||||
description: t`Filter by parts which have an internal part number`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'has_stock',
|
||||
label: t`Has Stock`,
|
||||
description: t`Filter by parts which have stock`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'low_stock',
|
||||
label: t`Low Stock`,
|
||||
description: t`Filter by parts which have low stock`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'purchaseable',
|
||||
label: t`Purchaseable`,
|
||||
description: t`Filter by parts which are purchaseable`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'salable',
|
||||
label: t`Salable`,
|
||||
description: t`Filter by parts which are salable`,
|
||||
type: 'boolean'
|
||||
},
|
||||
{
|
||||
name: 'virtual',
|
||||
label: t`Virtual`,
|
||||
description: t`Filter by parts which are virtual`,
|
||||
type: 'choice',
|
||||
choices: [
|
||||
{ value: 'true', label: t`Virtual` },
|
||||
{ value: 'false', label: t`Not Virtual` }
|
||||
]
|
||||
}
|
||||
// unallocated_stock
|
||||
// starred
|
||||
// stocktake
|
||||
// is_template
|
||||
// virtual
|
||||
// has_pricing
|
||||
// TODO: Any others from table_filters.js?
|
||||
];
|
||||
}
|
||||
|
||||
function partTableParams(params: any): any {
|
||||
return {
|
||||
...params,
|
||||
category_detail: true
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* PartListTable - Displays a list of parts, based on the provided parameters
|
||||
* @param {Object} params - The query parameters to pass to the API
|
||||
* @returns
|
||||
*/
|
||||
export function PartListTable({ params = {} }: { params?: any }) {
|
||||
let tableParams = useMemo(() => partTableParams(params), []);
|
||||
let tableColumns = useMemo(() => partTableColumns(), []);
|
||||
let tableFilters = useMemo(() => partTableFilters(), []);
|
||||
|
||||
// Add required query parameters
|
||||
tableParams.category_detail = true;
|
||||
|
||||
return (
|
||||
<InvenTreeTable
|
||||
url="part/"
|
||||
enableDownload
|
||||
tableKey="part-table"
|
||||
printingActions={[
|
||||
<Text onClick={notYetImplemented}>Hello</Text>,
|
||||
<Text onClick={notYetImplemented}>World</Text>
|
||||
]}
|
||||
params={tableParams}
|
||||
columns={tableColumns}
|
||||
customFilters={tableFilters}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user