XJC/src/app/components/opCommercial/op-commercial/op-commercial.component.html

<div class="container">

  <!--
<ul>
  <li *ngFor="let op of opCommData | async">
    Operation Commerciale: {{op.name}}
  </li>
</ul>
<button (click)="goToCreaOpCom()">Nouvelle opération Commercial</button>
<button (click)="goToProfil()">Back</button>
-->
  <app-nav-commercant></app-nav-commercant>

  <h4 class="mb-5 mt-1 font-bold wow fadeInDown text-center" style="padding-top: 5%;">Operations commerciales ({{(opCommData | async)?.length}})</h4>
  <div class="topButtons col-md-12" style="padding-top: 2%;">
    <div class="btnCreerOp">
      <button class="btn btn-primary btn-rounded waves-light" tooltip="Création d'une nouvelle opération commerciale" placement="top" id="nouvelleOp" (click)="goToCreaOpCom()"><i class="fa fa-plus-circle ml-1 mr-3"></i>Nouvelle opération commerciale</button>

      <!--<button class="btn btn-primary btn-rounded waves-light" (click)="goToCarteEnvoyer()">Historique carte envoyer</button>-->
      <!--<button class="btn btn-default btn-rounded waves-light" (click)="goToProfil()">Profil</button>-->
    </div>
    <div *ngIf="(opCommData | async)?.length != 0" class="btnFiltre">
      <div class="dropdown" dropdown>
        <button dropdownToggle type="button" class="btn btn-info btn-rounded dropdown-toggle waves-light" mdbRippleRadius>
          Filtres
        </button>

        <div class="dropdown-menu">
          <a class="dropdown-item" id="opActive" (click)="activeOP('Active')">Actives</a>
          <a class="dropdown-item" id="opToutes" (click)="activeOP('Toutes')">Toutes</a>
          <a class="dropdown-item" id="opBloqué" (click)="activeOP('Bloqué')">Bloquées</a>
          <a class="dropdown-item" id="opInactive" (click)="activeOP('Inactive')">Inactives</a>
        </div>
      </div>
    </div>
  </div>

  <div *ngIf="(opCommData | async)?.length == 0"  class="alert alert-info">
    Cher,<strong><i> {{commercant.commercialName}} </i></strong>
    <p>Le principe est simple :</p>
    <ul>
      <li> Crées tes opérations commerciales ici</li>
      <li> Envoie-les à tes clients, ils deviendront tes parrains affiliés</li>
      <li> Gagne des clients à chaque fois qu'un de tes parrains envoie sa carte à ses amis</li>
    </ul>
    <p>N'attends plus, crées tes opérations commerciale et envoie les aux futurs parrains affiliés de ton choix !</p>
  </div>
  <div class="list-group wow fadeInUpBig">
    <div *ngFor="let op of opCommData | async">
      <div class="card mainCard" *ngIf="(op.status == statutAffiche) || (statutAffiche == 'Toutes')">
        <div class="row no-margin" id="testt">
          <div class="col-md-6 d-flex flex-column " id="subCard1">
            <img src="{{op.carteTemplate.downloadURL}}" id="image1" class="img-fluid mx-auto d-block flex-center card-img-overlay" alt="Responsive image">
            <div class="subCard1-row d-flex flex-row">
              <div class="merchant-name d-flex flex-center"><p class="white-text info-text font-bold text-center">{{commercant.commercialName}}</p></div>
              <div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + commercant.image.downloadURL + ')'}">

              </div>
            </div>
            <div class="subCard1-row d-flex flex-row">
              <div class="operation-data flex-center"><p class="white-text info-text font-bold">{{op.name}}</p></div>
              <div class="operation-id flex-center"><p class="white-text info-text font-bold"></p></div>
            </div>
          </div>
          <div class="col-md-6 card subCard2">
            <div class="card-block no-margin">
              <div class="col-md-12 col-sm-12" id="subCard2Part1">
                <div id="opTitle">
                  <label>Operation Commerciale : {{op.name}}</label>
                </div>
                <div id="opAvantages">
                  <p *ngIf="op.avantageParrain == ''"></p>
                  <label>Avantage parrain : {{op.avantageParrain === ''? '0' : op.avantageParrain}} €</label>
                  <label>Avantage filleul : {{op.avantageFilleul === ''? '0' : op.avantageFilleul}} €</label>
                </div>
                <div id="opLogs">
                  <label>Carte(s) envoyée(s): {{op.nbEnvoie  === ''? '0' : op.nbEnvoie}}</label>
                  <label>Carte(s) scannée(s): {{op.nbScan === ''? '0' : op.nbScan}}</label>
                  <label>Carte(s) débitée(s): {{op.nbDebiter === ''? '0' : op.nbDebiter}}</label>
                </div>
              </div>
              <div class="btn-block d-flex flex-lg-row flex-md-column flex-sm-row" id="subCard2Part2">
                <button class="btn btn-outline-primary btn-rounded" tooltip="Envoyer une nouvelle carte de parrainage à un parrain affilié ou un nouveau parrain" placement="top" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'Rejeté') || (op.status === 'Bloqué') || (op.status === 'Inactive')" (click)="goToEnCart(op.uid)"><i class="fa fa-send-o" aria-hidden="true"></i>Envoyer</button>
                <button class="btn btn-outline-default btn-rounded" tooltip="Scanner la carte de parrainage d'un filleul" placement="top" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'Rejeté') || (op.status === 'Bloqué') || (op.status === 'Inactive')" (click)="goToScanCart(op.uid)"><i class="fa fa-shopping-basket ml-1"></i>Scanner</button>
                <button class="btn btn-outline-info btn-rounded" tooltip="Débiter la carte de parrainage d'un parrain affilié" placement="top" [disabled]="(op.validationXJC === 'En Cours') || (op.validationXJC === 'Rejeté')" (click)="goToDebiterCart(op.uid)"><i class="fa fa-pie-chart ml-1"></i>Débiter</button>
              </div>
            </div>
          </div>
        </div>
        <!-- Card footer -->
        <div class="card-data" id="footerCard">
          <ul>
            <li class="float-right"><i class="fa fa-check-square-o" aria-hidden="true"></i>Validation:
              <label class="font-bold" *ngIf="op.validationXJC == 'Validé'" style="color:#00C851; margin-bottom: 0">{{op.validationXJC}}</label>
              <label class="font-bold" *ngIf="op.validationXJC == 'En Cours'" style="color:#ffbb33; margin-bottom: 0">{{op.validationXJC}}</label>
              <label class="font-bold" *ngIf="op.validationXJC == 'Rejeté'" style="color:#ff4444; margin-bottom: 0">{{op.validationXJC}}</label>
            </li>
            <li class="float-right" style="padding-right: 2%"><i class="fa fa-info-circle" aria-hidden="true"></i>Statut:
              <label class="font-bold" *ngIf="op.status == 'Active'" style="color:#00C851; margin-bottom: 0">{{op.status}}</label>
              <label class="font-bold" *ngIf="op.status == 'Inactive'" style="color:#ffbb33; margin-bottom: 0">{{op.status}}</label>
              <label class="font-bold" *ngIf="op.status == 'Bloqué'" style="color:#ff4444; margin-bottom: 0">{{op.status}}</label>
            </li>
            <li class="float-left"><i class="fa fa-clock-o"></i>Valable du {{op.dateDebut | date:'dd/MM/yyyy'}} au {{op.dateFin | date:'dd/MM/yyyy'}}</li>
          </ul>
        </div>
      </div>
      <!-- Card footer -->
    </div>
  </div>
</div>