tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

creation for simple date works

Browse Source
This commit is contained in:
Tykayn 2021-05-17 16:15:54 +02:00 committed by tykayn
parent 003f27ae82
commit a99290186c
7 changed files with 202 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/core/services/storage.service.ts
View File

@ -52,7 +52,9 @@ export class StorageService {
); );
} }
this.dateList = this.dateUtilities.makeDefaultDateChoices(); if (!this.dateList.length) {
this.dateList = this.dateUtilities.makeDefaultDateChoices();
}
} }
setChoicesForVoteStack(choices_list: Choice[]) { setChoicesForVoteStack(choices_list: Choice[]) {

3
src/app/features/administration/administration.module.ts
View File

@ -16,7 +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'; import { CalendarModule, DialogModule } from 'primeng';
import { DragDropModule } from '@angular/cdk/drag-drop'; import { DragDropModule } from '@angular/cdk/drag-drop';
import { AppModule } from '../../app.module'; import { AppModule } from '../../app.module';
import { IntervalComponent } from './form/date/interval/interval.component'; import { IntervalComponent } from './form/date/interval/interval.component';
@ -51,6 +51,7 @@ import { TimeListComponent } from './form/date/list/time/time-list.component';
TranslateModule.forChild({ extend: true }), TranslateModule.forChild({ extend: true }),
DateValueAccessorModule, DateValueAccessorModule,
DragDropModule, DragDropModule,
DialogModule,
], ],
}) })
export class AdministrationModule {} export class AdministrationModule {}

23
src/app/features/administration/form/date-select/date-select.component.html
View File

@ -92,24 +92,11 @@
<hr /> <hr />
<div class="main-box is-boxed"> <div class="main-box is-boxed">
<div class="columns"> <app-day-list
<div class="column"> [form]="form"
<!-- ajouter une date--> [dateList]="dateList"
<button class="btn btn--primary" (click)="addChoice()"> [hasSeveralHours]="form.value.hasSeveralHours"
{{ 'dates.add' | translate }} ></app-day-list>
</button>
</div>
<div class="column">
<span class="count-dates title">
{{ dateList.length }}
</span>
<span>
{{ 'dates.count_dates' | translate }}
</span>
</div>
</div>
<app-day-list [dateList]="dateList" [hasSeveralHours]="form.value.hasSeveralHours"></app-day-list>
</div> </div>
</div> </div>
</div> </div>

64
src/app/features/administration/form/date-select/date-select.component.ts
View File

