cancel dialog on creation

angular.json

@@ -22,10 +22,16 @@
 						"main": "src/main.ts",
 						"polyfills": "src/polyfills.ts",
 						"tsConfig": "tsconfig.app.json",
-						"assets": ["src/favicon.ico", "src/assets"],
+						"assets": [
+							"src/favicon.ico",
+							"src/assets"
+						],
 						"styles": [
 							"node_modules/fork-awesome/css/fork-awesome.min.css",
 							"node_modules/bulma-switch/dist/css/bulma-switch.min.css",
+							"node_modules/primeicons/primeicons.css",
+							"node_modules/primeng/resources/themes/saga-blue/theme.css",
+							"node_modules/primeng/resources/primeng.min.css",
 							"src/styles.scss"
 						],
 						"scripts": [
@@ -93,8 +99,14 @@
 				"lint": {
 					"builder": "@angular-devkit/build-angular:tslint",
 					"options": {
-						"tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"],
-						"exclude": ["**/node_modules/**"]
+						"tsConfig": [
+							"tsconfig.app.json",
+							"tsconfig.spec.json",
+							"e2e/tsconfig.json"
+						],
+						"exclude": [
+							"**/node_modules/**"
+						]
 					}
 				},
 				"e2e": {

package.json

@@ -59,6 +59,7 @@
 		"ngx-markdown": "^9.0.0",
 		"ngx-webstorage": "^5.0.0",
 		"node-forge": "^0.10.0",
+		"primeicons": "^5.0.0",
 		"primeng": "^11.0.0",
 		"quill": "^1.3.7",
 		"rxjs": "^6.5.5",

src/app/app.component.ts

@@ -101,7 +101,7 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 		});
 
 		// debug cors
