put steppers in creation form

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

@@ -2,12 +2,8 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { AdministrationComponent } from './administration.component';
-import { NamingComponent } from './naming/naming.component';
 
-const routes: Routes = [
+const routes: Routes = [{ path: '', component: AdministrationComponent }];
-	{ path: '', component: AdministrationComponent },
-	{ path: 'naming', component: NamingComponent },
-];
 
 @NgModule({
 	imports: [RouterModule.forChild(routes)],

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

@@ -7,7 +7,6 @@ import { SharedModule } from '../../shared/shared.module';
 import { AdministrationRoutingModule } from './administration-routing.module';
 import { AdministrationComponent } from './administration.component';
 import { StepperComponent } from './stepper/stepper.component';
-import { NamingComponent } from './naming/naming.component';
 import { FormComponent } from './form/form.component';
 import { DateValueAccessorModule } from 'angular-date-value-accessor';
 import { ClassicChoicesComponent } from './form/classic-choices/classic-choices.component';
@@ -18,7 +17,6 @@ import { StepTwoComponent } from './form/step-two/step-two.component';
 	declarations: [
 		AdministrationComponent,
 		StepperComponent,
-		NamingComponent,
 		FormComponent,
 		ClassicChoicesComponent,
 		StepOneComponent,

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

@@ -2,19 +2,8 @@
 	<h1>
 		{{ 'creation.title' | translate }}
 	</h1>
-
 	<form [formGroup]="form">
-		<section class="creation-stepper">
+		<app-stepper [step_current]="step_current" [step_max]="step_max"></app-stepper>
-			<div class="step-info">
-				<h2 class="title is-2">
-					Étape {{ step_current }} /
-					{{ step_max }}
-				</h2>
-			</div>
-			<div class="step-bar-container" style="width: 100%;">
-				<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
-			</div>
-		</section>
 
 		<section class="poll-title">
 			<span>
@@ -46,9 +35,7 @@
 			<label for="descr">Description (optionnel)</label>
 			<span class="rich-text-toggle">
 				mode de saisie avancée
-				<button [(ngModel)]="richTextMode">
+				<i class="fa fa-text"></i><input type="checkbox" formControlName="richTextMode" />
-					<i class="fa fa-text"></i>
-				</button>
 			</span>
 			<textarea
 				#description
@@ -75,6 +62,7 @@
 
 		<hr />
 
+		<app-stepper [step_current]="2" [step_max]="step_max"></app-stepper>
 		<div class="form-field poll-kind">
 			<h2 class="title is-2">
 				{{ 'creation.want' | translate }}
@@ -103,8 +91,6 @@
 			</div>
 		</div>
 
-		<hr />
-
 		<!--			choix spécialement pour les dates-->
 		<div class="dates-list">
 			<div class="title">
@@ -175,7 +161,6 @@
 				{{ 'dates.add' | translate }}
 			</button>
 			<div *ngFor="let choice of dateList; index as id" class="date-choice">
-				{{ id }})
 				<input
 					[(ngModel)]="choice.date_object"
 					name="dateChoices_{{ id }}"
@@ -244,10 +229,11 @@
 				{{ intervalDays }}
 				{{ 'dates.interval_button_dates' | translate }}
 			</button>
-			<hr />
 		</section>
 
-		<div>
+		<app-stepper [step_current]="3" [step_max]="step_max"></app-stepper>
+
+		<div class="creator-infos">
 			<label class="" for="creatorEmail">
 				<span>
 					{{ 'creation.name' | translate }}
@@ -269,31 +255,25 @@
 			/>
 		</div>
 
-		<br />
+		<hr />
-		<section class="advanced-config">
+		<app-stepper [step_current]="4" [step_max]="step_max"></app-stepper>
+
+		<fieldset class="advanced-config">
 			<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
 				<i class="fa fa-save"></i>
 				{{ 'creation.advanced' | translate }}
 			</button>
-			<hr />
 			<fieldset class="complete well" *ngIf="advancedDisplayEnabled">
 				<h2>{{ 'creation.advanced' | translate }}</h2>
 
 				<br />
 
-				<label for="slug"
+				<label for="slug">Url pour les participants </label>
-					>Url pour les participants
-
-					<i class="fa fa-close"></i>
-				</label>
 				<br />
 				<span
-					>{{ urlPrefix }}
+					>{{ urlPrefix }} <strong> {{ form.controls.slug.value }} </strong>
-					<strong>
-						{{ form.controls.slug.value }}
-					</strong>
 				</span>
-				<app-copy-text [textToCopy]="form.controls.slug.value"></app-copy-text>
+				<app-copy-text [textToCopy]="urlPrefix + form.controls.slug.value"></app-copy-text>
 
 				<button
 					mat-button
@@ -352,7 +332,9 @@
 					La réponse « peut-être » sera disponible
 				</mat-checkbox>
 			</fieldset>
-		</section>
+		</fieldset>
+		<hr />
+		<app-stepper [step_current]="5" [step_max]="step_max"></app-stepper>
 		<div class="columns">
 			<div class="column"></div>
 			<div class="column">
@@ -363,7 +345,6 @@
 			</div>
 		</div>
 
-		<hr />
 		<section class="supplement">
 			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
 			<button class="btn btn--warning" (click)="askInitFormDefault()">

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

@@ -1,12 +1,5 @@
 @import '../../../../styles/variables';
 :host {
-	input,
-	textarea {
-		padding: 0.5em;
-		border: solid #eee;
-
-		width: 90%;
-	}
 	.form-field {
 		display: block;
 		margin-top: 1em;
@@ -14,11 +7,7 @@
 	.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;
@@ -75,29 +64,10 @@
 	.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
 		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 	}
-	.ng-touched.ng-invalid {
+
-		border-left: $danger 3px solid;
+	textarea {
-		padding-left: 1em;
+		border: solid 1px $border-color;
-	}
-	.ng-touched.ng-valid {
-		border-left: $success 3px solid;
-		padding-left: 1em;
-	}
-	.step-bar-container {
-		margin: 1em 0;
-		height: 0.5em;
-		display: inline-block;
-		min-width: 1px;
-		background: $grey-light;
 		width: 100%;
-	}
+		display: block;
-	.step-bar-progress {
-		position: relative;
-		top: -0.6em;
-		left: 0;
-		height: 0.5em;
-		display: inline-block;
-		min-width: 1px;
-		background: $primary;
 	}
 }

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

@@ -7,7 +7,7 @@ import { ToastService } from '../../../core/services/toast.service';
 import { PollService } from '../../../core/services/poll.service';
 import { DateUtilities } from '../../old-stuff/config/DateUtilities';
 import { DOCUMENT } from '@angular/common';
-import { DateChoice, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
+import { DateChoice, defaultTimeOfDay, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 
 @Component({
@@ -29,8 +29,8 @@ export class FormComponent implements OnInit {
 	endDateInterval: string;
 	intervalDays: any;
 	intervalDaysDefault = 7;
-	dateList: any = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
+	dateList: DateChoice[] = otherDefaultDates; // sets of days as strings, config to set identical time for days in a special days poll
-	timeList: DateChoice[] = otherDefaultDates; // ranges of time expressed as strings
+	timeList: any = defaultTimeOfDay; // ranges of time expressed as strings
 	step_current: number = 1;
 	step_max: number = 5;
 	public round: Function;
@@ -125,6 +125,7 @@ export class FormComponent implements OnInit {
 			isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
 			isMaybeAnswerAvailable: [false, [Validators.required]],
 			areResultsPublic: [true, [Validators.required]],
+			richTextMode: [false, [Validators.required]],
 			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
 		});
 		console.log('this.form ', this.form);
@@ -174,6 +175,7 @@ export class FormComponent implements OnInit {
 			isOwnerNotifiedByEmailOnNewVote: false,
 			isOwnerNotifiedByEmailOnNewComment: false,
 			isMaybeAnswerAvailable: false,
+			richTextMode: false,
 			areResultsPublic: true,
 			expiracyNumberOfDays: 60,
 		});

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

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

src/app/features/administration/naming/naming.component.spec.ts

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

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

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

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

@@ -1,114 +1,11 @@
-<mat-vertical-stepper #stepper linear>
+<section class="creation-stepper">
-	<mat-step [stepControl]="pollFormGroup" class="is-expanded">
+	<div class="step-info">
-		<form [formGroup]="pollFormGroup">
+		<h2 class="title is-2">
-			<ng-template matStepLabel>Informations du sondage</ng-template>
+			Étape {{ step_current }} /
-			<mat-form-field appearance="outline">
+			{{ step_max }}
-				<mat-label>Titre</mat-label>
+		</h2>
-				<input #title matInput placeholder="Question posée, sujet" formControlName="title" required />
+	</div>
-			</mat-form-field>
+	<div class="step-bar-container" style="width: 100%;">
-
+		<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
-			<mat-form-field appearance="outline" class="is-flex">
+	</div>
-				<mat-label>Description</mat-label>
+</section>
-				<textarea
-					#description
-					matInput
-					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>
-			</mat-form-field>
-			<mat-form-field appearance="outline" class="is-flex">
-				<mat-label>Url pour les participants</mat-label>
-				<span matPrefix>{{ urlPrefix }}</span>
-				<input #slug matInput placeholder="Url" formControlName="slug" required />
-				<button
-					mat-button
-					*ngIf="slug.value"
-					matSuffix
-					mat-icon-button
-					aria-label="Clear"
-					(click)="slug.value = ''"
-				>
-					<i class="fa fa-close"></i>
-				</button>
-			</mat-form-field>
-			<div>
-				<button mat-button matStepperNext>Next</button>
-			</div>
-		</form>
-	</mat-step>
-
-	<mat-step [stepControl]="configurationFormGroup">
-		<form [formGroup]="configurationFormGroup">
-			<ng-template matStepLabel>PollConfiguration du sondage</ng-template>
-			<mat-form-field appearance="outline" class="is-flex">
-				<mat-label>Nombre de jours avant expiration</mat-label>
-				<input
-					#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>
-			</mat-form-field>
-			<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>
-
-			<div>
-				<button mat-button matStepperPrevious>Back</button>
-				<button mat-button matStepperNext>Next</button>
-			</div>
-		</form>
-	</mat-step>
-
-	<mat-step>
-		<ng-template matStepLabel>Done</ng-template>
-		<p>You are now done.</p>
-		<div>
-			<button mat-button matStepperPrevious>Back</button>
-			<button mat-button (click)="stepper.reset()">Reset</button>
-		</div>
-		<div>
-			<button mat-button (click)="savePoll()" [disabled]="!pollFormGroup.valid || !configurationFormGroup.valid">
-				Enregistrer le sondage
-			</button>
-		</div>
-	</mat-step>
-</mat-vertical-stepper>

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

@@ -0,0 +1,19 @@
+@import '../../../../styles/variables';
+
+.step-bar-container {
+	margin: 1em 0;
+	height: 0.5em;
+	display: inline-block;
+	min-width: 1px;
+	background: $grey-light;
+	width: 100%;
+}
+.step-bar-progress {
+	position: relative;
+	top: -0.6em;
+	left: 0;
+	height: 0.5em;
+	display: inline-block;
+	min-width: 1px;
+	background: $primary;
+}

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

@@ -1,65 +1,13 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-
-import { Poll } from '../../../core/models/poll.model';
-import { UuidService } from '../../../core/services/uuid.service';
-import { DateService } from '../../../core/services/date.service';
 
 @Component({
 	selector: 'app-stepper',
 	templateUrl: './stepper.component.html',
 	styleUrls: ['./stepper.component.scss'],
 })
-export class StepperComponent implements OnInit {
+export class StepperComponent {
 	@Input()
-	public poll?: Poll;
+	public step_current: number = 1;
-
+	@Input()
-	public pollFormGroup: FormGroup;
+	public step_max: number = 5;
-	public configurationFormGroup: FormGroup;
-	public choicesFormGroup: FormGroup;
-
-	public urlPrefix: string = window.location.origin + '/participation/';
-
-	constructor(private fb: FormBuilder, private uuidService: UuidService) {}
-
-	ngOnInit(): void {
-		this.pollFormGroup = this.fb.group({
-			question: [this.poll ? this.poll.title : '', [Validators.required]],
-			slug: [this.poll ? this.poll.slug : this.uuidService.getUUID(), [Validators.required]],
-			description: [this.poll ? this.poll.description : ''],
-		});
-
-		this.configurationFormGroup = this.fb.group({
-			title: [this.poll ? this.poll.configuration : false, [Validators.required]],
-			isAboutDate: [this.poll ? this.poll.configuration.isAboutDate : false, [Validators.required]],
-			isProtectedByPassword: [
-				this.poll ? this.poll.configuration.isProtectedByPassword : false,
-				[Validators.required],
-			],
-			isOwnerNotifiedByEmailOnNewVote: [
-				this.poll ? this.poll.configuration.isOwnerNotifiedByEmailOnNewVote : false,
-				[Validators.required],
-			],
-			isOwnerNotifiedByEmailOnNewComment: [
-				this.poll ? this.poll.configuration.isOwnerNotifiedByEmailOnNewComment : false,
-				[Validators.required],
-			],
-			isMaybeAnswerAvailable: [
-				this.poll ? this.poll.configuration.isMaybeAnswerAvailable : false,
-				[Validators.required],
-			],
-			areResultsPublic: [this.poll ? this.poll.configuration.areResultsPublic : true, [Validators.required]],
-			expiracyNumberOfDays: [
-				this.poll ? DateService.diffInDays(new Date(), this.poll.configuration.expires) : 60,
-				[Validators.required],
-			],
-		});
-	}
-
-	public savePoll(): void {
-		if (this.pollFormGroup.valid && this.configurationFormGroup.valid) {
-			console.log('Le sondage est correctement rempli, prêt à enregistrer.');
-			// TODO : save the poll
-		}
-	}
 }

src/app/features/old-stuff/config/defaultConfigs.ts

@@ -1,10 +1,10 @@
 export interface DateChoice {
 	literal: string;
-	timeList: TimeSlices[];
+	timeList: TimeChoice[];
 	date_object: Date;
 }
 
-export interface TimeSlices {
+export interface TimeChoice {
 	literal: string;
 }
 
@@ -15,27 +15,27 @@ export interface PollAnswer {
 	file: string;
 	literal: string;
 	date_object: Date;
-	timeList: TimeSlices[];
+	timeList: TimeChoice[];
 }
 
 const currentYear = new Date().getFullYear();
 const currentMonth = new Date().getMonth();
 const currentDay = new Date().getDate();
 
-export const basicSlicesOfDay: TimeSlices[] = [{ literal: 'matin' }, { literal: 'midi' }, { literal: 'soir' }];
+export const basicSlicesOfDay: TimeChoice[] = [{ literal: 'matin' }, { literal: 'midi' }, { literal: 'soir' }];
-export const otherSlicesOfDay: TimeSlices[] = [
+export const otherSlicesOfDay: TimeChoice[] = [
 	{ literal: 'aux aurores' },
 	{ literal: 'au petit dej' },
 	{ literal: 'au deuxième petit dej des hobbits' },
 ];
-export const defaultTimeOfDay: TimeSlices[] = (() => {
+export const defaultTimeOfDay: TimeChoice[] = (() => {
 	return [...basicSlicesOfDay];
 })();
 
-export const otherTimeOfDay: TimeSlices[] = (() => {
+export const otherTimeOfDay: TimeChoice[] = (() => {
 	return [...otherSlicesOfDay];
 })();
-export const moreTimeOfDay: TimeSlices[] = (() => {
+export const moreTimeOfDay: TimeChoice[] = (() => {
 	return [...otherSlicesOfDay];
 })();
 export const defaultDates: DateChoice[] = [

src/styles/partials/_form-controls.scss

@@ -3,7 +3,6 @@ select,
 textarea {
 	@extend .clickable;
 	margin-bottom: 0.25rem;
-	border-bottom: 2px solid $primary_color;
 	padding: 0.5rem;
 
 	&:active,
@@ -13,44 +12,10 @@ textarea {
 	}
 }
 
-select,
-option {
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	border-radius: 0;
-	background-color: transparent;
-	background-image: url('/assets/img/fleche_bas.svg');
-	padding-right: 2.5rem;
-	background-repeat: no-repeat;
-	background-size: 9px 8px;
-	background-position: right 1rem center;
-	background-clip: border-box;
-	min-width: 10rem;
-}
-
-select {
-	@extend .select, .input;
-}
-
-#multi_hours select {
-	min-width: 300px !important;
-}
-
-input {
-	@extend .input, .text-ellipsis;
-}
-
-label {
-	margin-top: 0.5rem;
-}
-
 textarea {
+	min-height: 3em;
 	width: 100%;
-	max-width: 100%;
+	display: block;
-	min-height: 213px;
-	padding: 0.5em 1em;
-	margin-bottom: 1em;
-	border-left: 3px solid $primary_color;
 }
 
 .comment {

src/styles/partials/_forms.scss

@@ -30,9 +30,9 @@ input {
 input,
 select,
 textarea {
+	width: 100%;
 	padding: 1rem;
-	border: 1px solid $secondary_color;
+	border: 1px solid $border-color;
-	border-bottom: 3px solid $primary_color;
 }
 
 input,
@@ -71,3 +71,8 @@ li {
 button[type='submit'] {
 	margin-top: 2em;
 }
+
+hr {
+	margin: 4em 0;
+	border: solid 3px $primary;
+}

src/styles/variables.scss

@@ -48,8 +48,9 @@ $logo_color_2: $d-primary-intense;
 $legend_color: $d-info-text;
 $legend_color_2: $d-info;
 $choice_select_border_color: $d-info;
-$hover-color: $warm-grey;
+$hover-color: $d-neutral;
-$grey-dark: $warm-grey;
+$border-color: $d-neutral;
+$grey-dark: $d-primary;
 $grey-light: $beige-light;
 $clicked-color: $d-primary;
 $mini-button-color: $d-primary-intense;