RomainMarecat/slate

View on GitHub
projects/laboiteasessions/src/app/pages/cart/cart-delivery/cart-delivery.component.html

Summary

Maintainability
Test Coverage
<div class="delivery-wrapper">
 
<form [formGroup]="form"
(ngSubmit)="saveDelivery()">
<div fxLayout="row"
fxLayoutAlign="space-around stretch"
fxLayoutGap="30px"
fxLayoutGap.xs="0px"
fxLayout.xs="row wrap"
fxLayoutAlign.xs="center stretch">
<div formGroupName="address"
fxFlex="45"
fxFlex.xs="100"
fxLayout="column">
<div>
<h2 class="text-ucfirst delivery-title" i18n>
Adresse de livraison
</h2>
</div>
<ng-container *ngIf="true then spacerTmpl">
</ng-container>
 
<ng-template #activableDeliveryFormTmpl>
<div class="form-delivery-wrapper"
fxLayout="column">
<mat-form-field *ngIf="myPreviousDeliveries.length">
<mat-select [attr.name]="'deliveries'"
(selectionChange)="onDeliveryChange($event)"
placeholder="Vos adresses">
<mat-option [value]="null">-</mat-option>
<mat-option [value]="delivery" *ngFor="let delivery of myPreviousDeliveries">
{{ delivery.address.title }}
</mat-option>
</mat-select>
</mat-form-field>
 
<button type="button"
color="primary"
(click)="activeDeliveryAddress()"
mat-raised-button
role="button"
i18n
*ngIf="deliveryConfig.display_add_address_button">
Ajouter une adresse de livraison
</button>
</div>
</ng-template>
 
<div class="form-delivery-wrapper"
fxLayout="column"
fxLayout.xs="row wrap"
fxFlex.xs="100"
*ngIf="isDeliveryAddressFormActive; else activableDeliveryFormTmpl">
<button title="Revenir aux choix de vos adresses"
type="button"
role="button"
(click)="showDeliveryChoice()"
mat-flat-button
color="primary"
fxLayout="row"
fxLayoutAlign="start center">
<mat-icon style="line-height: 24px;" fontSet="fa" fontIcon="fa-undo"></mat-icon>
<span i18n>Revenir aux choix de vos adresses</span>
</button>
 
<mat-form-field appearance="standard"
fxFlex.xs="100">
<input matInput
formControlName="email"
autocomplete="email"
i18n-placeholder="email"
placeholder="email">
</mat-form-field>
<div fxLayout="row"
fxLayoutGap="10px"
fxFlex.xs="100">
<mat-form-field appearance="standard"
fxFlex="50"
fxFlex.xs="45">
<input matInput
formControlName="lastname"
autocomplete="lastname"
i18n-placeholder="nom"
placeholder="nom">
</mat-form-field>
<mat-form-field appearance="standard"
fxFlex="50"
fxFlex.xs="45">
<input matInput
formControlName="firstname"
autocomplete="firstname"
i18n-placeholder="prénom"
placeholder="prénom">
</mat-form-field>
</div>
 
 
<ng-container *ngIf="!isMinimalForm(cart)">
<mat-form-field appearance="standard"
fxFlex.xs="100">
<input matInput
formControlName="address"
autocomplete="address"
i18n-placeholder="adresse"
placeholder="adresse">
</mat-form-field>
 
<mat-form-field appearance="standard"
fxFlex.xs="100">
<input matInput
formControlName="address_complement"
autocomplete="address_complement"
i18n-placeholder="complément d'adresse"
placeholder="complément d'adresse">
</mat-form-field>
 
<div fxLayout="row"
fxFlex.xs="100"
fxLayoutGap="10px">
<mat-form-field appearance="standard"
fxFlex="30">
<input matInput
formControlName="zipcode"
autocomplete="zipcode"
i18n-placeholder="code postal"
placeholder="code postal">
</mat-form-field>
 
<mat-form-field appearance="standard"
fxFlex="30">
<input matInput
formControlName="city"
autocomplete="city"
i18n-placeholder="ville"
placeholder="ville">
</mat-form-field>
display_add_billing_button
 
<mat-form-field appearance="standard"
fxFlex="30">
<input matInput
formControlName="country"
autocomplete="country"
i18n-placeholder="pays"
placeholder="pays">
</mat-form-field>
</div>
</ng-container>
 
</div>
 
 
<div class="delivery-address-choice"
fxLayout="row"
fxLayoutAlign="center stretch"
*ngIf="deliveryConfig.display_address_resume">
<mat-list>
<mat-list-item *ngIf="form.value?.address?.lastname">
{{ form.value?.address?.lastname }} {{ form.value?.address?.firstname }}</mat-list-item>
<mat-list-item *ngIf="form.value?.address?.address">
{{ form.value?.address?.address }} {{ form.value?.address?.address_complement }}</mat-list-item>
<mat-list-item *ngIf="form.value?.address?.zipcode">
{{ form.value?.address?.zipcode }} {{ form.value?.address?.city }}
, {{ form.value?.address?.country }}</mat-list-item>
</mat-list>
</div>
 
</div>
 
 
<div formGroupName="billing"
fxFlex="45"
fxFlex.xs="100"
fxLayout="column">
<div>
<h2 class="text-ucfirst delivery-title"
i18n>
Adresse de facturation
</h2>
</div>
 
