Merge branch 'service-page-rework' into 'master'

small page rework

See merge request !1

src/app/app.module.ts

-import { NgModule } from '@angular/core';
+import { LOCALE_ID, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
 import { AppComponent } from './app.component';
@@ -19,6 +19,9 @@ import { ServiceInListComponent } from './core/service-in-list/service-in-list.c
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { LoaderComponent } from './shared/loader/loader.component';
 import { ErrorDialogComponent } from './shared/error-dialog/error-dialog.component';
+import { registerLocaleData } from '@angular/common';
+import localeHu from '@angular/common/locales/hu';
+registerLocaleData(localeHu, 'hu');
 
 @NgModule({
   declarations: [
@@ -41,7 +44,8 @@ import { ErrorDialogComponent } from './shared/error-dialog/error-dialog.compone
       provide: HTTP_INTERCEPTORS,
       useClass: ErrorInterceptor,
       multi: true,
-    }
+    },
+    { provide: LOCALE_ID, useValue: 'hu'}
   ],
   bootstrap: [AppComponent],
 })

src/app/core/service-detail/service-detail.component.html

@@ -75,6 +75,14 @@
       <h5 class='base_container_header'>
         Története
       </h5>
+      <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Descending && !isLoggedIn'
+              (click)='toggleHistoryOrder(historyOrderState.Ascending)'>
+        ↑
+      </button>
+      <button class='btn' *ngIf='currentHistoryOrderState === historyOrderState.Ascending && !isLoggedIn'
+              (click)='toggleHistoryOrder(historyOrderState.Descending)'>
+        ↓
+      </button>
       <button class='btn btn-link' *ngIf='isLoggedIn'
               (click)='updateState(serviceDetailComponentState.CREATE_HISTORY)'>
         Új hozzáadása
@@ -136,14 +144,21 @@
     <div class='border-top mt-3 pt-3' *ngIf='!service.history'>
       Nincs
     </div>
-    <div class='border-top mt-3 pt-3' *ngFor='let history of service.history; TrackBy: trackById'>
-      <div>
-        {{history.createdAt | date: "full"}}
-      </div>
+    <div class='border-top mt-3 pt-3 d-flex flex-row align-items-center'
+          *ngFor='let history of sortByCreation(service.history, currentHistoryOrderState); TrackBy: trackById'>
       <div>
         {{history.description}}
       </div>
-
+      <div class="container">
+        <div class="row justify-content-end">
+          <div class="col-md-100 p-1" style="white-space: nowrap;">
+            {{history.createdAt | date: 'yyyy. MMM dd.'}}
+          </div>
+          <div class="col-md-100 p-1" style="white-space: nowrap;">
+            {{history.createdAt | date: 'hh:mm:ss'}}
+          </div>
+        </div>
+      </div>
       <button class='btn btn-link' *ngIf='isLoggedIn'
               (click)='updateState(serviceDetailComponentState.EDIT_HISTORY, history.id)'>Szerkesztés
       </button>

src/app/core/service-detail/service-detail.component.ts

@@ -21,6 +21,14 @@ export enum ServiceDetailComponentState {
   DELETE_HISTORY,
 }
 
+/**
+ * States of history ordering
+ */
+export enum HistoryOrderState {
+  Ascending,
+  Descending
+}
+
 /**
  * Detail component of a service
  */
@@ -95,6 +103,16 @@ export class ServiceDetailComponent implements OnInit {
     description: new FormControl('', [Validators.required]),
   });
 
+  /**
+   * History order state
+   */
+  historyOrderState = HistoryOrderState;
+
+  /**
+   * Current state of history ordering 
+   */
+  currentHistoryOrderState: HistoryOrderState = HistoryOrderState.Descending;
+
   constructor(
     private route: ActivatedRoute,
     private router: Router,
@@ -130,6 +148,32 @@ export class ServiceDetailComponent implements OnInit {
     return item.id;
   }
 
+  /**
+   * Sort history by creation date
+   * @param history unsorted history
+   * @param order sorting direction
+   * @returns sorted history
+   */
+  private sortByCreation(history: History[], order: HistoryOrderState): History[] {
+    if (order === this.historyOrderState.Ascending) {
+      return history.sort((a, b) => a.createdAt > b.createdAt ? 1 : a.createdAt === b.createdAt ? 0 : -1);
+    }
+    else if (order === this.historyOrderState.Descending) {
+      return history.sort((a, b) => a.createdAt < b.createdAt ? 1 : a.createdAt === b.createdAt ? 0 : -1);
+    }
+    else {
+      throw new Error("Unexpected history order");
+    }
+  }
+
+  /**
+   * Toggle history order
+   * @param newOrder new ordering of history
+   */
+  private toggleHistoryOrder(newOrder: HistoryOrderState) {
+    this.currentHistoryOrderState = newOrder;
+  }
+
   /**
    * Update the current state of the component
    * @param newState the new State