replace "freelancer" invoice template with pdf version (#2289)

assets/sass/invoice-pdf.scss

@@ -11,7 +11,7 @@ body {
     margin: 0;
     padding: 0;
 }
-table, tr, td, p {
+table, tr, td, th, p, h1, h2, h3, h4, h5 {
     padding: 0;
     margin: 0;
 }
@@ -25,6 +25,15 @@ td {
 p {
     margin-bottom: 12px;
 }
+.text-small {
+    font-size: 7pt;
+}
+.padding-left {
+    padding-left: 15px;
+}
+.text-center {
+    text-align: center;
+}
 .text-right {
     text-align: right;
 }
@@ -40,20 +49,21 @@ p {
 .wrapper {
     margin: 4px;
 }
+table {
+    width: 100%;
+    border-spacing: 0;
+}
 table.addresses, p {
     line-height: 14pt;
 }
 /* The address table */
 table.addresses {
-    width: 100%;
     margin-bottom: 30px;
 }
 /* The PDF header */
 table.header {
-    border-spacing: 0;
     padding-bottom: 4px;
-    border-bottom: 1px solid #ccc;
-    width: 100%;
+    border-bottom: 1px solid #999;
 }
 table.header .title {
     font-weight: normal;
@@ -61,11 +71,9 @@ table.header .title {
 }
 /* The PDF footer */
 table.footer {
-    border-spacing: 0;
-    border-top: 1px solid #ccc;
+    border-top: 1px solid #999;
     font-size: 80%;
     padding-top: 8px;
-    width: 100%;
     line-height: 14px;
 }
 table.footer td {
@@ -73,7 +81,6 @@ table.footer td {
 }
 /* The invoice items list */
 table.items {
-    width: 100%;
     border-collapse: collapse;
     margin-top: 50px;
     margin-bottom: 60px;
@@ -88,7 +95,7 @@ table.items tbody td.first {
 }
 table.items thead th.last,
 table.items tbody td.last,
-table.items tfoot td.last{
+table.items tfoot td.last {
     padding-right: 0;
 }
 

public/build/entrypoints.json

@@ -26,7 +26,7 @@
         "build/invoice-pdf.0efd7a97.js"
       ],
       "css": [
-        "build/invoice-pdf.cdf28364.css"
+        "build/invoice-pdf.d79f186b.css"
       ]
     },
     "chart": {
@@ -58,7 +58,7 @@
     "build/invoice.74279541.js": "sha384-2BXic5Sgorf2tXai6zSAN4wLY2dbg06L03/xMKW6itMcszvtnRArKzfBh6DNcF3f",
     "build/invoice.13d8ef4e.css": "sha384-B6RN/wZJToSBCZk2JeLokIqWEhbh+Eb9arYbt9dM+YoC2Z6PnCeTwTqSGyexWWJh",
     "build/invoice-pdf.0efd7a97.js": "sha384-bSdIeRCtEJiYYuc2reb0e5CpJ1Kbd1lQNEkElMTiq1SX0IINzdwJJYf6WnCcHrNC",
-    "build/invoice-pdf.cdf28364.css": "sha384-DhWomcxV34umbO4PT7u0CJtvH+X3wAYjszoa3tvP1G08QdYkvtwfKhvdnL/Z8f+8",
+    "build/invoice-pdf.d79f186b.css": "sha384-KSYQKnPrIXiVyfsjoUPzXMIVjPGX7aoYCUKd1eTZUcmKz+a16xKRfzp8bGh8mMoV",
     "build/2.7ab75d0a.js": "sha384-Eb0w73RbUwsfLVRbeGf0Aql77LzAUDrwqY74pyTgwSnf0dsMKwsjlumzhO2JHnVN",
     "build/chart.34d60a88.js": "sha384-I57c9DtU3AOG2kzKqIZkIu0hi1aGYHRZ5QG4LKC9+9slzJnAMttPGXoL2cQG3m6y",
     "build/calendar.541a15eb.js": "sha384-a4HtJGznLY7D1lv25yrokaIVHLY++qak0X2qi83Er1UxWKKLb2Gu6foE+CMA9xhb",

public/build/invoice-pdf.cdf28364.css

@@ -1 +0,0 @@
-body{font-family:sans-serif;font-size:10pt}body,p,table,td,tr{margin:0;padding:0}th{border:none;text-align:left}td{vertical-align:top}p{margin-bottom:12px}.text-right{text-align:right}.text-nowrap{white-space:nowrap}.date{color:#666;font-size:80%;text-align:right;padding-top:6px}.wrapper{margin:4px}p,table.addresses{line-height:14pt}table.addresses{width:100%;margin-bottom:30px}table.header{border-spacing:0;padding-bottom:4px;border-bottom:1px solid #ccc;width:100%}table.header .title{font-weight:400;font-size:140%}table.footer{border-spacing:0;border-top:1px solid #ccc;font-size:80%;padding-top:8px;width:100%;line-height:14px}table.footer td{vertical-align:bottom}table.items{width:100%;border-collapse:collapse;margin-top:50px;margin-bottom:60px}table.items tbody td,table.items thead th{border-bottom:1px solid #ccc}table.items tbody td.first,table.items thead th.first{padding-left:0}table.items tbody td.last,table.items tfoot td.last,table.items thead th.last{padding-right:0}table.items td,table.items th{padding:8px 6px}table.items tfoot td,table.items tfoot th{padding:20px 0 0;line-height:1px}table.items tfoot td.last{padding-left:10px}table.items tr.odd{background-color:#f5f5f5}

public/build/invoice-pdf.d79f186b.css

@@ -0,0 +1 @@
+body{font-family:sans-serif;font-size:10pt}body,h1,h2,h3,h4,h5,p,table,td,th,tr{margin:0;padding:0}th{border:none;text-align:left}td{vertical-align:top}p{margin-bottom:12px}.text-small{font-size:7pt}.padding-left{padding-left:15px}.text-center{text-align:center}.text-right{text-align:right}.text-nowrap{white-space:nowrap}.date{color:#666;font-size:80%;text-align:right;padding-top:6px}.wrapper{margin:4px}table{width:100%;border-spacing:0}p,table.addresses{line-height:14pt}table.addresses{margin-bottom:30px}table.header{padding-bottom:4px;border-bottom:1px solid #999}table.header .title{font-weight:400;font-size:140%}table.footer{border-top:1px solid #999;font-size:80%;padding-top:8px;line-height:14px}table.footer td{vertical-align:bottom}table.items{border-collapse:collapse;margin-top:50px;margin-bottom:60px}table.items tbody td,table.items thead th{border-bottom:1px solid #ccc}table.items tbody td.first,table.items thead th.first{padding-left:0}table.items tbody td.last,table.items tfoot td.last,table.items thead th.last{padding-right:0}table.items td,table.items th{padding:8px 6px}table.items tfoot td,table.items tfoot th{padding:20px 0 0;line-height:1px}table.items tfoot td.last{padding-left:10px}table.items tr.odd{background-color:#f5f5f5}

public/build/manifest.json

@@ -9,7 +9,7 @@
   "build/chart.js": "build/chart.34d60a88.js",
   "build/invoice.css": "build/invoice.13d8ef4e.css",
   "build/invoice.js": "build/invoice.74279541.js",
-  "build/invoice-pdf.css": "build/invoice-pdf.cdf28364.css",
+  "build/invoice-pdf.css": "build/invoice-pdf.d79f186b.css",
   "build/invoice-pdf.js": "build/invoice-pdf.0efd7a97.js",
   "build/runtime.js": "build/runtime.098eaae1.js",
   "build/fonts/fa-brands-400.ttf": "build/fonts/fa-brands-400.085b1dd8.ttf",

templates/invoice/renderer/default-pdf.pdf.twig

@@ -5,9 +5,7 @@
 {% set currency = model.currency %}
 <html lang="{{ language }}">
 <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
+    <meta charset="UTF-8">
     <title>{% block title %}{{ model.invoiceNumber }}-{{ model.customer.company|default(model.customer.name)|u.snake }}{% endblock %}</title>
     <style type="text/css">
         {{ encore_entry_css_source('invoice-pdf')|raw }}
@@ -21,7 +19,7 @@
             <td class="title">
                 {{ model.template.title }}
             </td>
-            <td class="date">
+            <td class="date text-right">
                 {{ 'label.date'|trans }}: {{ model.invoiceDate|date_short }}
             </td>
         </tr>

templates/invoice/renderer/freelancer.html.twig

@@ -1,146 +0,0 @@
-{% import "macros/widgets.html.twig" as widgets %}
-{% extends 'invoice/layout.html.twig' %}
-
-{% block invoice %}
-{% set isDecimal = model.template.decimalDuration|default(false) %}
-{% set currency = model.currency %}
-<div class="row" id="freelancer-invoice">
-    <div class="col-xs-12">
-        <header>
-            <address>
-                <p contenteditable="true">{{ model.template.company }} &ndash; {{ model.template.address|nl2str(' &ndash; ') }}</p>
-            </address>
-        </header>
-        <article class="address">
-            <h1>{{ 'invoice.to'|trans }}</h1>
-            <address>
-                <p>
-                    <strong>{{ model.customer.company|default(model.customer.name) }}</strong><br>
-                    {{ model.customer.address|nl2br }}
-                    {% if model.customer.vatId is not empty %}
-                    <br>
-                    {{ 'label.vat_id'|trans }}: {{ model.customer.vatId }}
-                    {% endif %}
-                </p>
-            </address>
-            <table class="meta">
-                <tr>
-                    <th>{{ 'label.date'|trans }}:</th>
-                    <td contenteditable="true">{{ model.invoiceDate|date_short }}</td>
-                </tr>
-                <tr>
-                    <th>{{ 'invoice.service_date'|trans }}:</th>
-                    <td><span contenteditable="true">{{ model.query.end|month_name }} {{ model.query.end|date('Y') }}</span></td>
-                </tr>
-                <tr>
-                    <th>{{ 'invoice.number'|trans }}:</th>
-                    <td>{{ model.invoiceNumber }}</td>
-                </tr>
-                {% if model.query.project is not empty and model.query.project.orderNumber is not empty %}
-                    <tr>
-                        <th>{{ 'label.orderNumber'|trans }}</th>
-                        <td contenteditable="true">
-                            {{ model.query.project.orderNumber }}
-                        </td>
-                    </tr>
-                {% endif %}
-                {% if model.template.vatId is not empty %}
-                    <tr>
-                        <th>{{ 'label.vat_id'|trans }}:</th>
-                        <td>
-                            {{ model.template.vatId }}
-                        </td>
-                    </tr>
-                {% endif %}
-            </table>
-        </article>
-        <article class="invoice-items">
-            <h2>{{ model.template.title }}</h2>
-            <table class="inventory">
-                <thead>
-                    <tr>
-                        <th>{{ 'label.description'|trans }}</th>
-                        <th class="text-right">{{ 'label.unit_price'|trans }}</th>
-                        <th class="text-right">{{ 'label.amount'|trans }}</th>
-                        <th class="text-right">{{ 'label.total_rate'|trans }}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                {% for entry in model.calculator.entries %}
-                    {% set duration = entry.duration|duration(isDecimal) %}
-                    {% if entry.fixedRate is not null %}
-                        {% set rate = entry.fixedRate %}
-                        {% set duration = entry.amount|amount %}
-                    {% else %}
-                        {% set rate = entry.hourlyRate %}
-                    {% endif %}
-
-                    <tr>
-                        <td contenteditable="true">
-                            {% if entry.description is not empty %}
-                                {{ entry.description|nl2br }}
-                            {% else %}
-                                {% if entry.activity is not null %}{{ entry.activity.name }} / {% endif %}{{ entry.project.name }}
-                            {% endif %}
-                        </td>
-                        <td class="text-right text-nowrap">{{ rate|money(currency) }}</td>
-                        <td class="text-right text-nowrap">{{ duration }}</td>
-                        <td class="text-right text-nowrap">{{ entry.rate|money(currency) }}</td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-            </table>
-            <table class="balance">
-                <tr>
-                    <th>{{ 'invoice.subtotal'|trans }}</th>
-                    <td>{{ model.calculator.subtotal|money(currency) }}</td>
-                </tr>
-                <tr>
-                    <th>{{ 'invoice.tax'|trans }} ({{ model.calculator.vat }}%)</th>
-                    <td>{{ model.calculator.tax|money(currency) }}</td>
-                </tr>
-                <tr>
-                    <th class="total">{{ 'invoice.total'|trans }}</th>
-                    <td class="total">{{ model.calculator.total|money(currency) }}</td>
-                </tr>
-            </table>
-        </article>
-        {% if model.template.paymentTerms is not empty %}
-            <article class="paymentTerms">
-                <div contenteditable="true">
-                    {{ model.template.paymentTerms|md2html }}
-                </div>
-            </article>
-        {% endif %}
-        <footer class="footer">
-            <div class="row">
-                <div class="col-sm-4" contenteditable="true">
-                    <p>
-                        <strong>{{ 'label.address'|trans }}</strong>
-                    </p>
-                    <p>
-                        {{ model.template.company }}<br>
-                        {{ model.template.address|nl2br }}
-                    </p>
-                </div>
-                <div class="col-sm-4 text-center" contenteditable="true">
-                    <p>
-                        <strong>{{ 'label.invoice_bank_account'|trans }}</strong>
-                    </p>
-                    <p>
-                        {{ model.template.paymentDetails|nl2br }}
-                    </p>
-                </div>
-                <div class="col-sm-4 text-right" contenteditable="true">
-                    <p>
-                        <strong>{{ 'label.contact'|trans }}</strong>
-                    </p>
-                    <p>
-                        {{ model.template.contact|nl2br }}
-                    </p>
-                </div>
-            </div>
-        </footer>
-    </div>
-</div>
-{% endblock %}

templates/invoice/renderer/freelancer.pdf.twig

@@ -0,0 +1,165 @@
+<!DOCTYPE html>
+{% set fallback = app.request is not null ? app.request.locale : 'en' %}
+{% set language = model.template.language|default(fallback) %}
+{% set isDecimal = model.template.decimalDuration|default(false) %}
+{% set currency = model.currency %}
+<html lang="{{ language }}">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}{{ model.invoiceNumber }}-{{ model.customer.company|default(model.customer.name)|u.snake }}{% endblock %}</title>
+    <style type="text/css">
+        {{ encore_entry_css_source('invoice-pdf')|raw }}
+    </style>
+</head>
+<body>
+<!--mpdf
+<htmlpageheader name="header">
+    <table class="header">
+        <tr>
+            <td class="text-small">
+                {{ model.template.company }} &ndash; {{ model.template.address|nl2str(' &ndash; ') }}
+            </td>
+            <td class="text-small text-right">
+                {{ 'export.page_of'|trans({'%page%': '{PAGENO}', '%pages%': '{nb}'}) }}
+            </td>
+        </tr>
+    </table>
+</htmlpageheader>
+<sethtmlpageheader name="header" page="ALL" value="on" show-this-page="1" />
+<htmlpagefooter name="footer">
+    <table class="footer text-small">
+        <tr>
+            <td style="width: 33%">
+                <strong>{{ 'label.address'|trans }}</strong>
+                <br>
+                {{ model.template.company }}<br>
+                {{ model.template.address|nl2br }}
+            </td>
+            <td class="text-center">
+                <strong>{{ 'label.invoice_bank_account'|trans }}</strong>
+                <br>
+                {{ model.template.paymentDetails|nl2br }}
+            </td>
+            <td class="text-right" style="width: 33%">
+                <strong>{{ 'label.contact'|trans }}</strong>
+                <br>
+                {{ model.template.contact|nl2br }}
+            </td>
+        </tr>
+    </table>
+</htmlpagefooter>
+<sethtmlpagefooter page="ALL" value="on" name="footer" show-this-page="1" />
+mpdf-->
+<div class="wrapper">
+    <table class="addresses">
+        <tr>
+            <td>
+                <strong>{{ model.customer.company|default(model.customer.name) }}</strong><br>
+                {{ model.customer.address|nl2br }}
+                {% if model.customer.vatId is not empty %}
+                    <br>
+                    {{ 'label.vat_id'|trans }}: {{ model.customer.vatId }}
+                {% endif %}
+            </td>
+            <td class="text-right">
+                <table style="width: 240px">
+                    <tr>
+                        <td>{{ 'label.date'|trans }}:</td>
+                        <td class="text-nowrap padding-left">{{ model.invoiceDate|date_short }}</td>
+                    </tr>
+                    <tr>
+                        <td>{{ 'invoice.service_date'|trans }}:</td>
+                        <td class="text-nowrap padding-left">{{ model.query.end|month_name }} {{ model.query.end|date('Y') }}</td>
+                    </tr>
+                    <tr>
+                        <td>{{ 'invoice.number'|trans }}:</td>
+                        <td class="text-nowrap padding-left">{{ model.invoiceNumber }}</td>
+                    </tr>
+                    <tr>
+                        <td>{{ 'invoice.due_days'|trans }}:</td>
+                        <td class="text-nowrap padding-left">{{ model.dueDate|date_short }}</td>
+                    </tr>
+                    {% if model.query.project is not empty and model.query.project.orderNumber is not empty %}
+                        <tr>
+                            <td>{{ 'label.orderNumber'|trans }}</td>
+                            <td class="text-nowrap padding-left">{{ model.query.project.orderNumber }}</td>
+                        </tr>
+                    {% endif %}
+                    {% if model.template.vatId is not empty %}
+                        <tr>
+                            <td>{{ 'label.vat_id'|trans }}:</td>
+                            <td class="text-nowrap padding-left">{{ model.template.vatId }}</td>
+                        </tr>
+                    {% endif %}
+                </table>
+            </td>
+        </tr>
+    </table>
+
+    <h2 style="margin-top: 60px">{{ model.template.title }}</h2>
+
+    <table class="items">
+        <thead>
+            <tr>
+                <th class="first">{{ 'label.description'|trans }}</th>
+                <th class="text-right">{{ 'label.unit_price'|trans }}</th>
+                <th class="text-right">{{ 'label.amount'|trans }}</th>
+                <th class="last text-right">{{ 'label.total_rate'|trans }}</th>
+            </tr>
+        </thead>
+        <tbody>
+        {% for entry in model.calculator.entries %}
+            {% set duration = entry.duration|duration(isDecimal) %}
+            {% if entry.fixedRate is not null %}
+                {% set rate = entry.fixedRate %}
+                {% set duration = entry.amount|amount %}
+            {% else %}
+                {% set rate = entry.hourlyRate %}
+            {% endif %}
+
+            <tr>
+                <td class="first">
+                    {% if entry.description is not empty %}
+                        {{ entry.description|nl2br }}
+                    {% else %}
+                        {% if entry.activity is not null %}{{ entry.activity.name }} / {% endif %}{{ entry.project.name }}
+                    {% endif %}
+                </td>
+                <td class="text-right text-nowrap">{{ rate|money(currency) }}</td>
+                <td class="text-right text-nowrap">{{ duration }}</td>
+                <td class="last text-right text-nowrap">{{ entry.rate|money(currency) }}</td>
+            </tr>
+        {% endfor %}
+        </tbody>
+        <tfoot>
+            <tr>
+                <td colspan="3" class="text-right">
+                    {{ 'invoice.subtotal'|trans }}
+                </td>
+                <td class="last text-right">{{ model.calculator.subtotal|money(currency) }}</td>
+            </tr>
+            <tr>
+                <td colspan="3" class="text-right">
+                    {{ 'invoice.tax'|trans }} ({{ model.calculator.vat }}%)
+                </td>
+                <td class="last text-right">{{ model.calculator.tax|money(currency) }}</td>
+            </tr>
+            <tr>
+                <td colspan="3" class="text-right text-nowrap">
+                    <strong>{{ 'invoice.total'|trans }}</strong>
+                </td>
+                <td class="last text-right">
+                    <strong>{{ model.calculator.total|money(currency) }}</strong>
+                </td>
+            </tr>
+        </tfoot>
+    </table>
+
+    {% if model.template.paymentTerms is not empty %}
+        <p>
+            {{ model.template.paymentTerms|md2html }}
+        </p>
+    {% endif %}
+</div>
+</body>
+</html>

tests/Invoice/Renderer/PdfRendererTest.php

@@ -31,7 +31,7 @@ class PdfRendererTest extends KernelTestCase
         $env = new Environment($loader);
         $sut = new PdfRenderer($env, $this->createMock(MPdfConverter::class));
         $this->assertTrue($sut->supports($this->getInvoiceDocument('default.pdf.twig', true)));
-        $this->assertFalse($sut->supports($this->getInvoiceDocument('freelancer.html.twig')));
+        $this->assertTrue($sut->supports($this->getInvoiceDocument('freelancer.pdf.twig')));
         $this->assertFalse($sut->supports($this->getInvoiceDocument('timesheet.html.twig')));
         $this->assertFalse($sut->supports($this->getInvoiceDocument('foo.html.twig')));
         $this->assertFalse($sut->supports($this->getInvoiceDocument('company.docx')));

tests/Invoice/Renderer/TwigRendererTest.php

@@ -31,8 +31,8 @@ class TwigRendererTest extends KernelTestCase
         $sut = new TwigRenderer($env);
 
         $this->assertTrue($sut->supports($this->getInvoiceDocument('default.html.twig')));
-        $this->assertTrue($sut->supports($this->getInvoiceDocument('freelancer.html.twig')));
         $this->assertTrue($sut->supports($this->getInvoiceDocument('timesheet.html.twig')));
+        $this->assertFalse($sut->supports($this->getInvoiceDocument('freelancer.pdf.twig')));
         $this->assertFalse($sut->supports($this->getInvoiceDocument('foo.html.twig')));
         $this->assertFalse($sut->supports($this->getInvoiceDocument('company.docx')));
         $this->assertFalse($sut->supports($this->getInvoiceDocument('export.csv')));

tests/Repository/InvoiceDocumentRepositoryTest.php

@@ -32,7 +32,7 @@ class InvoiceDocumentRepositoryTest extends TestCase
         'company.docx',
         'default.html.twig',
         'default-pdf.pdf.twig',
-        'freelancer.html.twig',
+        'freelancer.pdf.twig',
         'timesheet.html.twig',
         'text.txt.twig',
         'javascript.json.twig',

translations/invoice-renderer.de.xlf

@@ -66,7 +66,7 @@
             </trans-unit>
             <trans-unit id="freelancer">
                 <source>freelancer</source>
-                <target>Freiberufler</target>
+                <target>Einzelnes Leistungsdatum</target>
             </trans-unit>
             <trans-unit id="open-spreadsheet">
                 <source>open-spreadsheet</source>

translations/invoice-renderer.en.xlf

@@ -66,7 +66,7 @@
             </trans-unit>
             <trans-unit id="freelancer">
                 <source>freelancer</source>
-                <target>Freelancer</target>
+                <target>Single service date</target>
             </trans-unit>
             <trans-unit id="open-spreadsheet">
                 <source>open-spreadsheet</source>