Merge pull request #124 from betocantu93/changeset-react-to-changes

ChangesetForm: Only allow changeset as argument, removing auto mode

packages/changeset-form/addon/components/changeset-form/context/index.hbs

@@ -0,0 +1,15 @@
+{{yield
+  (hash
+    Input=(component "changeset-form/fields/input" changeset=@changeset)
+    Textarea=(component "changeset-form/fields/textarea" changeset=@changeset)
+    Select=(component "changeset-form/fields/select" changeset=@changeset)
+    Checkbox=(component "changeset-form/fields/checkbox" changeset=@changeset)
+    CheckboxGroup=(component
+      "changeset-form/fields/checkbox-group" changeset=@changeset
+    )
+    Radio=(component "changeset-form/fields/radio" changeset=@changeset)
+    RadioGroup=(component
+      "changeset-form/fields/radio-group" changeset=@changeset
+    )
+  )
+}}

packages/changeset-form/addon/components/changeset-form/index.hbs

@@ -1,42 +1,23 @@
 <form
-  {{on "submit" this.handleSubmit}}
-  {{on "reset" this.handleReset}}
   ...attributes
+  {{on "submit" (fn this.handleSubmit @changeset)}}
+  {{on "reset" (fn this.handleReset @changeset)}}
 >
-  {{yield
-    (hash
-      Input=(component "changeset-form/fields/input"
-        changeset=this.changeset
-        hasSubmitted=this.hasSubmitted
+  <ChangesetForm::Context @changeset={{@changeset}} as |Form|>
+    {{yield
+      (hash
+        Input=(component Form.Input hasSubmitted=this.hasSubmitted)
+        Textarea=(component Form.Textarea hasSubmitted=this.hasSubmitted)
+        Select=(component Form.Select hasSubmitted=this.hasSubmitted)
+        Checkbox=(component Form.Checkbox hasSubmitted=this.hasSubmitted)
+        CheckboxGroup=(component
+          Form.CheckboxGroup hasSubmitted=this.hasSubmitted
+        )
+        Radio=(component Form.Radio hasSubmitted=this.hasSubmitted)
+        RadioGroup=(component Form.RadioGroup hasSubmitted=this.hasSubmitted)
       )
-      Textarea=(component "changeset-form/fields/textarea"
-        changeset=this.changeset
-        hasSubmitted=this.hasSubmitted
-      )
-      Select=(component "changeset-form/fields/select"
-        changeset=this.changeset
-        hasSubmitted=this.hasSubmitted
-      )
-      Checkbox=(component "changeset-form/fields/checkbox"
-        changeset=this.changeset
-        hasSubmitted=this.hasSubmitted
-      )
-      CheckboxGroup=(component "changeset-form/fields/checkbox-group"
-        changeset=this.changeset
-        hasSubmitted=this.hasSubmitted
-      )
-      Radio=(component "changeset-form/fields/radio"
-        changeset=this.changeset
-        hasSubmitted=this.hasSubmitted
-      )
-      RadioGroup=(component "changeset-form/fields/radio-group"
-        changeset=this.changeset
-        hasSubmitted=this.hasSubmitted
-      )
-    )
-    this.changeset
-    (hash
-      hasSubmitted=this.hasSubmitted
-    )
-  }}
+      @changeset
+      (hash hasSubmitted=this.hasSubmitted)
+    }}
+  </ChangesetForm::Context>
 </form>

packages/changeset-form/addon/components/changeset-form/index.ts

@@ -1,15 +1,11 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { Changeset } from 'ember-changeset';
-import { BufferedChangeset, ValidatorMap } from 'ember-changeset/types';
+import { BufferedChangeset } from 'ember-changeset/types';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
-import lookupValidator from 'ember-changeset-validations';
 
 interface ChangesetFormArgs {
-  model?: { [key: string]: unknown };
-  changeset?: BufferedChangeset;
-  validations?: ValidatorMap;
+  changeset: BufferedChangeset;
 
   runExecuteInsteadOfSave?: boolean;
 
@@ -18,49 +14,35 @@ interface ChangesetFormArgs {
 }
 
 export default class ChangesetForm extends Component<ChangesetFormArgs> {
-  changeset!: BufferedChangeset;
-
   @tracked hasSubmitted = false;
 
   constructor(owner: unknown, args: ChangesetFormArgs) {
     super(owner, args);
-
-    if (typeof this.args.changeset === 'undefined') {
-      assert(
-        '@model must be defined on <ChangesetForm> component if you do not provide a @changeset argument',
-        typeof this.args.model !== 'undefined'
-      );
-
-      if (typeof this.args.validations !== 'undefined') {
-        this.changeset = Changeset(
-          this.args.model || {},
-          lookupValidator(this.args.validations || {}),
-          this.args.validations
-        );
-      } else {
-        this.changeset = Changeset(this.args.model || {});
-      }
-    } else {
-      this.changeset = this.args.changeset;
-    }
+    assert(
+      '@changeset must be defined on <ChangesetForm> component',
+      this.args.changeset
+    );
   }
 
   @action
-  async handleSubmit(event: Event): Promise<void> {
+  async handleSubmit(
+    changeset: BufferedChangeset,
+    event: Event
+  ): Promise<void> {
     event.preventDefault();
-    await this.changeset.validate();
+    await changeset.validate();
 
     this.hasSubmitted = true;
 
-    if (this.changeset.isInvalid) {
+    if (changeset.isInvalid) {
       return;
     }
 
     let result;
     if (this.args.runExecuteInsteadOfSave) {
-      result = this.changeset.execute();
+      result = changeset.execute();
     } else {
-      result = await this.changeset.save({});
+      result = await changeset.save({});
     }
 
     if (typeof this.args.onSubmit === 'function') {
@@ -69,11 +51,11 @@ export default class ChangesetForm extends Component<ChangesetFormArgs> {
   }
 
   @action
-  handleReset(event: Event): void {
+  handleReset(changeset: BufferedChangeset, event: Event): void {
     event.preventDefault();
     this.hasSubmitted = false;
 
-    const { data } = this.changeset.rollback();
+    const { data } = changeset.rollback();
     if (typeof this.args.onReset === 'function') {
       this.args.onReset(data, event);
     }

packages/changeset-form/app/components/changeset-form/context/index.js

@@ -0,0 +1 @@
+export { default } from '@frontile/changeset-form/components/changeset-form/context';

packages/changeset-form/tests/dummy/app/components/changeset-form-example.hbs

@@ -1,7 +1,5 @@
 <ChangesetForm
-  @model={{this.model}}
-  @validations={{this.validations}}
-  as |Form changeset|
+  @changeset={{changeset this.model this.validations}} as |Form changeset|
 >
   <Form.Input
     @label="First Name"
@@ -20,76 +18,63 @@
     type="email"
     @containerClass="mt-4"
   />
-
   <Form.Textarea
     @label="Comments"
     @fieldName="comments"
     @containerClass="mt-4"
   />
-
   <Form.Select
     @label="Countries"
     @fieldName="countries"
     @isMultiple={{true}}
     @options={{this.countries}}
     @allowClear={{true}}
-    @containerClass="mt-4"
-    as |option|
+    @containerClass="mt-4" as |option|
   >
     {{option}}
   </Form.Select>
-
   <Form.CheckboxGroup
     @label="Core Values"
     @isInline={{true}}
-    @containerClass="mt-4"
-    as |Checkbox|
+    @containerClass="mt-4" as |Checkbox|
   >
-    <Checkbox
-      @label="Hungry"
-      @fieldName="hungry"
-    />
-    <Checkbox
-      @label="Humble"
-      @fieldName="humble"
-    />
-    <Checkbox
-      @label="Curious"
-      @fieldName="curious"
-    />
+    <Checkbox @label="Hungry" @fieldName="hungry" />
+    <Checkbox @label="Humble" @fieldName="humble" />
+    <Checkbox @label="Curious" @fieldName="curious" />
   </Form.CheckboxGroup>
-
   <Form.RadioGroup
     @label="Favorite Meal"
     @containerClass="mt-4"
-    @fieldName="favoriteMeal"
-    as |Radio|
+    @fieldName="favoriteMeal" as |Radio|
   >
-    <Radio
-      @label="Breakfast"
-      @value="breakfast"
-    />
-    <Radio
-      @label="Lunch"
-      @value="lunch"
-    />
-    <Radio
-      @label="Dinner"
-      @value="dinner"
-    />
+    <Radio @label="Breakfast" @value="breakfast" />
+    <Radio @label="Lunch" @value="lunch" />
+    <Radio @label="Dinner" @value="dinner" />
   </Form.RadioGroup>
-
   <button
     type="submit"
-    class="p-2 my-4 rounded {{if changeset.isInvalid "bg-gray-100 text-gray-500" "bg-gray-900 text-white"}}"
+    class="p-2 my-4 rounded
+      {{if
+        changeset.isInvalid
+        "bg-gray-100 text-gray-500"
+        "bg-gray-900 text-white"
+      }}"
     disabled={{changeset.isInvalid}}
   >
     Submit
   </button>
-
   <div class="mb-4">
-    <p>isPristine: {{changeset.isPristine}}</p>
-    <p>isValid: {{changeset.isValid}}</p>
-    <p>isInvalid: {{changeset.isInvalid}}</p>
+    <p>
+      isPristine:
+      {{changeset.isPristine}}
+    </p>
+    <p>
+      isValid:
+      {{changeset.isValid}}
+    </p>
+    <p>
+      isInvalid:
+      {{changeset.isInvalid}}
+    </p>
   </div>
 </ChangesetForm>

packages/changeset-form/tests/integration/components/changeset-form-test.ts

@@ -42,38 +42,44 @@ module('Integration | Component | ChangesetForm', function (hooks) {
     this.set('validations', validations);
 
     await render(hbs`
-      <ChangesetForm
-        @model={{this.model}}
-        @validations={{this.validations}}
-        @onSubmit={{this.onSubmit}}
-        @onReset={{this.onReset}}
-        data-test-changeset-form
-        as |Form changeset state|
-      >
-        <div data-test-id="has-submitted">{{state.hasSubmitted}}</div>
-        <Form.Input
-          @fieldName="name.first"
-          @label="First Name"
-          data-test-name-first-input
-        />
-        <div data-test-name-first>{{changeset.name.first}}</div>
-        <Form.Input
-          @fieldName="name.last"
-          @label="Last Name"
-          data-test-name-last-input
-        />
-        <div data-test-name-last>{{changeset.name.last}}</div>
-        <Form.Input
-          @containerClass="email-field"
-          @fieldName="email"
-          @label="Email Address"
-          data-test-email-input
-        />
-        <div data-test-email>{{changeset.email}}</div>
-
-        <button type="submit" data-test-submit>Submit</button>
-        <button type="reset" data-test-reset>Reset</button>
-      </ChangesetForm>
+      {{#let (changeset this.model this.validations) as |changesetObj|}}
+        <ChangesetForm
+          @changeset={{changesetObj}}
+          @onSubmit={{this.onSubmit}}
+          @onReset={{this.onReset}}
+          data-test-changeset-form
+          as |Form changeset state|
+        >
+        {{log changesetObj changeset}}
+          <div data-test-id="has-submitted">{{state.hasSubmitted}}</div>
+          {{#if changeset.isInvalid}}
+            <p data-test-id="form-error">There were one or more errors in your form.</p>
+          {{/if}}
+          <Form.Input
+            @fieldName="name.first"
+            @label="First Name"
+            data-test-name-first-input
+          />
+          <div data-test-name-first>{{changeset.name.first}}</div>
+          
+          <Form.Input
+            @fieldName="name.last"
+            @label="Last Name"
+            data-test-name-last-input
+          />
+          <div data-test-name-last>{{changeset.name.last}}</div>
+          <Form.Input
+            @containerClass="email-field"
+            @fieldName="email"
+            @label="Email Address"
+            data-test-email-input
+          />
+          <div data-test-email>{{changeset.email}}</div>
+
+          <button type="submit" data-test-submit>Submit</button>
+          <button type="reset" data-test-reset>Reset</button>
+        </ChangesetForm>
+      {{/let}}
     `);
   });
 
@@ -166,4 +172,11 @@ module('Integration | Component | ChangesetForm', function (hooks) {
     // assert.dom('[data-test-name-first]').hasTextContaining('James2');
     // assert.dom('[data-test-name-last]').hasTextContaining('Silva');
   });
+
+  test('it shows error message when the changeset is invalid', async function (assert) {
+    assert.expect(1);
+    await fillIn('[data-test-email-input]', '');
+    await click('[data-test-submit]');
+    assert.dom('[data-test-id="form-error"]').exists();
+  });
 });