Webapp: make Job and Task ID fields click-to-copy

Click on a job or task ID to copy it to the clipboard.
This commit is contained in:
Sybren A. Stüvel 2022-08-25 13:59:24 +02:00
parent 6b4b205c1c
commit 9d828e5d08
2 changed files with 6 additions and 2 deletions

View File

@ -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.

View File

@ -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(),
};