put poll actions in pollService, nav on step one two three

src/app/app.component.html

@@ -1,23 +1,10 @@
-<mat-sidenav-container (backdropClick)="sidenav.toggle()">
-	<mat-sidenav #sidenav mode="side">
-		<app-navigation></app-navigation>
-	</mat-sidenav>
-
-	<mat-sidenav-content>
-		<div id="big_container" [class]="themeClass">
-			<div class="container">
-				<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
-				<main>
-					<router-outlet></router-outlet>
-					<div *ngIf="devModeEnabled">
-						<br />
-						<mat-slide-toggle (change)="sidenav.toggle()" label="dev menu"> </mat-slide-toggle> menu
-						développeur
-					</div>
-				</main>
-				<app-footer></app-footer>
-				<app-feedback></app-feedback>
-			</div>
-		</div>
-	</mat-sidenav-content>
-</mat-sidenav-container>
+<div id="big_container" [class]="themeClass">
+	<div class="container">
+		<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
+		<main>
+			<router-outlet></router-outlet>
+		</main>
+		<app-footer></app-footer>
+		<app-feedback></app-feedback>
+	</div>
+</div>

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

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Inject, Injectable } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { ActivatedRoute, ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 
@@ -120,6 +120,11 @@ export class PollService implements Resolve<Poll> {
 		return form;
 	}
 
+	public updateSlug(): void {
+		console.log('this.form.value', this.form.value);
+		this.form.patchValue({ custom_url: this.makeSlug(this.form) });
+	}
+
 	/**
 	 * auto fetch a poll when route is looking for one in the administration pattern
 	 * @param route
@@ -334,7 +339,6 @@ export class PollService implements Resolve<Poll> {
 
 	initFormDefault(showDemoValues = true): void {
 		this.form = this.createFormGroup();
-		console.log('this.form ', this.form);
 		this.setDefaultDatesForInterval();
 
 		if (showDemoValues) {
@@ -363,7 +367,6 @@ export class PollService implements Resolve<Poll> {
 			});
 		}
 		this.choices.push(newControlGroup);
-		console.log('this.choices.length', this.choices.length);
 
 		this.focusOnChoice(this.choices.length - 1);
 	}
@@ -406,7 +409,6 @@ export class PollService implements Resolve<Poll> {
 		const pollUrl: Subscription = await this.apiService.createPoll(this._poll.getValue());
 		// TODO: Maybe handle the url to update currentPoll according to backend response
 		if (pollUrl) {
-			console.log('pollUrl', pollUrl);
 			this.toastService.display('Le sondage a été enregistré.');
 		} else {
 			this.toastService.display('Le sondage n’a été correctement enregistré, veuillez ré-essayer.');

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

@@ -12,6 +12,7 @@ const routes: Routes = [
 	{
 		path: '',
 		component: AdministrationComponent,
+		redirectTo: 'step/1',
 	},
 	{
 		path: 'step',

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

@@ -15,6 +15,7 @@ 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 { DevMenuComponent } from './dev-menu/dev-menu.component';
 
 @NgModule({
 	declarations: [
@@ -27,6 +28,7 @@ import { StepFiveComponent } from './form/step-five/step-five.component';
 		StepThreeComponent,
 		StepFourComponent,
 		StepFiveComponent,
+		DevMenuComponent,
 	],
 	imports: [
 		AdministrationRoutingModule,

src/app/features/administration/dev-menu/dev-menu.component.html

@@ -0,0 +1,14 @@
+<mat-sidenav-container (backdropClick)="sidenav.toggle()">
+	<mat-sidenav #sidenav mode="side">
+		<app-navigation></app-navigation>
+	</mat-sidenav>
+
+	<mat-sidenav-content> </mat-sidenav-content>
+
+	<hr />
+	<div *ngIf="devModeEnabled">
+		<br />
+		<mat-slide-toggle (change)="sidenav.toggle()" label="dev menu"></mat-slide-toggle>
+		menu développeur
+	</div>
+</mat-sidenav-container>

src/app/features/administration/dev-menu/dev-menu.component.spec.ts

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

src/app/features/administration/dev-menu/dev-menu.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-dev-menu',
+	templateUrl: './dev-menu.component.html',
+	styleUrls: ['./dev-menu.component.scss'],
+})
+export class DevMenuComponent implements OnInit {
+	devModeEnabled: boolean = false;
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}

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

@@ -12,21 +12,10 @@
 	</section>
 	<footer>
 		<div class="columns">
-			<div class="column">
-				<button
-					class="button is-large is-secondary"
-					[routerLink]="pollService.previousRouteName"
-					*ngIf="pollService.step_current != 1"
-				>
-					précédent
-				</button>
-			</div>
+			<div class="column"></div>
 			<div class="column">
 				<!--				[disabled]="form.invalid"-->
-				<button
-					class="button is-primary is-large is-pulled-right"
-					[routerLink]="[pollService.nextRouteName, { from: route }]"
-				>
+				<button class="button is-primary is-fullwidth" [routerLink]="['administration/step/2']">
 					suivant
 				</button>
 			</div>

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

@@ -1,5 +1,5 @@
 <div class="step">
-	<form [formGroup]="form">
+	<form [formGroup]="pollService.form">
 		<section class="poll-title">
 			<h2 class="title is-2">
 				{{ 'creation.choose_title' | translate }}
@@ -16,7 +16,8 @@
 						placeholder="Quel resto ce soir ?"
 						id="title"
 						autofocus="autofocus"
-						(change)="updateSlug()"
+						(keyup)="pollService.updateSlug()"
+						(blur)="pollService.updateSlug()"
 						required
 					/>
 				</div>
@@ -43,8 +44,11 @@
 
 						<mat-checkbox formControlName="richTextMode" id="richTextMode"></mat-checkbox>
 					</div>
+					<div class="rich-toolbar" *ngIf="pollService.form.value.richTextMode">
+						richTextMode activé
+					</div>
 					<textarea
-						class="ui-inputtextarea"
+						class="ui-inputtextarea is-fullwidth is-block"
 						#description
 						matInput
 						id="descr"
@@ -52,6 +56,7 @@
 						placeholder="Description"
 						formControlName="description"
 						required
+						maxlength="300"
 					></textarea>
 					<div class="text-info">
 						300 caractères maximum
@@ -71,5 +76,19 @@
 				</div>
 			</div>
 		</div>
+		slug: {{ pollService.form.value.custom_url }}
 	</form>
+	<div class="columns">
+		<div class="column">
+			<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
+				précédent
+			</button>
+		</div>
+		<div class="column">
+			<!--				[disabled]="form.invalid"-->
+			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
+				suivant
+			</button>
+		</div>
+	</div>
 </div>

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

@@ -8,7 +8,7 @@ import { PollService } from '../../../../core/services/poll.service';
 	styleUrls: ['./step-one.component.scss'],
 })
 export class StepOneComponent implements OnInit {
-	constructor(private pollService: PollService) {}
+	constructor(public pollService: PollService) {}
 
 	@Input()
 	step_max: any;
@@ -16,9 +16,4 @@ export class StepOneComponent implements OnInit {
 	form: FormGroup;
 
 	ngOnInit(): void {}
-
-	public updateSlug(): void {
-		const newValueFormatted = 'TODO';
-		this.form.patchValue({ slug: this.pollService.makeSlug(this.form.value['custom_url']) });
-	}
 }

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

@@ -1,10 +1,10 @@
-<app-stepper [step_current]="3" [step_max]="step_max"></app-stepper>
+<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
 
 <!--			choix spécialement pour les dates-->
 <div class="dates-list">
 	<div class="title">
 		<span class="count-dates">
-			{{ timeList.length }}
+			{{ pollService.timeList.length }}
 		</span>
 		<span class="count-dates-txt">
 			{{ 'dates.count_time' | translate }}
@@ -12,13 +12,18 @@
 		</span>
 	</div>
 	<div class="actions">
-		<button (click)="addTime()" *ngIf="'false' === allowSeveralHours" class="btn btn--primary" id="add_time_button">
+		<button
+			(click)="pollService.addTime()"
+			*ngIf="'false' === pollService.allowSeveralHours"
+			class="btn btn--primary"
+			id="add_time_button"
+		>
 			<i class="fa fa-plus" aria-hidden="true"></i>
 			{{ 'dates.add_time' | translate }}
 		</button>
 		<button
-			(click)="removeAllTimes()"
-			*ngIf="'false' === allowSeveralHours"
+			(click)="pollService.removeAllTimes()"
+			*ngIf="'false' === pollService.allowSeveralHours"
 			class="btn btn--warning"
 			id="remove_time_button"
 		>
@@ -26,8 +31,8 @@
 			Aucune plage horaire
 		</button>
 		<button
-			(click)="resetTimes()"
-			*ngIf="'false' === allowSeveralHours"
+			(click)="pollService.resetTimes()"
+			*ngIf="'false' === pollService.allowSeveralHours"
 			class="btn btn--warning"
 			id="reset_time_button"
 		>
@@ -36,9 +41,9 @@
 		</button>
 	</div>
 
-	<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
+	<div *ngIf="'false' === pollService.allowSeveralHours" class="identical-dates">
 		<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-			<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
+			<div *ngFor="let time of pollService.timeList; index as id" class="time-choice" cdkDrag>
 				<label for="timeChoices_{{ id }}">
 					<i class="fa fa-clock-o" aria-hidden="true"></i>
 				</label>
@@ -51,15 +56,15 @@
 	</div>
 	<hr />
 	<span class="count-dates title">
-		{{ dateList.length }}
+		{{ pollService.dateList.length }}
 	</span>
 	<span>
 		{{ 'dates.count_dates' | translate }}
 	</span>
-	<button class="btn btn--primary" (click)="addChoice()">
+	<button class="btn btn--primary" (click)="pollService.addChoice()">
 		{{ 'dates.add' | translate }}
 	</button>
-	<div *ngFor="let choice of dateList; index as id" class="date-choice">
+	<div *ngFor="let choice of pollService.dateList; index as id" class="date-choice">
 		<input
 			[(ngModel)]="choice.date_object"
 			name="dateChoices_{{ id }}"
@@ -67,13 +72,17 @@
 			useValueAsDate
 			type="date"
 		/>
-		<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
+		<button (click)="pollService.dateList.splice(id, 1)" class="btn btn-warning">
 			<i class="fa fa-times" aria-hidden="true"></i>
 		</button>
-		<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
+		<button
+			(click)="pollService.addTimeToDate(choice, id)"
+			*ngIf="'true' === pollService.allowSeveralHours"
+			class="btn btn--primary"
+		>
 			{{ 'dates.add_time' | translate }}
 		</button>
-		<div *ngIf="'true' === allowSeveralHours" class="several-times">
+		<div *ngIf="'true' === pollService.allowSeveralHours" class="several-times">
 			<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
 				<input
 					[(ngModel)]="timeItem.literal"
@@ -90,15 +99,15 @@
 </div>
 
 <button
-	(click)="showDateInterval = !showDateInterval"
-	[ngClass]="{ active: showDateInterval }"
+	(click)="pollService.showDateInterval = !pollService.showDateInterval"
+	[ngClass]="{ active: pollService.showDateInterval }"
 	class="btn btn--primary"
 	id="toggle_interval_button"
 >
 	<i class="fa fa-clock-o" aria-hidden="true"></i>
 	{{ 'dates.add_interval' | translate }}
 </button>
-<section *ngIf="showDateInterval" class="date-interval form-row">
+<section *ngIf="pollService.showDateInterval" class="date-interval form-row">
 	<h2>{{ 'dates.add_interval' | translate }}</h2>
 	<div class="columns">
 		<div class="column">
@@ -106,7 +115,12 @@
 		</div>
 		<div class="column">
 			<label for="start_interval" class="hidden">start</label>
-			<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
+			<input
+				id="start_interval"
+				(change)="pollService.countDays()"
+				formControlName="startDateInterval"
+				type="date"
+			/>
 		</div>
 	</div>
 	<div class="columns">
@@ -118,10 +132,24 @@
 			<input id="end_interval" formControlName="endDateInterval" type="date" />
 		</div>
 	</div>
-	<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
+	<button (click)="pollService.addIntervalOfDates()" class="btn btn-block btn--primary">
 		<i class="fa fa-plus" aria-hidden="true"></i>
 		{{ 'dates.interval_button' | translate }}
-		{{ intervalDays }}
+		{{ pollService.intervalDays }}
 		{{ 'dates.interval_button_dates' | translate }}
 	</button>
 </section>
+
+<div class="columns">
+	<div class="column">
+		<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/2']">
+			précédent
+		</button>
+	</div>
+	<div class="column">
+		<!--				[disabled]="form.invalid"-->
+		<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/4']">
+			suivant
+		</button>
+	</div>
+</div>

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

@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { PollService } from '../../../../core/services/poll.service';
 
 @Component({
 	selector: 'app-step-three',
@@ -10,7 +11,8 @@ export class StepThreeComponent implements OnInit {
 	step_max: any;
 	@Input()
 	form: any;
-	constructor() {}
+
+	constructor(public pollService: PollService) {}
 
 	ngOnInit(): void {}
 }

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

@@ -6,8 +6,8 @@
 	<div class="kind-of-poll columns">
 		<div class="column">
 			<button
-				class="btn-block btn"
-				[ngClass]="{ 'is-primary': pollService.form.controls.isAboutDate.value }"
+				class="button is-fullwidth"
+				[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
 				(click)="pollService.form.controls.isAboutDate.setValue(true)"
 			>
 				<i class="fa fa-calendar"></i>
@@ -16,8 +16,8 @@
 		</div>
 		<div class="column">
 			<button
-				class="btn-block btn btn-default"
-				[ngClass]="{ 'is-primary': !pollService.form.controls.isAboutDate.value }"
+				class="button is-fullwidth"
+				[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
 				(click)="pollService.form.controls.isAboutDate.setValue(false)"
 			>
 				<i class="fa fa-list-ul"></i>
@@ -25,4 +25,17 @@
 			</button>
 		</div>
 	</div>
+	<div class="columns">
+		<div class="column">
+			<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
+				précédent
+			</button>
+		</div>
+		<div class="column">
+			<!--				[disabled]="form.invalid"-->
+			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
+				suivant
+			</button>
+		</div>
+	</div>
 </div>

src/styles/dev-utilities/_debug.scss

@@ -19,14 +19,14 @@ label {
 		cursor: pointer;
 	}
 
-	&:not([for]) {
-		color: $dusty-orange;
-
-		&:before {
-			content: "### debug: ce label n'a pas d'attribut for, c'est mal. ### ";
-			color: $violet;
-		}
-	}
+	//&:not([for]) {
+	//	color: $dusty-orange;
+	//
+	//	&:before {
+	//		content: "### debug: ce label n'a pas d'attribut for, c'est mal. ### ";
+	//		color: $violet;
+	//	}
+	//}
 }
 
 input {

src/styles/partials/_form-controls.scss

@@ -5,11 +5,13 @@ textarea {
 	@extend .input;
 	padding: calc(0.5em - 1px);
 	border-color: $border-color !important;
+	width: 100%;
+	max-width: 100%;
 }
 
 textarea {
 	min-height: 3em;
-	width: 100%;
+
 	display: block;
 }