Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

dynamically add choices

Browse Source
This commit is contained in:
tykayn 2020-11-03 15:44:08 +01:00 committed by Baptiste Lemoine
parent 4bec5828b3
commit 8c119739a7
13 changed files with 266 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -39,7 +39,7 @@ EN: All documentation is available in the "doc" folder, mainly in French because
## LIBRARIES USED ## LIBRARIES USED
| status | lib name | usage | | status | lib choice_label | usage |
| :-------------: | -------------------------------------------------------------- | --------------------------------------------------------- | | :-------------: | -------------------------------------------------------------- | --------------------------------------------------------- |
| | [axios](https://github.com/axios/axios) | http client | | | [axios](https://github.com/axios/axios) | http client |
| | [bulma](https://bulma.io/) | CSS framework | | | [bulma](https://bulma.io/) | CSS framework |
@ -71,7 +71,7 @@ This project was generated with [Angular CLI](https://github.com/angular/angular
## Code scaffolding ## 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 ## Build

4
src/app/core/models/poll.model.ts
View File

@ -27,7 +27,7 @@ export class Poll {
public static adaptFromLocalJsonServer( public static adaptFromLocalJsonServer(
item: Pick<Poll, 'owner' | 'title' | 'description' | 'slug' | 'configuration' | 'comments' | 'choices'> item: Pick<Poll, 'owner' | 'title' | 'description' | 'slug' | 'configuration' | 'comments' | 'choices'>
): Poll { ): Poll {
const poll = new Poll( return new Poll(
new User(item.owner.pseudo, item.owner.email, undefined), new User(item.owner.pseudo, item.owner.email, undefined),
item.slug, item.slug,
item.title, item.title,
@ -48,7 +48,5 @@ export class Poll {
return choice; return choice;
}) })
); );
return poll;
} }
} }

11
src/app/features/administration/administration.component.html
View File

@ -1,12 +1,11 @@
<div class="columns"> <!--<div class="columns">-->
<div class="column has-text-centered"> <!-- <div class="column has-text-centered">-->
<h1>Administration</h1> <!-- <h1>Administration</h1>-->
</div> <!-- </div>-->
</div> <!--</div>-->
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
<app-admin-form [poll]="poll"></app-admin-form> <app-admin-form [poll]="poll"></app-admin-form>
<h1 class="title is-1"><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'dates.title' | translate }}</h1>
</div> </div>
</div> </div>

325
src/app/features/administration/form/form.component.html
View File

