mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-22 17:42:57 +00:00
feat: add duration pipe with frequency capabilites
This commit is contained in:
@@ -30,7 +30,9 @@
|
|||||||
<ion-item-divider (click)="frequency.click()">
|
<ion-item-divider (click)="frequency.click()">
|
||||||
<ion-label>{{
|
<ion-label>{{
|
||||||
frequency.children[0].item.repeatFrequency
|
frequency.children[0].item.repeatFrequency
|
||||||
? (frequency.children[0].item.repeatFrequency | amDuration)
|
? (frequency.children[0].item.repeatFrequency
|
||||||
|
| durationLocalized: true
|
||||||
|
| sentencecase)
|
||||||
: ('data.chips.add_events.popover.SINGLE' | translate | titlecase)
|
: ('data.chips.add_events.popover.SINGLE' | translate | titlecase)
|
||||||
}}</ion-label>
|
}}</ion-label>
|
||||||
<ion-checkbox
|
<ion-checkbox
|
||||||
|
|||||||
@@ -6,8 +6,12 @@
|
|||||||
<p>
|
<p>
|
||||||
<ion-icon name="calendar"></ion-icon>
|
<ion-icon name="calendar"></ion-icon>
|
||||||
<span *ngIf="item.dates[0] && item.dates[item.dates.length - 1]">
|
<span *ngIf="item.dates[0] && item.dates[item.dates.length - 1]">
|
||||||
{{ item.repeatFrequency | amDuration }},
|
<span *ngIf="item.repeatFrequency">
|
||||||
{{ item.dates[0] | dateFormat: 'weekday:long' }}
|
{{
|
||||||
|
item.repeatFrequency | durationLocalized: true | sentencecase
|
||||||
|
}},
|
||||||
|
{{ item.dates[0] | dateFormat: 'weekday:long' }}
|
||||||
|
</span>
|
||||||
<span>
|
<span>
|
||||||
({{ item.dates[0] | dateFormat }} -
|
({{ item.dates[0] | dateFormat }} -
|
||||||
{{ item.dates[item.dates.length - 1] | dateFormat }})
|
{{ item.dates[item.dates.length - 1] | dateFormat }})
|
||||||
|
|||||||
@@ -32,7 +32,11 @@
|
|||||||
*ngIf="scheduleEvent.dateSeries.repeatFrequency"
|
*ngIf="scheduleEvent.dateSeries.repeatFrequency"
|
||||||
>
|
>
|
||||||
{{ 'schedule.card.forEach' | translate }}
|
{{ 'schedule.card.forEach' | translate }}
|
||||||
{{ scheduleEvent.dateSeries.repeatFrequency | amDuration }}
|
{{
|
||||||
|
scheduleEvent.dateSeries.repeatFrequency
|
||||||
|
| durationLocalized: true
|
||||||
|
| sentencecase
|
||||||
|
}}
|
||||||
{{ 'schedule.card.until' | translate }}
|
{{ 'schedule.card.until' | translate }}
|
||||||
{{
|
{{
|
||||||
scheduleEvent.dateSeries.dates | last | amDateFormat: 'DD. MMM YYYY'
|
scheduleEvent.dateSeries.dates | last | amDateFormat: 'DD. MMM YYYY'
|
||||||
|
|||||||
@@ -179,6 +179,84 @@ export class OpeningHoursPipe implements PipeTransform, OnDestroy {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Injectable()
|
||||||
|
@Pipe({
|
||||||
|
name: 'durationLocalized',
|
||||||
|
pure: true,
|
||||||
|
})
|
||||||
|
export class DurationLocalizedPipe implements PipeTransform, OnDestroy {
|
||||||
|
locale: string;
|
||||||
|
|
||||||
|
onLangChange?: Subscription;
|
||||||
|
|
||||||
|
value: string;
|
||||||
|
|
||||||
|
frequencyPrefixes: {[iso6391Code: string]: string} = {
|
||||||
|
de: 'alle',
|
||||||
|
en: 'every',
|
||||||
|
es: 'cada',
|
||||||
|
pt: 'a cada',
|
||||||
|
fr: 'tous les',
|
||||||
|
cn: '每',
|
||||||
|
ru: 'kаждые',
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(private readonly translate: TranslateService) {
|
||||||
|
this.locale = translate.currentLang;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _dispose(): void {
|
||||||
|
if (this.onLangChange?.closed === false) {
|
||||||
|
this.onLangChange?.unsubscribe();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnDestroy(): void {
|
||||||
|
this._dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param value An ISO 8601 duration string
|
||||||
|
* @param isFrequency Boolean indicating if this duration is to be interpreted as repeat frequency
|
||||||
|
*/
|
||||||
|
transform(value: string | unknown, isFrequency = false): string {
|
||||||
|
this.updateValue(value, isFrequency);
|
||||||
|
this._dispose();
|
||||||
|
if (this.onLangChange?.closed === true) {
|
||||||
|
this.onLangChange = this.translate.onLangChange.subscribe(
|
||||||
|
(event: LangChangeEvent) => {
|
||||||
|
this.locale = event.lang;
|
||||||
|
this.updateValue(value, isFrequency);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
updateValue(value: string | unknown, isFrequency = false): void {
|
||||||
|
if (typeof value !== 'string') {
|
||||||
|
logger.warn(`durationLocalized pipe unable to parse input: ${value}`);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isFrequency) {
|
||||||
|
const fequencyPrefix = Object.keys(this.frequencyPrefixes).filter(
|
||||||
|
element => this.locale.includes(element),
|
||||||
|
);
|
||||||
|
this.value = [
|
||||||
|
fequencyPrefix.length > 0
|
||||||
|
? this.frequencyPrefixes[fequencyPrefix[0]]
|
||||||
|
: this.frequencyPrefixes.en,
|
||||||
|
moment.duration(value).humanize(),
|
||||||
|
].join(' ');
|
||||||
|
} else {
|
||||||
|
this.value = moment.duration(value).humanize();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@Injectable()
|
@Injectable()
|
||||||
@Pipe({
|
@Pipe({
|
||||||
name: 'metersLocalized',
|
name: 'metersLocalized',
|
||||||
@@ -258,7 +336,7 @@ export class MetersLocalizedPipe implements PipeTransform, OnDestroy {
|
|||||||
@Injectable()
|
@Injectable()
|
||||||
@Pipe({
|
@Pipe({
|
||||||
name: 'numberLocalized',
|
name: 'numberLocalized',
|
||||||
pure: false,
|
pure: true,
|
||||||
})
|
})
|
||||||
export class NumberLocalizedPipe implements PipeTransform, OnDestroy {
|
export class NumberLocalizedPipe implements PipeTransform, OnDestroy {
|
||||||
locale: string;
|
locale: string;
|
||||||
@@ -327,7 +405,7 @@ export class NumberLocalizedPipe implements PipeTransform, OnDestroy {
|
|||||||
@Injectable()
|
@Injectable()
|
||||||
@Pipe({
|
@Pipe({
|
||||||
name: 'dateFormat',
|
name: 'dateFormat',
|
||||||
pure: false,
|
pure: true,
|
||||||
})
|
})
|
||||||
export class DateLocalizedFormatPipe implements PipeTransform, OnDestroy {
|
export class DateLocalizedFormatPipe implements PipeTransform, OnDestroy {
|
||||||
locale: string;
|
locale: string;
|
||||||
|
|||||||
@@ -22,6 +22,7 @@ import {
|
|||||||
SentenceCasePipe,
|
SentenceCasePipe,
|
||||||
StringSplitPipe,
|
StringSplitPipe,
|
||||||
OpeningHoursPipe,
|
OpeningHoursPipe,
|
||||||
|
DurationLocalizedPipe,
|
||||||
} from './common-string-pipes';
|
} from './common-string-pipes';
|
||||||
import {
|
import {
|
||||||
ThingTranslateDefaultParser,
|
ThingTranslateDefaultParser,
|
||||||
@@ -40,6 +41,7 @@ export interface ThingTranslateModuleConfig {
|
|||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [
|
declarations: [
|
||||||
ArrayJoinPipe,
|
ArrayJoinPipe,
|
||||||
|
DurationLocalizedPipe,
|
||||||
NumberLocalizedPipe,
|
NumberLocalizedPipe,
|
||||||
MetersLocalizedPipe,
|
MetersLocalizedPipe,
|
||||||
StringSplitPipe,
|
StringSplitPipe,
|
||||||
@@ -51,6 +53,7 @@ export interface ThingTranslateModuleConfig {
|
|||||||
],
|
],
|
||||||
exports: [
|
exports: [
|
||||||
ArrayJoinPipe,
|
ArrayJoinPipe,
|
||||||
|
DurationLocalizedPipe,
|
||||||
NumberLocalizedPipe,
|
NumberLocalizedPipe,
|
||||||
MetersLocalizedPipe,
|
MetersLocalizedPipe,
|
||||||
StringSplitPipe,
|
StringSplitPipe,
|
||||||
|
|||||||
Reference in New Issue
Block a user