#1039: Added Maestro notification pdf template

CHANGELOG.md

@@ -8,8 +8,10 @@ Nedenfor ses dato for release og beskrivelse af opgaver som er implementeret.
 
 * Tilføjede mulighed for csv eksport af alle formular konfigurationer.
 * Tilføjede mulighed for ekstra tjek på email modtagere (@aarhus.dk).
+* Tilføjede templates til ændring af `os2forms_attachment` og maestro pdf
+  notifikationer i `os2forms_selvbetjening_theme` temaet.
 
-## [2.7.8] 20-24-03-08
+## [2.7.8] 2024-03-08
 
 * Opdaterede til [OS2Forms NemLogin OpenID Connect
   2.0.1](https://github.com/itk-dev/os2forms_nemlogin_openid_connect/releases/tag/2.0.1)

web/sites/default/settings.php

@@ -801,6 +801,13 @@
 ];
 $settings['config_sync_directory'] = '../config/sync';
 
+/**
+ * Base url.
+ *
+ * Used to generate full path to stylesheets in os2forms_selvbetjening_theme.
+ */
+$settings['base_url'] = 'http://nginx:8080';
+
 /**
  * Load local development override configuration, if available.
  *

web/themes/custom/os2forms_selvbetjening_theme/README.md

@@ -1,5 +1,35 @@
 # selvbetjening.aarhuskommune.dk
 
+## PDF templates
+
+To override PDF templates sent via Digital Post, we have added
+`os2forms-attachment--webform-submission.html.twig` and
+`os2forms-selvbetjening-maestro-notification-pdf-html.html.twig`
+to overwrite os2forms attachment and maestro notification (pdf) html
+respectively.
+
+The maestro notification pdf template should be configured on
+`admin/config/system/os2forms_forloeb` as
+
+```sh
+themes/custom/os2forms_selvbetjening_theme/templates/pdf/os2forms-selvbetjening-maestro-notification-pdf-html.html.twig
+```
+
+whereas the os2forms attachment template automatically should be used.
+
+To allow usage of a common stylesheet in the two templates you
+must configure `base_url` in `settings.local.php`
+
+```php
+$settings['base_url'] = 'http://nginx:8080';
+```
+
+and disable default css in the entity print module. This is done by
+unchecking `Enable Default CSS` on `admin/config/content/entityprint`.
+
+
+## Theme usage
+
 ```sh
 docker-compose run --rm node yarn --cwd /app/web/themes/custom/os2forms_selvbetjening_theme install
 docker-compose run --rm node yarn --cwd /app/web/themes/custom/os2forms_selvbetjening_theme build

web/themes/custom/os2forms_selvbetjening_theme/assets/pdf.css

@@ -0,0 +1,136 @@
+@page {
+  margin: 180px 35px 150px 35px;
+}
+
+body {
+  font-family:"DejaVu Sans",Helvetica,Arial,sans-serif;
+  margin: 0;
+}
+
+header {
+  position: fixed;
+  top: -150px;
+  left: 25px;
+  right: 0px;
+  height: 50px;
+  font-size: 12px;
+}
+
+footer {
+  position: fixed;
+  bottom: -50px;
+  left: 25px;
+  right: 0px;
+  height: 50px;
+  font-size: 12px;
+}
+
+details {
+  border:1px solid #ccc;
+  margin-top:1em;
+  margin-bottom:1em;
+}
+
+summary {
+  font-size: 20px !important;
+  font-weight:bold;
+  padding:.5em .5em 0 .5em;
+}
+
+summary::marker {
+  display:none;
+}
+
+legend, summary, .details-wrapper, fieldset {
+  padding: 0;
+}
+
+fieldset {
+  margin: 0;
+  border: 0;
+}
+
+.page {
+  padding:20px;
+}
+
+.page img {
+  max-width:100%;height:auto;
+}
+
+.page td img {
+  max-width:none;
+}
+
+.details-wrapper {
+  padding:0 1em;
+}
+
+.form-item {
+  margin-top:1em;
+  margin-bottom:1em;
+}
+
+label {
+  display:block;
+  font-weight:bold;
+}
+
+thead {
+  border-bottom: 1px solid black;
+}
+
+th {
+  text-align: left;
+}
+
+details, .claro-details {
+  border: none !important;
+}
+
+.webform-submission-table {
+  width:100%;
+  border-collapse:collapse;
+  border-spacing:0;
+}
+
+.webform-submission-table th {
+  width:33%;
+  min-width:100px;
+}
+
+.webform-submission-table th,
+.webform-submission-table td {
+  text-align:left;
+  padding:10px 12px;
+}
+
+.webform-submission-table tr {
+  border-top:1px solid #ccc;
+  border-bottom:1px solid #ccc;
+  padding:0.1em 0.6em;
+}
+
+.webform-entity-print-body {
+  font-size: 14px;
+  width: 65% !important;
+}
+
+.webform-element {
+  padding: 5px 0;
+  margin: 5px 0;
+  font-size: 12px;
+}
+
+.webform-entity-print-colophon {
+  font-size: 12px;
+  margin-top: -11px;
+}
+
+.webform-section-title {
+  font-size: 14px !important;
+}
+
+.table {
+  width: 100%;
+}

web/themes/custom/os2forms_selvbetjening_theme/templates/pdf/os2forms-attachment--webform-submission.html.twig

@@ -0,0 +1,28 @@
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="description" content="{{ title }}">
+  <meta name="keywords" content="Selvbetjening">
+  <meta name="author" content="{{ author }}">
+  <title>{{ title }}</title>
+  <link rel="stylesheet" media="all" href="{{ base_url }}/themes/custom/os2forms_selvbetjening_theme/assets/pdf.css" />
+</head>
+<body>
+{% if header %}
+<header>
+  {{ header }}
+</header>
+{% endif %}
+
+{% if footer %}
+  <footer>
+    {{ footer }}
+  </footer>
+{% endif %}
+
+<div class="page">
+  {{ content }}
+</div>
+
+</body>
+</html>

web/themes/custom/os2forms_selvbetjening_theme/templates/pdf/os2forms-selvbetjening-maestro-notification-pdf-html.html.twig

@@ -0,0 +1,76 @@
+{#
+  Use this to style Maestro PDF notifications.
+
+  Set it on '/admin/config/system/os2forms_forloeb' PDF template,
+  i.e. 'themes/custom/os2forms_selvbetjening_theme/templates/pdf/os2forms-selvbetjening-maestro-notification-pdf-html.html.twig'.
+
+  This is a composition of
+  os2forms_attachment, os2forms-attachment--webform-submission.html.twig, and
+  os2forms_forloeb, os2forms-forloeb-notification-message-pdf-html.html.twig.
+
+/**
+ * @file
+ * Template for Maestro notification PDF.
+ *
+ * Available variables:
+ * - message: The notification message
+ *   - subject: the notification subject
+ *   - content: the notification content. Must be rendered as `processed_text`, i.e.:
+ *     @code
+ *       {{ {
+ *       '#type':   'processed_text',
+ *       '#text':    message.content.value,
+ *       '#format':  message.content.format,
+ *       } }}
+ *     @endcode
+ * - notification_type: The type of notification ()
+ * - task_url: URL of the task.
+ * - action_label: Optional label for the task action.
+ */
+#}
+<!doctype html>
+<html lang="da">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ message.subject }}</title>
+    <link rel="stylesheet" media="all" href="{{ base_url }}/themes/custom/os2forms_selvbetjening_theme/assets/pdf.css" />
+  </head>
+  <body>
+    <header>
+      <div class="webform-entity-print-header">
+        <p>
+          <img alt="Aarhus Kommune Logo" data-align="right" data-entity-type="" data-entity-uuid="" src="https://cdn.aarhus.dk/bundled/static/aak-logo.svg?hash=6780e75ca799a9b45bb0e51ff430010b" />
+          <br/>
+        </p>
+      </div>
+    </header>
+
+    <div class="page">
+      <div>
+        <div class="webform-entity-print-colophon" style="float:right;width:27%;margin-left:20px;word-wrap:break-word;">
+          <p>[webform_submission:completed:custom:d. F Y]</p>
+          <p><strong>Aarhus Kommune</strong><br />
+            Rådhuspladsen 2<br />
+            8000 Aarhus C</p>
+        </div>
+        <div class="webform-entity-print-body" style="width:70%;">
+          {# @see https://api.drupal.org/api/drupal/core%21modules%21filter%21filter.module/function/check_markup/9 #}
+          <div class="notification-content">
+            {{ {
+              '#type':   'processed_text',
+              '#text':    message.content.value,
+              '#format':  message.content.format,
+            } }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+  <style>
+    fieldset legend {
+      margin-left: -12px;
+    }
+  </style>
+</html>
+