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:
parent
a5a40e9e11
commit
04656950cb
@ -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>
|
||||||
|
|
||||||
|
20
client/src/app/shared/pipes/localized-date.pipe.spec.ts
Normal file
20
client/src/app/shared/pipes/localized-date.pipe.spec.ts
Normal 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();
|
||||||
|
}));
|
||||||
|
});
|
25
client/src/app/shared/pipes/localized-date.pipe.ts
Normal file
25
client/src/app/shared/pipes/localized-date.pipe.ts
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user