bg success

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

@@ -11,6 +11,8 @@ import { UserService } from './user.service';
 import { UuidService } from './uuid.service';
 import { HttpClient } from '@angular/common/http';
 import { environment } from '../../../environments/environment';
+import { StorageService } from './storage.service';
+import { Title } from '@angular/platform-browser';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 import { DOCUMENT } from '@angular/common';
@@ -18,6 +20,7 @@ import { DateChoice, TimeSlices } from '../models/dateChoice.model';
 import { DateUtilitiesService } from './date.utilities.service';
 import { Owner } from '../models/owner.model';
 import { Stack } from '../models/stack.model';
+import { Vote } from '../models/vote.model';
 
 @Injectable({
 	providedIn: 'root',
@@ -50,9 +53,11 @@ export class PollService implements Resolve<Poll> {
 		private http: HttpClient,
 		private router: Router,
 		private apiService: ApiService,
+		private storageService: StorageService,
 		private userService: UserService,
 		private uuidService: UuidService,
 		private toastService: ToastService,
+		private titleService: Title,
 		public DateUtilitiesService: DateUtilitiesService,
 		public route: ActivatedRoute,
 		@Inject(DOCUMENT) private document: any,
@@ -89,9 +94,6 @@ export class PollService implements Resolve<Poll> {
 			whoModifiesAnswers: 'everybody',
 			whoCanChangeAnswers: 'everybody',
 			isProtectedByPassword: false,
-			isOwnerNotifiedByEmailOnNewVote: false,
-			isOwnerNotifiedByEmailOnNewComment: false,
-			isMaybeAnswerAvailable: false,
 			richTextMode: false,
 			areResultsPublic: true,
 			expiracyNumberOfDays: 60,
@@ -99,12 +101,6 @@ export class PollService implements Resolve<Poll> {
 		this.automaticSlug();
 	}
 
-	public enrichVoteStackWithCurrentPollChoicesDefaultVotes(vote_stack: Stack) {
-		console.log('vote_stack', vote_stack);
-		this.toastService.display('TODO refill vote stack');
-		// this.form.patchValue(vote_stack)
-	}
-
 	/**
 	 * set the poll slug from other data of the poll
 	 */
@@ -120,19 +116,29 @@ export class PollService implements Resolve<Poll> {
 			creatorEmail: ['', [Validators.required]],
 			custom_url: [this.uuidService.getUUID(), [Validators.required]],
 			description: ['', [Validators.required]],
+			password: ['', [Validators.required]],
 			choices: new FormArray([]),
 			whoModifiesAnswers: ['', [Validators.required]],
 			whoCanChangeAnswers: ['', [Validators.required]],
 			isAboutDate: [true, [Validators.required]],
 			startDateInterval: ['', [Validators.required]],
 			endDateInterval: ['', [Validators.required]],
+			expiresDaysDelay: ['', [Validators.required]],
+			maxCountOfAnswers: ['', [Validators.required]],
+			isZeroKnoledge: [false, [Validators.required]],
 			isProtectedByPassword: [false, [Validators.required]],
-			isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
-			isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
-			isMaybeAnswerAvailable: [false, [Validators.required]],
+			isOwnerNotifiedByEmailOnNewVote: [true, [Validators.required]],
+			isOwnerNotifiedByEmailOnNewComment: [true, [Validators.required]],
 			areResultsPublic: [true, [Validators.required]],
 			richTextMode: [false, [Validators.required]],
-			expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
+			isYesAnswerAvailable: [true, [Validators.required]],
+			isMaybeAnswerAvailable: [true, [Validators.required]],
+			isNoAnswerAvailable: [true, [Validators.required]],
+			allowComments: [true, [Validators.required]],
+			hasMaxCountOfAnswers: [300, [Validators.required]],
+			useVoterUniqueLink: [false, [Validators.required]],
+			voterEmailList: ['', [Validators.required]],
+			allowNewDateTime: [60, [Validators.required, Validators.min(0)]],
 		});
 		this.form = form;
 		return form;
@@ -149,30 +155,36 @@ export class PollService implements Resolve<Poll> {
 	 * @param state
 	 */
 	public async resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Poll> {
+		console.log('resolve route,state', route, state);
 		const segments: string[] = state.url.split('/');
-		const wantedSlug: string = segments.includes('poll') ? segments[segments.indexOf('poll') + 1] : '';
-		if (!wantedSlug && state.url.includes('administration')) {
-			// creation of new poll
-			const poll = new Poll(this.userService.getCurrentUser(), this.uuidService.getUUID(), '');
-			this._poll.next(poll);
-			this.router.navigate(['poll/' + poll.custom_url + '/administration']);
-		}
+		const wantedcustom_url: string = segments.includes('poll') ? segments[segments.indexOf('poll') + 1] : '';
+
 		if (
 			!this._poll.getValue() ||
 			!this._poll.getValue().custom_url ||
-			this._poll.getValue().custom_url !== wantedSlug
+			this._poll.getValue().custom_url !== wantedcustom_url
 		) {
-			await this.loadPollByCustomUrl(wantedSlug);
+			if (this.pass_hash) {
+				this.storageService.vote_stack.pass_hash = this.pass_hash;
+				await this.loadPollBycustom_urlWithPasswordHash(wantedcustom_url, this.pass_hash);
+			} else {
+				await this.loadPollBycustom_url(wantedcustom_url);
+			}
 		}
-		if (this._poll.getValue()) {
-			return this._poll.getValue();
+		const loadedPoll = this._poll.getValue();
+		if (loadedPoll) {
+			this.storageService.vote_stack.poll_custom_url = loadedPoll.custom_url;
+			return loadedPoll;
 		} else {
 			this.router.navigate(['page-not-found']);
 			return;
 		}
 	}
 
-	getAllAvailablePolls() {
+	/**
+	 * get all polls
+	 */
+	getAllAvailablePolls(): void {
 		const baseHref = environment.api.version.apiV1.baseHref;
 		console.log('getAllAvailablePolls baseHref', baseHref);
 		const headers = ApiService.makeHeaders();
@@ -186,22 +198,56 @@ export class PollService implements Resolve<Poll> {
 		}
 	}
 
-	public async loadPollByCustomUrl(slug: string): Promise<void> {
-		if (slug) {
-			const poll: Poll | undefined = await this.apiService.getPollByCustomUrl(slug);
-			console.log({ loadPollBySlugResponse: poll });
-			this.updateCurrentPoll(poll);
-		}
-	}
-	public async loadPollByCustomUrlWithPasswordHash(slug: string, pass_hash: string): Promise<void> {
-		if (slug) {
-			const poll: Poll | undefined = await this.apiService.getPollByCustomUrlWithHash(slug, pass_hash);
-			console.log({ loadPollBySlugResponse: poll });
-			this.updateCurrentPoll(poll);
+	public async loadPollBycustom_url(custom_url: string): Promise<void> {
+		if (custom_url) {
+			const poll: Poll | undefined = await this.apiService.getPollByCustomUrl(custom_url);
+
+			if (poll) {
+				this.updateCurrentPoll(poll);
+				this.titleService.setTitle(`☑️ ${poll.title} - ${environment.appTitle}`);
+			} else {
+				this.toastService.display(`sondage ${custom_url} non trouvé`);
+				this.router.navigate(['page-not-found']);
+			}
+		} else {
+			this.toastService.display(`sondage sans custom url : ${custom_url}`);
 		}
 	}
 
+	public async loadPollBycustom_urlWithPasswordHash(custom_url: string, hash: string): Promise<void> {
+		if (custom_url) {
+			const poll: Poll | undefined = await this.apiService.getPollByCustomUrlWithHash(custom_url, hash);
+
+			if (poll) {
+				this.updateCurrentPoll(poll);
+				this.titleService.setTitle(`☑️ ${poll.title} - ${environment.appTitle}`);
+			} else {
+				this.toastService.display(`sondage ${custom_url} non trouvé`);
+				this.router.navigate(['page-not-found']);
+			}
+		} else {
+			this.toastService.display(`sondage sans custom url : ${custom_url}`);
+		}
+	}
+
+	/**
+	 * update poll and parse its fields
+	 * @param poll
+	 */
 	public updateCurrentPoll(poll: Poll): void {
+		console.log('this.storageService.vote_stack.id', this.storageService.vote_stack.id);
+
+		if (!this.storageService.vote_stack.id || this.storageService.vote_stack.poll_custom_url !== poll.custom_url) {
+			console.log('set base choices', poll.choices);
+			// set the choices only the first time the poll loads, or if we changed the poll
+			console.log(
+				'this.storageService.vote_stack.poll_custom_url',
+				this.storageService.vote_stack.poll_custom_url
+			);
+			// this.storageService.setChoicesForVoteStack(poll.choices);
+		}
+
+		this.toastService.display('sondage bien mis à jour', 'success');
 		this._poll.next(poll);
 	}
 
@@ -310,8 +356,11 @@ export class PollService implements Resolve<Poll> {
 	public createPoll(): void {
 		console.log('this.form', this.form);
 		const newpoll = this.newPollFromForm(this.form);
-		console.log('newpoll', newpoll);
-		this.apiService.createPoll(newpoll);
+		this.apiService.createPoll(newpoll).then((resp) => {
+			console.log('poll created resp', resp);
+			console.log('TODO fill admin_key');
+			this.admin_key = resp.data.admin_key;
+		});
 	}
 
 	/**
@@ -491,77 +540,125 @@ export class PollService implements Resolve<Poll> {
 		return list;
 	}
 
-	getParticipationUrl() {
-		let poll = this._poll.getValue();
-
+	public getParticipationUrlFromForm(): string {
+		return `${environment.frontDomain}#/poll/${this.form.value.custom_url}/consultation`;
+	}
+	public getAdministrationUrlFromForm(): string {
+		// admin_key is filled after creation
+		return `${environment.frontDomain}#/admin/${this.admin_key}/consultation`;
+	}
+	public getParticipationUrl(): string {
 		// http://localhost:4200/#/poll/dessin-anime/consultation
 
 		// TODO handle secure access
 		// http://localhost:4200/#/poll/citron/consultation/secure/1c01ed9c94fc640a1be864f197ff808c
 
-		return window.location.host + '/#/poll/' + poll.custom_url + '/consultation';
+		let url = '';
+		if (this._poll && this._poll.getValue) {
+			const polltemp = this._poll.getValue();
+			if (polltemp) {
+				url = `${environment.frontDomain}#/poll/${polltemp.custom_url}/consultation`;
+			}
+		} else {
+			url = `${environment.frontDomain}#/poll/${this.form.value.custom_url}/consultation`;
+		}
+
+		// TODO handle pass access
+		return url;
+	}
+	public getAdministrationUrl(): string {
+		// http://localhost:4200/#/admin/9S75b70ECXI5J5xDc058d3H40H9r2CHfO0Kj8T02EK2U8rY8fYTn-eS659j2Dhp794Oa6R1b9V70e3WGaE30iD9h45zwdm76C85SWB4LcUCrc7e0Ncc0
+
+		let url = '';
+		if (this._poll && this._poll.getValue) {
+			const polltemp = this._poll.getValue();
+			if (polltemp) {
+				url = `${environment.frontDomain}#/admin/${polltemp.admin_key}`;
+			}
+		} else {
+			url = `${environment.frontDomain}#/admin/${this.form.value.admin_key}`;
+		}
+		return url;
 	}
 
+	/**
+	 * enrich vote stack with missing default votes
+	 * @param vote_stack
+	 */
+	enrichVoteStackWithCurrentPollChoicesDefaultVotes(vote_stack: Stack) {
+		if (this._poll && this._poll.getValue) {
+			const polltemp = this._poll.getValue();
+			polltemp.choices.map((choice) => {
+				// for each vote, if it has the choice_id, do nothing, else, add a default vote
+				if (!this.findExistingVoteFromChoiceId(choice.id, vote_stack.votes)) {
+					vote_stack.votes.push(new Vote(choice.id));
+				}
+			});
+		}
+	}
+	/**
+	 * find an existing vote in vote_stack from its choice_id
+	 * @param choice_id
+	 * @param votes
+	 */
+	findExistingVoteFromChoiceId(choice_id: number, votes: Vote[]) {
+		return votes.find((vote: Vote) => {
+			if (vote.choice_id === choice_id) {
+				return vote;
+			}
+		});
+	}
 	convertCalendarDatesToChoices(array_dates) {
 		return array_dates;
 	}
 
-	newPollFromForm(form: any): any {
-		const newpoll = new Poll(
-			this.userService.getCurrentUser(),
-			this.uuidService.getUUID(),
-			form.controls.title.value
-		);
-		/**
-		 * convert to API version 1 config poll
-		 */
-		const apiV1Poll = {
-			menuVisible: true,
-			expiracyDateDefaultInDays: newpoll.default_expiracy_days_from_now,
-			deletionDateAfterLastModification: newpoll.default_expiracy_days_from_now,
-			pollType: newpoll.kind ? 'date' : 'classic', // classic or dates
-			title: newpoll.title,
-			description: newpoll.description,
-			myName: newpoll.owner.pseudo,
-			myComment: '',
-			isAdmin: true, // when we create a poll, we are admin on it
-			myVoteStack: {},
-			myTempVoteStack: 0,
-			myEmail: newpoll.owner.email,
-			myPolls: [], // list of retrieved polls from the backend api
-			/*
-				 date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates
-				*/
-			allowSeveralHours: 'true',
-			// access
-			visibility: newpoll.areResultsPublic, // visible to one with the link:
-			voteChoices: newpoll.isMaybeAnswerAvailable ? 'yes, maybe, no' : 'yes', // possible answers to a vote choice: only "yes", "yes, maybe, no"
-			created_at: new Date(),
-			expirationDate: '', // expiracy date
-			voteStackId: null, // id of the vote stack to update
-			pollId: null, // id of the current poll when created. data given by the backend api
-			pollSlug: null, // id of the current poll when created. data given by the backend api
-			currentPoll: null, // current poll selected with createPoll or getPoll of ConfigService
-			passwordAccess: false,
-			password: newpoll.password,
-			customUrl: newpoll.custom_url, // custom slug in the url, must be unique
-			customUrlIsUnique: null, // given by the backend
-			urlSlugPublic: null,
-			urlPublic: null,
-			urlAdmin: null,
-			adminKey: '', // key to change config of the poll
-			owner_modifier_token: '', // key to change a vote stack
-			canModifyAnswers: newpoll.modification_policy, // bool for the frontend selector
-			whoModifiesAnswers: newpoll.modification_policy, // everybody, self, nobody (: just admin)
-			whoCanChangeAnswers: newpoll.modification_policy, // everybody, self, nobody (: just admin)
-			dateList: newpoll.dateChoices, // sets of days as strings, config to set identical time for days in a special days poll
-			timeList: newpoll.timeSlices, // ranges of time expressed as strings
+	/**
+	 * @description convert to API version 1 data transition object
+	 * @param form
+	 */
+	newPollFromForm(form: any): Poll {
+		const newOwner = this.storageService.vote_stack.owner;
 
-			answers: newpoll.choices,
-			// modals
-			displayConfirmVoteModalAdmin: false,
-		};
-		console.log('apiV1Poll', apiV1Poll);
-		return apiV1Poll;
+		const newpoll = new Poll(newOwner, form.value.custom_url, form.value.title);
+
+		const pollKeys = Object.keys(newpoll);
+		const formFields = Object.keys(form.value);
+		newpoll.allowed_answers = [];
+
+		for (const pk of pollKeys) {
+			if (formFields.indexOf(pk) !== -1) {
+				const field = form.value[pk];
+				newpoll[pk] = field;
+			} else {
+				console.log('manque pollKey', pk);
+			}
+		}
+
+		if (form.value.isYesAnswerAvailable) {
+			newpoll.allowed_answers.push('yes');
+		}
+		if (form.value.isMaybeAnswerAvailable) {
+			newpoll.allowed_answers.push('maybe');
+		}
+		if (form.value.isNoAnswerAvailable) {
+			newpoll.allowed_answers.push('no');
+		}
+		newpoll.description = form.value.description;
+		newpoll.has_several_hours = form.value.hasSeveralHours;
+		newpoll.hasSeveralHours = form.value.hasSeveralHours;
+		newpoll.max_count_of_answers = form.value.allowComments;
+		newpoll.maxCountOfAnswers = form.value.maxCountOfAnswers;
+		newpoll.password = form.value.password;
+		newpoll.kind = form.value.kind;
+		newpoll.allow_comments = form.value.allowComments;
+		// merge choices from storage
+		if (form.value.kind === 'date') {
+			// convert calendar picker dates
+		}
+		newpoll.choices = Object.assign([], this.storageService.choices);
+		newpoll.dateChoices = Object.assign([], this.storageService.dateChoices);
+		newpoll.timeSlices = Object.assign([], this.storageService.timeSlices);
+		console.log('newpoll', newpoll);
+		return newpoll;
 	}
 }

src/app/features/administration/form/advanced-config/advanced-config.component.html

@@ -103,20 +103,19 @@
 				Réponses proposées
 			</h3>
 
-			<img class="image is-24x24 pull-right" src="assets/img/icon_voter_YES.svg" />
-			<img class="image is-24x24 pull-right" src="assets/img/icon_voter_MAYBE.svg" />
-			<img class="image is-24x24 pull-right" src="assets/img/icon_voter_NO.svg" />
-
 			<mat-checkbox class="is-not-flex" formControlName="isYesAnswerAvailable">
 				La réponse « oui » sera disponible
+				<img class="image is-24x24 pull-right" src="assets/img/icon_voter_YES.svg" />
 			</mat-checkbox>
 			<br />
 			<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
 				La réponse « peut-être » sera disponible
+				<img class="image is-24x24 pull-right" src="assets/img/icon_voter_MAYBE.svg" />
 			</mat-checkbox>
 			<br />
 			<mat-checkbox class="is-not-flex" formControlName="isNoAnswerAvailable">
 				La réponse « non » sera disponible
+				<img class="image is-24x24 pull-right" src="assets/img/icon_voter_NO.svg" />
 			</mat-checkbox>
 		</div>
 		<h3 class="title is-3">

src/app/features/administration/form/advanced-config/advanced-config.component.scss

@@ -1,3 +1,8 @@
 .title {
 	margin-top: 2em;
 }
+.mat-checkbox {
+	img {
+		margin-left: 1em;
+	}
+}

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

@@ -1,104 +1,27 @@
 <app-stepper [step_current]="5" [step_max]="5"></app-stepper>
-<div class="content">
-	<h1 class="title is-1">
-		Félicitations, votre sondage "<strong> {{ pollService.form.value.title }} </strong>" est créé
-	</h1>
-	Un récapitulatif par email vous a été envoyé. Partagez-le au monde avec ce lien: Administrez-le avec cet autre lien:
 
-	<hr />
+<app-success [poll]="pollService.form.value"></app-success>
 
-	<h1 i18n>
-		{{ 'resume.title' | translate }}
-	</h1>
-	<section class="admin">
-		<h2 i18n>{{ 'resume.admins' | translate }}</h2>
-		<p>
-			Votre sondage «
-			<span class="poll-title">
-				{{ pollService.form.value.title }}
-			</span>
-			» a bien été créé !
-		</p>
-		<p>
-			Voici les liens d’accès au sondage, conservez-les soigneusement ! (Si vous les perdez vous pourrez toujours
-			les recevoir par email)
-		</p>
-
-		<p>
-			Pour accéder au sondage et à tous ses paramètres :
-			<a href="{{ pollService.form.value.urlAdmin }}">{{ pollService.form.value.urlAdmin }} </a>
-		</p>
-		<app-copy-text [textToCopy]="pollService.urlPrefix + '/#/admin/' + pollService.admin_key"></app-copy-text>
-		<a href="{{ pollService.urlPrefix + '/#/admin/' + pollService.admin_key }}">
-			Voir le sondage coté administrateur·ice
-		</a>
-		<p class="note">
-			Note : Le sondage sera supprimé {{ pollService.form.value.deletionDateAfterLastModification }} jours après
-			la date de sa dernière modification.
-		</p>
-	</section>
-	<section class="public">
-		<h2 i18n>{{ 'resume.users' | translate }}</h2>
-		<p>
-			Pour accéder au sondage :
-			<a href="{{ pollService.urlPrefix + '/#/poll/' + pollService.form.value.custom_url + '/consultation' }}"
-				>{{ pollService.urlPrefix + '/#/poll/' + pollService.form.value.custom_url + '/consultation' }}
-			</a>
-		</p>
-		<app-copy-text
-			[textToCopy]="pollService.urlPrefix + '/#/poll/' + pollService.form.value.custom_url + '/consultation'"
-		></app-copy-text>
-		<a href="{{ pollService.urlPrefix + '/#/poll/' + pollService.form.value.custom_url + '/consultation' }}">
-			Voir le sondage
-		</a>
-	</section>
-	<section class="mail">
-		<h2 i18n>{{ 'resume.links_mail' | translate }}</h2>
-		<a href="{{ pollService.urlPrefix + '/#/poll/' + pollService.form.value.custom_url + '/consultation' }}">
-			Voir le sondage
-		</a>
-	</section>
-</div>
 <div class="columns">
 	<div class="column"></div>
-	<div class="column">
-		<button
-			class="btn is-primary"
-			(click)="createPoll()"
-			[disabled]="!pollService.form.valid || !pollService.form.valid"
-		>
-			<i class="fa fa-save"></i>
-			Enregistrer le sondage
-		</button>
-	</div>
+	<div class="column"></div>
 </div>
 
 <div class="columns">
 	<div class="column">
-		<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/4']">
-			précédent
-		</button>
-	</div>
-	<div class="column">
-		<button class="btn is-success" (click)="createPoll()">
-			<i class="fa fa-save"></i>
-			Enregistrer le sondage
+		<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/1']">
+			<i class="fa fa-pencil"></i>
+			modifier le sondage
 		</button>
 	</div>
 </div>
 
 <section class="supplement">
-	<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
 	<button class="btn btn--warning" (click)="askInitFormDefault()">
 		<i class="fa fa-refresh"></i>
 		Tout réinitialiser
 	</button>
 
-	<button class="btn is-default" (click)="pollService.automaticSlug()">
-		<i class="fa fa-save"></i>
-		Slug automatique
-	</button>
-
 	<div class="well">
 		{{ pollService.form.value.custom_url }}
 	</div>

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

@@ -12,7 +12,7 @@ export class StepFiveComponent implements OnInit {
 	@Input() step_max: any;
 	@Input() public form: FormGroup;
 	poll: any;
-	constructor(public pollService: PollService, private apiService: ApiService) {}
+	constructor(public pollService: PollService) {}
 	ngOnInit(): void {}
 
 	askInitFormDefault() {
@@ -21,10 +21,5 @@ export class StepFiveComponent implements OnInit {
 		}
 	}
 
-	createPoll() {
-		let apiData = this.pollService.newPollFromForm(this.pollService._poll);
-		this.apiService.createPoll(apiData);
-	}
-
 	automaticSlug() {}
 }

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

@@ -1,7 +1,7 @@
 <div class="step">
 	<div class="min-height">
 		<form action="#" [formGroup]="pollService.form">
-			<app-stepper [step_current]="4" [step_max]="5"></app-stepper>
+			<app-stepper [step_current]="pollService.step_current" [step_max]="5"></app-stepper>
 
 			<div class="creator-infos">
 				<label class="" for="creatorEmail">
@@ -33,80 +33,16 @@
 			</div>
 
 			<fieldset class="advanced-config">
-				<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
+				<button
+					class="btn"
+					[ngClass]="{ 'is-outlined': !advancedDisplayEnabled, 'is-info': advancedDisplayEnabled }"
+					(click)="advancedDisplayEnabled = !advancedDisplayEnabled"
+				>
 					<i class="fa fa-save"></i>
 					{{ 'creation.advanced' | translate }}
 				</button>
 				<fieldset class="complete well" *ngIf="advancedDisplayEnabled">
-					<h2>{{ 'creation.advanced' | translate }}</h2>
-
-					<br />
-
-					<label for="slug">Url pour les participants </label>
-					<br />
-					<span
-						>{{ urlPrefix }} <strong> {{ pollService.form.controls.custom_url.value }} </strong>
-					</span>
-					<app-copy-text
-						[textToCopy]="urlPrefix + pollService.form.controls.custom_url.value"
-					></app-copy-text>
-
-					<button
-						mat-button
-						*ngIf="pollService.form.controls.custom_url.value"
-						matSuffix
-						mat-icon-button
-						aria-label="Clear"
-						(click)="slug.value = ''"
-					></button>
-					<input #slug matInput id="custom_url" placeholder="Url" formControlName="custom_url" required />
-					<br />
-					<div appearance="outline" class="is-not-flex">
-						<mat-label>Nombre de jours avant expiration</mat-label>
-						<input
-							#expiracy
-							id="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>
-					</div>
-					<br />
-					<mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
-						Les participants pourront consulter les résultats
-					</mat-checkbox>
-					<br />
-					<mat-checkbox class="is-not-flex" formControlName="isAboutDate">
-						Les choix possibles concerneront des dates
-					</mat-checkbox>
-					<br />
-					<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
-						Le sondage sera protégé par un mot de passe
-					</mat-checkbox>
-					<br />
-					<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
-						Vous recevrez un mail à chaque nouvelle participation
-					</mat-checkbox>
-					<br />
-					<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
-						Vous recevrez un mail à chaque nouveau commentaire
-					</mat-checkbox>
-					<br />
-					<mat-checkbox class="is-not-flex" formControlName="isMaybeAnswerAvailable">
-						La réponse « peut-être » sera disponible
-					</mat-checkbox>
+					<app-advanced-config [form]="pollService.form"></app-advanced-config>
 				</fieldset>
 			</fieldset>
 		</form>
@@ -119,8 +55,13 @@
 		</div>
 		<div class="column">
 			<!--				[disabled]="form.invalid"-->
-			<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/5']">
-				suivant
+			<button
+				class="btn is-primary"
+				(click)="createPoll()"
+				[disabled]="!pollService.form.valid || !pollService.form.valid"
+			>
+				<i class="fa fa-save"></i>
+				Enregistrer le sondage
 			</button>
 		</div>
 	</div>

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

@@ -1,5 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { PollService } from '../../../../../core/services/poll.service';
+import { ApiService } from '../../../../../core/services/api.service';
 
 @Component({
 	selector: 'app-step-four',
@@ -13,7 +14,12 @@ export class StepFourComponent implements OnInit {
 	step_max: any;
 	@Input()
 	form: any;
-	constructor(public pollService: PollService) {}
+	constructor(public pollService: PollService, private apiService: ApiService) {}
 
 	ngOnInit(): void {}
+
+	createPoll() {
+		let apiData = this.pollService.newPollFromForm(this.pollService._poll);
+		this.apiService.createPoll(apiData);
+	}
 }

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

@@ -1,4 +1,4 @@
-<section class="hero is-medium is-success">
+<section class="hero is-medium has-background-success">
 	<div class="hero-body">
 		<div class="container has-text-centered">
 			<div class="main-block">
@@ -6,7 +6,7 @@
 				<h2 class="subtitle">
 					Votre sondage «
 					<strong class="poll-title">
-						{{ poll.title }}
+						{{ pollService.form.value.title }}
 					</strong>
 					» a bien été créé !
 				</h2>
@@ -31,21 +31,21 @@
 				<p>
 					Pour accéder au sondage et à tous ses paramètres :
 					<br />
-					<a class="button is-info" routerLink="/admin/{{ poll.admin_key }}"
-						>{{ pollService.getAdministrationUrl() }}
+					<a class="button is-info" routerLink="/admin/{{ pollService.form.value.admin_key }}"
+						>{{ pollService.getAdministrationUrlFromForm() }}
 					</a>
-					<app-copy-text [textToCopy]="pollService.getAdministrationUrl()"></app-copy-text>
+					<app-copy-text [textToCopy]="pollService.getAdministrationUrlFromForm()"></app-copy-text>
 				</p>
 				<br />
-				<a class="button is-info" [href]="pollService.getAdministrationUrl()">
+				<a class="button is-info" [href]="pollService.getAdministrationUrlFromForm()">
 					Voir le sondage coté administrateur·ice
 				</a>
 				<br />
 				<p class="note">
-					Note : Le sondage sera supprimé {{ poll.default_expiracy_days_from_now }} jours après la date de sa
-					dernière modification.
+					Note : Le sondage sera supprimé {{ pollService.form.value.default_expiracy_days_from_now }} jours
+					après la date de sa dernière modification.
 					<span class="expiracy-detail" *ngIf="poll.expiracy_date">
-						Le {{ poll.expiracy_date | date: 'short' }}
+						Le {{ pollService.form.value.expiracy_date | date: 'short' }}
 					</span>
 				</p>
 			</div>
@@ -54,36 +54,16 @@
 				<p>
 					Pour voir le sondage :
 					<br />
-					<a class="button is-info" routerLink="/poll/{{ poll.custom_url }}/consultation"
-						>{{ pollService.getParticipationUrl() }}
+					<a class="button is-info" [href]="pollService.getParticipationUrlFromForm()"
+						>{{ pollService.getParticipationUrlFromForm() }}
 					</a>
 				</p>
 				<br />
-				<app-copy-text [textToCopy]="pollService.getParticipationUrl()"></app-copy-text>
+				<app-copy-text [textToCopy]="pollService.getParticipationUrlFromForm()"></app-copy-text>
 				<br />
 			</div>
 
 			<!--	<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image succès" />-->
 		</div>
-		<section class="mail">
-			<h2 i18n>{{ 'resume.links_mail' | translate }}</h2>
-			<p>
-				<label for="email">
-					Pour être sûr de retrouver ces liens, nous pouvons vous les envoyer sur votre mail :
-				</label>
-				<br />
-				<input type="email" id="email" name="email" [(ngModel)]="poll.creatorEmail" placeholder="email" />
-				<br />
-				<button class="btn btn--primary" (click)="sendToEmail()">
-					Envoyer les liens du sondage
-					<i class="fa fa-paper-plane" aria-hidden="true"></i>
-				</button>
-				<br />
-				<br />
-				<a class="button is-info" href="{{ poll.custom_url }}">
-					Voir le sondage côté public
-				</a>
-			</p>
-		</section>
 	</div>
 </div>

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

@@ -1,3 +1,5 @@
+@import './src/styles/variables';
+
 .button,
 a,
 button {
@@ -5,7 +7,7 @@ button {
 	margin-right: 1ch;
 }
 a {
-	max-width: 20em;
+	max-width: 35em;
 	@extend .truncate;
 }
 .truncate {
@@ -13,3 +15,9 @@ a {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+:host {
+	padding: 2em;
+}
+.has-background-success {
+	background: $logo_color_2;
+}

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

@@ -16,11 +16,12 @@ export class SuccessComponent {
 	window: any = window;
 	environment = environment;
 	constructor(public pollService: PollService, private dateUtils: DateUtilitiesService, private titleService: Title) {
-		this.titleService.setTitle(environment.appTitle + ' - 🎉 succès de création de sondage -');
+		this.titleService.setTitle(
+			environment.appTitle + ' - 🎉 succès de création de sondage - ' + this.pollService.form.value.title
+		);
 
 		this.pollService.poll.subscribe((newpoll: Poll) => {
 			this.poll = newpoll;
-			// this.poll.expiracy_date = this.getExpiracyDateFromPoll(this.poll);
 		});
 	}