Fixed issue with task info/edit modal by replacing the tasks stores with direct calls

Author: zonia3000

src/lib/components/tasks/TaskEditModal.svelte

@@ -1,16 +1,17 @@
 <script>
-	import { originalTaskStore, taskStore } from '$lib/stores/taskStores';
 	import { getOnlyModifiedProperties, nullifyEmptyStrings } from '$lib/common/component_utilities';
 	import { AlertError } from '$lib/common/errors';
 	import Modal from '../common/Modal.svelte';
 
 	export let updateEditedTask;
+
 	/** @type {import('$lib/types').Task|undefined} */
-	$: task = $taskStore;
+	let task;
 	/** @type {import('$lib/types').Task|undefined} */
-	$: originalTask = $originalTaskStore;
+	let originalTask;
+
 	$: updateEnabled =
-		!saving && task && task.name && task.command && task.input_type && task.output_type;
+		!loading && !saving && task && task.name && task.command && task.input_type && task.output_type;
 	/** @type {Modal} */
 	let modal;
 	let loading = false;
@@ -58,13 +59,17 @@
 		);
 	}
 
-	async function onOpen() {
-		if (!task) {
-			return;
-		}
-		saved = false;
+	/**
+	 *
+	 * @param {import('$lib/types').Task} taskToEdit
+	 */
+	export async function open(taskToEdit) {
 		loading = true;
-		const response = await fetch(`/api/v1/task/${task.id}`, {
+		saved = false;
+		modal.show();
+
+		// Retrieving the args_schema field
+		const response = await fetch(`/api/v1/task/${taskToEdit.id}`, {
 			method: 'GET',
 			credentials: 'include'
 		});
@@ -73,8 +78,11 @@
 
 		if (response.ok) {
 			task = result;
+			originalTask = { ...result };
 		} else {
-			console.error('Unable to load task', result);
+			modal.displayErrorAlert('Unable to load task');
+			task = undefined;
+			originalTask = undefined;
 		}
 		loading = false;
 	}
@@ -92,14 +100,18 @@
 	}
 </script>
 
-<Modal id="taskEditModal" {onOpen} {onClose} bind:this={modal} size="xl">
+<Modal id="taskEditModal" {onClose} bind:this={modal} size="xl">
 	<svelte:fragment slot="header">
 		{#if task}
 			<h1 class="h5 modal-title">Task {task.name}</h1>
 		{/if}
 	</svelte:fragment>
 	<svelte:fragment slot="body">
-		{#if task}
+		{#if loading}
+			<div class="spinner-border spinner-border-sm" role="status">
+				<span class="visually-hidden">Loading...</span>
+			</div>
+		{:else if task}
 			<div class="row mb-3">
 				<div class="col-12">
 					<p class="lead">Task properties</p>
@@ -215,19 +227,13 @@
 					<div class="mb-2 row">
 						<label for="argsSchema" class="col-2 col-form-label text-end">Args Schema</label>
 						<div class="col-10">
-							{#if loading}
-								<div class="spinner-border spinner-border-sm" role="status">
-									<span class="visually-hidden">Loading...</span>
-								</div>
-							{:else}
-								<textarea
-									name="argsSchema"
-									value={JSON.stringify(task.args_schema, null, 2)}
-									disabled
-									class="form-control"
-									rows="10"
-								/>
-							{/if}
+							<textarea
+								name="argsSchema"
+								value={task.args_schema ? JSON.stringify(task.args_schema, null, 2) : null}
+								disabled
+								class="form-control"
+								rows="10"
+							/>
 						</div>
 					</div>
 

src/lib/components/tasks/TaskInfoModal.svelte

@@ -1,23 +1,25 @@
 <script>
 	import { formatMarkdown } from '$lib/common/component_utilities';
-
-	// TaskInfoModal component
-	import { taskStore } from '$lib/stores/taskStores';
 	import Modal from '../common/Modal.svelte';
 
-	// Subscription to taskModalId store to update task property with respect
-	// to the task in the store. Enable app-wide updates to the project to be
-	// displayed in this component.
-	$: task = $taskStore;
+	/** @type {import('$lib/types').Task|undefined} */
+	let task;
 
+	/** @type {Modal} */
+	let modal;
 	let loading = false;
 
-	async function onOpen() {
-		if (!task) {
-			return;
-		}
+	/**
+	 *
+	 * @param {import('$lib/types').Task} taskToLoad
+	 */
+	export async function open(taskToLoad) {
+		modal.show();
+		task = taskToLoad;
+
+		// Retrieving the args_schema field
 		loading = true;
-		const response = await fetch(`/api/v1/task/${task.id}`, {
+		const response = await fetch(`/api/v1/task/${taskToLoad.id}`, {
 			method: 'GET',
 			credentials: 'include'
 		});
@@ -27,19 +29,21 @@
 		if (response.ok) {
 			task = result;
 		} else {
-			console.error('Unable to load task', result);
+			modal.displayErrorAlert('Unable to load task');
+			task = undefined;
 		}
 		loading = false;
 	}
 </script>
 
-<Modal id="taskInfoModal" size="xl" {onOpen}>
+<Modal id="taskInfoModal" size="xl" bind:this={modal}>
 	<svelte:fragment slot="header">
 		{#if task}
 			<h1 class="h5 modal-title">Task {task.name}</h1>
 		{/if}
 	</svelte:fragment>
 	<svelte:fragment slot="body">
+		<span id="errorAlert-taskInfoModal" />
 		{#if task}
 			<div class="row mb-3">
 				<div class="col-12">

src/lib/stores/taskStores.js

@@ -1,7 +1,3 @@
 import { writable } from 'svelte/store';
 
-/** @type {import('svelte/store').Writable<import('$lib/types').Task|undefined>} */
-export const taskStore = writable(undefined);
-/** @type {import('svelte/store').Writable<import('$lib/types').Task|undefined>} */
-export const originalTaskStore = writable(undefined);
 export const modalTaskCollectionId = writable(undefined);

src/routes/tasks/+page.svelte

@@ -2,7 +2,6 @@
 	import { page } from '$app/stores';
 	import { orderTasksByOwnerThenByNameThenByVersion } from '$lib/common/component_utilities.js';
 	import { collectTaskErrorStore } from '$lib/stores/errorStores';
-	import { originalTaskStore, taskStore } from '$lib/stores/taskStores';
 	import TaskEditModal from '$lib/components/tasks/TaskEditModal.svelte';
 	import TaskInfoModal from '$lib/components/tasks/TaskInfoModal.svelte';
 	import TaskCollection from '$lib/components/tasks/TaskCollection.svelte';
@@ -21,6 +20,11 @@
 	/** @type {'pypi'|'local'|'single'} */
 	let packageType = 'pypi';
 
+	/** @type {import('$lib/components/tasks/TaskInfoModal.svelte').default} */
+	let taskInfoModal;
+	/** @type {import('$lib/components/tasks/TaskEditModal.svelte').default} */
+	let taskEditModal;
+
 	// Store subscriptions
 	const unsubscribe = collectTaskErrorStore.subscribe((error) => {
 		if (error) setErrorReasons(error);
@@ -38,15 +42,6 @@
 		return orderTasksByOwnerThenByNameThenByVersion(tasks, null, 'desc');
 	}
 
-	/**
-	 * @param {number} taskId
-	 */
-	function setTaskModal(taskId) {
-		const task = /** @type {import('$lib/types').Task} */ (tasks.find((t) => t.id === taskId));
-		taskStore.set(task);
-		originalTaskStore.set({ ...task });
-	}
-
 	/**
 	 * Updates the tasks list after a task is edited in the modal
 	 * @param {import('$lib/types').Task} editedTask
@@ -273,7 +268,7 @@
 										class="btn btn-light"
 										data-bs-toggle="modal"
 										data-bs-target="#taskInfoModal"
-										on:click={() => setTaskModal(task.id)}
+										on:click={() => taskInfoModal.open(task)}
 									>
 										<i class="bi bi-info-circle" />
 										Info
@@ -282,7 +277,7 @@
 										class="btn btn-primary"
 										data-bs-toggle="modal"
 										data-bs-target="#taskEditModal"
-										on:click={() => setTaskModal(task.id)}
+										on:click={() => taskEditModal.open(task)}
 									>
 										<i class="bi bi-pencil" />
 										Edit
@@ -306,8 +301,8 @@
 	</div>
 </div>
 
-<TaskInfoModal />
-<TaskEditModal {updateEditedTask} />
+<TaskInfoModal bind:this={taskInfoModal} />
+<TaskEditModal bind:this={taskEditModal} {updateEditedTask} />
 
 <style>
 	:global(.is-main-version.expanded td) {