Feature/#704 add copy to clipboard button in application view

src/components/EditableField.vue

@@ -34,7 +34,7 @@
       </span>
       <a 
         href="#"
-        class="govuk-link change-link"
+        class="govuk-link change-link print-none"
         @click.prevent="btnClickEdit()" 
       >
         {{ link }}

src/views/Exercises/Applications/Application.vue

@@ -46,7 +46,13 @@
             >
               Download As Doc
             </button>
-
+            <button
+              id="clipboard-button"
+              class="govuk-button govuk-button--secondary" 
+              @click="copyToClipboard"
+            >
+              Copy to clipboard
+            </button>
             <span
               v-if="activeTab == 'full'"
               class=" govuk-!-margin-left-4"
@@ -98,7 +104,7 @@
               </h2>
             </div>
           </div>
-        </div>        
+        </div>
 
         <TabsList
           class="print-none"
@@ -117,7 +123,7 @@
             >
               <h2 class="govuk-heading-l">
                 Personal details
-                <span class="govuk-hint">
+                <span class="govuk-hint print-none">
                   Any changes made here will also update the candidate information.
                 </span>
               </h2>
@@ -1864,6 +1870,35 @@ export default {
 
       pdf.save(`${fileName}.pdf`);
     },
+    removePrintNone(htmlCollection) {
+      const result = [];
+      if (!htmlCollection.classList.contains('print-none')) {
+        if (htmlCollection.children.length){
+          Array.from(htmlCollection.children).forEach(element => {
+            result.push(this.removePrintNone(element));
+          });
+        } 
+        result.push(htmlCollection.innerText);
+      }
+      return result;
+    },
+    copyToClipboard() {
+      const htmlCollection = (document.querySelector('#panel-pack-div'));
+      const virtualDiv = document.createElement('div');
+      virtualDiv.innerHTML = htmlCollection.innerHTML;
+      const printNoneEls = virtualDiv.querySelectorAll('.print-none');
+      printNoneEls.forEach(e => e.remove());
+      const el = document.createElement('textarea');
+      el.value = virtualDiv.textContent.split('  ').join('\n');
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand('copy');
+      document.body.removeChild(el);
+      document.querySelector('#clipboard-button').innerText = 'Copied';
+      setTimeout(() => {
+        document.querySelector('#clipboard-button').innerText = 'Copy to clipboard';
+      },3000);
+    },
     downloadAsDoc() {
       const fileName = this.generateFilename;
       const content = document.querySelector('#panel-pack-div').outerHTML;
@@ -1912,4 +1947,5 @@ export default {
       width: auto;
     }
   }
+
 </style>