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

togglable advanced options

Browse Source
This commit is contained in:
tykayn 2020-11-06 12:04:38 +01:00
parent d07f51dd91
commit d3042b3723
7 changed files with 184 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/core/components/home/home.component.html
View File

@ -33,6 +33,19 @@
<img src="assets/img/kind/classic.jpeg" alt="sondage date" /> <img src="assets/img/kind/classic.jpeg" alt="sondage date" />
</div> </div>
</div> </div>
<div class="column">
Prise en main Framadate est un service en ligne permettant de planifier un rendez-vous ou prendre des
décisions rapidement et simplement. Aucune inscription préalable n’est nécessaire. Voici comment ça
fonctionne : Créez un sondage Déterminez les dates ou les sujets à choisir Envoyez le lien du sondage à
vos amis ou collègues Discutez et prenez votre décision Voulez-vous voir un exemple ? Le logiciel
Framadate est initialement basé sur Studs un logiciel développé par l'Université de Strasbourg.
Aujourd'hui, son développement est assuré par l’association Framasoft. Ce logiciel requiert l’activation
du JavaScript et des cookies. Il est compatible avec les navigateurs web suivants : Microsoft Internet
Explorer 9+ Google Chrome 19+ Firefox 12+ Safari 5+ Opera 11+ Il est régi par la licence CeCILL-B.
Cultivez votre jardin Pour participer au développement du logiciel, proposer des améliorations ou
simplement le télécharger, rendez-vous sur le site de développement. Si vous souhaitez installer ce
logiciel pour votre propre usage et ainsi gagner en autonomie, nous vous aidons sur :
</div>
</div> </div>
</div> </div>
</section> </section>

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

