Merge branch 'up-to-seven-steps' into 'master'

Up to seven steps

See merge request framasoft/framadate/funky-framadate-front!52

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

@@ -0,0 +1,55 @@
+<div class="actions">
+	<button class="button">
+		Fermer
+		<i class="fa fa-times"></i>
+	</button>
+	<button class="export export-print btn" (click)="print()">
+		<i class="fa fa-print"></i>
+		Imprimer le sondage
+	</button>
+	<button class="export export-csv btn" (click)="exportCSV()">
+		<i class="fa fa-file-calc-o" aria-hidden="true"></i>
+		Exporter en .csv
+	</button>
+	<button class="export export-json btn" (click)="exportJson()">
+		<i class="fa fa-file-archive-o" aria-hidden="true"></i>
+		export json
+	</button>
+
+	<button class="replicate duplicate btn" [routerLink]="['']">
+		<i class="fa fa-pencil" aria-hidden="true"></i>
+		Modifier
+	</button>
+	<button class="replicate duplicate btn" (click)="duplicate()">
+		<i class="fa fa-copy" aria-hidden="true"></i>
+		Dupliquer
+	</button>
+
+	<div id="export_and_share">
+		<div class="sharing" *ngIf="pollService.poll">
+			<div class="margin-top-x8">
+				Lien administrateur
+
+				<i class="fa fa-share" aria-hidden="true"></i>
+			</div>
+			<p class="nobold text-14" for="copyLink">
+				<a href="{{ pollService.getParticipationUrl() }}"> {{ pollService.getParticipationUrl() }} </a>
+				<app-copy-text [textToCopy]="pollService.getParticipationUrl()"></app-copy-text>
+			</p>
+		</div>
+	</div>
+	<div class="admin-actions" *ngIf="pollService.admin_key">
+		<button class="replicate duplicate button has-text-warning" (click)="deleteAllVotes()">
+			<i class="fa fa-user-times" aria-hidden="true"></i>
+			Supprimer tous les votes
+		</button>
+		<button class="replicate duplicate button has-text-warning" (click)="deleteAllComments()">
+			<i class="fa fa-comments-o" aria-hidden="true"></i>
+			Supprimer tous les commentaires
+		</button>
+		<button class="replicate duplicate button has-text-danger" (click)="deletePoll()">
+			<i class="fa fa-trash" aria-hidden="true"></i>
+			Supprimer le sondage
+		</button>
+	</div>
+</div>

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

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

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

@@ -0,0 +1,72 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { PollUtilitiesService } from '../../../core/services/poll.utilities.service';
+import { StorageService } from '../../../core/services/storage.service';
+import { ApiService } from '../../../core/services/api.service';
+import { PollService } from '../../../core/services/poll.service';
+import { DateService } from '../../../core/services/date.service';
+import { ToastService } from '../../../core/services/toast.service';
+import { ConfirmationService } from 'primeng/api';
+
+@Component({
+	selector: 'app-actions-menu',
+	templateUrl: './actions-menu.component.html',
+	styleUrls: ['./actions-menu.component.scss'],
+})
+export class ActionsMenuComponent implements OnInit {
+	constructor(
+		private router: Router,
+		private utils: PollUtilitiesService,
+		private _Activatedroute: ActivatedRoute,
+		private confirmationService: ConfirmationService,
+		public storageService: StorageService,
+		public api: ApiService,
+		public pollService: PollService,
+		public dateService: DateService,
+		public toastService: ToastService
+	) {}
+
+	ngOnInit(): void {}
+
+	/**
+	 * export all the poll data available to the public as a CSV single file
+	 */
+	exportCSV(): void {
+		this.utils.exportCSV(this.pollService._poll.getValue());
+	}
+
+	exportJson(): void {
+		this.utils.download(
+			'export_poll_' + this.pollService._poll.getValue().custom_url + '.json',
+			JSON.stringify(this.pollService._poll.getValue())
+		);
+	}
+
+	duplicate(): void {
+		alert('TODO');
+	}
+
+	print(): void {
+		alert('TODO');
+	}
+
+	deleteAllVotes() {
+		this.confirmationService.confirm({
+			message: 'Supprimer tous les votes de ce sondage?',
+			accept: () => {
+				alert('TODO');
+				console.log('TODO');
+			},
+		});
+	}
+
+	deleteAllComments() {
+		alert('TODO');
+		console.log('TODO');
+	}
+
+	deletePoll() {
+		alert('TODO');
+		console.log('TODO');
+	}
+}

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

