Make quarter labels translatable

[ci skip]

config/locales/crowdin/js-fr.yml

@@ -525,6 +525,7 @@ fr:
     text_attachment_destroy_confirmation: Êtes-vous sûr de vouloir supprimer la pièce
       jointe ?
     timelines:
+      quarter_label: 'T%{quarter_number}'
       gantt_chart: Diagramme de Gantt
       labels:
         title: Configuration du label

config/locales/js-en.yml

@@ -520,6 +520,7 @@ en:
     text_query_destroy_confirmation: "Are you sure you want to delete the selected view?"
     text_attachment_destroy_confirmation: "Are you sure you want to delete the attachment?"
     timelines:
+      quarter_label: 'Q%{quarter_number}'
       gantt_chart: 'Gantt chart'
       labels:
         title: 'Label configuration'

frontend/src/app/components/wp-table/timeline/header/wp-timeline-header.directive.ts

@@ -32,6 +32,7 @@ import {WorkPackageTimelineTableController} from 'core-components/wp-table/timel
 import * as moment from 'moment';
 import {calculatePositionValueForDayCount, getTimeSlicesForHeader, TimelineViewParameters} from '../wp-timeline';
 import Moment = moment.Moment;
+import {I18nService} from "core-app/modules/common/i18n/i18n.service";
 
 
 export const timelineHeaderCSSClass = 'wp-timeline--header-element';
@@ -49,7 +50,8 @@ export class WorkPackageTimelineHeaderController implements OnInit {
   private innerHeader:JQuery;
 
   constructor(elementRef:ElementRef,
-              public workPackageTimelineTableController:WorkPackageTimelineTableController) {
+              readonly I18n:I18nService,
+              readonly workPackageTimelineTableController:WorkPackageTimelineTableController) {
 
     this.$element = jQuery(elementRef.nativeElement);
   }
@@ -156,7 +158,8 @@ export class WorkPackageTimelineHeaderController implements OnInit {
     });
 
     this.renderTimeSlices(vp, 'quarter', 15, vp.dateDisplayStart, vp.dateDisplayEnd, (start, cell) => {
-      cell.innerHTML = 'Q' + start.format('Q');
+      cell.innerHTML = this.I18n.t('js.timelines.quarter_label',
+        { quarter_number: start.format('Q') });
       cell.classList.add('-top-border');
       cell.style.height = '30px';
     });