@ -13,25 +13,27 @@
<span class="pre-selector"> <span class="pre-selector">
{{ 'creation.want' | translate }} {{ 'creation.want' | translate }}
</span> </span>
<div class="kind-of-poll"> <div class="kind-of-poll columns">
<h1 class="title is-1"> <div class="column">
<i class="fa fa-calendar" aria-hidden="true"></i> {{ 'dates.title' | translate }} <button
</h1> class="btn-block btn"
<button [ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
class="btn" (click)="form.controls.isAboutDate.setValue(true)"
[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }" >
(click)="form.controls.isAboutDate.setValue(true)" <i class="fa fa-calendar"></i>
> {{ 'creation.kind.date' | translate }}
<i class="fa fa-calendar"></i> </button>
{{ 'creation.kind.date' | translate }} </div>
</button> <div class="column">
<button <button
[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }" class="btn-block btn btn-default"
(click)="form.controls.isAboutDate.setValue(false)" [ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
> (click)="form.controls.isAboutDate.setValue(false)"
<i class="fa fa-stats"></i> >
{{ 'creation.kind.classic' | translate }} <i class="fa fa-stats"></i>
</button> {{ 'creation.kind.classic' | translate }}
</button>
</div>
</div> </div>
<span> <span>
@ -60,8 +62,22 @@
</button> </button>
</div> </div>
<fieldset class="date-kind">
<!-- choix spécialement pour les dates-->
</fieldset>
<div class="form-field"> <div class="form-field">
<h2>Choix de réponse</h2> <h2>
{{ 'choices.title' | translate }}
</h2>
{{ 'dates.add' | translate }}
<p>
<i>
{{ 'choices.helper' | translate }}
</i>
</p>
{{ 'choices.answer_preset_1' | translate }}
{{ 'choices.add' | translate }}
{{ 'choices.continue' | translate }}
<span> <span>
<span class="columns"> <span class="columns">
<span class="column"> <span class="column">
@ -81,18 +97,18 @@
<span *ngFor="let choice of choices.controls; let i = index"> <span *ngFor="let choice of choices.controls; let i = index">
<div class="form-row" [formGroup]="choice"> <div class="form-row" [formGroup]="choice">
<div class="columns"> <div class="columns">
<div class="column">{{ i * 1 + 1 }})</div>
<div class="column">
<label for="label" class="hidden">label</label>
<input formControlName="label" id="label" placeholder="Enter a choice description" />
<br />
<label for="imageUrl" class="imageUrl">image Url</label>
<input formControlName="imageUrl" id="imageUrl" placeholder="URL de l' image" />
</div>
<div class="column"> <div class="column">
<button class="btn btn-warning" (click)="deleteChoiceField(i)"> <button class="btn btn-warning" (click)="deleteChoiceField(i)">
<i class="fa fa-times"></i> <i class="fa fa-times"></i>
</button> </button>
{{ i * 1 + 1 }})
</div>
<div class="column">
<label for="label" class="hidden">label</label>
<input formControlName="label" id="label" placeholder="Enter a choice description" />
<br />
<label for="imageUrl" class="hidden">image Url</label>
<input formControlName="imageUrl" id="imageUrl" placeholder="URL de l' image" />
</div> </div>
</div> </div>
</div> </div>
@ -101,7 +117,17 @@
</div> </div>
<div> <div>
<label class="hidden" for="creatorEmail">creator email</label> <label class="" for="creatorEmail">
<span>
{{ 'creation.name' | translate }}
</span>
</label>
<label class="hidden" for="creatorPseudo">
<span>
{{ 'creation.email' | translate }}
</span>
</label>
<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required />
<input <input
#title #title
matInput matInput
@ -111,116 +137,103 @@
required required
/> />
</div> </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 />
<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
<hr /> <i class="fa fa-save"></i>
<label for="descr">Description (optionnel)</label> {{ 'creation.advanced' | translate }}
<textarea
#description
matInput
id="descr"
placeholder="Description"
formControlName="description"
required
></textarea>
<button
mat-button
*ngIf="description.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="description.value = ''"
>
<i class="fa fa-close"></i>
</button> </button>
<hr />
<label for="slug" <fieldset class="complete well" *ngIf="advancedDisplayEnabled">
>Url pour les participants <h2>{{ 'creation.advanced' | translate }}</h2>
<label for="descr">Description (optionnel)</label>
<textarea
#description
matInput
id="descr"
placeholder="Description"
formControlName="description"
required
></textarea>
<button <button
mat-button mat-button
*ngIf="slug.value" *ngIf="description.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="description.value = ''"
>
<i class="fa fa-close"></i>
</button>
<br />
<label for="slug"
>Url pour les participants
<i class="fa fa-close"></i>
</label>
<br />
<span
>{{ urlPrefix }}
<strong>
{{ form.controls.slug.value }}
</strong>
</span>
<button
mat-button
*ngIf="form.controls.slug.value"
matSuffix matSuffix
mat-icon-button mat-icon-button
aria-label="Clear" aria-label="Clear"
(click)="slug.value = ''" (click)="slug.value = ''"
> ></button>
<i class="fa fa-close"></i> <input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
</button> <br />
</label> <div appearance="outline" class="is-not-flex">
<br /> <mat-label>Nombre de jours avant expiration</mat-label>
<span <input
>{{ urlPrefix }} #expiracy
<strong> id="expiracy"
{{ slug.value }} matInput
</strong> type="number"
</span> placeholder="Nombre de jours avant expiration"
<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required /> formControlName="expiracyNumberOfDays"
<br /> required
<h2>Version complète du formulaire</h2> />
<div appearance="outline" class="is-flex"> <button
<mat-label>Nombre de jours avant expiration</mat-label> mat-button
<input *ngIf="expiracy.value"
#expiracy matSuffix
id="expiracy" mat-icon-button
matInput aria-label="Clear"
type="number" (click)="expiracy.value = ''"
placeholder="Nombre de jours avant expiration" >
formControlName="expiracyNumberOfDays" <i class="fa fa-close"></i>
required </button>
/>
<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 class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
<i class="fa fa-save"></i>
Options avancées
</button>
<div class="columns">
<div class="column">
<span class="complete well" *ngIf="advancedDisplayEnabled">
version longue du formulaire activée
</span>
</div> </div>
<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
Les participants pourront consulter les résultats
</mat-checkbox>
<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
Les choix possibles concerneront des dates
</mat-checkbox>
<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
Le sondage sera protégé par un mot de passe
</mat-checkbox>
<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
Vous recevrez un mail à chaque nouvelle participation
</mat-checkbox>
<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
Vous recevrez un mail à chaque nouveau commentaire
</mat-checkbox>
<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
La réponse « peut-être » sera disponible
</mat-checkbox>
</fieldset>
<div class="columns">
<div class="column"></div>
<div class="column"> <div class="column">
<button class="btn is-success" (click)="createPoll()" [disabled]="!form.valid || !form.valid"> <button class="btn is-success" (click)="createPoll()" [disabled]="!form.valid || !form.valid">
<i class="fa fa-save"></i> <i class="fa fa-save"></i>

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

