add button to copy shipping contact email to clipboard

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>

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);

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: {