translate calendar contents, space options for days

This commit is contained in:
Tykayn 2021-02-09 11:11:06 +01:00 committed by tykayn
parent ce00a3ce69
commit 2edb828aa3
7 changed files with 209 additions and 66 deletions

View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { SharedModule } from '../../shared/shared.module'; import { SharedModule } from '../../shared/shared.module';
@ -16,6 +16,7 @@ import { TextSelectComponent } from './form/text-select/text-select.component';
import { KindSelectComponent } from './form/kind-select/kind-select.component'; import { KindSelectComponent } from './form/kind-select/kind-select.component';
import { BaseConfigComponent } from './form/base-config/base-config.component'; import { BaseConfigComponent } from './form/base-config/base-config.component';
import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component'; import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component';
import { CalendarModule } from 'primeng';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -31,6 +32,7 @@ import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.
AdvancedConfigComponent, AdvancedConfigComponent,
], ],
imports: [ imports: [
CalendarModule,
AdministrationRoutingModule, AdministrationRoutingModule,
CommonModule, CommonModule,
ReactiveFormsModule, ReactiveFormsModule,

View File

@ -51,19 +51,27 @@
</span> </span>
</div> </div>
<div class="actions"> <div class="actions">
<pre class="debug padded warning"> <button
form.value.hasSeveralHours : class="btn"
{{ form.value.hasSeveralHours | json }} [class.is-primary]="form.value.configuration.hasSeveralHours"
</pre (click)="
form.patchValue({ configuration: { hasSeveralHours: !form.value.configuration.hasSeveralHours } })
"
> >
<i class="fa fa-clock-o"></i>
<span> horaires différentes à chaque jour </span>
</button>
<button <button
(click)="addTime()" (click)="addTime()"
*ngIf="!form.value.hasSeveralHours" *ngIf="!form.value.configuration.hasSeveralHours"
class="btn btn--primary" class="btn btn--primary"
id="add_time_button" id="add_time_button"
> >
<i class="fa fa-plus" aria-hidden="true"></i> <i class="fa fa-plus" aria-hidden="true"></i>
<span>
{{ 'dates.add_time' | translate }} {{ 'dates.add_time' | translate }}
</span>
</button> </button>
<button <button
(click)="removeAllTimes()" (click)="removeAllTimes()"
@ -72,7 +80,9 @@
id="remove_time_button" id="remove_time_button"
> >
<i class="fa fa-trash" aria-hidden="true"></i> <i class="fa fa-trash" aria-hidden="true"></i>
<span>
Aucune plage horaire Aucune plage horaire
</span>
</button> </button>
<button <button
(click)="resetTimes()" (click)="resetTimes()"
@ -81,7 +91,9 @@
id="reset_time_button" id="reset_time_button"
> >
<i class="fa fa-refresh" aria-hidden="true"></i> <i class="fa fa-refresh" aria-hidden="true"></i>
<span>
réinitialiser réinitialiser
</span>
</button> </button>
</div> </div>
@ -104,15 +116,25 @@
<!-- </div>--> <!-- </div>-->
<!-- </div>--> <!-- </div>-->
<hr /> <hr />
<div class="columns">
<div class="column">
<!-- ajouter une date-->
<button class="btn btn--primary" (click)="addChoice()">
{{ 'dates.add' | translate }}
</button>
</div>
<div class="column">
<span class="count-dates title"> <span class="count-dates title">
{{ dateList.length }} {{ dateList.length }}
</span> </span>
<span> <span>
{{ 'dates.count_dates' | translate }} {{ 'dates.count_dates' | translate }}
</span> </span>
<button class="btn btn--primary" (click)="addChoice()"> </div>
{{ 'dates.add' | translate }} </div>
</button>
<div class="columns">
<div class="column">
<div *ngFor="let choice of dateList; index as id" class="date-choice"> <div *ngFor="let choice of dateList; index as id" class="date-choice">
{{ id }}) {{ id }})
<input <input
@ -125,7 +147,11 @@
<button (click)="dateList.splice(id, 1)" class="btn btn-warning"> <button (click)="dateList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i>
</button> </button>
<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary"> <button
(click)="addTimeToDate(choice, id)"
*ngIf="'true' === allowSeveralHours"
class="btn btn--primary"
>
{{ 'dates.add_time' | translate }} {{ 'dates.add_time' | translate }}
</button> </button>
<div *ngIf="'true' === allowSeveralHours" class="several-times"> <div *ngIf="'true' === allowSeveralHours" class="several-times">
@ -143,4 +169,33 @@
</div> </div>
</div> </div>
</div> </div>
<div class="column calendar-column">
<button class="btn" (click)="selectionKind = 'range'" [class.is-primary]="selectionKind == 'range'">
plage de jours
</button>
<button
class="btn"
(click)="selectionKind = 'multiple'"
[class.is-primary]="selectionKind == 'multiple'"
>
jours séparés
</button>
<button class="btn" (click)="setDefaultDatesForInterval()">
réinitialiser</button
><button class="btn" (click)="dateCalendarEnum = [today]">
vider
</button>
<div class="text-center">
<br />
<p-calendar
[(ngModel)]="dateCalendarEnum"
[locale]="'calendar_widget' | translate"
[inline]="true"
[selectionMode]="selectionKind"
></p-calendar>
</div>
</div>
</div>
</div>
</div> </div>

