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

dynamically add choices

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>

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