Get validations to work, update type

Author: Baylee Swenson

lib/handbook/addon/docs/components/form-controls/controller.ts

@@ -3,8 +3,6 @@ import { reads } from '@ember-decorators/object/computed';
 import { service } from '@ember-decorators/service';
 import Controller from '@ember/controller';
 import { action } from '@ember/object';
-// import Changeset from 'ember-changeset';
-// import lookupValidator from 'ember-changeset-validations';
 import { ChangesetDef } from 'ember-changeset/types';
 import DS from 'ember-data';
 import Toast from 'ember-toastr/services/toast';
@@ -32,7 +30,10 @@ export default class FormController extends Controller {
 
     @action
     submit() {
-        this.changeset.save({});
-        this.toast.success('Saved!');
+        this.changeset.validate();
+        if (this.changeset.isValid) {
+            this.changeset.save({});
+            this.toast.success('Saved!');
+        }
     }
 }

lib/handbook/addon/docs/components/form-controls/demo-default/template.hbs

@@ -2,7 +2,7 @@
     <demo.example @name='form-controls.demo-default.hbs'>
         <form {{action this.submit on='submit'}}>
             <FormControls
-                @changeset={{changeset this.node this.validation}}
+                @changeset={{this.changeset}}
                 as |form|
             >
                 <form.text

lib/handbook/addon/docs/components/form-controls/route.ts

@@ -1,6 +1,7 @@
 import { computed } from '@ember-decorators/object';
 import Route from '@ember/routing/route';
 import Changeset from 'ember-changeset';
+import lookupValidator from 'ember-changeset-validations';
 import { task } from 'ember-concurrency';
 import ConfirmationMixin from 'ember-onbeforeunload/mixins/confirmation';
 
@@ -18,7 +19,11 @@ export default class FormControls extends Route.extend(ConfirmationMixin, {
     }
 
     setupController(controller: FormController) {
-        const changeset = new Changeset(controller.node, controller.validation);
+        const model = {
+            title: '',
+            description: '',
+        };
+        const changeset = new Changeset(model, lookupValidator(controller.validation), controller.validation);
         controller.set('changeset', changeset);
     }
 

lib/handbook/addon/docs/components/form-controls/template.md

@@ -1,11 +1,11 @@
-# validated-form-controls
+# form-controls
 Takes a changeset and yields validated form components
 
 ### Params
 The only param that `<FormControls />` takes is a changeset for the current form being created
 
 ### Yielded hash
-When invoked in a form, `<ValidatedFormControls />` yields a hash with the following keys:
+When invoked in a form, `<FormControls />` yields a hash with the following keys:
 
 * Several `validated-model-form/*` components with common arguments (`model`, `changeset`, `shouldShowMessages`, `disabled`) already bound:
     * `checkbox`
@@ -18,6 +18,5 @@ When invoked in a form, `<ValidatedFormControls />` yields a hash with the follo
 ## Demo: Default
 {{docs/components/form-controls/demo-default
     submit=(action this.submit)
-    node=this.node
-    validation=this.validation
+    changeset=this.changeset
 }}

lib/handbook/addon/docs/components/form-controls/validation.ts

@@ -6,4 +6,7 @@ export const nodeValidation: ValidationObject<NodeModel> = {
     title: [
         validatePresence(true),
     ],
+    description: [
+        validatePresence(true),
+    ],
 };

lib/handbook/addon/docs/template.hbs

@@ -23,6 +23,7 @@
         <nav.item @label='contributor-list' @route='docs.components.contributor-list' />
         <nav.item @label='copyable-text' @route='docs.components.copyable-text' />
         <nav.item @label='delete-button' @route='docs.components.delete-button' />
+        <nav.item @label='form-controls' @route='docs.components.form-controls' />
         <nav.item @label='osf-link' @route='docs.components.osf-link' />
         <nav.item @label='institutions-widget' @route='docs.components.institutions-widget' />
         <nav.item @label='loading-indicator' @route='docs.components.loading-indicator' />
@@ -33,7 +34,6 @@
         <nav.item @label='panel' @route='docs.components.panel' />
         <nav.item @label='placeholder' @route='docs.components.placeholder' />
         <nav.item @label='tags-widget' @route='docs.components.tags-widget' />
-        <nav.item @label='validated-form-controls' @route='docs.components.validated-form-controls' />
         <nav.item @label='validated-model-form' @route='docs.components.validated-model-form' />
     </viewer.nav>
 

lib/handbook/addon/routes.js

@@ -28,6 +28,7 @@ export default buildRoutes(function() {
             this.route('contributor-list');
             this.route('copyable-text');
             this.route('delete-button');
+            this.route('form-controls');
             this.route('osf-link');
             this.route('institutions-widget');
             this.route('loading-indicator');
@@ -38,7 +39,6 @@ export default buildRoutes(function() {
             this.route('panel');
             this.route('placeholder');
             this.route('tags-widget');
-            this.route('validated-form-controls');
             this.route('validated-model-form');
         });
 

lib/osf-components/addon/components/form-controls/component.ts

@@ -9,5 +9,5 @@ import template from './template';
 export default class FormControls extends Component {
     // Optional arguments
     disabled: boolean = defaultTo(this.disabled, false);
-    shouldShowMessages: boolean = false;
+    shouldShowMessages: boolean = true;
 }

lib/osf-components/addon/components/validated-input/x-input-wrapper/component.ts

@@ -19,6 +19,7 @@ export default class ValidatedXInputWrapper extends Component {
     // Optional arguments
     errors?: string;
     label?: string;
+    id?: string;
 
     @className
     @equal('validationStatus', ValidationStatus.HasError)
@@ -34,6 +35,6 @@ export default class ValidatedXInputWrapper extends Component {
 
     @computed('elementId', 'valuePath')
     get inputElementId() {
-        return `${this.elementId}__${this.valuePath}`;
+        return this.id ? this.id : `${this.elementId}__${this.valuePath}`;
     }
 }

types/ember-changeset-validations/index.d.ts

@@ -3,7 +3,7 @@ import { validator } from 'ember-validations';
 
 export type ValidatorFunction = (key: string, result: any) => string | string[] | true;
 
-export function lookupValidator(validator: validatorObject): ValidatorFunc;
+export default function lookupValidator(validator: validatorObject): ValidatorFunc;
 
 // FIXME: Below doesn't actually work, but setting it aside for now to get actual
 // functionality implemented. James is upgrading types a bit, and the following