@ -13,9 +13,18 @@
} }
.form-row { .form-row {
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.25em;
border: solid 1px #ddd;
border-left: solid 3px $primary_color; border-left: solid 3px $primary_color;
padding-left: 1em; padding-left: 1em;
padding-top: 0.5em;
padding-bottom: 0.5em;
} }
.fa { .fa {
margin-right: 1ch;
&.fa-times,
&.fa-trash {
margin-right: 0;
}
} }
} }

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

@ -34,23 +34,23 @@ export class FormComponent implements OnInit {
public createPoll(): void { public createPoll(): void {
if (this.form.valid && this.form.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.');
let newpoll = this.pollService.newPollFromForm(this.form); const newpoll = this.pollService.newPollFromForm(this.form);
// TODO : save the poll // TODO : save the poll
this.apiService.createPoll(newpoll); this.apiService.createPoll(newpoll);
} }
} }
public updateSlug() { public updateSlug(): void {
let newValueFormatted = 'TODO'; const newValueFormatted = 'TODO';
this.form.patchValue({ slug: newValueFormatted }); this.form.patchValue({ slug: newValueFormatted });
} }
get choices() { get choices(): FormArray {
return this.form.get('choices') as FormArray; return this.form.get('choices') as FormArray;
} }
addChoice(optionalLabel: string = '') { addChoice(optionalLabel = ''): void {
let newControlGroup = this.fb.group({ const newControlGroup = this.fb.group({
label: this.fb.control('', [Validators.required]), label: this.fb.control('', [Validators.required]),
imageUrl: ['', [Validators.required]], imageUrl: ['', [Validators.required]],
}); });
@ -63,17 +63,17 @@ export class FormComponent implements OnInit {
this.choices.push(newControlGroup); this.choices.push(newControlGroup);
} }
deleteChoiceField(index: number) { deleteChoiceField(index: number): void {
if (this.choices.length !== 1) { if (this.choices.length !== 1) {
this.choices.removeAt(index); this.choices.removeAt(index);
} }
} }
reinitChoices() { reinitChoices(): void {
this.choices.setValue([]); this.choices.setValue([]);
} }
initFormDefault() { initFormDefault(): void {
this.form = this.fb.group({ this.form = this.fb.group({
title: ['', [Validators.required, Validators.minLength(12)]], title: ['', [Validators.required, Validators.minLength(12)]],
creatorPseudo: ['', [Validators.required]], creatorPseudo: ['', [Validators.required]],
@ -90,7 +90,10 @@ export class FormComponent implements OnInit {
expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]], expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
}); });
console.log('this.form ', this.form); console.log('this.form ', this.form);
this.setDemoValues();
}
setDemoValues(): void {
this.addChoice('orange'); this.addChoice('orange');
this.addChoice('raisin'); this.addChoice('raisin');
this.addChoice('abricot'); this.addChoice('abricot');
@ -111,8 +114,9 @@ export class FormComponent implements OnInit {
expiracyNumberOfDays: 60, expiracyNumberOfDays: 60,
}); });
} }
askInitFormDefault() {
askInitFormDefault(): void {
this.initFormDefault(); this.initFormDefault();
this.toastService.display('formulaire réinitialisé', 'info'); this.toastService.display('formulaire réinitialisé');
} }
} }

1
src/assets/i18n/EN.json
View File

@ -28,6 +28,7 @@
"creation": { "creation": {
"title": "To begin with", "title": "To begin with",
"want": "I want to create a poll", "want": "I want to create a poll",
"advanced": "More options",
"kind": { "kind": {
"classic": "classic", "classic": "classic",
"date": "special dates" "date": "special dates"

1
src/assets/i18n/FR.json
View File

@ -28,6 +28,7 @@
"creation": { "creation": {
"title": "Créer un sondage", "title": "Créer un sondage",
"want": "Je veux créer un sondage", "want": "Je veux créer un sondage",
"advanced": "Options avancées",
"kind": { "kind": {
"classic": "classique", "classic": "classique",
"date": "spécial dates" "date": "spécial dates"

6
src/styles/partials/_navigation.scss
View File

@ -3,7 +3,6 @@ nav {
margin-bottom: 3.2rem; margin-bottom: 3.2rem;
padding-top: 1.6rem; padding-top: 1.6rem;
padding-bottom: 1.6rem; padding-bottom: 1.6rem;
border-top: 2px solid $primary;
border-bottom: 2px solid $primary; border-bottom: 2px solid $primary;
a { a {
@ -21,7 +20,10 @@ nav {
&.active, &.active,
&.is-active { &.is-active {
color: $white; color: $white;
background: $primary_color; background: $primary_color !important;
&:hover {
background: $dark !important;
}
} }
} }
} }