feat: Use compose instead of normal docker cmd

src/routes/applications/[id]/storage/_Storage.svelte

@@ -6,17 +6,31 @@
 	};
 	import { del, post } from '$lib/api';
 	import { page } from '$app/stores';
+	import { createEventDispatcher } from 'svelte';
+
 	import { errorNotification } from '$lib/form';
+	import { toast } from '@zerodevx/svelte-toast';
 	const { id } = $page.params;
 
-	async function saveStorage() {
+	const dispatch = createEventDispatcher();
+	async function saveStorage(newStorage = false) {
 		try {
+			if (!storage.path) return errorNotification('Path is required.');
 			storage.path = storage.path.startsWith('/') ? storage.path : `/${storage.path}`;
 			storage.path = storage.path.endsWith('/') ? storage.path.slice(0, -1) : storage.path;
 			storage.path.replace(/\/\//g, '/');
 			await post(`/applications/${id}/storage.json`, {
-				path: storage.path
+				path: storage.path,
+				storageId: storage.id,
+				newStorage
 			});
+			dispatch('refresh');
+			if (isNew) {
+				storage.path = null;
+				storage.id = null;
+			}
+			if (newStorage) toast.push('Storage saved.');
+			else toast.push('Storage updated.');
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
@@ -24,6 +38,8 @@
 	async function removeStorage() {
 		try {
 			await del(`/applications/${id}/storage.json`, { path: storage.path });
+			dispatch('refresh');
+			toast.push('Storage deleted.');
 		} catch ({ error }) {
 			return errorNotification(error);
 		}
@@ -32,7 +48,6 @@
 
 <td>
 	<input
-		readonly={!isNew}
 		bind:value={storage.path}
 		required
 		placeholder="eg: /sqlite.db"
@@ -40,10 +55,19 @@
 	/>
 </td>
 <td>
-	<div class="flex items-center justify-center px-2">
-		<button class="bg-green-600 hover:bg-green-500" on:click={saveStorage}>Add</button>
-	</div>
-	<div class="flex items-center justify-center px-2">
-		<button class="bg-green-600 hover:bg-green-500" on:click={removeStorage}>Remove</button>
-	</div>
+	{#if isNew}
+		<div class="flex items-center justify-center">
+			<button class="bg-green-600 hover:bg-green-500" on:click={() => saveStorage(true)}>Add</button
+			>
+		</div>
+	{:else}
+		<div class="flex flex-row justify-center space-x-2">
+			<div class="flex items-center justify-center">
+				<button class="" on:click={() => saveStorage(false)}>Set</button>
+			</div>
+			<div class="flex justify-center items-end">
+				<button class="bg-red-600 hover:bg-red-500" on:click={removeStorage}>Remove</button>
+			</div>
+		</div>
+	{/if}
 </td>

src/routes/applications/[id]/storage/index.json.ts

@@ -1,9 +1,7 @@
-import { getTeam, getUserDetails } from '$lib/common';
+import { getUserDetails } from '$lib/common';
 import * as db from '$lib/database';
 import { ErrorHandler } from '$lib/database';
-import { dockerInstance } from '$lib/docker';
 import type { RequestHandler } from '@sveltejs/kit';
-import jsonwebtoken from 'jsonwebtoken';
 
 export const get: RequestHandler = async (event) => {
 	const { status, body, teamId } = await getUserDetails(event, false);
@@ -27,11 +25,18 @@ export const post: RequestHandler = async (event) => {
 	if (status === 401) return { status, body };
 
 	const { id } = event.params;
-	const { path } = await event.request.json();
+	const { path, newStorage, storageId } = await event.request.json();
 	try {
-		await db.prisma.applicationPersistentStorage.create({
-			data: { path, application: { connect: { id } } }
-		});
+		if (newStorage) {
+			await db.prisma.applicationPersistentStorage.create({
+				data: { path, application: { connect: { id } } }
+			});
+		} else {
+			await db.prisma.applicationPersistentStorage.update({
+				where: { id: storageId },
+				data: { path }
+			});
+		}
 		return {
 			status: 201
 		};

src/routes/applications/[id]/storage/index.svelte

@@ -26,8 +26,13 @@
 	import { getDomain } from '$lib/components/common';
 	import { page } from '$app/stores';
 	import Storage from './_Storage.svelte';
+	import { get } from '$lib/api';
 
 	const { id } = $page.params;
+	async function refreshStorage() {
+		const data = await get(`/applications/${id}/storage.json`);
+		persistentStorages = [...data.persistentStorages];
+	}
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
@@ -49,12 +54,12 @@
 			{#each persistentStorages as storage}
 				{#key storage.id}
 					<tr>
-						<Storage {storage} />
+						<Storage on:refresh={refreshStorage} {storage} />
 					</tr>
 				{/key}
 			{/each}
 			<tr>
-				<Storage isNew />
+				<Storage on:refresh={refreshStorage} isNew />
 			</tr>
 		</tbody>
 	</table>