Cleaned up webform import list

Author: rimi-itk

assets/js/webform-index.js

@@ -0,0 +1,20 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const webforms = document.querySelectorAll('.os2forms-sync-webform-index .os2forms-sync-webform')
+  const searchInput = document.querySelector('.os2forms-sync-webform-index [type="search"]')
+
+  const liveSearch = () => {
+    console.log('liveSearch', searchInput.value)
+    const query = searchInput.value
+    webforms.forEach(webform => {
+      webform.hidden = !webform.innerText.toLowerCase().includes(query)
+    })
+  }
+
+  let typingTimer
+  const typingDelay = 250
+
+  searchInput.addEventListener('keyup', () => {
+    clearTimeout(typingTimer)
+    typingTimer = setTimeout(liveSearch, typingDelay)
+  })
+})

os2forms_sync.libraries.yml

@@ -0,0 +1,4 @@
+webform-index:
+  version: 1.x
+  js:
+    assets/js/webform-index.js: {}

os2forms_sync.module

@@ -22,32 +22,22 @@ function os2forms_sync_webform_third_party_settings_form_alter(array &$form, For
 }
 
 /**
- * Implements hook_webform_delete().
+ * Implements hook_theme().
  *
- * @see ImportHelper::deleteWebform()
+ * @see WebformHelper::theme()
+ *
+ * @phpstan-param array<string, mixed> $existing
+ * @phpstan-return array<string, mixed>
  */
-function os2forms_sync_webform_delete(WebformInterface $webform): void {
-  \Drupal::service(ImportHelper::class)->deleteWebform($webform);
+function os2forms_sync_theme(array $existing, string $type, string $theme, string $path): array {
+  return \Drupal::service(WebformHelper::class)->theme($existing, $type, $theme, $path);
 }
 
 /**
- * Implements hook_theme().
+ * Implements hook_webform_delete().
  *
- * @phpstan-param array<string, mixed> $existing
- * @phpstan-return array<string, mixed>
+ * @see ImportHelper::deleteWebform()
  */
-function os2forms_sync_theme(array $existing, string $type, string $theme, string $path): array {
-  return [
-    'os2forms_sync_webforms_index' => [
-      'variables' => [
-        'webforms' => NULL,
-      ],
-    ],
-    'os2forms_sync_webform_import' => [
-      'variables' => [
-        'url' => NULL,
-        'webform' => NULL,
-      ],
-    ],
-  ];
+function os2forms_sync_webform_delete(WebformInterface $webform): void {
+  \Drupal::service(ImportHelper::class)->deleteWebform($webform);
 }

os2forms_sync.routing.yml

@@ -17,6 +17,7 @@ os2forms_sync.webform.import:
   path: '/admin/os2forms/sync/webform/import'
   defaults:
     _controller: '\Drupal\os2forms_sync\Controller\WebformController::import'
+  methods: [POST]
   requirements:
     _permission: 'access webform overview'
 

src/Controller/WebformController.php

@@ -56,10 +56,15 @@ public static function create(ContainerInterface $container): self {
    */
   public function index(): array {
     $webforms = $this->importHelper->getAvailableWebforms();
+    $settingsUrl = Url::fromRoute('os2forms_sync.admin.settings');
+    if (!$settingsUrl->access($this->currentUser())) {
+      $settingsUrl = NULL;
+    }
 
     return [
-      '#theme' => 'os2forms_sync_webforms_index',
+      '#theme' => 'os2forms_sync_webform_index',
       '#webforms' => $webforms,
+      '#settings_url' => $settingsUrl,
     ];
   }
 
@@ -79,27 +84,18 @@ public function import() {
     }
 
     $referrer = $request->query->get('referer');
-    if ('POST' === $request->getMethod()) {
-      try {
-        $webform = $this->importHelper->import($url);
-        $this->messenger()->addStatus($this->t('Webform @title imported.', ['@title' => $webform->get('title')]));
 
-        return new TrustedRedirectResponse($referrer ?? Url::fromRoute('entity.webform.edit_form', ['webform' => $webform->id()])->toString(TRUE)->getGeneratedUrl());
-      }
-      catch (\Exception $exception) {
-        $this->messenger()->addError($exception->getMessage());
-      }
+    try {
+      $webform = $this->importHelper->import($url);
+      $this->messenger()->addStatus($this->t('Webform @title imported.', ['@title' => $webform->get('title')]));
 
-      return new TrustedRedirectResponse($referrer ?? Url::fromRoute('os2forms_sync.webform.import', ['url' => $url])->toString(TRUE)->getGeneratedUrl());
+      return new TrustedRedirectResponse($referrer ?? Url::fromRoute('entity.webform.edit_form', ['webform' => $webform->id()])->toString(TRUE)->getGeneratedUrl());
+    }
+    catch (\Exception $exception) {
+      $this->messenger()->addError($exception->getMessage());
     }
 
-    $webform = $this->importHelper->getAvailableWebform($url);
-
-    return [
-      '#theme' => 'os2forms_sync_webform_import',
-      '#url' => $url,
-      '#webform' => $webform,
-    ];
+    return new TrustedRedirectResponse($referrer ?? Url::fromRoute('os2forms_sync.webform.import', ['url' => $url])->toString(TRUE)->getGeneratedUrl());
   }
 
 }

src/Helper/WebformHelper.php

@@ -191,4 +191,21 @@ public function webformThirdPartySettingsFormAlter(array &$form, FormStateInterf
     }
   }
 
+  /**
+   * Implements hook_theme().
+   *
+   * @phpstan-param array<string, mixed> $existing
+   * @phpstan-return array<string, mixed>
+   */
+  public function theme(array $existing, string $type, string $theme, string $path): array {
+    return [
+      'os2forms_sync_webform_index' => [
+        'variables' => [
+          'webforms' => NULL,
+          'settings_url' => NULL,
+        ],
+      ],
+    ];
+  }
+
 }

templates/os2forms-sync-webform-import.html.twig

@@ -0,0 +1,42 @@
+{{ attach_library('os2forms_sync/webform-index') }}
+
+<section class="os2forms-sync-webform-index">
+  <h1>{{ 'Webforms'|t }}</h1>
+  {% if webforms %}
+    <div>
+      <input type="search" class="form-element form-autocomplete" placeholder="{{ 'Search …'|t }}" />
+    </div>
+    <form method="post">
+      {% for webform in webforms %}
+        <div class="os2forms-sync-webform">
+          <h2>{{ webform.attributes.title|raw }}</h2>
+          <div class="description">
+            {{ webform.attributes.description|raw }}
+          </div>
+          <div class="category">
+            {{ webform.attributes.category }}
+          </div>
+
+          <details>
+            <summary>{{ 'Elements'|t }}</summary>
+
+            <pre>{{ webform.attributes.elements|yaml_encode }}</pre>
+          </details>
+
+          <div class="source">
+            <a href="{{ webform.links.self }}">{{ webform.links.self }}</a>
+          </div>
+
+          <button class="button" formaction="{{ path('os2forms_sync.webform.import', {url: webform.links.self}) }}">{{ 'Import webform'|t }}</button>
+        </div>
+      {% endfor %}
+    </form>
+  {% else %}
+    <div class="alert alert-warning">{{ 'No webforms'|t }}</div>
+  {% endif %}
+
+  {% if settings_url|default() %}
+    <hr>
+    <a href="{{ settings_url }}">{{ 'O2Forms sync settings'|t }}</a>
+  {% endif %}
+</section>