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

Client: Reformatted all files with new line length

Browse Source
This commit is contained in:
Donkie
2023-08-12 19:54:24 +02:00
parent 163aa2badc
commit e81bf8b8e7
18 changed files with 159 additions and 573 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
client/src/App.tsx
View File

@@ -1,13 +1,7 @@
import { Refine } from "@refinedev/core";
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
import {
ErrorComponent,
notificationProvider,
ThemedLayoutV2,
ThemedSiderV2,
ThemedTitleV2,
} from "@refinedev/antd";
import { ErrorComponent, notificationProvider, ThemedLayoutV2, ThemedSiderV2, ThemedTitleV2 } from "@refinedev/antd";
import "@refinedev/antd/dist/reset.css";
import routerBindings, {
@@ -21,11 +15,7 @@ import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import { Header } from "./components/header";
import { ColorModeContextProvider } from "./contexts/color-mode";
import { ReactComponent as Logo } from "./icon.svg";
import {
FileOutlined,
HighlightOutlined,
UserOutlined,
} from "@ant-design/icons";
import { FileOutlined, HighlightOutlined, UserOutlined } from "@ant-design/icons";
import { ConfigProvider } from "antd";
import { Footer } from "antd/es/layout/layout";
import { Version } from "./components/version";
@@ -40,14 +30,10 @@ interface PageProps {
mode?: "create" | "clone";
}
const LoadablePage = loadable(
(props: PageProps) => import(`./pages/${props.resource}/${props.page}.tsx`),
{
fallback: <div>Page is Loading...</div>,
cacheKey: (props: PageProps) =>
`${props.resource}-${props.page}-${props.mode ?? ""}`,
}
);
const LoadablePage = loadable((props: PageProps) => import(`./pages/${props.resource}/${props.page}.tsx`), {
fallback: <div>Page is Loading...</div>,
cacheKey: (props: PageProps) => `${props.resource}-${props.page}-${props.mode ?? ""}`,
});
function App() {
const { t, i18n } = useTranslation();
@@ -63,9 +49,7 @@ function App() {
React.useEffect(() => {
const fetchLocale = async () => {
const locale = await import(
`./../node_modules/antd/es/locale/${languages[
i18n.language
].fullCode.replace("-", "_")}.js`
`./../node_modules/antd/es/locale/${languages[i18n.language].fullCode.replace("-", "_")}.js`
);
setAntdLocale(locale.default);
};
@@ -77,8 +61,8 @@ function App() {
<>
<h1>Missing API URL</h1>
<p>
App was built without an API URL. Please set the VITE_APIURL
environment variable to the URL of your Spoolman API.
App was built without an API URL. Please set the VITE_APIURL environment variable to the URL of your Spoolman
API.
</p>
</>
);
@@ -154,11 +138,7 @@ function App() {
<ThemedSiderV2
fixed
Title={({ collapsed }) => (
<ThemedTitleV2
collapsed={collapsed}
text="Spoolman"
icon={<Logo />}
/>
<ThemedTitleV2 collapsed={collapsed} text="Spoolman" icon={<Logo />} />
)}
/>
)}
@@ -172,117 +152,30 @@ function App() {
</ThemedLayoutV2>
}
>
<Route
index
element={<NavigateToResource resource="spool" />}
/>
<Route index element={<NavigateToResource resource="spool" />} />
<Route path="/spool">
<Route
index
element={<LoadablePage resource="spools" page="list" />}
/>
<Route
path="create"
element={
<LoadablePage
resource="spools"
page="create"
mode="create"
/>
}
/>
<Route
path="clone/:id"
element={
<LoadablePage
resource="spools"
page="create"
mode="clone"
/>
}
/>
<Route
path="edit/:id"
element={<LoadablePage resource="spools" page="edit" />}
/>
<Route
path="show/:id"
element={<LoadablePage resource="spools" page="show" />}
/>
<Route index element={<LoadablePage resource="spools" page="list" />} />
<Route path="create" element={<LoadablePage resource="spools" page="create" mode="create" />} />
<Route path="clone/:id" element={<LoadablePage resource="spools" page="create" mode="clone" />} />
<Route path="edit/:id" element={<LoadablePage resource="spools" page="edit" />} />
<Route path="show/:id" element={<LoadablePage resource="spools" page="show" />} />
</Route>
<Route path="/filament">
<Route
index
element={
<LoadablePage resource="filaments" page="list" />
}
/>
<Route
path="create"
element={
<LoadablePage
resource="filaments"
page="create"
mode="create"
/>
}
/>
<Route index element={<LoadablePage resource="filaments" page="list" />} />
<Route path="create" element={<LoadablePage resource="filaments" page="create" mode="create" />} />
<Route
path="clone/:id"
element={
<LoadablePage
resource="filaments"
page="create"
mode="clone"
/>
}
/>
<Route
path="edit/:id"
element={
<LoadablePage resource="filaments" page="edit" />
}
/>
<Route
path="show/:id"
element={
<LoadablePage resource="filaments" page="show" />
}
element={<LoadablePage resource="filaments" page="create" mode="clone" />}
/>
<Route path="edit/:id" element={<LoadablePage resource="filaments" page="edit" />} />
<Route path="show/:id" element={<LoadablePage resource="filaments" page="show" />} />
</Route>
<Route path="/vendor">
<Route
index
element={<LoadablePage resource="vendors" page="list" />}
/>
<Route
path="create"
element={
<LoadablePage
resource="vendors"
page="create"
mode="create"
/>
}
/>
<Route
path="clone/:id"
element={
<LoadablePage
resource="vendors"
page="create"
mode="clone"
/>
}
/>
<Route
path="edit/:id"
element={<LoadablePage resource="vendors" page="edit" />}
/>
<Route
path="show/:id"
element={<LoadablePage resource="vendors" page="show" />}
/>
<Route index element={<LoadablePage resource="vendors" page="list" />} />
<Route path="create" element={<LoadablePage resource="vendors" page="create" mode="create" />} />
<Route path="clone/:id" element={<LoadablePage resource="vendors" page="create" mode="clone" />} />
<Route path="edit/:id" element={<LoadablePage resource="vendors" page="edit" />} />
<Route path="show/:id" element={<LoadablePage resource="vendors" page="show" />} />
</Route>
<Route path="*" element={<ErrorComponent />} />
</Route>

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

@@ -1,11 +1,7 @@
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 { getFiltersForField, typeFilters, useListFiltersForField } from "../utils/filtering";
import { TableState } from "../utils/saveload";
import { getSortOrderForField, typeSorters } from "../utils/sorting";
import { NumberFieldUnit } from "./numberField";
@@ -40,14 +36,9 @@ interface CustomColumnProps<Obj> {
) => React.HTMLAttributes<any> | React.TdHTMLAttributes<any>;
}
function Column<Obj>(
props: BaseColumnProps<Obj> & FilteredColumnProps & CustomColumnProps<Obj>
) {
function Column<Obj>(props: BaseColumnProps<Obj> & FilteredColumnProps & CustomColumnProps<Obj>) {
const t = useTranslate();
if (
props.tableState.showColumns &&
!props.tableState.showColumns.includes(props.id)
) {
if (props.tableState.showColumns && !props.tableState.showColumns.includes(props.id)) {
return <></>;
}
const typedSorters = typeSorters<Obj>(props.tableState.sorters);

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

@@ -1,15 +1,7 @@
import { DownOutlined } from "@ant-design/icons";
import type { RefineThemedLayoutV2HeaderProps } from "@refinedev/antd";
import { useGetLocale, useSetLocale } from "@refinedev/core";
import {
Button,
Dropdown,
Layout as AntdLayout,
MenuProps,
Space,
Switch,
theme,
} from "antd";
import { Button, Dropdown, Layout as AntdLayout, MenuProps, Space, Switch, theme } from "antd";
import React, { useContext } from "react";
import { ColorModeContext } from "../../contexts/color-mode";
@@ -19,9 +11,7 @@ import QRCodeScannerModal from "../qrCodeScanner";
const { useToken } = theme;
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
sticky,
}) => {
export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({ sticky }) => {
const { token } = useToken();
const locale = useGetLocale();
const changeLanguage = useSetLocale();
@@ -29,19 +19,12 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
const currentLocale = locale();
const menuItems: MenuProps["items"] = [...(Object.keys(languages) || [])]
.sort()
.map((lang: string) => ({
key: lang,
onClick: () => changeLanguage(lang),
icon: (
<span
className={"fi fi-" + languages[lang].countryCode}
style={{ marginRight: 8 }}
/>
),
label: languages[lang].name,
}));
const menuItems: MenuProps["items"] = [...(Object.keys(languages) || [])].sort().map((lang: string) => ({
key: lang,
onClick: () => changeLanguage(lang),
icon: <span className={"fi fi-" + languages[lang].countryCode} style={{ marginRight: 8 }} />,
label: languages[lang].name,
}));
const headerStyles: React.CSSProperties = {
backgroundColor: token.colorBgElevated,
@@ -69,11 +52,7 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = ({
>
<Button type="text">
<Space>
<span
className={
"fi fi-" + languages[currentLocale ?? "en"].countryCode
}
/>
<span className={"fi fi-" + languages[currentLocale ?? "en"].countryCode} />
{languages[currentLocale ?? "en"].name}
<DownOutlined />
</Space>

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

@@ -5,11 +5,7 @@ import { NumberFieldProps } from "@refinedev/antd/dist/components/fields/types";
const { Text } = Typography;
function toLocaleStringSupportsOptions() {
return !!(
typeof Intl == "object" &&
Intl &&
typeof Intl.NumberFormat == "function"
);
return !!(typeof Intl == "object" && Intl && typeof Intl.NumberFormat == "function");
}
type Props = NumberFieldProps & {
@@ -21,20 +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, ...rest }) => {
const number = Number(value);
return (
<Text {...rest}>
{toLocaleStringSupportsOptions()
? number.toLocaleString(locale, options)
: number}{" "}
{rest.unit}
{toLocaleStringSupportsOptions() ? number.toLocaleString(locale, options) : number} {rest.unit}
</Text>
);
};

17
client/src/components/qrCodeScanner.tsx
View File

@@ -22,18 +22,8 @@ const QRCodeScannerModal: React.FC = () => {
return (
<>
<FloatButton
type="primary"
onClick={() => setVisible(true)}
icon={<CameraOutlined />}
shape="circle"
/>
<Modal
open={visible}
onCancel={() => setVisible(false)}
footer={null}
title={t("scanner.title")}
>
<FloatButton type="primary" onClick={() => setVisible(true)} icon={<CameraOutlined />} shape="circle" />
<Modal open={visible} onCancel={() => setVisible(false)} footer={null} title={t("scanner.title")}>
<Space direction="vertical" style={{ width: "100%" }}>
<p>{t("scanner.description")}</p>
<QrScanner
@@ -60,8 +50,7 @@ const QRCodeScannerModal: React.FC = () => {
setLastError(t("scanner.error.notAllowed"));
} else if (
error.name === "InsecureContextError" ||
(location.protocol !== "https:" &&
navigator.mediaDevices === undefined)
(location.protocol !== "https:" && navigator.mediaDevices === undefined)
) {
setLastError(t("scanner.error.insecureContext"));
} else if (error.name === "StreamApiNotSupportedError") {

35
client/src/components/spoolSelectModal.tsx
View File

@@ -20,12 +20,7 @@ interface ISpoolCollapsed extends ISpool {
material?: string;
}
const SpoolSelectModal: React.FC<Props> = ({
visible,
description,
onCancel,
onContinue,
}) => {
const SpoolSelectModal: React.FC<Props> = ({ visible, description, onCancel, onContinue }) => {
const [selectedItems, setSelectedItems] = useState<number[]>([]);
const [showArchived, setShowArchived] = useState(false);
const [messageApi, contextHolder] = message.useMessage();
@@ -65,8 +60,7 @@ const SpoolSelectModal: React.FC<Props> = ({
if (element.filament.vendor && "name" in element.filament.vendor) {
filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
} else {
filament_name =
element.filament.name ?? element.filament.id.toString();
filament_name = element.filament.name ?? element.filament.id.toString();
}
return {
...element,
@@ -91,9 +85,7 @@ const SpoolSelectModal: React.FC<Props> = ({
// Function to add/remove all filtered items from selected items
const selectUnselectFiltered = (select: boolean) => {
setSelectedItems((prevSelected) => {
const filtered = filteredDataSource
.map((spool) => spool.id)
.filter((spool) => !prevSelected.includes(spool));
const filtered = filteredDataSource.map((spool) => spool.id).filter((spool) => !prevSelected.includes(spool));
return select ? [...prevSelected, ...filtered] : filtered;
});
};
@@ -101,16 +93,12 @@ const SpoolSelectModal: React.FC<Props> = ({
// Handler for selecting/unselecting individual items
const handleSelectItem = (item: number) => {
setSelectedItems((prevSelected) =>
prevSelected.includes(item)
? prevSelected.filter((selected) => selected !== item)
: [...prevSelected, item]
prevSelected.includes(item) ? prevSelected.filter((selected) => selected !== item) : [...prevSelected, item]
);
};
// State for the select/unselect all checkbox
const isAllFilteredSelected = filteredDataSource.every((spool) =>
selectedItems.includes(spool.id)
);
const isAllFilteredSelected = filteredDataSource.every((spool) => selectedItems.includes(spool.id));
return (
<Modal
@@ -125,9 +113,7 @@ const SpoolSelectModal: React.FC<Props> = ({
});
return;
}
onContinue(
dataSource.filter((spool) => selectedItems.includes(spool.id))
);
onContinue(dataSource.filter((spool) => selectedItems.includes(spool.id)));
}}
width={600}
>
@@ -144,10 +130,7 @@ const SpoolSelectModal: React.FC<Props> = ({
<Table.Column
width={50}
render={(_, item: ISpool) => (
<Checkbox
checked={selectedItems.includes(item.id)}
onChange={() => handleSelectItem(item.id)}
/>
<Checkbox checked={selectedItems.includes(item.id)} onChange={() => handleSelectItem(item.id)} />
)}
/>
{SortedColumn({
@@ -197,9 +180,7 @@ const SpoolSelectModal: React.FC<Props> = ({
// Remove archived spools from selected items
setSelectedItems((prevSelected) =>
prevSelected.filter(
(selected) =>
dataSource.find((spool) => spool.id === selected)
?.archived !== true
(selected) => dataSource.find((spool) => spool.id === selected)?.archived !== true
)
);
}

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

@@ -7,22 +7,14 @@ type ColorModeContextType = {
setMode: (mode: string) => void;
};
export const ColorModeContext = createContext<ColorModeContextType>(
{} as ColorModeContextType
);
export const ColorModeContext = createContext<ColorModeContextType>({} as ColorModeContextType);
export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({
children,
}) => {
export const ColorModeContextProvider: React.FC<PropsWithChildren> = ({ children }) => {
const colorModeFromLocalStorage = localStorage.getItem("colorMode");
const isSystemPreferenceDark = window?.matchMedia(
"(prefers-color-scheme: dark)"
).matches;
const isSystemPreferenceDark = window?.matchMedia("(prefers-color-scheme: dark)").matches;
const systemPreference = isSystemPreferenceDark ? "dark" : "light";
const [mode, setMode] = useState(
colorModeFromLocalStorage || systemPreference
);
const [mode, setMode] = useState(colorModeFromLocalStorage || systemPreference);
useEffect(() => {
window.localStorage.setItem("colorMode", mode);

27
client/src/pages/filaments/create.tsx
View File

@@ -11,9 +11,7 @@ interface CreateOrCloneProps {
mode: "create" | "clone";
}
export const FilamentCreate: React.FC<
IResourceComponentsProps & CreateOrCloneProps
> = (props) => {
export const FilamentCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
const t = useTranslate();
const { formProps, saveButtonProps, formLoading } = useForm<IFilament>();
@@ -96,12 +94,7 @@ export const FilamentCreate: React.FC<
},
]}
>
<InputNumber
min={0}
precision={2}
formatter={numberFormatter}
parser={numberParser}
/>
<InputNumber min={0} precision={2} formatter={numberFormatter} parser={numberParser} />
</Form.Item>
<Form.Item
label={t("filament.fields.density")}
@@ -112,13 +105,7 @@ export const FilamentCreate: React.FC<
},
]}
>
<InputNumber
min={0}
addonAfter="g/cm³"
precision={3}
formatter={numberFormatter}
parser={numberParser}
/>
<InputNumber min={0} addonAfter="g/cm³" precision={3} formatter={numberFormatter} parser={numberParser} />
</Form.Item>
<Form.Item
label={t("filament.fields.diameter")}
@@ -129,13 +116,7 @@ export const FilamentCreate: React.FC<
},
]}
>
<InputNumber
min={0}
addonAfter="mm"
precision={2}
formatter={numberFormatter}
parser={numberParser}
/>
<InputNumber min={0} addonAfter="mm" precision={2} formatter={numberFormatter} parser={numberParser} />
</Form.Item>
<Form.Item
label={t("filament.fields.weight")}

35
client/src/pages/filaments/edit.tsx
View File

@@ -1,14 +1,7 @@
import React from "react";
import { IResourceComponentsProps, useTranslate } from "@refinedev/core";
import { Edit, useForm, useSelect } from "@refinedev/antd";
import {
Form,
Input,
DatePicker,
Select,
InputNumber,
ColorPicker,
} from "antd";
import { Form, Input, DatePicker, Select, InputNumber, ColorPicker } from "antd";
import dayjs from "dayjs";
import TextArea from "antd/es/input/TextArea";
import { numberFormatter, numberParser } from "../../utils/parsing";
@@ -26,8 +19,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
});
if (formProps.initialValues) {
formProps.initialValues["vendor_id"] =
formProps.initialValues["vendor"]?.id;
formProps.initialValues["vendor_id"] = formProps.initialValues["vendor"]?.id;
}
return (
@@ -124,12 +116,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
},
]}
>
<InputNumber
min={0}
precision={2}
formatter={numberFormatter}
parser={numberParser}
/>
<InputNumber min={0} precision={2} formatter={numberFormatter} parser={numberParser} />
</Form.Item>
<Form.Item
label={t("filament.fields.density")}
@@ -140,13 +127,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
},
]}
>
<InputNumber
min={0}
addonAfter="g/cm³"
precision={3}
formatter={numberFormatter}
parser={numberParser}
/>
<InputNumber min={0} addonAfter="g/cm³" precision={3} formatter={numberFormatter} parser={numberParser} />
</Form.Item>
<Form.Item
label={t("filament.fields.diameter")}
@@ -157,13 +138,7 @@ export const FilamentEdit: React.FC<IResourceComponentsProps> = () => {
},
]}
>
<InputNumber
min={0}
addonAfter="mm"
precision={2}
formatter={numberFormatter}
parser={numberParser}
/>
<InputNumber min={0} addonAfter="mm" precision={2} formatter={numberFormatter} parser={numberParser} />
</Form.Item>
<Form.Item
label={t("filament.fields.weight")}

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

@@ -1,16 +1,6 @@
import React from "react";
import {
IResourceComponentsProps,
BaseRecord,
useTranslate,
} from "@refinedev/core";
import {
useTable,
List,
EditButton,
ShowButton,
CloneButton,
} from "@refinedev/antd";
import { IResourceComponentsProps, BaseRecord, useTranslate } from "@refinedev/core";
import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd";
import { Table, Space, Button, Dropdown } from "antd";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
@@ -18,18 +8,8 @@ import { IFilament } from "./model";
import { genericSorter, typeSorters } from "../../utils/sorting";
import { genericFilterer, typeFilters } from "../../utils/filtering";
import { EditOutlined, FilterOutlined } from "@ant-design/icons";
import {
TableState,
useInitialTableState,
useStoreInitialState,
} from "../../utils/saveload";
import {
DateColumn,
FilteredColumn,
NumberColumn,
SortedColumn,
SpoolIconColumn,
} from "../../components/column";
import { TableState, useInitialTableState, useStoreInitialState } from "../../utils/saveload";
import { DateColumn, FilteredColumn, NumberColumn, SortedColumn, SpoolIconColumn } from "../../components/column";
dayjs.extend(utc);
@@ -44,32 +24,23 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
const initialState = useInitialTableState("filamentList");
// Fetch data from the API
const {
tableProps,
sorters,
setSorters,
filters,
setFilters,
current,
pageSize,
setCurrent,
setPageSize,
} = useTable<IFilament>({
syncWithLocation: false,
pagination: {
mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
current: initialState.pagination.current,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "off", // Disable server-side sorting
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent, setPageSize } =
useTable<IFilament>({
syncWithLocation: false,
pagination: {
mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
current: initialState.pagination.current,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "off", // Disable server-side sorting
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
// Create state for the columns to show
const allColumns: (keyof IFilamentCollapsed & string)[] = [
@@ -89,15 +60,10 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
"comment",
];
const defaultColumns = allColumns.filter(
(column_id) =>
["registered", "density", "diameter", "spool_weight"].indexOf(
column_id
) === -1
(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);
// Type the sorters and filters
const typedSorters = typeSorters<IFilamentCollapsed>(sorters);
@@ -290,24 +256,9 @@ export const FilamentList: React.FC<IResourceComponentsProps> = () => {
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}
/>
<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>
)}
/>

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

@@ -1,9 +1,5 @@
import React from "react";
import {
IResourceComponentsProps,
useShow,
useTranslate,
} from "@refinedev/core";
import { IResourceComponentsProps, useShow, useTranslate } from "@refinedev/core";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
import { NumberFieldUnit } from "../../components/numberField";
@@ -79,10 +75,7 @@ export const FilamentShow: React.FC<IResourceComponentsProps> = () => {
{!record?.settings_extruder_temp ? (
<TextField value="Not Set" />
) : (
<NumberFieldUnit
value={record?.settings_extruder_temp ?? ""}
unit="°C"
/>
<NumberFieldUnit value={record?.settings_extruder_temp ?? ""} unit="°C" />
)}
<Title level={5}>{t("filament.fields.settings_bed_temp")}</Title>
{!record?.settings_bed_temp ? (

10
client/src/pages/spools/create.tsx
View File

@@ -11,9 +11,7 @@ interface CreateOrCloneProps {
mode: "create" | "clone";
}
export const SpoolCreate: React.FC<
IResourceComponentsProps & CreateOrCloneProps
> = (props) => {
export const SpoolCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
const t = useTranslate();
const { formProps, saveButtonProps, formLoading } = useForm<ISpool>();
@@ -55,11 +53,7 @@ export const SpoolCreate: React.FC<
return (
<Create
title={
props.mode === "create"
? t("spool.titles.create")
: t("spool.titles.clone")
}
title={props.mode === "create" ? t("spool.titles.create") : t("spool.titles.clone")}
saveButtonProps={saveButtonProps}
isLoading={formLoading}
>

3
client/src/pages/spools/edit.tsx
View File

@@ -38,8 +38,7 @@ export const SpoolEdit: React.FC<IResourceComponentsProps> = () => {
});
if (formProps.initialValues) {
formProps.initialValues["filament_id"] =
formProps.initialValues["filament"].id;
formProps.initialValues["filament_id"] = formProps.initialValues["filament"].id;
}
return (

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

@@ -1,41 +1,15 @@
import React from "react";
import {
IResourceComponentsProps,
useInvalidate,
useTranslate,
} from "@refinedev/core";
import {
useTable,
List,
EditButton,
ShowButton,
CloneButton,
} from "@refinedev/antd";
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 dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { genericSorter, typeSorters } from "../../utils/sorting";
import { genericFilterer, typeFilters } from "../../utils/filtering";
import { ISpool } from "./model";
import {
TableState,
useInitialTableState,
useSavedState,
useStoreInitialState,
} from "../../utils/saveload";
import {
EditOutlined,
FilterOutlined,
InboxOutlined,
ToTopOutlined,
} from "@ant-design/icons";
import {
DateColumn,
FilteredColumn,
NumberColumn,
SortedColumn,
SpoolIconColumn,
} from "../../components/column";
import { TableState, useInitialTableState, useSavedState, useStoreInitialState } from "../../utils/saveload";
import { EditOutlined, FilterOutlined, InboxOutlined, ToTopOutlined } from "@ant-design/icons";
import { DateColumn, FilteredColumn, NumberColumn, SortedColumn, SpoolIconColumn } from "../../components/column";
import { setSpoolArchived } from "./functions";
import SelectAndPrint from "../../components/selectAndPrintDialog";
@@ -56,43 +30,31 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
const initialState = useInitialTableState("spoolList");
// State for the switch to show archived spools
const [showArchived, setShowArchived] = useSavedState(
"spoolList-showArchived",
false
);
const [showArchived, setShowArchived] = useSavedState("spoolList-showArchived", false);
// Fetch data from the API
const {
tableProps,
sorters,
setSorters,
filters,
setFilters,
current,
pageSize,
setCurrent,
setPageSize,
} = useTable<ISpool>({
meta: {
queryParams: {
["allow_archived"]: showArchived,
const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent, setPageSize } =
useTable<ISpool>({
meta: {
queryParams: {
["allow_archived"]: showArchived,
},
},
},
syncWithLocation: false,
pagination: {
mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
current: initialState.pagination.current,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "off", // Disable server-side sorting
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
syncWithLocation: false,
pagination: {
mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
current: initialState.pagination.current,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "off", // Disable server-side sorting
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
// Create state for the columns to show
const allColumns: (keyof ISpoolCollapsed & string)[] = [
@@ -111,14 +73,9 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
"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
(column_id) => ["registered", "used_length", "remaining_length", "lot_nr"].indexOf(column_id) === -1
);
const [showColumns, setShowColumns] = React.useState<string[]>(initialState.showColumns ?? defaultColumns);
// Type the sorters and filters
const typedSorters = typeSorters<ISpoolCollapsed>(sorters);
@@ -141,8 +98,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
if (element.filament.vendor && "name" in element.filament.vendor) {
filament_name = `${element.filament.vendor.name} - ${element.filament.name}`;
} else {
filament_name =
element.filament.name ?? element.filament.id.toString();
filament_name = element.filament.name ?? element.filament.id.toString();
}
return {
...element,
@@ -200,9 +156,7 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
setShowArchived(!showArchived);
}}
>
{showArchived
? t("buttons.hideArchived")
: t("buttons.showArchived")}
{showArchived ? t("buttons.hideArchived") : t("buttons.showArchived")}
</Button>
<Button
type="primary"
@@ -361,24 +315,9 @@ export const SpoolList: React.FC<IResourceComponentsProps> = () => {
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}
/>
<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 />}

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

@@ -1,9 +1,5 @@
import React from "react";
import {
IResourceComponentsProps,
useShow,
useTranslate,
} from "@refinedev/core";
import { IResourceComponentsProps, useShow, useTranslate } from "@refinedev/core";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
import { NumberFieldUnit } from "../../components/numberField";

10
client/src/pages/vendors/create.tsx vendored
View File

@@ -9,20 +9,14 @@ interface CreateOrCloneProps {
mode: "create" | "clone";
}
export const VendorCreate: React.FC<
IResourceComponentsProps & CreateOrCloneProps
> = (props) => {
export const VendorCreate: React.FC<IResourceComponentsProps & CreateOrCloneProps> = (props) => {
const t = useTranslate();
const { formProps, saveButtonProps, formLoading } = useForm<IVendor>();
return (
<Create
title={
props.mode === "create"
? t("vendor.titles.create")
: t("vendor.titles.clone")
}
title={props.mode === "create" ? t("vendor.titles.create") : t("vendor.titles.clone")}
isLoading={formLoading}
saveButtonProps={saveButtonProps}
>

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

@@ -1,27 +1,13 @@
import React from "react";
import {
IResourceComponentsProps,
BaseRecord,
useTranslate,
} from "@refinedev/core";
import {
useTable,
List,
EditButton,
ShowButton,
CloneButton,
} from "@refinedev/antd";
import { IResourceComponentsProps, BaseRecord, useTranslate } from "@refinedev/core";
import { useTable, List, EditButton, ShowButton, CloneButton } from "@refinedev/antd";
import { Table, Space, Button, Dropdown } from "antd";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { genericSorter, typeSorters } from "../../utils/sorting";
import { genericFilterer, typeFilters } from "../../utils/filtering";
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 { DateColumn, SortedColumn } from "../../components/column";
@@ -34,43 +20,27 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
const initialState = useInitialTableState("vendorList");
// Fetch data from the API
const {
tableProps,
sorters,
setSorters,
filters,
setFilters,
current,
pageSize,
setCurrent,
setPageSize,
} = useTable<IVendor>({
syncWithLocation: false,
pagination: {
mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
current: initialState.pagination.current,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "off", // Disable server-side sorting
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
const { tableProps, sorters, setSorters, filters, setFilters, current, pageSize, setCurrent, setPageSize } =
useTable<IVendor>({
syncWithLocation: false,
pagination: {
mode: "off", // Perform pagination in antd's Table instead. Otherwise client-side sorting/filtering doesn't work.
current: initialState.pagination.current,
pageSize: initialState.pagination.pageSize,
},
sorters: {
mode: "off", // Disable server-side sorting
initial: initialState.sorters,
},
filters: {
mode: "off", // Disable server-side filtering
initial: initialState.filters,
},
});
// 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 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);
@@ -181,24 +151,9 @@ export const VendorList: React.FC<IResourceComponentsProps> = () => {
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}
/>
<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>
)}
/>

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

@@ -1,9 +1,5 @@
import React from "react";
import {
IResourceComponentsProps,
useShow,
useTranslate,
} from "@refinedev/core";
import { IResourceComponentsProps, useShow, useTranslate } from "@refinedev/core";
import { Show, NumberField, DateField, TextField } from "@refinedev/antd";
import { Typography } from "antd";
import dayjs from "dayjs";