tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Client Table update

Browse Source 
* Columns are now specified using the ant design columns property instead of being Table.Column components. This should make this WoW a bit more sense, we're not pretending to be components anymore. column.tsx now only returns objects, not nodes.
* Added filament/spool collapsing as a useTable queryOptions so that the output object is directly the one we want, which will make the types play better together.
* Added a more unified record action system. This enables us to add actions to column rightclick/long press, which is better UX for mobile devices.
* Actions column is now hidden on smaller screens thanks to the above bullet.
This commit is contained in:
Donkie
2023-10-29 20:37:58 +01:00
parent e31aeebe97
commit 151c3c7f4f
5 changed files with 589 additions and 432 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
client/src/components/column.tsx
View File

@@ -1,6 +1,5 @@
import { Col, Row, Spin, Table } from "antd"; import { Button, Col, Dropdown, Row, Space, Spin } from "antd";
import { ColumnProps as AntdColumnProps } from "antd/es/table"; import { ColumnFilterItem, ColumnType } from "antd/es/table/interface";
import { ColumnFilterItem } from "antd/es/table/interface";
import { getFiltersForField, typeFilters } from "../utils/filtering"; import { getFiltersForField, typeFilters } from "../utils/filtering";
import { TableState } from "../utils/saveload"; import { TableState } from "../utils/saveload";
import { getSortOrderForField, typeSorters } from "../utils/sorting"; import { getSortOrderForField, typeSorters } from "../utils/sorting";
@@ -13,6 +12,7 @@ import SpoolIcon from "../icon_spool.svg?react";
import { useTranslate } from "@refinedev/core"; import { useTranslate } from "@refinedev/core";
import { enrichText } from "../utils/parsing"; import { enrichText } from "../utils/parsing";
import { UseQueryResult } from "@tanstack/react-query"; import { UseQueryResult } from "@tanstack/react-query";
import { Link, useNavigate } from "react-router-dom";
dayjs.extend(utc); dayjs.extend(utc);
@@ -27,7 +27,18 @@ const FilterDropdownLoading = () => {
); );
}; };
interface BaseColumnProps<Obj> { interface Entity {
id: number;
}
export interface Action {
name: string;
icon: React.ReactNode;
link?: string;
onClick?: () => void;
}
interface BaseColumnProps<Obj extends Entity> {
id: keyof Obj & string; id: keyof Obj & string;
dataId?: keyof Obj & string; dataId?: keyof Obj & string;
i18ncat?: string; i18ncat?: string;
@@ -35,6 +46,7 @@ interface BaseColumnProps<Obj> {
dataSource: Obj[]; dataSource: Obj[];
tableState: TableState; tableState: TableState;
width?: number; width?: number;
actions?: (record: Obj) => Action[];
} }
interface FilteredColumnProps { interface FilteredColumnProps {
@@ -55,22 +67,28 @@ interface CustomColumnProps<Obj> {
) => React.HTMLAttributes<any> | React.TdHTMLAttributes<any>; ) => React.HTMLAttributes<any> | React.TdHTMLAttributes<any>;
} }
function Column<Obj>(props: BaseColumnProps<Obj> & FilteredColumnProps & CustomColumnProps<Obj>) { function Column<Obj extends Entity>(
props: BaseColumnProps<Obj> & FilteredColumnProps & CustomColumnProps<Obj>
): ColumnType<Obj> | undefined {
const t = useTranslate(); const t = useTranslate();
const navigate = useNavigate();
// Hide if not in showColumns
if (props.tableState.showColumns && !props.tableState.showColumns.includes(props.id)) { if (props.tableState.showColumns && !props.tableState.showColumns.includes(props.id)) {
return <></>; return undefined;
} }
const typedSorters = typeSorters<Obj>(props.tableState.sorters);
const columnProps: AntdColumnProps<Obj> = { const columnProps: ColumnType<Obj> = {
dataIndex: props.id, dataIndex: props.id,
title: t(props.i18nkey ?? `${props.i18ncat}.fields.${props.id}`), title: t(props.i18nkey ?? `${props.i18ncat}.fields.${props.id}`),
sorter: true, sorter: true,
sortOrder: getSortOrderForField(typedSorters, props.dataId ?? props.id), sortOrder: getSortOrderForField(typeSorters<Obj>(props.tableState.sorters), props.dataId ?? props.id),
filterMultiple: props.allowMultipleFilters ?? true, filterMultiple: props.allowMultipleFilters ?? true,
width: props.width ?? undefined,
onCell: props.onCell ?? undefined,
}; };
if (props.width) {
columnProps.width = props.width; // Filter
}
if (props.filters && props.filteredValue) { if (props.filters && props.filteredValue) {
columnProps.filters = props.filters; columnProps.filters = props.filters;
columnProps.filteredValue = props.filteredValue; columnProps.filteredValue = props.filteredValue;
@@ -86,20 +104,50 @@ function Column<Obj>(props: BaseColumnProps<Obj> & FilteredColumnProps & CustomC
columnProps.key = props.dataId; columnProps.key = props.dataId;
} }
} }
if (props.render) {
columnProps.render = props.render; // Render
} const render = props.render ?? ((value) => <>{value}</>);
if (props.onCell) { columnProps.render = (value, record, index) => {
columnProps.onCell = props.onCell; if (!props.actions) {
} return render(value, record, index);
return <Table.Column<Obj> {...columnProps} />;
} }
export function SortedColumn<Obj>(props: BaseColumnProps<Obj>) { const actions = props.actions(record);
return (
<Dropdown
menu={{
items: actions.map((action) => ({
key: action.name,
label: action.name,
icon: action.icon,
})),
onClick: (item) => {
const action = actions.find((action) => action.name === item.key);
if (action) {
if (action.link) {
navigate(action.link);
} else if (action.onClick) {
action.onClick();
}
}
},
}}
trigger={["contextMenu"]}
>
<div>{render(value, record, index)}</div>
</Dropdown>
);
};
return columnProps;
}
export function SortedColumn<Obj extends Entity>(props: BaseColumnProps<Obj>) {
return Column(props); return Column(props);
} }
export function RichColumn<Obj>(props: BaseColumnProps<Obj>) { export function RichColumn<Obj extends Entity>(props: BaseColumnProps<Obj>) {
return Column({ return Column({
...props, ...props,
render: (value: string | undefined) => { render: (value: string | undefined) => {
@@ -108,12 +156,12 @@ export function RichColumn<Obj>(props: BaseColumnProps<Obj>) {
}); });
} }
interface FilteredQueryColumnProps<Obj> extends BaseColumnProps<Obj> { interface FilteredQueryColumnProps<Obj extends Entity> extends BaseColumnProps<Obj> {
filterValueQuery: UseQueryResult<string[] | ColumnFilterItem[]>; filterValueQuery: UseQueryResult<string[] | ColumnFilterItem[]>;
allowMultipleFilters?: boolean; allowMultipleFilters?: boolean;
} }
export function FilteredQueryColumn<Obj>(props: FilteredQueryColumnProps<Obj>) { export function FilteredQueryColumn<Obj extends Entity>(props: FilteredQueryColumnProps<Obj>) {
const query = props.filterValueQuery; const query = props.filterValueQuery;
let filters: ColumnFilterItem[] = []; let filters: ColumnFilterItem[] = [];
@@ -143,13 +191,13 @@ export function FilteredQueryColumn<Obj>(props: FilteredQueryColumnProps<Obj>) {
return Column({ ...props, filters, filteredValue, onFilterDropdownOpen, loadingFilters: query.isLoading }); return Column({ ...props, filters, filteredValue, onFilterDropdownOpen, loadingFilters: query.isLoading });
} }
interface NumberColumnProps<Obj> extends BaseColumnProps<Obj> { interface NumberColumnProps<Obj extends Entity> extends BaseColumnProps<Obj> {
unit: string; unit: string;
decimals?: number; decimals?: number;
defaultText?: string; defaultText?: string;
} }
export function NumberColumn<Obj>(props: NumberColumnProps<Obj>) { export function NumberColumn<Obj extends Entity>(props: NumberColumnProps<Obj>) {
return Column({ return Column({
...props, ...props,
render: (value) => { render: (value) => {
@@ -170,7 +218,7 @@ export function NumberColumn<Obj>(props: NumberColumnProps<Obj>) {
}); });
} }
export function DateColumn<Obj>(props: BaseColumnProps<Obj>) { export function DateColumn<Obj extends Entity>(props: BaseColumnProps<Obj>) {
return Column({ return Column({
...props, ...props,
render: (value) => { render: (value) => {
@@ -186,11 +234,43 @@ export function DateColumn<Obj>(props: BaseColumnProps<Obj>) {
}); });
} }
interface SpoolIconColumnProps<Obj> extends FilteredQueryColumnProps<Obj> { export function ActionsColumn<Obj extends Entity>(actionsFn: (record: Obj) => Action[]): ColumnType<Obj> | undefined {
const t = useTranslate();
return {
title: t("table.actions"),
responsive: ["lg"],
render: (_, record) => {
const buttons = actionsFn(record).map((action) => {
if (action.link) {
return (
<Link key={action.name} to={action.link}>
<Button icon={action.icon} title={action.name} size="small" />
</Link>
);
} else if (action.onClick) {
return (
<Button
key={action.name}
icon={action.icon}
title={action.name}
size="small"
onClick={() => action.onClick!()}
/>
);
}
});
return <Space>{buttons}</Space>;
},
};
}
interface SpoolIconColumnProps<Obj extends Entity> extends FilteredQueryColumnProps<Obj> {
color: (record: Obj) => string | undefined; color: (record: Obj) => string | undefined;
} }
export function SpoolIconColumn<Obj>(props: SpoolIconColumnProps<Obj>) { export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<Obj>) {
const query = props.filterValueQuery; const query = props.filterValueQuery;
let filters: ColumnFilterItem[] = []; let filters: ColumnFilterItem[] = [];

162
client/src/pages/filaments/list.tsx
View File

@@ -1,11 +1,11 @@
import React from "react"; import React from "react";
import { IResourceComponentsProps, BaseRecord, useTranslate, useInvalidate } from "@refinedev/core"; import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation } from "@refinedev/core";
import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd"; import { useTable, List } from "@refinedev/antd";
import { Table, Space, Button, Dropdown } from "antd"; import { Table, Button, Dropdown } from "antd";
import dayjs from "dayjs"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc"; import utc from "dayjs/plugin/utc";
import { IFilament } from "./model"; import { IFilament } from "./model";
import { EditOutlined, FilterOutlined } from "@ant-design/icons"; import { EditOutlined, EyeOutlined, FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload"; import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
import { import {
DateColumn, DateColumn,
@@ -14,6 +14,7 @@ import {
RichColumn, RichColumn,
SortedColumn, SortedColumn,
SpoolIconColumn, SpoolIconColumn,
ActionsColumn,
} from "../../components/column"; } from "../../components/column";
import { import {
useSpoolmanArticleNumbers, useSpoolmanArticleNumbers,
@@ -22,6 +23,7 @@ import {
useSpoolmanVendors, useSpoolmanVendors,
} from "../../components/otherModels"; } from "../../components/otherModels";
import { useLiveify } from "../../components/liveify"; import { useLiveify } from "../../components/liveify";
import { removeUndefined } from "../../utils/filtering";
dayjs.extend(utc); dayjs.extend(utc);
@@ -46,6 +48,26 @@ function translateColumnI18nKey(columnName: string): string {
const namespace = "filamentList-v2"; const namespace = "filamentList-v2";
const allColumns: (keyof IFilamentCollapsed & string)[] = [
"id",
"vendor.name",
"name",
"material",
"price",
"density",
"diameter",
"weight",
"spool_weight",
"article_number",
"settings_extruder_temp",
"settings_bed_temp",
"registered",
"comment",
];
const defaultColumns = allColumns.filter(
(column_id) => ["registered", "density", "diameter", "spool_weight"].indexOf(column_id) === -1
);
export const FilamentList: React.FC<IResourceComponentsProps> = () => { export const FilamentList: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate(); const t = useTranslate();
const invalidate = useInvalidate(); const invalidate = useInvalidate();
@@ -57,7 +79,8 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
// To provide the live updates, we use a custom solution (useLiveify) instead of the built-in refine "liveMode" feature. // To provide the live updates, we use a custom solution (useLiveify) instead of the built-in refine "liveMode" feature.
// This is because the built-in feature does not call the liveProvider subscriber with a list of IDs, but instead // This is because the built-in feature does not call the liveProvider subscriber with a list of IDs, but instead
// calls it with a list of filters, sorters, etc. This means the server-side has to support this, which is quite hard. // calls it with a list of filters, sorters, etc. This means the server-side has to support this, which is quite hard.
const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<IFilament>({ const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } =
useTable<IFilamentCollapsed>({
syncWithLocation: false, syncWithLocation: false,
pagination: { pagination: {
mode: "server", mode: "server",
@@ -82,29 +105,17 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
}); });
} }
}, },
queryOptions: {
select(data) {
return {
total: data.total,
data: data.data.map(collapseFilament),
};
},
},
}); });
// Create state for the columns to show // Create state for the columns to show
const allColumns: (keyof IFilamentCollapsed & string)[] = [
"id",
"vendor.name",
"name",
"material",
"price",
"density",
"diameter",
"weight",
"spool_weight",
"article_number",
"settings_extruder_temp",
"settings_bed_temp",
"registered",
"comment",
];
const defaultColumns = allColumns.filter(
(column_id) => ["registered", "density", "diameter", "spool_weight"].indexOf(column_id) === -1
);
const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? defaultColumns); const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? defaultColumns);
// Store state in local storage // Store state in local storage
@@ -116,9 +127,9 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
}; };
useStoreInitialState(namespace, tableState); useStoreInitialState(namespace, tableState);
// Collapse the dataSource to a mutable list and add a filament_name field // Collapse the dataSource to a mutable list
const queryDataSource: IFilamentCollapsed[] = React.useMemo( const queryDataSource: IFilamentCollapsed[] = React.useMemo(
() => (tableProps.dataSource ?? []).map(collapseFilament), () => (tableProps.dataSource || []).map((record) => ({ ...record })),
[tableProps.dataSource] [tableProps.dataSource]
); );
const dataSource = useLiveify("filament", queryDataSource, collapseFilament); const dataSource = useLiveify("filament", queryDataSource, collapseFilament);
@@ -127,6 +138,13 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
tableProps.pagination.showSizeChanger = true; tableProps.pagination.showSizeChanger = true;
} }
const { editUrl, showUrl, cloneUrl } = useNavigation();
const actions = (record: IFilamentCollapsed) => [
{ name: t("buttons.edit"), icon: <EditOutlined />, link: editUrl("filament", record.id) },
{ name: t("buttons.show"), icon: <EyeOutlined />, link: showUrl("filament", record.id) },
{ name: t("buttons.clone"), icon: <PlusSquareOutlined />, link: cloneUrl("filament", record.id) },
];
return ( return (
<List <List
headerButtons={({ defaultButtons }) => ( headerButtons={({ defaultButtons }) => (
@@ -168,130 +186,142 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
</> </>
)} )}
> >
<Table {...tableProps} sticky scroll={{ x: "max-content" }} dataSource={dataSource} rowKey="id"> <Table<IFilamentCollapsed>
{SortedColumn({ {...tableProps}
sticky
scroll={{ x: "max-content" }}
dataSource={dataSource}
rowKey="id"
columns={removeUndefined([
SortedColumn({
id: "id", id: "id",
i18ncat: "filament", i18ncat: "filament",
actions,
dataSource, dataSource,
tableState, tableState,
width: 70, width: 70,
})} }),
{FilteredQueryColumn({ FilteredQueryColumn({
id: "vendor.name", id: "vendor.name",
i18nkey: "filament.fields.vendor_name", i18nkey: "filament.fields.vendor_name",
actions,
dataSource, dataSource,
tableState, tableState,
filterValueQuery: useSpoolmanVendors(), filterValueQuery: useSpoolmanVendors(),
})} }),
{SpoolIconColumn({ SpoolIconColumn({
id: "name", id: "name",
i18ncat: "filament", i18ncat: "filament",
color: (record: IFilamentCollapsed) => record.color_hex, color: (record: IFilamentCollapsed) => record.color_hex,
actions,
dataSource, dataSource,
tableState, tableState,
filterValueQuery: useSpoolmanFilamentNames(), filterValueQuery: useSpoolmanFilamentNames(),
})} }),
{FilteredQueryColumn({ FilteredQueryColumn({
id: "material", id: "material",
i18ncat: "filament", i18ncat: "filament",
actions,
dataSource, dataSource,
tableState, tableState,
filterValueQuery: useSpoolmanMaterials(), filterValueQuery: useSpoolmanMaterials(),
width: 110, width: 110,
})} }),
{SortedColumn({ SortedColumn({
id: "price", id: "price",
i18ncat: "filament", i18ncat: "filament",
actions,
dataSource, dataSource,
tableState, tableState,
width: 80, width: 80,
})} }),
{NumberColumn({ NumberColumn({
id: "density", id: "density",
i18ncat: "filament", i18ncat: "filament",
unit: "g/cm³", unit: "g/cm³",
decimals: 2, decimals: 2,
actions,
dataSource, dataSource,
tableState, tableState,
width: 100, width: 100,
})} }),
{NumberColumn({ NumberColumn({
id: "diameter", id: "diameter",
i18ncat: "filament", i18ncat: "filament",
unit: "mm", unit: "mm",
decimals: 2, decimals: 2,
actions,
dataSource, dataSource,
tableState, tableState,
width: 100, width: 100,
})} }),
{NumberColumn({ NumberColumn({
id: "weight", id: "weight",
i18ncat: "filament", i18ncat: "filament",
unit: "g", unit: "g",
decimals: 1, decimals: 1,
actions,
dataSource, dataSource,
tableState, tableState,
width: 100, width: 100,
})} }),
{NumberColumn({ NumberColumn({
id: "spool_weight", id: "spool_weight",
i18ncat: "filament", i18ncat: "filament",
unit: "g", unit: "g",
decimals: 1, decimals: 1,
actions,
dataSource, dataSource,
tableState, tableState,
width: 100, width: 100,
})} }),
{FilteredQueryColumn({ FilteredQueryColumn({
id: "article_number", id: "article_number",
i18ncat: "filament", i18ncat: "filament",
actions,
dataSource, dataSource,
tableState, tableState,
filterValueQuery: useSpoolmanArticleNumbers(), filterValueQuery: useSpoolmanArticleNumbers(),
width: 130, width: 130,
})} }),
{NumberColumn({ NumberColumn({
id: "settings_extruder_temp", id: "settings_extruder_temp",
i18ncat: "filament", i18ncat: "filament",
unit: "°C", unit: "°C",
decimals: 0, decimals: 0,
actions,
dataSource, dataSource,
tableState, tableState,
width: 100, width: 100,
})} }),
{NumberColumn({ NumberColumn({
id: "settings_bed_temp", id: "settings_bed_temp",
i18ncat: "filament", i18ncat: "filament",
unit: "°C", unit: "°C",
decimals: 0, decimals: 0,
actions,
dataSource, dataSource,
tableState, tableState,
width: 100, width: 100,
})} }),
{DateColumn({ DateColumn({
id: "registered", id: "registered",
i18ncat: "filament", i18ncat: "filament",
actions,
dataSource, dataSource,
tableState, tableState,
})} }),
{RichColumn({ RichColumn({
id: "comment", id: "comment",
i18ncat: "filament", i18ncat: "filament",
actions,
dataSource, dataSource,
tableState, tableState,
width: 150, width: 150,
})} }),
<Table.Column ActionsColumn(actions),
title={t("table.actions")} ])}
render={(_, record: BaseRecord) => (
<Space>
<EditButton hideText title={t("buttons.edit")} size="small" recordItemId={record.id} />
<ShowButton hideText title={t("buttons.show")} size="small" recordItemId={record.id} />
<CloneButton hideText title={t("buttons.clone")} size="small" recordItemId={record.id} />
</Space>
)}
/> />
</Table>
</List> </List>
); );
}; };