@ -32,8 +32,8 @@ export class DateSelectComponent implements OnInit {
endDateInterval: string; endDateInterval: string;
intervalDaysDefault = 7; intervalDaysDefault = 7;
dateList: DateChoice[]; // sets of dateList as strings, config to set identical time for dateList in a special dateList poll dateList: DateChoice[] = []; // sets of dateList as strings, config to set identical time for dateList in a special dateList poll
timeList: TimeSlices[]; // ranges of time expressed as strings timeList: TimeSlices[] = []; // ranges of time expressed as strings
selectionKind = 'range'; selectionKind = 'range';
@ -53,14 +53,6 @@ export class DateSelectComponent implements OnInit {
this.timeList = this.storageService.timeSlices; this.timeList = this.storageService.timeSlices;
} }
get choices(): FormArray {
return this.form.get('choices') as FormArray;
}
get dateChoices() {
return this.form.get('dateChoices') as FormArray;
}
ngOnInit(): void {} ngOnInit(): void {}
/** /**
@ -84,56 +76,4 @@ export class DateSelectComponent implements OnInit {
this.dateList.map((elem) => (elem.timeList = Object.create(defaultTimeOfDay))); this.dateList.map((elem) => (elem.timeList = Object.create(defaultTimeOfDay)));
this.toastService.display('périodes horaires réinitialisées'); this.toastService.display('périodes horaires réinitialisées');
} }
addChoice(optionalLabel = ''): void {
if (this.form.value.kind == 'date') {
this.storageService.dateList.push({
literal: '',
timeList: [],
date_object: new Date(),
});
} else {
const newControlGroup = this.fb.group({
label: this.fb.control('', [Validators.required]),
imageUrl: ['', [Validators.required]],
});
if (optionalLabel) {
newControlGroup.patchValue({
label: optionalLabel,
imageUrl: 'mon url',
});
}
this.dateChoices.push(newControlGroup);
}
// this.cd.detectChanges();
console.log('this.choices.length', this.storageService.dateList.length);
this.focusOnChoice(this.storageService.dateList.length - 1);
}
focusOnChoice(index): void {
const selector = '#choice_label_' + index;
const elem = this.document.querySelector(selector);
if (elem) {
elem.focus();
}
}
deleteChoiceField(index: number): void {
if (this.choices.length !== 1) {
this.choices.removeAt(index);
}
}
reinitChoices(): void {
this.choices.setValue([]);
}
setDemoValues(): void {
this.addChoice('orange');
this.addChoice('raisin');
this.addChoice('abricot');
}
} }

142
src/app/features/administration/form/date/list/day/day-list.component.html
View File

@ -1,36 +1,120 @@
<div class="columns days-list" cdkDropList [cdkDropListData]="dateList" (cdkDropListDropped)="dropDayItem($event)"> <div class="day-list-container">
<div class="column"> <div class="columns">
<!-- TODO lier au formulaire les valeurs des dates--> <div class="column">
<h2>Dates</h2> <!-- ajouter une date-->
<div *ngFor="let choice of dateList; index as id" class="date-choice" cdkDrag> <button class="btn btn--primary" (click)="addChoice()">
<input {{ 'dates.add' | translate }}
[(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>
<button (click)="addTimeToDate(choice, id)" *ngIf="hasSeveralHours" class="btn btn--primary"> </div>
{{ 'dates.add_time' | translate }} <div class="column">
<span class="count-dates title">
{{ dateList.length }}
</span>
<span>
{{ 'dates.count_dates' | translate }}
</span>
</div>
</div>
<div class="columns days-list" cdkDropList [cdkDropListData]="dateList" (cdkDropListDropped)="dropDayItem($event)">
<div class="column">
<h2>Dates</h2>
<button class="btn button-help" (click)="openKeyboardShortcutsModal()">
💁 Raccourcis
</button> </button>
<div *ngIf="hasSeveralHours" class="several-times"> <br />
plage horaire distincte <br />
<br /> <div *ngFor="let choice of dateList; index as id" class="date-choice" cdkDrag>
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice"> <input
<input [(ngModel)]="choice.date_object"
[(ngModel)]="timeItem.literal" (keyup)="keyOnChoice($event, id)"
name="dateTime_{{ id }}_Choices_{{ idTime }}" name="dateChoices_{{ id }}"
id="dateTime_{{ id }}_Choices_{{ idTime }}" id="dateChoices_{{ id }}"
type="text" useValueAsDate
/> type="date"
<button (click)="choice.timeList.splice(idTime, 1)" class="btn btn-warning"> />
<i class="fa fa-times" aria-hidden="true"></i> <button (click)="dateList.splice(id, 1)" class="btn btn-warning">
</button> <i class="fa fa-times" aria-hidden="true"></i>
</button>
<button (click)="addTimeToDate(choice, id)" *ngIf="hasSeveralHours" class="btn btn--primary">
{{ 'dates.add_time' | translate }}
</button>
<div *ngIf="hasSeveralHours" class="several-times">
plage horaire distincte
<br />
<app-time-list [timeSlices]="choice.timeList"></app-time-list>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<p-dialog class="url-dialog" [(visible)]="display" [modal]="true" [closable]="true">
<p-header>
💁 Aide, Raccourcis clavier
<button class="btn button-help pull-right" (click)="display = false">
<i class="fa fa-times"></i>
</button>
</p-header>
Vous pouvez naviguer d'un champ de date à un autre avec les flèches du clavier.
<app-wip-todo></app-wip-todo>
<br />
<br />
<table>
<thead>
<tr>
<th>
Fonction
</th>
<th>
Raccourci
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Créer un nouveau choix
</td>
<td>
Ctrl + N
</td>
</tr>
<tr>
<td>
Naviguer vers le champ suivant. Créée un nouveau champ si effectué sur le dernier champ.
</td>
<td>
Ctrl + flèche bas
</td>
</tr>
<tr>
<td>
réinitialiser le champ actuel
</td>
<td>
Ctrl + effacer
<br />
ou
<br />
Ctrl + supprimer
</td>
</tr>
<tr>
<td>
Alterner entre un sondage de type Date et un sondage texte
</td>
<td>
Alt + D
</td>
</tr>
<td>
Tout envoyer
</td>
<td>
Ctrl + entrée
</td>
</tbody>
</table>
</p-dialog>
</div> </div>

85
src/app/features/administration/form/date/list/day/day-list.component.ts
View File

@ -2,37 +2,43 @@ import { Component, Inject, Input, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import { DateChoice } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs'; import { DateChoice } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { LocalStorageService } from 'ngx-webstorage';
import { ToastService } from '../../../../../../core/services/toast.service';
import { StorageService } from '../../../../../../core/services/storage.service';
@Component({ @Component({
selector: 'app-day-list', selector: 'app-day-list',
templateUrl: './day-list.component.html', templateUrl: './day-list.component.html',
styleUrls: ['./day-list.component.scss'], styleUrls: ['./day-list.component.scss'],
}) })
export class DayListComponent implements OnInit { export class DayListComponent {
@Input() @Input()
public dateList: DateChoice[] = []; form: FormGroup;
@Input()
public dateList: Array<any> = [];
@Input() @Input()
public hasSeveralHours: boolean; public hasSeveralHours: boolean;
timeList: any; timeList: any;
display = false;
constructor(@Inject(DOCUMENT) private document: any) {} constructor(
private toastService: ToastService,
ngOnInit(): void {} @Inject(DOCUMENT) private document: any,
private storageService: StorageService
dropTimeItem(event: any): void { ) {
// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex); this.setDemoValues();
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
} }
reinitChoices(): void {
this.dateList = [];
}
setDemoValues(): void {
this.addChoice('orange');
this.addChoice('raisin');
this.addChoice('abricot');
}
dropDayItem(event: any): void { dropDayItem(event: any): void {
// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex); // moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex);
if (event.previousContainer === event.container) { if (event.previousContainer === event.container) {
@ -46,6 +52,7 @@ export class DayListComponent implements OnInit {
); );
} }
} }
/** /**
* add a time period to a specific date choice, * add a time period to a specific date choice,
* focus on the new input * focus on the new input
@ -56,13 +63,14 @@ export class DayListComponent implements OnInit {
this.timeList.push({ this.timeList.push({
literal: '', literal: '',
}); });
const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (this.timeList.length - 1) + '"]'; const selector = '[ng-reflect-choice_label="dateTime_' + id + '_ dateList_' + (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();
} }
} }
/** /**
* handle keyboard shortcuts * handle keyboard shortcuts
* @param $event * @param $event
@ -71,9 +79,9 @@ export class DayListComponent implements OnInit {
keyOnChoice($event: KeyboardEvent, choice_number: number): void { keyOnChoice($event: KeyboardEvent, choice_number: number): void {
$event.preventDefault(); $event.preventDefault();
console.log('this.choices.length', this.choices.length); console.log('this. dateList.length', this.dateList.length);
console.log('choice_number', choice_number); console.log('choice_number', choice_number);
const lastChoice = this.choices.length - 1 === choice_number; const lastChoice = this.dateList.length - 1 === choice_number;
// TODO handle shortcuts // TODO handle shortcuts
// reset field with Ctrl + D // reset field with Ctrl + D
// add a field with Ctrl + N // add a field with Ctrl + N
@ -81,10 +89,10 @@ export class DayListComponent implements OnInit {
// go to next choice with arrow down // go to next choice with arrow down
console.log('$event', $event); console.log('$event', $event);
if ($event.key == 'ArrowUp' && choice_number > 0) { if ($event.ctrlKey && $event.key == 'ArrowUp' && choice_number > 0) {
this.focusOnChoice(choice_number - 1); this.focusOnChoice(choice_number - 1);
} }
if ($event.key == 'ArrowDown') { if ($event.ctrlKey && ($event.key == 'ArrowDown' || $event.key == 'ArrowRight')) {
// add a field if we are on the last choice // add a field if we are on the last choice
if (lastChoice) { if (lastChoice) {
this.addChoice(); this.addChoice();
@ -107,4 +115,35 @@ export class DayListComponent implements OnInit {
} }
} }
} }
addChoice(optionalLabel = ''): void {
this.storageService.dateList.push({
literal: '',
timeList: [],
date_object: new Date(),
});
// this.cd.detectChanges();
console.log('this.choices.length', this.storageService.dateList.length);
this.focusOnChoice(this.storageService.dateList.length - 1);
}
focusOnChoice(index): void {
const selector = '#choice_label_' + index;
const elem = this.document.querySelector(selector);
if (elem) {
elem.focus();
}
}
deleteChoiceField(index: number): void {
if (this.dateList.length !== 1) {
this.dateList.splice(index, 1);
}
}
openKeyboardShortcutsModal() {
this.display = true;
}
} }

15
src/app/features/administration/form/date/list/time/time-list.component.ts
View File

@ -1,5 +1,6 @@
import { Component, Input, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { TimeSlices } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs'; import { TimeSlices } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({ @Component({
selector: 'app-time-list', selector: 'app-time-list',
@ -13,4 +14,18 @@ export class TimeListComponent implements OnInit {
constructor() {} constructor() {}
ngOnInit(): void {} ngOnInit(): void {}
dropTimeItem(event: any): void {
// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex);
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(
event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex
);
}
}
} }