-		this.apiService.getAllAvailablePolls();
+		// this.apiService.getAllAvailablePolls();
 	}
 
 	ngAfterViewInit(): void {

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

@@ -28,6 +28,7 @@ import { DayListComponent } from './form/date/list/day/day-list.component';
 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';
 
 @NgModule({
 	declarations: [
@@ -62,6 +63,7 @@ import { AdminConsultationComponent } from './consultation/consultation.componen
 		FormsModule,
 		TranslateModule.forChild({ extend: true }),
 		DragDropModule,
+		ConfirmDialogModule,
 	],
 })
 export class AdministrationModule {}

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

@@ -58,10 +58,31 @@
 			</div>
 		</div>
 	</form>
+	<p-confirmDialog #cd [style]="{ width: '50vw' }">
+		<ng-template pTemplate="header">
+			<h3>{{ 'creation.dialog' | translate }}</h3>
+		</ng-template>
+		<ng-template pTemplate="footer">
+			<button
+				type="button"
+				pButton
+				icon="pi pi-times"
+				[label]="'dialogs.no' | translate"
+				(click)="cd.reject()"
+			></button>
+			<button
+				type="button"
+				pButton
+				icon="pi pi-check"
+				[label]="'dialogs.yes' | translate"
+				(click)="cd.accept()"
+			></button>
+		</ng-template>
+	</p-confirmDialog>
 	<div class="columns">
 		<div class="column">
-			<button class="button is-warning is-fullwidth" [routerLink]="['/']">
-				Annuler
+			<button pButton class="button is-warning is-fullwidth" (click)="cancelCreationDialog()">
+				{{ 'SENTENCES.Cancel' | translate }}
 			</button>
 		</div>
 		<div class="column">

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

@@ -2,6 +2,8 @@ import { Component, Inject, Input, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { PollService } from '../../../../../core/services/poll.service';
 import { DOCUMENT } from '@angular/common';
+import { ConfirmationService } from 'primeng/api';
+import { Router } from '@angular/router';
 
 @Component({
 	selector: 'app-step-one',
@@ -9,13 +11,18 @@ import { DOCUMENT } from '@angular/common';
 	styleUrls: ['./step-one.component.scss'],
 })
 export class StepOneComponent implements OnInit {
-	constructor(public pollService: PollService, @Inject(DOCUMENT) private document: any) {}
-
 	@Input()
 	step_max: any;
 	@Input()
 	form: FormGroup;
 
+	constructor(
+		public pollService: PollService,
+		@Inject(DOCUMENT) private document: any,
+		private router: Router,
+		private confirmationService: ConfirmationService
+	) {}
+
 	ngOnInit(): void {
 		this.pollService.step_current = 1;
 		const selector = '#title';
@@ -24,4 +31,13 @@ export class StepOneComponent implements OnInit {
 			firstField.focus();
 		}
 	}
+
+	cancelCreationDialog() {
+		this.confirmationService.confirm({
+			message: 'Quitter la création de sondage?',
+			accept: () => {
+				this.router.navigate(['/']);
+			},
+		});
+	}
 }

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

@@ -20,6 +20,7 @@
 				<div class="column">
 					<button
 						class="button is-fullwidth"
+						[disabled]="true"
 						[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
 						(click)="pollService.form.controls.isAboutDate.setValue(false)"
 					>

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

@@ -1,4 +1,4 @@
-<section class="creation-stepper">
+<section class="creation-stepper" id="creation_stepper">
 	<div class="shortcuts">
 		<a
 			class="shortcut"
@@ -35,8 +35,20 @@
 			[ngClass]="{ 'is-active': pollService.step_current == 5 }"
 			>5</a
 		>
-		<!--		<a class="shortcut" href="#" [routerLink]="['/administration/step/6']" [ngClass]="{'is-active':pollService.step_current == 6}">6</a>-->
-		<!--		<a class="shortcut" href="#" [routerLink]="['/administration/step/7']" [ngClass]="{'is-active':pollService.step_current == 7}">7</a>-->
+		<a
+			class="shortcut"
+			href="#"
+			[routerLink]="['/administration/step/6']"
+			[ngClass]="{ 'is-active': pollService.step_current == 6 }"
+			>6</a
+		>
+		<a
+			class="shortcut"
+			href="#"
+			[routerLink]="['/administration/step/7']"
+			[ngClass]="{ 'is-active': pollService.step_current == 7 }"
+			>7</a
+		>
 	</div>
 	<div class="step-info">
 		<h2 classs="title is-2" *ngIf="pollService.step_current == 1">
@@ -52,4 +64,28 @@
 	<div class="step-bar-container" style="width: 100%;">
 		<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
 	</div>
+
+	<!--	modale de confirmation pour quitter-->
+	<p-confirmDialog #cd [style]="{ width: '50vw' }">
+		<ng-template pTemplate="header">
+			<h3>{{ 'creation.dialog' | translate }}</h3>
+		</ng-template>
+		<ng-template pTemplate="footer">
+			<button
+				type="button"
+				pButton
+				icon="pi pi-times"
+				[label]="'dialogs.no' | translate"
+				(click)="cd.reject()"
+			></button>
+			<button
+				type="button"
+				pButton
+				icon="pi pi-check"
+				[label]="'dialogs.yes' | translate"
+				(click)="cd.accept()"
+			></button>
+		</ng-template>
+	</p-confirmDialog>
+	<a href="#creation_stepper" (click)="cancelDialog()"></a>
 </section>

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

@@ -1,6 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { PollService } from '../../../core/services/poll.service';
 import { environment } from '../../../../environments/environment';
+import { ConfirmationService } from 'primeng/api';
 
 @Component({
 	selector: 'app-stepper',
@@ -13,5 +14,14 @@ export class StepperComponent {
 	@Input()
 	public step_max: number = 5;
 	public show_shortcuts = environment.showStepperShortcuts;
-	constructor(public pollService: PollService) {}
+	constructor(public pollService: PollService, private confirmationService: ConfirmationService) {}
+
+	cancelDialog() {
+		this.confirmationService.confirm({
+			message: 'Quitter la création de sondage?',
+			accept: () => {
+				this.router.navigate(['/']);
+			},
+		});
+	}
 }

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

@@ -11,6 +11,7 @@ a {
 	max-width: 20em;
 	@extend .truncate;
 }
+.admin-ok pre,
 .truncate {
 	white-space: nowrap;
 	overflow: hidden;

src/app/shared/shared.module.ts

@@ -28,6 +28,8 @@ import { ErasableInputComponent } from './components/ui/erasable-input/erasable-
 import { WipTodoComponent } from './components/ui/wip-todo/wip-todo.component';
 import { ErrorsListComponent } from '../features/shared/components/ui/form/errors-list/errors-list.component';
 import { ShortcutsHelpComponent } from '../features/shared/components/ui/shortcuts-help/shortcuts-help.component';
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { ConfirmationService } from 'primeng/api';
 
 const COMPONENTS = [
 	ChoiceDetailsComponent,
@@ -63,7 +65,8 @@ const MATERIAL_MODULES = [
 
 @NgModule({
 	declarations: COMPONENTS,
-	imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES],
+	imports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ConfirmDialogModule],
 	exports: [...ANGULAR_MODULES, ...MATERIAL_MODULES, ...COMPONENTS],
+	providers: [ConfirmationService],
 })
 export class SharedModule {}

src/assets/i18n/FR.json

@@ -29,6 +29,7 @@
 	"creation": {
 		"title": "Créer un sondage",
 		"want": "Choisissez le type de sondage",
+		"dialog": "Quitter la création de sondage?",
 		"advanced": "Options avancées",
 		"kind": {
 			"classic": "Propositions",
@@ -143,6 +144,10 @@
 		"choiceNotColorblind": "Je ne suis pas",
 		"colorblindText": "daltonien."
 	},
+	"dialogs" : {
+		"no": "non",
+		"yes": "oui"
+	},
 	"selectors": {
 		"lang": "Sélectionner la langue"
 	},

src/environments/environment.ts

@@ -12,16 +12,14 @@ export const environment = {
 	production: false,
 	display_routes: true, // demo paths to test polls
 	autofill_creation: true,
-	advanced_options_display: true,
-	autofill_participation: true,
-	// autofill: false,
+	advanced_options_display: false,
+	autofill_participation: false,
 	showDemoWarning: false,
-	// autoSendNewPoll: true,
 	autoSendNewPoll: false,
 	showStepperShortcuts: true,
 	interval_days_default: 7,
 	expiresDaysDelay: 60,
-	maxCountOfAnswers: 150,
+	maxCountOfAnswers: 300,
 	appTitle: 'Framadate',
 	appVersion: '0.6.0',
 	appLogo: 'assets/img/logo.png',

yarn.lock

@@ -9463,6 +9463,11 @@ pretty-format@^26.0.0, pretty-format@^26.1.0:
     ansi-styles "^4.0.0"
     react-is "^16.12.0"
 
+primeicons@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/primeicons/-/primeicons-5.0.0.tgz#73a0b6028a77c58a9eeb331ad13aaf085e8451ee"
+  integrity sha512-heygWF0X5HFI1otlZE62pp6ye7sZ8om78J9au2BRkg8O7Y8AHTZ9qKMRzchZUHLe8zUAvdi6hZzzm9XxgwIExw==
+
 primeng@^11.0.0:
   version "11.4.5"
   resolved "https://registry.yarnpkg.com/primeng/-/primeng-11.4.5.tgz#128137d727d555f68c212a1dcb1f2af3b0f4afd4"