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

Client: Added a colored spool icon in the lists

Browse Source 
To indicate the filament color_hex field

Resolves #23
This commit is contained in:
Donkie
2023-07-08 23:11:50 +02:00
parent 936b11de24
commit 9561111b90
3 changed files with 80 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,11 +24,12 @@ import {
typeFilters,
useListFiltersForField,
} from "../../utils/filtering";
import { FilterOutlined } from "@ant-design/icons";
import Icon, { FilterOutlined } from "@ant-design/icons";
import {
useInitialTableState,
useStoreInitialState,
} from "../../utils/saveload";
import { ReactComponent as SpoolIcon } from "../../icon_spool.svg";
dayjs.extend(utc);
@@ -151,10 +152,32 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
<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 (
<>
{record.color_hex && (
<Icon
component={SpoolIcon}
style={{
color: "#" + record.color_hex,
fontSize: 40,
verticalAlign: "middle",
marginLeft: -10,
marginRight: 0,
marginTop: -20,
marginBottom: -20,
}}
/>
)}
{value}
</>
);
}}
/>
<Table.Column
dataIndex="material"

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

@@ -29,7 +29,8 @@ import {
useInitialTableState,
useStoreInitialState,
} from "../../utils/saveload";
import { FilterOutlined } from "@ant-design/icons";
import Icon, { FilterOutlined } from "@ant-design/icons";
import { ReactComponent as SpoolIcon } from "../../icon_spool.svg";
dayjs.extend(utc);
@@ -149,6 +150,27 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
sortOrder={getSortOrderForField(typedSorters, "filament_name")}
filters={useListFiltersForField(dataSource, "filament_name")}
filteredValue={getFiltersForField(typedFilters, "filament_name")}
render={(value, record: ISpool) => {
return (
<>
{record.filament.color_hex && (
<Icon
component={SpoolIcon}
style={{
color: "#" + record.filament.color_hex,
fontSize: 40,
verticalAlign: "middle",
marginLeft: -10,
marginRight: 0,
marginTop: -20,
marginBottom: -20,
}}
/>
)}
{value}
</>
);
}}
/>
<Table.Column
dataIndex="used_weight"