diff --git a/frontend/src/components/ui/pagination.ts b/frontend/src/components/ui/pagination.ts index 9742bbda..e2a23ea6 100644 --- a/frontend/src/components/ui/pagination.ts +++ b/frontend/src/components/ui/pagination.ts @@ -173,6 +173,7 @@ export class Pagination extends LitElement { set page(page: number) { if (page !== this._page) { this.setPage(page); + this._page = page; } } diff --git a/frontend/src/pages/org/workflows-list.ts b/frontend/src/pages/org/workflows-list.ts index 89c25913..34fa9b45 100644 --- a/frontend/src/pages/org/workflows-list.ts +++ b/frontend/src/pages/org/workflows-list.ts @@ -4,6 +4,7 @@ import type { SlDialog, SlSelectEvent, } from "@shoelace-style/shoelace"; +import clsx from "clsx"; import { html, type PropertyValues } from "lit"; import { customElement, query, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; @@ -141,14 +142,27 @@ export class WorkflowsList extends BtrixElement { protected async willUpdate( changedProperties: PropertyValues & Map, ) { - if ( - changedProperties.has("orderBy") || - changedProperties.has("filterByCurrentUser") || - changedProperties.has("filterByScheduled") || - changedProperties.has("filterBy") - ) { + // Props that reset the page to 1 when changed + const resetToFirstPageProps = [ + "filterByCurrentUser", + "filterByScheduled", + "filterBy", + "orderBy", + ]; + + // Props that require a data refetch + const refetchDataProps = [...resetToFirstPageProps]; + + if (refetchDataProps.some((k) => changedProperties.has(k))) { + const isInitialRender = resetToFirstPageProps + .map((k) => changedProperties.get(k)) + .every((v) => v === undefined); void this.fetchWorkflows({ - page: 1, + page: + // If this is the initial render, use the page from the URL or default to 1; otherwise, reset the page to 1 + isInitialRender + ? parsePage(new URLSearchParams(location.search).get("page")) || 1 + : 1, }); } if (changedProperties.has("filterByCurrentUser")) { @@ -509,27 +523,27 @@ export class WorkflowsList extends BtrixElement { ${this.workflows.items.map(this.renderWorkflowItem)} - ${when( - total > pageSize, - () => html` - `; }