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

remove lib date value accessor, start date interval form

Browse Source
This commit is contained in:
Tykayn 2021-06-10 14:12:57 +02:00 committed by tykayn
parent 075d434c6f
commit 6638ba1060
10 changed files with 91 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -45,7 +45,6 @@
"@fullcalendar/core": "^4.4.0",
"@ngx-translate/core": "^12.1.2",
"@ngx-translate/http-loader": "^5.0.0",
"angular-date-value-accessor": "^1.0.2",
"axios": "^0.19.2",
"bulma": "^0.9.0",
"bulma-switch": "^2.0.0",

2
src/app/core/services/toast.service.ts
View File

@ -8,7 +8,7 @@ export class ToastService {
constructor(private _snackBar: MatSnackBar) {}
public display(message: string, action?: string): void {
const config: MatSnackBarConfig = { duration: 2000 };
const config: MatSnackBarConfig = { duration: 4000, verticalPosition: 'top' };
this._snackBar.open(message, action, config);
}
}

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

@ -9,7 +9,6 @@ import { AdministrationComponent } from './administration.component';
import { StepperComponent } from './stepper/stepper.component';
import { NamingComponent } from './naming/naming.component';
import { FormComponent } from './form/form.component';
import { DateValueAccessorModule } from 'angular-date-value-accessor';
import { SuccessComponent } from './success/success.component';
import { DateSelectComponent } from './form/date-select/date-select.component';
import { TextSelectComponent } from './form/text-select/text-select.component';
@ -47,7 +46,6 @@ import { TimeListComponent } from './form/date/list/time/time-list.component';
SharedModule,
FormsModule,
TranslateModule.forChild({ extend: true }),
DateValueAccessorModule,
DragDropModule,
],
})

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

@ -6,7 +6,7 @@
{{ 'dates.add' | translate }}
<!-- interval-->
<!-- <app-date-interval></app-date-interval>-->
<app-date-interval [form]="form"></app-date-interval>
</form>
<div class="dates-list">
<!-- différentes horaires-->

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

