mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
translate calendar contents, space options for days
This commit is contained in:
tykayn
parent
ce00a3ce69
commit
2edb828aa3
@ -1,6 +1,6 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
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 { 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 { BaseConfigComponent } from './form/base-config/base-config.component';
|
||||
import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.component';
|
||||
import { CalendarModule } from 'primeng';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@ -31,6 +32,7 @@ import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.
|
||||
AdvancedConfigComponent,
|
||||
],
|
||||
imports: [
|
||||
CalendarModule,
|
||||
AdministrationRoutingModule,
|
||||
CommonModule,
|
||||
ReactiveFormsModule,
|
||||
|
||||
@ -51,19 +51,27 @@
|
||||
</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<pre class="debug padded warning">
|
||||
form.value.hasSeveralHours :
|
||||
{{ form.value.hasSeveralHours | json }}
|
||||
</pre
|
||||
<button
|
||||
class="btn"
|
||||
[class.is-primary]="form.value.configuration.hasSeveralHours"
|
||||
(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
|
||||
(click)="addTime()"
|
||||
*ngIf="!form.value.hasSeveralHours"
|
||||
*ngIf="!form.value.configuration.hasSeveralHours"
|
||||
class="btn btn--primary"
|
||||
id="add_time_button"
|
||||
>
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
{{ 'dates.add_time' | translate }}
|
||||
<span>
|
||||
{{ 'dates.add_time' | translate }}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
(click)="removeAllTimes()"
|
||||
@ -72,7 +80,9 @@
|
||||
id="remove_time_button"
|
||||
>
|
||||
<i class="fa fa-trash" aria-hidden="true"></i>
|
||||
Aucune plage horaire
|
||||
<span>
|
||||
Aucune plage horaire
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
(click)="resetTimes()"
|
||||
@ -81,64 +91,109 @@
|
||||
id="reset_time_button"
|
||||
>
|
||||
<i class="fa fa-refresh" aria-hidden="true"></i>
|
||||
réinitialiser
|
||||
<span>
|
||||
réinitialiser
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- <div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
|
||||
<!-- <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
|
||||
<!-- <div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
|
||||
<!-- <label for="timeChoices_{{ id }}">-->
|
||||
<!-- <i class="fa fa-clock-o" aria-hidden="true"></i>-->
|
||||
<!-- </label>-->
|
||||
<!-- <input-->
|
||||
<!-- [(ngModel)]="time.literal"-->
|
||||
<!-- name="timeChoices_{{ id }}"-->
|
||||
<!-- type="text"-->
|
||||
<!-- id="timeChoices_{{ id }}"-->
|
||||
<!-- />-->
|
||||
<!-- <button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">-->
|
||||
<!-- <i class="fa fa-times" aria-hidden="true"></i>-->
|
||||
<!-- </button>-->
|
||||
<!-- <div *ngIf="'false' === allowSeveralHours" class="identical-dates">-->
|
||||
<!-- <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">-->
|
||||
<!-- <div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>-->
|
||||
<!-- <label for="timeChoices_{{ id }}">-->
|
||||
<!-- <i class="fa fa-clock-o" aria-hidden="true"></i>-->
|
||||
<!-- </label>-->
|
||||
<!-- <input-->
|
||||
<!-- [(ngModel)]="time.literal"-->
|
||||
<!-- name="timeChoices_{{ id }}"-->
|
||||
<!-- type="text"-->
|
||||
<!-- id="timeChoices_{{ id }}"-->
|
||||
<!-- />-->
|
||||
<!-- <button (click)="time.timeList.splice(id, 1)" class="btn btn-warning">-->
|
||||
<!-- <i class="fa fa-times" aria-hidden="true"></i>-->
|
||||
<!-- </button>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<hr />
|
||||
<span class="count-dates title">
|
||||
{{ dateList.length }}
|
||||
</span>
|
||||
<span>
|
||||
{{ 'dates.count_dates' | translate }}
|
||||
</span>
|
||||
<button class="btn btn--primary" (click)="addChoice()">
|
||||
{{ 'dates.add' | translate }}
|
||||
</button>
|
||||
<div *ngFor="let choice of dateList; index as id" class="date-choice">
|
||||
{{ id }})
|
||||
<input
|
||||
[(ngModel)]="choice.date_object"
|
||||
name="dateChoices_{{ id }}"
|
||||
id="dateChoices_{{ id }}"
|
||||
useValueAsDate
|
||||
type="date"
|
||||
/>
|
||||
<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
|
||||
{{ 'dates.add_time' | translate }}
|
||||
</button>
|
||||
<div *ngIf="'true' === allowSeveralHours" class="several-times">
|
||||
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
|
||||
<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">
|
||||
{{ dateList.length }}
|
||||
</span>
|
||||
<span>
|
||||
{{ 'dates.count_dates' | translate }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div *ngFor="let choice of dateList; index as id" class="date-choice">
|
||||
{{ id }})
|
||||
<input
|
||||
[(ngModel)]="timeItem.literal"
|
||||
name="dateTime_{{ id }}_Choices_{{ idTime }}"
|
||||
id="dateTime_{{ id }}_Choices_{{ idTime }}"
|
||||
type="text"
|
||||
[(ngModel)]="choice.date_object"
|
||||
name="dateChoices_{{ id }}"
|
||||
id="dateChoices_{{ id }}"
|
||||
useValueAsDate
|
||||
type="date"
|
||||
/>
|
||||
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
|
||||
<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
<button
|
||||
(click)="addTimeToDate(choice, id)"
|
||||
*ngIf="'true' === allowSeveralHours"
|
||||
class="btn btn--primary"
|
||||
>
|
||||
{{ 'dates.add_time' | translate }}
|
||||
</button>
|
||||
<div *ngIf="'true' === allowSeveralHours" class="several-times">
|
||||
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
|
||||
<input
|
||||
[(ngModel)]="timeItem.literal"
|
||||
name="dateTime_{{ id }}_Choices_{{ idTime }}"
|
||||
id="dateTime_{{ id }}_Choices_{{ idTime }}"
|
||||
type="text"
|
||||
/>
|
||||
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
</button>
|
||||
</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>
|
||||
|
||||
@ -0,0 +1,8 @@
|
||||
:host {
|
||||
.btn i + span {
|
||||
margin-left: 1ch;
|
||||
}
|
||||
.btn + .btn {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
@ -8,8 +8,8 @@ import { ApiService } from '../../../../core/services/api.service';
|
||||
import { Router } from '@angular/router';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs';
|
||||
import { Poll } from '../../../../core/models/poll.model';
|
||||
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-date-select',
|
||||
@ -22,12 +22,15 @@ export class DateSelectComponent implements OnInit {
|
||||
|
||||
public showDateInterval = true;
|
||||
public allowSeveralHours = true;
|
||||
today = new Date();
|
||||
startDateInterval: string;
|
||||
endDateInterval: string;
|
||||
intervalDays: any;
|
||||
intervalDaysDefault = 7;
|
||||
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
|
||||
dateCalendarEnum: any = [new Date('02/09/2021')];
|
||||
selectionKind: string = 'range';
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
@ -38,6 +41,7 @@ export class DateSelectComponent implements OnInit {
|
||||
public dateUtilities: DateUtilities,
|
||||
private apiService: ApiService,
|
||||
private router: Router,
|
||||
private translateService: TranslateService,
|
||||
@Inject(DOCUMENT) private document: any
|
||||
) {}
|
||||
|
||||
@ -64,6 +68,7 @@ export class DateSelectComponent implements OnInit {
|
||||
startDateInterval: this.startDateInterval,
|
||||
endDateInterval: this.endDateInterval,
|
||||
});
|
||||
this.dateCalendarEnum = [dateCurrent, this.dateUtilities.addDaysToDate(this.intervalDaysDefault, dateCurrent)];
|
||||
this.countDays();
|
||||
}
|
||||
|
||||
@ -72,7 +77,7 @@ export class DateSelectComponent implements OnInit {
|
||||
this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
|
||||
this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
|
||||
);
|
||||
this.cd.detectChanges();
|
||||
// this.cd.detectChanges();
|
||||
}
|
||||
|
||||
/**
|
||||
@ -143,13 +148,17 @@ export class DateSelectComponent implements OnInit {
|
||||
date_object: new Date(),
|
||||
});
|
||||
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);
|
||||
if (elem) {
|
||||
elem.focus();
|
||||
}
|
||||
}
|
||||
|
||||
get dateChoices() {
|
||||
return this.form.get('dateChoices') as FormArray;
|
||||
}
|
||||
|
||||
addChoice(optionalLabel = ''): void {
|
||||
const newControlGroup = this.fb.group({
|
||||
label: this.fb.control('', [Validators.required]),
|
||||
@ -162,8 +171,8 @@ export class DateSelectComponent implements OnInit {
|
||||
imageUrl: 'mon url',
|
||||
});
|
||||
}
|
||||
this.form.value.choices.push(newControlGroup);
|
||||
this.cd.detectChanges();
|
||||
this.dateChoices.push(newControlGroup);
|
||||
// this.cd.detectChanges();
|
||||
console.log('this.choices.length', this.choices.length);
|
||||
|
||||
this.focusOnChoice(this.choices.length - 1);
|
||||
@ -220,7 +229,7 @@ export class DateSelectComponent implements OnInit {
|
||||
if ($event.ctrlKey && $event.key == 'Backspace') {
|
||||
this.deleteChoiceField(choice_number);
|
||||
this.toastService.display('choix supprimé par raccourci "Ctrl + retour"');
|
||||
this.cd.detectChanges();
|
||||
// this.cd.detectChanges();
|
||||
this.focusOnChoice(Math.min(choice_number - 1, 0));
|
||||
}
|
||||
if ($event.ctrlKey && $event.key == 'Enter') {
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import { Component, DoCheck, OnInit } from '@angular/core';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
import { Language } from '../../../../core/enums/language.enum';
|
||||
import { StorageService } from '../../../../core/services/storage.service';
|
||||
import { LanguageService } from '../../../../core/services/language.service';
|
||||
|
||||
@Component({
|
||||
|
||||
@ -584,5 +584,41 @@
|
||||
"NL": "Néérlandais",
|
||||
"OC": "oc",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -588,5 +588,40 @@
|
||||
"NL": "Néérlandais",
|
||||
"OC": "oc",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user