#1 ui/ux for ticket categories

alfio-event · Apr 4, 2019 · 50a4717 · 50a4717
1 parent e65bc8d
commit 50a4717
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 36 deletions.
diff --git a/src/app/event-display/event-display.component.html b/src/app/event-display/event-display.component.html
@@ -33,35 +33,35 @@ <h2 translate="ticket.event-info"></h2>
 
     <h2 translate="show-event.tickets"></h2>
 
-</div>
 
-<div *ngIf="tmpEvent">
-
-  <form [formGroup]="reservationForm" (submit)="submitForm(tmpEvent.event.shortName, reservationForm.value)">
-    <div>
-        <ul class="list-group">
-          <li *ngFor="let category of tmpEvent.ticketCategories;let counter = index" formArrayName="reservation" class="list-group-item">
-              <div [formGroupName]="counter" class="row">
-                  <div class="col-sm-7">
-                    <label>{{category.name}}</label>
-                    <div translate="show-event.sales-end"></div>
-                    <div>{{category.description}}</div>
-                  </div>
-                  <div class="col-sm-3"></div>
-                  <div class="col-sm-2">
-                    <select formControlName="amount" class="form-control">
-                      <option *ngFor="let amount of category.amountOfTickets" [value]="amount">{{amount}}</option>
-                    </select>
-                  </div>
-              </div>
-          </li>
-        </ul>
-    </div>
-    <!--{{reservationForm.value|json}}-->
-    <hr>
-    <div class="row d-flex justify-content-between">
-      <div class="col-md-4 order-1 col-12"><button type="submit" class="block-button btn btn-success" translate="show-event.continue"></button></div>
-      <div class="col-md-4 order-0 col-12 "><a [href]="event.websiteUrl" class="block-button btn btn-outline-dark" translate="to-event-site"></a></div>
-    </div>
-  </form>
+    <div *ngIf="ticketCategories">
+        <form [formGroup]="reservationForm" (submit)="submitForm(event.shortName, reservationForm.value)">
+          <div>
+              <ul class="list-group">
+                <li *ngFor="let category of ticketCategories.categories;let counter = index" formArrayName="reservation" class="list-group-item">
+                    <div [formGroupName]="counter" class="row">
+                        <div class="col-sm-7">
+                          <label>{{category.name}}</label>
+                          <div translate="show-event.sales-end"></div>
+                          <div [innerHtml]="category.description[translate.currentLang]"></div>
+                        </div>
+                        <div class="col-sm-3"></div>
+                        <div class="col-sm-2">
+                          <select formControlName="amount" class="form-control">
+                            <option *ngFor="let amount of category.amountOfTickets" [value]="amount">{{amount}}</option>
+                          </select>
+                        </div>
+                    </div>
+                </li>
+              </ul>
+          </div>
+          <!--{{reservationForm.value|json}}-->
+          <hr>
+          <div class="row d-flex justify-content-between">
+            <div class="col-md-4 order-1 col-12"><button type="submit" class="block-button btn btn-success" translate="show-event.continue"></button></div>
+            <div class="col-md-4 order-0 col-12 "><a [href]="event.websiteUrl" class="block-button btn btn-outline-dark" translate="to-event-site"></a></div>
+          </div>
+        </form>
+      </div>
+
 </div>
diff --git a/src/app/event-display/event-display.component.ts b/src/app/event-display/event-display.component.ts
@@ -5,6 +5,7 @@ import { FormGroup, FormBuilder } from '@angular/forms';
 import { ReservationService } from '../shared/reservation.service';
 import { Event } from '../model/event';
 import { TranslateService } from '@ngx-translate/core';
+import { TicketCategories } from '../model/ticket-categories';
 
 @Component({
   selector: 'app-event-display',
@@ -14,7 +15,7 @@ import { TranslateService } from '@ngx-translate/core';
 export class EventDisplayComponent implements OnInit {
 
   event: Event;
-  tmpEvent: any;
+  ticketCategories: TicketCategories;
   reservationForm: FormGroup;
 
   //https://alligator.io/angular/reactive-forms-formarray-dynamic-fields/
@@ -40,13 +41,13 @@ export class EventDisplayComponent implements OnInit {
         this.reservationForm = this.formBuilder.group({
           reservation: this.formBuilder.array(this.createItems(e))
         });
-        this.tmpEvent = e;
+        this.ticketCategories = e;
       });
     })
   }
 
-  createItems(event): FormGroup[] {
-    return event.ticketCategories.map(category => this.formBuilder.group({ticketCategoryId: category.id, amount: 0}));
+  createItems(ticketCategories: TicketCategories): FormGroup[] {
+    return ticketCategories.categories.map(category => this.formBuilder.group({ticketCategoryId: category.id, amount: 0}));
   }
 
   submitForm(eventShortName, reservation) {

diff --git a/src/app/model/ticket-categories.ts b/src/app/model/ticket-categories.ts
@@ -0,0 +1,11 @@
+export class TicketCategories {
+    categories: TicketCategory[];
+}
+
+
+export class TicketCategory {
+    id: number;
+    name: string;
+    amountOfTickets: number[];
+    description: {[key:string]: string}
+}
diff --git a/src/app/shared/event.service.ts b/src/app/shared/event.service.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from "@angular/common/http";
 import { Observable } from 'rxjs';
 import { Event } from '../model/event'
+import { TicketCategories } from '../model/ticket-categories'
 
 @Injectable({
   providedIn: 'root'
@@ -18,7 +19,7 @@ export class EventService {
     return this.http.get<Event>(`/api/v2/public/event/${eventShortName}`);
   }
 
-  public getEventTicketsInfo(eventShortName: string) : Observable<any> {
-    return this.http.get(`/api/v2/public/tmp/event/${eventShortName}`);
+  public getEventTicketsInfo(eventShortName: string) : Observable<TicketCategories> {
+    return this.http.get<TicketCategories>(`/api/v2/public/event/${eventShortName}/ticket-categories`);
   }
 }