Create multi step form that includes inputs corresponding to Staff_Cred tables

[CCole]

The form shall be multistep and...

• [x] include a next button to display specialty fields
• [x] after clicking the next button a back button shall be available to return to previous fields
• [x] display a step indicator on the staff form
• [x] animate page transitions
• [x] contain one column of inputs per page

[CCole]

• [ ] create a newSpecialty object in the view model to store the specialty fields while the wizard is in use.

[CCole]

Consider this approach for multi step form utilize ui router and its nested states and different views per state https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router

• [x] install ui router - John Papa on ui-router "Define routes for views in the module where they exist. Each module should contain the routes for the views in the module."
• [x] install angular-animate - Jonn Papa on animations
• [x] configure router and define states - good explanation of configuration
• [x] move form that's currently in index.html to form.html
• [x] add ng-animate and ui-router to dataEntry module dependencies.
• [x] define all form views with the input fields
• [x] save each form view in a separate html file e.g. form.specialty.html , form.credential.html etc.
• [x] include ui-view directive (ui router will inject views here)
• [x] link each state to ui-sref

[CCole]

cbp styleguide on wizards: https://us-cbp.github.io/cbp-style-guide/docs/patterns/wizards.html

[CCole]

angular routing - http://www.w3schools.com/angular/angular_routing.asp

[CCole]

• [x] npm install animate.css Animate.css use in conjunction with

ngAnimate The ngAnimate module adds and removes classes.

The ngAnimate module does not animate your HTML elements, but when ngAnimate notice certain events, like hide or show of an HTML element, the element gets some pre-defined classes which can be used to make animations.

directives adds a ng-enter class value when they enter the DOM, and a ng-leave attribute when they are removed from the DOM.

ngAnimate Gotchas make sure you keep your version of angular and angular-animate in sync. a note on installing an older version of a package

css keyframe animation syntax keyframes rule

ng-class examples

[CCole]

On angular module system

[CCole]

html inside a view injected with ng-view does not properly render mdl-textfield--floating-label http://stackoverflow.com/questions/31638890/mdl-textfield-not-taking-ngmodel-changes-into-account/40781433#40781433

integrating angular and material design lite http://stackoverflow.com/questions/31278781/material-design-lite-integration-with-angularjs

[CCole]

Material Design Lite will automatically register and render all elements marked with MDL classes upon page load. However in the case where you are creating DOM elements dynamically you need to register new elements using the upgradeElement function.

-Material Design lite docs

things to consider

• $viewContentLoaded: Emitted every time the ngView content is reloaded.
• $on: $on(name, listener); Listens on events of a given type. See $emit for discussion of event life cycle.
• $timeout: notes on setTimeout with no duration: http://stackoverflow.com/questions/3580068/is-settimeout-with-no-delay-the-same-as-executing-the-function-instantly?answertab=active#tab-top

[CCole]

Animations work however: the responsive sizing of the material design lite card allows for both views to be visible in the card at the same time, which expands the height of the card.

[CCole]

new views need to be positioned absolute when entering and leaving. Also card needs to be set at a minimum height.

[CCole]

Align inputs in a single column

Forms should never consist of more than one column. One of the problems with form fields in multiple columns is that your users are likely to interpret the fields inconsistently. If a form has horizontally adjacent fields, the user must scan in Z patterns, slowing the speed of comprehension and muddying the clear path to completion. But if a form is in a single column, the path to completion is a straight line down the page.

-Designing More Efficient Forms One Column vs. Multiple Columns