[fix] Movie ticket service view fix

src/app/home/cinema/movie-service/movie-service.component.html

@@ -4,61 +4,66 @@
 </div>
 
 <mat-accordion [multi]="true" *ngIf="movieOrders?.length != 0">
-  <mat-expansion-panel *ngFor="let movieOrder of movieOrders" [expanded]="movieOrder.getTicketOrders().length != 0">
+  <mat-expansion-panel
+    *ngFor="let movieOrder of movieOrders"
+    [expanded]="movieOrder.getTicketOrders().length != 0"
+    id="movie-order-print-{{ movieOrder.movieID }}"
+  >
     <mat-expansion-panel-header>
-      <mat-panel-title>{{ movieOrder.date | date: 'dd.MM' }} | {{ movieOrder.movieName }}</mat-panel-title>
-      <mat-panel-description *ngIf="movieOrder.getTicketOrders().length != 0">
+      <mat-panel-title>{{ movieOrder.date | date: 'EE, dd.MM' }} - {{ movieOrder.movieName }}</mat-panel-title>
+    </mat-expansion-panel-header>
+
+    <div fxLayout="row" fxLayoutAlign="space-between">
+      <span *ngIf="movieOrder.getTicketOrders().length != 0">
         {{ 'CINEMA_TICKETS_SERVICE_BOOKING' | translate }}: {{ movieOrder.getTicketOrders().length }}
-      </mat-panel-description>
-      <mat-panel-description *ngIf="movieOrder.getTicketOrders().length == 0">
+      </span>
+      <span *ngIf="movieOrder.getTicketOrders().length == 0">
         {{ 'CINEMA_TICKETS_SERVICE_NO_TICKETS_BOOKED' | translate }}
-      </mat-panel-description>
-    </mat-expansion-panel-header>
+      </span>
 
-    <div fxLayout="row" fxLayoutAlign="end">
-      <button
-        mat-flat-button
-        color="accent"
-        printSectionId="movie-order-print-{{ movieOrder.movieID }}"
-        ngxPrint
-        [useExistingCss]="true"
-        printTitle="{{ movieOrder.movieName }}"
-      >
-        <mat-icon>print</mat-icon>
-        {{ 'PRINT' | translate }}
-      </button>
+      <div>
+        <button
+          mat-flat-button
+          color="accent"
+          printSectionId="movie-order-print-{{ movieOrder.movieID }}"
+          ngxPrint
+          [useExistingCss]="true"
+          printTitle="{{ movieOrder.movieName }}"
+        >
+          <mat-icon>print</mat-icon>
+          {{ 'PRINT' | translate }}
+        </button>
+      </div>
     </div>
 
-    <div id="movie-order-print-{{ movieOrder.movieID }}">
-      <mat-list *ngIf="movieOrder.getTicketOrders().length == 0">
-        <mat-list-item>
-          {{ 'CINEMA_TICKETS_SERVICE_NO_TICKETS_BOOKED' | translate }}
-        </mat-list-item>
-      </mat-list>
+    <mat-list *ngIf="movieOrder.getTicketOrders().length == 0">
+      <mat-list-item>
+        {{ 'CINEMA_TICKETS_SERVICE_NO_TICKETS_BOOKED' | translate }}
+      </mat-list-item>
+    </mat-list>
 
-      <mat-list *ngIf="movieOrder.getTicketOrders().length != 0">
-        <mat-list-item>
-          <div matLine>
-            {{ 'CINEMA_TICKETS_SERVICE_USERNAME' | translate }}
-            <div style="float: right">{{ 'CINEMA_TICKETS_SERVICE_TICKET_AMOUNT' | translate }}</div>
+    <mat-list *ngIf="movieOrder.getTicketOrders().length != 0">
+      <mat-list-item>
+        <div matLine>
+          {{ 'CINEMA_TICKETS_SERVICE_USERNAME' | translate }}
+          <div style="float: right">{{ 'CINEMA_TICKETS_SERVICE_TICKET_AMOUNT' | translate }}</div>
+        </div>
+      </mat-list-item>
+      <mat-list-item *ngFor="let ticket of movieOrder.getTicketOrders()">
+        <div matLine>
+          {{ ticket.userName }}
+          <div style="float: right">{{ ticket.amount }}</div>
+        </div>
+      </mat-list-item>
+      <mat-list-item>
+        <div matLine>
+          <b>{{ 'CINEMA_TICKETS_BOOKED_TICKETS' | translate }}</b>
+          <div style="float: right">
+            <b>{{ movieOrder.getBookedTicketsAmount() }}</b>
           </div>
-        </mat-list-item>
-        <mat-list-item *ngFor="let ticket of movieOrder.getTicketOrders()">
-          <div matLine>
-            {{ ticket.userName }}
-            <div style="float: right">{{ ticket.amount }}</div>
-          </div>
-        </mat-list-item>
-        <mat-list-item>
-          <div matLine>
-            <b>{{ 'CINEMA_TICKETS_BOOKED_TICKETS' | translate }}</b>
-            <div style="float: right">
-              <b>{{ movieOrder.getBookedTicketsAmount() }}</b>
-            </div>
-          </div>
-        </mat-list-item>
-      </mat-list>
-    </div>
+        </div>
+      </mat-list-item>
+    </mat-list>
   </mat-expansion-panel>
 </mat-accordion>