Add on-hover one-click Copy button to subscribers and campaigns tables UI.

Author: knadh

frontend/src/components/CopyText.vue

@@ -1,6 +1,6 @@
 <template>
   <a href="#" class="copy-text" ref="text" @click.prevent="onClick">
-    {{ $props.text }}
+    <template v-if="!hideText">{{ $props.text }}</template>
     <b-icon icon="file-multiple-outline" size="is-small" />
   </a>
 </template>
@@ -11,10 +11,14 @@ export default {
 
   props: {
     text: { type: String, default: '' },
+    hideText: { type: Boolean, default: false },
   },
 
   methods: {
-    onClick() {
+    onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
       const input = document.createElement('input');
       input.setAttribute('type', 'text');
       input.style.opacity = '0';

frontend/src/views/Campaigns.vue

@@ -72,10 +72,11 @@
             </b-tag>
             <router-link :to="{ name: 'campaign', params: { id: props.row.id } }">
               {{ props.row.name }}
+              <copy-text :text="props.row.name" hide-text />
             </router-link>
           </p>
           <p class="is-size-7 has-text-grey">
-            {{ props.row.subject }}
+            <copy-text :text="props.row.subject" />
           </p>
           <b-taglist>
             <b-tag class="is-small" v-for="t in props.row.tags" :key="t">
@@ -265,11 +266,13 @@ import Vue from 'vue';
 import { mapState } from 'vuex';
 import CampaignPreview from '../components/CampaignPreview.vue';
 import EmptyPlaceholder from '../components/EmptyPlaceholder.vue';
+import CopyText from '../components/CopyText.vue';
 
 export default Vue.extend({
   components: {
     CampaignPreview,
     EmptyPlaceholder,
+    CopyText,
   },
 
   data() {

frontend/src/views/Subscribers.vue

@@ -108,6 +108,7 @@
         <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)"
           :class="{ 'blocklisted': props.row.status === 'blocklisted' }">
           {{ props.row.email }}
+          <copy-text :text="`${props.row.email}`" hide-text />
         </a>
         <b-tag v-if="props.row.status !== 'enabled'" :class="props.row.status" data-cy="blocklisted">
           {{ $t(`subscribers.status.${props.row.status}`) }}
@@ -130,6 +131,7 @@
         <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)"
           :class="{ 'blocklisted': props.row.status === 'blocklisted' }">
           {{ props.row.name }}
+          <copy-text :text="`${props.row.name}`" hide-text />
         </a>
       </b-table-column>
 
@@ -194,11 +196,13 @@ import EmptyPlaceholder from '../components/EmptyPlaceholder.vue';
 import { uris } from '../constants';
 import SubscriberBulkList from './SubscriberBulkList.vue';
 import SubscriberForm from './SubscriberForm.vue';
+import CopyText from '../components/CopyText.vue';
 
 export default Vue.extend({
   components: {
     SubscriberForm,
     SubscriberBulkList,
+    CopyText,
     EmptyPlaceholder,
   },