strong-arc
Version:
A visual suite for the StrongLoop API Platform
111 lines (110 loc) • 4.68 kB
HTML
<form class='ui-form'>
<button type="button" class="model-instance-header-btn btn-block" title="Properties" >
<span class=""></span>
<span class="model-editor-section-title">Properties</span>
</button>
<div data-id="ModelPropertyListContainer" class="" >
<div class="model-instance-container property-list-header">
<table class="ui-table property-table" sl-ui-data-table>
<thead>
<tr>
<th title="property name">Name</th>
<th title="data type">Type</th>
<th title="is id">ID</th>
<th title="required">Required</th>
<th title="is index">Index</th>
<th title="comments">Comments</th>
<th title="controls" class="actions"></th>
</tr>
</thead>
<tbody class="model-instance-property-list">
<tr ng-repeat="property in activeInstance.properties"
class="modelproperty-container modelproperty-detail-is-open">
<td ng-class="{'has-errors': !isNameValid(), 'has-selectable': true}">
<div class="ui-form-group selectable">
<input ref="propName"
data-name="name"
required="true"
sl-common-enter="triggerModelPropertyUpdate(property)"
ng-change="isNameValid(property.name)"
ng-blur="triggerModelPropertyUpdate(property)"
sl-common-select-on-click
ng-model="property.name"
class="ui-input"
type="text" />
</div>
</td>
<td class="has-selectable">
<div class="ui-form-group center selectable">
<sl-property-data-type-select property="property"></sl-property-data-type-select>
</div>
</td>
<td>
<div class="ui-form-group center">
<label class="ui-checkbox">
<input type="checkbox"
data-name="isId"
name="isId"
ng-change="triggerModelPropertyUpdate(property)"
ng-model="property.isId"
class="model-instance-editor-checkbox"
ng-class="{ checked: property.isId }">
<i class="icon"></i>
</label>
</div>
</td>
<td>
<div class="ui-form-group center">
<label class="ui-checkbox">
<input type="checkbox"
data-name="required"
name="required"
ng-change="triggerModelPropertyUpdate(property)"
ng-model="property.required"
ng-class="{ checked: property.required }">
<i class="icon"></i>
</label>
</div>
</td >
<td>
<div class="ui-form-group center">
<label class="ui-checkbox">
<input type="checkbox"
data-name="index"
ng-model="property.index"
ng-change="triggerModelPropertyUpdate(property)"
name="index"
ng-class="{ checked: property.index }">
<i class="icon"></i>
</label>
</div>
</td >
<td class="has-selectable">
<div class="ui-form-group selectable">
<input type="text"
data-name="comments"
ng-model="property.comments"
sl-common-enter="triggerModelPropertyUpdate(property)"
ng-blur="triggerModelPropertyUpdate(property)"
name="comments"
class="ui-input" />
</div>
</td >
<td class="actions">
<a href="" class="ui-close" ng-click="deleteModelProperty()" data-id="{{modelProperty.id}}">x</a>
<div class="model-instance-name-validation" ng-class="{'is-valid': isNameValid(),'is-invalid': !isNameValid()}">
<div class="validation-error-message">
Property name should conform with <a href="http://docs.strongloop.com/display/public/LB/Valid+names+in+LoopBack" target="_new">valid javascript variable name conventions</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<button title="New Property" ng-click="createNewModelProperty()" type="button" class="ui-btn accessory btn-new-model-property">
<span class="sl-icon sl-icon-plus-sign"></span>
New Property
</button>
</div>
</form>