Create form-controls

Author: Baylee Swenson

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

@@ -0,0 +1,38 @@
+import { computed } from '@ember-decorators/object';
+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';
+
+import Node from 'ember-osf-web/models/node';
+
+import { nodeValidation } from './validation';
+
+export default class FormController extends Controller {
+    @service store!: DS.Store;
+    @service toast!: Toast;
+
+    @reads('model.taskInstance.value')
+    existingNode?: Node;
+    createDirt = false;
+    editDirt = false;
+    validation = nodeValidation;
+    node = Node;
+    changeset!: ChangesetDef;
+
+    @computed('createDirt', 'editDirt')
+    get isDirty() {
+        return this.createDirt || this.editDirt;
+    }
+
+    @action
+    submit() {
+        this.changeset.save({});
+        this.toast.success('Saved!');
+    }
+}

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

@@ -0,0 +1,27 @@
+<DocsDemo as |demo|>
+    <demo.example @name='form-controls.demo-default.hbs'>
+        <form {{action this.submit on='submit'}}>
+            <FormControls
+                @changeset={{changeset this.node this.validation}}
+                as |form|
+            >
+                <form.text
+                    @label='Title'
+                    @valuePath='title'
+                />
+                <form.text
+                    @label='Description'
+                    @valuePath='description'
+                />
+            </FormControls>
+            <OsfButton
+                @type='primary'
+                @buttonType='submit'
+            >
+                Submit
+            </OsfButton>
+        </form>
+    </demo.example>
+
+    <demo.snippet @name='form-controls.demo-default.hbs' />
+</DocsDemo>

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

@@ -0,0 +1,30 @@
+import { computed } from '@ember-decorators/object';
+import Route from '@ember/routing/route';
+import Changeset from 'ember-changeset';
+import { task } from 'ember-concurrency';
+import ConfirmationMixin from 'ember-onbeforeunload/mixins/confirmation';
+
+import FormController from './controller';
+
+export default class FormControls extends Route.extend(ConfirmationMixin, {
+    modelTask: task(function *(this: FormControls) {
+        return yield this.store.findRecord('node', 'extng');
+    }),
+}) {
+    model() {
+        return {
+            taskInstance: this.modelTask.perform(),
+        };
+    }
+
+    setupController(controller: FormController) {
+        const changeset = new Changeset(controller.node, controller.validation);
+        controller.set('changeset', changeset);
+    }
+
+    @computed('controller.isDirty')
+    get isPageDirty() {
+        const controller = this.controller as FormController;
+        return () => controller.get('isDirty');
+    }
+}

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

@@ -0,0 +1,23 @@
+# validated-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:
+
+* Several `validated-model-form/*` components with common arguments (`model`, `changeset`, `shouldShowMessages`, `disabled`) already bound:
+    * `checkbox`
+    * `checkboxes`
+    * `date`
+    * `recaptcha`
+    * `text`
+    * `textarea`
+
+## Demo: Default
+{{docs/components/form-controls/demo-default
+    submit=(action this.submit)
+    node=this.node
+    validation=this.validation
+}}

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

@@ -0,0 +1,9 @@
+import { ValidationObject } from 'ember-changeset-validations';
+import { validatePresence } from 'ember-changeset-validations/validators';
+import NodeModel from 'ember-osf-web/models/node';
+
+export const nodeValidation: ValidationObject<NodeModel> = {
+    title: [
+        validatePresence(true),
+    ],
+};

lib/handbook/addon/docs/template.hbs

@@ -33,6 +33,7 @@
         <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

@@ -38,6 +38,7 @@ 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/handbook/package.json

@@ -8,6 +8,8 @@
     "@ember/render-modifiers": "*",
     "ember-angle-bracket-invocation-polyfill": "*",
     "ember-bootstrap": "*",
+    "ember-changeset": "^2.1.2",
+    "ember-changeset-validations": "^2.1.0",
     "ember-cli-addon-docs": "*",
     "ember-cli-addon-docs-typedoc": "*",
     "ember-cli-babel": "*",

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

