-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch '121-debug-with-definemap' into develop
- Loading branch information
Showing
47 changed files
with
1,203 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import DefineMap from 'can-define/map/map' | ||
| import DefineList from 'can-define/list/list' | ||
| import Component from 'can-component' | ||
| import template from './debug-alerts.stache' | ||
|
|
||
| /** | ||
| * @module {Module} author/debug-alerts <author-debug-alerts> | ||
| * @parent api-components | ||
| * | ||
| * List of warnings/errors regarding the interview (e.g variable names that | ||
| * are too long for HotDocs) shown to the author in preview mode. | ||
| * | ||
| * ## Use | ||
| * | ||
| * @codestart | ||
| * <author-debug-alerts {(alert-messages)}="alertMessages" /> | ||
| * @codeend | ||
| */ | ||
|
|
||
| /** | ||
| * @property {can.Map} debugAlerts.viewModel | ||
| * @parent author/debug-alerts | ||
| * | ||
| * `<author-debug-alerts>`'s viewModel. | ||
| */ | ||
| const DebugAlerts = DefineMap.extend('DebugAlerts', { | ||
| /** | ||
| * @property {can.List} debugAlerts.viewModel.prototype.define.alertMessages alertMessages | ||
| * @parent debugAlerts.viewModel | ||
| * | ||
| * List of error/warning messages related to an interview. | ||
| */ | ||
| alertMessages: { | ||
| Default: DefineList | ||
| }, | ||
|
|
||
| /** | ||
| * @property {Number} debugAlerts.viewModel.prototype.define.messagesCount messagesCount | ||
| * @parent debugAlerts.viewModel | ||
| * | ||
| * Number of messages currently visible to the user (when the user dismisses | ||
| * a message this number gets updated). | ||
| */ | ||
| messagesCount: { | ||
| get () { | ||
| let messages = this.alertMessages | ||
|
|
||
| return messages | ||
| .filter(m => m.open) | ||
| .length | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| export default Component.extend({ | ||
| view: template, | ||
| ViewModel: DebugAlerts, | ||
| tag: 'author-debug-alerts', | ||
|
|
||
| events: { | ||
| '.btn-dismiss click': function () { | ||
| let $el = $(this.element) | ||
| let vm = this.viewModel | ||
|
|
||
| $el.slideUp('slow', function () { | ||
| vm.alertMessages.update([]) | ||
| }) | ||
| } | ||
| } | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| author-debug-alerts { | ||
| left: 50px; | ||
| right: 50px; | ||
| bottom: 50px; | ||
| overflow: auto; | ||
| display: block; | ||
| max-height: 250px; | ||
| z-index: 99999999; | ||
| position: absolute; | ||
|
|
||
| app-alert .alert { | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .btn-dismiss .badge { | ||
| top: -1px; | ||
| line-height: 1; | ||
| font-size: 12px; | ||
| min-width: 10px; | ||
| padding: 3px 7px; | ||
| font-weight: 700; | ||
| margin-left: 3px; | ||
| text-align: center; | ||
| position: relative; | ||
| white-space: nowrap; | ||
| border-radius: 10px; | ||
| display: inline-block; | ||
| vertical-align: middle; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| <can-import from="@caliorg/a2jdeps/alert/"/> | ||
| <can-import from="~/src/debug-alerts/debug-alerts.less"/> | ||
|
|
||
| <div class="debug-alerts-wrapper"> | ||
| <button type="button" class="btn btn-default btn-block btn-dismiss"> | ||
| Dismiss All <span class="badge">{{messagesCount}}</span> | ||
| </button> | ||
|
|
||
| {{#for(item of alertMessages)}} | ||
| <app-alert open:raw="true" alert-type:raw="danger" dismissible:raw="true"> | ||
| {{{item.message}}} | ||
| </app-alert> | ||
| {{/for}} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>Debug Menu Tests</title> | ||
| <div id="test-area"></div> | ||
| </head> | ||
|
|
||
| <body> | ||
| <script src="../../node_modules/steal/steal.js" | ||
| data-mocha="bdd" | ||
| data-main="~/src/debug-menu/debug-menu-test"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import AppState from '~/src/models/app-state' | ||
| import FieldModel from '~/src/models/field' | ||
| import AnswerVM from '~/src/models/answervm' | ||
| import stache from 'can-stache' | ||
| import canViewModel from 'can-view-model' | ||
| import { assert } from 'chai' | ||
|
|
||
| import 'steal-mocha' | ||
| import './debug-menu' | ||
| import '~/src/mobile/pages/fields/' | ||
|
|
||
| describe('<debug-panel>', () => { | ||
| describe('Component', () => { | ||
| afterEach(() => { | ||
| $('#test-area').empty() | ||
| }) | ||
|
|
||
| const render = (data) => { | ||
| const tpl = stache('<debug-menu appState:from="appState" />') | ||
| document.querySelector('#test-area').appendChild(tpl(data)) | ||
| return canViewModel('debug-menu') | ||
| } | ||
|
|
||
| it('fillPageSample', (done) => { | ||
| const appState = new AppState() | ||
| const vm = render({ appState }) | ||
|
|
||
| // validation is tested in ~/src/mobile/pages/fields/field/field-test.js | ||
| const oldValidateSampleFill = vm.validateSampleFill | ||
| vm.constructor.prototype.validateSampleFill = () => {} | ||
|
|
||
| const fieldModel = new FieldModel({ name: 'someName', type: 'text', sample: 'foo' }) | ||
| fieldModel._answerVm = new AnswerVM({ field: fieldModel, answer: fieldModel.emptyAnswer }) | ||
|
|
||
| const fields = [ fieldModel ] | ||
| const fieldsTpl = stache('<a2j-fields appState:from="appState" fields:from="fields" />') | ||
| document.querySelector('#test-area').appendChild(fieldsTpl({ appState, fields })) | ||
|
|
||
| const fieldEl = document.querySelector('a2j-field') | ||
|
|
||
| setTimeout(() => { | ||
| vm.fillPageSample() | ||
| assert.equal(fieldEl.value, 'foo', 'should fill in field with sample value') | ||
| vm.constructor.prototype.validateSampleFill = oldValidateSampleFill | ||
| done() | ||
| }) | ||
| }) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import DefineMap from 'can-define/map/map' | ||
| import Component from 'can-component' | ||
| import template from './debug-menu.stache' | ||
| import constants from '~/src/models/constants' | ||
| import _includes from 'lodash/includes' | ||
|
|
||
| /** | ||
| * @module {Module} author/debug-menu <debug-menu> | ||
| * @parent api-components | ||
| * | ||
| * This component renders some buttons that allow the user (author) to debug | ||
| * the interview in the "preview" tab. Among these options there is the button | ||
| * that toggles the variables panel and the button that takes the user straight | ||
| * to the page edit modal. | ||
| * | ||
| * ## Use | ||
| * | ||
| * @codestart | ||
| * <debug-menu {(app-state)}="appState" /> | ||
| * @codeend | ||
| */ | ||
|
|
||
| // List of field types that can be filled with the `sample` property. | ||
| const canUseSampleValues = [ | ||
| constants.ftText, constants.ftTextLong, | ||
| constants.ftTextPick, constants.ftNumber, | ||
| constants.ftNumberDollar, constants.ftNumberSSN, | ||
| constants.ftNumberPhone, constants.ftNumberZIP, | ||
| constants.ftNumberPick, constants.ftDateMDY | ||
| ] | ||
|
|
||
| let DebugMenuVM = DefineMap.extend('DebugMenuVM', { | ||
| // passed in via stache | ||
| appState: {}, | ||
|
|
||
| currentPageName: { | ||
| get () { | ||
| return this.appState.page | ||
| } | ||
| }, | ||
|
|
||
| validateSampleFill (fieldVM, context, fieldEl) { | ||
| return fieldVM.validateField(context, fieldEl) | ||
| }, | ||
|
|
||
| fillPageSample () { | ||
| // fieldElements NodeList used to access individual FieldVMs & validate | ||
| const fieldElements = document.querySelectorAll('a2j-field') | ||
| // do nothing if `a2j-field` components not in the DOM. | ||
| if (!fieldElements.length) return | ||
|
|
||
| let fieldVM | ||
| let fieldModel | ||
|
|
||
| for (const fieldEl of fieldElements) { | ||
| fieldVM = fieldEl.viewModel | ||
| fieldModel = fieldVM.field | ||
| if (_includes(canUseSampleValues, fieldModel.type)) { | ||
| // this emulates user input and onBlur validation | ||
| fieldEl.value = fieldModel.sample | ||
| this.validateSampleFill(fieldVM, null, fieldEl) | ||
| } | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| export default Component.extend({ | ||
| view: template, | ||
| ViewModel: DebugMenuVM, | ||
| tag: 'debug-menu', | ||
|
|
||
| leakScope: true | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| debug-menu { | ||
| display: block; | ||
|
|
||
| .debugmenu { | ||
| left: 5px; | ||
| bottom: 20px; | ||
| position: absolute; | ||
| z-index: 2000; | ||
| } | ||
| } |
Oops, something went wrong.