Avoid user to trigger a creation process twice #30 - order creation d…

…ialog
benjaminpochat · Feb 21, 2021 · 0d3071f · 0d3071f
1 parent 4b189f2
commit 0d3071f
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 13 deletions.
diff --git a/ui/src/app/app.component.html b/ui/src/app/app.component.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Viande en Direct</title>
+  <title>Viande en Direct.eu</title>
 </head>
 <body>
   <router-outlet></router-outlet>

diff --git a/ui/src/app/commons/components/main-menu/main-menu.component.html b/ui/src/app/commons/components/main-menu/main-menu.component.html
@@ -4,7 +4,7 @@
       <mat-icon>menu</mat-icon>
     </button>
   </div>
-  <span class="main-menu__text-content"><a href=".">Viande Direct</a></span>
+  <span class="main-menu__text-content"><a href=".">Viande en Direct.eu</a></span>
   <span class="main-menu__spacer"></span>
   <div [hidden]="authentication">
     <button (click)="goToLoginPage()" mat-icon-button aria-label="login">

diff --git a/ui/src/app/customer-area/components/customer-area/customer-area.component.html b/ui/src/app/customer-area/components/customer-area/customer-area.component.html
@@ -5,7 +5,7 @@
   <div class="main-title">
     <div class="main-title__left"></div>
     <div class="main-title__center">
-      Viande en Direct
+      Viande en Direct.eu
     </div>
     <div class="main-title__right"></div>
   </div>

diff --git a/ui/src/app/customer-area/components/order-dialog/order-dialog.component.css b/ui/src/app/customer-area/components/order-dialog/order-dialog.component.css
@@ -36,3 +36,12 @@
 .order__subtitle > div {
   padding-right: 2rem;
 }
+
+.order__confirmation-button{
+  display: flex;
+  align-items: center;
+}
+
+.order__confirmation-button > div {
+  padding-left: 0.5em;
+}
diff --git a/ui/src/app/customer-area/components/order-dialog/order-dialog.component.html b/ui/src/app/customer-area/components/order-dialog/order-dialog.component.html
@@ -9,7 +9,7 @@
 
   <div>
     <mat-vertical-stepper #stepper linear="true">
-      <mat-step [stepControl]="productSelectionForm" [editable]="!orderStored">
+      <mat-step [stepControl]="productSelectionForm" [editable]="!orderStored && !orderUnderProcess">
         <form [formGroup]="productSelectionForm">
           <ng-template matStepLabel>{{productSelectionStepLabel}}</ng-template>
           <div class="order__batches">
@@ -25,7 +25,7 @@
         </form>
       </mat-step>
 
-      <mat-step [stepControl]="authenticationForm" [completed]="authentication" [editable]="!orderStored">
+      <mat-step [stepControl]="authenticationForm" [completed]="authentication" [editable]="!orderStored && !orderUnderProcess">
         <form [formGroup]="authenticationForm">
           <ng-template matStepLabel>{{authenticationStepLabel}}</ng-template>
           <div *ngIf="!authentication">
@@ -150,7 +150,7 @@
         </form>
       </mat-step>
 
-      <mat-step [stepControl]="confirmationForm" [editable]="!orderStored">
+      <mat-step [stepControl]="confirmationForm" [editable]="!orderStored && !orderUnderProcess">
         <form [formGroup]="confirmationForm">
           <ng-template matStepLabel>{{confirmationStepLabel}}</ng-template>
           <div>
@@ -174,17 +174,20 @@
                 <li>respecter la chaîne du froid dès la réception de la marchandise</li>
               </ol>
             </div>
-            <mat-checkbox [disabled]="orderStored" [checked]="understood" (change)="setUnderstood($event.checked)">J'ai compris</mat-checkbox>
+            <mat-checkbox [disabled]="orderStored || orderUnderProcess" [checked]="understood" (change)="setUnderstood($event.checked)">J'ai compris</mat-checkbox>
           </div>
