Skip to content

Commit

Permalink
mvp working
Browse files Browse the repository at this point in the history
  • Loading branch information
@mikemitchel
mikemitchel committed Aug 8, 2024
1 parent f846616 commit db2c8fe
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 80 deletions.
28 changes: 28 additions & 0 deletions src/pages-tab/components/page-fields/page-fields-helpers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,3 +75,31 @@ export const fieldTypes = new DefineList([
{ value: constants.ftUserAvatar, label: 'User Avatar' }
])
/* eslint-enable no-multi-spaces */

const mapFieldToVariableType = {
[constants.ftButton]: constants.vtText.toLowerCase(),
[constants.ftText]: constants.vtText.toLowerCase(),
[constants.ftTextLong]: constants.vtText.toLowerCase(),
[constants.ftTextPick]: constants.vtText.toLowerCase(),
[constants.ftNumber]: constants.vtNumber.toLowerCase(),
[constants.ftNumberDollar]: constants.vtText.toLowerCase(),
[constants.ftNumberSSN]: constants.vtText.toLowerCase(),
[constants.ftNumberPhone]: constants.vtText.toLowerCase(),
[constants.ftNumberZIP]: constants.vtText.toLowerCase(),
[constants.ftNumberPick]: constants.vtNumber.toLowerCase(),
[constants.ftDateMDY]: constants.vtDate.toLowerCase(),
[constants.ftGender]: constants.vtMC.toLowerCase(),
[constants.ftRace]: constants.vtText.toLowerCase(),
[constants.ftRadioButton]: constants.vtMC.toLowerCase(),
[constants.ftCheckBox]: constants.vtTF.toLowerCase(),
[constants.ftCheckBoxNOTA]: constants.vtTF.toLowerCase(),
[constants.ftCheckBoxMultiple]: constants.vtTF.toLowerCase(),
[constants.ftUserAvatar]: constants.vtText.toLowerCase()
}

export const variableTypeCheck = (fieldType, variableType) => {
const expectedType = mapFieldToVariableType[fieldType.toLowerCase()]
const hasValidTypes = expectedType === variableType.toLowerCase()

return hasValidTypes
}
57 changes: 42 additions & 15 deletions src/pages-tab/components/page-fields/page-fields.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,18 @@ import DefineList from 'can-define/list/list'
import Component from 'can-component'
import template from './page-fields.stache'
import constants from 'a2jauthor/src/models/constants'
import { ckeFactory } from '../../pageHelpers/pageHelpers'
import { ckeFactory } from '../../helpers/helpers'
import { TField } from '~/legacy/viewer/A2J_Types'
import * as pageHelpers from './page-fields-helpers'