@ -5,17 +5,40 @@
<span class="pre-selector" i18n> <span class="pre-selector" i18n>
{{ 'creation.want' | translate }} {{ 'creation.want' | translate }}
</span> </span>
<button class="btn btn--warning"> <button class="btn btn--warning"><span class="i fa fa-refresh"></span> Reset</button>
Reset all
</button>
<div class="simple"> <form [formGroup]="form">
<form [formGroup]="pollFormGroup"> <div class="form-field">
<label for="title">Titre</label> <h2>Choix de réponse</h2>
<span formArrayName="choices">
<h3>Aliases</h3>
<button (click)="addChoice()">
<i class="fa fa-plus"></i>
Add choice
</button>
<button (click)="reinitChoices()">
<i class="fa fa-recycle"></i>
réinitialiser
</button>
<div *ngFor="let choice of choices.controls; let i = index">
<span class="form-row" [formGroup]="choice">
<input formControlName="label" placeholder="Enter a choice description" />
<input formControlName="imageUrl" placeholder="URL de l' image" />
<button (click)="deleteChoiceField(i)">
<i class="fa fa-times"></i>
</button>
</span>
</div>
</span>
</div>
<!-- <div class='simple' >-->
<div class="form-field">
<label class="hidden" for="title">Titre</label>
<input <input
#title #title
matInput matInput
placeholder="title posée, sujet" placeholder="Votre titre de sondage"
formControlName="title" formControlName="title"
id="title" id="title"
autofocus="autofocus" autofocus="autofocus"
@ -32,143 +55,167 @@
> >
<i class="fa fa-close"></i> <i class="fa fa-close"></i>
</button> </button>
</div>
<br /> <div>
<h2>Choix de réponse</h2> <label class="hidden" for="creatorEmail">creator email</label>
<div formArrayName="choicesFormArray"> <input
<h3>Aliases</h3> #title
<button (click)="addChoice()">Add Alias</button>
<div *ngFor="let choice of choices.controls; let i = index">
<!-- The repeated alias template -->
<pre class="debug padded warning">
choice :
{{ choice | json }}
</pre
>
<label>
choices:
<input type="text" [formControlName]="i" />
</label>
</div>
</div>
<label for="descr">Description (optionnel)</label>
<textarea
#description
matInput matInput
id="descr" placeholder="mon-email@example.com"
placeholder="Description" formControlName="creatorEmail"
formControlName="description" id="creatorEmail"
required required
></textarea> />
<button </div>
mat-button <div>
*ngIf="description.value" <label class="hidden" for="selector">kind</label>
matSuffix <select formControlName="isAboutDate" id="selector">
mat-icon-button <option value="true" name="polltype_date">
aria-label="Clear" {{ 'creation.kind.date' | translate }}
(click)="description.value = ''" </option>
> <option value="false" name="polltype_classic">
<i class="fa fa-close"></i> {{ 'creation.kind.classic' | translate }}
</button> </option>
<h2>Choix de réponses</h2> </select>
<pre class="debug padded warning"> </div>
choicesFormArray :
{{ choicesFormArray | json }}
</pre
>
<label for="slug" <br />
>Url pour les participants
<button <hr />
mat-button <label for="descr">Description (optionnel)</label>
*ngIf="slug.value" <textarea
matSuffix #description
mat-icon-button matInput
aria-label="Clear" id="descr"
(click)="slug.value = ''" placeholder="Description"
> formControlName="description"
<i class="fa fa-close"></i> required
</button> ></textarea>
</label> <button
<br /> mat-button
<span *ngIf="description.value"
>{{ urlPrefix }} matSuffix
<strong> mat-icon-button
{{ slug.value }} aria-label="Clear"
</strong> (click)="description.value = ''"
</span> >
<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required /> <i class="fa fa-close"></i>
<br /> </button>
</form>
</div>
<div class="complete" *ngIf="longFormVersionEnabled">
<form [formGroup]="configurationFormGroup">
<h2>
Type de sondage
</h2>
<button class="btn" [ngClass]="{ 'is-primary': isAboutDate.value }" (click)="isAboutDate = true">
Spécial date
</button>
<button [ngClass]="{ 'is-primary': !isAboutDate.value }" (click)="isAboutDate = false">
Classique - textes
</button>
<h2>Version complète du formulaire</h2> <!-- <label-->
<mat-form-field appearance="outline" class="is-flex"> <!-- for='slug'-->
<mat-label>Nombre de jours avant expiration</mat-label> <!-- >Url pour les participants-->
<input
#expiracy
matInput
type="number"
placeholder="Nombre de jours avant expiration"
formControlName="expiracyNumberOfDays"
required
/>
<button
mat-button
*ngIf="expiracy.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="expiracy.value = ''"
>
<i class="fa fa-close"></i>
</button>
</mat-form-field>
<mat-checkbox class="is-flex" formControlName="areResultsPublic">
Les participants pourront consulter les résultats
</mat-checkbox>
<mat-checkbox class="is-flex" formControlName="isAboutDate">
Les choix possibles concerneront des dates
</mat-checkbox>
<mat-checkbox class="is-flex" formControlName="isProtectedByPassword">
Le sondage sera protégé par un mot de passe
</mat-checkbox>
<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
Vous recevrez un mail à chaque nouvelle participation
</mat-checkbox>
<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
Vous recevrez un mail à chaque nouveau commentaire
</mat-checkbox>
<mat-checkbox class="is-flex" formControlName="isMaybeAnswerAvailable">
La réponse « peut-être » sera disponible
</mat-checkbox>
<button <!-- <button-->
mat-button <!-- mat-button-->
(click)="createPoll()" <!-- *ngIf='slug.value'-->
[disabled]="!pollFormGroup.valid || !configurationFormGroup.valid" <!-- matSuffix-->
> <!-- mat-icon-button-->
Enregistrer le sondage <!-- aria-label='Clear'-->
</button> <!-- (click)="slug.value = ''"-->
</form> <!-- >-->
</div> <!-- <i class='fa fa-close' ></i >-->
<!-- </button >-->
<!-- </label >-->
<!-- <br />-->
<!-- <span-->
<!-- >{{ urlPrefix }}-->
<!-- <strong >-->
<!-- {{ slug.value }}-->
<!-- </strong >-->
<!-- </span >-->
<!-- <input-->
<!-- #slug-->
<!-- matInput-->
<!-- id='slug'-->
<!-- placeholder='Url'-->
<!-- formControlName='slug'-->
<!-- required />-->
<!-- <br />-->
<!-- </div >-->
<!-- <h2 >-->
<!-- Type de sondage-->
<!-- </h2 >-->
<!-- <h1 class="title is-1"><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'dates.title' | translate }}</h1>-->
<!-- <button-->
<!-- class='btn'-->
<!-- (click)='form.setValue({isAboutDate: true})' >-->
<!-- Spécial date-->
<!-- </button >-->
<!-- <button-->
<!-- class='btn'-->
<!-- (click)='form.setValue({isAboutDate: false})' >-->
<!-- Classique - textes-->
<!-- </button >-->
<!-- <button-->
<!-- [ngClass]="{ 'is-primary': !isAboutDate.value }"-->
<!-- (click)='isAboutDate = false' >-->
<!-- Classique - textes-->
<!-- </button >-->
<pre class="debug padded warning"> <!-- </div >-->
poll : <!-- <h2 >Version complète du formulaire</h2 >-->
{{ poll | json }} <!-- <div-->
</pre <!-- appearance='outline'-->
> <!-- class='is-flex' >-->
<!-- <mat-label >Nombre de jours avant expiration</mat-label >-->
<!-- <input-->
<!-- #expiracy-->
<!-- id='expiracy'-->
<!-- matInput-->
<!-- type='number'-->
<!-- placeholder='Nombre de jours avant expiration'-->
<!-- formControlName='expiracyNumberOfDays'-->
<!-- required-->
<!-- />-->
<!-- <button-->
<!-- mat-button-->
<!-- *ngIf='expiracy.value'-->
<!-- matSuffix-->
<!-- mat-icon-button-->
<!-- aria-label='Clear'-->
<!-- (click)="expiracy.value = ''"-->
<!-- >-->
<!-- <i class='fa fa-close' ></i >-->
<!-- </button >-->
<!-- </div >-->
<!-- <mat-checkbox-->
<!-- class='is-flex'-->
<!-- formControlName='areResultsPublic' >-->
<!-- Les participants pourront consulter les résultats-->
<!-- </mat-checkbox >-->
<!-- <mat-checkbox-->
<!-- class='is-flex'-->
<!-- formControlName='isAboutDate' >-->
<!-- Les choix possibles concerneront des dates-->
<!-- </mat-checkbox >-->
<!-- <mat-checkbox-->
<!-- class='is-flex'-->
<!-- formControlName='isProtectedByPassword' >-->
<!-- Le sondage sera protégé par un mot de passe-->
<!-- </mat-checkbox >-->
<!-- <mat-checkbox-->
<!-- class='is-flex'-->
<!-- formControlName='isOwnerNotifiedByEmailOnNewVote' >-->
<!-- Vous recevrez un mail à chaque nouvelle participation-->
<!-- </mat-checkbox >-->
<!-- <mat-checkbox-->
<!-- class='is-flex'-->
<!-- formControlName='isOwnerNotifiedByEmailOnNewComment' >-->
<!-- Vous recevrez un mail à chaque nouveau commentaire-->
<!-- </mat-checkbox >-->
<!-- <mat-checkbox-->
<!-- class='is-flex'-->
<!-- formControlName='isMaybeAnswerAvailable' >-->
<!-- La réponse « peut-être » sera disponible-->
<!-- </mat-checkbox >-->
<button mat-button (click)="createPoll()" [disabled]="!form.valid || !form.valid">
<i class="fa fa-save"></i>
Enregistrer le sondage
</button>
<span class="complete well" *ngIf="longFormVersionEnabled">
version longue du formulaire activée
</span>
</form>
</div> </div>

