From 82e28f26d798d997f2c7f3b64626e5b4f87a0c1f Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Mon, 21 Oct 2024 15:45:27 +0200
Subject: [PATCH] feedback: add jobID copy btn to jobInfo

---
 .../src/generic/joblist/JobInfo.svelte        | 31 +++++++++++++++----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/web/frontend/src/generic/joblist/JobInfo.svelte b/web/frontend/src/generic/joblist/JobInfo.svelte
index 93b43c3..2e71462 100644
--- a/web/frontend/src/generic/joblist/JobInfo.svelte
+++ b/web/frontend/src/generic/joblist/JobInfo.svelte
@@ -7,7 +7,7 @@
  -->
 
 <script>
-  import { Badge, Icon } from "@sveltestrap/sveltestrap";
+  import { Badge, Button, Icon } from "@sveltestrap/sveltestrap";
   import { scrambleNames, scramble } from "../utils.js";
   import Tag from "../helper/Tag.svelte";
   import TagManagement from "../helper/TagManagement.svelte";
@@ -38,16 +38,35 @@
         return "danger";
     }
   }
+
+  let displayCheck = false;
+  function clipJobId(jid) {
+    displayCheck = true;
+    navigator.clipboard
+      .writeText(jid)
+      .catch((reason) => console.error(reason));
+      setTimeout(function () {
+        displayCheck = false;
+      }, 1500);
+  }
 </script>
 
 <div>
   <p class="mb-2">
-    <span class="fw-bold"
-      ><a href="/monitoring/job/{job.id}" target="_blank">{job.jobId}</a>
-      ({job.cluster})</span
-    >
+    <span class="d-flex justify-content-between">
+      <span class="align-self-center fw-bold mr-2">
+        <a href="/monitoring/job/{job.id}" target="_blank">{job.jobId}</a>
+        ({job.cluster}) 
+      </span>
+      <Button outline color="secondary" size="sm" title="Copy JobID to Clipboard" on:click={clipJobId(job.jobId)} >
+        {#if displayCheck}
+          <Icon name="clipboard2-check-fill"/> Copied
+        {:else}
+          <Icon name="clipboard2"/> Job ID
+        {/if}
+      </Button>
+    </span>
     {#if job.metaData?.jobName}
-      <br />
       {#if job.metaData?.jobName.length <= 25}
         <div>{job.metaData.jobName}</div>
       {:else}