Client: Added show/hide columns feature
This commit is contained in:
Donkie
@@ -109,35 +109,68 @@
|
||||
"dashboard": {
|
||||
"title": "Dashboard"
|
||||
},
|
||||
"blog_posts": {
|
||||
"blog_posts": "Blog Posts",
|
||||
"spools": {
|
||||
"spools": "Spools",
|
||||
"fields": {
|
||||
"id": "Id",
|
||||
"title": "Title",
|
||||
"content": "Content",
|
||||
"status": "Status",
|
||||
"category": "Category",
|
||||
"createdAt": "Created At"
|
||||
"filament_name": "Filament Name",
|
||||
"used_weight": "Used Weight",
|
||||
"remaining_weight": "Remaining Weight",
|
||||
"location": "Location",
|
||||
"lot_nr": "Lot Nr",
|
||||
"first_used": "First Used",
|
||||
"last_used": "Last Used",
|
||||
"comment": "Comment"
|
||||
},
|
||||
"titles": {
|
||||
"create": "Create Blog Post",
|
||||
"edit": "Edit Blog Post",
|
||||
"list": "Blog Posts",
|
||||
"show": "Show Blog Post"
|
||||
"create": "Create Spool",
|
||||
"clone": "Clone Spool",
|
||||
"edit": "Edit Spool",
|
||||
"list": "Spools",
|
||||
"show": "Show Spool"
|
||||
}
|
||||
},
|
||||
"categories": {
|
||||
"categories": "Categories",
|
||||
"filaments": {
|
||||
"filaments": "Filaments",
|
||||
"fields": {
|
||||
"id": "Id",
|
||||
"title": "Title",
|
||||
"createdAt": "Created At"
|
||||
"vendor_name": "Vendor Name",
|
||||
"name": "Name",
|
||||
"material": "Material",
|
||||
"price": "Price",
|
||||
"density": "Density",
|
||||
"diameter": "Diameter",
|
||||
"weight": "Weight",
|
||||
"spool_weight": "Spool Weight",
|
||||
"article_number": "Article Number",
|
||||
"registered": "Registered",
|
||||
"comment": "Comment",
|
||||
"settings_extruder_temp": "Extruder Temp",
|
||||
"settings_bed_temp": "Bed Temp",
|
||||
"color_hex": "Color"
|
||||
},
|
||||
"titles": {
|
||||
"create": "Create Category",
|
||||
"edit": "Edit Category",
|
||||
"list": "Categories",
|
||||
"show": "Show Category"
|
||||
"create": "Create Filament",
|
||||
"clone": "Clone Filament",
|
||||
"edit": "Edit Filament",
|
||||
"list": "Filaments",
|
||||
"show": "Show Filament"
|
||||
}
|
||||
},
|
||||
"vendors": {
|
||||
"vendors": "Vendors",
|
||||
"fields": {
|
||||
"id": "Id",
|
||||
"name": "Name",
|
||||
"registered": "Registered",
|
||||
"comment": "Comment"
|
||||
},
|
||||
"titles": {
|
||||
"create": "Create Vendor",
|
||||
"clone": "Clone Vendor",
|
||||
"edit": "Edit Vendor",
|
||||
"list": "Vendors",
|
||||
"show": "Show Vendor"
|
||||
}
|
||||
},
|
||||
"table": {
|
||||
|
||||
170
client/src/components/column.tsx
Normal file
170
client/src/components/column.tsx
Normal file
@@ -0,0 +1,170 @@
|
||||
import { Col, Row, Table } from "antd";
|
||||
import { ColumnProps as AntdColumnProps } from "antd/es/table";
|
||||
import { ColumnFilterItem } from "antd/es/table/interface";
|
||||
import {
|
||||
getFiltersForField,
|
||||
typeFilters,
|
||||
useListFiltersForField,
|
||||
} from "../utils/filtering";
|
||||
import { TableState } from "../utils/saveload";
|
||||
import { getSortOrderForField, typeSorters } from "../utils/sorting";
|
||||
import { NumberFieldUnit } from "./numberField";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import { DateField, TextField } from "@refinedev/antd";
|
||||
import Icon from "@ant-design/icons";
|
||||
import { ReactComponent as SpoolIcon } from "../icon_spool.svg";
|
||||
|
||||
dayjs.extend(utc);
|
||||
|
||||
interface BaseColumnProps<Obj> {
|
||||
id: keyof Obj & string;
|
||||
title: string;
|
||||
dataSource: Obj[];
|
||||
tableState: TableState;
|
||||
}
|
||||
|
||||
interface FilteredColumnProps {
|
||||
filters?: ColumnFilterItem[];
|
||||
filteredValue?: string[];
|
||||
}
|
||||
|
||||
interface CustomColumnProps<Obj> {
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
render?: (value: any, record: Obj, index: number) => React.ReactNode;
|
||||
onCell?: (
|
||||
data: Obj,
|
||||
index?: number
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
) => React.HTMLAttributes<any> | React.TdHTMLAttributes<any>;
|
||||
}
|
||||
|
||||
function Column<Obj>(
|
||||
props: BaseColumnProps<Obj> & FilteredColumnProps & CustomColumnProps<Obj>
|
||||
) {
|
||||
if (
|
||||
props.tableState.showColumns &&
|
||||
!props.tableState.showColumns.includes(props.id)
|
||||
) {
|
||||
return <></>;
|
||||
}
|
||||
const typedSorters = typeSorters<Obj>(props.tableState.sorters);
|
||||
const columnProps: AntdColumnProps<Obj> = {
|
||||
dataIndex: props.id,
|
||||
title: props.title,
|
||||
sorter: true,
|
||||
sortOrder: getSortOrderForField(typedSorters, props.id),
|
||||
};
|
||||
if (props.filters && props.filteredValue) {
|
||||
columnProps.filters = props.filters;
|
||||
columnProps.filteredValue = props.filteredValue;
|
||||
}
|
||||
if (props.render) {
|
||||
columnProps.render = props.render;
|
||||
}
|
||||
if (props.onCell) {
|
||||
columnProps.onCell = props.onCell;
|
||||
}
|
||||
return <Table.Column<Obj> {...columnProps} />;
|
||||
}
|
||||
|
||||
export function SortedColumn<Obj>(props: BaseColumnProps<Obj>) {
|
||||
// return <Table.Column dataIndex={["comment"]} title="Comment" />;
|
||||
return Column(props);
|
||||
}
|
||||
|
||||
export function FilteredColumn<Obj>(props: BaseColumnProps<Obj>) {
|
||||
const typedFilters = typeFilters<Obj>(props.tableState.filters);
|
||||
|
||||
const filters = useListFiltersForField(props.dataSource, props.id);
|
||||
const filteredValue = getFiltersForField(typedFilters, props.id);
|
||||
|
||||
return Column({ ...props, filters, filteredValue });
|
||||
}
|
||||
|
||||
interface NumberColumnProps<Obj> extends BaseColumnProps<Obj> {
|
||||
unit: string;
|
||||
decimals?: number;
|
||||
}
|
||||
|
||||
export function NumberColumn<Obj>(props: NumberColumnProps<Obj>) {
|
||||
return Column({
|
||||
...props,
|
||||
render: (value) => {
|
||||
if (value === null || value === undefined) {
|
||||
return <TextField value="Unknown" />;
|
||||
}
|
||||
return (
|
||||
<NumberFieldUnit
|
||||
value={value}
|
||||
unit={props.unit}
|
||||
options={{
|
||||
maximumFractionDigits: props.decimals ?? 0,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
export function DateColumn<Obj>(props: BaseColumnProps<Obj>) {
|
||||
return Column({
|
||||
...props,
|
||||
render: (value) => {
|
||||
return (
|
||||
<DateField
|
||||
hidden={!value}
|
||||
value={dayjs.utc(value).local()}
|
||||
title={dayjs.utc(value).local().format()}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
interface SpoolIconColumnProps<Obj> extends BaseColumnProps<Obj> {
|
||||
color: (record: Obj) => string | undefined;
|
||||
}
|
||||
|
||||
export function SpoolIconColumn<Obj>(props: SpoolIconColumnProps<Obj>) {
|
||||
const typedFilters = typeFilters<Obj>(props.tableState.filters);
|
||||
|
||||
const filters = useListFiltersForField(props.dataSource, props.id);
|
||||
const filteredValue = getFiltersForField(typedFilters, props.id);
|
||||
|
||||
return Column({
|
||||
...props,
|
||||
filters,
|
||||
filteredValue,
|
||||
onCell: () => {
|
||||
return {
|
||||
style: {
|
||||
paddingLeft: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
render: (value, record: Obj) => {
|
||||
const colorStr = props.color(record);
|
||||
return (
|
||||
<Row wrap={false} justify="space-around" align="middle">
|
||||
{colorStr && (
|
||||
<Col flex="none">
|
||||
<Icon
|
||||
component={SpoolIcon}
|
||||
style={{
|
||||
color: "#" + colorStr,
|
||||
fontSize: 42,
|
||||
marginRight: 0,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
<Col flex="auto">{value}</Col>
|
||||
</Row>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -5,35 +5,32 @@ import {
|
||||
List,
|
||||
EditButton,
|
||||
ShowButton,
|
||||
DateField,
|
||||
CloneButton,
|
||||
} from "@refinedev/antd";
|
||||
import { Table, Space, Button, Row, Col } from "antd";
|
||||
import { NumberFieldUnit } from "../../components/numberField";
|
||||
import { Table, Space, Button, Dropdown } from "antd";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import { IFilament } from "./model";
|
||||
import { genericSorter, typeSorters } from "../../utils/sorting";
|
||||
import { genericFilterer, typeFilters } from "../../utils/filtering";
|
||||
import { EditOutlined, FilterOutlined } from "@ant-design/icons";
|
||||
import {
|
||||
genericSorter,
|
||||
getSortOrderForField,
|
||||
typeSorters,
|
||||
} from "../../utils/sorting";
|
||||
import {
|
||||
genericFilterer,
|
||||
getFiltersForField,
|
||||
typeFilters,
|
||||
useListFiltersForField,
|
||||
} from "../../utils/filtering";
|
||||
import Icon, { FilterOutlined } from "@ant-design/icons";
|
||||
import {
|
||||
TableState,
|
||||
useInitialTableState,
|
||||
useStoreInitialState,
|
||||
} from "../../utils/saveload";
|
||||
import { ReactComponent as SpoolIcon } from "../../icon_spool.svg";
|
||||
import {
|
||||
DateColumn,
|
||||
FilteredColumn,
|
||||
NumberColumn,
|
||||
SortedColumn,
|
||||
SpoolIconColumn,
|
||||
} from "../../components/column";
|
||||
import i18n from "../../i18n";
|
||||
|
||||
dayjs.extend(utc);
|
||||
|
||||
interface IFilamentCollapsed extends IFilament {
|
||||
interface IFilamentCollapsed extends Omit<IFilament, "vendor"> {
|
||||
vendor_name: string | null;
|
||||
}
|
||||
|
||||
@@ -69,16 +66,37 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
|
||||
},
|
||||
});
|
||||
|
||||
// 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",
|
||||
"registered",
|
||||
"comment",
|
||||
];
|
||||
const [showColumns, setShowColumns] = React.useState<string[]>(
|
||||
initialState.showColumns ?? allColumns
|
||||
);
|
||||
|
||||
// Type the sorters and filters
|
||||
const typedSorters = typeSorters<IFilamentCollapsed>(sorters);
|
||||
const typedFilters = typeFilters<IFilamentCollapsed>(filters);
|
||||
|
||||
// Store state in local storage
|
||||
useStoreInitialState("filamentList", {
|
||||
const tableState: TableState = {
|
||||
sorters,
|
||||
filters,
|
||||
pagination: { current, pageSize },
|
||||
});
|
||||
showColumns,
|
||||
};
|
||||
useStoreInitialState("filamentList", tableState);
|
||||
|
||||
// Collapse the dataSource to a mutable list and add a filament_name field
|
||||
const dataSource: IFilamentCollapsed[] = React.useMemo(
|
||||
@@ -117,6 +135,28 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
<Dropdown
|
||||
trigger={["click"]}
|
||||
menu={{
|
||||
items: allColumns.map((column_id) => ({
|
||||
key: column_id,
|
||||
label: i18n.t(`filaments.fields.${column_id}`),
|
||||
})),
|
||||
selectedKeys: showColumns,
|
||||
selectable: true,
|
||||
multiple: true,
|
||||
onDeselect: (keys) => {
|
||||
setShowColumns(keys.selectedKeys);
|
||||
},
|
||||
onSelect: (keys) => {
|
||||
setShowColumns(keys.selectedKeys);
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button type="primary" icon={<EditOutlined />}>
|
||||
Hide Columns
|
||||
</Button>
|
||||
</Dropdown>
|
||||
{defaultButtons}
|
||||
</>
|
||||
)}
|
||||
@@ -135,168 +175,87 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
|
||||
}}
|
||||
rowKey="id"
|
||||
>
|
||||
<Table.Column
|
||||
dataIndex="id"
|
||||
title="Id"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "id")}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="vendor_name"
|
||||
title="Vendor"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "vendor_name")}
|
||||
filters={useListFiltersForField(dataSource, "vendor_name")}
|
||||
filteredValue={getFiltersForField(typedFilters, "vendor_name")}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="name"
|
||||
title="Name"
|
||||
width={150}
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "name")}
|
||||
filters={useListFiltersForField(dataSource, "name")}
|
||||
filteredValue={getFiltersForField(typedFilters, "name")}
|
||||
render={(value, record: IFilament) => {
|
||||
return {
|
||||
props: {
|
||||
style: {
|
||||
paddingLeft: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
},
|
||||
},
|
||||
children: (
|
||||
<Row wrap={false} justify="space-around" align="middle">
|
||||
{record.color_hex && (
|
||||
<Col flex="none">
|
||||
<Icon
|
||||
component={SpoolIcon}
|
||||
style={{
|
||||
color: "#" + record.color_hex,
|
||||
fontSize: 42,
|
||||
marginRight: 0,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
<Col flex="auto">{value}</Col>
|
||||
</Row>
|
||||
),
|
||||
};
|
||||
}}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="material"
|
||||
title="Material"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "material")}
|
||||
filters={useListFiltersForField(dataSource, "material")}
|
||||
filteredValue={getFiltersForField(typedFilters, "material")}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="price"
|
||||
title="Price"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "price")}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="density"
|
||||
title="Density"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "density")}
|
||||
render={(value) => (
|
||||
<NumberFieldUnit
|
||||
value={value}
|
||||
unit="g/cm³"
|
||||
options={{
|
||||
maximumFractionDigits: 2,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="diameter"
|
||||
title="Diameter"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "diameter")}
|
||||
render={(value) => (
|
||||
<NumberFieldUnit
|
||||
value={value}
|
||||
unit="mm"
|
||||
options={{
|
||||
maximumFractionDigits: 2,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="weight"
|
||||
title="Weight"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "weight")}
|
||||
render={(value) => {
|
||||
if (value === null || value === undefined) {
|
||||
return <></>;
|
||||
}
|
||||
return (
|
||||
<NumberFieldUnit
|
||||
value={value}
|
||||
unit="g"
|
||||
options={{
|
||||
maximumFractionDigits: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="spool_weight"
|
||||
title="Spool Weight"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "spool_weight")}
|
||||
render={(value) => {
|
||||
if (value === null || value === undefined) {
|
||||
return <></>;
|
||||
}
|
||||
return (
|
||||
<NumberFieldUnit
|
||||
value={value}
|
||||
unit="g"
|
||||
options={{
|
||||
maximumFractionDigits: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="article_number"
|
||||
title="Article Number"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "article_number")}
|
||||
filters={useListFiltersForField(dataSource, "article_number")}
|
||||
filteredValue={getFiltersForField(typedFilters, "article_number")}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex={["registered"]}
|
||||
title="Registered"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "registered")}
|
||||
render={(value) => (
|
||||
<DateField
|
||||
value={dayjs.utc(value).local()}
|
||||
title={dayjs.utc(value).local().format()}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex={["comment"]}
|
||||
title="Comment"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "comment")}
|
||||
/>
|
||||
{SortedColumn({
|
||||
id: "id",
|
||||
title: "Id",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{FilteredColumn({
|
||||
id: "vendor_name",
|
||||
title: "Vendor",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{SpoolIconColumn({
|
||||
id: "name",
|
||||
title: "Name",
|
||||
color: (record: IFilamentCollapsed) => record.color_hex,
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{FilteredColumn({
|
||||
id: "material",
|
||||
title: "Material",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{SortedColumn({
|
||||
id: "price",
|
||||
title: "Price",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{NumberColumn({
|
||||
id: "density",
|
||||
title: "Density",
|
||||
unit: "g/cm³",
|
||||
decimals: 2,
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{NumberColumn({
|
||||
id: "diameter",
|
||||
title: "Diameter",
|
||||
unit: "mm",
|
||||
decimals: 2,
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{NumberColumn({
|
||||
id: "weight",
|
||||
title: "Weight",
|
||||
unit: "g",
|
||||
decimals: 1,
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{NumberColumn({
|
||||
id: "spool_weight",
|
||||
title: "Spool Weight",
|
||||
unit: "g",
|
||||
decimals: 1,
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{FilteredColumn({
|
||||
id: "article_number",
|
||||
title: "Article Number",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{DateColumn({
|
||||
id: "registered",
|
||||
title: "Registered",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{SortedColumn({
|
||||
id: "comment",
|
||||
title: "Comment",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
<Table.Column
|
||||
title="Actions"
|
||||
dataIndex="actions"
|
||||
|
||||
@@ -5,32 +5,28 @@ import {
|
||||
List,
|
||||
EditButton,
|
||||
ShowButton,
|
||||
DateField,
|
||||
TextField,
|
||||
CloneButton,
|
||||
} from "@refinedev/antd";
|
||||
import { Table, Space, Button, Row, Col } from "antd";
|
||||
import { NumberFieldUnit } from "../../components/numberField";
|
||||
import { Table, Space, Button, Dropdown } from "antd";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import {
|
||||
genericSorter,
|
||||
getSortOrderForField,
|
||||
typeSorters,
|
||||
} from "../../utils/sorting";
|
||||
import {
|
||||
genericFilterer,
|
||||
getFiltersForField,
|
||||
typeFilters,
|
||||
useListFiltersForField,
|
||||
} from "../../utils/filtering";
|
||||
import { genericSorter, typeSorters } from "../../utils/sorting";
|
||||
import { genericFilterer, typeFilters } from "../../utils/filtering";
|
||||
import { ISpool } from "./model";
|
||||
import {
|
||||
TableState,
|
||||
useInitialTableState,
|
||||
useStoreInitialState,
|
||||
} from "../../utils/saveload";
|
||||
import Icon, { FilterOutlined } from "@ant-design/icons";
|
||||
import { ReactComponent as SpoolIcon } from "../../icon_spool.svg";
|
||||
import { EditOutlined, FilterOutlined } from "@ant-design/icons";
|
||||
import {
|
||||
DateColumn,
|
||||
FilteredColumn,
|
||||
NumberColumn,
|
||||
SortedColumn,
|
||||
SpoolIconColumn,
|
||||
} from "../../components/column";
|
||||
import i18n from "../../i18n";
|
||||
|
||||
dayjs.extend(utc);
|
||||
|
||||
@@ -70,16 +66,34 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
|
||||
},
|
||||
});
|
||||
|
||||
// Create state for the columns to show
|
||||
const allColumns: (keyof ISpoolCollapsed & string)[] = [
|
||||
"id",
|
||||
"filament_name",
|
||||
"used_weight",
|
||||
"remaining_weight",
|
||||
"location",
|
||||
"lot_nr",
|
||||
"first_used",
|
||||
"last_used",
|
||||
"comment",
|
||||
];
|
||||
const [showColumns, setShowColumns] = React.useState<string[]>(
|
||||
initialState.showColumns ?? allColumns
|
||||
);
|
||||
|
||||
// Type the sorters and filters
|
||||
const typedSorters = typeSorters<ISpoolCollapsed>(sorters);
|
||||
const typedFilters = typeFilters<ISpoolCollapsed>(filters);
|
||||
|
||||
// Store state in local storage
|
||||
useStoreInitialState("spoolList", {
|
||||
const tableState: TableState = {
|
||||
sorters,
|
||||
filters,
|
||||
pagination: { current, pageSize },
|
||||
});
|
||||
showColumns,
|
||||
};
|
||||
useStoreInitialState("spoolList", tableState);
|
||||
|
||||
// Collapse the dataSource to a mutable list and add a filament_name field
|
||||
const dataSource: ISpoolCollapsed[] = React.useMemo(
|
||||
@@ -119,6 +133,28 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
<Dropdown
|
||||
trigger={["click"]}
|
||||
menu={{
|
||||
items: allColumns.map((column) => ({
|
||||
key: column,
|
||||
label: i18n.t(`spools.fields.${column}`),
|
||||
})),
|
||||
selectedKeys: showColumns,
|
||||
selectable: true,
|
||||
multiple: true,
|
||||
onDeselect: (keys) => {
|
||||
setShowColumns(keys.selectedKeys);
|
||||
},
|
||||
onSelect: (keys) => {
|
||||
setShowColumns(keys.selectedKeys);
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button type="primary" icon={<EditOutlined />}>
|
||||
Hide Columns
|
||||
</Button>
|
||||
</Dropdown>
|
||||
{defaultButtons}
|
||||
</>
|
||||
)}
|
||||
@@ -137,138 +173,67 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
|
||||
}}
|
||||
rowKey="id"
|
||||
>
|
||||
<Table.Column
|
||||
dataIndex="id"
|
||||
title="Id"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "id")}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="filament_name"
|
||||
title="Filament"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "filament_name")}
|
||||
filters={useListFiltersForField(dataSource, "filament_name")}
|
||||
filteredValue={getFiltersForField(typedFilters, "filament_name")}
|
||||
render={(value, record: ISpool) => {
|
||||
return {
|
||||
props: {
|
||||
style: {
|
||||
paddingLeft: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
},
|
||||
},
|
||||
children: (
|
||||
<Row wrap={false} justify="space-around" align="middle">
|
||||
{record.filament.color_hex && (
|
||||
<Col flex="none">
|
||||
<Icon
|
||||
component={SpoolIcon}
|
||||
style={{
|
||||
color: "#" + record.filament.color_hex,
|
||||
fontSize: 42,
|
||||
marginRight: 0,
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
)}
|
||||
<Col flex="auto">{value}</Col>
|
||||
</Row>
|
||||
),
|
||||
};
|
||||
}}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="used_weight"
|
||||
title="Used Weight"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "used_weight")}
|
||||
render={(value) => {
|
||||
return (
|
||||
<NumberFieldUnit
|
||||
value={value}
|
||||
unit="g"
|
||||
options={{
|
||||
maximumFractionDigits: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="remaining_weight"
|
||||
title="Estimated Remaining Weight"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "remaining_weight")}
|
||||
render={(value) => {
|
||||
if (value === null || value === undefined) {
|
||||
return <TextField value="Unknown" />;
|
||||
}
|
||||
return (
|
||||
<NumberFieldUnit
|
||||
value={Math.max(value, 0)}
|
||||
unit="g"
|
||||
options={{
|
||||
maximumFractionDigits: 1,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="location"
|
||||
title="Location"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "location")}
|
||||
filters={useListFiltersForField(dataSource, "location")}
|
||||
filteredValue={getFiltersForField(typedFilters, "location")}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="lot_nr"
|
||||
title="Lot Nr"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "lot_nr")}
|
||||
filters={useListFiltersForField(dataSource, "lot_nr")}
|
||||
filteredValue={getFiltersForField(typedFilters, "lot_nr")}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex={["first_used"]}
|
||||
title="First Used"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "first_used")}
|
||||
render={(value) => (
|
||||
<DateField
|
||||
hidden={!value}
|
||||
value={dayjs.utc(value).local()}
|
||||
title={dayjs.utc(value).local().format()}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex={["last_used"]}
|
||||
title="Last Used"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "last_used")}
|
||||
render={(value) => (
|
||||
<DateField
|
||||
hidden={!value}
|
||||
value={dayjs.utc(value).local()}
|
||||
title={dayjs.utc(value).local().format()}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex={["comment"]}
|
||||
title="Comment"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "comment")}
|
||||
/>
|
||||
{SortedColumn({
|
||||
id: "id",
|
||||
title: "Id",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{SpoolIconColumn({
|
||||
id: "filament_name",
|
||||
title: "Filament",
|
||||
color: (record: ISpoolCollapsed) => record.filament.color_hex,
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{NumberColumn({
|
||||
id: "used_weight",
|
||||
title: "Used Weight",
|
||||
unit: "g",
|
||||
decimals: 1,
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{NumberColumn({
|
||||
id: "remaining_weight",
|
||||
title: "Estimated Remaining Weight",
|
||||
unit: "g",
|
||||
decimals: 1,
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{FilteredColumn({
|
||||
id: "location",
|
||||
title: "Location",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{FilteredColumn({
|
||||
id: "lot_nr",
|
||||
title: "Lot Nr",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{DateColumn({
|
||||
id: "first_used",
|
||||
title: "First Used",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{DateColumn({
|
||||
id: "last_used",
|
||||
title: "Last Used",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{SortedColumn({
|
||||
id: "comment",
|
||||
title: "Comment",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
<Table.Column
|
||||
title="Actions"
|
||||
dataIndex="actions"
|
||||
render={(_, record: BaseRecord) => (
|
||||
<Space>
|
||||
<EditButton
|
||||
|
||||
108
client/src/pages/vendors/list.tsx
vendored
108
client/src/pages/vendors/list.tsx
vendored
@@ -5,24 +5,22 @@ import {
|
||||
List,
|
||||
EditButton,
|
||||
ShowButton,
|
||||
DateField,
|
||||
CloneButton,
|
||||
} from "@refinedev/antd";
|
||||
import { Table, Space, Button } from "antd";
|
||||
import { Table, Space, Button, Dropdown } from "antd";
|
||||
import dayjs from "dayjs";
|
||||
import utc from "dayjs/plugin/utc";
|
||||
import {
|
||||
genericSorter,
|
||||
getSortOrderForField,
|
||||
typeSorters,
|
||||
} from "../../utils/sorting";
|
||||
import { genericSorter, typeSorters } from "../../utils/sorting";
|
||||
import { genericFilterer, typeFilters } from "../../utils/filtering";
|
||||
import { IVendor } from "./model";
|
||||
import {
|
||||
TableState,
|
||||
useInitialTableState,
|
||||
useStoreInitialState,
|
||||
} from "../../utils/saveload";
|
||||
import { FilterOutlined } from "@ant-design/icons";
|
||||
import { EditOutlined, FilterOutlined } from "@ant-design/icons";
|
||||
import i18n from "../../i18n";
|
||||
import { DateColumn, SortedColumn } from "../../components/column";
|
||||
|
||||
dayjs.extend(utc);
|
||||
|
||||
@@ -58,16 +56,29 @@ 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
|
||||
);
|
||||
|
||||
// Type the sorters and filters
|
||||
const typedSorters = typeSorters<IVendor>(sorters);
|
||||
const typedFilters = typeFilters<IVendor>(filters);
|
||||
|
||||
// Store state in local storage
|
||||
useStoreInitialState("vendorList", {
|
||||
const tableState: TableState = {
|
||||
sorters,
|
||||
filters,
|
||||
pagination: { current, pageSize },
|
||||
});
|
||||
showColumns,
|
||||
};
|
||||
useStoreInitialState("vendorList", tableState);
|
||||
|
||||
// Collapse the dataSource to a mutable list
|
||||
const dataSource: IVendor[] = React.useMemo(
|
||||
@@ -97,6 +108,28 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
|
||||
>
|
||||
Clear Filters
|
||||
</Button>
|
||||
<Dropdown
|
||||
trigger={["click"]}
|
||||
menu={{
|
||||
items: allColumns.map((column) => ({
|
||||
key: column,
|
||||
label: i18n.t(`vendors.fields.${column}`),
|
||||
})),
|
||||
selectedKeys: showColumns,
|
||||
selectable: true,
|
||||
multiple: true,
|
||||
onDeselect: (keys) => {
|
||||
setShowColumns(keys.selectedKeys);
|
||||
},
|
||||
onSelect: (keys) => {
|
||||
setShowColumns(keys.selectedKeys);
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Button type="primary" icon={<EditOutlined />}>
|
||||
Hide Columns
|
||||
</Button>
|
||||
</Dropdown>
|
||||
{defaultButtons}
|
||||
</>
|
||||
)}
|
||||
@@ -115,37 +148,30 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
|
||||
}}
|
||||
rowKey="id"
|
||||
>
|
||||
<Table.Column
|
||||
dataIndex="id"
|
||||
title="Id"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "id")}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex="name"
|
||||
title="Name"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "name")}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex={["registered"]}
|
||||
title="Registered"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "registered")}
|
||||
render={(value) => (
|
||||
<DateField
|
||||
value={dayjs.utc(value).local()}
|
||||
title={dayjs.utc(value).local().format()}
|
||||
format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Table.Column
|
||||
dataIndex={["comment"]}
|
||||
title="Comment"
|
||||
sorter={true}
|
||||
sortOrder={getSortOrderForField(typedSorters, "comment")}
|
||||
/>
|
||||
{SortedColumn({
|
||||
id: "id",
|
||||
title: "Id",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{SortedColumn({
|
||||
id: "name",
|
||||
title: "Name",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{DateColumn({
|
||||
id: "registered",
|
||||
title: "Registered",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
{SortedColumn({
|
||||
id: "comment",
|
||||
title: "Comment",
|
||||
dataSource,
|
||||
tableState,
|
||||
})}
|
||||
<Table.Column
|
||||
title="Actions"
|
||||
dataIndex="actions"
|
||||
|
||||
@@ -7,10 +7,11 @@ interface Pagination {
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
interface TableState {
|
||||
export interface TableState {
|
||||
sorters: CrudSort[];
|
||||
filters: CrudFilter[];
|
||||
pagination: Pagination;
|
||||
showColumns?: string[];
|
||||
}
|
||||
|
||||
export function useInitialTableState(tableId: string): TableState {
|
||||
@@ -18,10 +19,13 @@ export function useInitialTableState(tableId: string): TableState {
|
||||
const savedSorters = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-sorters`) : null;
|
||||
const savedFilters = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-filters`) : null;
|
||||
const savedPagination = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-pagination`) : null;
|
||||
const savedShowColumns = isLocalStorageAvailable ? localStorage.getItem(`${tableId}-showColumns`) : null;
|
||||
|
||||
const sorters = savedSorters ? JSON.parse(savedSorters) : [{ field: "id", order: "asc" }];
|
||||
const filters = savedFilters ? JSON.parse(savedFilters) : [];
|
||||
const pagination = savedPagination ? JSON.parse(savedPagination) : { page: 1, pageSize: 20 };
|
||||
return { sorters, filters, pagination };
|
||||
const showColumns = savedShowColumns ? JSON.parse(savedShowColumns) : undefined;
|
||||
return { sorters, filters, pagination, showColumns };
|
||||
});
|
||||
return initialState;
|
||||
}
|
||||
@@ -44,4 +48,14 @@ export function useStoreInitialState(tableId: string, state: TableState) {
|
||||
localStorage.setItem(`${tableId}-pagination`, JSON.stringify(state.pagination));
|
||||
}
|
||||
}, [tableId, state.pagination]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (isLocalStorageAvailable) {
|
||||
if (state.showColumns === undefined) {
|
||||
localStorage.removeItem(`${tableId}-showColumns`);
|
||||
} else {
|
||||
localStorage.setItem(`${tableId}-showColumns`, JSON.stringify(state.showColumns));
|
||||
}
|
||||
}
|
||||
}, [tableId, state.showColumns]);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user