diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index fbf8ee8..549f7ea 100644 --- a/client/public/locales/en/common.json +++ b/client/public/locales/en/common.json @@ -21,6 +21,10 @@ "undo": "Undo", "import": "Import", "clone": "Clone", + "archive": "Archive", + "unArchive": "Unarchive", + "hideArchived": "Hide Archived", + "showArchived": "Show Archived", "notAccessTitle": "You don't have permission to access", "hideColumns": "Hide Columns", "clearFilters": "Clear Filters" @@ -41,6 +45,8 @@ "loading": "Loading", "version": "Version", "unknown": "Unknown", + "yes": "Yes", + "no": "No", "tags": { "clone": "Clone" }, @@ -63,7 +69,8 @@ "first_used": "First Used", "last_used": "Last Used", "registered": "Registered", - "comment": "Comment" + "comment": "Comment", + "archived": "Archived" }, "fields_help": { "used_weight": "How much filament has been used from the spool. A new spool should have 0g used.", @@ -75,7 +82,11 @@ "clone": "Clone Spool", "edit": "Edit Spool", "list": "Spools", - "show": "Show Spool" + "show": "Show Spool", + "archive": "Archive Spool" + }, + "messages": { + "archive": "Are you sure you want to archive this spool?" } }, "filament": { diff --git a/client/public/locales/sv/common.json b/client/public/locales/sv/common.json index 67e0244..fc5d19e 100644 --- a/client/public/locales/sv/common.json +++ b/client/public/locales/sv/common.json @@ -21,6 +21,10 @@ "undo": "Ångra", "import": "Importera", "clone": "Klona", + "archive": "Arkivera", + "unArchive": "Avarkivera", + "hideArchived": "Dölj arkiverade", + "showArchived": "Visa arkiverade", "notAccessTitle": "Du har inte tillgång till denna sida", "hideColumns": "Dölj kolumner", "clearFilters": "Rensa filter" @@ -41,6 +45,8 @@ "loading": "Laddar...", "version": "Version", "unknown": "Okänd", + "yes": "Ja", + "no": "Nej", "tags": { "clone": "Klona" }, @@ -63,7 +69,8 @@ "first_used": "Användes först", "last_used": "Användes senast", "registered": "Registrerad", - "comment": "Kommentar" + "comment": "Kommentar", + "archived": "Arkiverad" }, "fields_help": { "used_weight": "Hur mycket filament som använts på spolen. En ny spole har värdet 0g.", @@ -75,7 +82,11 @@ "clone": "Klona spole", "edit": "Ändra spole", "list": "Spolar", - "show": "Visa spole" + "show": "Visa spole", + "archive": "Arkivera spole" + }, + "messages": { + "archive": "Är du säker på att du vill arkivera denna spole?" } }, "filament": { diff --git a/client/src/pages/spools/functions.ts b/client/src/pages/spools/functions.ts new file mode 100644 index 0000000..f738b3f --- /dev/null +++ b/client/src/pages/spools/functions.ts @@ -0,0 +1,17 @@ +import { ISpool } from "./model"; + + +export async function setSpoolArchived(spool: ISpool, archived: boolean) { + const apiEndpoint = import.meta.env.VITE_APIURL; + const init: RequestInit = { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + archived: archived, + }), + }; + const request = new Request(apiEndpoint + "/spool/" + spool.id); + await fetch(request, init); +} diff --git a/client/src/pages/spools/list.tsx b/client/src/pages/spools/list.tsx index ceebf26..36c9c46 100644 --- a/client/src/pages/spools/list.tsx +++ b/client/src/pages/spools/list.tsx @@ -1,7 +1,7 @@ import React from "react"; import { IResourceComponentsProps, - BaseRecord, + useInvalidate, useTranslate, } from "@refinedev/core"; import { @@ -11,7 +11,7 @@ import { ShowButton, CloneButton, } from "@refinedev/antd"; -import { Table, Space, Button, Dropdown } from "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"; @@ -20,9 +20,15 @@ import { ISpool } from "./model"; import { TableState, useInitialTableState, + useShowArchive, useStoreInitialState, } from "../../utils/saveload"; -import { EditOutlined, FilterOutlined } from "@ant-design/icons"; +import { + EditOutlined, + FilterOutlined, + InboxOutlined, + ToTopOutlined, +} from "@ant-design/icons"; import { DateColumn, FilteredColumn, @@ -30,9 +36,12 @@ import { SortedColumn, SpoolIconColumn, } from "../../components/column"; +import { setSpoolArchived } from "./functions"; dayjs.extend(utc); +const { confirm } = Modal; + interface ISpoolCollapsed extends ISpool { filament_name: string; material?: string; @@ -40,10 +49,14 @@ interface ISpoolCollapsed extends ISpool { export const SpoolList: React.FC = () => { const t = useTranslate(); + const invalidate = useInvalidate(); // Load initial state const initialState = useInitialTableState("spoolList"); + // State for the switch to show archived spools + const [showArchived, setShowArchived] = useShowArchive("spoolList"); + // Fetch data from the API const { tableProps, @@ -56,6 +69,11 @@ export const SpoolList: React.FC = () => { setCurrent, setPageSize, } = useTable({ + 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. @@ -138,10 +156,49 @@ export const SpoolList: React.FC = () => { return filtered; }, [dataSource, typedFilters, typedSorters]); + // Function for opening an ant design modal that asks for confirmation for archiving a spool + const archiveSpool = async (spool: ISpoolCollapsed, archive: boolean) => { + await setSpoolArchived(spool, archive); + invalidate({ + resource: "spool", + id: spool.id, + invalidates: ["list", "detail"], + }); + }; + + const archiveSpoolPopup = async (spool: ISpoolCollapsed) => { + // If the spool has no remaining weight, archive it immediately since it's likely not a mistake + if (spool.remaining_weight && spool.remaining_weight == 0) { + await archiveSpool(spool, true); + } else { + confirm({ + title: t("spool.titles.archive"), + content: t("spool.messages.archive"), + okText: t("buttons.archive"), + okType: "primary", + cancelText: t("buttons.cancel"), + onOk() { + return archiveSpool(spool, true); + }, + }); + } + }; + return ( ( <> +