tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front
1
1
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

togglable advanced options

creation-form
tykayn 2 years ago
parent
d07f51dd91
commit
d3042b3723
7 changed files with 176 additions and 133 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      src/app/core/components/home/home.component.html
  2. 253
      src/app/features/administration/form/form.component.html
  3. 9
      src/app/features/administration/form/form.component.scss
  4. 26
      src/app/features/administration/form/form.component.ts
  5. 1
      src/assets/i18n/EN.json
  6. 1
      src/assets/i18n/FR.json
  7. 6
      src/styles/partials/_navigation.scss

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

@ -33,6 +33,19 @@
<img src="assets/img/kind/classic.jpeg" alt="sondage date" />
</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>
</section>

253
src/app/features/administration/form/form.component.html
Unescape View File

@ -13,25 +13,27 @@
<span class="pre-selector">
{{ 'creation.want' | translate }}
</span>
<div class="kind-of-poll">
<h1 class="title is-1">
<i class="fa fa-calendar" aria-hidden="true"></i> {{ 'dates.title' | translate }}
</h1>
<button
class="btn"
[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
(click)="form.controls.isAboutDate.setValue(true)"
>
<i class="fa fa-calendar"></i>
{{ 'creation.kind.date' | translate }}
</button>
<button
[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
(click)="form.controls.isAboutDate.setValue(false)"
>
<i class="fa fa-stats"></i>
{{ 'creation.kind.classic' | translate }}
</button>
<div class="kind-of-poll columns">
<div class="column">
<button
class="btn-block btn"
[ngClass]="{ 'is-primary': form.controls.isAboutDate.value }"
(click)="form.controls.isAboutDate.setValue(true)"
>
<i class="fa fa-calendar"></i>
{{ 'creation.kind.date' | translate }}
</button>
</div>
<div class="column">
<button
class="btn-block btn btn-default"
[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
(click)="form.controls.isAboutDate.setValue(false)"
>
<i class="fa fa-stats"></i>
{{ 'creation.kind.classic' | translate }}
</button>
</div>
</div>
<span>
@ -60,8 +62,22 @@
</button>
</div>
<fieldset class="date-kind">
<!-- choix spécialement pour les dates-->
</fieldset>
<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 class="columns">
<span class="column">
@ -81,19 +97,19 @@
<span *ngFor="let choice of choices.controls; let i = index">
<div class="form-row" [formGroup]="choice">
<div class="columns">
<div class="column">{{ i * 1 + 1 }})</div>
<div class="column">
<button class="btn btn-warning" (click)="deleteChoiceField(i)">
<i class="fa fa-times"></i>
</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="imageUrl">image Url</label>
<label for="imageUrl" class="hidden">image Url</label>
<input formControlName="imageUrl" id="imageUrl" placeholder="URL de l' image" />
</div>
<div class="column">
<button class="btn btn-warning" (click)="deleteChoiceField(i)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
</span>
@ -101,7 +117,17 @@
</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
#title
matInput
@ -111,116 +137,103 @@
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 />
<hr />
<label for="descr">Description (optionnel)</label>
<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 class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
<i class="fa fa-save"></i>
{{ 'creation.advanced' | translate }}
</button>
<hr />
<label for="slug"
>Url pour les participants
<fieldset class="complete well" *ngIf="advancedDisplayEnabled">
<h2>{{ 'creation.advanced' | translate }}</h2>
<label for="descr">Description (optionnel)</label>
<textarea
#description
matInput
id="descr"
placeholder="Description"
formControlName="description"
required
></textarea>
<button
mat-button
*ngIf="slug.value"
*ngIf="description.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="slug.value = ''"
(click)="description.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 />
<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
/>
<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="expiracy.value"
*ngIf="form.controls.slug.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>
(click)="slug.value = ''"
></button>
<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
<br />
<div appearance="outline" class="is-not-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-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">
<button class="btn is-success" (click)="createPoll()" [disabled]="!form.valid || !form.valid">
<i class="fa fa-save"></i>

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save