Skip to content

Commit

Permalink
pdf-builder initial work
Browse files Browse the repository at this point in the history
  • Loading branch information
@imedina
imedina committed Nov 24, 2023
1 parent 6ad5639 commit 56dcea6
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 83 deletions.
2 changes: 1 addition & 1 deletion src/webcomponents/clinical/clinical-analysis-review.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import LitUtils from "../commons/utils/lit-utils.js";
import ClinicalAnalysisManager from "./clinical-analysis-manager.js";
import FormUtils from "../commons/forms/form-utils.js";
import NotificationUtils from "../commons/utils/notification-utils.js";
import PdfBuilder, {stylePdf} from "../../core/pdf-builder.js";
// import PdfBuilder, {stylePdf} from "../../core/pdf-builder.js";
import "./clinical-analysis-summary.js";
import "../variant/interpretation/variant-interpreter-grid.js";
import "../disease-panel/disease-panel-grid.js";
Expand Down
2 changes: 1 addition & 1 deletion src/webcomponents/cohort/cohort-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {LitElement, html} from "lit";
import UtilsNew from "../../core/utils-new.js";
import LitUtils from "../commons/utils/lit-utils.js";
import Types from "../commons/types.js";
import PdfBuilder, {stylePdf} from "../../core/pdf-builder.js";
import PdfBuilder, {stylePdf} from "../commons/forms/pdf-builder.js";
import "../commons/forms/data-form.js";
import "../loading-spinner.js";
import "../study/annotationset/annotation-set-view.js";
Expand Down
224 changes: 144 additions & 80 deletions src/core/pdf-builder.js → ...ebcomponents/commons/forms/pdf-builder.js
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,28 @@
import UtilsNew from "./utils-new";

import UtilsNew from "../../../core/utils-new.js";

