comanda.component.html 3.46 KB
<div class="container-fluid fade-in p-0">
  <div class="card-columns m-1 fade-in disable-user-select">   
    <div
      *ngFor="let comanda of comandas"
      class="card fade-in rounded-xs shadow-sm"
      [ngClass]="{
        'bg-light': comanda.estado === 1,
        'bg-danger': comanda.estado === 2,
        'bg-success swing-out-top-bck': comanda.estado === 3
      }">
      <div class="card-body p-2">
        <p class="h5 card-title text-center mb-1">{{comanda.id}}.</p>
        <p
          *ngFor="let detalle of comanda.detalles"
          [ngClass]="
          {
            'border-secondary': comanda.estado === 1,
            'border-light': comanda.estado != 1
          }"
          class="card-text border-top pt-2 mb-2">
          <small>
            {{detalle.articulo.DET_LAR}}
          </small>
        </p>
        <button
          *ngIf="comanda.estado === 1"
          class="btn btn-block btn-danger shadow-sm"
          (click)="updateComanda(comanda, 2, 'En elaboracion')">
          Elaborar
        </button>
        <button
          *ngIf="comanda.estado === 2"
          class="btn btn-block btn-success shadow-sm"
          (click)="updateComanda(comanda, 3, 'Terminado')">
          Terminado
        </button>                    
        <button
          *ngIf="comanda.estado === 2"
          class="btn btn-block btn-light btn-sm shadow-sm p-0"
          (click)="updateComanda(comanda, 1, 'Pagado')">
          <span class="pr-1 h6"><small>En espera</small></span>
          <i class="fa fa-undo text-warning" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  </div>
</div>

<!-- <div class="row m-0">
  <div
    [ngClass]="{'swing-out-top-bck': comanda.estado === 3}"
    class="col-2 col-1-5 p-1" *ngFor="let comanda of comandas">
    
    <div
      class="fade-in rounded-xs shadow-sm"
      [ngClass]="
      {
        'bg-light': comanda.estado === 1,
        'bg-danger': comanda.estado === 2,
        'bg-success': comanda.estado === 3
      }">
      <div class="row w-100 m-0">
        <p class="col-12 p-1 mb-2 m-0 h5 text-center">{{comanda.id}}.</p>
        <p
          [ngClass]="
          {
            'border-secondary': comanda.estado === 1,
            'border-light': comanda.estado != 1
          }"
          class="col-12 p-2 mb-2 m-0 h6 border-top">
          <small>
            {{comanda.detalles[0].articulo.DET_LAR}}
          </small>
        </p>
      </div>
      <div class="row w-100 m-0 mb-2 mt-auto">
        <div
          class="col-12 p-2"
          *ngIf="comanda.estado === 1">
          <button
            class="btn btn-block btn-danger shadow-sm"
            (click)="updateComanda(comanda, 2, 'En elaboracion')">
            Elaborar
          </button>
        </div>
        <div
          class="col-12 p-2"
          *ngIf="comanda.estado === 2">
          <button
            class="btn btn-block btn-success shadow-sm"
            (click)="updateComanda(comanda, 3, 'Terminado')">
            Terminado
          </button>
        </div>
      </div>
      <div
        *ngIf="comanda.estado === 2"
        class="row w-100 mx-0 mb-2">
        <div class="col-12 px-2 pb-2">
          <button
            class="btn btn-block btn-light btn-sm shadow-sm p-0"
            (click)="updateComanda(comanda, 1, 'Pagado')">
            <span class="pr-1 h6"><small>En espera</small></span>
            <i class="fa fa-undo text-warning" aria-hidden="true"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div-->