From 9d828e5d08a86efe6f5ddc5beb485b5e99ccb38e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Thu, 25 Aug 2022 13:59:24 +0200
Subject: [PATCH] Webapp: make Job and Task ID fields click-to-copy

Click on a job or task ID to copy it to the clipboard.
---
 web/app/src/components/jobs/JobDetails.vue  | 4 +++-
 web/app/src/components/jobs/TaskDetails.vue | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index b2fc8aa0..09ae7fe8 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -30,7 +30,7 @@
       <TabItem title="Details">
         <dl>
           <dt class="field-name" title="ID">ID</dt>
-          <dd>{{ jobData.id }}</dd>
+          <dd><span @click="copyElementText" class="click-to-copy">{{ jobData.id }}</span></dd>
 
           <dt class="field-name" title="Name">Name</dt>
           <dd>{{ jobData.name }}</dd>
@@ -73,6 +73,7 @@ import LastRenderedImage from '@/components/jobs/LastRenderedImage.vue'
 import Blocklist from './Blocklist.vue'
 import TabItem from '@/components/TabItem.vue'
 import TabsWrapper from '@/components/TabsWrapper.vue'
+import { copyElementText } from '@/clipboard';
 
 export default {
   props: [
@@ -90,6 +91,7 @@ export default {
   data() {
     return {
       datetime: datetime, // So that the template can access it.
+      copyElementText: copyElementText,
       simpleSettings: null, // Object with filtered job settings, or null if there is no job.
       jobsApi: new API.JobsApi(apiClient),
       jobType: null, // API.AvailableJobType object for the current job type.
diff --git a/web/app/src/components/jobs/TaskDetails.vue b/web/app/src/components/jobs/TaskDetails.vue
index b65e713b..2089e6b5 100644
--- a/web/app/src/components/jobs/TaskDetails.vue
+++ b/web/app/src/components/jobs/TaskDetails.vue
@@ -4,7 +4,7 @@
   <template v-if="hasTaskData">
     <dl>
       <dt class="field-id" title="ID">ID</dt>
-      <dd>{{ taskData.id }}</dd>
+      <dd><span @click="copyElementText" class="click-to-copy">{{ taskData.id }}</span></dd>
 
       <dt class="field-name" title="Name">Name</dt>
       <dd>{{ taskData.name }}</dd>
@@ -76,6 +76,7 @@ import { backendURL } from '@/urls';
 import { apiClient } from '@/stores/api-query-count';
 import { useNotifs } from "@/stores/notifications";
 import LinkWorker from '@/components/LinkWorker.vue';
+import { copyElementText } from '@/clipboard';
 
 export default {
   props: [
@@ -88,6 +89,7 @@ export default {
   data() {
     return {
       datetime: datetime, // So that the template can access it.
+      copyElementText: copyElementText,
       jobsApi: new JobsApi(apiClient),
       notifs: useNotifs(),
     };