reorder questions

main.lqa

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

src/app/core/components/footer/footer.component.scss

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

src/app/core/components/header/header.component.html

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

src/app/core/models/poll.model.ts

@@ -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[] = [],

src/app/core/models/user.model.ts

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

src/app/core/services/poll.service.ts

@@ -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;
+	}
 }

src/app/features/administration/form/form.component.html

@@ -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
+			<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 (click)="reinitChoices()">
-					<i class="fa fa-recycle"></i>
-					Réinitialiser
+				<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 *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>
+				{{ 'creation.choose_title' | translate }}
 			</span>
-		</div>
-		<div class="form-field">
 			<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>
-			Enregistrer le sondage
+			Options avancées
 		</button>
-		<span class="complete well" *ngIf="longFormVersionEnabled">
-			version longue du formulaire activée
-		</span>
+		<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>
+			</div>
+		</div>
 	</form>
 </div>

src/app/features/administration/form/form.component.scss

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

src/app/features/administration/form/form.component.ts

@@ -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({
-				label: this.fb.control('', [Validators.required]),
-				imageUrl: ['', [Validators.required]],
-			})
-		);
+	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',

src/app/shared/components/selectors/theme-selector/theme-selector.component.html

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

src/assets/i18n/EN.json

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