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

Updated client packages

Browse Source
This commit is contained in:
Donkie
2026-01-06 01:40:59 +01:00
parent 848f5dcc94
commit b627e151a8
27 changed files with 2603 additions and 1840 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/index.html
View File

@@ -7,9 +7,6 @@
<meta name="description" content="Spoolman - Keep track of your inventory of 3D-printer filament spools." />
<meta name="robots" content="noindex,nofollow" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
<script type="text/javascript" src="./config.js"></script>
<title>Spoolman</title>
</head>

4073
client/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

68
client/package.json
View File

@@ -7,53 +7,51 @@
"private": true,
"type": "module",
"dependencies": {
"@ant-design/icons": "^5.6.1",
"@ant-design/v5-patch-for-react-19": "^1.0.3",
"@loadable/component": "^5.16.7",
"@refinedev/antd": "^5.46.1",
"@refinedev/core": "^4.57.9",
"@refinedev/kbar": "^1.3.16",
"@refinedev/react-router": "^1.0.1",
"@refinedev/simple-rest": "^5.0.10",
"@tanstack/react-query": "^4.36.1",
"@tanstack/react-query-devtools": "^4.36.1",
"@types/loadable__component": "^5.13.9",
"@types/lodash": "^4.17.17",
"@refinedev/antd": "^6.0.3",
"@refinedev/core": "^5.0.7",
"@refinedev/kbar": "^2.0.1",
"@refinedev/react-router": "^2.0.3",
"@refinedev/simple-rest": "^6.0.1",
"@tanstack/react-query": "^5.90.16",
"@tanstack/react-query-devtools": "^5.91.2",
"@types/loadable__component": "^5.13.10",
"@types/lodash": "^4.17.21",
"@types/uuid": "^10.0.0",
"@yudiel/react-qr-scanner": "^1.2.10",
"antd": "^5.25.4",
"axios": "^1.12.2",
"axios": "^1.13.2",
"html-to-image": "^1.11.13",
"i18next": "^25.2.1",
"i18next-browser-languagedetector": "^8.1.0",
"i18next": "^25.7.3",
"i18next-browser-languagedetector": "^8.2.0",
"i18next-http-backend": "^3.0.2",
"lodash": "^4.17.21",
"react": "^19.1.0",
"react": "^19.2.3",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^19.1.0",
"react-i18next": "^15.5.2",
"react-router": "^7.6.2",
"react-to-print": "^3.1.0",
"uuid": "^11.1.0",
"vite-plugin-svgr": "^4.3.0",
"zustand": "^5.0.5"
"react-dom": "^19.2.3",
"react-i18next": "^16.5.1",
"react-router": "^7.11.0",
"react-to-print": "^3.2.0",
"uuid": "^13.0.0",
"vite-plugin-svgr": "^4.5.0",
"zustand": "^5.0.9"
},
"devDependencies": {
"@refinedev/cli": "^2.16.46",
"@refinedev/cli": "^2.16.50",
"@simbathesailor/use-what-changed": "^2.0.0",
"@types/node": "^22.15.30",
"@types/react": "^19.1.6",
"@types/react-dom": "^19.1.6",
"@typescript-eslint/eslint-plugin": "^8.33.1",
"@typescript-eslint/parser": "^8.33.1",
"@vitejs/plugin-react": "^4.5.1",
"eslint": "^9.28.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"typescript": "^5.8.3",
"vite": "^6.4.1",
"vite-plugin-mkcert": "^1.17.8",
"@types/node": "^25.0.3",
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"@typescript-eslint/eslint-plugin": "^8.52.0",
"@typescript-eslint/parser": "^8.52.0",
"@vitejs/plugin-react": "^5.1.2",
"eslint": "^9.39.2",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.26",
"typescript": "^5.9.3",
"vite": "^7.3.0",
"vite-plugin-mkcert": "^1.17.9",
"vite-plugin-pwa": "^1.2.0"
},
"scripts": {

9
client/src/App.tsx
View File

@@ -90,14 +90,7 @@ function App() {
<BrowserRouter basename={getBasePath() + "/"}>
<RefineKbarProvider>
<ColorModeContextProvider>
<ConfigProvider
locale={antdLocale}
theme={{
token: {
colorPrimary: "#dc7734",
},
}}
>
<ConfigProvider locale={antdLocale}>
<Refine
dataProvider={dataProvider(getAPIURL())}
notificationProvider={SpoolmanNotificationProvider}

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

@@ -116,8 +116,8 @@ function Column<Obj extends Entity>(
if (open && props.onFilterDropdownOpen) {
props.onFilterDropdownOpen();
}
}
}
},
};
if (props.dataId) {
columnProps.key = props.dataId;
}
@@ -186,7 +186,7 @@ export function RichColumn<Obj extends Entity>(
}
interface FilteredQueryColumnProps<Obj extends Entity> extends BaseColumnProps<Obj> {
filterValueQuery: UseQueryResult<string[] | ColumnFilterItem[]>;
filterValueQuery: UseQueryResult<string[] | ColumnFilterItem[], unknown>;
allowMultipleFilters?: boolean;
}

