diff --git a/README.md b/README.md index 8f2efe53..8c67857d 100644 --- a/README.md +++ b/README.md @@ -39,7 +39,7 @@ EN: All documentation is available in the "doc" folder, mainly in French because ## LIBRARIES USED -| status | lib name | usage | +| status | lib choice_label | usage | | :-------------: | -------------------------------------------------------------- | --------------------------------------------------------- | | | [axios](https://github.com/axios/axios) | http client | | | [bulma](https://bulma.io/) | CSS framework | @@ -71,7 +71,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular ## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +Run `ng generate component component-choice_label` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. ## Build diff --git a/src/app/core/models/poll.model.ts b/src/app/core/models/poll.model.ts index 2937fa84..a1916fb1 100644 --- a/src/app/core/models/poll.model.ts +++ b/src/app/core/models/poll.model.ts @@ -27,7 +27,7 @@ export class Poll { public static adaptFromLocalJsonServer( item: Pick ): Poll { - const poll = new Poll( + return new Poll( new User(item.owner.pseudo, item.owner.email, undefined), item.slug, item.title, @@ -48,7 +48,5 @@ export class Poll { return choice; }) ); - - return poll; } } diff --git a/src/app/features/administration/administration.component.html b/src/app/features/administration/administration.component.html index 8b3dab9f..b6389629 100644 --- a/src/app/features/administration/administration.component.html +++ b/src/app/features/administration/administration.component.html @@ -1,12 +1,11 @@ -
-
-

Administration

-
-
+ + + + +
-

{{ 'dates.title' | translate }}

diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html index 71e3e56f..a8c8f46c 100644 --- a/src/app/features/administration/form/form.component.html +++ b/src/app/features/administration/form/form.component.html @@ -5,17 +5,40 @@ {{ 'creation.want' | translate }} - + -
-
- + +
+

Choix de réponse

+ +

Aliases

+ + + +
+ + + + + +
+ +
+ +
+ - -
-

Choix de réponse

-
-

Aliases

- - -
- - 
-					choice :
-						{{ choice | json }}
-
- -
-
- - - -

Choix de réponses

- 
-			choicesFormArray :
-				{{ choicesFormArray | json }}
-
+ /> +
+
+ + +
- -
- {{ urlPrefix }} - - {{ slug.value }} - - - -
-
-
-
-
-

- Type de sondage -

- - +
+ + + -

Version complète du formulaire