@@ -9,6 +9,8 @@ import { StepFiveComponent } from './form/steps/step-five/step-five.component';
 import { StepOneComponent } from './form/steps/step-one/step-one.component';
 import { SuccessComponent } from './success/success.component';
 import { AdminConsultationComponent } from './consultation/consultation.component';
+import { StepSixComponent } from './form/steps/step-six/step-six.component';
+import { StepSevenComponent } from './form/steps/step-seven/step-seven.component';
 
 const routes: Routes = [
 	{
@@ -24,6 +26,8 @@ const routes: Routes = [
 			{ path: '3', component: StepThreeComponent },
 			{ path: '4', component: StepFourComponent },
 			{ path: '5', component: StepFiveComponent },
+			{ path: '6', component: StepSixComponent },
+			{ path: '7', component: StepSevenComponent },
 		],
 	},
 	{

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

@@ -29,6 +29,12 @@ import { PickerComponent } from './form/date/picker/picker.component';
 import { TimeListComponent } from './form/date/list/time/time-list.component';
 import { AdminConsultationComponent } from './consultation/consultation.component';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { StepSixComponent } from './form/steps/step-six/step-six.component';
+import { StepSevenComponent } from './form/steps/step-seven/step-seven.component';
+import { OptionLinkComponent } from './form/option-link/option-link.component';
+import { TextListComponent } from './form/text-list/text-list.component';
+import { HoursComponent } from './form/hours/hours.component';
+import { ActionsMenuComponent } from './actions-menu/actions-menu.component';
 
 @NgModule({
 	declarations: [
@@ -53,6 +59,12 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog';
 		PickerComponent,
 		TimeListComponent,
 		AdminConsultationComponent,
+		StepSixComponent,
+		StepSevenComponent,
+		OptionLinkComponent,
+		TextListComponent,
+		HoursComponent,
+		ActionsMenuComponent,
 	],
 	imports: [
 		AdministrationRoutingModule,
@@ -65,5 +77,6 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog';
 		DragDropModule,
 		ConfirmDialogModule,
 	],
+	exports: [ActionsMenuComponent],
 })
 export class AdministrationModule {}

src/app/features/administration/form/date/list/day/day-list.component.html

@@ -2,7 +2,8 @@
 	<div class="columns">
 		<div class="column">
 			<!--				ajouter une date-->
-			<button class="btn btn--primary" (click)="addChoice()">
+			<button class="button is-primary" (click)="addChoice()">
+				<i class="fa fa-plus"></i>
 				{{ 'dates.add' | translate }}
 			</button>
 		</div>
@@ -21,12 +22,23 @@
 				cdkDrag
 				[ngClass]="{ 'day-weekend': isWeekendDay(choice.date_object) }"
 			>
-				<span class="button is-default">
+				<!--				<span class="button is-default">-->
-					<i class="icon fa fa-arrows-v"></i>
+				<!--					<i class="icon fa fa-arrows-v"></i>-->
-					<span *ngIf="choice.date_object">
+				<!--					<span *ngIf="choice.date_object">-->
-						{{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
+				<!--						{{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}-->
-					</span>
+				<!--					</span>-->
-				</span>
+				<!--				</span>-->
+				<div class="columns">
+					<div class="column">
+						<label for="dateChoices_{{ id }}">
+							Date {{ id + 1 }} - {{ choice.date_object | date: 'E':'Europe/Paris':'fr_FR' }}
+						</label>
+					</div>
+					<div class="column has-text-right">
+						<span class="format-helper">JJ/MM/AAAA</span>
+					</div>
+				</div>
+
 				<input
 					[(ngModel)]="choice.date_input"
 					class="date-choice-item"
@@ -34,16 +46,16 @@
 					id="dateChoices_{{ id }}"
 					type="date"
 				/>
-				<button (click)="dateChoices.splice(id, 1)" class="btn btn-warning">
+				<hr />
-					<i class="fa fa-times" aria-hidden="true"></i>
+				<div class="button delete-date is-block" (click)="dateChoices.splice(id, 1)">
-				</button>
+					<i class="fa fa-trash-o" aria-hidden="true"></i>
-				<br />
+					Supprimer la date
-
+				</div>
 				<div *ngIf="hasSeveralHours" class="several-times">
 					<br />
 					<app-time-list [timeSlices]="choice.timeSlices" [prefix_choice_id]="id"></app-time-list>
 					<div class="text-right">
-						<button (click)="addTimeToDate(choice, id)" class="btn btn--primary">
+						<button (click)="addTimeToDate(choice, id)" class="button is-primary">
 							<i class="fa fa-plus"></i>
 							{{ 'dates.add_time' | translate }}
 							<i class="fa fa-clock-o"></i>

src/app/features/administration/form/date/list/day/day-list.component.scss

@@ -1,26 +1,70 @@
+@import '../../../../../../../styles/variables';
+
 .day-weekend {
 	background: #dccfed;
 }
+
 .button {
 	min-width: 9ch;
 }
+
 .icon {
 	margin-right: 1ch;
 	margin-left: 1ch;
 	display: inline-block;
 }
+
 .several-times {
 	padding-left: 2em;
 	width: 96.5%;
 }
+
 .date-choice {
-	&:nth-child(odd) {
+	margin-bottom: 0.5em;
-		background: #fbf8ff;
+	border-radius: 0.25em;
-		&.day-weekend {
+	background: $bg-grey;
-			background: #d7cae9;
+
-		}
+	.columns {
+		margin-bottom: 0;
 	}
+	label {
+		font-weight: 600;
+	}
+	input,
+	.button {
+		width: 100%;
+		display: block;
+	}
+	hr {
+		margin: 0.5em -1em;
+		background: $rules;
+	}
+	//&.day-weekend {
+	//	background: mix($legend_color_2, $grey-lighter);
+	//}
+
+	//&:nth-child(odd) {
+	//	background: $grey-lighter;
+	//
+	//	&.day-weekend {
+	//		background: mix($d-neutral, $grey-lighter);
+	//	}
+	//}
 }
+
 .date-choice-item {
 	width: 75%;
 }
+
+.button .fa {
+	margin-left: 1ch;
+	display: inline-block;
+}
+
+.delete-date {
+	color: $secondary_color !important;
+
+	.fa {
+		color: $secondary_color !important;
+	}
+}

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

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

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

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

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

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

src/app/features/administration/form/option-link/option-link.component.html

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

src/app/features/administration/form/option-link/option-link.component.spec.ts

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

src/app/features/administration/form/option-link/option-link.component.ts

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

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

@@ -51,13 +51,17 @@
 	<div class="columns">
 		<div class="column">
 			<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/3']">
-				précédent
+				Précédent
 			</button>
 		</div>
 		<div class="column">
-			<button class="btn is-primary is-fullwidth" (click)="createPoll()" [disabled]="!pollService.form.valid">
+			<button
+				class="btn is-primary is-fullwidth"
+				[routerLink]="['/administration/step/5']"
+				[disabled]="!pollService.form.valid"
+			>
 				<i class="fa fa-save"></i>
-				Enregistrer le sondage
+				Suivant
 			</button>
 		</div>
 	</div>

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

@@ -21,15 +21,4 @@ export class StepFourComponent implements OnInit {
 	}
 
 	ngOnInit(): void {}
-
-	createPoll() {
-		this.pollService.createPoll().then(
-			(resp) => {
-				this.router.navigate(['administration/success']);
-			},
-			(err) => {
-				console.error('oops err', err);
-			}
-		);
-	}
 }

src/app/features/administration/form/steps/step-seven/step-seven.component.html

@@ -0,0 +1,94 @@
+<div class="step-container min-height step-resume">
+	<app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
+	<div class="columns content">
+		<div class="column">
+			<h2 class="title is-2">
+				Voici le résumé de votre sondage
+			</h2>
+			<p class="helper">
+				En cliquant sur le bouton « Modifier » d’une section vous serez renvoyé à l’étape correspondante de la
+				création du sondage. Vous devrez repasser par toutes les étapes suivantes.
+				<br />
+				Mais rassurez-vous, vous n’aurez pas à tout remplir à nouveau.
+			</p>
+			<div class="resume">
+				<h3 class="title is-3">Mes informations générales</h3>
+				<div class="block-resume">
+					<h3 class="title is-4">
+						{{ pollService.form.value.title }}
+					</h3>
+					<p class="description">
+						{{ pollService.form.value.description }}
+					</p>
+					<hr />
+					<div class="go-to-step" [routerLink]="['/administration/step/1']">
+						<i class="fa fa-pencil"></i> Modifier
+					</div>
+				</div>
+				<h3 class="title is-3">Mon type de sondage</h3>
+				<div class="block-resume">
+					{{ pollService.form.value.isAboutDate ? 'Date' : 'Propositions' }}
+					<hr />
+					<div class="go-to-step" [routerLink]="['/administration/step/2']">
+						<i class="fa fa-pencil"></i> Modifier
+					</div>
+				</div>
+				<h3 class="title is-3">Mes dates et horaires</h3>
+				<div class="block-resume">
+					<div class="list-datechoices" *ngIf="pollService.form.value.isAboutDate">
+						<ul *ngFor="let choice of pollService.dateChoiceList">
+							<li>
+								{{ choice.date_object | date: 'E d M yyy':'Europe/Paris':'fr_FR' }}
+							</li>
+						</ul>
+					</div>
+					<div class="list-texts" *ngIf="!pollService.form.value.isAboutDate">
+						<ul *ngFor="let choice of pollService.choices">
+							<li>
+								{{ choice }}
+							</li>
+						</ul>
+					</div>
+					<hr />
+					<div class="go-to-step" [routerLink]="['/administration/step/3']">
+						<i class="fa fa-pencil"></i> Modifier
+					</div>
+				</div>
+				<h3 class="title is-3">Mes paramètres et options de notifications</h3>
+				<div class="block-resume">
+					<div class="password">
+						Protégé par mot de passe: {{ pollService.form.value.isProtectedByPassword ? 'oui' : 'non' }}
+					</div>
+					<hr />
+					<div class="go-to-step clickable" [routerLink]="['/administration/step/4']">
+						<i class="fa fa-pencil"></i> Modifier
+					</div>
+				</div>
+				<h3 class="title is-3">Mon nom et mon adresse e-mail</h3>
+				<div class="block-resume">
+					<div class="name">
+						{{ pollService.form.value.creatorPseudo }}
+					</div>
+					<div class="email">
+						{{ pollService.form.value.creatorEmail }}
+					</div>
+					<hr />
+					<div class="go-to-step" [routerLink]="['/administration/step/6']">
+						<i class="fa fa-pencil"></i> Modifier
+					</div>
+				</div>
+			</div>
+			<div class="column">
+				<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/6']">
+					précédent
+				</button>
+			</div>
+			<div class="column">
+				<button class="btn is-primary is-fullwidth" (click)="createPoll()" [disabled]="!pollService.form.valid">
+					<i class="fa fa-save"></i>
+					Enregistrer le sondage
+				</button>
+			</div>
+		</div>
+	</div>
+</div>

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

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

src/app/features/administration/form/steps/step-seven/step-seven.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { PollService } from '../../../../../core/services/poll.service';
+
+@Component({
+	selector: 'app-step-seven',
+	templateUrl: './step-seven.component.html',
+	styleUrls: ['./step-seven.component.scss'],
+})
+export class StepSevenComponent implements OnInit {
+	constructor(private router: Router, public pollService: PollService) {
+		this.pollService.step_current = 7;
+	}
+
+	ngOnInit(): void {}
+	createPoll() {
+		this.pollService.createPoll().then(
+			(resp) => {
+				this.router.navigate(['administration/success']);
+			},
+			(err) => {
+				console.error('oops err', err);
+			}
+		);
+	}
+}

src/app/features/administration/form/steps/step-six/step-six.component.html

@@ -0,0 +1,34 @@
+<div class="step-container min-height">
+	<app-stepper [step_current]="6" [step_max]="pollService.step_max"></app-stepper>
+	<div class="">
+		<form action="#" [formGroup]="pollService.form">
+			<h2 class="title is-2">
+				Dites à vos participants qui vous êtes !
+			</h2>
+			<label for="name">
+				Votre nom (obligatoire)
+			</label>
+			<input class="input" type="text" id="name" formControlName="creatorPseudo" />
+			<label for="email">
+				Votre adresse e-mail (obligatoire)
+			</label>
+			<input class="input" type="text" id="email" formControlName="creatorEmail" />
+		</form>
+	</div>
+	<div class="columns">
+		<div class="column">
+			<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/5']">
+				Précédent
+			</button>
+		</div>
+		<div class="column">
+			<button
+				class="btn is-primary is-fullwidth"
+				[routerLink]="['/administration/step/7']"
+				[disabled]="!pollService.form.valid"
+			>
+				Suivant
+			</button>
+		</div>
+	</div>
+</div>

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

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

src/app/features/administration/form/steps/step-six/step-six.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+import { PollService } from '../../../../../core/services/poll.service';
+
+@Component({
+	selector: 'app-step-six',
+	templateUrl: './step-six.component.html',
+	styleUrls: ['./step-six.component.scss'],
+})
+export class StepSixComponent implements OnInit {
+	constructor(public pollService: PollService) {
+		this.pollService.step_current = 6;
+	}
+
+	ngOnInit(): void {}
+}

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

@@ -1,5 +1,5 @@
 <div class="step min-height">
-	<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
+	<app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper>
 	<app-errors-list [form]="pollService.form"></app-errors-list>
 	<!--			choix spécialement pour les dates-->
 	<div class="calendar" *ngIf="mode_calendar">

src/app/features/administration/form/text-list/text-list.component.html

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

src/app/features/administration/form/text-list/text-list.component.spec.ts

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

src/app/features/administration/form/text-list/text-list.component.ts

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

src/app/features/consultation/consultation-landing/consultation-landing.component.html

@@ -0,0 +1,29 @@
+<div>
+	<h2 class="title is-2">
+		<!--		{{pollService._poll.getValue().creatorPseudo}}-->
+		vous invite à participer à son sondage
+	</h2>
+	<div>
+		<div class="badge creator">
+			<!--			{{pollService._poll.getValue().creatorPseudo}}-->
+		</div>
+		<h3 class="title is-3">
+			{{ pollService.poll.title }}
+		</h3>
+		<p class="description">
+			Si l’administrateur du sondage a ajouter une description elle sera affiché ici.
+		</p>
+		<p class="date-end-box">
+			Fin du sondage le
+			<strong class="date-end">
+				14/11/2021
+			</strong>
+		</p>
+		<button
+			class="button is-primary"
+			[routerLink]="['consultation/' + pollService._poll.getValue().custom_url + '/simple']"
+		>
+			Je donne mes disponibilités
+		</button>
+	</div>
+</div>

src/app/features/consultation/consultation-landing/consultation-landing.component.spec.ts

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

src/app/features/consultation/consultation-landing/consultation-landing.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { PollService } from '../../../core/services/poll.service';
+
+@Component({
+	selector: 'app-consultation-landing',
+	templateUrl: './consultation-landing.component.html',
+	styleUrls: ['./consultation-landing.component.scss'],
+})
+export class ConsultationLandingComponent implements OnInit {
+	constructor(public pollService: PollService) {}
+
+	ngOnInit(): void {}
+}

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

@@ -4,18 +4,24 @@ import { RouterModule, Routes } from '@angular/router';
 import { ConsultationComponent } from './consultation.component';
 import { WipTodoComponent } from '../../shared/components/ui/wip-todo/wip-todo.component';
 import { PasswordPromptComponent } from './password/password-prompt/password-prompt.component';
+import { ConsultationLandingComponent } from './consultation-landing/consultation-landing.component';
+import { SuccessComponent } from './success/success.component';
+import { ConsultationUserComponent } from './consultation-user/consultation-user.component';
 
 const routes: Routes = [
-	{ path: 'secure/:pass_hash', component: ConsultationComponent },
+	{
+		path: '',
+		component: ConsultationLandingComponent,
+		children: [],
+	},
 
+	{ path: 'secure/:pass_hash', component: ConsultationComponent },
 	{ path: 'prompt', component: PasswordPromptComponent },
 	{ path: 'simple', component: WipTodoComponent },
 	{ path: 'table', component: WipTodoComponent },
-	{
+
-		path: '',
+	{ path: 'user-info', component: ConsultationUserComponent },
-		component: ConsultationComponent,
+	{ path: 'success', component: SuccessComponent },
-		children: [],
-	},
 ];
 @NgModule({
 	imports: [RouterModule.forChild(routes)],

src/app/features/consultation/consultation-user/consultation-user.component.html

@@ -0,0 +1,26 @@
+<div class="user-infos">
+	<h2 class="title is-2">
+		Dites à l’organisateur et aux autres participants qui vous êtes !
+	</h2>
+	<label for="name">
+		Votre nom (obligatoire)
+	</label>
+	<input class="input" type="text" id="name" />
+	<label for="email">
+		Votre adresse e-mail (obligatoire)
+	</label>
+	<input class="input" type="text" id="email" />
+
+	<div class="columns">
+		<div class="column">
+			<button class="button is-default" [routerLink]="['']">
+				Précédent
+			</button>
+		</div>
+		<div class="column">
+			<button class="button is-success" [routerLink]="['']">
+				Je participe
+			</button>
+		</div>
+	</div>
+</div>

src/app/features/consultation/consultation-user/consultation-user.component.spec.ts

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

src/app/features/consultation/consultation-user/consultation-user.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { PollService } from '../../../core/services/poll.service';
+
+@Component({
+	selector: 'app-consultation-user',
+	templateUrl: './consultation-user.component.html',
+	styleUrls: ['./consultation-user.component.scss'],
+})
+export class ConsultationUserComponent implements OnInit {
+	constructor(public pollService: PollService) {}
+
+	ngOnInit(): void {}
+}

src/app/features/consultation/consultation.component.html

@@ -37,40 +37,7 @@
 							<p class="card-header-icon" *ngIf="poll.owner">author : {{ poll.owner?.pseudo }}</p>
 						</div>
 						<div class="column">
-							<button class="export export-print btn" (click)="print()">
+							<app-actions-menu></app-actions-menu>
-								<i class="fa fa-print"></i>
-								Imprimer le sondage
-							</button>
-							<button class="export export-csv btn" (click)="exportCSV()">
-								<i class="fa fa-file-calc-o" aria-hidden="true"></i>
-								Exporter en .csv
-							</button>
-							<button class="export export-json btn" (click)="exportJson()">
-								<i class="fa fa-file-archive-o" aria-hidden="true"></i>
-								export json
-							</button>
-
-							<button class="replicate duplicate btn" (click)="duplicate()">
-								<i class="fa fa-copy" aria-hidden="true"></i>
-								Dupliquer
-							</button>
-
-							<div id="export_and_share">
-								<div class="sharing" *ngIf="poll">
-									<div class="margin-top-x8">
-										Partager le sondage
-
-										<i class="fa fa-share" aria-hidden="true"></i>
-									</div>
-									<p class="nobold text-14" for="copyLink">
-										<a href="{{ pollService.getParticipationUrl() }}">
-											{{ pollService.getParticipationUrl() }} </a
-										><app-copy-text
-											[textToCopy]="pollService.getParticipationUrl()"
-										></app-copy-text>
-									</p>
-								</div>
-							</div>
 						</div>
 					</div>
 				</header>
@@ -120,13 +87,11 @@
 						<i class="fa fa-spinner fa-4x"></i>
 					</section>
 					<button
-						class="btn btn-block submit-votestack is-primary"
+						class="button is-block submit-votestack is-primary"
 						(click)="addVoteStack()"
 						*ngIf="!storageService.vote_stack || !storageService.vote_stack.id"
 					>
 						<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer
-
-						<!--						{{ storageService.vote_stack.votes.length }} réponses-->
 					</button>
 					<button
 						class="btn btn--primary btn-block submit-votestack update"
@@ -139,7 +104,11 @@
 
 				<div class="columns">
 					<div class="column">
-						<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>
+						<app-comments
+							*ngIf="poll.allow_comments"
+							[poll]="poll"
+							[vote_stack]="storageService.vote_stack"
+						></app-comments>
 					</div>
 				</div>
 
@@ -151,8 +120,6 @@
 						*ngIf="!storageService.vote_stack || !storageService.vote_stack.id"
 					>
 						<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer
-
-						<!--						{{ storageService.vote_stack.votes.length }} réponses-->
 					</button>
 					<button
 						class="btn btn--primary btn-block submit-votestack update"
@@ -162,10 +129,6 @@
 						<i class="fa fa-edit" aria-hidden="true"></i> Mettre à jour
 					</button>
 				</div>
-
-				<!--				<footer class="card-footer" *ngIf="!isArchived">-->
-				<!--					TODO links-->
-				<!--				</footer>-->
 			</div>
 		</div>
 	</div>

src/app/features/consultation/consultation.component.ts

@@ -15,8 +15,8 @@ import { ToastService } from '../../core/services/toast.service';
 	styleUrls: ['./consultation.component.scss'],
 })
 export class ConsultationComponent implements OnInit, OnDestroy {
-	public isCompactMode = false;
+	// public isCompactMode = false;
-	// public isCompactMode = true;
+	public isCompactMode = true;
 	public poll: Poll;
 	public pollSlug: string;
 	public pass_hash: string;
@@ -139,23 +139,4 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 			this.toastService.display('erreur à l enregistrement');
 		}
 	}
-
-	/**
-	 * export all the poll data available to the public as a CSV single file
-	 */
-	exportCSV(): void {
-		this.utils.exportCSV(this.poll);
-	}
-
-	exportJson(): void {
-		this.utils.download('export_poll_' + this.pollSlug + '.json', JSON.stringify(this.poll));
-	}
-
-	duplicate(): void {
-		alert('TODO');
-	}
-
-	print(): void {
-		alert('TODO');
-	}
 }

src/app/features/consultation/consultation.module.ts

@@ -11,6 +11,10 @@ import { ChoiceButtonComponent } from '../../shared/components/choice-item/choic
 import { PasswordPromptComponent } from './password/password-prompt/password-prompt.component';
 import { ChoiceDetailsComponent } from '../../shared/components/choice-details/choice-details.component';
 import { CoreModule } from '../../core/core.module';
+import { ConsultationLandingComponent } from './consultation-landing/consultation-landing.component';
+import { ConsultationUserComponent } from './consultation-user/consultation-user.component';
+import { SuccessComponent } from './success/success.component';
+import { AdministrationModule } from '../administration/administration.module';
 
 @NgModule({
 	declarations: [
@@ -19,7 +23,16 @@ import { CoreModule } from '../../core/core.module';
 		PollResultsDetailedComponent,
 		ChoiceButtonComponent,
 		PasswordPromptComponent,
+		ConsultationLandingComponent,
+		ConsultationUserComponent,
+		SuccessComponent,
+	],
+	imports: [
+		CommonModule,
+		ConsultationRoutingModule,
+		SharedModule,
+		TranslateModule.forChild({ extend: true }),
+		AdministrationModule,
 	],
-	imports: [CommonModule, ConsultationRoutingModule, SharedModule, TranslateModule.forChild({ extend: true })],
 })
 export class ConsultationModule {}

src/app/features/consultation/success/success.component.html

@@ -0,0 +1,18 @@
+<div class="success">
+	<h2 class="title is-2">
+		Votre participation a bien été prise en compte !
+	</h2>
+	<p class="conclusion">
+		Vous avez participé au sondage « Quand pour le resto ? ». Vous pouvez modifier vos votes, voir les votes des
+		autres participants ou échanger des messages avec eux. Pour ça, cliquez sur « Voir le sondage ».
+	</p>
+	<button
+		class="button is-primary"
+		[routerLink]="['consultation/' + pollService._poll.getValue().custom_url + '/simple']"
+	>
+		Voir le sondage
+	</button>
+	<button class="button is-primary" [routerLink]="['/']">
+		Aller à l’acceuil
+	</button>
+</div>

src/app/features/consultation/success/success.component.spec.ts

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

src/app/features/consultation/success/success.component.ts

@@ -0,0 +1,13 @@
+import { Component, OnInit } from '@angular/core';
+import { PollService } from '../../../core/services/poll.service';
+
+@Component({
+	selector: 'app-success',
+	templateUrl: './success.component.html',
+	styleUrls: ['./success.component.scss'],
+})
+export class SuccessComponent implements OnInit {
+	constructor(public pollService: PollService) {}
+
+	ngOnInit(): void {}
+}

src/styles/partials/_datepicker.scss

@@ -0,0 +1,86 @@
+// calendar primeng
+.calendar {
+	text-align: center;
+}
+.p-datepicker {
+	border: solid 1px $logo_color;
+	padding: 0.5em;
+	margin: 1em auto;
+
+	.p-datepicker-title,
+	.p-datepicker-calendar thead tr th span {
+		color: $secondary_color !important;
+		text-align: center;
+		width: 100%;
+		display: block;
+	}
+
+	p-button,
+	button {
+		border: solid 1px $secondary_color !important;
+		color: $secondary_color !important;
+	}
+
+	.p-datepicker-buttonbar {
+		margin-top: 0.5em;
+		button {
+			min-width: 15em;
+		}
+	}
+
+	.p-datepicker-month {
+		margin-right: 1em;
+	}
+
+	.p-datepicker-weeknumber span {
+		border-right: 1px solid $secondary_color;
+	}
+
+	.p-datepicker-today span {
+		font-weight: bold;
+		border: solid 3px $secondary_color !important;
+		background: $white;
+	}
+
+	.p-datepicker-calendar td span {
+		padding: 1.5em 0.5em;
+		width: 3.5em;
+		transition: all ease 0.5s;
+		background: $white;
+		border: solid 1px $secondary_color;
+		color: $secondary_color;
+
+		&:hover {
+			background: mix($white, $secondary_color);
+			color: $white;
+			transition: all ease 0.2s;
+		}
+	}
+
+	table td > span {
+		border-radius: 0.25em;
+	}
+
+	.p-highlight {
+		background: $secondary_color !important;
+		color: $white !important;
+	}
+
+	.p-disabled {
+		background: $d-grey;
+		color: $grey;
+	}
+
+	.p-datepicker-other-month {
+		color: white;
+	}
+
+	// weekend days
+	tr > td {
+		&:nth-of-type(6),
+		&:nth-of-type(7) {
+			//border-left: 1px solid $border-color;
+			background: $bg-grey;
+		}
+	}
+}

src/styles/partials/_forms.scss

@@ -1,4 +1,7 @@
 @charset "UTF-8";
+
+@import 'datepicker';
+
 .input:hover,
 input:hover,
 select:hover,
@@ -11,6 +14,7 @@ select.is-hovered,
 .select select.is-hovered {
 	border-color: $border-color !important;
 }
+
 app-step-one,
 app-step-two,
 app-step-three,
@@ -18,11 +22,13 @@ app-step-four {
 	padding: 2em 2.5em;
 	display: block;
 }
+
 app-step-five {
 	app-stepper {
 		padding: 2em 2.5em;
 		display: block;
 	}
+
 	.container {
 		padding: 2em;
 	}
@@ -265,78 +271,12 @@ mat-checkbox {
 	padding: 1em;
 }
 
-// calendar primeng
-.p-datepicker {
-	border: solid 1px $logo_color;
-	padding: 0.5em;
-	margin: 1em auto;
-
-	p-button,
-	button {
-		border: solid 1px $secondary_color !important;
-		color: $secondary_color !important;
-	}
-	.p-datepicker-buttonbar {
-		margin-top: 0.5em;
-	}
-	.p-datepicker-month {
-		margin-right: 1em;
-	}
-
-	.p-datepicker-weeknumber span {
-		border-right: 1px solid $secondary_color;
-	}
-
-	.p-datepicker-today td span {
-		font-weight: bold;
-		border: solid 3px $secondary_color;
-		background: $white;
-	}
-
-	.p-datepicker-calendar td span {
-		padding: 1.5em 0.5em;
-		width: 3.5em;
-		transition: all ease 0.5s;
-		background: $white;
-		border: solid 1px $secondary_color;
-		color: $secondary_color;
-
-		&:hover {
-			background: mix($white, $secondary_color);
-			color: $white;
-			transition: all ease 0.2s;
-		}
-	}
-
-	table td > span {
-		border-radius: 0.25em;
-	}
-	.p-highlight {
-		background: $secondary_color !important;
-		color: $white !important;
-	}
-	.p-disabled {
-		background: $d-grey;
-		color: $grey;
-	}
-	.p-datepicker-other-month {
-		color: white;
-	}
-	// weekend days
-	tr > td {
-		&:nth-of-type(6),
-		&:nth-of-type(7) {
-			//border-left: 1px solid $border-color;
-			background: $grey-lighter;
-		}
-	}
-}
-
 .advanced-config {
 	.box {
 		background: $light;
 		border: 3px solid $primary-color;
 	}
+
 	.work-in-progress {
 		padding: 1em 2em;
 		background: $border-color;
@@ -345,5 +285,42 @@ mat-checkbox {
 }
 
 .step-container {
+	padding: 1em 2em;
 	@extend .container, .is-widescreen;
 }
+
+// resume de la création de sondage
+.step-resume {
+	.content {
+		.title {
+			&.is-2,
+			&.is-3 {
+				color: $secondary_color;
+			}
+		}
+	}
+}
+
+.block-resume {
+	border-radius: 0.25em;
+	background: $bg-grey;
+	padding: 1em;
+	margin-bottom: 0.5em;
+
+	hr {
+		margin: 0.5em -1em;
+		background: $rules;
+	}
+
+	.go-to-step {
+		@extend .clickable;
+		color: $secondary_color;
+		padding: 1.5em;
+		border-radius: 0.25em;
+
+		&:hover {
+			background: $secondary_color;
+			color: $white;
+		}
+	}
+}

src/styles/variables.scss

@@ -25,7 +25,8 @@ $beige-lighter: #eff0eb;
 
 $d-primary: #3e3882; // bleu 800
 $d-primary-intense: #6359cf; // bleu 600
-$d-grey: #f6f5fd;
+$d-grey: #f6f5fd; // bleu 300
+$d-rule: #e2e0fa; // bleu 100
 $d-neutral: #767486;
 $d-alt: #a9607f;
 
@@ -42,6 +43,7 @@ $d-error-text: #d51b38;
 $primary_color: $d-primary;
 $primary: $d-primary;
 $secondary_color: $d-primary-intense;
+$bg-grey: $d-grey;
 $font_color: $black;
 $logo_color: $d-primary;
 $logo_color_2: $d-primary-intense;
@@ -49,6 +51,7 @@ $legend_color: $d-info-text;
 $legend_color_2: $d-info;
 $choice_select_border_color: $d-info;
 $hover-color: $d-neutral;
+$rules: $d-rule;
 $border-color: $d-neutral;
 $grey-dark: $d-primary;
 $grey-lighter: $beige-light;