export default class PdfBuilder {

defaultStyles = {
h1: {
fontSize: 24,
bold: true,
},
h2: {
fontSize: 20,
bold: true,
},
h3: {
fontSize: 18,
bold: true,
},
h4: {
fontSize: 16,
bold: true,
},
subheader: {
fontSize: 14,
bold: true,
},
body: {
fontSize: 12,
},
label: {
fontSize: 12,
bold: true
},
caption: {
fontSize: 8
},
note: {
fontSize: 10
}
};

defaultTableLayout = {
headerVerticalBlueLine: {
// top & bottom
hLineWidth: function () {
return 0;
},
// left & right
vLineWidth: function (i, node) {
// i == 0 mean no draw line on start
// i == node.table.body.length no draw the last line
if (i === node.table.body.length) {
return 0;
}
// it will draw a line if i == 0
return i === 0 ? 2 : 0;
},
vLineColor: function (i) {
return i === 0 ? "#0c2f4c" : "";
},
fillColor: function () {
return "#f3f3f3";
}
},
};
export default class PdfBuilder {

constructor(data, docDefinition) {
this.#init(data, docDefinition);
constructor(data, dataFormConfig, pdfConfig) {
this.#init(data, dataFormConfig, pdfConfig);
}

// docDefinition Config
#init(data, dataFormConfig) {
#init(data, dataFormConfig, pdfConfig) {
this.data = data ?? {};
this.docDefinitionConfig = dataFormConfig;
this.dataFormConfig = dataFormConfig;
this.pdfConfig = {...this.getDefaultConfig(), ...pdfConfig};

this.docDefinition = {
pageSize: "A4",
styles: {...this.defaultStyles, ...dataFormConfig?.styles},
defaultStyle: {
fontSize: 10
},
watermark: {...dataFormConfig?.displayDoc.watermark},
content: [this.#creatTextElement(dataFormConfig?.displayDoc?.headerTitle), dataFormConfig?.sections ? this.#transformData() : []]
// pageSize: "A4",
// styles: {...this.pdfConfig?.styles, ...pdfConfig?.styles},
// defaultStyle: {
// ...this.pdfConfig?.defaultStyle
// },
// watermark: {...dataFormConfig?.displayDoc.watermark},
...this.pdfConfig,
content: []
};
}

Expand All @@ -99,14 +42,68 @@ export default class PdfBuilder {
return new Promise((resolve, reject) => {
pdfMake.createPdf(this.doc, this.table)
.getBlob(result =>{
resolve(result);
},
err =>{
reject(err);
});
resolve(result);
},
err =>{
reject(err);
});
});
}

render() {
const style = this._parseStyleField(this.config?.display?.style);

// if (this.config?.display?.layout && Array.isArray(this.config.display.layout)) {
// // Render with a specific layout
// return html`
// <div class="${className}" style="${style}">
// ${this.config?.display.layout
// .map(section => {
// const sectionClassName = section.className ?? section.classes ?? "";
// const sectionStyle = section.style ?? "";
//
// if (section.id) {
// return html`
// <div class="${layoutClassName} ${sectionClassName}" style="${sectionStyle}">
// ${this._createSection(this.config.sections.find(s => s.id === section.id))}
// </div>
// `;
// } else {
// // this section contains nested subsections: 'sections'
// return html`
// <div class="${sectionClassName}" style="${sectionStyle}">
// ${(section.sections || [])
// .map(subsection => {
// const subsectionClassName = subsection.className ?? subsection.classes ?? "";
// const subsectionStyle = this._parseStyleField(subsection.style);
// if (subsection.id) {
// return html`
// <div class="${layoutClassName} ${subsectionClassName}" style="${subsectionStyle}">
// ${this._createSection(this.config.sections.find(s => s.id === subsection.id))}
// </div>
// `;
// } else {
// return nothing;
// }
// })
// }
// </div>
// `;
// }
// })}
// </div>
// `;
// } else {
// // Render without layout
// return html`
// <div class="${layoutClassName} ${className}" style="${style}">
// ${this.config.sections.map(section => this._createSection(section))}
// </div>
// `;
// }

}

#getBooleanValue(value, defaultValue) {
const _defaultValue = typeof defaultValue !== "undefined" ? defaultValue : true;

Expand Down Expand Up @@ -136,7 +133,7 @@ export default class PdfBuilder {
* @param {string} field -
* @param {string} defaultValue --
* @returns {Any} return style
*/
*/
#getValue(field, defaultValue) {
const _value = UtilsNew.getObjectValue(this.data, field, defaultValue);
if (typeof _value === "boolean") {
Expand Down Expand Up @@ -368,6 +365,73 @@ export default class PdfBuilder {
return htmlToPdfmake(container, {...defaultHtmlStyle});
}

getDefaultConfig() {
return {
defaultStyle: {
fontSize: 10,
},
styles: {
h1: {
fontSize: 24,
bold: true,
},
h2: {
fontSize: 20,
bold: true,
},
h3: {
fontSize: 18,
bold: true,
},
h4: {
fontSize: 16,
bold: true,
},
subheader: {
fontSize: 14,
bold: true,
},
body: {
fontSize: 12,
},
label: {
fontSize: 12,
bold: true
},
caption: {
fontSize: 8
},
note: {
fontSize: 10
}
},
defaultTableLayout: {
headerVerticalBlueLine: {
// top & bottom
hLineWidth: function () {
return 0;
},
// left & right
vLineWidth: function (i, node) {
// i == 0 mean no draw line on start
// i == node.table.body.length no draw the last line
if (i === node.table.body.length) {
return 0;
}
// it will draw a line if i == 0
return i === 0 ? 2 : 0;
},
vLineColor: function (i) {
return i === 0 ? "#0c2f4c" : "";
},
fillColor: function () {
return "#f3f3f3";
}
}
}
};
}

}

// https://pdfmake.github.io/docs/0.1/document-definition-object/styling/#style-properties
Expand All @@ -391,7 +455,7 @@ export default class PdfBuilder {
/**
* @param {Style} style - Define the style config you want to use for the element
* @returns {Style} return style
*/
*/
export function stylePdf(style) {
return {...style};
}
2 changes: 1 addition & 1 deletion src/webcomponents/sample/sample-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import "../commons/forms/data-form.js";
import "../commons/filters/catalog-search-autocomplete.js";
import "../study/annotationset/annotation-set-view.js";
import "../loading-spinner.js";
import PdfBuilder, {stylePdf} from "../../core/pdf-builder.js";
import PdfBuilder, {stylePdf} from "../commons/forms/pdf-builder";
import CatalogGridFormatter from "../commons/catalog-grid-formatter";

export default class SampleView extends LitElement {
Expand Down

0 comments on commit 56dcea6

Please sign in to comment.