Feature/pdf changes

CHANGELOG.md

@@ -6,6 +6,8 @@ Nedenfor ses dato for release og beskrivelse af opgaver som er implementeret.
 
 ## [Under udvikling]
 
+* Ændrede PDF udseende [PR-377](https://github.com/itk-dev/os2forms_selvbetjening/pull/377).
+
 ## [3.2.4] 2025-01-07
 
 * Opdaterede `os2forms` core modulet.

composer.json

@@ -162,6 +162,9 @@
             },
             "os2forms/os2forms": {
                 "Hide additional os2forms webform settings page": "patches/drupal/os2forms/os2forms_hide_additional_settings_page.diff"
+            },
+            "drupal/entity_print": {
+              "Add page count https://www.drupal.org/project/entity_print/issues/2823430": "https://www.drupal.org/files/issues/2023-07-10/entity_print-dompdf_page_count-2823430-14.patch"
             }
         }
     },

web/sites/default/settings.php

@@ -817,6 +817,17 @@
  */
 $config['os2forms_forloeb.settings']['templates']['notification_pdf'] = 'themes/custom/os2forms_selvbetjening_theme/templates/pdf/os2forms-selvbetjening-maestro-notification-pdf-html.html.twig';
 
+$settings['twig_sandbox_allowed_methods'] = [
+  // Defaults (cf. Drupal\Core\Template\TwigSandboxPolicy::__construct()).
+  'id',
+  'label',
+  'bundle',
+  'get',
+  '__toString',
+  'toString',
+  'createFileUrl'
+];
+
 /**
  * Load local development override configuration, if available.
  *

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

@@ -26,6 +26,11 @@ footer {
   font-size: 12px;
 }
 
+.footer-content {
+  width: 70%;
+  display: inline-block;
+}
+
 details {
   border:1px solid #ccc;
   margin-top:1em;
@@ -85,6 +90,10 @@ th {
   text-align: left;
 }
 
+.strong-text {
+  font-weight: bold;
+}
+
 details, .claro-details {
   border: none !important;
 }
@@ -102,8 +111,11 @@ details, .claro-details {
 
 .webform-submission-table th,
 .webform-submission-table td {
+  vertical-align: top;
+  font-size: 12px;
   text-align:left;
   padding:10px 12px;
+  word-break: break-word;
 }
 
 .webform-submission-table tr {
@@ -121,6 +133,13 @@ details, .claro-details {
   padding: 5px 0;
   margin: 5px 0;
   font-size: 12px;
+  page-break-inside: avoid;
+  break-inside: avoid;
+}
+
+/* Hide more link from more element. */
+.webform-element-more--link {
+  display: none;
 }
 
 .webform-entity-print-colophon {
@@ -135,3 +154,16 @@ details, .claro-details {
 .table {
   width: 100%;
 }
+
+.page-numbers {
+  position: absolute;
+  display: inline-block;
+  text-align: right;
+  width: 27%;
+  right: 0;
+  bottom: 0;
+}
+
+.page-numbers .page-number:after {
+  content: counter(page);
+}

web/themes/custom/os2forms_selvbetjening_theme/os2forms_selvbetjening_theme.theme

@@ -9,3 +9,16 @@ 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_entity_print().
+ */
+function os2forms_selvbetjening_theme_preprocess_entity_print(array &$variables) {
+  $current_route = \Drupal::routeMatch();
+  $variables['debug'] = 'entity_print.view.debug' === $current_route->getRouteName();
+  if ($variables['debug']) {
+    $variables['base_url'] = \Drupal::requestStack()->getCurrentRequest()->getSchemeAndHttpHost();
+  }
+
+  $variables['submission_renderable'] = \Drupal::entityTypeManager()->getViewBuilder('webform_submission')->view($variables['webform_submission'], 'table');
+}

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

@@ -14,15 +14,32 @@
   </header>
 {% endif %}
 
-{% if footer %}
-  <footer>
-    {{ footer }}
-  </footer>
-{% endif %}
+<footer>
+  <div class="footer-content">
+    {% if footer %}
+      {{ footer }}
+    {% endif %}
+  </div>
+  <div class="page-numbers">
+    <span>{{ 'Page'|t }}</span>
+    <span class="page-number">
+      {# Page number inserted by css. #}
+    </span>
+    <span>{{ 'of'|t }}</span>
+    <span class="page-count">
+    {# String replace is done by by entity_print_module #}
+      {{ '@@PC' }}
+    </span>
+  </div>
+</footer>
 
 <div class="page">
-  {{ content }}
+  {{ submission_renderable }}
 </div>
 
+{% if debug %}
+  {{ dump() }}
+{% endif %}
+
 </body>
 </html>

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

@@ -44,6 +44,17 @@
       <br/>
     </p>
   </div>
+  <div class="page-numbers">
+    <span>{{ 'Page'|t }}</span>
+    <span class="page-number">
+        {# Page number inserted by css. #}
+      </span>
+    <span>{{ 'of'|t }}</span>
+    <span class="page-count">
+      {# String replace is done by by entity_print_module #}
+      {{ '@@PC' }}
+      </span>
+  </div>
 </header>
 
 <div class="page">

web/themes/custom/os2forms_selvbetjening_theme/templates/webform/table.html.twig

@@ -0,0 +1,136 @@
+{#
+/**
+ * @file
+ * Theme override to display a table.
+ *
+ * Available variables:
+ * - attributes: HTML attributes to apply to the <table> tag.
+ * - caption: A localized string for the <caption> tag.
+ * - colgroups: Column groups. Each group contains the following properties:
+ *   - attributes: HTML attributes to apply to the <col> tag.
+ *     Note: Drupal currently supports only one table header row, see
+ *     https://www.drupal.org/node/893530 and
+ *     http://api.drupal.org/api/drupal/includes!theme.inc/function/theme_table/7#comment-5109.
+ * - header: Table header cells. Each cell contains the following properties:
+ *   - tag: The HTML tag name to use; either 'th' or 'td'.
+ *   - attributes: HTML attributes to apply to the tag.
+ *   - content: A localized string for the title of the column.
+ *   - field: Field name (required for column sorting).
+ *   - sort: Default sort order for this column ("asc" or "desc").
+ * - sticky: A flag indicating whether to use a "sticky" table header.
+ * - rows: Table rows. Each row contains the following properties:
+ *   - attributes: HTML attributes to apply to the <tr> tag.
+ *   - data: Table cells.
+ *   - no_striping: A flag indicating that the row should receive no
+ *     'even / odd' styling. Defaults to FALSE.
+ *   - cells: Table cells of the row. Each cell contains the following keys:
+ *     - tag: The HTML tag name to use; either 'th' or 'td'.
+ *     - attributes: Any HTML attributes, such as "colspan", to apply to the
+ *       table cell.
+ *     - content: The string to display in the table cell.
+ *     - active_table_sort: A boolean indicating whether the cell is the active
+         table sort.
+ *     - header: Boolean indicating whether the cell should be rendered as a
+ *       header (<th>) or not (<td>).
+ * - footer: Table footer rows, in the same format as the rows variable.
+ * - empty: The message to display in an extra row if table does not have
+ *   any rows.
+ * - no_striping: A boolean indicating that the row should receive no striping.
+ * - header_columns: The number of columns in the header.
+ *
+ * @see template_preprocess_table()
+ */
+#}
+
+<table{{ attributes }}>
+  {% if caption %}
+    <caption>{{ caption }}</caption>
+  {% endif %}
+
+  {% for colgroup in colgroups %}
+    {% if colgroup.cols %}
+      <colgroup{{ colgroup.attributes }}>
+        {% for col in colgroup.cols %}
+          <col{{ col.attributes }} />
+        {% endfor %}
+      </colgroup>
+    {% else %}
+      <colgroup{{ colgroup.attributes }} />
+    {% endif %}
+  {% endfor %}
+
+  {% if header %}
+    <thead>
+      <tr>
+        {% for cell in header %}
+          {%
+            set cell_classes = [
+              cell.active_table_sort ? 'is-active',
+            ]
+          %}
+          <{{ cell.tag }}{{ cell.attributes.addClass(cell_classes) }}>
+            {{- cell.content -}}
+          </{{ cell.tag }}>
+        {% endfor %}
+      </tr>
+    </thead>
+  {% endif %}
+
+  {% if rows %}
+    <tbody>
+      {% for row in rows %}
+        {%
+          set row_classes = [
+            not no_striping ? cycle(['odd', 'even'], loop.index0),
+            row.cells[1]['content']['#markup'] is defined ? 'full-width'
+          ]
+        %}
+        <tr{{ row.attributes.addClass(row_classes) }}>
+          {% if row.cells[1]['content']['#markup'] is defined %}
+            {% set contentLength = row.cells[1]['content']['#markup']|length %}
+            {% if contentLength > 100%}
+              <td colspan="2">
+                {% for key,cell in row.cells %}
+                  <div class="{{ key is same as(0) ? 'strong-text' }}">
+                    {{- cell.content -}}
+                  </div>
+                {% endfor %}
+              </td>
+            {% else %}
+              {% for cell in row.cells %}
+                <{{ cell.tag }}{{ cell.attributes }}>
+                {{- cell.content -}}
+                </{{ cell.tag }}>
+              {% endfor %}
+            {% endif %}
+          {% else %}
+            {% for cell in row.cells %}
+              <{{ cell.tag }}{{ cell.attributes }}>
+                {{- cell.content -}}
+              </{{ cell.tag }}>
+            {% endfor %}
+          {% endif %}
+        </tr>
+      {% endfor %}
+    </tbody>
+  {% elseif empty %}
+    <tbody>
+      <tr class="odd">
+        <td colspan="{{ header_columns }}" class="empty message">{{ empty }}</td>
+      </tr>
+    </tbody>
+  {% endif %}
+  {% if footer %}
+    <tfoot>
+      {% for row in footer %}
+        <tr{{ row.attributes }}>
+          {% for cell in row.cells %}
+            <{{ cell.tag }}{{ cell.attributes }}>
+              {{- cell.content -}}
+            </{{ cell.tag }}>
+          {% endfor %}
+        </tr>
+      {% endfor %}
+    </tfoot>
+  {% endif %}
+</table>

web/themes/custom/os2forms_selvbetjening_theme/templates/webform/webform-element-image-file.html.twig

@@ -0,0 +1,19 @@
+{#
+/**
+ * @file
+ * Default theme implementation for an image file element.
+ *
+ * Available variables:
+ * - element: The element.
+ * - value: The element's value.
+ * - options Associative array of options for element.
+ * - file: The element's File object.
+ * - uri: The element's URI.
+ * - style_name: The image style name.
+ * - format: The image display format.
+ * - image: The image.
+ */
+#}
+{{ attach_library('webform/webform.element.image_file') }}
+
+{{ file.getFileName() }}