[4.x] Add group field type

[godismyjudge95]

Closes statamic/ideas#210

NOTE: This is a very rough draft. I have never submitted substantial PR like this and would appreciate any direction that could be given.

This PR is for allowing one to "group" fields together under a single variable. This helps manage scope overlap when using the same fields multiple times (like with fieldsets).

I currently use this to group a fieldset and a corresponding partial to render that fieldset.
Normally, anytime I include the fieldset multiple times that means I need to prefix all of those fields.
But with the group field type we could do something like this for a button fieldset with fields link, text, and external:

# resources/collections/pages/default.yaml

button:
  import: button
left_button:
  import: button
right_button:
  import: button

# resources/fieldsets/button.yaml

fields:
  -
    handle: text
    field:
      input_type: text
      type: text
      display: Text
      validate:
        - require
  -
    handle: link
    field:
      type: link
      display: Link
      validate:
        - require

{{# default.antlers.html #}}

{{ partial:button }}
{{ partial:button :button="left_button" }}
{{ partial:button :button="right_button" }}

{{# _button.antlers.html #}}

<a href="{{ button.link }}" class="px-4 py-2 rounded shadow bg-red-700 hover:bg-red-900 text-white">
{{ button.text }}
</a>

Here is a screenshot of what it looks like:

[godismyjudge95]

Ok, I have tested this field out on my project significantly and I think it is nearly if not completely bug free now 🤞

Let me know if there is something I should do differently.
Hopefully we can get this merged soon 😊

[godismyjudge95]

I jinxed myself, there was one more bug related to the field meta that was hard to track down. Should be all fixed now.

[edalzell]

LOOOOVE this one

[godismyjudge95]

@duncanmcclean I didn't find an existing icon that I felt worked for this field type so that still needs to be changed.

[jackmcdade]

@godismyjudge95 I love this, thank you! Were you able to test this in a statamic/cms sandbox? It looks like it's copy and pasted out of an addon because all the Extension registering, Namespace, and JS imports are off and it doesn't load or work.

It should be registered here: https://github.com/statamic/cms/blob/4.x/src/Providers/ExtensionServiceProvider.php#L51

And the imports in the Vue shouldn't be from @/../../vendor etc.

[godismyjudge95]

@godismyjudge95 I love this, thank you! Were you able to test this in a statamic/cms sandbox? It looks like it's copy and pasted out of an addon because all the Extension registering, Namespace, and JS imports are off and it doesn't load or work.

It should be registered here: 4.x/src/Providers/ExtensionServiceProvider.php#L51

And the imports in the Vue shouldn't be from @/../../vendor etc.

I didn't have a sandbox set up at the time when I built this (as we needed it on a project). So you are correct in saying it's mostly a copy and paste job - although I tried to clean up I must have missed the vendor paths.

Didn't know there was an internal place to register the fields, I thought it would pick it up like the user space fields.

[jackmcdade]

Looks like @duncanmcclean has your back ❤️

[duncanmcclean]

I didn't have a sandbox set up at the time when I built this (as we needed it on a project). So you are correct in saying it's mostly a copy and paste job - although I tried to clean up I must have missed the vendor paths.

Didn't know there was an internal place to register the fields, I thought it would pick it up like the user space fields.

All good! I've just pushed up some commits to adjust the namespace from App to Statamic and added the fieldtype to the ExtensionServiceProvider (stuff only gets auto loaded in user-land).

For future reference, when you're adding something to Statamic, make sure to spin up a sandbox site so you can test and check that everything's wired up. 🙂

[godismyjudge95]

Thanks to the community call the other day I got my sandbox set up. And good thing too! Just now tested this and it appears everything is working except field validation (ie. required fields).

If anyone has an idea as to why it might not be working, that would be great. Otherwise I'm gonna be fiddling with it to see if I can get it working.

[jackmcdade]

Okay, making some progress here with the UI, and it all works great as a top level field.

Unfortunately, it seems to explode on the publish form page when used inside of a Grid. Here's the error: https://flareapp.io/share/q5YwnMeP

[godismyjudge95]

Okay, making some progress here with the UI, and it all works great as a top level field.

Unfortunately, it seems to explode on the publish form page when used inside of a Grid. Here's the error: flareapp.io/share/q5YwnMeP

Should be resolved now.

[godismyjudge95]

Ok, I think I got the validation figured out. It validates all fields regardless of the nest level.

I don't know if there is precedence for this, but should the validation rules be enabled at all on this field? As there is nothing to validate on the group itself it might not make sense for it to be there? I guess that can be a separate PR as non-input fields appear to have validation enabled on them (ie. Section, HTML, etc.)

[godismyjudge95]

Let me know if there is anything else you'd like to see changed/fixed about this.

[jackmcdade]

Thank you so much for this!

[godismyjudge95]

Thank you so much for this!

Thank you for the encouragement and the awesome CMS! It means a lot.

[johncarter-]

Thank you @godismyjudge95 this is so useful.

[theutz]

Amazing! Thanks everyone for this!