Adds date pipe to translate date

This commit is contained in:
apapachristou 2020-11-09 17:14:10 +02:00
parent 8d8dce8973
commit bfdbce54c2
14 changed files with 108 additions and 17 deletions

View File

@ -6,6 +6,7 @@ import { NgForLimitPipe } from './pipes/ng-for-limit.pipe';
import { TimezoneInfoDisplayPipe } from './pipes/timezone-info-display.pipe';
import { EnumUtils } from './services/utilities/enum-utils.service';
import { JsonParserPipe } from './pipes/json-parser.pipe';
import { DateTimeCultureFormatPipe } from './pipes/date-time-culture-format.pipe';
//
//
@ -19,6 +20,7 @@ import { JsonParserPipe } from './pipes/json-parser.pipe';
TimezoneInfoDisplayPipe,
DateFormatPipe,
DateTimeFormatPipe,
DateTimeCultureFormatPipe,
JsonParserPipe
],
exports: [
@ -26,6 +28,7 @@ import { JsonParserPipe } from './pipes/json-parser.pipe';
TimezoneInfoDisplayPipe,
DateFormatPipe,
DateTimeFormatPipe,
DateTimeCultureFormatPipe,
JsonParserPipe
],
providers: [
@ -35,6 +38,7 @@ import { JsonParserPipe } from './pipes/json-parser.pipe';
TimezoneInfoDisplayPipe,
DateFormatPipe,
DateTimeFormatPipe,
DateTimeCultureFormatPipe,
JsonParserPipe
]
})

View File

@ -0,0 +1,83 @@
import { DatePipe, registerLocaleData } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
import 'moment-timezone';
import { CultureInfo } from '../model/culture-info';
import { CultureService } from '../services/culture/culture-service';
import { LanguageService } from '../services/language/language.service';
import { LoggingService } from '../services/logging/logging-service';
import localeEs from '@angular/common/locales/es';
import localeDe from '@angular/common/locales/de';
import localeTr from '@angular/common/locales/tr';
import localeSk from '@angular/common/locales/sk';
const availableCultures: CultureInfo[] = require('../../../assets/localization/available-cultures.json');
@Pipe({
name: 'dateTimeCultureFormatter',
pure: false
})
export class DateTimeCultureFormatPipe implements PipeTransform {
private cultureValues = new Map<string, CultureInfo>(); // cultures by name
private cache;
constructor(private datePipe: DatePipe,
private translate: TranslateService,
private languageService: LanguageService) {
if (availableCultures) {
this.cultureValues = new Map<string, CultureInfo>();
availableCultures.forEach(culture => {
this.cultureValues.set(culture.name, culture);
});
}
this.translate.onLangChange.subscribe(($event: LangChangeEvent) => {
(<any>this).locale = $event.lang;
this.cache = null;
});
}
transform(value: any, format?: string, timezone?: string): string | null {
if (!this.cache) {
const cultureName = this.languageService.getCurrentLanguage();
let locale: string;
switch (cultureName) {
case 'en': {
locale = this.cultureValues.get('en-US').name;
break;
}
case 'gr': {
locale = this.cultureValues.get('el-GR').name;
break;
}
case 'es': {
locale = this.cultureValues.get('es-ES').name;
registerLocaleData(localeEs);
break;
}
case 'de': {
locale = this.cultureValues.get('de-DE').name;
registerLocaleData(localeDe);
break;
}
case 'tr': {
locale = this.cultureValues.get('tr-TR').name;
registerLocaleData(localeTr);
break;
}
case 'sk': {
locale = this.cultureValues.get('sk-SK').name;
registerLocaleData(localeSk);
break;
}
default: {
locale = this.cultureValues.get('en-US').name;
break;
}
}
this.cache = this.datePipe.transform(value, format, timezone, locale);
}
return this.cache;
}
}

View File

