From 04656950cb99a9de69cb610dfc74ea6b16289316 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Tue, 15 Oct 2019 12:20:21 +0200
Subject: [PATCH] Add custom date pipe

Adds a custom date pipe and use it on the projector
The date pipe accepts unix time, can automatically adjust date to the current language and supports custom formatting using "moment.js" formatting options

Also fixes a minor translate-tag error
---
 .../sort-filter-bar.component.html            |  4 +--
 .../shared/pipes/localized-date.pipe.spec.ts  | 20 +++++++++++++++
 .../app/shared/pipes/localized-date.pipe.ts   | 25 +++++++++++++++++++
 client/src/app/shared/shared.module.ts        | 10 +++++---
 4 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 client/src/app/shared/pipes/localized-date.pipe.spec.ts
 create mode 100644 client/src/app/shared/pipes/localized-date.pipe.ts

diff --git a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html
index 476ff4b5a..6f3e0c178 100644
--- a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html
+++ b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html
@@ -23,8 +23,8 @@
     <div class="action-buttons">
         <!-- Filter button -->
         <button mat-button *ngIf="hasFilters" (click)="filterMenu.opened ? filterMenu.close() : filterMenu.open()">
-            <span class="upper" [matBadge]="filterAmount" matBadgeColor="accent" [matBadgeOverlap]="false" translate>
-                Filter
+            <span class="upper" [matBadge]="filterAmount" matBadgeColor="accent" [matBadgeOverlap]="false">
+                {{ 'Filter' | translate }}
             </span>
         </button>
 
diff --git a/client/src/app/shared/pipes/localized-date.pipe.spec.ts b/client/src/app/shared/pipes/localized-date.pipe.spec.ts
new file mode 100644
index 000000000..f408bfbfd
--- /dev/null
+++ b/client/src/app/shared/pipes/localized-date.pipe.spec.ts
@@ -0,0 +1,20 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+
+import { LocalizedDatePipe } from './localized-date.pipe';
+
+describe('LocalizedDatePipe', () => {
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            imports: [TranslateModule.forRoot()],
+            declarations: [LocalizedDatePipe]
+        });
+        TestBed.compileComponents();
+    });
+
+    it('create an instance', inject([TranslateService], (translate: TranslateService) => {
+        const pipe = new LocalizedDatePipe(translate);
+        expect(pipe).toBeTruthy();
+    }));
+});
diff --git a/client/src/app/shared/pipes/localized-date.pipe.ts b/client/src/app/shared/pipes/localized-date.pipe.ts
new file mode 100644
index 000000000..61606961e
--- /dev/null
+++ b/client/src/app/shared/pipes/localized-date.pipe.ts
@@ -0,0 +1,25 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { TranslateService } from '@ngx-translate/core';
+import * as moment from 'moment';
+
+/**
+ * pipe to convert and translate dates
+ */
+@Pipe({
+    name: 'localizedDate',
+    pure: false
+})
+export class LocalizedDatePipe implements PipeTransform {
+    public constructor(private translate: TranslateService) {}
+
+    public transform(value: any, dateFormat: string = 'lll'): any {
+        const lang = this.translate.currentLang ? this.translate.currentLang : this.translate.defaultLang;
+        if (!value) {
+            return '';
+        }
+        moment.locale(lang);
+        const dateLocale = moment.unix(value).local();
+        return dateLocale.format(dateFormat);
+    }
+}
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index 4d0d5930d..ab33cbef2 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -108,6 +108,7 @@ import { PdfViewerModule } from 'ng2-pdf-viewer';
 import { GlobalSpinnerComponent } from 'app/site/common/components/global-spinner/global-spinner.component';
 import { HeightResizingDirective } from './directives/height-resizing.directive';
 import { TrustPipe } from './pipes/trust.pipe';
+import { LocalizedDatePipe } from './pipes/localized-date.pipe';
 
 /**
  * Share Module for all "dumb" components and pipes.
@@ -256,7 +257,8 @@ import { TrustPipe } from './pipes/trust.pipe';
         OverlayComponent,
         PreviewComponent,
         NgxMaterialTimepickerModule,
-        TrustPipe
+        TrustPipe,
+        LocalizedDatePipe
     ],
     declarations: [
         PermsDirective,
@@ -302,7 +304,8 @@ import { TrustPipe } from './pipes/trust.pipe';
         OverlayComponent,
         PreviewComponent,
         HeightResizingDirective,
-        TrustPipe
+        TrustPipe,
+        LocalizedDatePipe
     ],
     providers: [
         {
@@ -317,7 +320,8 @@ import { TrustPipe } from './pipes/trust.pipe';
         SortBottomSheetComponent,
         DecimalPipe,
         ProgressSnackBarComponent,
-        TrustPipe
+        TrustPipe,
+        LocalizedDatePipe
     ],
     entryComponents: [
         SortBottomSheetComponent,