From 8cac3d18621c35f7f3d73fcc699017f04cefdc6b Mon Sep 17 00:00:00 2001 From: Baptiste Lemoine Date: Thu, 29 Oct 2020 18:43:19 +0100 Subject: [PATCH] start form --- doc/cadrage/specifications-fonctionnelles.md | 2 +- mocks/db.json | 4 +- src/app/core/models/configuration.model.ts | 4 +- src/app/core/models/poll.model.ts | 10 +- .../administration.component.html | 3 +- .../administration/administration.module.ts | 3 +- .../administration/form/form.component.html | 139 ++++++++++++++++++ .../administration/form/form.component.scss | 7 + .../form/form.component.spec.ts | 24 +++ .../administration/form/form.component.ts | 69 +++++++++ .../stepper/stepper.component.html | 4 +- .../stepper/stepper.component.ts | 3 +- .../consultation/consultation.component.html | 2 +- .../consultation/consultation.component.ts | 4 +- .../user-polls/user-polls.component.html | 2 +- 15 files changed, 260 insertions(+), 20 deletions(-) create mode 100644 src/app/features/administration/form/form.component.html create mode 100644 src/app/features/administration/form/form.component.scss create mode 100644 src/app/features/administration/form/form.component.spec.ts create mode 100644 src/app/features/administration/form/form.component.ts diff --git a/doc/cadrage/specifications-fonctionnelles.md b/doc/cadrage/specifications-fonctionnelles.md index a6928a1f..b5d2f4d3 100644 --- a/doc/cadrage/specifications-fonctionnelles.md +++ b/doc/cadrage/specifications-fonctionnelles.md @@ -96,7 +96,7 @@ L'export d'un sondage et des résultats d'un sondage est possible au format CSV. # Nouveautés secondaires * Choix de réponses possibles. Proposer de ne répondre que « oui » ou rien, ou aller dans la nuance en proposant « oui », « peut-être », « non », « ? ». *# Redondance ou le choix de réponses possibles de la première phrase concerne un autre choix ?* -* Insertion d'images dans le sondage de type texte, avec des URL uniquement. Une seule image par question possible ou rien. +* Insertion d'images dans le sondage de type texte, avec des URL uniquement. Une seule image par title possible ou rien. * Thème sombre. * Boutons pour copier dans le presse-papier les liens publics et privés / admin des sondages. * Limiter le nombre de participants maximum diff --git a/mocks/db.json b/mocks/db.json index 9bd5c953..c1bf054c 100644 --- a/mocks/db.json +++ b/mocks/db.json @@ -19,7 +19,7 @@ "expires": "2020-12-31" }, "ownerId": 1, - "question": "Quelle date pour le picnic ?", + "title": "Quelle date pour le picnic ?", "description": "Gros badass picnic en plein air ! Come on !" }, { @@ -37,7 +37,7 @@ "expires": "2020-11-30" }, "ownerId": 2, - "question": "On fait quoi pendant les vacances ?", + "title": "On fait quoi pendant les vacances ?", "description": "Vacances en famille" } ], diff --git a/src/app/core/models/configuration.model.ts b/src/app/core/models/configuration.model.ts index e68aae88..bc17a948 100644 --- a/src/app/core/models/configuration.model.ts +++ b/src/app/core/models/configuration.model.ts @@ -1,7 +1,7 @@ import { environment } from '../../../environments/environment'; import { DateService } from '../services/date.service'; -export class Configuration { +export class PollConfiguration { constructor( public isAboutDate: boolean = false, public isProtectedByPassword: boolean = false, @@ -16,7 +16,7 @@ export class Configuration { ) ) {} - public static isArchived(configuration: Configuration): boolean { + public static isArchived(configuration: PollConfiguration): boolean { return configuration.expires ? DateService.isDateInPast(configuration.expires) : undefined; } } diff --git a/src/app/core/models/poll.model.ts b/src/app/core/models/poll.model.ts index 161363f7..2937fa84 100644 --- a/src/app/core/models/poll.model.ts +++ b/src/app/core/models/poll.model.ts @@ -2,16 +2,16 @@ import { environment } from 'src/environments/environment'; import { Choice } from './choice.model'; import { Comment } from './comment.model'; -import { Configuration } from './configuration.model'; +import { PollConfiguration } from './configuration.model'; import { User } from './user.model'; export class Poll { constructor( public owner: User, public slug: string, - public question: string, + public title: string, public description?: string, - public configuration: Configuration = new Configuration(), + public configuration: PollConfiguration = new PollConfiguration(), public comments: Comment[] = [], public choices: Choice[] = [] ) {} @@ -25,12 +25,12 @@ export class Poll { } public static adaptFromLocalJsonServer( - item: Pick + item: Pick ): Poll { const poll = new Poll( new User(item.owner.pseudo, item.owner.email, undefined), item.slug, - item.question, + item.title, item.description, item.configuration, item.comments diff --git a/src/app/features/administration/administration.component.html b/src/app/features/administration/administration.component.html index 153d5584..8b3dab9f 100644 --- a/src/app/features/administration/administration.component.html +++ b/src/app/features/administration/administration.component.html @@ -6,8 +6,7 @@
- -

