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" ng-show="archetypeConfigRenderModel.enableMultipleFieldsets">
                    <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 for="archetypeFieldLabel_{{$index}}"><archetype-localize key="label">Label</archetype-localize></label>
                        <input type="text" id="archetypeFieldLabel_{{$index}}" ng-model="fieldset.label" on-keyup="autoPopulateAlias(this)" />
                    </div>
                    <div class="archetypeFieldsetOption">
                        <label for="archetypeFieldAlias_{{$index}}"><archetype-localize key="alias">Alias</archetype-localize></label>
                        <input type="text" id="archetypeFieldAlias_{{$index}}" ng-model="fieldset.alias" on-keyup="markAliasDirty(this)" required/>
                    </div>
                    <div class="archetypeFieldsetOption">
                        <label for="archetypeFieldLabelTemplate_{{$index}}"><archetype-localize key="labelTemplate">Label Template</archetype-localize></label>
                        <input type="text" id="archetypeFieldLabelTemplate_{{$index}}" ng-model="fieldset.labelTemplate" />
                    </div>
                    <div class="archetypeFieldsetOption" ng-show="archetypeConfigRenderModel.enableMultipleFieldsets">
                        <label for="archetypeFieldIcon_{{$index}}"><archetype-localize key="icon">Icon</archetype-localize></label>
                        <i class="fieldsetIcon icon ng-class:fieldset.icon"></i><a ng-click="selectIcon(fieldset)"><archetype-localize key="select">Select</archetype-localize>…</a>
                    </div>
                    <div class="archetypeFieldsetOption">
                        <label><archetype-localize key="properties">Properties</archetype-localize></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}} ({{property.alias}}) - <span>{{getDataTypeNameByGuid(property.dataTypeGuid)}}</span>
                                </div>
                                <div class="archetypePropertyCollapser" ng-hide="property.collapse && property.label">
                                    <div>
                                        <label for="archetypePropertyLabel_{{$parent.$index}}_{{$index}}"><archetype-localize key="label">Label</archetype-localize></label>
                                        <input type="text" id="archetypePropertyLabel_{{$parent.$index}}_{{$index}}" ng-model="property.label" on-keyup="autoPopulateAlias(this)"/>
                                    </div>
                                    <div>
                                        <label for="archetypePropertyAlias_{{$parent.$index}}_{{$index}}"><archetype-localize key="alias">Alias</archetype-localize></label>
                                        <input type="text" id="archetypePropertyAlias_{{$parent.$index}}_{{$index}}" ng-model="property.alias" on-keyup="markAliasDirty(this)" required/>
                                    </div>
                                    <div>
                                        <label for="archetypePropertyHelpText_{{$parent.$index}}_{{$index}}"><archetype-localize key="helpText">Help Text</archetype-localize></label>
                                        <input type="text" id="archetypePropertyHelpText_{{$parent.$index}}_{{$index}}" ng-model="property.helpText" />
                                    </div>
                                    <div>
                                        <label for="archetypePropertyDataType_{{$parent.$index}}_{{$index}}"><archetype-localize key="dataType">Datatype</archetype-localize></label>
                                        <select id="archetypePropertyDataType_{{$parent.$index}}_{{$index}}" ng-model="property.dataTypeGuid" ng-options="datatype.guid as datatype.name for datatype in availableDataTypes | orderBy:'name'"></select>
                                    </div>
                                    <div>
                                        <label for="archetypePropertyDefaultValue_{{$parent.$index}}_{{$index}}"><archetype-localize key="defaultValue">Default Value</archetype-localize></label>
                                        <input type="text" id="archetypePropertyDefaultValue_{{$parent.$index}}_{{$index}}" ng-model="property.value" />
                                    </div>
                                    <div>
                                        <label for="archetypePropertyRequired_{{$parent.$index}}_{{$index}}"><archetype-localize key="required">Required</archetype-localize></label>
                                        <input type="checkbox" id="archetypePropertyRequired_{{$parent.$index}}_{{$index}}" ng-model="property.required" />
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>

    <div class="archetypeOptions">
        <div>
            <label for="archetypeOptionsToggle"><archetype-localize key="toggleAdvanced">Toggle Advanced Options</archetype-localize><small><archetype-localize key="toggleAdvancedDescription">Show advanced options.</archetype-localize></small></label>
            <input type="checkbox" id="archetypeOptionsToggle" ng-model="archetypeConfigRenderModel.showAdvancedOptions"/>
        </div>
    </div>

    <div class="archetypeAdvancedOptions" ng-show="archetypeConfigRenderModel.showAdvancedOptions">
        <div>
            <label for="archetypeAdvancedOptionsStartWithAddButton"><archetype-localize key="startWithAddButton">Start With Add Button?</archetype-localize><small><archetype-localize key="startWithAddButtonDescription">Empty property shows an add button instead of providing a default fieldset.</archetype-localize></small></label>
            <input type="checkbox" id="archetypeAdvancedOptionsStartWithAddButton" ng-model="archetypeConfigRenderModel.startWithAddButton"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsHideControls"><archetype-localize key="hideFieldsetControls">Hide Fieldset Controls?</archetype-localize><small><archetype-localize key="hideFieldsetControlsDescription">Hides the fieldset add/remove/sort controls.</archetype-localize></small></label>
            <input type="checkbox" id="archetypeAdvancedOptionsHideControls" ng-model="archetypeConfigRenderModel.hideFieldsetControls"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsHideLabels"><archetype-localize key="hidePropertyLabels">Hide Property Labels?</archetype-localize><small><archetype-localize key="hidePropertyLabelsDescription">Hides the property labels.</archetype-localize></small></label>
            <input type="checkbox" id="archetypeAdvancedOptionsHideLabels" ng-model="archetypeConfigRenderModel.hidePropertyLabels"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsMaxFieldsets"><archetype-localize key="maxFieldsets">Max Fieldsets</archetype-localize><small><archetype-localize key="maxFieldsetsDescription">How many Fieldsets are allowed? Entering '1' will disable the controls. Default is unlimited.</archetype-localize></small></label>
            <input type="number" id="archetypeAdvancedOptionsMaxFieldsets" class="archetypeMaxFieldsets" ng-model="archetypeConfigRenderModel.maxFieldsets"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsMultipleFieldsets"><archetype-localize key="enableMultipleFieldsets">Enable Multiple Fieldsets?</archetype-localize><small><archetype-localize key="enableMultipleFieldsetsDescription">Allows multiple types of fieldsets within this archetype.</archetype-localize></small></label>
            <input type="checkbox" id="archetypeAdvancedOptionsMultipleFieldsets" ng-model="archetypeConfigRenderModel.enableMultipleFieldsets"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsCollapsing"><archetype-localize key="enableCollapsing">Enable Collapsing?</archetype-localize><small><archetype-localize key="enableCollapsingDescription">Allows multiple types of fieldsets within this archetype.</archetype-localize></small></label>
            <input type="checkbox" id="archetypeAdvancedOptionsCollapsing" ng-model="archetypeConfigRenderModel.enableCollapsing"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsFieldsetToolbar"><archetype-localize key="hideFieldsetToolbar">Hide Fieldset Toolbar?</archetype-localize><small><archetype-localize key="hideFieldsetToolbarDescription">Hides the fieldset toolbar that appears when more than one fieldset model appears.</archetype-localize></small></label>
            <input type="checkbox" id="archetypeAdvancedOptionsFieldsetToolbar" ng-model="archetypeConfigRenderModel.hideFieldsetToolbar"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsCustomClass"><archetype-localize key="customWrapperClass">Custom Wrapper Class</archetype-localize><small><archetype-localize key="customWrapperClassDescription">(Optional) Enter a custom CSS class that will be applied to the wrapper div.</archetype-localize></small></label>
            <input type="text" id="archetypeAdvancedOptionsCustomClass" ng-model="archetypeConfigRenderModel.customCssClass"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsCustomCss"><archetype-localize key="cssFile">CSS File</archetype-localize><small><archetype-localize key="cssFileDescription">(Optional) Enter a path for a custom CSS file to be included on the page.</archetype-localize></small></label>
            <input type="text" id="archetypeAdvancedOptionsCustomCss" ng-model="archetypeConfigRenderModel.customCssPath"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsCustomJs"><archetype-localize key="jsFile">JS File</archetype-localize><small><archetype-localize key="jsFileDescription">(Optional) Enter a path for a custom JS file to be included on the page.</archetype-localize></small></label>
            <input type="text" id="archetypeAdvancedOptionsCustomJs" ng-model="archetypeConfigRenderModel.customJsPath"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsDeveloperMode"><archetype-localize key="toggleDeveloperMode">Toggle Developer Mode</archetype-localize><small><archetype-localize key="toggleDeveloperModeDescription">Toggle Developer Mode</archetype-localize></small></label>
            <input type="checkbox" id="archetypeAdvancedOptionsDeveloperMode" ng-model="archetypeConfigRenderModel.developerMode"/>
        </div>
        <div>
            <label for="archetypeAdvancedOptionsConfigModel"><archetype-localize key="configModel">Config Model</archetype-localize><small><archetype-localize key="configModelDescription">Be careful editing the text below, it controls the schema for this archetype.</archetype-localize></small></label>
            <textarea class="archetypeDeveloperModel" id="archetypeAdvancedOptionsConfigModel" ng-model="archetypeConfigRenderModel"></textarea>
        </div>
    </div>
</div>