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

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
| 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

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

@ -27,7 +27,7 @@ export class Poll {
public static adaptFromLocalJsonServer(
item: Pick<Poll, 'owner' | 'title' | 'description' | 'slug' | 'configuration' | 'comments' | 'choices'>
): 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;
}
}

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

@ -1,12 +1,11 @@
<div class="columns">
<div class="column has-text-centered">
<h1>Administration</h1>
</div>
</div>
<!--<div class="columns">-->
<!-- <div class="column has-text-centered">-->
<!-- <h1>Administration</h1>-->
<!-- </div>-->
<!--</div>-->
<div class="columns">
<div class="column">
<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>

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

@ -5,17 +5,40 @@
<span class="pre-selector" i18n>
{{ 'creation.want' | translate }}
</span>
<button class="btn btn--warning">
Reset all
<button class="btn btn--warning"><span class="i fa fa-refresh"></span> Reset</button>
<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>
<div class="simple">
<form [formGroup]="pollFormGroup">
<label for="title">Titre</label>
<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
#title
matInput
placeholder="title posée, sujet"
placeholder="Votre titre de sondage"
formControlName="title"
id="title"
autofocus="autofocus"
@ -32,26 +55,33 @@
>
<i class="fa fa-close"></i>
</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 />
<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">
<!-- The repeated alias template -->
<pre class="debug padded warning">
choice :
{{ choice | json }}
</pre
>
<label>
choices:
<input type="text" [formControlName]="i" />
</label>
</div>
</div>
<hr />
<label for="descr">Description (optionnel)</label>
<textarea
#description
@ -71,104 +101,121 @@
>
<i class="fa fa-close"></i>
</button>
<h2>Choix de réponses</h2>
<pre class="debug padded warning">
choicesFormArray :
{{ choicesFormArray | json }}
</pre
>
<label for="slug"
>Url pour les participants
<!-- <label-->
<!-- for='slug'-->
<!-- >Url pour les participants-->
<button
mat-button
*ngIf="slug.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="slug.value = ''"
>
<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 />
</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>
<!-- <button-->
<!-- mat-button-->
<!-- *ngIf='slug.value'-->
<!-- matSuffix-->
<!-- mat-icon-button-->
<!-- aria-label='Clear'-->
<!-- (click)="slug.value = ''"-->
<!-- >-->
<!-- <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 >-->
<h2>Version complète du formulaire</h2>
<mat-form-field appearance="outline" class="is-flex">
<mat-label>Nombre de jours avant expiration</mat-label>
<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>
<!-- </div >-->
<!-- <h2 >Version complète du formulaire</h2 >-->
<!-- <div-->
<!-- 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]="!pollFormGroup.valid || !configurationFormGroup.valid"
>
<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>
<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 {
padding: 0.5em;
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 { 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();
}
}

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
*
* ### Example
* `<input type="date" name="myBirthday" ngModel useValueAsDate>`
* `<input type="date" choice_label="myBirthday" ngModel useValueAsDate>`
*/
@Directive({
// 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(),
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) {

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>
<h3>Input name</h3>
<h3>Input choice_label</h3>
<input type="name" name="" id="" /><br />
<input type="name" name="" id="" value="texte" />
@ -201,7 +201,7 @@
</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>
<input type="name" name="test-text" id="test-text" />
</article>
@ -223,7 +223,7 @@
</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>
</article>

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

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

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

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