/* VM used for each field item, another VM used for the fields tab itself is below this */
export const FieldVM = DefineMap.extend('FieldVM', {
page: {},
appState: {},
guideFiles: {},
field: {}, // A2J Types TField
vars: {}, // A2J Types TVariable[]

field: {
set (field) {
console.log('field', field)
return field
}
}, // A2J Types TField
isHealthy: {
default: true
},

// validate on this type change
type: { // bindable proxy to TField type
Expand All @@ -31,14 +27,40 @@ export const FieldVM = DefineMap.extend('FieldVM', {
}
},

// validate on this type change
variable: { // bindable proxy to TField type
name: { // bindable proxy to TField name
value ({ lastSet, listenTo, resolve }) {
listenTo(lastSet, function (val) {
this.field.type = val
this.field.name = val
resolve(val)
})
resolve(this.field.type)
resolve(this.field.name)
}
},

get varType () {
const variable = this.vars[this.name.toLowerCase()]
return variable.type
},

hasValidType: {
value ({ listenTo, resolve }) {
listenTo('name', function (name, preName) {
const fieldType = this.type.toLowerCase()
const varType = this.varType.toLowerCase()

resolve(pageHelpers.variableTypeCheck(fieldType, varType))
})
listenTo('type', function (type, preType) {
const fieldType = this.type.toLowerCase()
const varType = this.varType.toLowerCase()

resolve(pageHelpers.variableTypeCheck(fieldType, varType))
})

const fieldType = this.type.toLowerCase()
const varType = this.varType.toLowerCase()

resolve(pageHelpers.variableTypeCheck(fieldType, varType))
}
},

Expand Down Expand Up @@ -164,10 +186,15 @@ export const PageFieldsVM = DefineMap.extend('PageFieldsVM', {
return el.value
},

get vars () {
return this.appState.guide.vars
},

get fields () {
this.numFields // eslint-disable-line
this.fieldsChanged // eslint-disable-line
return new DefineList(this.page.fields.map(field => new FieldVM({ field })))
const vars = this.vars
return new DefineList(this.page.fields.map(field => new FieldVM({ field, vars })))
},

minFields: { default: 0 },
Expand Down
3 changes: 3 additions & 0 deletions src/pages-tab/components/page-fields/page-fields.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,7 @@
page-fields {
display: block;
/* padding: @grid-gutter-width; */
.type-error {
margin-bottom: 10px;
}
}
75 changes: 39 additions & 36 deletions src/pages-tab/components/page-fields/page-fields.stache
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,126 +22,129 @@
</div>
<table class="page-edit-fields list table table-striped">
<tbody class="ui-sortable">
{{#for(field of fields)}}
{{#for(fieldVM of fields)}}
<tr valign="top" class="step-stepundefined" name="record">
<td class="newediticons">
<span class="list-position">
<button
title="Move field up"
aria-label="Move field up"
class="glyphicon-up-dir {{^if(canMoveUp(field))}}disabled{{/if}}"
on:click="moveUp(field)"
class="glyphicon-up-dir {{^if(canMoveUp(fieldVM))}}disabled{{/if}}"
on:click="moveUp(fieldVM)"
></button>
<button
title="Move field down"
aria-label="Move field down"
class="glyphicon-down-dir {{^if(canMoveDown(field))}}disabled{{/if}}"
on:click="moveDown(field)"
class="glyphicon-down-dir {{^if(canMoveDown(fieldVM))}}disabled{{/if}}"
on:click="moveDown(fieldVM)"
></button>
</span>
<button
title="Add New Field {{^if(canAdd)}}(disabled, maximum number of fields is {{maxFields}}){{/if}}"
aria-label="Add New Field {{^if(canAdd)}}(disabled, maximum number of fields is {{maxFields}}){{/if}}"
class="ui-icon-circle-plus glyphicon-plus-circled {{^if(canAdd)}}disabled{{/if}}"
on:click="add(field)"
on:click="add(fieldVM)"
></button>
<button
title="Remove Field {{^if(canRemove)}}(disabled, minimum number of fields is 0){{/if}}"
aria-label="Remove Field {{^if(canRemove)}}(disabled, minimum number of fields is 0){{/if}}"
class="ui-icon-circle-minus glyphicon-minus-circled {{^if(canRemove)}}disabled{{/if}}"
on:click="remove(field)"
on:click="remove(fieldVM)"
></button>
</td>
<td>
<div name="undefined">
<div style="padding-bottom: 15px;">
{{{ckeFactory(fieldVM.field, 'label', 'Label:')}}}
</div>
<div class="editspan form-group">
<label class="control-label">Type:</label>
<select class="form-control" value:bind="field.type">
{{#for(type of field.types)}}
<option value="{{type.value}}" {{#is(type.value, field.type)}}selected{{/if}}>{{type.label}}</option>
<select class="form-control" value:bind="fieldVM.type">
{{#for(type of fieldVM.types)}}
<option value="{{type.value}}" {{#is(type.value, fieldVM.type)}}selected{{/if}}>{{type.label}}</option>
{{/for}}
</select>
</div>
</div>
<div style="padding-bottom: 15px;">
{{{ckeFactory(field.field, 'label', 'Label:')}}}
</div>
<var-picker-field appState:from="appState" obj:bind="field.field" key:from="'name'" />
{{#if(field.canDefaultValue)}}
{{#not(fieldVM.hasValidType)}}
<div class="type-error alert-danger"><span class="glyphicon-attention"></span>Field Type: {{fieldVM.type}} is mis-matched with Var Type: {{fieldVM.varType}}</div>
{{/not}}
<var-picker-field appState:from="appState" filterText:bind="fieldVM.name" obj:bind="fieldVM.field" key:from="'name'" />
{{#if(fieldVM.canDefaultValue)}}
<div class="editspan form-group" name="default">
<label class="control-label">Default Value:</label>
<input class="form-control ui-widget editable"
type="text" placeholder=""
value:bind="field.field.value"
on:blur="field.field.value = trim(scope.element)"
value:bind="fieldVM.field.value"
on:blur="fieldVM.field.value = trim(scope.element)"
>
</div>
{{/if}}
<div name="required" class="{{^if(field.canRequire)}}hidden{{/if}}">
<div name="required" class="{{^if(fieldVM.canRequire)}}hidden{{/if}}">
<div class="checkbox">
<label><input type="checkbox" checked:bind="field.required"> Required:</label>
<label><input type="checkbox" checked:bind="fieldVM.required"> Required:</label>
</div>
</div>
{{#if(field.canMaxChars)}}
{{#if(fieldVM.canMaxChars)}}
<div class="editspan form-group" name="maxchars">
<label class="control-label">Max Characters:</label>
<input
class="form-control ui-widget editable" type="text"
placeholder="Enter a number here to set a Character Limit for the End User's response"
value:bind="field.field.maxChars"
value:bind="fieldVM.field.maxChars"
pattern="\d*"
on:blur="field.field.maxChars = applyPattern(scope.element)"
on:blur="fieldVM.field.maxChars = applyPattern(scope.element)"
>
</div>
{{/if}}
<div name="calculator" class="{{^if(field.canUseCalc)}}hidden{{/if}}">
<div name="calculator" class="{{^if(fieldVM.canUseCalc)}}hidden{{/if}}">
<div class="checkbox">
<label><input type="checkbox" checked:bind="field.calculator"> Show Calculator:</label>
<label><input type="checkbox" checked:bind="fieldVM.calculator"> Show Calculator:</label>
</div>
</div>
{{#if(field.canMinMax)}}
{{#if(fieldVM.canMinMax)}}
<div class="editspan form-group" name="min">
<label class="control-label">Min Value:</label>
<input class="form-control ui-widget editable" type="text" placeholder="min"
value:bind="field.field.min"
value:bind="fieldVM.field.min"
pattern="TODAY|(?:^-(?=.*\d))|\d*"
on:blur="field.field.min = applyPattern(scope.element)"
on:blur="fieldVM.field.min = applyPattern(scope.element)"
>
</div>
<div class="editspan form-group" name="max">
<label class="control-label">Max Value:</label>
<input class="form-control ui-widget editable" type="text" placeholder="max"
value:bind="field.field.max"
value:bind="fieldVM.field.max"
pattern="TODAY|(?:^-(?=.*\d))|\d*"
on:blur="field.field.max = applyPattern(scope.element)"
on:blur="fieldVM.field.max = applyPattern(scope.element)"
>
</div>
{{/if}}
{{#if(field.canList)}}
{{#if(fieldVM.canList)}}
<div name="listext" class="form-upload clearfix" style="padding-bottom: 15px;">
<file-picker appState:from="appState" label:from="'External list'" obj:from="field.field" key:from="'listSrc'" items:from="guideFiles.xml" />
<file-picker appState:from="appState" label:from="'External list'" obj:from="fieldVM.field" key:from="'listSrc'" items:from="guideFiles.xml" />
</div>
<div name="listint" class="">
<div class="editspan form-group">
<label class="control-label">Internal list:</label>
<textarea rows="2"
class="form-control text editable taller"
placeholder="{{"Item 1\nItem 2\nItem 3"}}"
value:bind="field.internalList"
value:bind="fieldVM.internalList"
></textarea>
</div>
</div>
{{/if}}
<div style="padding-bottom: 15px;">
{{{ckeFactory(field.field, 'invalidPrompt', 'Custom Invalid Prompt:')}}}
{{{ckeFactory(fieldVM.field, 'invalidPrompt', 'Custom Invalid Prompt:')}}}
</div>
{{#if(field.canUseSample)}}
{{#if(fieldVM.canUseSample)}}
<div class="editspan form-group" name="sample">
<label class="control-label">Sample Value:</label>
<input class="form-control ui-widget editable"
type="text" placeholder=""
value:bind="field.field.sample"
on:blur="field.field.sample = trim(scope.element)"
value:bind="fieldVM.field.sample"
on:blur="fieldVM.field.sample = trim(scope.element)"
>
</div>
{{/if}}
Expand Down
29 changes: 0 additions & 29 deletions src/pages-tab/components/var-picker/util/variable-type-check.js
View file

This file was deleted.

0 comments on commit db2c8fe

Please sign in to comment.