Feature request - ability to duplicate sections in form blueprints

[leon-fablr]

Why I'm interested in this

We're particularly interested in this as we are making heavy use of forms on one of our sites. We have them set up to submit data to a CRM via form submitted listeners and often make tailored forms for particular segments. We have some custom fields added to the form edit page using Form::appendConfigFields to control mapping between fields in the form blueprint and CRM fields.

We quite often find that we have to have lots of duplicate fields with slightly different wording to satisfy the CRM and then conditionally hide/show fields based on the value of a dropdown box etc.. We tend to group these together field variations together by section where possible.

The above currently involves a lot of duplicating fields. It would be much easier and less tedious if we could just duplicate a whole section of fields in the form blueprint.

Why I can't do this myself

I've looked into doing this myself from the cp.js file you create when making custom field types... and I can't really see any way to extend/override existing control panel vue templates without forking Statamic. I'd very much prefer not to have to maintain my own private fork.

How to achieve this

I've taken some time to look into possibly making a pull request for this... I've made this feature request after spotting this section in the contributing document: https://github.com/statamic/cms/blob/master/CONTRIBUTING.md#core-enhancements

Below is my general rough outline on how I'm thinking to go about doing this, with some placeholders that I'm not sure about due to calling code across vue templates.

resources/js/components/blueprints/Section.vue

• Add another for the duplicate field button
• Add a method vaguely like:

duplicateSection = () => {
  let newSection = parent.addSection(); //unsure, see below
  for (const field of this.section.fields) {
    let newField = field.duplicateField(field); //unsure, see below
    newSection.fieldCreated(newField);
  }
}

I'm unsure as to how to call addSection in resources/js/components/blueprints/Sections.vue - hence the parent.addSection() placeholder. I'm aware that events can be emitted to communicate between components... but I don't think that will work here due to wanting a section object returned.

I'm also unsure about the field.duplicateField(field); line - it's intended to call the duplicateField method in resources/js/components/blueprints/Fields.vue

I'd imagine that it may be desirable to constrain this to particular contexts as well - this is probably much more useful on a form blueprint than an entry blueprint. I currently have no idea how one would go about achieving this.