From b4886e604e5f56e3ef9475ad7430888b0ee1d887 Mon Sep 17 00:00:00 2001
From: Shivam Deepak Chaudhary <shivchaudhary790@hotmail.com>
Date: Sat, 11 Feb 2023 09:24:08 +0000
Subject: [PATCH] added copyvolumefield

---
 .../src/lib/components/CopyVolumeField.svelte | 29 +++++++++++++++++
 .../routes/applications/[id]/_Storage.svelte  | 31 ++++++++++++-------
 2 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 apps/ui/src/lib/components/CopyVolumeField.svelte

diff --git a/apps/ui/src/lib/components/CopyVolumeField.svelte b/apps/ui/src/lib/components/CopyVolumeField.svelte
new file mode 100644
index 000000000..d5e6b30c2
--- /dev/null
+++ b/apps/ui/src/lib/components/CopyVolumeField.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { addToast } from '$lib/store';
+
+	export let value = "";
+	let isHttps = window.location.protocol === 'https:';
+
+	function copyToClipboard() {
+		if (isHttps && navigator.clipboard) {
+			navigator.clipboard.writeText(value);
+			addToast({
+				message: 'Copied to clipboard.',
+				type: 'success'
+			});
+		}
+	}
+</script>
+
+<div class="w-full relative">
+	<p class="text-white  p-5">{value}</p>
+    <div class="absolute top-0 right-0 flex justify-center items-center h-full cursor-pointer text-stone-600 mr-3">
+		<div on:click={copyToClipboard}>
+            
+            <svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="stroke-gray-700 hover:stroke-white">
+                <path fill="none" stroke-width="2" d="M9,15 L17,15 L9,15 Z M9,11 L19,11 L9,11 Z M9,7 L13,7 L9,7 Z M16,1 L16,7 L22,7 M6,5 L2,5 L2,23 L18,23 L18,19 M22,19 L6,19 L6,1 L17,1 L22,6 L22,19 L22,19 Z"/>
+              </svg>
+              
+		</div>
+	</div>
+</div>
diff --git a/apps/ui/src/routes/applications/[id]/_Storage.svelte b/apps/ui/src/routes/applications/[id]/_Storage.svelte
index 6e91c7d8f..0e0e13b8b 100644
--- a/apps/ui/src/routes/applications/[id]/_Storage.svelte
+++ b/apps/ui/src/routes/applications/[id]/_Storage.svelte
@@ -7,12 +7,23 @@
 	import { del, post } from '$lib/api';
 	import { page } from '$app/stores';
 	import { createEventDispatcher } from 'svelte';
-
+	import { browser } from '$app/env';
 	import { t } from '$lib/translations';
 	import { errorNotification } from '$lib/common';
 	import { addToast } from '$lib/store';
+	import CopyVolumeField from '$lib/components/CopyVolumeField.svelte';
 	const { id } = $page.params;
-
+	let isHttps = browser && window.location.protocol === 'https:';
+	export let value: string;
+	function copyToClipboard() {
+		if (isHttps && navigator.clipboard) {
+			navigator.clipboard.writeText(value);
+			addToast({
+				message: 'Copied to clipboard.',
+				type: 'success'
+			});
+		}
+	}
 	const dispatch = createEventDispatcher();
 	async function saveStorage(newStorage = false) {
 		try {
@@ -69,18 +80,14 @@
 		<div class="flex gap-4 pb-2" class:pt-8={isNew}>
 			{#if storage.applicationId}
 				{#if storage.oldPath}
-					<input
-						disabled
-						readonly
-						class="w-full"
+		
+					<CopyVolumeField 
 						value="{storage.applicationId}{storage.path.replace(/\//gi, '-').replace('-app', '')}"
-					/>
+						/>
 				{:else}
-					<input
-						disabled
-						readonly
-						class="w-full"
-						value="{storage.applicationId}{storage.path.replace(/\//gi, '-')}"
+				
+					<CopyVolumeField 
+					value="{storage.applicationId}{storage.path.replace(/\//gi, '-').replace('-app', '')}"
 					/>
 				{/if}
 			{/if}