<ng-container *ngIf="isDeliveryCompleted(); else spacerTmpl">
<div class="duplicate-wrapper">
<button [title]="'cta.duplicate_same_delivery_as_billing'"
*ngIf="isDeliveryCompleted()"
type="button"
role="button"
(click)="copyDeliveryIntoBilling()"
mat-flat-button
color="primary"
fxLayout="row"
fxLayoutAlign="start center">
<mat-icon style="line-height: 24px;" fontSet="fa" fontIcon="fa-copy"></mat-icon>
<span i18n>C'est aussi l'adresse de facturation</span>
</button>
</div>
</ng-container>
 
<ng-template #spacerTmpl>
<div class="spacer-wrapper">
</div>
</ng-template>
 
<ng-template #activableBillingFormTmpl>
<div class="form-billing-wrapper"
fxLayout="column"
*ngIf="deliveryConfig.display_add_billing_button">
<button type="button"
color="primary"
(click)="activeBillingAddress()"
mat-raised-button
role="button"
i18n>
Ajouter une adresse de facturation
</button>
</div>
</ng-template>
 
<div class="form-delivery-wrapper"
fxLayout="column"
fxLayout.xs="row wrap"
*ngIf="isBillingActivable(); else activableBillingFormTmpl">
<button title="Revenir aux choix de vos adresses"
i18n-title="Revenir aux choix de vos adresses"
type="button"
role="button"
(click)="showBillingChoice()"
mat-flat-button
color="primary"
fxLayout="row"
fxLayoutAlign="start center">
<mat-icon style="line-height: 24px;" fontSet="fa" fontIcon="fa-undo"></mat-icon>
<span i18n>Revenir aux choix de vos adresses</span>
</button>
 
<mat-form-field appearance="standard"
fxFlex.xs="100">
<input matInput
formControlName="email"
autocomplete="email"
i18n-placeholder="email"
placeholder="email">
</mat-form-field>
<div fxLayout="row"
fxLayoutGap="10px"
fxFlex.xs="100">
<mat-form-field appearance="standard"
fxFlex="50"
fxFlex.xs="45">
<input matInput
formControlName="lastname"
autocomplete="lastname"
i18n-placeholder="nom"
placeholder="nom">
</mat-form-field>
<mat-form-field appearance="standard"
fxFlex="50"
fxFlex.xs="45">
<input matInput
formControlName="firstname"
autocomplete="firstname"
i18n-placeholder="prénom"
placeholder="prénom">
</mat-form-field>
</div>
 
<ng-container *ngIf="!isMinimalForm(cart)">
 
<mat-form-field appearance="standard"
fxFlex.xs="100">
<input matInput
formControlName="address"
autocomplete="address"
i18n-placeholder="adresse"
placeholder="adresse">
</mat-form-field>
 
<mat-form-field appearance="standard"
fxFlex.xs="100">
<input matInput
formControlName="address_complement"
autocomplete="address_complement"
i18n-placeholder="complément d'adresse"
placeholder="complément d'adresse">
</mat-form-field>
 
<div fxLayout="row"
fxLayoutGap="10px"
fxFlex.xs="100">
<mat-form-field appearance="standard"
fxFlex="30">
<input matInput
formControlName="zipcode"
autocomplete="zipcode"
i18n-placeholder="code postal"
placeholder="code postal">
</mat-form-field>
 
<mat-form-field appearance="standard"
fxFlex="40"
fxFlex.xs="30">
<input matInput
formControlName="city"
autocomplete="city"
i18n-placeholder="ville"
placeholder="ville">
</mat-form-field>
 
<mat-form-field appearance="standard"
fxFlex="30">
<input matInput
formControlName="country"
autocomplete="country"
i18n-placeholder="pays"
placeholder="pays">
</mat-form-field>
</div>
</ng-container>
</div>
 
<div class="spacer-select-wrapper"
*ngIf="deliveryConfig.display_billing_resume">
</div>
 
<div class="delivery-billing-choice"
fxLayout="row"
fxLayoutAlign="center stretch"
*ngIf="deliveryConfig.display_billing_resume">
<mat-list>
<mat-list-item *ngIf="form.value?.billing?.lastname">
{{ form.value?.billing?.lastname }} {{ form.value?.billing?.firstname }}</mat-list-item>
<mat-list-item *ngIf="form.value?.billing?.address">
{{ form.value?.billing?.address }} {{ form.value?.billing?.address_complement }}</mat-list-item>
<mat-list-item *ngIf="form.value?.billing?.zipcode">
{{ form.value?.billing?.zipcode }} {{ form.value?.billing?.city }}
, {{ form.value?.billing?.country }}</mat-list-item>
</mat-list>
</div>
</div>
</div>
 
<div class="actions-wrapper"
fxLayout="row"
fxLayoutAlign="space-around stretch">
<button type="button"
class="text-uppercase"
role="button"
mat-raised-button
title="Annuler"
i18n-title="Annuler"
(click)="cancel()"
[disabled]="disableDeliveryButton">
Annuler
</button>
<button type="submit"
class="text-uppercase"
role="button"
title="Valider la livraison"
i18n-title="Valider la livraison"
[color]="!disableDeliveryButton ? 'primary' : ''"
mat-button
mat-raised-button
[disabled]="disableDeliveryButton || form.invalid">
Valider la livraison
</button>
</div>
</form>
</div>