-          <div>
+          <div class="order__confirmation-button">
             <input matInput formControlName="confirmed" hidden="true">
             <button
               mat-flat-button
               color="accent"
-              [disabled]="!understood || orderStored"
+              [disabled]="!understood || orderStored || orderUnderProcess"
               (click)="confirmOrder(); stepper.next();">
                 {{confirmationButtonLabel}}
             </button>
+            <div>
+              <mat-spinner diameter="25" *ngIf="orderUnderProcess"></mat-spinner>
+            </div>
           </div>
         </form>
       </mat-step>

diff --git a/ui/src/app/customer-area/components/order-dialog/order-dialog.component.spec.ts b/ui/src/app/customer-area/components/order-dialog/order-dialog.component.spec.ts
@@ -30,6 +30,7 @@ import { Farm } from 'src/app/commons/models/farm.model';
 import { DeliveryAddress } from 'src/app/commons/models/delivery-address.model';
 import { AuthenticationServiceMock } from 'src/app/commons/services/authentication.service.mock';
 import { Batch } from 'src/app/commons/models/batch.model';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 describe('OrderDialogComponent', () => {
 
@@ -84,7 +85,8 @@ describe('OrderDialogComponent', () => {
         ],
         imports: [
           HttpClientTestingModule,
-          CommonsModule
+          CommonsModule,
+          MatSnackBarModule
         ].concat(
           basicAngularImports,
           materialImports),
@@ -123,7 +125,8 @@ describe('OrderDialogComponent', () => {
         ],
         imports: [
           HttpClientTestingModule,
-          CommonsModule
+          CommonsModule,
+          MatSnackBarModule
         ].concat(
           basicAngularImports,
           materialImports

diff --git a/ui/src/app/customer-area/components/order-dialog/order-dialog.component.ts b/ui/src/app/customer-area/components/order-dialog/order-dialog.component.ts
@@ -11,6 +11,7 @@ import { Order } from 'src/app/commons/models/order.model';
 import { OrderItem } from 'src/app/commons/models/order-item.model';
 import { EventEmitter } from '@angular/core';
 import { OrderStatus } from 'src/app/commons/models/order-status.model';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-order-dialog',
@@ -43,12 +44,14 @@ export class OrderDialogComponent implements OnInit {
   understood = false;
   orderStored = false;
   authenticationSubmitted = false;
+  orderUnderProcess = false;
 
   constructor(
     private authenticationService: AuthenticationService,
     private userService: AccountService,
     private orderService: OrderService,
-    private formBuilder: FormBuilder) {}
+    private formBuilder: FormBuilder,
+    private messageInfo: MatSnackBar) {}
 
   ngOnInit(): void {
     this.initLabels();
@@ -209,9 +212,24 @@ export class OrderDialogComponent implements OnInit {
     this.orderService.saveOrder(this.order).subscribe((order: Order) => {
       this.confirmationStepLabel = 'C\'est validé';
       this.orderStored = true;
+      this.orderUnderProcess = false;
+      this.confirmationButtonLabel = 'La commande est réservée';
+      this.displayConfirmationMessage();
       this.createOrderEvent.emit(this.order);
     });
-    this.confirmationButtonLabel = 'La commande est réservée';
+    this.orderUnderProcess = true;
+    this.confirmationButtonLabel = 'Traitement en cours...';
+  }
+
+  private displayConfirmationMessage() {
+    this.messageInfo.open(
+      'Votre commande est enregistrée. Merci :)',
+      'X',
+      {
+        duration: 3000,
+        horizontalPosition: 'center',
+        verticalPosition: 'top'
+      });
   }
 
   close(){
@@ -221,6 +239,7 @@ export class OrderDialogComponent implements OnInit {
   private resetComponentProperties() {
     this.order = null;
     this.orderStored = false;
+    this.orderUnderProcess = false;
     this.existingAccount = true;
     this.authenticationSubmitted = false;
     this.understood = false;