cmsmon/frontend/components/cms-admin/tpl.html

<div class="cms-wrapper animated fadeInRight cms-sidebar cms">
    <button type="button" class="btn btn-sm btn-white cms-close-position"
            ng-click="cancel()">
        <i class="fa fa-times"></i>
    </button>

    <br>
    <div class="row">
        <div class="col-xs-3 cms-panel">
            <div class="panel panel-primary">
                <div class="panel-heading">Types</div>
                <div class="panel-body">
                    <div js-tree="treeConfig" ng-model="tree"
                         tree-events="changed:selectNode" tree="treeInstance"></div>
                </div>
            </div>
        </div>
        <div class="col-xs-9 cms-panel">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="cms-admin-right-panel">
                        <label style="color: white"> {{'Show' | translate}} : </label>

                        <ui-select style="min-width: 50px;margin-left: 10px;margin-right: 10px;"
                                   class="cms-select" data-ng-model="page.limit" theme="bootstrap"
                                   on-select="refresh()">
                            <ui-select-match placeholder="">{{$select.selected}}&nbsp;&nbsp;</ui-select-match>
                            <ui-select-choices data-repeat="item in [10,25,50,100,200]">{{item}}</ui-select-choices>
                        </ui-select>

                        <ui-select style="min-width: 60px;margin-left: 10px;margin-right: 10px;"
                                   class="cms-select" data-ng-model="showAs.type" theme="bootstrap"
                                   on-select="refresh()">
                            <ui-select-match placeholder="">
                                {{$select.selected.label}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</ui-select-match>
                            <ui-select-choices
                                    data-repeat="item.value as item in [{value:'list',label:'List'},{value:'table',label:'Table'},{value:'element',label:'Element'}]">
                                {{item.label}}
                            </ui-select-choices>
                        </ui-select>

                        <div class="btn-group btn-group-xs" style="margin-top: -12px;margin-right: 10px;">
                            <button type="button" class="btn btn-white" ng-click="setting()">{{'Setting' | translate}}
                            </button>
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu" role="menu" style="z-index: 10000 !important;">
                                <li><a href ng-click="deleteAll()">{{'DeleteAll' | translate}}</a></li>
                                <li><a href ng-click="import()">Import</a></li>
                                <li><a href ng-click="export()">Export</a></li>

                            </ul>
                        </div>

                        <button class="btn btn-white btn-xs" ng-click="add()">
                            {{'Add' | translate}}
                        </button>

                    </div>

                    <input type="text" class="form-control input-xs"
                           style="margin-left: 10px;width: 100px;display: inline-block;"
                           ng-model="search.text" ng-model-options="{debounce: 300}" placeholder="search ...">

                    <div ng-if="queries && queries.length > 0">
                        <hr style="margin-top: 10px;margin-bottom: 5px;">

                        <div class="cms-admin-heading-form" style="height: 60px;">
                            <formly-form ng-repeat="query in queries track by $index" model="query.model" fields="query.form"
                                         form="form"
                                         options="options">
                            </formly-form>
                        </div>
                    </div>

                </div>
                <div class="panel-body" ng-if="node">

                    <div style="width: 100%;overflow-x: auto" ng-if="showAs.type === 'table'">
                        <table class="table cms-admin-table">
                            <thead>
                            <tr>
                                <th ng-repeat="col in node.columns track by $index" ng-bind="col.label"></th>
                                <th>Edit</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr ng-repeat="element in data.list track by $index">
                                <td ng-repeat="col in node.columns track by $index">
                                <span cms-direct-editable="model.{{col.value}}"
                                      cms-value="element[col.value]"
                                      cms-ref="{{element._id}}"
                                      cms-type="{{node.type}}"></span>
                                </td>
                                <td>
                                    <div cms-editor="{ref: element._id, type: node.type}"
                                         cms-remove="remove(element)"></div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <div ng-show="data.loading">
                        <img src="/build/images/ajax-loader.gif">
                    </div>

                    <div class="cms-panel-list-content" ng-if="showAs.type === 'list'">
                        <div ng-repeat="element in data.list track by $index"
                             ng-class="elementClass"
                             cms-element="{ref: element._id, type: node.type, containers: {}}"
                             dnd-moved="remove(element)"
                             inline="false"></div>
                    </div>

                    <div class="" ng-if="showAs.type === 'element'">
                        <button class="btn cms-btn btn-primary btn-outline btn-xs" style="margin-right: 10px;"
                                ng-repeat="e in data.list track by $index"
                                ng-click="selectElement(e._id);" ng-show="data.list.length > 1">
                            {{getTitle(node.type, e._id)}}
                        </button>
                        <div ng-show="data.list.length > 1">
                            <br><br>
                        </div>

                        <div ng-if="element._id"
                             cms-element="{ref: element._id, type: node.type, containers: {}}"
                             inline="false"></div>
                    </div>

                    <div class="clearfix"></div>

                    <ul uib-pagination
                        ng-show="page.size > 1"
                        total-items="page.size"
                        ng-model="page.currentPage"
                        class="pagination-sm"
                        items-per-page="page.limit"
                        ng-change="refresh(true)"
                        max-size="10"
                        boundary-link-numbers="true"></ul>
                </div>
            </div>
        </div>
    </div>

</div>