reorder questions

This commit is contained in:
tykayn 2020-11-05 19:13:43 +01:00 committed by Baptiste Lemoine
parent 10c1930e4d
commit 8df2b95c1e
12 changed files with 132 additions and 76 deletions

4
main.lqa Normal file
View File

@ -0,0 +1,4 @@
<?xml version='1.0' encoding='UTF-8'?>
<qa version="1.0">
<category name="default"/>
</qa>

View File

@ -0,0 +1,4 @@
.app-logo {
max-width: 5em;
max-height: 5em;
}

View File

@ -3,7 +3,7 @@
<div class="navbar-brand">
<a class="navbar-item" routerLink="/">
<img class="app-logo logo" *ngIf="appLogo" src="{{ appLogo }}" alt="{{ appTitle }}" />
<span class="app-title title">
<span class="app-title title is-2">
{{ appTitle }}
</span>
<span class="dev-env" *ngIf="!env.production">
@ -39,7 +39,7 @@
<app-language-selector></app-language-selector>
<app-theme-selector></app-theme-selector>
<a class="navbar-item btn btn-primary" routerLink="user/polls" routerLinkActive="is-active">
<i class="fa fa-user"></i> {{ 'config.find_my_polls' | translate }}
<i class="fa fa-user"></i>
</a>
</div>
</div>

View File

