diff --git a/src/designer/elsa-workflows-studio/src/components.d.ts b/src/designer/elsa-workflows-studio/src/components.d.ts index 21576081e..59557ca44 100644 --- a/src/designer/elsa-workflows-studio/src/components.d.ts +++ b/src/designer/elsa-workflows-studio/src/components.d.ts @@ -105,6 +105,7 @@ export namespace Components { "propertyModel": ActivityDefinitionProperty; } interface ElsaPager { + "history"?: RouterHistory; "page": number; "pageSize": number; "totalCount": number; @@ -483,6 +484,7 @@ declare namespace LocalJSX { "propertyModel"?: ActivityDefinitionProperty; } interface ElsaPager { + "history"?: RouterHistory; "page"?: number; "pageSize"?: number; "totalCount"?: number; diff --git a/src/designer/elsa-workflows-studio/src/components/controls/elsa-pager/elsa-pager.tsx b/src/designer/elsa-workflows-studio/src/components/controls/elsa-pager/elsa-pager.tsx index 181a94c46..1ed25ef22 100644 --- a/src/designer/elsa-workflows-studio/src/components/controls/elsa-pager/elsa-pager.tsx +++ b/src/designer/elsa-workflows-studio/src/components/controls/elsa-pager/elsa-pager.tsx @@ -1,4 +1,5 @@ import {Component, Event, EventEmitter, h, Prop} from '@stencil/core'; +import {RouterHistory} from "@stencil/router"; @Component({ tag: 'elsa-pager', @@ -9,11 +10,35 @@ export class ElsaPager { @Prop() page: number; @Prop() pageSize: number; @Prop() totalCount: number; + @Prop() history?: RouterHistory; + + basePath: string; + + componentWillLoad() { + this.basePath = !!this.history ? this.history.location.pathname : document.location.pathname; + } + + navigate(path: string) { + if (this.history) { + this.history.push(path); + return; + } + + document.location.pathname = path; + } + + onNavigateClick(e: Event) { + const anchor = e.currentTarget as HTMLAnchorElement; + + e.preventDefault(); + this.navigate(`${anchor.pathname}${anchor.search}`); + } render() { const page = this.page; const pageSize = this.pageSize; const totalCount = this.totalCount; + const basePath = this.basePath; const from = page * pageSize + 1; const to = Math.min(from + pageSize, totalCount); @@ -22,12 +47,14 @@ export class ElsaPager { const maxPageButtons = 10; const fromPage = Math.max(0, page - maxPageButtons / 2); const toPage = Math.min(pageCount, fromPage + maxPageButtons); + const self = this; const renderPreviousButton = function () { if (page <= 0) return; - return self.onNavigateClick(e)} class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"> Previous @@ -37,7 +64,8 @@ export class ElsaPager { if (page >= pageCount) return; - return self.onNavigateClick(e)} class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"> Next @@ -48,7 +76,8 @@ export class ElsaPager { return; return ( - self.onNavigateClick(e)} class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" aria-label="Previous"> @@ -62,8 +91,10 @@ export class ElsaPager { return; return ( - + self.onNavigateClick(e)} + class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-500 hover:text-gray-400 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150" + aria-label="Next"> @@ -86,7 +117,8 @@ export class ElsaPager { {i + 1} ); } else { - buttons.push( self.onNavigateClick(e)} class={`-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150 ${leftRoundedClass}`}> {i + 1} ) diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instances-list/elsa-workflow-instances-list-screen/elsa-workflow-instances-list-screen.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instances-list/elsa-workflow-instances-list-screen/elsa-workflow-instances-list-screen.tsx index c6a5ba4b0..6d4c440fb 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instances-list/elsa-workflow-instances-list-screen/elsa-workflow-instances-list-screen.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instances-list/elsa-workflow-instances-list-screen/elsa-workflow-instances-list-screen.tsx @@ -41,6 +41,8 @@ export class ElsaWorkflowInstancesListScreen { this.selectedWorkflowId = query.workflow; this.selectedWorkflowStatus = query.status; this.selectedOrderBy = query.orderBy ?? OrderBy.Started; + this.page = !!query.page ? parseInt(query.page) : 0; + this.pageSize = !!query.pageSize ? parseInt(query.pageSize) : 25; } async loadWorkflowBlueprints() { @@ -75,6 +77,12 @@ export class ElsaWorkflowInstancesListScreen { if (!!orderBy) filters['orderBy'] = orderBy; + + if(!!this.page) + filters['page'] = this.page.toString(); + + if(!!this.pageSize) + filters['pageSize'] = this.pageSize.toString(); const queryString = collection.map(filters, (v, k) => `${k}=${v}`).join('&'); return `/workflow-instances?${queryString}`; @@ -99,7 +107,9 @@ export class ElsaWorkflowInstancesListScreen { } async routeChanged(e: LocationSegments) { - if (!e.pathname.toLowerCase().indexOf('workflow-instances')) + debugger; + + if (e.pathname.toLowerCase().indexOf('workflow-instances') < 0) return; this.applyQueryString(e.search); @@ -164,23 +174,27 @@ export class ElsaWorkflowInstancesListScreen { const workflowInstances = this.workflowInstances.items; const workflowBlueprints = this.workflowBlueprints; - const viewIcon = ( - - - - - ); + const renderViewIcon = function () { + return ( + + + + + ); + }; - const deleteIcon = ( - - - - - - - - - ); + const renderDeleteIcon = function () { + return ( + + + + + + + + + ); + }; return (
@@ -283,15 +297,15 @@ export class ElsaWorkflowInstancesListScreen { this.onDeleteClick(e, workflowInstance), icon: deleteIcon} + {text: 'View', anchorUrl: viewUrl, icon: renderViewIcon()}, + {text: 'Delete', clickHandler: e => this.onDeleteClick(e, workflowInstance), icon: renderDeleteIcon()} ]}/> })} - +
this.confirmDialog = el}/> @@ -323,15 +337,17 @@ export class ElsaWorkflowInstancesListScreen { items = [{text: 'All', value: null, url: this.buildFilterUrl(null, selectedWorkflowStatus, SelectedOrderBy), isSelected: !selectedWorkflowId}, ...items]; - const icon = - - - - - - ; + const renderIcon = function () { + return + + + + + + ; + }; - return this.selectedWorkflowId = e.detail.value as string}/> + return this.selectedWorkflowId = e.detail.value as string}/> } renderStatusFilter() { @@ -344,26 +360,31 @@ export class ElsaWorkflowInstancesListScreen { return ({text: text, url: this.buildFilterUrl(this.selectedWorkflowId, x, this.selectedOrderBy), isSelected: x == selectedWorkflowStatus}); }); - const icon = - - - ; + const renderIcon = function () { + return + + + + }; - return + return } renderOrderByFilter() { const selectedOrderBy = this.selectedOrderBy; const selectedOrderByText = !!selectedOrderBy ? `Sort by: ${selectedOrderBy}` : 'Sort'; const orderByValues: Array = [OrderBy.Finished, OrderBy.LastExecuted, OrderBy.Started]; + const items: Array = orderByValues.map(x => { return ({text: x, url: this.buildFilterUrl(this.selectedWorkflowId, this.selectedWorkflowStatus, x), isSelected: x == selectedOrderBy}); }); - const icon = - - ; + const renderIcon = function () { + return + + + }; - return + return } } diff --git a/src/designer/elsa-workflows-studio/src/services/elsa-client.ts b/src/designer/elsa-workflows-studio/src/services/elsa-client.ts index f5836776f..89ae0f561 100644 --- a/src/designer/elsa-workflows-studio/src/services/elsa-client.ts +++ b/src/designer/elsa-workflows-studio/src/services/elsa-client.ts @@ -99,6 +99,12 @@ export const createElsaClient = function (serverUrl: string): ElsaClient { if (!!searchTerm) queryString['searchTerm'] = searchTerm; + if (!!page) + queryString['page'] = page; + + if (!!pageSize) + queryString['pageSize'] = pageSize; + const queryStringItems = collection.map(queryString, (v, k) => `${k}=${v}`); const queryStringText = queryStringItems.length > 0 ? `?${queryStringItems.join('&')}` : ''; const response = await httpClient.get>(`v1/workflow-instances${queryStringText}`);