Skip to content

Commit 7a6fba5

Browse files
zonia3000zonia3000
committed
Moved workflow task order modal to a separate component to fix a bug in the update
1 parent 5a575f2 commit 7a6fba5

File tree

2 files changed

+149
-108
lines changed

2 files changed

+149
-108
lines changed

‎src/lib/components/workflow/TasksOrderModal.svelte‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<script>
2+
import Modal from '../common/Modal.svelte';
3+
4+
/** @type {number} */
5+
export let projectId;
6+
/** @type {import('$lib/types').Workflow} */
7+
export let workflow;
8+
9+
/** @type {(workflow: import('$lib/types').Workflow) => void} */
10+
export let workflowUpdater;
11+
12+
/** @type {Modal} */
13+
let editWorkflowTasksOrderModal;
14+
15+
/** @type {{id: number, name: string}[]} */
16+
let editableTasksList = [];
17+
18+
/**
19+
* @param {import('$lib/types').WorkflowTask[]} originalTasksList
20+
*/
21+
export function show(originalTasksList) {
22+
editableTasksList = originalTasksList.map((task) => ({ id: task.id, name: task.task.name }));
23+
editWorkflowTasksOrderModal.show();
24+
}
25+
26+
/**
27+
* @param {number} index
28+
* @param {'up'|'down'} direction
29+
*/
30+
function moveWorkflowTask(index, direction) {
31+
const wftList = editableTasksList;
32+
33+
let replaceId;
34+
switch (direction) {
35+
case 'up':
36+
if (index === 0) break;
37+
replaceId = index - 1;
38+
break;
39+
case 'down':
40+
if (index === wftList.length - 1) break;
41+
replaceId = index + 1;
42+
}
43+
44+
if (replaceId !== undefined) {
45+
const replaceTask = wftList[replaceId];
46+
wftList[replaceId] = wftList[index];
47+
wftList[index] = replaceTask;
48+
editableTasksList = wftList;
49+
}
50+
}
51+
52+
/**
53+
* Reorders a project's workflow in the server
54+
* @returns {Promise<*>}
55+
*/
56+
async function handleWorkflowOrderUpdate() {
57+
if (!workflow) {
58+
return;
59+
}
60+
const patchData = {
61+
reordered_workflowtask_ids: editableTasksList.map((t) => t.id)
62+
};
63+
64+
const headers = new Headers();
65+
headers.set('Content-Type', 'application/json');
66+
67+
const response = await fetch(`/api/v1/project/${projectId}/workflow/${workflow.id}`, {
68+
method: 'PATCH',
69+
credentials: 'include',
70+
mode: 'cors',
71+
headers,
72+
body: JSON.stringify(patchData)
73+
});
74+
75+
const result = await response.json();
76+
if (response.ok) {
77+
console.log('Workflow task order updated');
78+
workflowUpdater(result);
79+
editWorkflowTasksOrderModal.toggle();
80+
} else {
81+
console.error('Workflow task order not updated', result);
82+
editWorkflowTasksOrderModal.displayErrorAlert(result);
83+
}
84+
}
85+
</script>
86+
87+
<Modal id="editWorkflowTasksOrderModal" centered={true} bind:this={editWorkflowTasksOrderModal}>
88+
<svelte:fragment slot="header">
89+
<h5 class="modal-title">Edit workflow tasks order</h5>
90+
</svelte:fragment>
91+
<svelte:fragment slot="body">
92+
<div id="errorAlert-editWorkflowTasksOrderModal" />
93+
{#if workflow !== undefined && editableTasksList.length == 0}
94+
<p class="text-center mt-3">No workflow tasks yet, add one.</p>
95+
{:else if workflow !== undefined}
96+
{#key editableTasksList}
97+
<ul class="list-group list-group-flush">
98+
{#each editableTasksList as workflowTask, i}
99+
<li class="list-group-item" data-fs-target={workflowTask.id}>
100+
<div class="d-flex justify-content-between align-items-center">
101+
<div>
102+
{workflowTask.name} #{workflowTask.id}
103+
</div>
104+
<div>
105+
{#if i !== 0}
106+
<button
107+
class="btn btn-light"
108+
on:click|preventDefault={() => moveWorkflowTask(i, 'up')}
109+
>
110+
<i class="bi-arrow-up" />
111+
</button>
112+
{/if}
113+
{#if i !== editableTasksList.length - 1}
114+
<button
115+
class="btn btn-light"
116+
on:click|preventDefault={() => moveWorkflowTask(i, 'down')}
117+
>
118+
<i class="bi-arrow-down" />
119+
</button>
120+
{/if}
121+
</div>
122+
</div>
123+
</li>
124+
{/each}
125+
</ul>
126+
{/key}
127+
{/if}
128+
</svelte:fragment>
129+
<svelte:fragment slot="footer">
130+
<button class="btn btn-primary" on:click|preventDefault={handleWorkflowOrderUpdate}>
131+
Save
132+
</button>
133+
</svelte:fragment>
134+
</Modal>

‎src/routes/projects/[projectId]/workflows/experimental/[workflowId]/+page.svelte‎

Lines changed: 15 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
import VersionUpdate from '$lib/components/workflow/VersionUpdate.svelte';
1717
import { getAllNewVersions } from '$lib/components/workflow/version-checker';
1818
import JobStatusIcon from '$lib/components/jobs/JobStatusIcon.svelte';
19+
import TasksOrderModal from '$lib/components/workflow/TasksOrderModal.svelte';
1920
2021
/** @type {import('$lib/types').Workflow} */
2122
let workflow = $page.data.workflow;
@@ -65,8 +66,8 @@
6566
let unsavedChangesModal;
6667
/** @type {Modal} */
6768
let runWorkflowModal;
68-
/** @type {Modal} */
69-
let editWorkflowTasksOrderModal;
69+
/** @type {import('$lib/components/workflow/TasksOrderModal.svelte').default} */
70+
let editTasksOrderModal;
7071
/** @type {Modal} */
7172
let insertTaskModal;
7273
/** @type {Modal} */
@@ -345,60 +346,6 @@
345346
argsSchemaValid = true;
346347
}
347348
348-
function moveWorkflowTask(index, direction) {
349-
const wftList = updatableWorkflowList;
350-
351-
let replaceId;
352-
switch (direction) {
353-
case 'up':
354-
if (index === 0) break;
355-
replaceId = index - 1;
356-
break;
357-
case 'down':
358-
if (index === wftList.length - 1) break;
359-
replaceId = index + 1;
360-
}
361-
362-
const replaceTask = wftList[replaceId];
363-
wftList[replaceId] = wftList[index];
364-
wftList[index] = replaceTask;
365-
updatableWorkflowList = wftList;
366-
}
367-
368-
/**
369-
* Reorders a project's workflow in the server
370-
* @returns {Promise<*>}
371-
*/
372-
async function handleWorkflowOrderUpdate() {
373-
if (!workflow) {
374-
return;
375-
}
376-
const patchData = {
377-
reordered_workflowtask_ids: updatableWorkflowList.map((t) => t.id)
378-
};
379-
380-
const headers = new Headers();
381-
headers.set('Content-Type', 'application/json');
382-
383-
const response = await fetch(`/api/v1/project/${project.id}/workflow/${workflow.id}`, {
384-
method: 'PATCH',
385-
credentials: 'include',
386-
mode: 'cors',
387-
headers,
388-
body: JSON.stringify(patchData)
389-
});
390-
391-
const result = await response.json();
392-
if (response.ok) {
393-
console.log('Workflow task order updated');
394-
workflow = result;
395-
editWorkflowTasksOrderModal.toggle();
396-
} else {
397-
console.error('Workflow task order not updated', result);
398-
editWorkflowTasksOrderModal.displayErrorAlert(result);
399-
}
400-
}
401-
402349
/**
403350
* Requests the server to apply a project's workflow (i.e. run it)
404351
* @returns {Promise<void>}
@@ -548,7 +495,9 @@
548495
return;
549496
}
550497
statuses = outputStatus.status;
551-
const runningOrSubmitted = Object.values(statuses).filter(s => s === 'running' || s === 'submitted');
498+
const runningOrSubmitted = Object.values(statuses).filter(
499+
(s) => s === 'running' || s === 'submitted'
500+
);
552501
if (statusWatcherTimer) {
553502
if (runningOrSubmitted.length === 0) {
554503
clearTimeout(statusWatcherTimer);
@@ -673,10 +622,10 @@
673622
>
674623
<button
675624
class="btn btn-light"
676-
data-bs-toggle="modal"
677-
data-bs-target="#editWorkflowTasksOrderModal"
678-
><i class="bi-gear-wide-connected" /></button
625+
on:click={() => editTasksOrderModal.show(updatableWorkflowList)}
679626
>
627+
<i class="bi-gear-wide-connected" />
628+
</button>
680629
</div>
681630
</div>
682631
</div>
@@ -975,54 +924,12 @@
975924
</svelte:fragment>
976925
</Modal>
977926

978-
<Modal id="editWorkflowTasksOrderModal" centered={true} bind:this={editWorkflowTasksOrderModal}>
979-
<svelte:fragment slot="header">
980-
<h5 class="modal-title">Edit workflow tasks order</h5>
981-
</svelte:fragment>
982-
<svelte:fragment slot="body">
983-
<div id="errorAlert-editWorkflowTasksOrderModal" />
984-
{#if workflow !== undefined && updatableWorkflowList.length == 0}
985-
<p class="text-center mt-3">No workflow tasks yet, add one.</p>
986-
{:else if workflow !== undefined}
987-
{#key updatableWorkflowList}
988-
<ul class="list-group list-group-flush">
989-
{#each updatableWorkflowList as workflowTask, i}
990-
<li class="list-group-item" data-fs-target={workflowTask.id}>
991-
<div class="d-flex justify-content-between align-items-center">
992-
<div>
993-
{workflowTask.task.name} #{workflowTask.id}
994-
</div>
995-
<div>
996-
{#if i !== 0}
997-
<button
998-
class="btn btn-light"
999-
on:click|preventDefault={() => moveWorkflowTask(i, 'up')}
1000-
>
1001-
<i class="bi-arrow-up" />
1002-
</button>
1003-
{/if}
1004-
{#if i !== updatableWorkflowList.length - 1}
1005-
<button
1006-
class="btn btn-light"
1007-
on:click|preventDefault={() => moveWorkflowTask(i, 'down')}
1008-
>
1009-
<i class="bi-arrow-down" />
1010-
</button>
1011-
{/if}
1012-
</div>
1013-
</div>
1014-
</li>
1015-
{/each}
1016-
</ul>
1017-
{/key}
1018-
{/if}
1019-
</svelte:fragment>
1020-
<svelte:fragment slot="footer">
1021-
<button class="btn btn-primary" on:click|preventDefault={handleWorkflowOrderUpdate}>
1022-
Save
1023-
</button>
1024-
</svelte:fragment>
1025-
</Modal>
927+
<TasksOrderModal
928+
projectId={project.id}
929+
{workflow}
930+
workflowUpdater={(updated) => (workflow = updated)}
931+
bind:this={editTasksOrderModal}
932+
/>
1026933

1027934
<Modal id="runWorkflowModal" centered={true} bind:this={runWorkflowModal}>
1028935
<svelte:fragment slot="header">

0 commit comments

Comments
 (0)