Skip to content

Commit

Permalink
Merge pull request #315 from itk-dev/feature/1039-flows-pdf-style
Browse files Browse the repository at this point in the history
#1039: Added overwriteables templates for flow pdfs
  • Loading branch information
jekuaitk authored May 14, 2024
2 parents 2bdd037 + 2ff6198 commit 8d2c32c
Show file tree
Hide file tree
Showing 8 changed files with 310 additions and 1 deletion.
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion config/sync/entity_print.settings.yml
Original file line number Diff line number Diff line change
@@ -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
Expand Down
19 changes: 19 additions & 0 deletions config/sync/os2forms_forloeb.settings.yml
Original file line number Diff line number Diff line change
@@ -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
16 changes: 16 additions & 0 deletions web/sites/default/settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
32 changes: 32 additions & 0 deletions web/themes/custom/os2forms_selvbetjening_theme/README.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
137 changes: 137 additions & 0 deletions web/themes/custom/os2forms_selvbetjening_theme/assets/pdf.css
Original file line number Diff line number Diff line change
@@ -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%;
}
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 8d2c32c

Please sign in to comment.