@ -11,6 +11,7 @@ import { DateChoice, defaultTimeOfDay, TimeSlices } from '../../../../../../mock
import { TranslateService } from '@ngx-translate/core';
import { StorageService } from '../../../../core/services/storage.service';
import { environment } from '../../../../../environments/environment';
@Component({
selector: 'app-date-select',
@ -26,7 +27,7 @@ export class DateSelectComponent implements OnInit {
today = new Date();
endDateInterval: string;
intervalDaysDefault = 7;
intervalDaysDefault = environment.interval_days_default;
dateChoices: DateChoice[] = []; // sets of dateChoices as strings, config to set identical time for dateChoices in a special dateChoices poll
timeSlices: TimeSlices[] = []; // ranges of time expressed as strings

40
src/app/features/administration/form/date/interval/interval.component.html
View File

@ -13,11 +13,36 @@
<fieldset *ngIf="showDateInterval" class="date-interval form-row is-boxed">
<div class="columns">
<div class="column">
<app-wip-todo></app-wip-todo>
{{ 'dates.interval_propose' | translate }}
<input type="text" formControlName="natural_lang_interval" />
<sub>
exemple "du 10 au 17", ou "lundi à samedi"
</sub>
<button (click)="addNaturalInstruction()" class="btn btn-block btn--primary">
interpréter
</button>
</div>
</div>
<div class="columns">
<div class="column">
<!-- <mat-form-field appearance="fill">-->
<!-- <mat-label>Enter a date range</mat-label>-->
<!-- <mat-date-range-input [formGroup]="form" [rangePicker]="picker">-->
<!-- <input matStartDate formControlName="startDateInterval" placeholder="Start date">-->
<!-- <input matEndDate formControlName="endDateInterval" placeholder="End date">-->
<!-- </mat-date-range-input>-->
<!-- <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>-->
<!-- <mat-date-range-picker #picker></mat-date-range-picker>-->
<!-- <mat-error *ngIf="form.controls.startDateInterval.hasError('matStartDateInvalid')">Invalid start date</mat-error>-->
<!-- <mat-error *ngIf="form.controls.endDateInterval.hasError('matEndDateInvalid')">Invalid end date</mat-error>-->
<!-- </mat-form-field>-->
</div>
<div class="column">
<label for="start_interval" class="hidden">start</label>
<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
{{ form.value.startDateInterval }}
<input id="start_interval" formControlName="startDateInterval" type="date" />
</div>
</div>
<div class="columns">
@ -27,12 +52,19 @@
<div class="column">
<label for="end_interval" class="hidden">end</label>
<input id="end_interval" formControlName="endDateInterval" type="date" />
<div class="well">
{{ form.value.endDateInterval }}
{{ form.value.endDateInterval }}
<div class="span resume">
<div class="well">
Du
{{ form.value.startDateInterval | date: 'EEEE d':'Europe/Paris':'fr_FR' }}
au
{{ form.value.endDateInterval | date: 'EEEE d':'Europe/Paris':'fr_FR' }}
, soit {{ intervalDays }} jours.
</div>
</div>
</div>
</div>
<div class="span resume">soit {{ intervalDays }} jours.</div>
<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }}

36
src/app/features/administration/form/date/interval/interval.component.ts
View File

@ -22,19 +22,42 @@ export class IntervalComponent implements OnInit {
endDateIntervalString: string;
dateList: DateChoice[]; // sets of dateChoices as strings, config to set identical time for dateChoices in a special dateChoices poll
dateCalendarEnum: Date[] = [new Date('02/09/2021')];
natural_lang_interval: string;
constructor(public dateUtilities: DateUtilitiesService, private toastService: ToastService) {}
ngOnInit(): void {
this.form.get('startDateInterval').valueChanges.subscribe((val) => {
console.log('val', val);
if (typeof val === typeof String) {
this.startDateIntervalString = val;
this.countDays();
} else {
this.startDateInterval = val;
}
});
this.form.get('endDateInterval').valueChanges.subscribe((val) => {
console.log('val', val);
if (typeof val === typeof String) {
this.endDateIntervalString = val;
this.countDays();
}
// this.endDateInterval = val;
// this.countDays();
});
this.setDefaultDatesForInterval();
}
countDays(): void {
this.intervalDays = this.dateUtilities.countDays(
this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
);
// this.cd.detectChanges();
this.intervalDays = this.dateUtilities.countDays(
this.startDateInterval,
this.endDateInterval
// this.dateUtilities.parseInputDateToDateObject(this.startDateIntervalString),
// this.dateUtilities.parseInputDateToDateObject(this.endDateIntervalString)
);
console.log('this.intervalDays ', this.intervalDays);
}
/**
@ -90,4 +113,9 @@ export class IntervalComponent implements OnInit {
this.countDays();
}
}
addNaturalInstruction() {
this.toastService.display(`TODO addNaturalInstruction`);
console.log('TODO', this.natural_lang_interval);
}
}

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

@ -31,7 +31,7 @@ export class DayListComponent {
@Inject(DOCUMENT) private document: any,
private storageService: StorageService
) {
this.setDemoTextChoices();
// this.setDemoTextChoices();
}
reinitChoices(): void {
@ -45,7 +45,6 @@ export class DayListComponent {
}
dropDayItem(event: any): void {
// moveItemInArray(this.timeSlices, event.previousIndex, event.currentIndex);
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
@ -134,8 +133,6 @@ export class DayListComponent {
date_object: new Date(),
});
// this.cd.detectChanges();
this.focusOnChoice(this.storageService.dateChoices.length - 1);
}

27
src/app/features/administration/form/form.component.ts
View File

@ -10,6 +10,7 @@ import { environment } from '../../../../environments/environment';
import { PollUtilitiesService } from '../../../core/services/poll.utilities.service';
import { StorageService } from '../../../core/services/storage.service';
import { DateUtilitiesService } from '../../../core/services/date.utilities.service';
import { formatDate } from '@angular/common';
@Component({
selector: 'app-admin-form',
@ -87,6 +88,7 @@ export class FormComponent implements OnInit, AfterViewInit {
allowComments: [true, [Validators.required]],
password: ['', []],
voterEmailList: ['', []],
natural_lang_interval: ['', []],
dateCreated: [creationDate, [Validators.required]],
hasSeveralHours: [false, [Validators.required]],
hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
@ -109,12 +111,9 @@ export class FormComponent implements OnInit, AfterViewInit {
}
setDefaultFormValues(): void {
const dateStart = this.dateUtils.formateDateToInputStringNg(new Date());
const dateEnd = this.dateUtils.formateDateToInputStringNg(this.dateUtils.addDaysToDate(5, new Date()));
this.form.patchValue({
creatorPseudo: 'Anne Onyme',
creatorEmail: '',
creatorEmail: 'anne_onyme@anonymous_email.com',
description: 'RSVP',
isAboutDate: true,
hasSeveralHours: false,
@ -130,12 +129,19 @@ export class FormComponent implements OnInit, AfterViewInit {
isZeroKnoledge: true,
areResultsPublic: true,
allowComments: true,
expiresDaysDelay: 60,
maxCountOfAnswers: 150,
expiresDaysDelay: environment.expiresDaysDelay,
maxCountOfAnswers: environment.maxCountOfAnswers,
allowNewDateTime: false,
startDateInterval: dateStart,
endDateInterval: dateEnd,
// startDateInterval: formatDate(new Date(), 'yyyy-MM-dd', 'fr_FR'),
endDateInterval: formatDate(
this.dateUtils.addDaysToDate(environment.interval_days_default, new Date()),
'yyyy-MM-dd',
'fr_FR'
),
});
console.log("this.form.controls['startDateInterval']", this.form.controls['startDateInterval']);
this.form.controls['startDateInterval'].setValue(formatDate(new Date(), 'yyyy-MM-dd', 'fr_FR'));
console.log("this.form.controls['startDateInterval']", this.form.controls['startDateInterval']);
this.automaticSlug();
}
@ -147,17 +153,12 @@ export class FormComponent implements OnInit, AfterViewInit {
this.form.patchValue({ creatorPseudo: 'Chuck Norris', creatorEmail: 'chucknorris@example.com' });
const dateStart = this.dateUtils.formateDateToInputStringNg(new Date());
const dateEnd = this.dateUtils.formateDateToInputStringNg(this.dateUtils.addDaysToDate(5, new Date()));
this.form.patchValue({
title: title,
custom_url: this.pollUtilitiesService.makeSlugFromString(title),
description: 'répondez SVP <3 ! *-*',
creatorPseudo: 'Chuck Norris',
creatorEmail: 'chucknorris@example.com',
dateStart,
dateEnd,
});
}

6
src/environments/environment.ts
View File

@ -11,11 +11,13 @@ export const environment = {
frontDomain: 'http://127.0.0.1:4200',
production: false,
display_routes: true,
// autofill: true,
autofill: false,
autofill: true,
// autofill: false,
showDemoWarning: true,
autoSendNewPoll: false,
interval_days_default: 7,
expiresDaysDelay: 60,
maxCountOfAnswers: 150,
appTitle: 'funky',
appVersion: '0.6.0',
appLogo: 'assets/img/logo.png',