@ -7,9 +7,9 @@ import { User } from './user.model';
export class Poll {
constructor(
public owner: User,
public slug: string,
public title: string,
public owner: User = new User(),
public slug: string = 'default-slug',
public title: string = 'default title',
public description?: string,
public configuration: PollConfiguration = new PollConfiguration(),
public comments: Comment[] = [],

View File

@ -3,8 +3,8 @@ import { Poll } from './poll.model';
export class User {
constructor(
public pseudo: string,
public email: string,
public pseudo: string = 'pseudo',
public email: string = 'example@example.com',
public polls: Poll[] = [],
public role?: UserRole,
public token?: string

View File

@ -10,6 +10,7 @@ import { ApiService } from './api.service';
import { ToastService } from './toast.service';
import { UserService } from './user.service';
import { UuidService } from './uuid.service';
import { Form } from '@angular/forms';
@Injectable({
providedIn: 'root',
@ -124,4 +125,13 @@ export class PollService implements Resolve<Poll> {
return list;
}
newPollFromForm(form: any) {
const newpoll = new Poll(
this.userService.getCurrentUser(),
this.uuidService.getUUID(),
form.controls.title.value
);
return newpoll;
}
}

View File

@ -2,9 +2,7 @@
<h1>
{{ 'creation.title' | translate }}
</h1>
<span class="pre-selector">
{{ 'creation.want' | translate }}
</span>
<button class="btn btn--warning" (click)="askInitFormDefault()">
<i class="fa fa-refresh"></i>
Tout réinitialiser
@ -12,37 +10,38 @@
<form [formGroup]="form">
<div class="form-field">
<h2>Choix de réponse</h2>
<span formArrayName="choices">
<h3>Choix proposés</h3>
<button (click)="addChoice()">
<i class="fa fa-plus"></i>
Ajouter un choix
</button>
<button (click)="reinitChoices()">
<i class="fa fa-recycle"></i>
Réinitialiser
</button>
<div *ngFor="let choice of choices.controls; let i = index">
<div class="form-row" [formGroup]="choice">
<label for="label" class="hidden">label</label>
<input formControlName="label" id="label" placeholder="Enter a choice description" />
<label for="imageUrl" class="imageUrl">image Url</label>
<input formControlName="imageUrl" id="imageUrl" placeholder="URL de l' image" />
<button (click)="deleteChoiceField(i)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
<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-doc-text"></i>
{{ 'creation.kind.classic' | translate }}
</button>
</div>
<div class="form-field">
<span>
{{ 'creation.choose_title' | translate }}
</span>
<label class="hidden" for="title">Titre</label>
<input
#title
matInput
placeholder="Votre titre de sondage"
[placeholder]="'creation.choose_title_placeholder' | translate"
formControlName="title"
id="title"
autofocus="autofocus"
@ -60,6 +59,47 @@
<i class="fa fa-close"></i>
</button>
</div>
<div class="form-field">
<h2>Choix de réponse</h2>
<span>
<span class="columns">
<span class="column">
<button class="btn is-primary" (click)="addChoice()">
<i class="fa fa-plus"></i>
Ajouter un choix
</button>
</span>
<span class="column pull-right">
<button class="btn is-warning" (click)="reinitChoices()">
<i class="fa fa-recycle"></i>
Réinitialiser
</button>
</span>
</span>
<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">
<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">
<button class="btn btn-warning" (click)="deleteChoiceField(i)">
<i class="fa fa-times"></i>
</button>
</div>
</div>
</div>
</span>
</span>
</div>
<div>
<label class="hidden" for="creatorEmail">creator email</label>
<input
@ -129,23 +169,6 @@
</span>
<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
<br />
<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.controls.isAboutDate.setValue(false)">
Classique - textes
</button>
<button
[ngClass]="{ 'is-primary': !form.controls.isAboutDate.value }"
(click)="form.controls.isAboutDate.setValue(false)"
>
Classique - textes
</button>
<h2>Version complète du formulaire</h2>
<div appearance="outline" class="is-flex">
<mat-label>Nombre de jours avant expiration</mat-label>
@ -188,12 +211,22 @@
La réponse « peut-être » sera disponible
</mat-checkbox>
<button mat-button (click)="createPoll()" [disabled]="!form.valid || !form.valid">
<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 class="column">
<button class="btn is-success" (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>
</div>
</div>
</form>
</div>

View File

@ -17,7 +17,5 @@
padding-left: 1em;
}
.fa {
margin-right: 1em;
color: $primary_color;
}
}

View File

@ -4,6 +4,7 @@ import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UuidService } from '../../../core/services/uuid.service';
import { ApiService } from '../../../core/services/api.service';
import { ToastService } from '../../../core/services/toast.service';
import { PollService } from '../../../core/services/poll.service';
@Component({
selector: 'app-admin-form',
@ -15,14 +16,14 @@ export class FormComponent implements OnInit {
public poll?: Poll;
public form: FormGroup;
public longFormVersionEnabled = true;
public urlPrefix: string = window.location.origin + '/participation/';
public advancedDisplayEnabled = false;
constructor(
private fb: FormBuilder,
private uuidService: UuidService,
private toastService: ToastService,
private pollService: PollService,
private apiService: ApiService
) {}
@ -33,8 +34,9 @@ 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);
// TODO : save the poll
this.apiService.createPoll(this.poll);
this.apiService.createPoll(newpoll);
}
}
@ -47,13 +49,18 @@ export class FormComponent implements OnInit {
return this.form.get('choices') as FormArray;
}
addChoice() {
this.choices.push(
this.fb.group({
addChoice(optionalLabel: string = '') {
let newControlGroup = this.fb.group({
label: this.fb.control('', [Validators.required]),
imageUrl: ['', [Validators.required]],
})
);
});
if (optionalLabel) {
newControlGroup.patchValue({
label: optionalLabel,
});
}
this.choices.push(newControlGroup);
}
deleteChoiceField(index: number) {
@ -84,9 +91,9 @@ export class FormComponent implements OnInit {
});
console.log('this.form ', this.form);
this.addChoice();
this.addChoice();
this.addChoice();
this.addChoice('orange');
this.addChoice('raisin');
this.addChoice('abricot');
this.form.patchValue({
title: 'mon titre',

View File

@ -1,7 +1,4 @@
<div class="columns">
<div class="column">
<p>Theme</p>
</div>
<div class="column">
<div class="buttons has-addons">
<button

View File

@ -133,6 +133,9 @@
"choiceNotColorblind": "I am not",
"colorblindText": "colorblind."
},
"selectors": {
"lang": "Select the lang"
},
"LANGUAGES": {
"DE": "Allemand",
"FR": "French",