sheercms
Version:
Sheer Cliff CMS is a simple and powerful content management system (CMS) for Node JS.
250 lines (221 loc) • 14.8 kB
HTML
<div class="row main-container types-view">
<div class="col-md-12">
<div ng-if="data.isAuthorized !== true" class="no-auth alert alert-danger">
You are not authorized to use this tool.
</div>
<div class="toolbar" ng-if="data.isAuthorized === true">
<ul>
<li ng-show="buttons.back === true">
<a href="javascript:void(0);" title="Go back to the content types list" ng-click="back()">
<img src="/cms/static/images/icons/32/back_arrow.png" alt="Back"/>
<span>Back</span>
</a>
</li>
<li ng-show="buttons.newType === true">
<a href="javascript:void(0);" title="Create a new template" ng-click="showNewType()">
<img src="/cms/static/images/icons/32/content_type_add.png" alt="New Content Type"/>
<span>New Type</span>
</a>
</li>
<li ng-show="buttons.refresh === true">
<a href="javascript:void(0);" title="Reload the list of content types" ng-click="reload()">
<img src="/cms/static/images/icons/32/update.png" alt="Refresh"/>
<span>Refresh</span>
</a>
</li>
<li ng-show="buttons.save === true">
<a href="javascript:void(0);" title="Save the changes to this content type" ng-click="save()">
<img src="/cms/static/images/icons/32/accept.png" alt="Save"/>
<span>Save</span>
</a>
</li>
<li ng-show="buttons.delete === true">
<a href="javascript:void(0);" title="Delete this content type" ng-click="delete()">
<img src="/cms/static/images/icons/32/delete.png" alt="Delete"/>
<span>Delete</span>
</a>
</li>
</ul>
</div>
<div ng-if="data.isAuthorized === true">
<h3>{{data.title}}</h3>
<div ng-if="data.message != null && data.message.length > 0">
<div class="alert {{data.messageType}} max-width-medium">{{data.message}}</div>
</div>
<div ng-if="data.editing == false">
<div ng-if="types.length == 0">
<div class="alert alert-warning max-width-medium">There are currently no content types. <a href="javascript:void(0);" ng-click="showNewType()">Create a new content type.</a></div>
</div>
<div ng-if="types.length > 0">
<table class="table table-click table-bordered table-striped table-list max-width-large">
<thead>
<tr>
<th style="width:300px;">Name</th>
<th>Description</th>
<th style="width:100px;">Abstract</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="t in types" ng-click="editType(t._id)">
<td>
<img class="icon" ng-src="{{t.icon}}" />
<div class="two-rows">
<div class="row1"><strong>{{t.name}}</strong></div>
<div class="row2"></div>
</div>
</td>
<td>{{t.desc}}</td>
<td>{{t.abstract}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div ng-if="data.editing == true">
<!-- Nav tabs -->
<ul class="nav nav-pills" role="tablist">
<li role="presentation" ng-class="{active: data.tab == 'props'}"><a href="javascript:void(0);" role="tab" data-toggle="tab" ng-click="changeTab('props')">Properties</a></li>
<li role="presentation" ng-class="{active: data.tab == 'fields'}"><a href="javascript:void(0);" role="tab" data-toggle="tab" ng-click="changeTab('fields')">Fields</a></li>
<li role="presentation" ng-class="{active: data.tab == 'inheritance'}"><a href="javascript:void(0);" role="tab" data-toggle="tab" ng-click="changeTab('inheritance')">Inheritance</a></li>
<li role="presentation" ng-class="{active: data.tab == 'templates'}"><a href="javascript:void(0);" role="tab" data-toggle="tab" ng-click="changeTab('templates')">Templates</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" ng-class="{active: data.tab === 'props'}" id="tabTypeProps">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" id="tName" name="tName" ng-model="type.name" style="max-width:400px;" />
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" id="tDescription" name="tDescription" ng-model="type.desc" style="max-width:600px;" rows="2"></textarea>
</div>
<div class="form-group">
<label>Icon</label>
<div style="max-width: 600px;">
<icon-selector id="tIcon" name="tIcon" value="type.icon" />
</div>
</div>
<div class="form-group">
<label>Controller</label>
<input type="text" class="form-control" name="tController" ng-model="type.controller" style="max-width:600px;" placeholder="The path to the controller file" />
</div>
<div class="form-group">
<label>Media Type</label>
<select id="cboMediaType" class="form-control" name="cboMediaType" style="width:120px;" ng-model="type.mediaType" ng-options="a as a for a in lists.mediaTypes">
</select>
</div>
<div class="form-group">
<label>Media Extensions - </label><span class="help-block">for example: jpg,jpeg,png,gif</span>
<input type="text" class="form-control" id="tMediaExt" name="tMediaExt" ng-model="type.mediaExt" style="max-width:600px;" />
</div>
<div class="form-group">
<label>MIME Type - </label><span class="help-block">for example: text/plain</span>
<input type="text" class="form-control" id="tMimeType" name="tMimeType" ng-model="type.mime" style="max-width:400px;" />
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="tAbstract" ng-model="type.abstract"> Abstract - <span class="help-block">Items cannot be created from this type. Other types inherit from this type.</span>
</label>
</div>
</div>
<div class="form-group">
<label>Type ID:</label>
<span>{{type._id}}</span>
</div>
</div>
<div role="tabpanel" class="tab-pane" ng-class="{active: data.tab === 'fields'}" id="tabTypeFields">
<div class="form-group">
<label>Tab Text - </label><span class="help-block">the text that appears on the fields tab</span>
<input type="text" class="form-control" name="tTabText" ng-model="type.tabText" style="max-width:200px;" />
</div>
<div class="form-group">
<label>Tab Description - </label><span class="help-block">the short description that appears on the fields tab</span>
<input type="text" class="form-control" name="tTabDesc" ng-model="type.tabDesc" style="max-width:300px;" />
</div>
<div class="buttons" style="margin-top:40px;">
<button type="button" class="btn btn-primary btn-sm" ng-click="showNewField(g)" title="Add a new field to this content type">Add Field</button>
<button type="button" class="btn btn-danger btn-sm" ng-click="removeFields()" ng-disabled="data.fieldCheckCount == 0" title="Remove the checked fields">Remove Fields</button>
</div>
<div ng-if="type.fields && type.fields.length > 0">
<table class="table table-click table-bordered table-striped table-list">
<thead>
<tr>
<th style="width:24px;"><input type="checkbox" ng-model="data.fieldCheckAll" ng-change="checkAllFields()" /></th>
<th style="width:200px;">Name</th>
<th style="width:250px;">Label</th>
<th style="width:120px;">Type</th>
<th>Source</th>
</tr>
</thead>
<tbody ui-sortable="sortableOptions" ng-model="type.fields">
<tr ng-repeat="f in type.fields">
<td><input type="checkbox" ng-model="f.checked" ng-change="checkField(f)" /></td>
<td ng-click="editField(f, $index)">{{f.name}}</td>
<td ng-click="editField(f, $index)">{{f.label}}</td>
<td ng-click="editField(f, $index)">{{f.type}}</td>
<td ng-click="editField(f, $index)">{{f.source}}</td>
</tr>
</tbody>
</table>
</div>
<div ng-if="type.fields == null || type.fields.length == 0">
<div class="alert alert-warning max-width-medium">There are currently no fields on this content type. <a href="javascript:void(0);" ng-click="showNewField()">Create a field.</a></div>
</div>
</div>
<div role="tabpanel" class="tab-pane" ng-class="{active: data.tab === 'inheritance'}" id="tabTypeInheritance">
<div class="sortable-select" list="lists.inheritTypes" textprop="name" idprop="_id" selected="lists.inheritedTypes" style="height:440px;width:700px;"></div>
</div>
<div role="tabpanel" class="tab-pane" ng-class="{active: data.tab === 'templates'}" id="tabTypeTemplates">
<div class="form-group">
<label>Default Template:</label>
<select id="cboDefaultTemplate" class="form-control" name="cboDefaultTemplate" style="width:300px;" ng-model="type.defaultTemplateId" ng-options="a._id as a.name for a in lists.templates">
</select>
</div>
<label>Allowed Templates:</label>
<div class="sortable-select" list="lists.templates" textprop="name" idprop="_id" selected="lists.selectedTemplates" style="height:440px;width:700px;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/ng-template" id="FieldPropsDialog">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true" ng-click="cancel()">×</button>
<h4 class="modal-title">{{data.title}}</h4>
</div>
<div class="modal-body">
<div ng-if="data.message && data.message.length > 0">
<div class="alert {{data.messageType}}">{{data.message}}</div>
</div>
<div class="form-group">
<label for="fieldName">Name</label>
<input type="text" maxlength="20" class="form-control" id="fieldName" name="fieldName" placeholder="Enter a unique field name" ng-model="data.field.name" />
<span class="help-block-sm">*Must be 4-20 characters, start with a letter & contain only letters or numbers.</span>
</div>
<div class="form-group">
<label for="fieldType">Type</label>
<select id="fieldType" class="form-control" name="fieldType" style="width:150px;" ng-model="data.field.type" ng-options="a for a in data.fieldTypes">
</select>
</div>
<div class="form-group">
<label for="fieldLabel">Label</label>
<input type="text" class="form-control" id="fieldLabel" name="fieldLabel" placeholder="Enter the label that will appear above the field" ng-model="data.field.label" />
</div>
<div class="form-group">
<label for="fieldHelp">Help Text</label>
<input type="text" class="form-control" id="fieldHelp" name="fieldHelp" placeholder="Enter some text that describes this field" ng-model="data.field.help" />
</div>
<div class="form-group">
<label for="fieldSource">Source</label>
<input type="text" class="form-control" id="fieldSource" name="fieldSource" placeholder="Enter the data source for the field" ng-model="data.field.source" />
<a href="javascript:void(0);" title="Add an item group as the data source for this field" ng-click="addGroupSource()">Add group source</a>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary min-width" ng-click="ok()">OK</button>
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
</div>
</script>