⚡ creation forms, dispatch step one

src/app/features/administration/administration-routing.module.ts

@@ -2,8 +2,28 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { AdministrationComponent } from './administration.component';
+import { StepTwoComponent } from './form/step-two/step-two.component';
+import { StepThreeComponent } from './form/step-three/step-three.component';
+import { StepFourComponent } from './form/step-four/step-four.component';
+import { StepFiveComponent } from './form/step-five/step-five.component';
+import { StepOneComponent } from './form/step-one/step-one.component';
 
-const routes: Routes = [{ path: '', component: AdministrationComponent }];
+const routes: Routes = [
+	{
+		path: '',
+		component: AdministrationComponent,
+	},
+	{
+		path: 'step',
+		children: [
+			{ path: '1', component: StepOneComponent },
+			{ path: '2', component: StepTwoComponent },
+			{ path: '3', component: StepThreeComponent },
+			{ path: '4', component: StepFourComponent },
+			{ path: '5', component: StepFiveComponent },
+		],
+	},
+];
 
 @NgModule({
 	imports: [RouterModule.forChild(routes)],

src/app/features/administration/administration.module.ts

@@ -12,6 +12,9 @@ import { DateValueAccessorModule } from 'angular-date-value-accessor';
 import { ClassicChoicesComponent } from './form/classic-choices/classic-choices.component';
 import { StepOneComponent } from './form/step-one/step-one.component';
 import { StepTwoComponent } from './form/step-two/step-two.component';
+import { StepThreeComponent } from './form/step-three/step-three.component';
+import { StepFourComponent } from './form/step-four/step-four.component';
+import { StepFiveComponent } from './form/step-five/step-five.component';
 
 @NgModule({
 	declarations: [
@@ -21,6 +24,9 @@ import { StepTwoComponent } from './form/step-two/step-two.component';
 		ClassicChoicesComponent,
 		StepOneComponent,
 		StepTwoComponent,
+		StepThreeComponent,
+		StepFourComponent,
+		StepFiveComponent,
 	],
 	imports: [
 		AdministrationRoutingModule,

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

@@ -1,65 +1,29 @@
 <div class="admin-form">
-	<h1>
+	<header>
-		{{ 'creation.title' | translate }}
+		<h1>
-	</h1>
+			{{ 'creation.title' | translate }}
-	<form [formGroup]="form">
+		</h1>
 		<app-stepper [step_current]="step_current" [step_max]="step_max"></app-stepper>
-
+	</header>
-		<section class="poll-title">
+	<section class="step-container">
-			<span>
+		<router-outlet>
-				{{ 'creation.choose_title' | translate }}
+			<app-step-one></app-step-one>
-			</span>
+		</router-outlet>
-			<label class="hidden" for="title">Titre</label>
+	</section>
-			<input
+	<footer>
-				#title
+		<div class="columns">
-				matInput
+			<div class="column">
-				[placeholder]="'creation.choose_title_placeholder' | translate"
+				<button class="button is-large is-secondary" [routerLink]="previousRouteName">précédent</button>
-				formControlName="title"
+			</div>
-				id="title"
+			<div class="column">
-				autofocus="autofocus"
+				<button class="button is-primary is-large is-pulled-right">suivant</button>
-				(change)="updateSlug()"
-				required
-			/>
-			<button
-				mat-button
-				*ngIf="title.value"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
-				(click)="title.value = ''"
-			>
-				<i class="fa fa-close"></i>
-			</button>
-		</section>
-		<div class="poll-description">
-			<label for="descr">Description (optionnel)</label>
-			<span class="rich-text-toggle">
-				mode de saisie avancée
-				<i class="fa fa-text"></i><input type="checkbox" formControlName="richTextMode" />
-			</span>
-			<textarea
-				#description
-				matInput
-				id="descr"
-				placeholder="Description"
-				formControlName="description"
-				required
-			></textarea>
-			<div class="text-info">
-				300 caractères maximum
 			</div>
-			<button
-				mat-button
-				*ngIf="description.value"
-				matSuffix
-				mat-icon-button
-				aria-label="Clear"
-				(click)="description.value = ''"
-			>
-				<i class="fa fa-close"></i>
-			</button>
 		</div>
+	</footer>
 
+	<hr />
+
+	<form [formGroup]="form">
 		<hr />
 
 		<app-stepper [step_current]="2" [step_max]="step_max"></app-stepper>

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

@@ -9,6 +9,7 @@ import { DateUtilities } from '../../old-stuff/config/DateUtilities';
 import { DOCUMENT } from '@angular/common';
 import { DateChoice, defaultTimeOfDay, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-admin-form',
@@ -34,6 +35,8 @@ export class FormComponent implements OnInit {
 	step_current: number = 1;
 	step_max: number = 5;
 	public round: Function;
+	private nextRouteName: string = '/administration/step/2';
+	previousRouteName: string = '/administration';
 
 	constructor(
 		private fb: FormBuilder,
@@ -41,6 +44,7 @@ export class FormComponent implements OnInit {
 		private uuidService: UuidService,
 		private toastService: ToastService,
 		private pollService: PollService,
+		private router: Router,
 		public dateUtilities: DateUtilities,
 		private apiService: ApiService,
 		@Inject(DOCUMENT) private document: any
@@ -312,4 +316,8 @@ export class FormComponent implements OnInit {
 	automaticSlug() {
 		this.poll.slug = this.pollService.makeSlug(this.poll);
 	}
+
+	goNextStep() {
+		this.router.navigate([this.nextRouteName]);
+	}
 }

src/app/features/administration/form/step-five/step-five.component.html

@@ -0,0 +1 @@
+<p>step-five works!</p>

src/app/features/administration/form/step-five/step-five.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepFiveComponent } from './step-five.component';
+
+describe('StepFiveComponent', () => {
+	let component: StepFiveComponent;
+	let fixture: ComponentFixture<StepFiveComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [StepFiveComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(StepFiveComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/step-five/step-five.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-step-five',
+	templateUrl: './step-five.component.html',
+	styleUrls: ['./step-five.component.scss'],
+})
+export class StepFiveComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}

src/app/features/administration/form/step-four/step-four.component.html

@@ -0,0 +1 @@
+<p>step-four works!</p>

src/app/features/administration/form/step-four/step-four.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepFourComponent } from './step-four.component';
+
+describe('StepFourComponent', () => {
+	let component: StepFourComponent;
+	let fixture: ComponentFixture<StepFourComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [StepFourComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(StepFourComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/step-four/step-four.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-step-four',
+	templateUrl: './step-four.component.html',
+	styleUrls: ['./step-four.component.scss'],
+})
+export class StepFourComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}

src/app/features/administration/form/step-one/step-one.component.html

@@ -1,3 +1,51 @@
 <div class="step">
 	Nom de sondage
+
+	<section class="poll-title">
+		<span>
+			{{ 'creation.choose_title' | translate }}
+		</span>
+		<label class="hidden" for="title">Titre</label>
+		<input
+			#title
+			matInput
+			[placeholder]="'creation.choose_title_placeholder' | translate"
+			formControlName="title"
+			id="title"
+			autofocus="autofocus"
+			(change)="updateSlug()"
+			required
+		/>
+		<button mat-button *ngIf="title.value" matSuffix mat-icon-button aria-label="Clear" (click)="title.value = ''">
+			<i class="fa fa-close"></i>
+		</button>
+	</section>
+	<div class="poll-description">
+		<label for="descr">Description (optionnel)</label>
+		<span class="rich-text-toggle">
+			mode de saisie avancée
+			<i class="fa fa-text"></i><input type="checkbox" formControlName="richTextMode" />
+		</span>
+		<textarea
+			#description
+			matInput
+			id="descr"
+			placeholder="Description"
+			formControlName="description"
+			required
+		></textarea>
+		<div class="text-info">
+			300 caractères maximum
+		</div>
+		<button
+			mat-button
+			*ngIf="description.value"
+			matSuffix
+			mat-icon-button
+			aria-label="Clear"
+			(click)="description.value = ''"
+		>
+			<i class="fa fa-close"></i>
+		</button>
+	</div>
 </div>

src/app/features/administration/form/step-one/step-one.component.ts

@@ -9,4 +9,6 @@ export class StepOneComponent implements OnInit {
 	constructor() {}
 
 	ngOnInit(): void {}
+
+	updateSlug() {}
 }

src/app/features/administration/form/step-three/step-three.component.html

@@ -0,0 +1 @@
+<p>step-three works!</p>

src/app/features/administration/form/step-three/step-three.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { StepThreeComponent } from './step-three.component';
+
+describe('StepThreeComponent', () => {
+	let component: StepThreeComponent;
+	let fixture: ComponentFixture<StepThreeComponent>;
+
+	beforeEach(async(() => {
+		TestBed.configureTestingModule({
+			declarations: [StepThreeComponent],
+		}).compileComponents();
+	}));
+
+	beforeEach(() => {
+		fixture = TestBed.createComponent(StepThreeComponent);
+		component = fixture.componentInstance;
+		fixture.detectChanges();
+	});
+
+	it('should create', () => {
+		expect(component).toBeTruthy();
+	});
+});

src/app/features/administration/form/step-three/step-three.component.ts

@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-step-three',
+	templateUrl: './step-three.component.html',
+	styleUrls: ['./step-three.component.scss'],
+})
+export class StepThreeComponent implements OnInit {
+	constructor() {}
+
+	ngOnInit(): void {}
+}