Archetype/app/views/archetype.config.html

<div class="archetypeConfig" ng-controller="Imulus.ArchetypeConfigController">
    <ul class="archetypeFieldsets" ui-sortable="sortableOptions" ng-model="archetypeConfigRenderModel.fieldsets">
        <li ng-repeat="fieldset in archetypeConfigRenderModel.fieldsets" ng-hide="fieldset.remove">
            <div class="archetypeFieldsetWrapper" >
                <div class="archetypeEditorControls">
                    <i class="icon icon-add" ng-click="addFieldsetRow($index, $event)"></i>
                    <i class="icon icon-delete" ng-click="removeFieldsetRow($index)" ng-show="canRemoveFieldset()"></i>
                    <i class="icon icon-navigation handle" ng-show="canSortFieldset()"></i>
                </div> 
                <div class="archetypeFieldsetTitle" ng-click="focusFieldset(fieldset)">{{fieldset.label}}</div>
                <div class="archetypeFieldsetCollapser" ng-hide="fieldset.collapse && fieldset.label">
                    <div class="archetypeFieldsetOption">
                        <label>Label</label><input type="text" ng-model="fieldset.label" />
                    </div>
                    <div class="archetypeFieldsetOption">
                        <label>Alias</label><input type="text" ng-model="fieldset.alias" />
                    </div>
                    <div class="archetypeFieldsetOption">
                        <label>Label Expr.</label><input type="text" ng-model="fieldset.labelExpression" />
                    </div>
                    <div class="archetypeFieldsetOption">
                        <label>Tooltip</label><input type="text" ng-model="fieldset.tooltip" />
                    </div>
                    <div class="archetypeFieldsetOption">
                        <label>Icon</label><input type="text" ng-model="fieldset.icon" />
                    </div>
                    <div class="archetypeFieldsetOption">
                        <label>Header Text</label><input type="text" ng-model="fieldset.headerText" />
                    </div>
                    <div class="archetypeFieldsetOption">
                        <label>Footer Text</label><input type="text" ng-model="fieldset.footerText" />
                    </div>
                    <div class="archetypeFieldsetOption">
                        <label>Properties</label>
                    </div>
                    <div class="archetypePropertiesWrapper">
                        <ul ui-sortable="sortableOptions" ng-model="fieldset.properties">
                            <li ng-repeat="property in fieldset.properties" ng-hide="property.remove">                              
                                <div class="archetypeEditorControls">
                                    <i class="icon icon-add" ng-click="addPropertyRow(fieldset, $index)"></i>
                                    <i class="icon icon-delete" ng-click="removePropertyRow(fieldset, $index)" ng-show="canRemoveProperty(fieldset)"></i>
                                    <i class="icon icon-navigation handle" ng-show="canSortProperty(fieldset)"></i>
                                </div>
                                <div class="archetypePropertyTitle" ng-click="focusProperty(fieldset.properties, property)">{{property.label}}</div>
                                <div class="archetypePropertyCollapser" ng-hide="property.collapse && property.label">
                                    <div>
                                         <label>Label</label><input type="text" ng-model="property.label" />
                                    </div>
                                    <div>
                                         <label>Alias</label><input type="text" ng-model="property.alias" />
                                    </div>
                                    <div>
                                         <label>Help Text</label><input type="text" ng-model="property.helpText" />
                                    </div>
                                    <div>
                                         <label>View</label><select ng-model="property.view" ng-options="view.path as view.name for view in availableViews"></select>
                                    </div>                            
                                    <div ng-hide="true">
                                         <label>Default Value</label><input type="text" ng-model="property.value" />
                                    </div>
                                    <div>
                                         <label>Config</label><textarea ng-model="property.config" /></textarea>
                                    </div>
                                    <div>
                                         <label>Required</label><input type="checkbox" ng-model="property.required" />
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
    
    <div class="archetypeOptions">
        <div>
            <label>Hide Fieldset Toolbar?<small>Hides the fieldset toolbar that appears when more than one fieldset model appears.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hideFieldsetToolbar"/>
        </div>
        <div>
            <label>Hide fieldset editor controls?<small>Hides the fieldset add/remove/sort controls.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hideFieldsetControls"/>
        </div>
        <div>
            <label>Hide fieldset labels?<small>Hides the fieldset labels.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hideFieldsetLabels"/>
        </div> 
        <div>
            <label>Hide property labels?<small>Hides the property labels.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.hidePropertyLabels"/>
        </div>
        <div>
            <label>Max fieldsets<small>How many Fieldsets are allowed? Entering '1' will disable the controls. Default is unlimited.</small></label><input type="text" class="archetypeMaxFieldsets" ng-model="archetypeConfigRenderModel.maxFieldsets"/>
        </div>    
        <div>
            <label>Toggle Advanced Options<small>Show advanced options.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.showAdvancedOptions"/>
        </div>
    </div>
    
    <div class="archetypeAdvancedOptions" ng-show="archetypeConfigRenderModel.showAdvancedOptions">
        <div>
            <label>Config Model<small>Be careful editing the text below, it controls the schema for this archetype.</small></label>
            <textarea class="archetypeDeveloperModel" ng-model="archetypeConfigRenderModel"></textarea>
        </div>
        <div>
            <label>Custom Wrapper Class<small>(Optional) Enter a custom CSS class that will be applied to the wrapper div.</small></label><input type="text" ng-model="archetypeConfigRenderModel.customCssClass"/>
        </div>
        <div>
            <label>CSS File<small>(Optional) Enter a path for a custom CSS file to be included on the page.</small></label><input type="text" ng-model="archetypeConfigRenderModel.customCssPath"/>
        </div>
        <div>
            <label>JS File<small>(Optional) Enter a path for a custom JS file to be included on the page.</small></label><input type="text" ng-model="archetypeConfigRenderModel.customJsPath"/>
        </div>
        <div>
            <label>Toggle Developer Mode<small>Turn on for developer options.</small></label><input type="checkbox" ng-model="archetypeConfigRenderModel.developerMode"/>
        </div>
    </div>
</div>