9
src/app/features/administration/form/form.component.scss
View File

@ -3,5 +3,14 @@
textarea { textarea {
padding: 0.5em; padding: 0.5em;
border: solid #eee; border: solid #eee;
width: 90%;
}
.form-field {
display: block;
margin-top: 1em;
}
.fa {
margin-right: 1em;
} }
} }

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

@ -2,9 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
import { Poll } from '../../../core/models/poll.model'; import { Poll } from '../../../core/models/poll.model';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UuidService } from '../../../core/services/uuid.service'; import { UuidService } from '../../../core/services/uuid.service';
import { DateService } from '../../../core/services/date.service';
import { ApiService } from '../../../core/services/api.service'; import { ApiService } from '../../../core/services/api.service';
import { Choice } from '../../../core/models/choice.model';
@Component({ @Component({
selector: 'app-admin-form', selector: 'app-admin-form',
@ -14,10 +12,7 @@ import { Choice } from '../../../core/models/choice.model';
export class FormComponent implements OnInit { export class FormComponent implements OnInit {
@Input() @Input()
public poll?: Poll; public poll?: Poll;
public pollFormGroup: FormGroup; public form: FormGroup;
public configurationFormGroup: FormGroup;
public choicesFormArray: FormArray; // possible choices to answer
public longFormVersionEnabled = true; public longFormVersionEnabled = true;
@ -26,65 +21,69 @@ export class FormComponent implements OnInit {
constructor(private fb: FormBuilder, private uuidService: UuidService, private apiService: ApiService) {} constructor(private fb: FormBuilder, private uuidService: UuidService, private apiService: ApiService) {}
ngOnInit(): void { ngOnInit(): void {
this.pollFormGroup = this.fb.group({ this.initFormDefault();
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],
],
});
} }
public createPoll(): void { 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.'); console.log('Le sondage est correctement rempli, prêt à enregistrer.');
// TODO : save the poll // TODO : save the poll
this.apiService.createPoll(this.poll); this.apiService.createPoll(this.poll);
} }
} }
public updateSlug() { public updateSlug() {
let newValueFormatted = 'TODO'; let newValueFormatted = 'TODO';
this.pollFormGroup.patchValue({ slug: newValueFormatted }); this.form.patchValue({ slug: newValueFormatted });
} }
get choices() { get choices() {
return this.choicesFormArray.get('aliases') as FormArray; return this.form.get('choices') as FormArray;
} }
addChoice() { 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();
} }
} }