- - Nombre de jours avant expiration - - - - - Les participants pourront consulter les résultats - - - Les choix possibles concerneront des dates - - - Le sondage sera protégé par un mot de passe - - - Vous recevrez un mail à chaque nouvelle participation - - - Vous recevrez un mail à chaque nouveau commentaire - - - La réponse « peut-être » sera disponible - + + + - -
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - 
-poll :
-		{{ poll | json }}
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + version longue du formulaire activée + + diff --git a/src/app/features/administration/form/form.component.scss b/src/app/features/administration/form/form.component.scss index 83c66da9..a9730dd5 100644 --- a/src/app/features/administration/form/form.component.scss +++ b/src/app/features/administration/form/form.component.scss @@ -3,5 +3,14 @@ textarea { padding: 0.5em; border: solid #eee; + + width: 90%; + } + .form-field { + display: block; + margin-top: 1em; + } + .fa { + margin-right: 1em; } } diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts index dfb7b592..700e1eb8 100644 --- a/src/app/features/administration/form/form.component.ts +++ b/src/app/features/administration/form/form.component.ts @@ -2,9 +2,7 @@ import { Component, Input, OnInit } from '@angular/core'; import { Poll } from '../../../core/models/poll.model'; import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { UuidService } from '../../../core/services/uuid.service'; -import { DateService } from '../../../core/services/date.service'; import { ApiService } from '../../../core/services/api.service'; -import { Choice } from '../../../core/models/choice.model'; @Component({ selector: 'app-admin-form', @@ -14,10 +12,7 @@ import { Choice } from '../../../core/models/choice.model'; export class FormComponent implements OnInit { @Input() public poll?: Poll; - public pollFormGroup: FormGroup; - public configurationFormGroup: FormGroup; - - public choicesFormArray: FormArray; // possible choices to answer + public form: FormGroup; public longFormVersionEnabled = true; @@ -26,65 +21,69 @@ export class FormComponent implements OnInit { constructor(private fb: FormBuilder, private uuidService: UuidService, private apiService: ApiService) {} ngOnInit(): void { - this.pollFormGroup = this.fb.group({ - title: [this.poll ? this.poll.title : '', [Validators.required]], - slug: [this.poll ? this.poll.slug : this.uuidService.getUUID(), [Validators.required]], - description: [this.poll ? this.poll.description : ''], - }); - // add dynamically elements to add choices - this.choicesFormArray = this.fb.array([ - { - choices: this.poll.choices.forEach((elem: Choice) => { - return { - label: [elem.label, [Validators.required]], - imageUrl: [elem.imageUrl, null], - }; - }), - }, - ]); - - this.configurationFormGroup = this.fb.group({ - isAboutDate: [this.poll ? this.poll.configuration.isAboutDate : false, [Validators.required]], - isProtectedByPassword: [ - this.poll ? this.poll.configuration.isProtectedByPassword : false, - [Validators.required], - ], - isOwnerNotifiedByEmailOnNewVote: [ - this.poll ? this.poll.configuration.isOwnerNotifiedByEmailOnNewVote : false, - [Validators.required], - ], - isOwnerNotifiedByEmailOnNewComment: [ - this.poll ? this.poll.configuration.isOwnerNotifiedByEmailOnNewComment : false, - [Validators.required], - ], - isMaybeAnswerAvailable: [ - this.poll ? this.poll.configuration.isMaybeAnswerAvailable : false, - [Validators.required], - ], - areResultsPublic: [this.poll ? this.poll.configuration.areResultsPublic : true, [Validators.required]], - expiracyNumberOfDays: [ - this.poll ? DateService.diffInDays(new Date(), this.poll.configuration.expires) : 60, - [Validators.required], - ], - }); + this.initFormDefault(); } public createPoll(): void { - if (this.pollFormGroup.valid && this.configurationFormGroup.valid) { + if (this.form.valid && this.form.valid) { console.log('Le sondage est correctement rempli, prêt à enregistrer.'); // TODO : save the poll this.apiService.createPoll(this.poll); } } + public updateSlug() { let newValueFormatted = 'TODO'; - this.pollFormGroup.patchValue({ slug: newValueFormatted }); + this.form.patchValue({ slug: newValueFormatted }); } get choices() { - return this.choicesFormArray.get('aliases') as FormArray; + return this.form.get('choices') as FormArray; } + addChoice() { - this.choices.push(this.fb.control('')); + this.choices.push( + this.fb.group({ + label: this.fb.control('', [Validators.required]), + imageUrl: ['', [Validators.required]], + }) + ); + } + + deleteChoiceField(index: number) { + if (this.choices.length !== 1) { + this.choices.removeAt(index); + } + } + + reinitChoices() { + this.choices.setValue([]); + this.addChoice(); + } + + private initFormDefault() { + this.form = this.fb.group({ + title: ['', [Validators.required, Validators.minLength(12)]], + creatorPseudo: ['', [Validators.required]], + creatorEmail: ['', [Validators.required]], + slug: [this.uuidService.getUUID(), [Validators.required]], + description: ['', [Validators.required]], + choices: new FormArray([]), + isAboutDate: [true, [Validators.required]], + isProtectedByPassword: [false, [Validators.required]], + isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]], + isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]], + isMaybeAnswerAvailable: [false, [Validators.required]], + areResultsPublic: [true, [Validators.required]], + expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]], + }); + console.log('this.form ', this.form); + + this.form.patchValue({ + title: 'mon titre', + description: 'répondez SVP <3 ! *-* ', + choices: ['matin', 'midi'], + }); + // this.addChoice(); } } diff --git a/src/app/features/old-stuff/custom-lib/date-value-accessor/date-value-accessor.ts b/src/app/features/old-stuff/custom-lib/date-value-accessor/date-value-accessor.ts index 8f9874cb..b4b66947 100644 --- a/src/app/features/old-stuff/custom-lib/date-value-accessor/date-value-accessor.ts +++ b/src/app/features/old-stuff/custom-lib/date-value-accessor/date-value-accessor.ts @@ -11,7 +11,7 @@ export const DATE_VALUE_ACCESSOR: any = { * The accessor for writing a value and listening to changes on a date input element * * ### Example - * `` + * `` */ @Directive({ // this selector changes the previous behavior silently and might break existing code diff --git a/src/app/features/old-stuff/pages/dates/dates.component.ts b/src/app/features/old-stuff/pages/dates/dates.component.ts index b0cb1bbe..31458e4d 100644 --- a/src/app/features/old-stuff/pages/dates/dates.component.ts +++ b/src/app/features/old-stuff/pages/dates/dates.component.ts @@ -55,7 +55,7 @@ export class DatesComponent extends BaseComponent implements OnInit { date_object: new Date(), timeList: [], }); - const selector = '[ng-reflect-name="dateChoices_' + (this.config.dateList.length - 1) + '"]'; + const selector = '[ng-reflect-choice_label="dateChoices_' + (this.config.dateList.length - 1) + '"]'; this.cd.detectChanges(); const elem = this.document.querySelector(selector); if (elem) { @@ -90,7 +90,7 @@ export class DatesComponent extends BaseComponent implements OnInit { */ addTimeToDate(config: any, id: number) { config.timeList.push({ literal: '' }); - const selector = '[ng-reflect-name="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]'; + const selector = '[ng-reflect-choice_label="dateTime_' + id + '_Choices_' + (config.timeList.length - 1) + '"]'; this.cd.detectChanges(); const elem = this.document.querySelector(selector); if (elem) { diff --git a/src/app/features/old-stuff/pages/example/kind/kind.component.html b/src/app/features/old-stuff/pages/example/kind/kind.component.html index a1dec45c..10c0467e 100644 --- a/src/app/features/old-stuff/pages/example/kind/kind.component.html +++ b/src/app/features/old-stuff/pages/example/kind/kind.component.html @@ -105,7 +105,7 @@ -

Input name

+

Input choice_label


@@ -201,7 +201,7 @@
-

Label + input name

+

Label + input choice_label

@@ -223,7 +223,7 @@
-

Input name with info

+

Input choice_label with info

like here
diff --git a/src/app/features/old-stuff/pages/home/home.component.html b/src/app/features/old-stuff/pages/home/home.component.html index fa5b21ce..2a8e8e66 100644 --- a/src/app/features/old-stuff/pages/home/home.component.html +++ b/src/app/features/old-stuff/pages/home/home.component.html @@ -36,7 +36,7 @@
- +