Skip to content

Commit

Permalink
#1039: Added overwriteables templates for pdf
Browse files Browse the repository at this point in the history
  • Loading branch information
jekuaitk committed Mar 27, 2024
1 parent 5815419 commit 19384a4
Show file tree
Hide file tree
Showing 7 changed files with 291 additions and 1 deletion.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@ 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 Maestro notifikation pdf template.

## [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)
Expand Down
7 changes: 7 additions & 0 deletions web/sites/default/settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down
30 changes: 30 additions & 0 deletions web/themes/custom/os2forms_selvbetjening_theme/README.md
Original file line number Diff line number Diff line change
@@ -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
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 {
margin: 180px 35px 150px 35px;
}

body {
font-family:"DejaVu Sans",Helvetica,Arial,sans-serif;
margin: 0;
color: red;
}

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
@@ -1,5 +1,7 @@
<?php

use Drupal\Core\Site\Settings;

/**
* Implements hook_preprocess_page().
*
Expand All @@ -9,3 +11,12 @@ function os2forms_selvbetjening_theme_preprocess_page(&$variables): void {
$variables['site_logo'] = theme_get_setting('logo.url');
$variables['site_name'] = \Drupal::config('system.site')->get('name');
}

/**
* Implements hook_preprocess().
*
* Add 'base_url' variable to be used by templates.
*/
function os2forms_selvbetjening_theme_preprocess(&$vars) {
$vars['base_url'] = Settings::get('base_url');
}
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,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>

0 comments on commit 19384a4

Please sign in to comment.