2
src/app/features/old-stuff/custom-lib/date-value-accessor/date-value-accessor.ts
View File

@ -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 * The accessor for writing a value and listening to changes on a date input element
* *
* ### Example * ### Example
* `<input type="date" name="myBirthday" ngModel useValueAsDate>` * `<input type="date" choice_label="myBirthday" ngModel useValueAsDate>`
*/ */
@Directive({ @Directive({
// this selector changes the previous behavior silently and might break existing code // this selector changes the previous behavior silently and might break existing code

4
src/app/features/old-stuff/pages/dates/dates.component.ts
View File

@ -55,7 +55,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
date_object: new Date(), date_object: new Date(),
timeList: [], 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(); this.cd.detectChanges();
const elem = this.document.querySelector(selector); const elem = this.document.querySelector(selector);
if (elem) { if (elem) {
@ -90,7 +90,7 @@ export class DatesComponent extends BaseComponent implements OnInit {
*/ */
addTimeToDate(config: any, id: number) { addTimeToDate(config: any, id: number) {
config.timeList.push({ literal: '' }); 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(); this.cd.detectChanges();
const elem = this.document.querySelector(selector); const elem = this.document.querySelector(selector);
if (elem) { if (elem) {

6
src/app/features/old-stuff/pages/example/kind/kind.component.html
View File

@ -105,7 +105,7 @@
<label for="">Un label pour les labelliser tous</label> <label for="">Un label pour les labelliser tous</label>
<h3>Input name</h3> <h3>Input choice_label</h3>
<input type="name" name="" id="" /><br /> <input type="name" name="" id="" /><br />
<input type="name" name="" id="" value="texte" /> <input type="name" name="" id="" value="texte" />
@ -201,7 +201,7 @@
</article> </article>
<article> <article>
<h2>Label + input name</h2> <h2>Label + input choice_label</h2>
<label for="test-text">Ceci est un label un peu long mais pas trop</label> <label for="test-text">Ceci est un label un peu long mais pas trop</label>
<input type="name" name="test-text" id="test-text" /> <input type="name" name="test-text" id="test-text" />
</article> </article>
@ -223,7 +223,7 @@
</article> </article>
<article> <article>
<h2>Input name with info</h2> <h2>Input choice_label with info</h2>
<a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a> <a href="https://sketch.cloud/s/00A80/a/MAl5q7">like here</a>
</article> </article>

2
src/app/features/old-stuff/pages/home/home.component.html
View File

@ -36,7 +36,7 @@
</div> </div>
<div> <div>
<label for="my_name"> {{ 'creation.name' | translate }} : </label> <label for="my_name"> {{ 'creation.choice_label' | translate }} : </label>
<input <input
[(ngModel)]="config.myName" [(ngModel)]="config.myName"
id="my_name" id="my_name"

2
src/app/features/old-stuff/pages/voting/voting-choice/voting-choice.component.ts
View File

@ -17,7 +17,7 @@ interface VoteChoice {
/** /**
* each vote choice takes a configuration from the container of all choices. * each vote choice takes a configuration from the container of all choices.
* this component is used to select a date choice, or a name answer * this component is used to select a date choice, or a choice_label answer
*/ */
@Component({ @Component({
selector: 'app-voting-choice', selector: 'app-voting-choice',

2
src/app/features/old-stuff/services/config.service.ts
View File

@ -164,7 +164,7 @@ export class ConfigService extends PollConfig {
} }
/** /**
* get one poll by its slug name * get one poll by its slug choice_label
* @param url * @param url
*/ */
getPollByURL(url: string) { getPollByURL(url: string) {

4
src/styles/dev-utilities/_helpers.scss
View File

@ -18,3 +18,7 @@
.nobold { .nobold {
font-weight: normal; font-weight: normal;
} }
.hidden {
display: none;
}