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
This commit is contained in:
Sean Engelhardt 2019-10-15 12:20:21 +02:00
parent a5a40e9e11
commit 04656950cb
4 changed files with 54 additions and 5 deletions

View File

@ -23,8 +23,8 @@
<div class="action-buttons"> <div class="action-buttons">
<!-- Filter button --> <!-- Filter button -->
<button mat-button *ngIf="hasFilters" (click)="filterMenu.opened ? filterMenu.close() : filterMenu.open()"> <button mat-button *ngIf="hasFilters" (click)="filterMenu.opened ? filterMenu.close() : filterMenu.open()">
<span class="upper" [matBadge]="filterAmount" matBadgeColor="accent" [matBadgeOverlap]="false" translate> <span class="upper" [matBadge]="filterAmount" matBadgeColor="accent" [matBadgeOverlap]="false">
Filter {{ 'Filter' | translate }}
</span> </span>
</button> </button>

View File

@ -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();
}));
});

View File

@ -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);
}
}

View File

@ -108,6 +108,7 @@ import { PdfViewerModule } from 'ng2-pdf-viewer';
import { GlobalSpinnerComponent } from 'app/site/common/components/global-spinner/global-spinner.component'; import { GlobalSpinnerComponent } from 'app/site/common/components/global-spinner/global-spinner.component';
import { HeightResizingDirective } from './directives/height-resizing.directive'; import { HeightResizingDirective } from './directives/height-resizing.directive';
import { TrustPipe } from './pipes/trust.pipe'; import { TrustPipe } from './pipes/trust.pipe';
import { LocalizedDatePipe } from './pipes/localized-date.pipe';
/** /**
* Share Module for all "dumb" components and pipes. * Share Module for all "dumb" components and pipes.
@ -256,7 +257,8 @@ import { TrustPipe } from './pipes/trust.pipe';
OverlayComponent, OverlayComponent,
PreviewComponent, PreviewComponent,
NgxMaterialTimepickerModule, NgxMaterialTimepickerModule,
TrustPipe TrustPipe,
LocalizedDatePipe
], ],
declarations: [ declarations: [
PermsDirective, PermsDirective,
@ -302,7 +304,8 @@ import { TrustPipe } from './pipes/trust.pipe';
OverlayComponent, OverlayComponent,
PreviewComponent, PreviewComponent,
HeightResizingDirective, HeightResizingDirective,
TrustPipe TrustPipe,
LocalizedDatePipe
], ],
providers: [ providers: [
{ {
@ -317,7 +320,8 @@ import { TrustPipe } from './pipes/trust.pipe';
SortBottomSheetComponent, SortBottomSheetComponent,
DecimalPipe, DecimalPipe,
ProgressSnackBarComponent, ProgressSnackBarComponent,
TrustPipe TrustPipe,
LocalizedDatePipe
], ],
entryComponents: [ entryComponents: [
SortBottomSheetComponent, SortBottomSheetComponent,