From 009880f8db79b289223b1252174a5c7d2e132069 Mon Sep 17 00:00:00 2001 From: widmogrod Date: Mon, 8 Jan 2024 23:09:27 +0100 Subject: [PATCH 1/5] my-app: PaginatedTable.tsx reset page after changing filters --- example/my-app/src/component/PaginatedTable.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/example/my-app/src/component/PaginatedTable.tsx b/example/my-app/src/component/PaginatedTable.tsx index 2ec9f71f..a1cad06e 100644 --- a/example/my-app/src/component/PaginatedTable.tsx +++ b/example/my-app/src/component/PaginatedTable.tsx @@ -71,7 +71,11 @@ export function PaginatedTable(props: PaginatedTableProps) { filter: (x: predicate.WherePredicates) => { setState({ ...state, - where: mergeFilters(state.where, x) + where: mergeFilters(state.where, x), + // always reset the cursor when filtering + // user can be on a page that doesn't exist anymore + nextPage: undefined, + prevPage: undefined }) } } as PaginatedTableContext From 5544b12eb7ff45dc2836a393a57f62fc91386a34 Mon Sep 17 00:00:00 2001 From: widmogrod Date: Mon, 8 Jan 2024 23:09:43 +0100 Subject: [PATCH 2/5] my-app: after on list action, refresh list view --- example/my-app/src/App.tsx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/example/my-app/src/App.tsx b/example/my-app/src/App.tsx index 20ad6b25..0be8623a 100644 --- a/example/my-app/src/App.tsx +++ b/example/my-app/src/App.tsx @@ -871,7 +871,7 @@ function App() { - + ctx.refresh()}/> case "workflow.Await": @@ -915,6 +915,7 @@ function App() { submitCallbackResult(await_.CallbackID, { "schema.String": (document.getElementById("callbackValue") as HTMLInputElement).value }, (data) => { + ctx.refresh() setState(data) }) }}> @@ -940,7 +941,9 @@ function App() { @@ -961,7 +964,9 @@ function App() { @@ -1323,8 +1328,8 @@ const recover = (runID: string) => { .then(data => data as workflow.State) } -function TryRecover(props: { error: workflow.Error }) { - return } From bcb8ed5de56660f063ea6aeeef41a229db22d788 Mon Sep 17 00:00:00 2001 From: widmogrod Date: Mon, 8 Jan 2024 23:49:36 +0100 Subject: [PATCH 3/5] my-app: make table more compact --- example/my-app/src/App.css | 49 ++++++++++++++++++- example/my-app/src/App.tsx | 37 +++++++++----- .../my-app/src/component/PaginatedTable.tsx | 25 ++++++---- 3 files changed, 89 insertions(+), 22 deletions(-) diff --git a/example/my-app/src/App.css b/example/my-app/src/App.css index 5fe6895d..974c1640 100644 --- a/example/my-app/src/App.css +++ b/example/my-app/src/App.css @@ -102,14 +102,52 @@ table > thead .filter-rules { float: right; } -.filter-rules { +/* make definitions inline, but new definition term must start from new line + definition is on right side, and wraps text */ +dl { + margin: 0 10px 0 0; + padding: 0; + overflow: auto; +} + +dt { + float: left; + clear: left; + font-weight: normal; + text-align: right; + margin: 0; + padding: 2px 10px; + width: 30px; +} +dd { + float: left; + padding: 2px 0; + margin-bottom: 5px; + text-wrap: normal; } +dt:hover { + background-color: #51887a; + color: #ffffff; + padding: 2px 10px; +} + + + + .filter-group, .filter-rule { margin-left: 40px; } +.filter-in, +.filter-out{ + font-size: 0.8em; + padding: 2px 10px; + background-color: #97a8a4; + border: none; +} + table > tbody > tr { border-bottom: 1px solid #dddddd; } @@ -179,4 +217,13 @@ table table th, td { .sort-asc, .sort-desc { cursor: pointer; +} + +.debug-window { + background-color: #ffffff; + border: 1px solid #cccccc; + overflow: auto; + padding: 10px; + font-size: 0.8em; + color: #666666; } \ No newline at end of file diff --git a/example/my-app/src/App.tsx b/example/my-app/src/App.tsx index 0be8623a..204ef426 100644 --- a/example/my-app/src/App.tsx +++ b/example/my-app/src/App.tsx @@ -725,6 +725,9 @@ function App() { + sort={{ + "ID": true, + }} load={(state) => { return listFlows({ ...state, @@ -746,9 +749,18 @@ function App() { }, ]} /> + +
+ + 
Func output: {output}
+ 
Workflow output: {JSON.stringify(state, null, 2)}
+
+ sort={{ + "ID": true, + }} load={(state) => { return listStates({ ...state, @@ -799,9 +811,11 @@ function App() { return ( <> workflow.Done - +
+ +
@@ -827,7 +841,7 @@ function App() { } } })} - className={"filter filter-in"}>only + className={"filter filter-in"}>show only - {done.Result["schema.String"]} +
+ {done.Result["schema.String"]} +
+ @@ -978,11 +995,6 @@ function App() { }}/> - - - 
Func output: {output}
- 
Workflow output: {JSON.stringify(state, null, 2)}
- @@ -1328,8 +1340,9 @@ const recover = (runID: string) => { .then(data => data as workflow.State) } -function TryRecover(props: { error: workflow.Error , onFinish: (data : workflow.State) => void}) { - return } diff --git a/example/my-app/src/component/PaginatedTable.tsx b/example/my-app/src/component/PaginatedTable.tsx index a1cad06e..1302c056 100644 --- a/example/my-app/src/component/PaginatedTable.tsx +++ b/example/my-app/src/component/PaginatedTable.tsx @@ -199,7 +199,7 @@ export function PaginatedTable(props: PaginatedTableProps) { return - - - - + @@ -233,9 +231,18 @@ export function PaginatedTable(props: PaginatedTableProps) { return ( - - - + ); @@ -247,7 +254,7 @@ export function PaginatedTable(props: PaginatedTableProps) { - From c36211785864caf6b2c8a8e6662d43381a800fcb Mon Sep 17 00:00:00 2001 From: widmogrod Date: Mon, 8 Jan 2024 23:55:32 +0100 Subject: [PATCH 4/5] my-app: format file --- example/my-app/src/App.css | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/example/my-app/src/App.css b/example/my-app/src/App.css index 974c1640..16ad6715 100644 --- a/example/my-app/src/App.css +++ b/example/my-app/src/App.css @@ -9,6 +9,7 @@ aside { width: 300px; margin: 0 10px 0 0; } + main { float: left; width: calc(100% - 310px); @@ -24,9 +25,11 @@ span { span.schedguled { background-color: #b8975d; } + span.error { background-color: #de7773; } + span.await { background-color: #52d2d2; } @@ -134,15 +137,13 @@ dt:hover { } - - .filter-group, .filter-rule { margin-left: 40px; } .filter-in, -.filter-out{ - font-size: 0.8em; +.filter-out { + font-size: 0.8em; padding: 2px 10px; background-color: #97a8a4; border: none; @@ -167,10 +168,11 @@ tfoot tr { font-size: 1.2em; } -button.next-page{ +button.next-page { float: right; } -button.prev-page{ + +button.prev-page { float: left; } @@ -180,6 +182,7 @@ table table { font-size: 0.8em; min-width: 0; } + table table th, td { padding: 5px 10px; } From 86c4ef0259d99b6efd8cf5934a38625f122c2490 Mon Sep 17 00:00:00 2001 From: widmogrod Date: Tue, 9 Jan 2024 22:45:45 +0100 Subject: [PATCH 5/5] my-app: render how many times error was retried --- example/my-app/src/App.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/example/my-app/src/App.tsx b/example/my-app/src/App.tsx index 204ef426..cd0ea138 100644 --- a/example/my-app/src/App.tsx +++ b/example/my-app/src/App.tsx @@ -885,6 +885,8 @@ function App() {
{error.Code}
Message
{error.Reason}
+
Retried
+
{error.Retried} / {error.BaseState?.DefaultMaxRetries}
+ {props.actions && props.actions.map((action) => { @@ -220,11 +220,9 @@ export function PaginatedTable(props: PaginatedTableProps) {
- + IDTypeVersionProp Data
{item.ID}{item.Type}{item.Version} +
+
ID
+
{item.ID}
+ +
Type
+
{item.Type}
+ +
Version
+
{item.Version}
+
+ 		{props.mapData && props.mapData(item, ctx)}
+ {data.Next && } {data.Prev && }