Administration de sondage

+

{{ 'dates.title' | translate }}

diff --git a/src/app/features/administration/administration.module.ts b/src/app/features/administration/administration.module.ts index cd210ce5..7b7d9361 100644 --- a/src/app/features/administration/administration.module.ts +++ b/src/app/features/administration/administration.module.ts @@ -8,9 +8,10 @@ import { AdministrationRoutingModule } from './administration-routing.module'; import { AdministrationComponent } from './administration.component'; import { StepperComponent } from './stepper/stepper.component'; import { NamingComponent } from './naming/naming.component'; +import { FormComponent } from './form/form.component'; @NgModule({ - declarations: [AdministrationComponent, StepperComponent, NamingComponent], + declarations: [AdministrationComponent, StepperComponent, NamingComponent, FormComponent], imports: [ AdministrationRoutingModule, CommonModule, diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html new file mode 100644 index 00000000..4bb6afc3 --- /dev/null +++ b/src/app/features/administration/form/form.component.html @@ -0,0 +1,139 @@ +
+

+ {{ 'creation.title' | translate }} +

+ + {{ 'creation.want' | translate }} + + + +
+
+ + + + + + + + + +
+ {{ urlPrefix }} + + {{ slug.value }} + + + +
+
+
+
+
+

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 }}
+
+
diff --git a/src/app/features/administration/form/form.component.scss b/src/app/features/administration/form/form.component.scss new file mode 100644 index 00000000..83c66da9 --- /dev/null +++ b/src/app/features/administration/form/form.component.scss @@ -0,0 +1,7 @@ +:host { + input, + textarea { + padding: 0.5em; + border: solid #eee; + } +} diff --git a/src/app/features/administration/form/form.component.spec.ts b/src/app/features/administration/form/form.component.spec.ts new file mode 100644 index 00000000..62a17377 --- /dev/null +++ b/src/app/features/administration/form/form.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FormComponent } from './form.component'; + +describe('FormComponent', () => { + let component: FormComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [FormComponent], + }).compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(FormComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts new file mode 100644 index 00000000..8ea81d61 --- /dev/null +++ b/src/app/features/administration/form/form.component.ts @@ -0,0 +1,69 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { Poll } from '../../../core/models/poll.model'; +import { 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'; + +@Component({ + selector: 'app-admin-form', + templateUrl: './form.component.html', + styleUrls: ['./form.component.scss'], +}) +export class FormComponent implements OnInit { + @Input() + public poll?: Poll; + public pollFormGroup: FormGroup; + public configurationFormGroup: FormGroup; + public longFormVersionEnabled = true; + + public urlPrefix: string = window.location.origin + '/participation/'; + + 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 : ''], + }); + + 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], + ], + }); + } + + public createPoll(): void { + if (this.pollFormGroup.valid && this.configurationFormGroup.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.setValue({'slug' : newValueFormatted); + // } +} diff --git a/src/app/features/administration/stepper/stepper.component.html b/src/app/features/administration/stepper/stepper.component.html index 3ee2864e..268af8f0 100644 --- a/src/app/features/administration/stepper/stepper.component.html +++ b/src/app/features/administration/stepper/stepper.component.html @@ -4,7 +4,7 @@ Informations du sondage Titre - +