185
client/src/pages/spools/list.tsx
View File

@@ -1,12 +1,19 @@
import React from "react"; import React from "react";
import { IResourceComponentsProps, useInvalidate, useTranslate } from "@refinedev/core"; import { IResourceComponentsProps, useInvalidate, useNavigation, useTranslate } from "@refinedev/core";
import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd"; import { useTable, List } from "@refinedev/antd";
import { Table, Space, Button, Dropdown, Modal } from "antd"; import { Table, Button, Dropdown, Modal } from "antd";
import dayjs from "dayjs"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc"; import utc from "dayjs/plugin/utc";
import { ISpool } from "./model"; import { ISpool } from "./model";
import { TableState, useInitialTableState, useSavedState, useStoreInitialState } from "../../utils/saveload"; import { TableState, useInitialTableState, useSavedState, useStoreInitialState } from "../../utils/saveload";
import { EditOutlined, FilterOutlined, InboxOutlined, ToTopOutlined } from "@ant-design/icons"; import {
EditOutlined,
EyeOutlined,
FilterOutlined,
InboxOutlined,
PlusSquareOutlined,
ToTopOutlined,
} from "@ant-design/icons";
import { import {
DateColumn, DateColumn,
FilteredQueryColumn, FilteredQueryColumn,
@@ -14,6 +21,8 @@ import {
RichColumn, RichColumn,
SortedColumn, SortedColumn,
SpoolIconColumn, SpoolIconColumn,
Action,
ActionsColumn,
} from "../../components/column"; } from "../../components/column";
import { setSpoolArchived } from "./functions"; import { setSpoolArchived } from "./functions";
import SelectAndPrint from "../../components/selectAndPrintDialog"; import SelectAndPrint from "../../components/selectAndPrintDialog";
@@ -24,6 +33,7 @@ import {
useSpoolmanMaterials, useSpoolmanMaterials,
} from "../../components/otherModels"; } from "../../components/otherModels";
import { useLiveify } from "../../components/liveify"; import { useLiveify } from "../../components/liveify";
import { removeUndefined } from "../../utils/filtering";
dayjs.extend(utc); dayjs.extend(utc);
@@ -59,6 +69,25 @@ function translateColumnI18nKey(columnName: string): string {
const namespace = "spoolList-v2"; const namespace = "spoolList-v2";
const allColumns: (keyof ISpoolCollapsed & string)[] = [
"id",
"combined_name",
"filament.material",
"used_weight",
"remaining_weight",
"used_length",
"remaining_length",
"location",
"lot_nr",
"first_used",
"last_used",
"registered",
"comment",
];
const defaultColumns = allColumns.filter(
(column_id) => ["registered", "used_length", "remaining_length", "lot_nr"].indexOf(column_id) === -1
);
export const SpoolList: React.FC<IResourceComponentsProps> = () => { export const SpoolList: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate(); const t = useTranslate();
const invalidate = useInvalidate(); const invalidate = useInvalidate();
@@ -73,7 +102,8 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
// To provide the live updates, we use a custom solution (useLiveify) instead of the built-in refine "liveMode" feature. // To provide the live updates, we use a custom solution (useLiveify) instead of the built-in refine "liveMode" feature.
// This is because the built-in feature does not call the liveProvider subscriber with a list of IDs, but instead // This is because the built-in feature does not call the liveProvider subscriber with a list of IDs, but instead
// calls it with a list of filters, sorters, etc. This means the server-side has to support this, which is quite hard. // calls it with a list of filters, sorters, etc. This means the server-side has to support this, which is quite hard.
const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<ISpool>({ const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } =
useTable<ISpoolCollapsed>({
meta: { meta: {
queryParams: { queryParams: {
["allow_archived"]: showArchived, ["allow_archived"]: showArchived,
@@ -103,27 +133,17 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
}); });
} }
}, },
queryOptions: {
select(data) {
return {
total: data.total,
data: data.data.map(collapseSpool),
};
},
},
}); });
// Create state for the columns to show // Create state for the columns to show
const allColumns: (keyof ISpoolCollapsed & string)[] = [
"id",
"combined_name",
"filament.material",
"used_weight",
"remaining_weight",
"used_length",
"remaining_length",
"location",
"lot_nr",
"first_used",
"last_used",
"registered",
"comment",
];
const defaultColumns = allColumns.filter(
(column_id) => ["registered", "used_length", "remaining_length", "lot_nr"].indexOf(column_id) === -1
);
const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? defaultColumns); const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? defaultColumns);
// Store state in local storage // Store state in local storage
@@ -135,9 +155,9 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
}; };
useStoreInitialState(namespace, tableState); useStoreInitialState(namespace, tableState);
// Collapse the dataSource to a mutable list and add a filament_name field // Collapse the dataSource to a mutable list
const queryDataSource = React.useMemo( const queryDataSource: ISpoolCollapsed[] = React.useMemo(
() => (tableProps.dataSource ?? []).map(collapseSpool), () => (tableProps.dataSource || []).map((record) => ({ ...record })),
[tableProps.dataSource] [tableProps.dataSource]
); );
const dataSource = useLiveify("spool", queryDataSource, collapseSpool); const dataSource = useLiveify("spool", queryDataSource, collapseSpool);
@@ -174,6 +194,25 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
tableProps.pagination.showSizeChanger = true; tableProps.pagination.showSizeChanger = true;
} }
const { editUrl, showUrl, cloneUrl } = useNavigation();
const actions = (record: ISpoolCollapsed) => {
const actions: Action[] = [
{ name: t("buttons.edit"), icon: <EditOutlined />, link: editUrl("spool", record.id) },
{ name: t("buttons.show"), icon: <EyeOutlined />, link: showUrl("spool", record.id) },
{ name: t("buttons.clone"), icon: <PlusSquareOutlined />, link: cloneUrl("spool", record.id) },
];
if (record.archived) {
actions.push({
name: t("buttons.unArchive"),
icon: <ToTopOutlined />,
onClick: () => archiveSpool(record, false),
});
} else {
actions.push({ name: t("buttons.archive"), icon: <InboxOutlined />, onClick: () => archiveSpoolPopup(record) });
}
return actions;
};
return ( return (
<List <List
headerButtons={({ defaultButtons }) => ( headerButtons={({ defaultButtons }) => (
@@ -244,136 +283,126 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
return {}; return {};
} }
}} }}
> columns={removeUndefined([
{SortedColumn({ SortedColumn({
id: "id", id: "id",
i18ncat: "spool", i18ncat: "spool",
actions,
dataSource, dataSource,
tableState, tableState,
width: 70, width: 70,
})} }),
{SpoolIconColumn({ SpoolIconColumn({
id: "combined_name", id: "combined_name",
i18nkey: "spool.fields.filament_name", i18nkey: "spool.fields.filament_name",
color: (record: ISpoolCollapsed) => record.filament.color_hex, color: (record: ISpoolCollapsed) => record.filament.color_hex,
actions,
dataSource, dataSource,
tableState, tableState,
dataId: "filament.id", dataId: "filament.id",
filterValueQuery: useSpoolmanFilamentFilter(), filterValueQuery: useSpoolmanFilamentFilter(),
})} }),
{FilteredQueryColumn({ FilteredQueryColumn({
id: "filament.material", id: "filament.material",
i18nkey: "spool.fields.material", i18nkey: "spool.fields.material",
actions,
dataSource, dataSource,
tableState, tableState,
filterValueQuery: useSpoolmanMaterials(), filterValueQuery: useSpoolmanMaterials(),
width: 120, width: 120,
})} }),
{NumberColumn({ NumberColumn({
id: "used_weight", id: "used_weight",
i18ncat: "spool", i18ncat: "spool",
unit: "g", unit: "g",
decimals: 1, decimals: 1,
actions,
dataSource, dataSource,
tableState, tableState,
width: 110, width: 110,
})} }),
{NumberColumn({ NumberColumn({
id: "remaining_weight", id: "remaining_weight",
i18ncat: "spool", i18ncat: "spool",
unit: "g", unit: "g",
decimals: 1, decimals: 1,
defaultText: t("unknown"), defaultText: t("unknown"),
actions,
dataSource, dataSource,
tableState, tableState,
width: 110, width: 110,
})} }),
{NumberColumn({ NumberColumn({
id: "used_length", id: "used_length",
i18ncat: "spool", i18ncat: "spool",
unit: "mm", unit: "mm",
decimals: 1, decimals: 1,
actions,
dataSource, dataSource,
tableState, tableState,
width: 120, width: 120,
})} }),
{NumberColumn({ NumberColumn({
id: "remaining_length", id: "remaining_length",
i18ncat: "spool", i18ncat: "spool",
unit: "mm", unit: "mm",
decimals: 1, decimals: 1,
defaultText: t("unknown"), defaultText: t("unknown"),
actions,
dataSource, dataSource,
tableState, tableState,
width: 120, width: 120,
})} }),
{FilteredQueryColumn({ FilteredQueryColumn({
id: "location", id: "location",
i18ncat: "spool", i18ncat: "spool",
actions,
dataSource, dataSource,
tableState, tableState,
filterValueQuery: useSpoolmanLocations(), filterValueQuery: useSpoolmanLocations(),
width: 120, width: 120,
})} }),
{FilteredQueryColumn({ FilteredQueryColumn({
id: "lot_nr", id: "lot_nr",
i18ncat: "spool", i18ncat: "spool",
actions,
dataSource, dataSource,
tableState, tableState,
filterValueQuery: useSpoolmanLotNumbers(), filterValueQuery: useSpoolmanLotNumbers(),
width: 120, width: 120,
})} }),
{DateColumn({ DateColumn({
id: "first_used", id: "first_used",
i18ncat: "spool", i18ncat: "spool",
actions,
dataSource, dataSource,
tableState, tableState,
})} }),
{DateColumn({ DateColumn({
id: "last_used", id: "last_used",
i18ncat: "spool", i18ncat: "spool",
actions,
dataSource, dataSource,
tableState, tableState,
})} }),
{DateColumn({ DateColumn({
id: "registered", id: "registered",
i18ncat: "spool", i18ncat: "spool",
actions,
dataSource, dataSource,
tableState, tableState,
})} }),
{RichColumn({ RichColumn({
id: "comment", id: "comment",
i18ncat: "spool", i18ncat: "spool",
actions,
dataSource, dataSource,
tableState, tableState,
width: 150, width: 150,
})} }),
<Table.Column ActionsColumn(actions),
title={t("table.actions")} ])}
render={(_, record: ISpoolCollapsed) => (
<Space>
<EditButton hideText title={t("buttons.edit")} size="small" recordItemId={record.id} />
<ShowButton hideText title={t("buttons.show")} size="small" recordItemId={record.id} />
<CloneButton hideText title={t("buttons.clone")} size="small" recordItemId={record.id} />
{record.archived ? (
<Button
icon={<ToTopOutlined />}
title={t("buttons.unArchive")}
size="small"
onClick={() => archiveSpool(record, false)}
/> />
) : (
<Button
icon={<InboxOutlined />}
title={t("buttons.archive")}
size="small"
onClick={() => archiveSpoolPopup(record)}
/>
)}
</Space>
)}
/>
</Table>
</List> </List>
); );
}; };

