tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

creation for simple date works

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[]) {

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 { BaseConfigComponent } from './form/base-config/base-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 { AppModule } from '../../app.module';
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 }),
DateValueAccessorModule,
DragDropModule,
DialogModule,
],
})
export class AdministrationModule {}

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

@ -92,24 +92,11 @@
<hr />
<div class="main-box is-boxed">
<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>
<app-day-list [dateList]="dateList" [hasSeveralHours]="form.value.hasSeveralHours"></app-day-list>
<app-day-list
[form]="form"
[dateList]="dateList"
[hasSeveralHours]="form.value.hasSeveralHours"
></app-day-list>
</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;
intervalDaysDefault = 7;
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
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
selectionKind = 'range';
@ -53,14 +53,6 @@ export class DateSelectComponent implements OnInit {
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 {}
/**
@ -84,56 +76,4 @@ export class DateSelectComponent implements OnInit {
this.dateList.map((elem) => (elem.timeList = Object.create(defaultTimeOfDay)));
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="column">
<!-- TODO lier au formulaire les valeurs des dates-->
<h2>Dates</h2>
<div *ngFor="let choice of dateList; index as id" class="date-choice" cdkDrag>
<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>
<div class="day-list-container">
<div class="columns">
<div class="column">
<!-- ajouter une date-->
<button class="btn btn--primary" (click)="addChoice()">
{{ 'dates.add' | translate }}
</button>
<button (click)="addTimeToDate(choice, id)" *ngIf="hasSeveralHours" class="btn btn--primary">
{{ 'dates.add_time' | translate }}
</div>
<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>
<div *ngIf="hasSeveralHours" class="several-times">
plage horaire distincte
<br />
<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>
<br />
<br />
<div *ngFor="let choice of dateList; index as id" class="date-choice" cdkDrag>
<input
[(ngModel)]="choice.date_object"
(keyup)="keyOnChoice($event, id)"
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="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>
<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>

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 { DateChoice } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
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({
selector: 'app-day-list',
templateUrl: './day-list.component.html',
styleUrls: ['./day-list.component.scss'],
})
export class DayListComponent implements OnInit {
export class DayListComponent {
@Input()
public dateList: DateChoice[] = [];
form: FormGroup;
@Input()
public dateList: Array<any> = [];
@Input()
public hasSeveralHours: boolean;
timeList: any;
display = false;
constructor(@Inject(DOCUMENT) private document: any) {}
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
);
}
constructor(
private toastService: ToastService,
@Inject(DOCUMENT) private document: any,
private storageService: StorageService
) {
this.setDemoValues();
}
reinitChoices(): void {
this.dateList = [];
}
setDemoValues(): void {
this.addChoice('orange');
this.addChoice('raisin');
this.addChoice('abricot');
}
dropDayItem(event: any): void {
// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex);
if (event.previousContainer === event.container) {
@ -46,6 +52,7 @@ export class DayListComponent implements OnInit {
);
}
}
/**
* add a time period to a specific date choice,
* focus on the new input
@ -56,13 +63,14 @@ export class DayListComponent implements OnInit {
this.timeList.push({
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();
const elem = this.document.querySelector(selector);
if (elem) {
elem.focus();
}
}
/**
* handle keyboard shortcuts
* @param $event
@ -71,9 +79,9 @@ export class DayListComponent implements OnInit {
keyOnChoice($event: KeyboardEvent, choice_number: number): void {
$event.preventDefault();
console.log('this.choices.length', this.choices.length);
console.log('this. dateList.length', this.dateList.length);
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
// reset field with Ctrl + D
// add a field with Ctrl + N
@ -81,10 +89,10 @@ export class DayListComponent implements OnInit {
// go to next choice with arrow down
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);
}
if ($event.key == 'ArrowDown') {
if ($event.ctrlKey && ($event.key == 'ArrowDown' || $event.key == 'ArrowRight')) {
// add a field if we are on the last choice
if (lastChoice) {
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 { TimeSlices } from '../../../../../../../../mocks/old-stuff/config/defaultConfigs';
import { moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-time-list',
@ -13,4 +14,18 @@ export class TimeListComponent implements OnInit {
constructor() {}
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
);
}
}
}