forwarder / meteor-wizard

A wizard component for Autoform.
MIT License
67 stars 17 forks source link

Save initial data #43

Closed bySabi closed 9 years ago

bySabi commented 9 years ago

In order to support update or 'on place edit' initial data provide on stepobject must be save on cache before _initStep method set data property This PR is based on same brach of https://github.com/forwarder/meteor-wizard/pull/41 and https://github.com/forwarder/meteor-wizard/pull/38 Maybe the above must be merge first. @Pagebakers please review this. I'm working over incremental changes. Don´t know is my changed get approved ... Thanks

Pagebakers commented 9 years ago

Don't worry I'll merge in the other two branches, I just need to find some time to work on it, as I want to refactor it a bit more.

It's not completely clear to me why you need initial data to be cached in order for on place edit to work. Maybe you have an example? Also, setting the data this way will not validate the data.

bySabi commented 9 years ago

Fine! :-)

This is my custom template

<template name="__wizard_step2">
  <div class="wizard-step">
    {{#autoForm id=step.formId doc=step.data.insertDoc schema=step.schema type=step.type}}
      {{#each afFieldNames}}
        {{> afQuickField name=this.name options=afOptionsFromSchema}}
      {{/each}}
      {{> wizardButtons2}}
    {{/autoForm}}
  </div>
</template>

This a step definition Example:

const doc1 = {
  nombre: 'Nicasio',
  apellido1: 'Martinez',
  genero: 'otro'
}
const doc2 = {
  nombre: 'Nicasiooo',
  apellido1: 'Martinezzzz',
  genero: 'otro'
}

const steps = [
  {
    id: 'perfil',
    title: 'El perfil',
    schema: Orgz.schemas.Perfil,
    data: { insertDoc: doc1 },
  },
  {
    id: 'perfil2',
    title: 'El perfil2',
    schema: Orgz.schemas.Perfil,
    data: { insertDoc: doc2 },
  },
  {
    id: 'infoFundacion',
    title: 'Info Fundación',
    schema: Orgz.schemas.InfoFundacion
    onSubmit: function(data, wizard) {
      ...
    }
  }
]

on place edit are 'readonly' form converted to 'update' formType. This form need some data to show. I set data to a const object doc but It must be a subscription from a collection. I put initial data on a { insertDoc: } object. With this approach Next and Back work fine. I can go on any direction and readonly form´s get populated always using the cache who store AutoForm.getFormValues calls.

This are the button events

Template.wizardButtons2.events({
  'click .wizard-edit-button'(e) {
    e.preventDefault()
    this.setEditMode(this.activeStep().id)
    this.show(this.activeStep().id)
  },

  'click .wizard-next-button'(e) {
    e.preventDefault()
    this.setReadMode(this.activeStep().id)
    this.next(AutoForm.getFormValues(this.activeStep(false).formId))
  },

  'click .wizard-back-button'(e) {
    e.preventDefault()
    this.setReadMode(this.activeStep().id)
    this.previous()
  }
})

The first time that form are rendered data is set from step object, after that, data relay on AutoForm.getFormValues

Maybe is not the better approach but Is all I have from my limited experience.

Thanks! again for your time.

bySabi commented 9 years ago

Hi @Pagebakers, I add another commit. I improved next and previous method a little:

1- Don`t save blank data to store.

2- Moved previous data responsability to button event

With this changes customizers have more control of what and when data is store.

I hope you agree with me.

Pagebakers commented 9 years ago

Alright, I see the benefit here. merging it in and publish a new release in the next few days after I finish with some refactoring and updating the docs.

Thanks for the good work!

Pagebakers commented 9 years ago

@bySabi I published a new version, containing your updates.

The constructor is now exposed directly via 'Wizard'.

Thanks!

bySabi commented 9 years ago

Looks very good @Pagebakers. Now is even more customizable. Good Work!

I'm still waiting for PR AufoForm Schema reactivity fix get merge, https://github.com/aldeed/meteor-autoform/pull/1205. Then I´ll publish 'on place edit' code like a example or package. You will the first on know it for if you want add a link to README.

Anyway! Thanks for your time!