zettapi_client/lib/directives/container/container.html

Admin panel and client-side CRUD operations in angular to use with zettapi_server rest api to get started quickly in any CMS project.

<div class="panel panel-default" ng-init="collapse = (item[var] ? item[var].length > 0 : false)">
  <div class="panel-heading">
    <div class="row">
      <div class="col-sm-8">
        <h6>{{label}} <span class="badge" ng-if="item[var]">{{item[var].length}}</span></h6>
      </div>
      <div class="col-sm-4 text-right">
        <button type="button" ng-click="collapse = !collapse" class="btn btn-default btn-xs">
          <i class="fa fa-caret-{{collapse ? 'down' : 'up'}}"></i> {{collapse ? "Ver mais" : "Ver menos"}}
        </button>
      </div>
    </div>
  </div>

  <div class="panel-body" ng-show="!collapse">
    <div class="row" ng-if="!noInsert">
      <div class="col-sm-9">
        <div ng-include="'container/' + var + '/' + var + '.new.html'"></div>
      </div>
      <div class="col-sm-3 text-right">
        <console></console>

        <button type="button" ng-show="!console" ng-click="append(newContainerItem)" ng-disabled="validate(newContainerItem)" class="btn btn-sm btn-primary"
          style="margin-top:30px;"><i class="fa fa-plus" aria-hidden="true"></i> Adicionar {{label}}</button>
      </div>
    </div>

    <div class="row">
      <div ng-if="isVisible ? isVisible(containerItem) : true" ng-repeat="containerItem in item[var] track by $index" class="col-sm-3 col-xs-6 text-center">
        <div class="customitem well">
          <div ng-include="'container/' + var + '/' + var + '.view.html'"></div>

          <button type="button" ng-if="isMovable" class="btn btn-xs btn-default" ng-disabled="$index === 0" ng-click="pushBack($index)"><span class="fa fa-arrow-left"></span></button>

          <button type="button" class="btn btn-danger btn-xs" ng-disabled="!removable" ng-click="remove(containerItem)"><i class="fa fa-trash-o" aria-hidden="true"></i></button>

          <button type="button" ng-if="isMovable" class="btn btn-xs btn-default" ng-disabled="$index === item[var].length - 1" ng-click="pushForward($index)"><span class="fa fa-arrow-right"></span></button>
        </div>
      </div>

      <div class="col-sm-12" ng-if="(!item[var] || item[var].length === 0)">
        <p>Não existem {{label}}</p>
      </div>
    </div>
  </div>
</div>