#1039: Added overwriteables templates for flow pdfs

CHANGELOG.md

@@ -12,6 +12,8 @@ Nedenfor ses dato for release og beskrivelse af opgaver som er implementeret.
 * Fjernede ekstra OS2Forms indstillingsfaneblad på formularer.
 * Opdaterede [OS2Forms](https://github.com/os2forms/os2forms/) version.
 * Opdaterede [OS2Web Datalookup](https://github.com/OS2web/os2web_datalookup/) version.
+* Tilføjede templates til ændring af `os2forms_attachment` og
+  maestro-pdf-notifikationer i `os2forms_selvbetjening_theme`-temaet.
 
 ## [2.7.11] 2024-05-02
 

config/sync/entity_print.settings.yml

@@ -1,7 +1,7 @@
 _core:
   default_config_hash: nF3sn8D7n0S0cxMK-kk9HmtudLA5iIm0EXJo7xJQQRY
 langcode: da
-default_css: true
+default_css: false
 force_download: true
 print_engines:
   pdf_engine: dompdf

config/sync/os2forms_forloeb.settings.yml

@@ -0,0 +1,19 @@
+known_anonymous_roles:
+  borger: borger
+  anonymous: 0
+  authenticated: 0
+  administrator: 0
+  site_admin: 0
+  flow_designer: 0
+  forloeb_designer: 0
+  sagsbehandler: 0
+  medarbejder: 0
+  leder: 0
+  virksomhed: 0
+  os2forms_rest_api_user: 0
+  os2forms_rest_api_user_write: 0
+processing:
+  queue: os2forms_forloeb_notification
+templates:
+  notification_email: "{#\r\n/**\r\n * @file\r\n * Template for Maestro notification email.\r\n *\r\n * Available variables:\r\n * - message: The notification message\r\n *   - subject: the notification subject\r\n *   - contect: the notification content. Must be rendered as `processed_text`, i.e.:\r\n *     @code\r\n *       {{ {\r\n *       '#type':   'processed_text',\r\n *       '#text':    message.content.value,\r\n *       '#format':  message.content.format,\r\n *       } }}\r\n *     @endcode\r\n * - notification_type: The type of notification ()\r\n * - task_url: URL of the task.\r\n * - action_label: Optional label for the task action.\r\n */\r\n#}\r\n<main>\r\n  {# @see https://api.drupal.org/api/drupal/core%21modules%21filter%21filter.module/function/check_markup/9 #}\r\n  <div class=\"notification-content\">\r\n    {{ {\r\n      '#type':   'processed_text',\r\n      '#text':    message.content.value,\r\n      '#format':  message.content.format,\r\n      } }}\r\n  </div>\r\n\r\n  {% if task-url|default(false) %}\r\n    <a class=\"task-url\" href=\"{{ task-url }}\" style=\"display: block; background: green; color: white; padding: 1em; text-decoration: none; text-align: center\">{{ action_label|default('Go to your task'|t) }}</a>\r\n  {% endif %}\r\n</main>\r\n"
+  notification_pdf: themes/custom/os2forms_selvbetjening_theme/templates/pdf/os2forms-selvbetjening-maestro-notification-pdf-html.html.twig

web/sites/default/settings.php

@@ -801,6 +801,22 @@
 ];
 $settings['config_sync_directory'] = '../config/sync';
 
+/**
+ * Base url.
+ *
+ * Used to generate full URL to stylesheets in os2forms_selvbetjening_theme.
+ */
+$settings['base_url'] = 'http://nginx:8080';
+
+/**
+ * Flow notification pdf template.
+ *
+ * HTML template for PDF notifications (digital post). If the template is a path, e.g.
+ * themes/custom/os2forms_selvbetjening_theme/templates/pdf/os2forms-selvbetjening-maestro-notification-pdf-html.html.twig,
+ * the template will be loaded from this path.
+ */
+$config['os2forms_forloeb.settings']['templates']['notification_pdf'] = 'themes/custom/os2forms_selvbetjening_theme/templates/pdf/os2forms-selvbetjening-maestro-notification-pdf-html.html.twig';
+
 /**
  * Load local development override configuration, if available.
  *

web/themes/custom/os2forms_selvbetjening_theme/README.md

@@ -1,5 +1,37 @@
 # selvbetjening.aarhuskommune.dk
 
+## PDF templates
+
+Two templates, `os2forms-attachment--webform-submission.html.twig` and
+`os2forms-selvbetjening-maestro-notification-pdf-html.html.twig`, are used to render os2forms attachment and maestro notification (pdf) html,
+respectively (the templates are used to render PDF files sent as Digital post).
+
+The maestro notification pdf template is configured in `settings.php` as
+
+```sh
+themes/custom/os2forms_selvbetjening_theme/templates/pdf/os2forms-selvbetjening-maestro-notification-pdf-html.html.twig
+```
+
+which you can override in `settings.local.php` as
+
+```sh
+$config['os2forms_forloeb.settings']['templates']['notification_pdf'] = 'path/to/template';
+```
+
+The os2forms attachment template should automatically be used.
+
+To allow usage of a common stylesheet in the two templates you
+can override the default value (see `settings.php`) 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,137 @@
+@page {
+  size: A4;
+  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,75 @@
+{#
+  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>[current-date: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>