XJC/src/app/components/admin/list-carte-envoyer/list-carte-envoyer.component.html

<app-nav-admin></app-nav-admin>
<div class="container">

  <div class="col-md-12" id="listeCartePart1">
    <button class="btn btn-default btn-rounded waves-light" (click)="goToOpComAdmin()">Retour</button>
    <h4 class="font-up mb-5 mt-1 font-bold wow fadeInDown text-center" style="padding-top: 5%;">Aperçu de votre opération commerciale</h4>
    <div class="card mainCard wow fadeInLeft">
      <div class="row no-margin" id="testt">
        <div class="col-md-6 d-flex flex-column " id="subCard1">
          <img src="{{opComm?.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">{{opComm?.commercantOpCom.commercialName}}</p></div>
            <div class="merchant-logo" [ngStyle]="{ 'background-image': 'url(' + opComm?.commercantOpCom.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">{{opComm?.name}}</p></div>
            <div class="operation-id flex-center"><p class="white-text info-text font-bold">{{opComm?.uid}}</p></div>
          </div>
        </div>
        <div class="col-md-6 card subCard2">
          <div class="card-block row no-margin">
            <div class="col-md-12" id="subCard2Part1">
              <div id="opTitle">
                <label>Operation Commerciale: {{opComm?.name}}</label>
              </div>
              <div id="opAvantages">
                <label>Avantage parrain: {{opComm?.avantageParrain === ''? '0' : opComm?.avantageParrain}} €</label>
                <label>Avantage filleul: {{opComm?.avantageFilleul === ''? '0' : opComm?.avantageFilleul}} €</label>
              </div>
              <div id="opLogs">
                <label>Carte(s) envoyée(s): {{opComm?.nbEnvoie  === ''? '0' : opComm?.nbEnvoie}}</label>
                <label>Carte(s) scannée(s): {{opComm?.nbScan === ''? '0' : opComm?.nbScan}}</label>
                <label>Carte(s) débitée(s): {{opComm?.nbDebiter  === ''? '0' : opComm?.nbDebiter}}</label>
              </div>
            </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="opComm?.validationXJC == 'Validé'" style="color:#00C851; margin-bottom: 0">{{opComm?.validationXJC}}</label>
            <label class="font-bold" *ngIf="opComm?.validationXJC == 'En Cours'" style="color:#ffbb33; margin-bottom: 0">{{opComm?.validationXJC}}</label>
            <label class="font-bold" *ngIf="opComm?.validationXJC == 'Rejeté'" style="color:#ff4444; margin-bottom: 0">{{opComm?.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="opComm?.status == 'Active'" style="color:#00C851; margin-bottom: 0">{{opComm?.status}}</label>
            <label class="font-bold" *ngIf="opComm?.status == 'Inactive'" style="color:#ffbb33; margin-bottom: 0">{{opComm?.status}}</label>
            <label class="font-bold" *ngIf="opComm?.status == 'Bloqué'" style="color:#ff4444; margin-bottom: 0">{{opComm?.status}}</label>
          </li>
          <li class="float-left"><i class="fa fa-clock-o"></i>Valable du {{opComm?.dateDebut | date:'dd/MM/yyyy'}} au {{opComm?.dateFin | date:'dd/MM/yyyy'}}</li>
        </ul>
      </div>
      <!-- Card footer -->
    </div>
  </div>

  <hr>
  <div class="col-md-12" id="listeCartePart2">
    <h4 class="mb-5 mt-1 font-bold wow fadeInDown text-center" style="padding-top: 5%;">Liste des cartes de parrainages issues de l'opération commerciale ci-dessus : {{opComm?.name}} ({{(carteParList | async)?.length}})</h4>
    <div class="list-group wow fadeInLeftBig">
      <div class="card mainCard" *ngFor="let crt of carteParList | async">
        <div class="row no-margin">
          <img class="col-md-6 card-image subCard1" id="image1" src={{crt.carteTemplate.downloadURL}}>
          <!--<div class="col-md-6 card-image mb-1 subCard1" [ngStyle]="{ 'background-image': 'url(' + crt.carteTemplate.downloadURL + ')'}">

            <div class="view">
              <div class="row firstRow">
                <div *ngIf="commercant !== undefined" >
                  <div class="col-md-6 flex-center card-block cardPart1"></div>
                  <div class="col-md-6 flex-center card-block card-image mb-1 cardPart2">
                    <p></p>
                  </div>
                </div>
              </div>
              <div class="row secondRow">
                <div class="col-md-6 flex-center cardPart3"><p></p></div>
                <div class="col-md-6 flex-center cardPart4"><p></p></div>
              </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">
                <label>ID de la carte: {{crt.uid}}</label>
                <label>Avantage Cumule: {{crt.avantageCumule === ''? '0' : crt.avantageCumule}} €</label>
                <label>Avantage Recuperer: {{crt.avantageRecuperer === ''? '0' : crt.avantageRecuperer}} €</label>
              </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" (click)="hideme[i] = !hideme[i]">{{show ? 'Cacher Détails' : 'Détails'}}</button>
              </div>
            </div>
          </div>
        </div>
        <!-- Card footer -->
        <div class="card-data" id="footerCard">
          <ul>
            <li class="float-right"><i class="fa fa-info-circle" aria-hidden="true"></i>Statut:
              <label class="font-bold" *ngIf="crt.status == 'Active'" style="color:#00C851; margin-bottom: 0">{{crt.status}}</label>
              <label class="font-bold" *ngIf="crt.status == 'Inactive'" style="color:#ffbb33; margin-bottom: 0">{{crt.status}}</label>
              <label class="font-bold" *ngIf="crt.status == 'Bloqué'" style="color:#ff4444; margin-bottom: 0">{{crt.status}}</label>
            </li>
            <li class="float-left"><i class="fa fa-clock-o"></i>Valable du {{crt.dateDebut | date:'dd/MM/yyyy'}} au {{crt.dateFin | date:'dd/MM/yyyy'}}</li>
          </ul>
        </div>
        <!-- Card footer -->
        <div class="card" [hidden]="!hideme[i]" style="height:20rem; overflow-y: auto;">
          <div class="card-body">
            <ul class="list-group wow fadeInDown">
              <p class="font-weight-normal" style="padding-top: 2%" *ngIf="crt.historique === undefined">Aucune opération n'a été effectuée sur cette carte !</p>
              <li class="list-group-item justify-content-between align-items-center" *ngFor="let hst of crt.historique">
                <p class="font-weight-normal" style="padding-top: 2%">{{hst}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>