61
client/src/pages/vendors/list.tsx vendored
View File

@@ -1,19 +1,22 @@
import React from "react"; import React from "react";
import { IResourceComponentsProps, BaseRecord, useTranslate, useInvalidate } from "@refinedev/core"; import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation } from "@refinedev/core";
import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd"; import { useTable, List } from "@refinedev/antd";
import { Table, Space, Button, Dropdown } from "antd"; import { Table, Button, Dropdown } from "antd";
import dayjs from "dayjs"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc"; import utc from "dayjs/plugin/utc";
import { IVendor } from "./model"; import { IVendor } from "./model";
import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload"; import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
import { EditOutlined, FilterOutlined } from "@ant-design/icons"; import { EditOutlined, EyeOutlined, FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { DateColumn, RichColumn, SortedColumn } from "../../components/column"; import { DateColumn, RichColumn, SortedColumn, ActionsColumn } from "../../components/column";
import { useLiveify } from "../../components/liveify"; import { useLiveify } from "../../components/liveify";
import { removeUndefined } from "../../utils/filtering";
dayjs.extend(utc); dayjs.extend(utc);
const namespace = "vendorList-v2"; const namespace = "vendorList-v2";
const allColumns: (keyof IVendor & string)[] = ["id", "name", "registered", "comment"];
export const VendorList: React.FC<IResourceComponentsProps> = () => { export const VendorList: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate(); const t = useTranslate();
const invalidate = useInvalidate(); const invalidate = useInvalidate();
@@ -50,7 +53,6 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
}); });
// Create state for the columns to show // Create state for the columns to show
const allColumns: (keyof IVendor & string)[] = ["id", "name", "registered", "comment"];
const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? allColumns); const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? allColumns);
// Store state in local storage // Store state in local storage
@@ -73,6 +75,13 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
tableProps.pagination.showSizeChanger = true; tableProps.pagination.showSizeChanger = true;
} }
const { editUrl, showUrl, cloneUrl } = useNavigation();
const actions = (record: IVendor) => [
{ name: t("buttons.edit"), icon: <EditOutlined />, link: editUrl("vendor", record.id) },
{ name: t("buttons.show"), icon: <EyeOutlined />, link: showUrl("vendor", record.id) },
{ name: t("buttons.clone"), icon: <PlusSquareOutlined />, link: cloneUrl("vendor", record.id) },
];
return ( return (
<List <List
headerButtons={({ defaultButtons }) => ( headerButtons={({ defaultButtons }) => (
@@ -114,43 +123,45 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
</> </>
)} )}
> >
<Table {...tableProps} sticky scroll={{ x: "max-content" }} dataSource={dataSource} rowKey="id"> <Table
{SortedColumn({ {...tableProps}
sticky
scroll={{ x: "max-content" }}
dataSource={dataSource}
rowKey="id"
columns={removeUndefined([
SortedColumn({
id: "id", id: "id",
i18ncat: "vendor", i18ncat: "vendor",
actions,
dataSource, dataSource,
tableState, tableState,
width: 70, width: 70,
})} }),
{SortedColumn({ SortedColumn({
id: "name", id: "name",
i18ncat: "vendor", i18ncat: "vendor",
actions,
dataSource, dataSource,
tableState, tableState,
})} }),
{DateColumn({ DateColumn({
id: "registered", id: "registered",
i18ncat: "vendor", i18ncat: "vendor",
actions,
dataSource, dataSource,
tableState, tableState,
})} }),
{RichColumn({ RichColumn({
id: "comment", id: "comment",
i18ncat: "vendor", i18ncat: "vendor",
actions,
dataSource, dataSource,
tableState, tableState,
})} }),
<Table.Column ActionsColumn<IVendor>(actions),
title={t("table.actions")} ])}
render={(_, record: BaseRecord) => (
<Space>
<EditButton hideText title={t("buttons.edit")} size="small" recordItemId={record.id} />
<ShowButton hideText title={t("buttons.show")} size="small" recordItemId={record.id} />
<CloneButton hideText title={t("buttons.clone")} size="small" recordItemId={record.id} />
</Space>
)}
/> />
</Table>
</List> </List>
); );
}; };

7
client/src/utils/filtering.ts
View File

@@ -28,3 +28,10 @@ export function getFiltersForField<Obj, Field extends keyof Obj>(
}); });
return filterValues; return filterValues;
} }
/**
* Function that returns an array with all undefined values removed.
*/
export function removeUndefined<T>(array: (T | undefined)[]): T[] {
return array.filter((value) => value !== undefined) as T[];
}