From 5a1de437b630821618a00b790fbc791734bcfbc5 Mon Sep 17 00:00:00 2001
From: jedi <git@m.j3d1.de>
Date: Sat, 13 Jan 2024 01:32:59 +0100
Subject: [PATCH] add button to copy shipping contact email to clipboard

---
 web/src/components/inputs/ClipboardButton.vue | 18 ++++++++++++++++++
 web/src/main.js                               |  4 ++--
 web/src/views/Ticket.vue                      | 11 ++++++++++-
 3 files changed, 30 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/inputs/ClipboardButton.vue

diff --git a/web/src/components/inputs/ClipboardButton.vue b/web/src/components/inputs/ClipboardButton.vue
new file mode 100644
index 0000000..0f164e6
--- /dev/null
+++ b/web/src/components/inputs/ClipboardButton.vue
@@ -0,0 +1,18 @@
+<template>
+    <button @click="fillClipboard" class="btn" :title="payload">
+        <slot></slot>
+    </button>
+</template>
+
+<script>
+
+export default {
+    name: 'ClipboardButton',
+    props: ['payload'],
+    methods: {
+        fillClipboard() {
+            navigator.clipboard.writeText(this.payload);
+        },
+    }
+};
+</script>
diff --git a/web/src/main.js b/web/src/main.js
index 9c59ae2..a63572e 100644
--- a/web/src/main.js
+++ b/web/src/main.js
@@ -36,7 +36,7 @@ import {
     faUser,
     faComments,
     faArchive,
-    faMinus, faHourglass, faExclamation,
+    faMinus, faHourglass, faExclamation, faClipboard,
 } from '@fortawesome/free-solid-svg-icons';
 import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
@@ -44,7 +44,7 @@ import vueDebounce from 'vue-debounce';
 
 library.add(faPlus, faCheckCircle, faEdit, faTrash, faCat, faSyncAlt, faSort, faSortUp, faSortDown, faTh, faList,
     faWindowClose, faCamera, faStop, faPen, faCheck, faTimes, faSave, faEye, faComment, faUser, faComments, faEnvelope,
-    faArchive, faMinus, faExclamation, faHourglass);
+    faArchive, faMinus, faExclamation, faHourglass, faClipboard);
 Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 sync(store, router);
diff --git a/web/src/views/Ticket.vue b/web/src/views/Ticket.vue
index e097f5c..f772370 100644
--- a/web/src/views/Ticket.vue
+++ b/web/src/views/Ticket.vue
@@ -16,6 +16,10 @@
                         <button-- class="btn btn-success" @click="markItemReturned({type: 'tickets', id: ticket.id})">Mark
                             as returned
                         </button-->
+                        <ClipboardButton :payload="shippingEmail" class="btn btn-primary">
+                            <font-awesome-icon icon="clipboard"/>
+                            Copy DHL contact to clipboard
+                        </ClipboardButton>
                         <div class="btn-group">
                             <select class="form-control" v-model="ticket.state">
                                 <option v-for="status in state_options" :value="status.value">{{ status.text }}</option>
@@ -32,16 +36,21 @@
 <script>
 import {mapActions, mapState} from 'vuex';
 import Timeline from "@/components/Timeline.vue";
+import ClipboardButton from "@/components/inputs/ClipboardButton.vue";
 
 export default {
     name: 'Ticket',
-    components: {Timeline},
+    components: {ClipboardButton, Timeline},
     computed: {
         ...mapState(['tickets', 'state_options']),
         ticket() {
             const id = parseInt(this.$route.params.id)
             const ret = this.tickets.find(ticket => ticket.id === id);
             return ret ? ret : {};
+        },
+        shippingEmail() {
+            const domain = document.location.hostname;
+            return `ticket+${this.ticket.uuid}@${domain}`;
         }
     },
     methods: {