2
client/src/components/dataProvider.ts
View File

@@ -19,7 +19,7 @@ const dataProvider = (
if (pagination && pagination.mode == "server") {
const pageSize = pagination.pageSize ?? 10;
const offset = ((pagination.current ?? 1) - 1) * pageSize;
const offset = ((pagination.currentPage ?? 1) - 1) * pageSize;
queryParams["limit"] = pageSize;
queryParams["offset"] = offset;
}

4
client/src/components/header/index.tsx
View File

@@ -1,5 +1,5 @@
import { DownOutlined } from "@ant-design/icons";
import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd";
import type { RefineThemedLayoutHeaderProps } from "@refinedev/antd";
import { useGetLocale, useSetLocale } from "@refinedev/core";
import { Layout as AntdLayout, Button, Dropdown, MenuProps, Space, Switch, theme } from "antd";
import React, { useContext } from "react";
@@ -10,7 +10,7 @@ import QRCodeScannerModal from "../qrCodeScanner";
const { useToken } = theme;
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({ sticky }) => {
export const Header: React.FC<RefineThemedLayoutHeaderProps> = ({ sticky }) => {
const { token } = useToken();
const locale = useGetLocale();
const changeLanguage = useSetLocale();

10
client/src/components/layout.tsx
View File

@@ -1,4 +1,4 @@
import { ThemedLayoutV2, ThemedSiderV2, ThemedTitleV2 } from "@refinedev/antd";
import { ThemedLayout, ThemedSider, ThemedTitle } from "@refinedev/antd";
import { useTranslate } from "@refinedev/core";
import { Button } from "antd";
import { Footer } from "antd/es/layout/layout";
@@ -51,16 +51,16 @@ interface SpoolmanLayoutProps {
}
export const SpoolmanLayout: React.FC<SpoolmanLayoutProps> = ({ children }) => (
<ThemedLayoutV2
<ThemedLayout
Header={() => <Header sticky />}
Sider={() => (
<ThemedSiderV2
<ThemedSider
fixed
Title={({ collapsed }) => <ThemedTitleV2 collapsed={collapsed} text="Spoolman" icon={<Logo />} />}
Title={({ collapsed }) => <ThemedTitle collapsed={collapsed} text="Spoolman" icon={<Logo />} />}
/>
)}
Footer={() => <SpoolmanFooter />}
>
{children}
</ThemedLayoutV2>
</ThemedLayout>
);

6
client/src/components/numberField.tsx
View File

@@ -17,12 +17,12 @@ type Props = NumberFieldProps & {
*
* @see {@link https://refine.dev/docs/ui-frameworks/antd/components/fields/number} for more details.
*/
export const NumberFieldUnit: React.FC<Props> = ({ value, locale, options, ...rest }) => {
export const NumberFieldUnit: React.FC<Props> = ({ value, locale, options, unit }) => {
const number = Number(value);
return (
<Text {...rest}>
{toLocaleStringSupportsOptions() ? number.toLocaleString(locale, options) : number} {rest.unit}
<Text>
{toLocaleStringSupportsOptions() ? number.toLocaleString(locale, options) : number} {unit}
</Text>
);
};

2
client/src/components/version.tsx
View File

@@ -31,7 +31,7 @@ export const Version: React.FC = () => {
return <Spin />;
}
if (infoResult.isError) {
if (infoResult.isError || !infoResult.data) {
return <span>Unknown</span>;
}

5
client/src/contexts/color-mode/index.tsx
View File

@@ -1,4 +1,3 @@
import { RefineThemes } from "@refinedev/antd";
import { ConfigProvider, theme } from "antd";
import { createContext, PropsWithChildren, useEffect, useState } from "react";
@@ -40,8 +39,10 @@ export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({ children
<ConfigProvider
// you can change the theme colors here. example: ...RefineThemes.Magenta,
theme={{
...RefineThemes.Yellow,
algorithm: mode === "light" ? defaultAlgorithm : darkAlgorithm,
token: {
colorPrimary: "#dc7734",
},
}}
>
{children}

2
client/src/index.tsx
View File

@@ -1,4 +1,4 @@
import '@ant-design/v5-patch-for-react-19';
import "@ant-design/v5-patch-for-react-19";
import React from "react";
import { createRoot } from "react-dom/client";

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

@@ -7,21 +7,21 @@ import utc from "dayjs/plugin/utc";
import { useMemo, useState } from "react";
import { useNavigate } from "react-router";
import {
ActionsColumn,
CustomFieldColumn,
DateColumn,
FilteredQueryColumn,
NumberColumn,
RichColumn,
SortedColumn,
SpoolIconColumn,
ActionsColumn,
CustomFieldColumn,
DateColumn,
FilteredQueryColumn,
NumberColumn,
RichColumn,
SortedColumn,
SpoolIconColumn,
} from "../../components/column";
import { useLiveify } from "../../components/liveify";
import {
useSpoolmanArticleNumbers,
useSpoolmanFilamentNames,
useSpoolmanMaterials,
useSpoolmanVendors,
useSpoolmanArticleNumbers,
useSpoolmanFilamentNames,
useSpoolmanMaterials,
useSpoolmanVendors,
} from "../../components/otherModels";
import { removeUndefined } from "../../utils/filtering";
import { EntityType, useGetFields } from "../../utils/queryFields";
@@ -88,12 +88,12 @@ 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 } =
const { tableProps, sorters, setSorters, filters, setFilters, currentPage, pageSize, setCurrentPage } =
useTable<IFilamentCollapsed>({
syncWithLocation: false,
pagination: {
mode: "server",
current: initialState.pagination.current,
currentPage: initialState.pagination.currentPage,
pageSize: initialState.pagination.pageSize,
},
sorters: {
@@ -131,7 +131,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
const tableState: TableState = {
sorters,
filters,
pagination: { current, pageSize },
pagination: { currentPage: currentPage, pageSize },
showColumns,
};
useStoreInitialState(namespace, tableState);
@@ -175,7 +175,7 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
onClick={() => {
setFilters([], "replace");
setSorters([{ field: "id", order: "asc" }]);
setCurrent(1);
setCurrentPage(1);
}}
>
{t("buttons.clearFilters")}

4
client/src/pages/filaments/show.tsx
View File

@@ -21,10 +21,10 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
const navigate = useNavigate();
const extraFields = useGetFields(EntityType.filament);
const currencyFormatter = useCurrencyFormatter();
const { queryResult } = useShow<IFilament>({
const { query } = useShow<IFilament>({
liveMode: "auto",
});
const { data, isLoading } = queryResult;
const { data, isLoading } = query;
const record = data?.data;

16
client/src/pages/home/index.tsx
View File

@@ -6,8 +6,8 @@ import Title from "antd/es/typography/Title";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import React, { ReactNode } from "react";
import { Link } from "react-router";
import { Trans } from "react-i18next";
import { Link } from "react-router";
import Logo from "../../icon.svg?react";
import { ISpool } from "../spools/model";
@@ -32,7 +32,7 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
pagination: { pageSize: 1 },
});
const hasSpools = !spools.data || spools.data.data.length > 0;
const hasSpools = !spools.result || spools.result.data.length > 0;
const ResourceStatsCard = (props: { loading: boolean; value: number; resource: string; icon: ReactNode }) => (
<Col xs={12} md={6}>
@@ -89,20 +89,20 @@ export const Home: React.FC<IResourceComponentsProps> = () => {
<Row justify="center" gutter={[16, 16]} style={{ marginTop: "3em" }}>
<ResourceStatsCard
resource="spool"
value={spools.data?.total || 0}
loading={spools.isLoading}
value={spools.result?.total || 0}
loading={spools.query.isLoading}
icon={<FileOutlined />}
/>
<ResourceStatsCard
resource="filament"
value={filaments.data?.total || 0}
loading={filaments.isLoading}
value={filaments.result?.total || 0}
loading={filaments.query.isLoading}
icon={<HighlightOutlined />}
/>
<ResourceStatsCard
resource="vendor"
value={vendors.data?.total || 0}
loading={vendors.isLoading}
value={vendors.result?.total || 0}
loading={vendors.query.isLoading}
icon={<UserOutlined />}
/>
</Row>

8
client/src/pages/locations/components/locationContainer.tsx
View File

@@ -17,11 +17,7 @@ export function LocationContainer() {
const locationsSpoolOrders = useLocationsSpoolOrders();
const setLocationsSpoolOrders = useSetSetting<Record<string, number[]>>("locations_spoolorders");
const {
data: spoolData,
isLoading,
isError,
} = useList<ISpool>({
const { result: spoolData, query } = useList<ISpool>({
resource: "spool",
meta: {
queryParams: {
@@ -32,6 +28,8 @@ export function LocationContainer() {
mode: "off",
},
});
const isLoading = query.isLoading;
const isError = query.isError;
// Group spools by location
const spoolLocations = (() => {

8
client/src/pages/locations/functions.ts
View File

@@ -34,7 +34,9 @@ export function useRenameSpoolLocation() {
return await response.text();
},
onMutate: async (value) => {
await queryClient.cancelQueries(queryKeyList);
await queryClient.cancelQueries({
queryKey: queryKeyList
});
// Optimistically update all spools with matching location to the new one
queryClient.setQueriesData<GetListResponse<ISpool>>({ queryKey: queryKeyList }, (old) => {
@@ -71,7 +73,9 @@ export function useRenameSpoolLocation() {
},
onSuccess: (_data, _value) => {
// Mutation succeeded, refetch
queryClient.invalidateQueries(queryKey);
queryClient.invalidateQueries({
queryKey: queryKey
});
},
});
}

6
client/src/pages/printing/spoolSelectModal.tsx
View File

@@ -42,7 +42,7 @@ const SpoolSelectModal: React.FC<Props> = ({ description, onContinue }) => {
const [messageApi, contextHolder] = message.useMessage();
const navigate = useNavigate();
const { tableProps, sorters, filters, current, pageSize } = useTable<ISpoolCollapsed>({
const { tableProps, sorters, filters, currentPage, pageSize } = useTable<ISpoolCollapsed>({
resource: "spool",
meta: {
queryParams: {
@@ -52,7 +52,7 @@ const SpoolSelectModal: React.FC<Props> = ({ description, onContinue }) => {
syncWithLocation: false,
pagination: {
mode: "off",
current: 1,
currentPage: 1,
pageSize: 10,
},
sorters: {
@@ -75,7 +75,7 @@ const SpoolSelectModal: React.FC<Props> = ({ description, onContinue }) => {
const tableState: TableState = {
sorters,
filters,
pagination: { current, pageSize },
pagination: { currentPage: currentPage, pageSize },
};
// Collapse the dataSource to a mutable list and add a filament_name field

2
client/src/pages/settings/generalSettings.tsx
View File

@@ -105,7 +105,7 @@ export function GeneralSettings() {
</Form.Item>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isLoading}>
<Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isPending}>
{t("buttons.save")}
</Button>
</Form.Item>

6
client/src/pages/spools/functions.tsx
View File

@@ -2,6 +2,7 @@ import { useSelect, useTranslate } from "@refinedev/core";
import { useQueries } from "@tanstack/react-query";
import { Form, InputNumber, Modal, Radio } from "antd";
import { useForm } from "antd/es/form/Form";
import type { InputNumberRef } from "rc-input-number";
import { useCallback, useMemo, useRef, useState } from "react";
import { formatLength, formatWeight } from "../../utils/parsing";
import { SpoolType, useGetExternalDBFilaments } from "../../utils/queryExternalDB";
@@ -63,7 +64,6 @@ export async function useSpoolFilamentMeasure(spool: ISpool, weight: number) {
await fetch(request, init);
}
/**
* Returns an array of queries using the useQueries hook from @tanstack/react-query.
* Each query fetches a spool by its ID from the server.
@@ -126,7 +126,7 @@ interface SelectOption {
export function useGetFilamentSelectOptions() {
// Setup hooks
const t = useTranslate();
const { queryResult: internalFilaments } = useSelect<IFilament>({
const { query: internalFilaments } = useSelect<IFilament>({
resource: "filament",
});
const externalFilaments = useGetExternalDBFilaments();
@@ -201,7 +201,7 @@ export function useSpoolAdjustModal() {
const [curSpool, setCurSpool] = useState<ISpool | null>(null);
const [measurementType, setMeasurementType] = useState<MeasurementType>("length");
const inputNumberRef = useRef<HTMLInputElement | null>(null);
const inputNumberRef = useRef<InputNumberRef | null>(null);
const openSpoolAdjustModal = useCallback((spool: ISpool) => {
setCurSpool(spool);

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

@@ -1,12 +1,12 @@
import {
EditOutlined,
EyeOutlined,
FilterOutlined,
InboxOutlined,
PlusSquareOutlined,
PrinterOutlined,
ToolOutlined,
ToTopOutlined,
EditOutlined,
EyeOutlined,
FilterOutlined,
InboxOutlined,
PlusSquareOutlined,
PrinterOutlined,
ToolOutlined,
ToTopOutlined,
} from "@ant-design/icons";
import { List, useTable } from "@refinedev/antd";
import { IResourceComponentsProps, useInvalidate, useNavigation, useTranslate } from "@refinedev/core";
@@ -16,22 +16,22 @@ import utc from "dayjs/plugin/utc";
import { useCallback, useMemo, useState } from "react";
import { useNavigate } from "react-router";
import {
Action,
ActionsColumn,
CustomFieldColumn,
DateColumn,
FilteredQueryColumn,
NumberColumn,
RichColumn,
SortedColumn,
SpoolIconColumn,
Action,
ActionsColumn,
CustomFieldColumn,
DateColumn,
FilteredQueryColumn,
NumberColumn,
RichColumn,
SortedColumn,
SpoolIconColumn,
} from "../../components/column";
import { useLiveify } from "../../components/liveify";
import {
useSpoolmanFilamentFilter,
useSpoolmanLocations,
useSpoolmanLotNumbers,
useSpoolmanMaterials,
useSpoolmanFilamentFilter,
useSpoolmanLocations,
useSpoolmanLotNumbers,
useSpoolmanMaterials,
} from "../../components/otherModels";
import { removeUndefined } from "../../utils/filtering";
import { EntityType, useGetFields } from "../../utils/queryFields";
@@ -117,7 +117,7 @@ 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 } =
const { tableProps, sorters, setSorters, filters, setFilters, currentPage, pageSize, setCurrentPage } =
useTable<ISpoolCollapsed>({
meta: {
queryParams: {
@@ -127,7 +127,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
syncWithLocation: false,
pagination: {
mode: "server",
current: initialState.pagination.current,
currentPage: initialState.pagination.currentPage,
pageSize: initialState.pagination.pageSize,
},
sorters: {
@@ -165,7 +165,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
const tableState: TableState = {
sorters,
filters,
pagination: { current, pageSize },
pagination: { currentPage: currentPage, pageSize },
showColumns,
};
useStoreInitialState(namespace, tableState);
@@ -284,7 +284,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
onClick={() => {
setFilters([], "replace");
setSorters([{ field: "id", order: "asc" }]);
setCurrent(1);
setCurrentPage(1);
}}
>
{t("buttons.clearFilters")}

26
client/src/pages/spools/show.tsx
View File

@@ -1,4 +1,3 @@
import { getBasePath } from "../../utils/url";
import { InboxOutlined, PrinterOutlined, ToTopOutlined, ToolOutlined } from "@ant-design/icons";
import { DateField, NumberField, Show, TextField } from "@refinedev/antd";
import { IResourceComponentsProps, useInvalidate, useShow, useTranslate } from "@refinedev/core";
@@ -12,6 +11,7 @@ import SpoolIcon from "../../components/spoolIcon";
import { enrichText } from "../../utils/parsing";
import { EntityType, useGetFields } from "../../utils/queryFields";
import { useCurrencyFormatter } from "../../utils/settings";
import { getBasePath } from "../../utils/url";
import { IFilament } from "../filaments/model";
import { setSpoolArchived, useSpoolAdjustModal } from "./functions";
import { ISpool } from "./model";
@@ -27,10 +27,10 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
const currencyFormatter = useCurrencyFormatter();
const invalidate = useInvalidate();
const { queryResult } = useShow<ISpool>({
const { query } = useShow<ISpool>({
liveMode: "auto",
});
const { data, isLoading } = queryResult;
const { data, isLoading } = query;
const record = data?.data;
@@ -107,9 +107,9 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
const colorObj = record?.filament.multi_color_hexes
? {
colors: record.filament.multi_color_hexes.split(","),
vertical: record.filament.multi_color_direction === "longitudinal",
}
colors: record.filament.multi_color_hexes.split(","),
vertical: record.filament.multi_color_direction === "longitudinal",
}
: record?.filament.color_hex;
return (
@@ -118,17 +118,19 @@ export const SpoolShow: React.FC<IResourceComponentsProps> = () => {
title={record ? formatTitle(record) : ""}
headerButtons={({ defaultButtons }) => (
<>
<Button
type="primary"
icon={<ToolOutlined />}
onClick={() => record && openSpoolAdjustModal(record)}
>
<Button type="primary" icon={<ToolOutlined />} onClick={() => record && openSpoolAdjustModal(record)}>
{t("spool.titles.adjust")}
</Button>
<Button
type="primary"
icon={<PrinterOutlined />}
href={getBasePath() + "/spool/print?spools=" + record?.id + "&return=" + encodeURIComponent(window.location.pathname)}
href={
getBasePath() +
"/spool/print?spools=" +
record?.id +
"&return=" +
encodeURIComponent(window.location.pathname)
}
>
{t("printing.qrcode.button")}
</Button>

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

@@ -7,12 +7,12 @@ import utc from "dayjs/plugin/utc";
import { useCallback, useMemo, useState } from "react";
import { useNavigate } from "react-router";
import {
ActionsColumn,
CustomFieldColumn,
DateColumn,
NumberColumn,
RichColumn,
SortedColumn,
ActionsColumn,
CustomFieldColumn,
DateColumn,
NumberColumn,
RichColumn,
SortedColumn,
} from "../../components/column";
import { useLiveify } from "../../components/liveify";
import { removeUndefined } from "../../utils/filtering";
@@ -38,32 +38,33 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
const initialState = useInitialTableState(namespace);
// Fetch data from the API
const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent } = useTable<IVendor>({
syncWithLocation: false,
pagination: {
mode: "server",
current: initialState.pagination.current,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "server",
initial: initialState.sorters,
},
filters: {
mode: "server",
initial: initialState.filters,
},
liveMode: "manual",
onLiveEvent(event) {
if (event.type === "created" || event.type === "deleted") {
// updated is handled by the liveify
invalidate({
resource: "vendor",
invalidates: ["list"],
});
}
},
});
const { tableProps, sorters, setSorters, filters, setFilters, currentPage, pageSize, setCurrentPage } =
useTable<IVendor>({
syncWithLocation: false,
pagination: {
mode: "server",
currentPage: initialState.pagination.currentPage,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "server",
initial: initialState.sorters,
},
filters: {
mode: "server",
initial: initialState.filters,
},
liveMode: "manual",
onLiveEvent(event) {
if (event.type === "created" || event.type === "deleted") {
// updated is handled by the liveify
invalidate({
resource: "vendor",
invalidates: ["list"],
});
}
},
});
// Create state for the columns to show
const [showColumns, setShowColumns] = useState<string[]>(initialState.showColumns ?? allColumns);
@@ -72,7 +73,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
const tableState: TableState = {
sorters,
filters,
pagination: { current, pageSize },
pagination: { currentPage, pageSize },
showColumns,
};
useStoreInitialState(namespace, tableState);
@@ -117,7 +118,7 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
onClick={() => {
setFilters([], "replace");
setSorters([{ field: "id", order: "asc" }]);
setCurrent(1);
setCurrentPage(1);
}}
>
{t("buttons.clearFilters")}

4
client/src/pages/vendors/show.tsx vendored
View File

@@ -17,10 +17,10 @@ export const VendorShow: React.FC<IResourceComponentsProps> = () => {
const t = useTranslate();
const extraFields = useGetFields(EntityType.vendor);
const { queryResult } = useShow<IVendor>({
const { query } = useShow<IVendor>({
liveMode: "auto",
});
const { data, isLoading } = queryResult;
const { data, isLoading } = query;
const record = data?.data;

12
client/src/utils/queryFields.ts
View File

@@ -66,7 +66,9 @@ export function useSetField(entity_type: EntityType) {
},
onMutate: async ({ key, params }) => {
// Cancel any outgoing refetches (so they don't overwrite our optimistic update)
await queryClient.cancelQueries(["fields", entity_type]);
await queryClient.cancelQueries({
queryKey: ["fields", entity_type]
});
// Snapshot the previous value
const previousFields = queryClient.getQueryData<Field[]>(["fields", entity_type]);
@@ -101,7 +103,9 @@ export function useSetField(entity_type: EntityType) {
},
onSettled: () => {
// Invalidate and refetch
queryClient.invalidateQueries(["fields", entity_type]);
queryClient.invalidateQueries({
queryKey: ["fields", entity_type]
});
},
});
}
@@ -124,7 +128,9 @@ export function useDeleteField(entity_type: EntityType) {
},
onSuccess: () => {
// Invalidate and refetch
queryClient.invalidateQueries(["fields", entity_type]);
queryClient.invalidateQueries({
queryKey: ["fields", entity_type]
});
},
});
}

8
client/src/utils/querySettings.ts
View File

@@ -52,7 +52,9 @@ export function useSetSetting<T>(key: string) {
return response.json();
},
onMutate: async (value) => {
await queryClient.cancelQueries(["settings", key]);
await queryClient.cancelQueries({
queryKey: ["settings", key]
});
const previousValue = queryClient.getQueryData<SettingResponseValue>(["settings", key]);
queryClient.setQueryData<SettingResponseValue>(["settings", key], (old) =>
old ? { ...old, value: JSON.stringify(value) } : undefined
@@ -64,7 +66,9 @@ export function useSetSetting<T>(key: string) {
},
onSuccess: (_data, _value) => {
// Invalidate and refetch
queryClient.invalidateQueries(["settings", key]);
queryClient.invalidateQueries({
queryKey: ["settings", key]
});
},
});
}

2
client/src/utils/saveload.ts
View File

@@ -2,7 +2,7 @@ import { CrudFilter, CrudSort } from "@refinedev/core";
import { useEffect, useState } from "react";
import { isLocalStorageAvailable } from "./support";
interface Pagination {
current: number;
currentPage: number;
pageSize: number;
}