Groups, Form id and prefix

[jmverges]

Follow #206

[jmverges]

Tests are falling, @icebob could you take a look?

[jmverges]

I find an issue here but I don't know how to solve. When you assign to schema a new schema while having groups, a weird behaviour happens: Groups are duplicated without fields, and fields are duplicated in previous groups @icebob

[dflock]

What you want to output is something like this:

<form>
  <fieldset>
    <legend>blah</legend>
    <!-- field here -->
    <!-- field here -->
    <!-- field here -->
  </fieldset>
  <fieldset>
    ...
  </fieldset>
   ...
</form>

So, each group outputs a fieldset, which contains a legend, followed by all the fields - then onto the next group.

Currently vfg outputs a single fieldset, so you can get this output by just having one schema per "group", adding a legend to each schema, and calling vfg multiple times, once per "group". This is what I did, because it seemed simpler.

If you're going to do this with one call to vfg, then you need something like your PR, but the output should still look like the above.

I can't actually try this out until later, but just eyeballing the diff, it looks like you're outputting a fieldset for each field (which is wrong), as well as each group (which is correct)?

[jmverges]

No, the fieldset generation is correct after pushing a couple of bugfixes. However I think :schema.sync='field' maybe is the one causing some problem. I don't know, never used sync in my daily work. But I think the solution is so close, probably @icebob will know what to do.

[icebob]

I'm checking...

[icebob]

I checked and it seems it's working. I only fixed an undefined error here

[icebob]

[jmverges]

could you try to update the hole schema to see if the binding works as expected?
I'm doing schema = {groups:{//same groups as is having} and weird behaviour happens

[icebob]

I don't know what you mean. You can also try it if you checkout pr208 branch

[dflock]

You're correct, the output looks OK, sorry about that.

It does break the field prefixes, though. You need to change the formGenerator.vue beforeMount function in a similar way to the template, something like this:

		beforeMount() {
			// Add idPrefix to fields if fieldIdPrefix is set
			if ("groups" in this.schema) {
				for (let group of this.schema.groups) {
					for (let field of group.fields) {
						field.idPrefix = this.options.fieldIdPrefix || "";
					}
				}
			} else if ("fields" in this.schema) {
					for (let field of this.schema.fields) {
						field.idPrefix = this.options.fieldIdPrefix || "";
					}
			}
		},

It's a shame that both the template - and now the beforeMount function - have a duplicated code path, one for schemas with groups and one for schemas without. Making schema.groups mandatory (but not the legend) would fix this, as would adding a wrapping group if it doesn't exist, at the beginning of the beforeMount function.

Thoughts?

[dflock]

Actually that doesn't work properly where you have a schema that has groups - but also has fields outside of the groups. Not sure that I would support that configuration, honestly? But if you want to, you'd need to change it to something like this:

		beforeMount() {
			// Add idPrefix to fields if fieldIdPrefix is set
			if ("groups" in this.schema) {
				for (let group of this.schema.groups) {
					for (let field of group.fields) {
						field.idPrefix = this.options.fieldIdPrefix || "";
					}
				}
			}
			if ("fields" in this.schema) {
				for (let field of this.schema.fields) {
					field.idPrefix = this.options.fieldIdPrefix || "";
				}
			}
		},

[icebob]

@dflock The code is good just duplicated. I'm searching a lodash func which merge fields from fields and from groups[].fields

[dflock]

Also, the tag parameter now controls the tag for a group, so if you set it to tag="div", then you get output like this:

<div class="vue-form-generator">
  <div>
    <legend>Contact Details</legend>
    <div class="form-group field-input">
      ...
    </div>
  </div>
  <div>
    <legend>Other Details</legend>
    ...
  </div>
</div>

So, a <legend> inside a <div>, which isn't valid HTML. The <legends> are (correctly) hardcoded, so their <fieldset> should be too.

The tag parameter was originally introduced because vfg always wrapped it's output in a <fieldset> - and people wanted to be able to control that (see #197).

With these changes, it now always wraps it's output in a div if you have groups - but if you don't it uses the old behaviour. This is rather inconsistent. It should probably use tag for the outer/wrapper element in both cases, and always use <fieldset> for groups - which are fieldsets.

In fact, I would probably change schema.groups to schema.fieldsets - to make it obvious what's happening and what output you're going to get.

[icebob]

I think we leave :tag to schema.fields. But for schema.groups we remove :is="tag" and always use fieldset. What do you think?

[icebob]

@dflock @jmverges I created a new branch for grouping. Please continue the conversation in #209