@ -18,10 +18,12 @@ import { RecentEditedDatasetActivityComponent } from './recent-edited-dataset-ac
import { DatasetCopyDialogModule } from '../dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
import { RecentEditedDmpActivityComponent } from './recent-edited-dmp-activity/recent-edited-dmp-activity.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FormattingModule } from '@app/core/formatting.module';
@NgModule({
imports: [
CommonUiModule,
FormattingModule,
DashboardRoutingModule,
ExportMethodDialogModule,
ConfirmationDialogModule,

View File

@ -24,7 +24,7 @@
<a [routerLink]="['../datasets/overview/' + activity.id]" class="pointer">
<div class="d-flex flex-direction-row">
<div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div>
<div class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
<div class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | dateTimeCultureFormatter: "d MMMM y"}}</div>
</div>
<div class="col-auto dataset-title-draft">{{activity.label}}</div>
<div class="dataset-subtitle">

View File

@ -30,8 +30,8 @@
<a [routerLink]="navigateToUrl(activity.id, activity.type)" class="pointer">
<div class="d-flex flex-direction-row">
<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modified | date: "longDate" }}</div>
<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ activity.publishedAt | date: "longDate" }}</div>
<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modified | dateTimeCultureFormatter: "d MMMM y" }}</div>
<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ activity.publishedAt | dateTimeCultureFormatter: "d MMMM y" }}</div>
</div>
<div class="col-auto" [ngClass]="{'dmp-title': activity.status === 1, 'dmp-title-draft': activity.status === 0}">{{activity.title}}</div>
<div class="dmp-subtitle">
@ -101,8 +101,8 @@
<a [routerLink]="navigateToUrl(activity.id, activity.type)" class="pointer">
<div class="d-flex flex-direction-row">
<div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div>
<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{activity.publishedAt | date:"longDate"}}</div>
<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | dateTimeCultureFormatter: "d MMMM y"}}</div>
<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{activity.publishedAt | dateTimeCultureFormatter: "d MMMM y"}}</div>
</div>
<div *ngIf="activity.status === 1" class="col-auto dataset-title">{{activity.title}}</div>
<div *ngIf="activity.status === 0" class="col-auto dataset-title-draft">{{activity.title}}</div>

View File

@ -25,8 +25,8 @@
<a [routerLink]="goToOverview(activity.id)" class="pointer">
<div class="d-flex flex-direction-row">
<div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div>
<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{activity.dmpPublishedAt | date:"longDate"}}</div>
<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | dateTimeCultureFormatter: "d MMMM y"}}</div>
<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{activity.dmpPublishedAt | dateTimeCultureFormatter: "d MMMM y"}}</div>
</div>
<div *ngIf="activity.status === 1" class="col-auto dataset-title">{{activity.label}}</div>
<div *ngIf="activity.status === 0" class="col-auto dataset-title-draft">{{activity.label}}</div>

View File

@ -25,8 +25,8 @@
<a [routerLink]="navigateToUrl(activity.id)" class="pointer">
<div class="d-flex flex-direction-row">
<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modifiedTime | date: "longDate" }}</div>
<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ activity.publishedAt | date: "longDate" }}</div>
<div *ngIf="!publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ activity.modifiedTime | dateTimeCultureFormatter: "d MMMM y" }}</div>
<div *ngIf="publicMode" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ activity.publishedAt | dateTimeCultureFormatter: "d MMMM y" }}</div>
</div>
<div class="col-auto" [ngClass]="{'dmp-title': activity.status === 1, 'dmp-title-draft': activity.status === 0}">{{activity.label}}</div>
<div class="dmp-subtitle">

View File

@ -29,12 +29,14 @@ import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component';
import { DatasetEditorDetailsComponent } from '../dmp/editor/dataset-editor-details/dataset-editor-details.component';
import { DatasetEditorDetailsModule } from '../dmp/editor/dataset-editor-details/dataset-editor-details.module';
import { FormProgressIndicationModule } from '../misc/dataset-description-form/components/form-progress-indication/form-progress-indication.module';
import { FormattingModule } from '@app/core/formatting.module';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
UrlListingModule,
FormattingModule,
ConfirmationDialogModule,
AutoCompleteModule,
ExternalSourcesModule,

