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

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

@@ -1,6 +1,5 @@
import { Col, Row, Spin, Table } from "antd";
import { ColumnProps as AntdColumnProps } from "antd/es/table";
import { ColumnFilterItem } from "antd/es/table/interface";
import { Button, Col, Dropdown, Row, Space, Spin } from "antd";
import { ColumnFilterItem, ColumnType } from "antd/es/table/interface";
import { getFiltersForField, typeFilters } from "../utils/filtering";
import { TableState } from "../utils/saveload";
import { getSortOrderForField, typeSorters } from "../utils/sorting";
@@ -13,6 +12,7 @@ import SpoolIcon from "../icon_spool.svg?react";
import { useTranslate } from "@refinedev/core";
import { enrichText } from "../utils/parsing";
import { UseQueryResult } from "@tanstack/react-query";
import { Link, useNavigate } from "react-router-dom";
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;
dataId?: keyof Obj & string;
i18ncat?: string;
@@ -35,6 +46,7 @@ interface BaseColumnProps<Obj> {
dataSource: Obj[];
tableState: TableState;
width?: number;
actions?: (record: Obj) => Action[];
}
interface FilteredColumnProps {
@@ -55,22 +67,28 @@ interface CustomColumnProps<Obj> {
) => 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 navigate = useNavigate();
// Hide if not in showColumns
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,
title: t(props.i18nkey ?? `${props.i18ncat}.fields.${props.id}`),
sorter: true,
sortOrder: getSortOrderForField(typedSorters, props.dataId ?? props.id),
sortOrder: getSortOrderForField(typeSorters<Obj>(props.tableState.sorters), props.dataId ?? props.id),
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) {
columnProps.filters = props.filters;
columnProps.filteredValue = props.filteredValue;
@@ -86,20 +104,50 @@ function Column<Obj>(props: BaseColumnProps<Obj> & FilteredColumnProps & CustomC
columnProps.key = props.dataId;
}
}
if (props.render) {
columnProps.render = props.render;
// Render
const render = props.render ?? ((value) => <>{value}</>);
columnProps.render = (value, record, index) => {
if (!props.actions) {
return render(value, record, index);
}
if (props.onCell) {
columnProps.onCell = props.onCell;
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();
}
return <Table.Column<Obj> {...columnProps} />;
}
},
}}
trigger={["contextMenu"]}
>
<div>{render(value, record, index)}</div>
</Dropdown>
);
};
return columnProps;
}
export function SortedColumn<Obj>(props: BaseColumnProps<Obj>) {
export function SortedColumn<Obj extends Entity>(props: BaseColumnProps<Obj>) {
return Column(props);
}
export function RichColumn<Obj>(props: BaseColumnProps<Obj>) {
export function RichColumn<Obj extends Entity>(props: BaseColumnProps<Obj>) {
return Column({
...props,
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[]>;
allowMultipleFilters?: boolean;
}
export function FilteredQueryColumn<Obj>(props: FilteredQueryColumnProps<Obj>) {
export function FilteredQueryColumn<Obj extends Entity>(props: FilteredQueryColumnProps<Obj>) {
const query = props.filterValueQuery;
let filters: ColumnFilterItem[] = [];
@@ -143,13 +191,13 @@ export function FilteredQueryColumn<Obj>(props: FilteredQueryColumnProps<Obj>) {
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;
decimals?: number;
defaultText?: string;
}
export function NumberColumn<Obj>(props: NumberColumnProps<Obj>) {
export function NumberColumn<Obj extends Entity>(props: NumberColumnProps<Obj>) {
return Column({
...props,
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({
...props,
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;
}
export function SpoolIconColumn<Obj>(props: SpoolIconColumnProps<Obj>) {
export function SpoolIconColumn<Obj extends Entity>(props: SpoolIconColumnProps<Obj>) {
const query = props.filterValueQuery;
let filters: ColumnFilterItem[] = [];

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

@@ -1,11 +1,11 @@
import React from "react";
import { IResourceComponentsProps, BaseRecord, useTranslate, useInvalidate } from "@refinedev/core";
import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd";
import { Table, Space, Button, Dropdown } from "antd";
import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation } from "@refinedev/core";
import { useTable, List } from "@refinedev/antd";
import { Table, Button, Dropdown } from "antd";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
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 {
DateColumn,
@@ -14,6 +14,7 @@ import {
RichColumn,
SortedColumn,
SpoolIconColumn,
ActionsColumn,
} from "../../components/column";
import {
useSpoolmanArticleNumbers,
@@ -22,6 +23,7 @@ import {
useSpoolmanVendors,
} from "../../components/otherModels";
import { useLiveify } from "../../components/liveify";
import { removeUndefined } from "../../utils/filtering";
dayjs.extend(utc);
@@ -46,6 +48,26 @@ function translateColumnI18nKey(columnName: string): string {
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> = () => {
const t = useTranslate();
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.
// 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.
const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<IFilament>({
const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } =
useTable<IFilamentCollapsed>({
syncWithLocation: false,
pagination: {
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
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);
// Store state in local storage
@@ -116,9 +127,9 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
};
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(
() => (tableProps.dataSource ?? []).map(collapseFilament),
() => (tableProps.dataSource || []).map((record) => ({ ...record })),
[tableProps.dataSource]
);
const dataSource = useLiveify("filament", queryDataSource, collapseFilament);
@@ -127,6 +138,13 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
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 (
<List
headerButtons={({ defaultButtons }) => (
@@ -168,130 +186,142 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
</>
)}
>
<Table {...tableProps} sticky scroll={{ x: "max-content" }} dataSource={dataSource} rowKey="id">
{SortedColumn({
<Table<IFilamentCollapsed>
{...tableProps}
sticky
scroll={{ x: "max-content" }}
dataSource={dataSource}
rowKey="id"
columns={removeUndefined([
SortedColumn({
id: "id",
i18ncat: "filament",
actions,
dataSource,
tableState,
width: 70,
})}
{FilteredQueryColumn({
}),
FilteredQueryColumn({
id: "vendor.name",
i18nkey: "filament.fields.vendor_name",
actions,
dataSource,
tableState,
filterValueQuery: useSpoolmanVendors(),
})}
{SpoolIconColumn({
}),
SpoolIconColumn({
id: "name",
i18ncat: "filament",
color: (record: IFilamentCollapsed) => record.color_hex,
actions,
dataSource,
tableState,
filterValueQuery: useSpoolmanFilamentNames(),
})}
{FilteredQueryColumn({
}),
FilteredQueryColumn({
id: "material",
i18ncat: "filament",
actions,
dataSource,
tableState,
filterValueQuery: useSpoolmanMaterials(),
width: 110,
})}
{SortedColumn({
}),
SortedColumn({
id: "price",
i18ncat: "filament",
actions,
dataSource,
tableState,
width: 80,
})}
{NumberColumn({
}),
NumberColumn({
id: "density",
i18ncat: "filament",
unit: "g/cm³",
decimals: 2,
actions,
dataSource,
tableState,
width: 100,
})}
{NumberColumn({
}),
NumberColumn({
id: "diameter",
i18ncat: "filament",
unit: "mm",
decimals: 2,
actions,
dataSource,
tableState,
width: 100,
})}
{NumberColumn({
}),
NumberColumn({
id: "weight",
i18ncat: "filament",
unit: "g",
decimals: 1,
actions,
dataSource,
tableState,
width: 100,
})}
{NumberColumn({
}),
NumberColumn({
id: "spool_weight",
i18ncat: "filament",
unit: "g",
decimals: 1,
actions,
dataSource,
tableState,
width: 100,
})}
{FilteredQueryColumn({
}),
FilteredQueryColumn({
id: "article_number",
i18ncat: "filament",
actions,
dataSource,
tableState,
filterValueQuery: useSpoolmanArticleNumbers(),
width: 130,
})}
{NumberColumn({
}),
NumberColumn({
id: "settings_extruder_temp",
i18ncat: "filament",
unit: "°C",
decimals: 0,
actions,
dataSource,
tableState,
width: 100,
})}
{NumberColumn({
}),
NumberColumn({
id: "settings_bed_temp",
i18ncat: "filament",
unit: "°C",
decimals: 0,
actions,
dataSource,
tableState,
width: 100,
})}
{DateColumn({
}),
DateColumn({
id: "registered",
i18ncat: "filament",
actions,
dataSource,
tableState,
})}
{RichColumn({
}),
RichColumn({
id: "comment",
i18ncat: "filament",
actions,
dataSource,
tableState,
width: 150,
})}
<Table.Column
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>
)}
}),
ActionsColumn(actions),
])}
/>
</Table>
</List>
);
};

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

@@ -1,12 +1,19 @@
import React from "react";
import { IResourceComponentsProps, useInvalidate, useTranslate } from "@refinedev/core";
import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd";
import { Table, Space, Button, Dropdown, Modal } from "antd";
import { IResourceComponentsProps, useInvalidate, useNavigation, useTranslate } from "@refinedev/core";
import { useTable, List } from "@refinedev/antd";
import { Table, Button, Dropdown, Modal } from "antd";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { ISpool } from "./model";
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 {
DateColumn,
FilteredQueryColumn,
@@ -14,6 +21,8 @@ import {
RichColumn,
SortedColumn,
SpoolIconColumn,
Action,
ActionsColumn,
} from "../../components/column";
import { setSpoolArchived } from "./functions";
import SelectAndPrint from "../../components/selectAndPrintDialog";
@@ -24,6 +33,7 @@ import {
useSpoolmanMaterials,
} from "../../components/otherModels";
import { useLiveify } from "../../components/liveify";
import { removeUndefined } from "../../utils/filtering";
dayjs.extend(utc);
@@ -59,6 +69,25 @@ function translateColumnI18nKey(columnName: string): string {
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> = () => {
const t = useTranslate();
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.
// 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.
const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<ISpool>({
const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } =
useTable<ISpoolCollapsed>({
meta: {
queryParams: {
["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
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);
// Store state in local storage
@@ -135,9 +155,9 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
};
useStoreInitialState(namespace, tableState);
// Collapse the dataSource to a mutable list and add a filament_name field
const queryDataSource = React.useMemo(
() => (tableProps.dataSource ?? []).map(collapseSpool),
// Collapse the dataSource to a mutable list
const queryDataSource: ISpoolCollapsed[] = React.useMemo(
() => (tableProps.dataSource || []).map((record) => ({ ...record })),
[tableProps.dataSource]
);
const dataSource = useLiveify("spool", queryDataSource, collapseSpool);
@@ -174,6 +194,25 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
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 (
<List
headerButtons={({ defaultButtons }) => (
@@ -244,136 +283,126 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
return {};
}
}}
>
{SortedColumn({
columns={removeUndefined([
SortedColumn({
id: "id",
i18ncat: "spool",
actions,
dataSource,
tableState,
width: 70,
})}
{SpoolIconColumn({
}),
SpoolIconColumn({
id: "combined_name",
i18nkey: "spool.fields.filament_name",
color: (record: ISpoolCollapsed) => record.filament.color_hex,
actions,
dataSource,
tableState,
dataId: "filament.id",
filterValueQuery: useSpoolmanFilamentFilter(),
})}
{FilteredQueryColumn({
}),
FilteredQueryColumn({
id: "filament.material",
i18nkey: "spool.fields.material",
actions,
dataSource,
tableState,
filterValueQuery: useSpoolmanMaterials(),
width: 120,
})}
{NumberColumn({
}),
NumberColumn({
id: "used_weight",
i18ncat: "spool",
unit: "g",
decimals: 1,
actions,
dataSource,
tableState,
width: 110,
})}
{NumberColumn({
}),
NumberColumn({
id: "remaining_weight",
i18ncat: "spool",
unit: "g",
decimals: 1,
defaultText: t("unknown"),
actions,
dataSource,
tableState,
width: 110,
})}
{NumberColumn({
}),
NumberColumn({
id: "used_length",
i18ncat: "spool",
unit: "mm",
decimals: 1,
actions,
dataSource,
tableState,
width: 120,
})}
{NumberColumn({
}),
NumberColumn({
id: "remaining_length",
i18ncat: "spool",
unit: "mm",
decimals: 1,
defaultText: t("unknown"),
actions,
dataSource,
tableState,
width: 120,
})}
{FilteredQueryColumn({
}),
FilteredQueryColumn({
id: "location",
i18ncat: "spool",
actions,
dataSource,
tableState,
filterValueQuery: useSpoolmanLocations(),
width: 120,
})}
{FilteredQueryColumn({
}),
FilteredQueryColumn({
id: "lot_nr",
i18ncat: "spool",
actions,
dataSource,
tableState,
filterValueQuery: useSpoolmanLotNumbers(),
width: 120,
})}
{DateColumn({
}),
DateColumn({
id: "first_used",
i18ncat: "spool",
actions,
dataSource,
tableState,
})}
{DateColumn({
}),
DateColumn({
id: "last_used",
i18ncat: "spool",
actions,
dataSource,
tableState,
})}
{DateColumn({
}),
DateColumn({
id: "registered",
i18ncat: "spool",
actions,
dataSource,
tableState,
})}
{RichColumn({
}),
RichColumn({
id: "comment",
i18ncat: "spool",
actions,
dataSource,
tableState,
width: 150,
})}
<Table.Column
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)}
}),
ActionsColumn(actions),
])}
/>
) : (
<Button
icon={<InboxOutlined />}
title={t("buttons.archive")}
size="small"
onClick={() => archiveSpoolPopup(record)}
/>
)}
</Space>
)}
/>
</Table>
</List>
);
};

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

@@ -1,19 +1,22 @@
import React from "react";
import { IResourceComponentsProps, BaseRecord, useTranslate, useInvalidate } from "@refinedev/core";
import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd";
import { Table, Space, Button, Dropdown } from "antd";
import { IResourceComponentsProps, useTranslate, useInvalidate, useNavigation } from "@refinedev/core";
import { useTable, List } from "@refinedev/antd";
import { Table, Button, Dropdown } from "antd";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { IVendor } from "./model";
import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
import { EditOutlined, FilterOutlined } from "@ant-design/icons";
import { DateColumn, RichColumn, SortedColumn } from "../../components/column";
import { EditOutlined, EyeOutlined, FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { DateColumn, RichColumn, SortedColumn, ActionsColumn } from "../../components/column";
import { useLiveify } from "../../components/liveify";
import { removeUndefined } from "../../utils/filtering";
dayjs.extend(utc);
const namespace = "vendorList-v2";
const allColumns: (keyof IVendor & string)[] = ["id", "name", "registered", "comment"];
export const VendorList: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
const invalidate = useInvalidate();
@@ -50,7 +53,6 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
});
// 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);
// Store state in local storage
@@ -73,6 +75,13 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
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 (
<List
headerButtons={({ defaultButtons }) => (
@@ -114,43 +123,45 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
</>
)}
>
<Table {...tableProps} sticky scroll={{ x: "max-content" }} dataSource={dataSource} rowKey="id">
{SortedColumn({
<Table
{...tableProps}
sticky
scroll={{ x: "max-content" }}
dataSource={dataSource}
rowKey="id"
columns={removeUndefined([
SortedColumn({
id: "id",
i18ncat: "vendor",
actions,
dataSource,
tableState,
width: 70,
})}
{SortedColumn({
}),
SortedColumn({
id: "name",
i18ncat: "vendor",
actions,
dataSource,
tableState,
})}
{DateColumn({
}),
DateColumn({
id: "registered",
i18ncat: "vendor",
actions,
dataSource,
tableState,
})}
{RichColumn({
}),
RichColumn({
id: "comment",
i18ncat: "vendor",
actions,
dataSource,
tableState,
})}
<Table.Column
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>
)}
}),
ActionsColumn<IVendor>(actions),
])}
/>
</Table>
</List>
);
};

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

@@ -28,3 +28,10 @@ export function getFiltersForField<Obj, Field extends keyof Obj>(
});
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[];
}