@@ -0,0 +1,13 @@
+import { layout } from '@ember-decorators/component';
+import Component from '@ember/component';
+
+import defaultTo from 'ember-osf-web/utils/default-to';
+
+import template from './template';
+
+@layout(template)
+export default class FormControls extends Component {
+    // Optional arguments
+    disabled: boolean = defaultTo(this.disabled, false);
+    shouldShowMessages: boolean = false;
+}

lib/osf-components/addon/components/form-controls/styles.scss

@@ -0,0 +1,44 @@
+{{yield (hash
+    checkbox=(
+        component
+        'validated-input/checkbox'
+        changeset=this.changeset
+        shouldShowMessages=this.shouldShowMessages
+        disabled=this.disabled
+    )
+    date=(
+        component
+        'validated-input/date'
+        changeset=this.changeset
+        shouldShowMessages=this.shouldShowMessages
+        disabled=this.disabled
+    )
+    text=(
+        component
+        'validated-input/text'
+        changeset=this.changeset
+        shouldShowMessages=this.shouldShowMessages
+        disabled=this.disabled
+    )
+    textarea=(
+        component
+        'validated-input/textarea'
+        changeset=@changeset
+        shouldShowMessages=this.shouldShowMessages
+        disabled=this.disabled
+    )
+    select=(
+        component
+        'validated-input/power-select'
+        changeset=this.changeset
+        shouldShowMessages=this.shouldShowMessages
+        disabled=this.disabled
+    )
+    custom=(
+        component
+        'validated-input/custom'
+        changeset=this.changeset
+        shouldShowMessages=this.shouldShowMessages
+        disabled=this.disabled
+    )
+)}}

lib/osf-components/addon/components/form-controls/template.hbs

@@ -0,0 +1 @@
+export { default } from 'osf-components/components/form-controls/component';

lib/osf-components/app/components/form-controls/component.js

@@ -79,7 +79,7 @@
     "ember-bootstrap": "^1.2.2",
     "ember-bootstrap-datepicker": "^2.0.9",
     "ember-browserify": "^1.2.0",
-    "ember-changeset": "^2.0.1",
+    "ember-changeset-validations": "^2.1.0",
     "ember-cli": "~3.4.3",
     "ember-cli-addon-docs": "https://github.com/cos-forks/ember-cli-addon-docs#docs-engine#37",
     "ember-cli-addon-docs-typedoc": "https://github.com/typed-ember/ember-cli-addon-docs-typedoc#initial-implementation",
@@ -220,5 +220,8 @@
       "lib/osf-components",
       "lib/registries"
     ]
+  },
+  "dependencies": {
+    "ember-changeset": "^2.1.2"
   }
 }

package.json

@@ -0,0 +1,14 @@
+import { ValidatorFunc } from 'ember-changeset/types';
+import { validator } from 'ember-validations';
+
+export type ValidatorFunction = (key: string, result: any) => string | string[] | true;
+
+export 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
+// will make more sense after.
+
+export type ValidationObject<M> = {
+    [F in keyof M]?: any;
+};

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

@@ -0,0 +1,17 @@
+declare module 'ember-changeset-validations/validators' {
+    import { ValidatorFunction } from 'ember-changeset-validations';
+    import { ConfirmationOptions } from 'ember-validators/validators/confirmation';
+    import { ExclusionOptions } from 'ember-validators/validators/exclusion';
+    import { InclusionOptions } from 'ember-validators/validators/inclusion';
+    import { LengthOptions } from 'ember-validators/validators/length';
+    import { NumberOptions } from 'ember-validators/validators/number';
+    import { PresenceOptions } from 'ember-validators/validators/presence';
+
+    export function validatePresence(options: PresenceOptions | boolean): ValidatorFunction;
+    export function validateLength(options: LengthOptions): ValidatorFunction;
+    export function validateNumber(options: NumberOptions): ValidatorFunction;
+    export function validateInclusion(options: InclusionOptions): ValidatorFunction;
+    export function validateExclusion(options: ExclusionOptions): ValidatorFunction;
+    export function validateFormat(options: FormatOptions): ValidatorFunction;
+    export function validateConfirmation(options: ConfirmationOptions): ValidatorFunction;
+}

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

@@ -0,0 +1,5 @@
+import { ValidationObject } from 'ember-changeset-validations';
+
+declare module '*/validations' {
+    export const UserSettingValidation: ValidationObject<UserSettingModel>;
+}