View File

@ -0,0 +1,8 @@
:host {
.btn i + span {
margin-left: 1ch;
}
.btn + .btn {
margin-left: 1em;
}
}

View File

@ -8,8 +8,8 @@ import { ApiService } from '../../../../core/services/api.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs'; import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs';
import { Poll } from '../../../../core/models/poll.model';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { TranslateService } from '@ngx-translate/core';
@Component({ @Component({
selector: 'app-date-select', selector: 'app-date-select',
@ -22,12 +22,15 @@ export class DateSelectComponent implements OnInit {
public showDateInterval = true; public showDateInterval = true;
public allowSeveralHours = true; public allowSeveralHours = true;
today = new Date();
startDateInterval: string; startDateInterval: string;
endDateInterval: string; endDateInterval: string;
intervalDays: any; intervalDays: any;
intervalDaysDefault = 7; intervalDaysDefault = 7;
dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
dateCalendarEnum: any = [new Date('02/09/2021')];
selectionKind: string = 'range';
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
@ -38,6 +41,7 @@ export class DateSelectComponent implements OnInit {
public dateUtilities: DateUtilities, public dateUtilities: DateUtilities,
private apiService: ApiService, private apiService: ApiService,
private router: Router, private router: Router,
private translateService: TranslateService,
@Inject(DOCUMENT) private document: any @Inject(DOCUMENT) private document: any
) {} ) {}
@ -64,6 +68,7 @@ export class DateSelectComponent implements OnInit {
startDateInterval: this.startDateInterval, startDateInterval: this.startDateInterval,
endDateInterval: this.endDateInterval, endDateInterval: this.endDateInterval,
}); });
this.dateCalendarEnum = [dateCurrent, this.dateUtilities.addDaysToDate(this.intervalDaysDefault, dateCurrent)];
this.countDays(); this.countDays();
} }
@ -72,7 +77,7 @@ export class DateSelectComponent implements OnInit {
this.dateUtilities.parseInputDateToDateObject(this.startDateInterval), this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
this.dateUtilities.parseInputDateToDateObject(this.endDateInterval) this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
); );
this.cd.detectChanges(); // this.cd.detectChanges();
} }
/** /**
@ -143,13 +148,17 @@ export class DateSelectComponent implements OnInit {
date_object: new Date(), date_object: new Date(),
}); });
const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]'; const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]';
this.cd.detectChanges(); // this.cd.detectChanges();
const elem = this.document.querySelector(selector); const elem = this.document.querySelector(selector);
if (elem) { if (elem) {
elem.focus(); elem.focus();
} }
} }
get dateChoices() {
return this.form.get('dateChoices') as FormArray;
}
addChoice(optionalLabel = ''): void { addChoice(optionalLabel = ''): void {
const newControlGroup = this.fb.group({ const newControlGroup = this.fb.group({
label: this.fb.control('', [Validators.required]), label: this.fb.control('', [Validators.required]),
@ -162,8 +171,8 @@ export class DateSelectComponent implements OnInit {
imageUrl: 'mon url', imageUrl: 'mon url',
}); });
} }
this.form.value.choices.push(newControlGroup); this.dateChoices.push(newControlGroup);
this.cd.detectChanges(); // this.cd.detectChanges();
console.log('this.choices.length', this.choices.length); console.log('this.choices.length', this.choices.length);
this.focusOnChoice(this.choices.length - 1); this.focusOnChoice(this.choices.length - 1);
@ -220,7 +229,7 @@ export class DateSelectComponent implements OnInit {
if ($event.ctrlKey && $event.key == 'Backspace') { if ($event.ctrlKey && $event.key == 'Backspace') {
this.deleteChoiceField(choice_number); this.deleteChoiceField(choice_number);
this.toastService.display('choix supprimé par raccourci "Ctrl + retour"'); this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
this.cd.detectChanges(); // this.cd.detectChanges();
this.focusOnChoice(Math.min(choice_number - 1, 0)); this.focusOnChoice(Math.min(choice_number - 1, 0));
} }
if ($event.ctrlKey && $event.key == 'Enter') { if ($event.ctrlKey && $event.key == 'Enter') {

View File

@ -1,8 +1,6 @@
import { Component, DoCheck, OnInit } from '@angular/core'; import { Component, DoCheck, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { Language } from '../../../../core/enums/language.enum'; import { Language } from '../../../../core/enums/language.enum';
import { StorageService } from '../../../../core/services/storage.service';
import { LanguageService } from '../../../../core/services/language.service'; import { LanguageService } from '../../../../core/services/language.service';
@Component({ @Component({

View File

@ -584,5 +584,41 @@
"NL": "Néérlandais", "NL": "Néérlandais",
"OC": "oc", "OC": "oc",
"SV": "sv" "SV": "sv"
},
"calendar_widget" : {
"startsWith": "Starts with",
"contains": "Contains",
"notContains": "Not contains",
"endsWith": "Ends with",
"equals": "Equals",
"notEquals": "Not equals",
"noFilter": "No Filter",
"lt": "Less than",
"lte": "Less than or equal to",
"gt": "Greater than",
"gte": "Great then or equals",
"is": "Is",
"isNot": "Is not",
"before": "Before",
"after": "After",
"clear": "Clear",
"apply": "Apply",
"matchAll": "Match All",
"matchAny": "Match Any",
"addRule": "Add Rule",
"removeRule": "Remove Rule",
"accept": "Yes",
"reject": "No",
"choose": "Choose",
"upload": "Upload",
"cancel": "Cancel",
"dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
"dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
"dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"],
"monthNames": ["January","February","March","April","May","June","July","August","September","October","November","December"],
"monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"today": "Today",
"weekHeader": "Wk"
} }
} }

View File

@ -588,5 +588,40 @@
"NL": "Néérlandais", "NL": "Néérlandais",
"OC": "oc", "OC": "oc",
"SV": "sv" "SV": "sv"
},
"calendar_widget" : {
"startsWith": "Starts with",
"contains": "Contains",
"notContains": "Not contains",
"endsWith": "Ends with",
"equals": "Equals",
"notEquals": "Not equals",
"noFilter": "No Filter",
"lt": "Less than",
"lte": "Less than or equal to",
"gt": "Greater than",
"gte": "Great then or equals",
"is": "Is",
"isNot": "Is not",
"before": "Before",
"after": "After",
"clear": "Clear",
"apply": "Apply",
"matchAll": "Match All",
"matchAny": "Match Any",
"addRule": "Add Rule",
"removeRule": "Remove Rule",
"accept": "Yes",
"reject": "No",
"choose": "Choose",
"upload": "Upload",
"cancel": "Cancel",
"dayNames": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
"dayNamesShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
"dayNamesMin": ["Su","Mo","Tu","We","Th","Fr","Sa"],
"monthNames": ["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"],
"monthNamesShort": ["Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"today": "Aujourd'hui",
"weekHeader": "Wk"
} }
} }