add button to copy shipping contact email to clipboard

This commit is contained in:
j3d1 2024-01-13 01:32:59 +01:00
parent d6df034ad0
commit 5a1de437b6
3 changed files with 30 additions and 3 deletions

View file

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

View file

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

View file

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