Add a collapse / edit all button

I think this is a good step to start with.

Created an early patch, just for "Collapse all" It also work inside nested Paragraphs. Still needs test and I'm not sure how to continue with adding support for "Open all".

Added small changes, now it also collapse/open all.

Actually the button is not well placed. Still need to work on it.

Hi everyone, I tested the #11 patch and when I add a new paragraph content, it is not saved.

Started working on this

Not sure when I will find time for working on this.

Made some progress, Collapse all button works fine for nested paragraph and when we have more than one filed, but still there is a problem from #17.
Also added tests.

> And it should play well with the Content / Behavior tabs if present. They
should be on the same line.

That's easier said than those because those are just put in #prefix and are plain HTML.

That approach is not possible here as we have actual form elements.

I have the same problem in the reorder issue, where I started to add stuff to the template/preprocess to handle that. The problem is that field API assumes that all children are field item deltas except the add more button and that stuff is all pretty hardcoded.

So, not sure if we want to fix that here, but I know it looks very bad right now if we don't.

I think we need to create a design of how the header should look like with all the switches and buttons and thingies combined. And likely completely replace the default field ui template and introduce regions where we can put stuff and so on, including all our ugly prefix/suffix html markup.

Fixed problem with saving, moved collapse all button into header.
Also fixed:

I think we should only display the button if we have multiple children. Otherwise it's a full duplicate.

Collapse all works fine with nested and also with multi fields.
Need to fix tests for Collapse all and add Expand all button.

Oops, something went wrong with previous patch and diff. :)

1. +++ b/src/Plugin/Field/FieldWidget/InlineParagraphsWidget.php
   @@ -853,6 +853,7 @@ class InlineParagraphsWidget extends WidgetBase {
          );
   +
        }
   

   unrelated.

2. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1247,6 +1252,37 @@ class ParagraphsWidget extends WidgetBase {
      /**
   +   * Went through all paragraphs and change mode for each paragraph instance.
   +   *
   

   went.. is strange, describe what you *do*, not what you *did*.

3. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1247,6 +1252,37 @@ class ParagraphsWidget extends WidgetBase {
   +    foreach ($widget_state['paragraphs'] as $delta => $value) {
   +      if (!empty($button['#paragraphs_show_warning']) &&
   +        $widget_state['paragraphs'][$delta]['mode'] != $button['#paragraphs_mode']) {
   +        $widget_state['paragraphs'][$delta]['mode'] = $button['#paragraphs_mode'];
   +        $widget_state['paragraphs'][$delta]['show_warning'] = $button['#paragraphs_show_warning'];
   +      }
   

   i'm not sure what the show warning has to do with this and the code is quite hard to read. it oesn't really hurt if we set the value again if it was the same.

4. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1386,6 +1422,22 @@ class ParagraphsWidget extends WidgetBase {
   +
   +    if ($key_exists) {
   +      if (!$this->handlesMultipleValues()) {
   +        $values = array_filter($values, function ($value) {
   +          return is_array($value);
   +        });
   +        NestedArray::setValue($form_state_variables, $path, $values);
   

   I know the place you copied this from also didn't have comments but lets add some here.

5. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1537,4 +1589,42 @@ class ParagraphsWidget extends WidgetBase {
   +  /**
   +   * Build collapse all button.
   +   *
   

   Builds

6. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1537,4 +1589,42 @@ class ParagraphsWidget extends WidgetBase {
   +   *   Field widget state.
   +   * @param int $delta
   +   *   The order of this item in the array of sub-elements (0, 1, 2, etc.).
   

   why is the delta relevant here, this button only exists once and is not delta specific?

Addressed #28.
Added "Edit all" button.
Fixed test for "Collapse all" and added for "Edit all".
Here is the new screenshot:

One more stuff here, do we want to show only one button "Collapse all/ Edit all" depend of current state of paragraphs on page or we want to make dropdown menu like we have for Collapse,Remove ... actions? If we want dropdown menu what will be default action?

1. +++ b/css/paragraphs.widget.scss
   @@ -134,3 +134,7 @@
   +.paragraphs_header_action {
   

   Not sure, but it from what I see in the rest of the file, this should be - not _.

2. +++ b/paragraphs.module
   @@ -243,3 +243,24 @@ function template_preprocess_paragraph(&$variables) {
   +  // Remove the reorder mode switcher from the form in the header.
   

   Is this comment a leftover?

3. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -845,6 +846,17 @@ class ParagraphsWidget extends WidgetBase {
   +        $elements['header_actions'] = [
   +          '#type' => 'container',
   +          '#prefix' => '<div class="paragraphs_header_action">',
   +          '#suffix' => '</div>',
   

   Doesn't the container already produce a div element? Maybe I am missing something, but do we still need another level via the prefix/suffix? Or you could just apply the class to the container? If it's because of the if check above, can we use something else for that check?

4. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1247,6 +1259,33 @@ class ParagraphsWidget extends WidgetBase {
   +   * Goes through all paragraphs and change mode for each paragraph instance.
   

   I would suggest "Loops through all paragraphs and changes"...

5. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1247,6 +1259,33 @@ class ParagraphsWidget extends WidgetBase {
   +  public static function paragraphsMultipleSubmit(array $form, FormStateInterface $form_state) {
   

   Should we change the name of this submit method to something related to the logic it does?

6. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1537,4 +1578,100 @@ class ParagraphsWidget extends WidgetBase {
   +  /**
   +   * Builds collapse all button.
   ...
   +   * @return array
   +   *   The form element array.
   

   We introduce two new properties in this array, which are not required by the type submit. Maybe it should be a good idea just to mention a bit why we need them and where we use them.

7. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1537,4 +1578,100 @@ class ParagraphsWidget extends WidgetBase {
   +      '#paragraphs_mode' => 'edit',
   

   Same as above, document a bit?

Implemented #31.

It should be a dropbutton, not two buttons.

Fixed.

If the first paragraph is open, make collapse the default action. It the first is closed, make edit the default.

Fixed.

New version:

Need to fix test failing.

1. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -845,6 +846,19 @@ class ParagraphsWidget extends WidgetBase {
   +        $elements['header_actions']['collapse_all'] = $this->buildCollapseAllButton($field_state);
   +        $elements['header_actions']['edit_all'] = $this->buildEditAllButton($field_state);
   +
   +        // Set default action.
   +        if ($field_state['paragraphs'][0]['mode'] === 'closed') {
   +          $elements['header_actions']['edit_all']['#weight'] = -10;
   +        }
   

   can't we combine those two methods into one, including the logic to define the default. We have a huge amount of methods already on this class and very long main form methods.

   We could even move all of it, including the dropbutton building into that method and call it buildHeaderActions(). Once this is committed, I will refactor my reorder patch to add another button here.

2. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1266,6 +1280,34 @@ class ParagraphsWidget extends WidgetBase {
   +  public static function changeParagraphsMode(array $form, FormStateInterface $form_state) {
   

   lets include submit in the method name so it is clear that it is a submit callback. And we call it edit mode usually, not paragraphs mode. changeAllEditModeSubmit() ?

3. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1406,6 +1448,8 @@ class ParagraphsWidget extends WidgetBase {
   +    $this->removeNonRelatedButtons($form, $form_state);
   

   I was thinking about method name and so on for this, but I would actually prefer to keep this inline. This is a small method, we will never need that logic anywhere else. keep it inlined.

4. +++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
   @@ -1557,4 +1601,88 @@ class ParagraphsWidget extends WidgetBase {
   +      if (!$this->handlesMultipleValues()) {
   +        if (in_array('header_actions', array_keys($values))) {
   +          unset($values['header_actions']);
   +        }
   +
   +        NestedArray::setValue($form_state_variables, $path, $values);
   +        $form_state->setValues($form_state_variables);
   +      }
   +    }
   

   this is our widget, so we know it is always multiple and can skip that if.

   either we just unconditinally call unset() ( it doesn't care if the key doens't exist) or we move the set calls below also inside the if, as we don't need them unless we actually remove it.

Implemented #33, refactoring, fixing test failing.

+++ b/src/Plugin/Field/FieldWidget/ParagraphsWidget.php
@@ -847,18 +847,10 @@ class ParagraphsWidget extends WidgetBase {
+      if (!empty($this->buildHeaderActions($field_state))) {
+        $elements['header_actions'] = $this->buildHeaderActions($field_state);
       }

Now you're doing the logic here twice. try $header_actions = $this->buildHeaderActions(); if ($header_actions) { ... set it }

lets merge the two test together into one class.

Addressed #36.

I have rerolled the patch but it does not seem to work properly.

Fixing test failing from #38.

@Insasse, just tested this and for me works pretty fine, can you give as more information about what is not working properly in your case?

@tonic works pretty well thanks :) had tested it on an old ~8.0 setup my fault sry.

Created follow-up.

Added warning message on collapse all button.

As @miro_dietiker mentioned in #44

"collapse all" children, they do not indicate anymore if they have been changed.

.

So it's working fine if you change top level container, but not when you change the children.

After discussion with @Berdir:
That part we will do in follow-up.

Added follow-up.