From 2e3c815e53a4b6dff8f422c0a0c62d84c4f5dad4 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <andras.bacsai@gmail.com>
Date: Wed, 7 Dec 2022 15:27:26 +0100
Subject: [PATCH] fix: delete resource on dashboard

---
 .../src/routes/applications/[id]/index.svelte | 16 ++---
 apps/ui/src/routes/index.svelte               | 66 ++++++++++++++++++-
 apps/ui/tailwind.config.cjs                   |  1 +
 3 files changed, 74 insertions(+), 9 deletions(-)

diff --git a/apps/ui/src/routes/applications/[id]/index.svelte b/apps/ui/src/routes/applications/[id]/index.svelte
index 9c1c5b86e..0cd8e145f 100644
--- a/apps/ui/src/routes/applications/[id]/index.svelte
+++ b/apps/ui/src/routes/applications/[id]/index.svelte
@@ -495,9 +495,9 @@
 				{#if !isSimpleDockerfile}
 					<div class="grid grid-cols-2 items-center">
 						<label for="gitSource">{$t('application.git_source')}</label>
-						{#if isDisabled || application.settings.isPublicRepository}
+						{#if isDisabled || application.settings?.isPublicRepository}
 							<input
-								disabled={isDisabled || application.settings.isPublicRepository}
+								disabled={isDisabled || application.settings?.isPublicRepository}
 								class="w-full"
 								value={application.gitSource?.name}
 							/>
@@ -526,7 +526,7 @@
 							/>
 							<a
 								href="{application.gitSource
-									.htmlUrl}/{application.repository}/commits/{application.branch}"
+									?.htmlUrl}/{application.repository}/commits/{application.branch}"
 								target="_blank noreferrer"
 								class="btn btn-primary text-xs"
 								>Commits<svg
@@ -548,10 +548,10 @@
 					</div>
 					<div class="grid grid-cols-2 items-center">
 						<label for="repository">{$t('application.git_repository')}</label>
-						{#if isDisabled || application.settings.isPublicRepository}
+						{#if isDisabled || application.settings?.isPublicRepository}
 							<input
 								class="w-full"
-								disabled={isDisabled || application.settings.isPublicRepository}
+								disabled={isDisabled || application.settings?.isPublicRepository}
 								value="{application.repository}/{application.branch}"
 							/>
 						{:else}
@@ -633,7 +633,7 @@
 					<label for="destination">{$t('application.destination')}</label>
 					<div class="no-underline">
 						<input
-							value={application.destinationDocker.name}
+							value={application.destinationDocker?.name}
 							id="destination"
 							disabled
 							class="bg-transparent w-full"
@@ -880,7 +880,7 @@
 										/>
 									</div>
 									<div class="text-center bg-green-600 rounded">
-										Connected to {application.connectedDatabase.databaseId}
+										Connected to {application.connectedDatabase?.databaseId}
 									</div>
 								{/if}
 							{/if}
@@ -1230,7 +1230,7 @@
 								readonly={!$appSession.isAdmin}
 								name="port"
 								id="port"
-								required={!!dockerComposeConfiguration[service.name].fqdn}
+								required={!!dockerComposeConfiguration[service.name]?.fqdn}
 								bind:value={dockerComposeConfiguration[service.name].port}
 							/>
 						</div>
diff --git a/apps/ui/src/routes/index.svelte b/apps/ui/src/routes/index.svelte
index 2c49b7639..a26878720 100644
--- a/apps/ui/src/routes/index.svelte
+++ b/apps/ui/src/routes/index.svelte
@@ -31,7 +31,7 @@
 	export let destinations: any;
 
 	let filtered: any = setInitials();
-	import { get, post } from '$lib/api';
+	import { del, get, post } from '$lib/api';
 	import { t } from '$lib/translations';
 	import { asyncSleep, errorNotification, getRndInteger } from '$lib/common';
 	import { appSession, search } from '$lib/store';
@@ -42,6 +42,7 @@
 	import { dev } from '$app/env';
 	import NewResource from './_NewResource.svelte';
 	import { onMount } from 'svelte';
+	import DeleteIcon from '$lib/components/DeleteIcon.svelte';
 
 	let numberOfGetStatus = 0;
 	let status: any = {};
@@ -432,6 +433,39 @@
 			return errorNotification(error);
 		}
 	}
+	async function deleteApplication(id: string) {
+		try {
+			const sure = confirm('Are you sure? This will delete this application!');
+			if (sure) {
+				await del(`/applications/${id}`, { force: true });
+				return window.location.reload();
+			}
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+	async function deleteService(id: string) {
+		try {
+			const sure = confirm('Are you sure? This will delete this service!');
+			if (sure) {
+				await del(`/services/${id}`, {});
+				return window.location.reload();
+			}
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
+	async function deleteDatabase(id: string) {
+		try {
+			const sure = confirm('Are you sure? This will delete this database!');
+			if (sure) {
+				await del(`/databases/${id}`, { force: true });
+				return window.location.reload();
+			}
+		} catch (error) {
+			return errorNotification(error);
+		}
+	}
 </script>
 
 <nav class="header">
@@ -749,6 +783,11 @@
 												</svg>
 											</a>
 										{/if}
+										<button
+											class="icons hover:bg-green-500"
+											on:click|stopPropagation|preventDefault={() =>
+												deleteApplication(application.id)}><DeleteIcon /></button
+										>
 									</div>
 								</div>
 							</div>
@@ -857,6 +896,11 @@
 											</svg>
 										</a>
 									{/if}
+									<button
+										class="icons hover:bg-green-500"
+										on:click|stopPropagation|preventDefault={() =>
+											deleteApplication(application.id)}><DeleteIcon /></button
+									>
 								</div>
 							</div>
 						</div>
@@ -947,6 +991,11 @@
 													</svg>
 												</a>
 											{/if}
+											<button
+												class="icons hover:bg-pink-500"
+												on:click|stopPropagation|preventDefault={() => deleteService(service.id)}
+												><DeleteIcon /></button
+											>
 										</div>
 									</div>
 								</div>
@@ -1028,6 +1077,11 @@
 												</svg>
 											</a>
 										{/if}
+										<button
+											class="icons hover:bg-pink-500"
+											on:click|stopPropagation|preventDefault={() => deleteService(service.id)}
+											><DeleteIcon /></button
+										>
 									</div>
 								</div>
 							</div>
@@ -1119,6 +1173,11 @@
 													</svg>
 												</div>
 											{/if}
+											<button
+												class="icons hover:bg-databases-100"
+												on:click|stopPropagation|preventDefault={() => deleteDatabase(database.id)}
+												><DeleteIcon /></button
+											>
 										</div>
 									</div>
 								</div>
@@ -1200,6 +1259,11 @@
 												</svg>
 											</div>
 										{/if}
+										<button
+											class="icons hover:bg-databases"
+											on:click|stopPropagation|preventDefault={() => deleteDatabase(database.id)}
+											><DeleteIcon /></button
+										>
 									</div>
 								</div>
 							</div>
diff --git a/apps/ui/tailwind.config.cjs b/apps/ui/tailwind.config.cjs
index 6fdba38f5..f1fa9734d 100644
--- a/apps/ui/tailwind.config.cjs
+++ b/apps/ui/tailwind.config.cjs
@@ -42,6 +42,7 @@ module.exports = {
 			colors: {
 				"applications": "#16A34A",
 				"databases": "#9333EA",
+				"databases-100": "#9b46ea",
 				"destinations": "#0284C7",
 				"sources": "#EA580C",
 				"services": "#DB2777",