View File

@ -2,8 +2,8 @@
<a [routerLink]="getItemLink()" class="pointer">
<div class="d-flex flex-direction-row">
<div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div>
<div *ngIf="!isPublic" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{dataset.modified | date:"longDate"}}</div>
<div *ngIf="isPublic" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{dataset.dmpPublishedAt | date:"longDate"}}</div>
<div *ngIf="!isPublic" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{dataset.modified | dateTimeCultureFormatter: "d MMMM y"}}</div>
<div *ngIf="isPublic" class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.PUBLISHED' | translate}}: {{dataset.dmpPublishedAt | dateTimeCultureFormatter: "d MMMM y"}}</div>
</div>
<div *ngIf="dataset.status === 1" class="col-auto dataset-title">{{dataset.label}}</div>
<div *ngIf="dataset.status === 0" class="col-auto dataset-title-draft">{{dataset.label}}</div>

View File

@ -38,7 +38,7 @@
<span *ngIf="lockStatus" class="ml-2 mr-2">.</span>
<div class="d-flex mr-2">{{'GENERAL.STATUSES.EDIT' | translate}} :
<!-- {{dataset.modified | date:'longDate':'+0200': this.language.store.currentLang }} -->
{{dataset.modified | date:'longDate'}}
{{dataset.modified | dateTimeCultureFormatter: "d MMMM y"}}
</div>
<div class="d-flex ml-2 mr-4">
<div *ngIf="dataset.status" class="d-flex flex-row uppercase">

View File

@ -2,8 +2,8 @@
<a [routerLink]="isPublic ? ['/explore-plans/publicOverview/' + dmp.id] : ['/plans/overview/' + dmp.id]" class="pointer">
<div class="d-flex flex-direction-row">
<div class="col-auto dmp-label">{{ 'DMP-LISTING.DMP' | translate }}</div>
<div *ngIf="!isPublic" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ dmp.modifiedTime | date: "longDate" }}</div>
<div *ngIf="isPublic" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ dmp.publishedAt | date: "longDate" }}</div>
<div *ngIf="!isPublic" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.EDITED' | translate }}: {{ dmp.modifiedTime | dateTimeCultureFormatter: "d MMMM y" }}</div>
<div *ngIf="isPublic" class="col-auto ml-auto edited-date">{{ 'DMP-LISTING.PUBLISHED' | translate }}: {{ dmp.publishedAt | dateTimeCultureFormatter: "d MMMM y" }}</div>
</div>
<div class="col-auto" [ngClass]="{'dmp-title': !isDraft, 'dmp-title-draft': isDraft}">{{dmp.label}}</div>
<div class="dmp-subtitle">

View File

@ -6,7 +6,7 @@ import { Router, ActivatedRoute } from '@angular/router';
import { DatasetService } from '../../../../core/services/dataset/dataset.service';
import { AuthService } from '../../../../core/services/auth/auth.service';
import { Principal } from '../../../../core/model/auth/principal';
import { TranslateService } from '@ngx-translate/core';
import { LangChangeEvent, TranslateService } from '@ngx-translate/core';
import { DmpStatus } from '../../../../core/common/enum/dmp-status';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { DmpService } from '@app/core/services/dmp/dmp.service';

View File

@ -41,7 +41,7 @@
</mat-select>
</mat-form-field>
<div class="d-flex mr-4">{{'GENERAL.STATUSES.EDIT' | translate}} :
{{dmp.modifiedTime | date:"longDate"}}
{{dmp.modifiedTime | dateTimeCultureFormatter: "d MMMM y"}}
</div>
<div class="d-flex mr-4">
<div *ngIf="dmp.status" class="d-flex flex-row uppercase">

View File

@ -45,7 +45,7 @@
</div>
</div>
<div class="col about-item ml-auto">
<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.dmpPublishedAt | date: "shortDate"}}</p>
<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.dmpPublishedAt | dateTimeCultureFormatter: "d MMMM y"}}</p>
</div>
</div>
</div>