feat: certificate pdf and custom certificate
This commit is contained in:
Jannat Patel
@@ -56,7 +56,7 @@
|
|||||||
],
|
],
|
||||||
"index_web_pages_for_search": 1,
|
"index_web_pages_for_search": 1,
|
||||||
"links": [],
|
"links": [],
|
||||||
"modified": "2022-04-06 11:49:36.077370",
|
"modified": "2023-04-14 12:33:37.839625",
|
||||||
"modified_by": "Administrator",
|
"modified_by": "Administrator",
|
||||||
"module": "LMS",
|
"module": "LMS",
|
||||||
"name": "LMS Certificate",
|
"name": "LMS Certificate",
|
||||||
|
|||||||
@@ -5,9 +5,6 @@ import frappe
|
|||||||
from frappe import _
|
from frappe import _
|
||||||
from frappe.model.document import Document
|
from frappe.model.document import Document
|
||||||
from frappe.utils import add_years, nowdate
|
from frappe.utils import add_years, nowdate
|
||||||
from frappe.utils.pdf import get_pdf
|
|
||||||
from weasyprint import HTML, CSS
|
|
||||||
|
|
||||||
from lms.lms.utils import is_certified
|
from lms.lms.utils import is_certified
|
||||||
|
|
||||||
|
|
||||||
@@ -48,21 +45,3 @@ def create_certificate(course):
|
|||||||
)
|
)
|
||||||
certificate.save(ignore_permissions=True)
|
certificate.save(ignore_permissions=True)
|
||||||
return certificate
|
return certificate
|
||||||
|
|
||||||
|
|
||||||
@frappe.whitelist()
|
|
||||||
def get_certificate_pdf(html_str):
|
|
||||||
|
|
||||||
html = HTML(string=html_str)
|
|
||||||
css = CSS(
|
|
||||||
string="""
|
|
||||||
@page {
|
|
||||||
size: A4 landscape;
|
|
||||||
}"""
|
|
||||||
)
|
|
||||||
main = html.render(stylesheets=[css])
|
|
||||||
pdf = main.write_pdf()
|
|
||||||
|
|
||||||
frappe.local.response.filename = "certificate.pdf"
|
|
||||||
frappe.local.response.filecontent = pdf
|
|
||||||
frappe.local.response.type = "pdf"
|
|
||||||
|
|||||||
32
lms/lms/print_format/certificate/certificate.json
Normal file
32
lms/lms/print_format/certificate/certificate.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"absolute_value": 0,
|
||||||
|
"align_labels_right": 0,
|
||||||
|
"creation": "2023-02-22 21:36:54.560420",
|
||||||
|
"css": ".certificate-card {\n background: #FFFFFF;\n font-family: \"Inter\" sans-serif;\n font-size: 16px;\n}\n\n.outer-border {\n border-radius: 0.5rem;\n border: 1px solid #EEF0F2;\n padding: 1rem;\n width: 80%;\n margin: auto;\n}\n\n.inner-border {\n border: 10px solid #0089FF;\n border-radius: 8px;\n text-align: center;\n padding: 6rem 4rem;\n background-color: #FFFFFF;\n}\n\n.certificate-logo {\n height: 1.5rem;\n margin-bottom: 4rem;\n}\n\n.certificate-name {\n font-size: 2rem;\n font-weight: 500;\n color: #192734;\n margin-bottom: 0.5rem;\n}\n\n.certificate-footer {\n margin: 4rem auto 0;\n width: 70%;\n text-align: center;\n}\n\n.certificate-footer-item {\n color: #192734;\n}\n\n.cursive-font {\n font-family: cursive;\n font-weight: 600;\n}\n\n.certificate-divider {\n margin: 0.5rem 0;\n}\n\n.certificate-expiry {\n margin-left: 2rem;\n}",
|
||||||
|
"custom_format": 1,
|
||||||
|
"disabled": 0,
|
||||||
|
"doc_type": "LMS Certificate",
|
||||||
|
"docstatus": 0,
|
||||||
|
"doctype": "Print Format",
|
||||||
|
"font_size": 14,
|
||||||
|
"format_data": "{\"header\":\"<div class=\\\"document-header\\\">\\n\\t<h3>LMS Certificate</h3>\\n\\t<p>{{ doc.name }}</p>\\n</div>\",\"sections\":[{\"label\":\"\",\"columns\":[{\"label\":\"\",\"fields\":[{\"label\":\"Course\",\"fieldname\":\"course\",\"fieldtype\":\"Link\",\"options\":\"LMS Course\"},{\"label\":\"Member\",\"fieldname\":\"member\",\"fieldtype\":\"Link\",\"options\":\"User\"},{\"label\":\"Member Name\",\"fieldname\":\"member_name\",\"fieldtype\":\"Data\"},{\"label\":\"Evaluator\",\"fieldname\":\"evaluator\",\"fieldtype\":\"Data\",\"options\":\"\"}]},{\"label\":\"\",\"fields\":[{\"label\":\"Issue Date\",\"fieldname\":\"issue_date\",\"fieldtype\":\"Date\"},{\"label\":\"Expiry Date\",\"fieldname\":\"expiry_date\",\"fieldtype\":\"Date\"},{\"label\":\"Version\",\"fieldname\":\"version\",\"fieldtype\":\"Select\",\"options\":\"V13\\nV14\"},{\"label\":\"Module Names for Certificate\",\"fieldname\":\"module_names_for_certificate\",\"fieldtype\":\"Data\"}]}],\"has_fields\":true}]}",
|
||||||
|
"html": "{% set certificate = frappe.db.get_value(\"LMS Certificate\", doc.name, [\"name\", \"member\", \"issue_date\", \"expiry_date\", \"course\"], as_dict=True) %}\n{% set member = frappe.db.get_value(\"User\", doc.member, [\"full_name\"], as_dict=True) %}\n{% set course = frappe.db.get_value(\"LMS Course\", doc.course, [\"title\", \"name\", \"image\"], as_dict=True) %}\n{% set logo = frappe.db.get_single_value(\"Website Settings\", \"banner_image\") %}\n{% set instructors = frappe.get_all(\"Course Instructor\", {\"parent\": doc.course}, pluck=\"instructor\", order_by=\"idx\") %}\n\n<meta name=\"pdfkit-orientation\" content=\"Landscape\">\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap\" rel=\"stylesheet\">\n\n<div class=\"certificate-card\">\n <div class=\"outer-border\">\n <div class=\"inner-border\">\n \n <img src=\"{{ logo }}\" class=\"certificate-logo\">\n <div>\n {{ _(\"This certifies that\") }}\n </div>\n \n <div class=\"certificate-name\" style=\"\">\n {{ member.full_name }}\n </div>\n <div>\n {{ _(\"has successfully completed the course on\") }}\n <b> {{ course.title }} </b>\n on {{ frappe.utils.format_date(certificate.issue_date, \"medium\") }}.\n </div>\n \n <table class=\"certificate-footer\">\n <tr>\n {% if instructors %}\n <td>\n <div class=\"certificate-footer-item cursive-font\">\n {% for i in instructors %}\n \t\t\t\t\t{{ frappe.db.get_value(\"User\", i, \"full_name\") }}\n \t\t\t\t\t{% if not loop.last %}\n \t\t\t\t\t,\n \t\t\t\t\t{% endif %}\n \t\t\t\t\t{% endfor %}\n </div>\n <hr class=\"certificate-divider\">\n <div class=\"text-center\"> {{ _(\"Course Instructor\") }} </div>\n </td>\n {% endif %}\n <td style=\"width: 30%\"></td>\n {% if certificate.expiry_date %}\n <td class=\"certificate-expiry\">\n <div class=\"certificate-footer-item\">\n {{ frappe.utils.format_date(certificate.expiry_date, \"medium\") }}\n </div>\n <hr class=\"certificate-divider\">\n <div class=\"text-center\"> {{ _(\"Expiry Date\") }} </div>\n </td>\n {% endif %}\n </tr>\n </table>\n </div>\n </div>\n</div>",
|
||||||
|
"idx": 0,
|
||||||
|
"line_breaks": 0,
|
||||||
|
"margin_bottom": 15.0,
|
||||||
|
"margin_left": 15.0,
|
||||||
|
"margin_right": 15.0,
|
||||||
|
"margin_top": 15.0,
|
||||||
|
"modified": "2023-04-14 11:01:24.545418",
|
||||||
|
"modified_by": "Administrator",
|
||||||
|
"module": "LMS",
|
||||||
|
"name": "Certificate",
|
||||||
|
"owner": "Administrator",
|
||||||
|
"page_number": "Hide",
|
||||||
|
"print_format_builder": 0,
|
||||||
|
"print_format_builder_beta": 1,
|
||||||
|
"print_format_type": "Jinja",
|
||||||
|
"raw_printing": 0,
|
||||||
|
"show_section_headings": 0,
|
||||||
|
"standard": "Yes"
|
||||||
|
}
|
||||||
@@ -52,3 +52,4 @@ lms.patches.v0_0.add_question_type #09-04-2023
|
|||||||
lms.patches.v0_0.add_evaluator_to_assignment #09-04-2023
|
lms.patches.v0_0.add_evaluator_to_assignment #09-04-2023
|
||||||
lms.patches.v0_0.convert_lesson_markdown_to_html #05-04-2023
|
lms.patches.v0_0.convert_lesson_markdown_to_html #05-04-2023
|
||||||
lms.patches.v0_0.convert_course_description_to_html
|
lms.patches.v0_0.convert_course_description_to_html
|
||||||
|
lms.patches.v0_0.share_certificates
|
||||||
25
lms/patches/v0_0/share_certificates.py
Normal file
25
lms/patches/v0_0/share_certificates.py
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import frappe
|
||||||
|
|
||||||
|
|
||||||
|
def execute():
|
||||||
|
certificates = frappe.get_all("LMS Certificate", fields=["member", "name"])
|
||||||
|
|
||||||
|
for certificate in certificates:
|
||||||
|
if not frappe.db.exists(
|
||||||
|
"DocShare",
|
||||||
|
{
|
||||||
|
"share_doctype": "LMS Certificate",
|
||||||
|
"share_name": certificate.name,
|
||||||
|
"user": certificate.member,
|
||||||
|
},
|
||||||
|
):
|
||||||
|
share = frappe.get_doc(
|
||||||
|
{
|
||||||
|
"doctype": "DocShare",
|
||||||
|
"user": certificate.member,
|
||||||
|
"share_doctype": "LMS Certificate",
|
||||||
|
"share_name": certificate.name,
|
||||||
|
"read": 1,
|
||||||
|
}
|
||||||
|
)
|
||||||
|
share.save(ignore_permissions=True)
|
||||||
@@ -836,71 +836,62 @@ pre {
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.certificate-content {
|
.certificate-card {
|
||||||
background-color: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-width: 10px;
|
font-size: 14px
|
||||||
border-style: solid;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
.certificate-content {
|
||||||
.certificate-content {
|
border-radius: 0.5rem;
|
||||||
border-width: 50px;
|
border: 1px solid #EEF0F2;
|
||||||
}
|
padding: 1rem;
|
||||||
|
font-size: var(--text-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.certificate-border {
|
||||||
|
border: 10px solid #0089FF;
|
||||||
|
/* border-image: url(/assets/lms/images/border.png);
|
||||||
|
border-width: 100;
|
||||||
|
border-style: solid ; */
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 6rem 4rem;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.certificate-logo {
|
||||||
|
height: 1.5rem;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.certificate-name {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #192734;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.certificate-footer {
|
.certificate-footer {
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 4rem auto 0;
|
margin: 4rem auto 0;
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.certificate-ribbon {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
padding: 0.5rem;
|
|
||||||
border-radius: var(--border-radius-md);
|
|
||||||
}
|
|
||||||
|
|
||||||
.certificate-heading {
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.certificate-para {
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.certificate-card {
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: var(--border-radius-md);
|
|
||||||
position: relative;
|
|
||||||
box-shadow: var(--shadow-sm);
|
|
||||||
padding: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.certificate-footer-item {
|
.certificate-footer-item {
|
||||||
color: var(--text-color);
|
color: #192734;
|
||||||
font-weight: bold;
|
}
|
||||||
|
|
||||||
|
.cursive-font {
|
||||||
font-family: cursive;
|
font-family: cursive;
|
||||||
font-size: 1.25rem;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.certificate-logo {
|
.certificate-divider {
|
||||||
height: 1.5rem;
|
margin: 0.5rem 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
.certificate-expiry {
|
||||||
.certificate-card {
|
margin-left: 2rem;
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 550px) {
|
|
||||||
.certificate-content {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.column-card {
|
.column-card {
|
||||||
|
|||||||
@@ -1,43 +1,47 @@
|
|||||||
|
|
||||||
<div id="certificate-card" style="background: #FFFFFF; border-radius: 0.5rem; position: relative;
|
<div id="certificate-card" class="certificate-card">
|
||||||
box-shadow: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1); padding: 1rem;">
|
|
||||||
|
|
||||||
<div style="border-image: url(/assets/lms/images/border.png); padding: 4rem; background-color: #FFFFFF; text-align: center;">
|
<div class="certificate-content">
|
||||||
|
|
||||||
<img src="{{ logo }}" style="height: 1.5rem;">
|
<div class="certificate-border">
|
||||||
<div style="margin-top: 4rem;">
|
|
||||||
|
<img src="{{ logo }}" class="certificate-logo">
|
||||||
|
<div>
|
||||||
{{ _("This certifies that") }}
|
{{ _("This certifies that") }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="font-size: 2rem; font-weight: 500; color: #192734;">
|
<div class="certificate-name">
|
||||||
{{ member.full_name }}
|
{{ member.full_name }}
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 0.5rem;">
|
<div>
|
||||||
{{ _("has successfully completed the course on") }}
|
{{ _("has successfully completed the course on") }}
|
||||||
<b> {{ course.title }} </b>
|
<b> {{ course.title }} </b>
|
||||||
on {{ frappe.utils.format_date(certificate.issue_date, "medium") }}.
|
on {{ frappe.utils.format_date(certificate.issue_date, "medium") }}.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex; justify-content: center; margin: 4rem auto 0; width: fit-content;">
|
<table class="certificate-footer">
|
||||||
|
<tr>
|
||||||
{% if instructors %}
|
{% if instructors %}
|
||||||
<div>
|
<td>
|
||||||
<div style="color: #192734; font-weight: bold; font-family: cursive; font-size: 1.25rem;">
|
<div class="certificate-footer-item cursive-font">
|
||||||
{{ instructors }}
|
{{ instructors }}
|
||||||
</div>
|
</div>
|
||||||
<hr style="margin: 0.5rem 0;">
|
<hr class="certificate-divider">
|
||||||
<div class="text-center"> {{ _("Course Instructor") }} </div>
|
<div class="text-center"> {{ _("Course Instructor") }} </div>
|
||||||
</div>
|
</td>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if certificate.expiry_date %}
|
{% if certificate.expiry_date %}
|
||||||
<div style="margin-left: 2rem;">
|
<td style="width: 30%;"></td>
|
||||||
<div style="color: #192734; font-weight: bold; font-family: cursive; font-size: 1.25rem;">
|
<td>
|
||||||
|
<div class="certificate-footer-item">
|
||||||
{{ frappe.utils.format_date(certificate.expiry_date, "medium") }}
|
{{ frappe.utils.format_date(certificate.expiry_date, "medium") }}
|
||||||
</div>
|
</div>
|
||||||
<hr style="margin: 0.5rem 0;">
|
<hr class="certificate-divider">
|
||||||
<div class="text-center"> {{ _("Expiry date") }} </div>
|
<div class="text-center"> {{ _("Expiry date") }} </div>
|
||||||
</div>
|
</td>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -6,8 +6,9 @@
|
|||||||
<div class="container certificate-page">
|
<div class="container certificate-page">
|
||||||
|
|
||||||
{% if certificate.member == frappe.session.user %}
|
{% if certificate.member == frappe.session.user %}
|
||||||
<div class="button is-secondary pull-right" id="export-as-pdf" data-certificate="{{ certificate.name }}"
|
<a class="btn btn-default btn-sm pull-right" target="_blank" href="/api/method/frappe.utils.print_format.download_pdf?doctype=LMS%20Certificate&name={{ certificate.name }}&_lang=en">
|
||||||
data-certificate-name="{{ member.full_name }} - {{ course.title }}">{{ _("Export") }}</div>
|
{{ _("Export") }}
|
||||||
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
<div class="breadcrumb">
|
<div class="breadcrumb">
|
||||||
|
|||||||
@@ -1,56 +0,0 @@
|
|||||||
frappe.ready(() => {
|
|
||||||
$("#export-as-pdf").click((e) => {
|
|
||||||
export_as_pdf(e);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const export_as_pdf = (e) => {
|
|
||||||
var formData = new FormData();
|
|
||||||
|
|
||||||
//Push the HTML content into an element
|
|
||||||
formData.append("html_str", $("#certificate-card").html());
|
|
||||||
|
|
||||||
var blob = new Blob([], { type: "text/xml" });
|
|
||||||
formData.append("blob", blob);
|
|
||||||
|
|
||||||
var xhr = new XMLHttpRequest();
|
|
||||||
xhr.open(
|
|
||||||
"POST",
|
|
||||||
"/api/method/lms.lms.doctype.lms_certificate.lms_certificate.get_certificate_pdf"
|
|
||||||
);
|
|
||||||
xhr.setRequestHeader("X-Frappe-CSRF-Token", frappe.csrf_token);
|
|
||||||
xhr.responseType = "arraybuffer";
|
|
||||||
|
|
||||||
xhr.onload = function (success) {
|
|
||||||
if (this.status === 200) {
|
|
||||||
var blob = new Blob([success.currentTarget.response], {
|
|
||||||
type: "application/pdf",
|
|
||||||
});
|
|
||||||
var objectUrl = URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
//Open report in a new window
|
|
||||||
window.open(objectUrl);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
xhr.send(formData);
|
|
||||||
};
|
|
||||||
|
|
||||||
const export_as_png = (e) => {
|
|
||||||
let button = $(e.currentTarget);
|
|
||||||
button.text(__("Exporting..."));
|
|
||||||
|
|
||||||
html2canvas(document.querySelector("#certificate-card"), {
|
|
||||||
scrollY: -window.scrollY,
|
|
||||||
scrollX: 0,
|
|
||||||
})
|
|
||||||
.then(function (canvas) {
|
|
||||||
let dataURL = canvas.toDataURL("image/png");
|
|
||||||
let a = document.createElement("a");
|
|
||||||
a.href = dataURL;
|
|
||||||
a.download = button.attr("data-certificate-name");
|
|
||||||
a.click();
|
|
||||||
})
|
|
||||||
.finally(() => {
|
|
||||||
button.text(__("Export"));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user