Added “Display on“ options to Map element

CHANGELOG.md

@@ -11,6 +11,8 @@ before starting to add changes. Use example [placed in the end of the page](#exa
 
 ## [Unreleased]
 
+- [PR-315](https://github.com/OS2Forms/os2forms/pull/315)
+  Added “Display on“ options to Map element
 - [#251](https://github.com/OS2Forms/os2forms/issues/251)
   Webform encrypt uninstall problem fix
 - git actions check

modules/os2forms_webform_maps/README.md

@@ -14,3 +14,58 @@ the map. The data can be exported to PDF.
 ## Installation
 
 The module can be installed using the standard Drupal installation procedure.
+
+## Fetching GeoJSON using the API
+
+Assume that we have a webform with ID `my_webform` and the webform has a Map element with ID `my_map`. We can then fetch
+the data for a submission with UUID `c34d01c5-7bd9-4b15-8b01-5787959453c0` on the webform with a HTTP `GET` request (cf.
+[OS2Forms REST API](https://github.com/itk-dev/os2forms_rest_api/blob/main/README.md)):
+
+``` shell name=api-fetch-submission-data
+curl --silent --location --header 'api-key: my-api-key' http://127.0.0.1:8000/webform_rest/my_webform/submission/c34d01c5-7bd9-4b15-8b01-5787959453c0
+# {"entity":{"serial":[{"value":1}],"sid":[{"value":2}],"uuid":[{"value":"c34d01c5-7bd9-4b15-8b01-5787959453c0"}],…```
+```
+
+The result, however, contains a lot of data and we need a little more work the extract just the GeoJSON data.
+
+Using [`jq`](https://jqlang.org/) (or similar tools), we can drill down into the full submission data to extract just
+the GeoJSON data from the Map element (JSON decoding twice along the way):
+
+``` shell name=api-extract-map-element-data
+curl --silent --location --header 'api-key: my-api-key' http://127.0.0.1:8000/webform_rest/my_webform/submission/c34d01c5-7bd9-4b15-8b01-5787959453c0 | jq '.data.my_map | fromjson | .geojson | fromjson'
+```
+
+The final result will be something like
+
+``` json
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          [
+            10.193674,
+            56.158929
+          ],
+          [
+            10.241758,
+            56.155296
+          ],
+          [
+            10.242788,
+            56.130048
+          ],
+          [
+            10.189209,
+            56.129283
+          ]
+        ]
+      }
+    }
+  ]
+}
+```

modules/os2forms_webform_maps/os2forms_webform_maps.module

@@ -5,22 +5,6 @@
  * Module file for os2forms_webform_maps.
  */
 
-/**
- * Implements hook_theme().
- */
-function os2forms_webform_maps_theme() {
-  return [
-    'webform_element_base_html__webform_map_field' => [
-      'variables' => [
-        'element' => [],
-        'value' => NULL,
-        'webform_submission' => NULL,
-        'options' => [],
-      ],
-    ],
-  ];
-}
-
 /**
  * Implements hook_locale_translation_projects_alter().
  */
@@ -29,31 +13,3 @@ function os2forms_webform_maps_locale_translation_projects_alter(&$projects) {
   $path = $module_handler->getModule('os2forms_webform_maps')->getPath();
   $projects['os2forms_webform_maps']['info']['interface translation server pattern'] = $path . '/translations/%language.po';
 }
-
-/**
- * Implements hook_preprocess_webform_element_base_html__webform_map_field().
- */
-function os2forms_webform_maps_preprocess_webform_element_base_html__webform_map_field(array &$variables) {
-  // Decode the plain text value once.
-  $decoded_value = json_decode($variables['value']['#plain_text']);
-
-  // Use the decoded geojson property.
-  $variables['value']['#plain_text'] = $decoded_value->geojson;
-
-  // Load the webform element base HTML template.
-  \Drupal::moduleHandler()->loadInclude('webform', 'inc', 'includes/webform.theme.template');
-  template_preprocess_webform_element_base_html($variables);
-
-  // Generate a unique ID for the map image.
-  $map_image_id = 'map-image-' . $variables['element']['#webform_key'];
-
-  $variables['map_image'] = [
-    '#type' => 'html_tag',
-    '#tag' => 'img',
-    '#attributes' => [
-      'class' => ['handler-help-message'],
-      'id' => [$map_image_id],
-      'src' => $decoded_value->image ?? '',
-    ],
-  ];
-}

modules/os2forms_webform_maps/src/Plugin/WebformElement/WebformLeafletMapField.php

@@ -5,6 +5,7 @@
 use Drupal\Core\Form\FormStateInterface;
 use Drupal\leaflet\LeafletSettingsElementsTrait;
 use Drupal\webform\Plugin\WebformElementBase;
+use Drupal\webform\WebformSubmissionInterface;
 
 /**
  * Provides a 'webform_map_field' element.
@@ -70,6 +71,9 @@ public function defineDefaultProperties(): array {
       'circle_color' => '#3388FF',
       'rectangle_color' => '#3388FF',
 
+      // Display settings.
+      'display_image_on' => ['email', 'html', 'pdf'],
+      'display_geojson_on' => ['text', 'html'],
     ] + parent::defineDefaultProperties();
   }
 
@@ -344,7 +348,120 @@ public function form(array $form, FormStateInterface $form_state) {
       ],
     ];
 
+    $form['display_settings'] = [
+      '#type' => 'fieldset',
+      '#title' => $this->t('Display settings'),
+    ];
+    $form['display_settings']['display_settings_container'] = [
+      'display_image_on' => [
+        '#type' => 'checkboxes',
+        '#title' => $this->t('Display image on'),
+        '#options' => [
+          'email' => $this->t('Email'),
+          'html' => $this->t('HTML'),
+          'pdf' => $this->t('PDF'),
+        ],
+      ],
+
+      'display_geojson_on' => [
+        '#type' => 'checkboxes',
+        '#title' => $this->t('Display GeoJSON on'),
+        '#options' => [
+          'email' => $this->t('Email'),
+          'html' => $this->t('HTML'),
+          'pdf' => $this->t('PDF'),
+          'text' => $this->t('Text'),
+        ],
+      ],
+    ];
+
     return $form;
   }
 
+  /**
+   * {@inheritdoc}
+   */
+  protected function formatHtmlItem(array $element, WebformSubmissionInterface $webform_submission, array $options = []): array {
+    $value = $this->getMapValue($element, $webform_submission, $options);
+
+    $imageId = 'map-image-' . $this->getKey($element);
+
+    $build = [];
+
+    $viewMode = $options['view_mode'] ?? 'results';
+    if ('table' === $viewMode) {
+      $viewMode = 'html';
+    }
+    elseif ($options['email'] ?? FALSE) {
+      $viewMode = 'email';
+    }
+    elseif ($options['pdf'] ?? FALSE) {
+      $viewMode = 'pdf';
+    }
+
+    // @todo Is this (i.e. $element['#display_image_on']) really the way to get element configuration?
+    $showImageOn = array_filter((array) ($element['#display_image_on'] ?? NULL));
+    $includeImage = isset($showImageOn[$viewMode]);
+
+    $showGeoJsonOn = array_filter((array) ($element['#display_geojson_on'] ?? NULL));
+    $includeGeoJson = isset($showGeoJsonOn[$viewMode]);
+
+    if ($includeImage) {
+      $build['image'] = [
+        '#type' => 'html_tag',
+        '#tag' => 'img',
+        '#attributes' => [
+          'class' => ['handler-help-message'],
+          'id' => $imageId,
+          'src' => $value['image'],
+        ],
+        '#prefix' => '<div class="os2forms-webform-maps-image">',
+        '#suffix' => '</div>',
+      ];
+    }
+
+    if ($includeGeoJson) {
+      $build['geojson'] = [
+        '#markup' => $value['geojson'],
+        '#prefix' => '<div class="os2forms-webform-maps-geojson">',
+        '#suffix' => '</div>',
+      ];
+    }
+
+    return $build;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function formatTextItem(array $element, WebformSubmissionInterface $webform_submission, array $options = []) {
+    $value = $this->getMapValue($element, $webform_submission, $options);
+
+    return $value['geojson'];
+  }
+
+  /**
+   * Get structured map value.
+   *
+   * @return array{
+   *   image: string,
+   *     geojson: string
+   *   }
+   */
+  private function getMapValue(array $element, WebformSubmissionInterface $webform_submission, array $options = []): array {
+    $value = $this->getValue($element, $webform_submission, $options);
+
+    try {
+      $data = json_decode($value, associative: TRUE, flags: JSON_THROW_ON_ERROR);
+    }
+    catch (\JsonException) {
+      $data = [];
+    }
+
+    return $data + [
+      'image' => '',
+      'geojson' => 'null',
+    ];
+  }
+
 }