UNPKG

sheercms

Version:

Sheer Cliff CMS is a simple and powerful content management system (CMS) for Node JS.

250 lines (221 loc) 14.8 kB
<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 -&nbsp;</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 -&nbsp;</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 -&nbsp;</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 -&nbsp;</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()">&times;</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 &amp; 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>