Issue #3414116 by Christian.wiedemann: Move FormBuilder AJAX Handler to Static Class

modules/ui_patterns_field_formatters/src/Plugin/Field/FieldFormatter/ComponentAllFormatter.php

@@ -38,7 +38,14 @@ class ComponentAllFormatter extends FormatterBase {
    * {@inheritdoc}
    */
   public static function defaultSettings() {
-    return parent::defaultSettings() + self::getComponentSettingsFormDefault();
+    return parent::defaultSettings() + self::getComponentFormDefault();
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getComponentSettings(): array {
+    return $this->getSettings();
   }
 
   /**
@@ -52,8 +59,7 @@ class ComponentAllFormatter extends FormatterBase {
    * {@inheritdoc}
    */
   public function viewElements(FieldItemListInterface $items, $langcode) {
-    $build = $this->buildComponentSettingsData();
-    return $build;
+    // @todo Implement viewElements() method.
   }
 
 }

modules/ui_patterns_field_formatters/ui_patterns_field_formatters.module

 <?php
 
+/**
+ * @file
+ * Adds UI Patterns component field formatter to existing fields.
+ */
+
 declare(strict_types = 1);
 
 /**

modules/ui_patterns_layouts/ui_patterns_layouts.module

 <?php
 
+/**
+ * @file
+ */
+
 declare(strict_types = 1);
 
 /**
@@ -8,7 +12,6 @@ declare(strict_types = 1);
  */
 
 use Drupal\Core\Layout\LayoutDefinition;
-use Drupal\ui_patterns_layouts\Plugin\Layout\ComponentLayout;
 
 /**
  * Implements hook_layout_alter().

modules/ui_patterns_library/ui_patterns_library.module

 <?php
 
+/**
+ * @file
+ */
+
 declare(strict_types = 1);
 
 /**

modules/ui_patterns_views/src/Plugin/views/row/ComponentRow.php

@@ -4,7 +4,7 @@ declare(strict_types = 1);
 
 namespace Drupal\ui_patterns_views\Plugin\views\row;
 
-use Drupal\ui_patterns\Form\PatternDisplayFormTrait;
+use Drupal\ui_patterns\Form\ComponentSettingsFormBuilderTrait;
 use Drupal\views\Plugin\views\row\Fields;
 
 /**
@@ -22,6 +22,13 @@ use Drupal\views\Plugin\views\row\Fields;
  */
 class ComponentRow extends Fields {
 
-  use PatternDisplayFormTrait;
+  use ComponentSettingsFormBuilderTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getComponentSettings(): array {
+    return $this->options;
+  }
 
 }

modules/ui_patterns_views/src/Plugin/views/style/ComponentStyle.php

@@ -5,7 +5,8 @@ declare(strict_types = 1);
 namespace Drupal\ui_patterns_views\Plugin\views\style;
 
 use Drupal\Core\Form\FormStateInterface;
-use Drupal\ui_patterns\Form\ComponentFormBuilderTrait;
+use Drupal\Core\Url;
+use Drupal\ui_patterns\Form\ComponentSettingsFormBuilderTrait;
 use Drupal\views\Plugin\views\style\StylePluginBase;
 
 /**
@@ -23,40 +24,53 @@ use Drupal\views\Plugin\views\style\StylePluginBase;
  */
 class ComponentStyle extends StylePluginBase {
 
-  use ComponentFormBuilderTrait;
+  use ComponentSettingsFormBuilderTrait;
 
   /**
    * {@inheritdoc}
    */
   protected $usesRowPlugin = TRUE;
 
+  /**
+   * {@inheritdoc}
+   */
+  protected $usesOptions = TRUE;
+
   /**
    * {@inheritdoc}
    */
   protected function defineOptions(): array {
-    return parent::defineOptions() + self::getComponentFormDefault();
+    return parent::defineOptions() + ['ui_patterns' => ['default' => self::getComponentFormDefault()['ui_patterns']]];
   }
 
   /**
    * {@inheritdoc}
    */
   public function buildOptionsForm(&$form, FormStateInterface $form_state) {
+    $ui_patterns_form = $this->componentSettingsForm($form, $form_state);
+    $form['ui_patterns'] = $ui_patterns_form['ui_patterns'];
     parent::buildOptionsForm($form, $form_state);
-    $configuration = $this->options ?: $this->defineOptions();
-    return $this->buildComponentsForm($form_state, $configuration, NULL, TRUE, TRUE);
   }
 
   /**
    * {@inheritdoc}
    */
-  public function render(): array {
-    $build = parent::render();
-    $ui_patterns = $this->options['ui_patterns'];
+  public function getComponentSettings(): array {
+    return $this->options;
+  }
 
-    // We are using groups ($usesRowPlugin)
-    foreach ($build as $delta => $group) {
-    }
-    return $build;
+  /**
+   * {@inheritdoc}
+   */
+  protected function getAjaxUrl(FormStateInterface $form_state): ?Url {
+    return views_ui_build_form_url($form_state);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function render(): array {
+    return [];
   }
 
 }

modules/ui_patterns_views/ui_patterns_views.module

+<?php
+
+/**
+ * @file
+ * Adds views configuration changes after AJAX interactions.
+ */
+
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Implements ui_patterns_form_configuration_changed().
+ */
+function ui_patterns_views_ui_patterns_form_configuration_changed(FormStateInterface $form_state, array $configuration) {
+  /** @var \Drupal\views_ui\ViewUI $view */
+  $view = $form_state->get('view');
+  if ($view !== NULL) {
+    /** @var \Drupal\views\ViewExecutable $executable */
+    $executable = $form_state->get('view')->getExecutable();
+    $display_id = $form_state->get('display_id');
+    $type = str_replace('_options', '', $form_state->get('type'));
+    $executable->displayHandlers->get($display_id)->setOption($type, ['type' => 'ui_patterns', 'options' => ['ui_patterns' => $configuration], 'grouping' => []]);
+    $view->cacheSet();
+    $form_state->set('rerender', TRUE);
+  }
+}

src/Form/ComponentFormBuilderState.php

+<?php
+
+declare(strict_types = 1);
+
+namespace Drupal\ui_patterns\Form;
+
+use Drupal\Component\Utility\NestedArray;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Component Form Builder State
+ *
+ * Stores the component form builder states and AJAX handlers.
+ */
+final class ComponentFormBuilderState {
+
+  /**
+   * Return the form api storage subkey.
+   */
+  private static function getComponentStorageSubKey(FormStateInterface $form_state, $storage_sub_key = 'default'): string {
+    $trigger_element = $form_state->getTriggeringElement();
+    return $trigger_element['#ui_patterns']['storage_sub_key'] ?? $storage_sub_key;
+  }
+
+  /**
+   * Returns component storage.
+   */
+  public static function getComponentStorage(FormStateInterface $form_state, $storage_sub_key = 'default'): array {
+    $storage = $form_state->getStorage();
+    return $storage['ui_patterns'][self::getComponentStorageSubKey($form_state, $storage_sub_key)] ?? [];
+  }
+
+  /**
+   * Sets the component storage to form_state storage.
+   */
+  public static function setComponentStorage(
+    $storage,
+    FormStateInterface $form_state,
+    $storage_sub_key = 'default'
+  ): void {
+    $origin_storage = $form_state->getStorage();
+
+    $origin_storage['ui_patterns'][self::getComponentStorageSubKey($form_state, $storage_sub_key)] = $storage;
+    $form_state->setStorage($origin_storage);
+  }
+
+  /**
+   * Sets the component state.
+   */
+  public static function setComponentFormState(
+    $key,
+    $value,
+    FormStateInterface $form_state,
+    $storage_sub_key = 'default',
+    $invoke_hook = TRUE
+  ): void {
+    if ($key === 'configuration' && $invoke_hook) {
+      \Drupal::moduleHandler()->invokeAll('ui_patterns_form_configuration_changed', [$form_state, $value]);
+    }
+    $storage = self::getComponentStorage($form_state, $storage_sub_key);
+    $storage[$key] = $value;
+    self::setComponentStorage($storage, $form_state, $storage_sub_key);
+  }
+
+  /**
+   * Get the current form state.
+   */
+  public static function getComponentFormState(
+    $key,
+    FormStateInterface $form_state,
+    $storage_sub_key = 'default'
+  ): mixed {
+    $storage = self::getComponentStorage($form_state, $storage_sub_key);
+    return $storage[$key] ?? NULL;
+  }
+
+  /**
+   * Ajax submit handler: Add slot item.
+   */
+  public static function addSlotItemSubmitAjax(
+    array $form,
+    FormStateInterface $form_state
+  ) {
+    $button = $form_state->getTriggeringElement();
+    $slot_id = $button['#slot_id'];
+    $source_id = $button['#source_id'];
+    $configuration = self::getComponentFormState(
+      'configuration',
+      $form_state
+    );
+    $configuration['component']['slots'][$slot_id]['sources'][] = ['id' => $source_id];
+    self::setComponentFormState('configuration', $configuration, $form_state);
+    $form_state->setRebuild();
+  }
+
+  /**
+   * Ajax handler: Add slot item.
+   */
+  public static function addSlotItemAjax(array $form, FormStateInterface $form_state) {
+    $parents = $form_state->getTriggeringElement()['#array_parents'];
+    $form = NestedArray::getValue($form, array_slice($parents, 0, -2));
+    return $form['sources'];
+  }
+
+  /**
+   * Ajax submit handler: Remove slot item.
+   */
+  public static function removeSlotItemSubmitAjax(
+    array $form,
+    FormStateInterface $form_state
+  ) {
+    $button = $form_state->getTriggeringElement();
+    $delta = $button['#delta'];
+    $slot_id = $button['#slot_id'];
+    $configuration = self::getComponentFormState(
+      'configuration',
+      $form_state
+    );
+    unset($configuration['component']['slots'][$slot_id]['sources'][$delta]);
+    self::setComponentFormState('configuration', $configuration, $form_state);
+    $form_state->setRebuild();
+  }
+
+  /**
+   * Ajax handler: Remove slot item.
+   */
+  final public static function removeSlotItemAjax(
+    array $form,
+    FormStateInterface $form_state
+  ) {
+    $parents = $form_state->getTriggeringElement()['#array_parents'];
+    return NestedArray::getValue($form, array_slice($parents, 0, -4));
+  }
+
+  /**
+   * Ajax submit handler: Change props type submit handler.
+   */
+  public static function changePropSubmitAjax(
+    array $form,
+    FormStateInterface $form_state
+  ) {
+    $configuration = ComponentFormBuilderState::getComponentFormState('configuration', $form_state);
+    $button = $form_state->getTriggeringElement();
+    $prop_id = $button['#prop_id'];
+    $source_id = $button['#source_id'];
+    $configuration['component']['props'][$prop_id]['source_id'] = $source_id;
+    self::setComponentFormState('configuration', $configuration, $form_state);
+    $form_state->setRebuild();
+  }
+
+  /**
+   * Ajax handler: Change prop type.
+   */
+  public static function changePropItemAjax(
+    array $form,
+    FormStateInterface $form_state
+  ) {
+    $parents = $form_state->getTriggeringElement()['#array_parents'];
+    return NestedArray::getValue($form, array_slice($parents, 0, -3));
+  }
+
+  /**
+   * Ajax callback for component selector change.
+   */
+  public static function changeSelectorFormChangeAjax(
+    array $form,
+    FormStateInterface $form_state
+  ) {
+
+    $parents = $form_state->getTriggeringElement()['#array_parents'];
+    $component_id = $form_state->getValue($form_state->getTriggeringElement()['#parents']);
+    $configuration = ComponentFormBuilderState::getComponentFormState('configuration', $form_state);
+    $configuration['component_id'] = $component_id;
+    ComponentFormBuilderState::setComponentFormState('configuration', $configuration, $form_state);
+    $sub_form = NestedArray::getValue($form, array_slice($parents, 0, -1));
+    return $sub_form['component'];
+  }
+
+  /**
+   * Ajax callback for variant selector change.
+   */
+  public static function buildComponentVariantSelectorFormChangeAjax(
+    array $form,
+    FormStateInterface $form_state
+  ) {
+    $parents = $form_state->getTriggeringElement()['#array_parents'];
+    return NestedArray::getValue($form, array_slice($parents, 0, -1));
+  }
+
+}

src/Form/ComponentSettingsFormBuilderTrait.php

 <?php
 
-declare(strict_types = 1);
+declare(strict_types=1);
 
 namespace Drupal\ui_patterns\Form;
 
@@ -14,52 +14,37 @@ trait ComponentSettingsFormBuilderTrait {
   use ComponentFormBuilderTrait;
 
   /**
+   * Adapter function for plugin settings/options.
    *
-   */
-  public static function getComponentSettingsFormDefault() {
-    return [
-      "ui_patterns" => NULL,
-    ];
-  }
-
-  /**
+   * Overwrite to return settings/options of the
+   * current plugin.
    *
+   * @return mixed
+   *   The plugin settings/options.
    */
-  private function getMappedSettingsToConfig() {
-    $settings = $this->getSettings()['ui_patterns'] ?? [];
-    // Mapping the settings array saved by settingsForm to the required configuration form.
-    $configuration = [
-      'ui_patterns' => [
-        'component_id' => $settings['component_selector'] ?? NULL,
-        'variant_id' => $settings['component']['variant']['variant_selector'] ?? NULL,
-        'props' => $settings['component']['variant']['props'] ?? [],
-        'slots' => $settings['component']['variant']['slots'] ?? [],
-      ],
-    ];
-    return $configuration;
-  }
+  abstract protected function getComponentSettings(): array;
 
   /**
    * {@inheritdoc}
    */
-  protected function componentSettingsForm(array $form, FormStateInterface $form_state): array {
-
-    $configuration = $this->getMappedSettingsToConfig();
+  protected function componentSettingsForm(
+    array $form,
+    FormStateInterface $form_state
+  ): array {
     $trigger_element = $form_state->getTriggeringElement();
+    $configuration = $this->getComponentSettings()['ui_patterns'] ?? [];
     if ($form_state->isRebuilding() === FALSE
-    || (isset($trigger_element['#op']) && $trigger_element['#op'] === 'update')
+      || (isset($trigger_element['#op']) && $trigger_element['#op'] === 'update')
     ) {
-      $this->setComponentFormState('configuration', $configuration['ui_patterns'], $form_state);
+      ComponentFormBuilderState::setComponentFormState(
+        'configuration',
+        $configuration,
+        $form_state,
+        $this->getComponentStorageSubKey(),
+        FALSE
+      );
     }
     return $this->buildComponentsForm($form_state, $configuration);
   }
 
-  /**
-   *
-   */
-  final protected function buildComponentSettingsData() {
-    $configuration = $this->getMappedSettingsToConfig();
-    return $this->buildComponentData($configuration);
-  }
-
 }

src/Plugin/UiPatterns/Source/TextfieldWidget.php

@@ -15,7 +15,8 @@ use Drupal\ui_patterns\SourcePluginBase;
  *   description = @Translation("One-line text field."),
  *   prop_types = {
  *     "string",
- *     "machine_name"
+ *     "machine_name",
+ *     "slot"
  *   }
  * )
  */

ui_patterns.api.php

+<?php
+
+/**
+ * @file
+ */
+
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * .UI Patterns form configuration changed.
+ *
+ * Informs contrib module if ui patterns form has changed.
+ *
+ * @param \Drupal\Core\Form\FormStateInterface $form_state
+ *   The form state.
+ * @param array $configuration
+ *   The form configuration.
+ *
+ * @void
+ *
+ * @ingroup ui_patterns
+ */
+function hook_ui_patterns_form_configuration_changed(FormStateInterface $form_state, array $configuration) {
+
+}

ui_patterns.module

 <?php
 
+/**
+ * @file
+ * Adds UI Patterns themes and UI Elements.
+ */
+
 declare(strict_types = 1);
 
 /**
  * Implements hook_theme().
  */
 function ui_patterns_theme() {
-  return array(
+  return [
     'ui_patterns_actions' => [
       'render element' => 'element',
       'template' => 'ui-patterns-actions',
     ],
-  );
+  ];
 }
 
-
 /**
  * Prepares variables for ui_patterns_actions component.
  *
@@ -40,24 +44,23 @@ function template_preprocess_ui_patterns_actions(&$variables) {
   }
 }
 
-
 /**
  * Implements hook_preprocess_HOOK() for field_multiple_value_form().
  */
 function ui_patterns_preprocess_field_multiple_value_form(&$variables) {
-  // @TODO: Move header buttons to own column.
+  // @todo Move header buttons to own column.
   /*
   if (!empty($variables['table']['#header']) && isset($variables['table']['#rows'][0])) {
-    // Find paragraph_actions and move to header.
-    // @see template_preprocess_field_multiple_value_form()
-    if (is_array($variables['table']['#rows'][0]['data'][1]) && !empty($variables['table']['#rows'][0]['data'][1]['data']['_remove']['#ui_patterns_header'])) {
-      $variables['table']['#header'][0]['data'] = [
-        'title' => $variables['table']['#header'][0]['data'],
-        'button' => $variables['table']['#rows'][0]['data'][1]['_remove']['data'],
-      ];
-      unset($variables['table']['#rows'][0]);
-    }
-      }
-  */
+  // Find paragraph_actions and move to header.
+  // @see template_preprocess_field_multiple_value_form()
+  if (is_array($variables['table']['#rows'][0]['data'][1]) && !empty($variables['table']['#rows'][0]['data'][1]['data']['_remove']['#ui_patterns_header'])) {
+  $variables['table']['#header'][0]['data'] = [
+  'title' => $variables['table']['#header'][0]['data'],
+  'button' => $variables['table']['#rows'][0]['data'][1]['_remove']['data'],
+  ];
+  unset($variables['table']['#rows'][0]);
+  }
+  }
+   */
 
 }