Preview of the PDF in send fax modal

public/css/style.css

@@ -1441,3 +1441,11 @@ button.note-templates-trigger-assessment {
 .collapsible-tbody.collapsed {
     display: none;
 }
+#send-fax-pdf-preview {
+    max-height: 400px;
+    overflow: auto;
+    box-shadow: 0 0 2px #ccc;
+}
+canvas.pdf-viewer-page.pdf-preview-page {
+    margin: 0.5rem auto;
+}

resources/views/app/patient/tickets.blade.php

@@ -558,8 +558,65 @@
                             this.faxNumber = this[this.currentCategory + 'PopupItem'].data.pharmacyFax;
                             Vue.nextTick(() => {
                                 showStagPopup('send-fax-popup');
+                                this.sendFaxModalPDFPreview();
                             });
                         },
+                        sendFaxModalPDFPreview: function() {
+
+                            let _loadedPDF = null, _numPages = 1, _page = 1;
+
+                            function _load(_url) {
+
+                                _loadedPDF = null;
+                                _numPages = 1;
+                                _page = 1;
+
+                                $('#send-fax-pdf-preview>canvas').remove();
+
+                                let url = _url;
+                                let pdfjsLib = window['pdfjs-dist/build/pdf'];
+                                pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
+                                let loadingTask = pdfjsLib.getDocument(url);
+                                loadingTask.promise.then(function (pdf) {
+                                    _numPages = pdf.numPages;
+                                    _loadedPDF = pdf;
+                                    _page = 1;
+                                    _render();
+                                }, function (reason) {
+                                    // reason.message;
+                                });
+                            }
+                            function _render() {
+
+                                _loadedPDF.getPage(_page).then(function (page) {
+
+                                    // create canvas
+                                    let canvasElement = $('<canvas/>')
+                                        .addClass('pdf-viewer-page pdf-preview-page')
+                                        .appendTo('#send-fax-pdf-preview');
+
+                                    let canvas = canvasElement[0];
+                                    let viewport = page.getViewport({scale: 0.75});
+                                    let context = canvas.getContext('2d');
+                                    canvas.height = viewport.height;
+                                    canvas.width = viewport.width;
+                                    const $canvas = $(canvas);
+                                    let renderContext = {
+                                        canvasContext: context,
+                                        viewport: viewport
+                                    };
+                                    let renderTask = page.render(renderContext);
+                                    renderTask.promise.then(function () {
+                                        if(_page < _numPages) {
+                                            _page++;
+                                            _render();
+                                        }
+                                    });
+                                });
+                            }
+
+                            _load('/ticket-download-as-pdf/' + this[this.currentCategory + 'PopupItem'].uid);
+                        },
                         sendFax: function(_item) {
                             $.post('/api/ticketFax/create', {
                                     faxNumber: this.faxNumber,

resources/views/app/patient/tickets/ticket_send_fax_form.blade.php

@@ -5,6 +5,12 @@
             <a href="#" class="ml-auto text-secondary"
                 onclick="return closeStagPopup()"><i class="fa fa-times"></i></a>
         </h3>
+        <div class="mb-2">
+            <p class="text-secondary text-sm mb-2 text-center">Document Preview</p>
+            <div id="send-fax-pdf-preview">
+
+            </div>
+        </div>
         <div class="form-group mb-2">
             <label class="text-sm text-secondary mb-1">Fax Number</label>
             <input type="text" v-model="faxNumber" class="form-control">