| 1 |
/** |
| 2 |
* Export invoice to PDF |
| 3 |
*/ |
| 4 |
export default function export_invoice() { |
| 5 |
let html2pdf_obj, modal; |
| 6 |
|
| 7 |
document.addEventListener( 'click', ( e ) => { |
| 8 |
const target = e.target; |
| 9 |
|
| 10 |
if ( target.id === 'lp-invoice__export' ) { |
| 11 |
html2pdf_obj.save(); |
| 12 |
} else if ( target.id === 'lp-invoice__update' ) { |
| 13 |
const elOption = document.querySelector( '.export-options__content' ); |
| 14 |
const fields = elOption.querySelectorAll( 'input' ); |
| 15 |
const fieldNameUnChecked = []; |
| 16 |
fields.forEach( ( field ) => { |
| 17 |
if ( ! field.checked ) { |
| 18 |
fieldNameUnChecked.push( field.name ); |
| 19 |
} |
| 20 |
} ); |
| 21 |
|
| 22 |
window.localStorage.setItem( 'lp_invoice_un_fields', JSON.stringify( fieldNameUnChecked ) ); |
| 23 |
window.localStorage.setItem( 'lp_invoice_show', 1 ); |
| 24 |
window.location.reload(); |
| 25 |
} |
| 26 |
} ); |
| 27 |
const exportPDF = () => { |
| 28 |
const pdfOptions = { |
| 29 |
margin: [ 0, 0, 0, 5 ], |
| 30 |
filename: document.title, |
| 31 |
image: { type: 'webp' }, |
| 32 |
html2canvas: { scale: 2.5 }, |
| 33 |
jsPDF: { format: 'a4', orientation: 'p' }, |
| 34 |
}; |
| 35 |
const html = document.querySelector( '#lp-invoice__content' ); |
| 36 |
html2pdf_obj = html2pdf().set( pdfOptions ).from( html ); |
| 37 |
}; |
| 38 |
const showInfoFields = () => { |
| 39 |
// Get fields name checked |
| 40 |
const fieldsChecked = window.localStorage.getItem( 'lp_invoice_un_fields' ); |
| 41 |
const elOptions = document.querySelector( '.export-options__content' ); |
| 42 |
const elInvoiceFields = document.querySelectorAll( '.invoice-field' ); |
| 43 |
elInvoiceFields.forEach( ( field ) => { |
| 44 |
const nameClass = field.classList[ 1 ]; |
| 45 |
if ( fieldsChecked && fieldsChecked.includes( nameClass ) ) { |
| 46 |
field.remove(); |
| 47 |
const elOption = elOptions.querySelector( `[name=${ nameClass }]` ); |
| 48 |
if ( elOption ) { |
| 49 |
elOption.checked = false; |
| 50 |
} |
| 51 |
} |
| 52 |
} ); |
| 53 |
const showInvoice = parseInt( window.localStorage.getItem( 'lp_invoice_show' ) ); |
| 54 |
if ( showInvoice === 1 ) { |
| 55 |
modal.style.display = 'block'; |
| 56 |
} |
| 57 |
}; |
| 58 |
|
| 59 |
document.addEventListener( 'DOMContentLoaded', () => { |
| 60 |
const elExportSection = document.querySelector( '#order-export__section' ); |
| 61 |
if ( ! elExportSection.length ) { |
| 62 |
const tabs = document.querySelectorAll( '.tabs' ); |
| 63 |
const tab = document.querySelectorAll( '.tab' ); |
| 64 |
const panel = document.querySelectorAll( '.panel' ); |
| 65 |
|
| 66 |
function onTabClick( event ) { |
| 67 |
// deactivate existing active tabs and panel |
| 68 |
|
| 69 |
for ( let i = 0; i < tab.length; i++ ) { |
| 70 |
tab[ i ].classList.remove( 'active' ); |
| 71 |
} |
| 72 |
|
| 73 |
for ( let i = 0; i < panel.length; i++ ) { |
| 74 |
panel[ i ].classList.remove( 'active' ); |
| 75 |
} |
| 76 |
|
| 77 |
// activate new tabs and panel |
| 78 |
event.target.classList.add( 'active' ); |
| 79 |
const classString = event.target.getAttribute( 'data-target' ); |
| 80 |
document.getElementById( 'panels' ).getElementsByClassName( classString )[ 0 ].classList.add( 'active' ); |
| 81 |
} |
| 82 |
|
| 83 |
for ( let i = 0; i < tab.length; i++ ) { |
| 84 |
tab[ i ].addEventListener( 'click', onTabClick, false ); |
| 85 |
} |
| 86 |
|
| 87 |
// Get the modal |
| 88 |
modal = document.getElementById( 'myModal' ); |
| 89 |
// Get the button that opens the modal |
| 90 |
const btn = document.getElementById( 'order-export__button' ); |
| 91 |
// Get the <span> element that closes the modal |
| 92 |
const span = document.getElementsByClassName( 'close' )[ 0 ]; |
| 93 |
// When the user clicks on the button, open the modal |
| 94 |
btn.onclick = function() { |
| 95 |
modal.style.display = 'block'; |
| 96 |
}; |
| 97 |
|
| 98 |
// When the user clicks on <span> (x), close the modal |
| 99 |
span.onclick = function() { |
| 100 |
modal.style.display = 'none'; |
| 101 |
window.localStorage.setItem( 'lp_invoice_show', 0 ); |
| 102 |
}; |
| 103 |
|
| 104 |
// When the user clicks anywhere outside the modal, close it |
| 105 |
window.onclick = function( event ) { |
| 106 |
if ( event.target === modal ) { |
| 107 |
modal.style.display = 'none'; |
| 108 |
window.localStorage.setItem( 'lp_invoice_show', 0 ); |
| 109 |
} |
| 110 |
}; |
| 111 |
|
| 112 |
showInfoFields(); |
| 113 |
exportPDF(); |
| 114 |
} |
| 115 |
} ); |
| 116 |
} |
| 117 |
|
