clean lifecycle of setting base votes choices on load of a poll

src/app/app.component.ts

@@ -6,7 +6,7 @@ import { environment } from '../environments/environment';
 import { Theme } from './core/enums/theme.enum';
 import { LanguageService } from './core/services/language.service';
 import { ThemeService } from './core/services/theme.service';
-import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
+import { NavigationEnd, Route, Router, RouterOutlet } from '@angular/router';
 import { slideInAnimation } from './shared/animations/main';
 import { FramaKeyboardShortcuts } from './shared/shortcuts/main';
 import { ShortcutEventOutput, ShortcutInput } from 'ng-keyboard-shortcuts';
@@ -36,7 +36,19 @@ export class AppComponent implements OnInit, OnDestroy, AfterViewInit {
 		private languageService: LanguageService // private mockingService: MockingService
 	) {}
 
+	printpath(parent: string, config: Route[]) {
+		for (let i = 0; i < config.length; i++) {
+			const route = config[i];
+			console.info(parent + '/' + route.path);
+			if (route.children) {
+				const currentPath = route.path ? parent + '/' + route.path : parent;
+				this.printpath(currentPath, route.children);
+			}
+		}
+	}
+
 	ngOnInit(): void {
+		this.printpath('', this.router.config);
 		this.router.events.subscribe((evt) => {
 			if (!(evt instanceof NavigationEnd)) {
 				return;

src/app/app.module.ts

@@ -30,7 +30,6 @@ import { CipheringComponent } from './features/shared/components/ui/static-pages
 import { ErrorsListComponent } from './features/shared/components/ui/form/errors-list/errors-list.component';
 import { KeyboardShortcutsModule } from 'ng-keyboard-shortcuts';
 import { AdministrationModule } from './features/administration/administration.module';
-import { ShortcutsHelpComponent } from './features/shared/components/ui/shortcuts-help/shortcuts-help.component';
 registerLocaleData(localeEn, 'en-EN');
 registerLocaleData(localeFr, 'fr-FR');
 

src/app/core/components/header/header.component.html

@@ -61,13 +61,9 @@
 		voici des liens de démonstration issus des fixtures Doctrine de date-poll-api.
 		<div class="padded">
 			<div class="">
-				<a
-					class="navbar-item"
-					[routerLink]="['/poll/le-titre-de-demo-oh-oh/consultation']"
-					routerLinkActive="is-primary"
-				>
+				<a class="navbar-item" [routerLink]="['/poll/demo/consultation']" routerLinkActive="is-primary">
 					<em>
-						le-titre-de-demo-oh-oh
+						demo
 					</em> </a
 				><a
 					class="navbar-item"
@@ -90,9 +86,22 @@
 				</a>
 				<a
 					class="navbar-item"
-					[routerLink]="['/poll/citron/consultation/1c01ed9c94fc640a1be864f197ff808c']"
+					[routerLink]="[
+						'/admin/9S75b70ECXI5J5xDc058d3H40H9r2CHfO0Kj8T02EK2U8rY8fYTn-eS659j2Dhp794Oa6R1b9V70e3WGaE30iD9h45zwdm76C85SWB4LcUCrc7e0Ncc0'
+					]"
 					routerLinkActive="is-primary"
 				>
+					<i class="fa fa-gears"></i> administrer le sondage
+					<em>
+						aujourdhui-ou-demain
+					</em>
+				</a>
+				<a
+					class="navbar-item"
+					[routerLink]="['/poll/citron/consultation/secure/1c01ed9c94fc640a1be864f197ff808c']"
+					routerLinkActive="is-primary"
+				>
+					<i class="fa fa-key-modern"></i>
 					<em>
 						citron
 					</em>

src/app/core/models/stack.model.ts

@@ -4,6 +4,7 @@ import { Owner } from './owner.model';
 export class Stack {
 	public id: number;
 	public poll_custom_url: string;
+	public pass_hash: string;
 	public pseudo = 'Choque Nourrice';
 	public comment = 'Le beau commentaire de Choque Nourrice';
 	public owner: Owner = new Owner();

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

@@ -93,20 +93,15 @@ export class ApiService {
 	 * @param vote_stack
 	 */
 	public sendNewVoteStackOfPoll(vote_stack: Stack): Promise<void> {
-		// api_new_vote_stack                   POST       ANY      ANY    /api/v1/poll/{id}/answer
-
-		console.log('vote_stack', vote_stack);
-		console.log('this.baseHref', this.baseHref);
-		const headers = ApiService.makeHeaders(vote_stack);
-		console.log('headers', headers);
+		// const headers = ApiService.makeHeaders(vote_stack);
 		const url = `${this.baseHref}/vote-stack/`;
 
-		const axiosconf = {
-			url,
-			method: 'POST',
-			body: vote_stack,
-			headers,
-		};
+		// const axiosconf = {
+		// 	url,
+		// 	method: 'POST',
+		// 	body: vote_stack,
+		// 	headers,
+		// };
 
 		return this.axiosInstance.post(url, vote_stack);
 	}

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

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 import { Answer } from '../enums/answer.enum';
 import { Choice } from '../models/choice.model';
@@ -15,6 +15,8 @@ import { environment } from '../../../environments/environment';
 import { StorageService } from './storage.service';
 import { Title } from '@angular/platform-browser';
 import { DateUtilitiesService } from './date.utilities.service';
+import { Stack } from '../models/stack.model';
+import { Vote } from '../models/vote.model';
 
 @Injectable({
 	providedIn: 'root',
@@ -22,6 +24,7 @@ import { DateUtilitiesService } from './date.utilities.service';
 export class PollService implements Resolve<Poll> {
 	_poll: BehaviorSubject<Poll | undefined> = new BehaviorSubject<Poll | undefined>(undefined);
 	public readonly poll: Observable<Poll | undefined> = this._poll.asObservable();
+	public pass_hash: string;
 
 	constructor(
 		private http: HttpClient,
@@ -52,10 +55,17 @@ export class PollService implements Resolve<Poll> {
 			!this._poll.getValue().custom_url ||
 			this._poll.getValue().custom_url !== wantedcustom_url
 		) {
-			await this.loadPollBycustom_url(wantedcustom_url);
+			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;
@@ -116,13 +126,14 @@ export class PollService implements Resolve<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
-		) {
+		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
-			this.storageService.setChoicesForVoteStack(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');
@@ -150,7 +161,11 @@ export class PollService implements Resolve<Poll> {
 		return this.convertTextToSlug(str) + '-' + this.uuidService.getUUID();
 	}
 
-	public convertTextToSlug(str: string) {
+	/**
+	 * convert a text to a slug
+	 * @param str
+	 */
+	public convertTextToSlug(str: string): string {
 		str = str.trim();
 		str = str.replace(/^\s+|\s+$/g, ''); // trim
 		str = str.toLowerCase();
@@ -253,4 +268,33 @@ export class PollService implements Resolve<Poll> {
 		// TODO handle pass access
 		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;
+			}
+		});
+	}
 }

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

@@ -65,7 +65,8 @@ export class StorageService {
 	 * @param choices_list
 	 */
 	setChoicesForVoteStack(choices_list: Choice[]) {
-		// text choices
+		// change only if the poll custom_url changed or if there is no stack id for this poll
+
 		if (!this.vote_stack.id) {
 			this.vote_stack = new Stack();
 
@@ -132,11 +133,10 @@ export class StorageService {
 
 	/**
 	 * update vote stack from the backend
-	 * @param resp
+	 * @param voteStack
 	 */
-	mapVotes(resp) {
-		console.log('mapVotes resp.data', resp.data);
-		this.vote_stack.owner = resp.data.owner;
-		this.vote_stack.id = resp.data.id;
+	mapVotes(voteStack: Stack) {
+		console.log('mapVotes voteStack', voteStack);
+		this.vote_stack = voteStack;
 	}
 }

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

@@ -2,14 +2,16 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
 import { ConsultationComponent } from './consultation.component';
+import { WipTodoComponent } from '../../shared/components/ui/wip-todo/wip-todo.component';
 
 const routes: Routes = [
+	{ path: 'secure/:pass_hash', component: ConsultationComponent },
 	{
 		path: '',
 		component: ConsultationComponent,
 		children: [
-			{ path: '/', component: ConsultationComponent },
-			{ path: '/:pass_hash', component: ConsultationComponent },
+			{ path: 'simple', component: WipTodoComponent },
+			{ path: 'table', component: WipTodoComponent },
 		],
 	},
 ];

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

@@ -1,4 +1,3 @@
-<section class="loading_poll" *ngIf="fetching"></section>
 <section class="poll_loaded padded" *ngIf="!fetching && poll">
 	<!--	messages-->
 
@@ -7,6 +6,11 @@
 			⚰️ Ce sondage a expiré, il n'est plus possible d'y ajouter de votes ou de commentaires
 		</div>
 	</div>
+	<div class="message is-warning" *ngIf="poll && poll.admin_key">
+		<div class="message-body">
+			vous êtes admin de ce sondage
+		</div>
+	</div>
 
 	<div class="message is-info" *ngIf="poll.modification_policy == 'self'">
 		<div class="message-body">
@@ -14,6 +18,8 @@
 		</div>
 	</div>
 
+	<router-outlet></router-outlet>
+
 	<!--	actions-->
 
 	<!--	affichage des possibilités de réponse -->
@@ -109,11 +115,12 @@
 							aucun vote pour le moment
 						</div>
 					</div>
+					<section class="loading_poll" *ngIf="fetching">
+						<i class="fa fa-spinner fa-4x"></i>
+					</section>
 					<button
-						class="btn btn-block submit-votestack"
+						class="btn btn-block submit-votestack is-primary"
 						(click)="addVoteStack()"
-						[disabled]="!myTempVoteStack"
-						[ngClass]="{ 'btn--primary': myTempVoteStack }"
 						*ngIf="!storageService.vote_stack || !storageService.vote_stack.id"
 					>
 						<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer
@@ -140,8 +147,6 @@
 					<button
 						class="btn btn-block submit-votestack"
 						(click)="addVoteStack()"
-						[disabled]="!myTempVoteStack"
-						[ngClass]="{ 'btn--primary': myTempVoteStack }"
 						*ngIf="!storageService.vote_stack || !storageService.vote_stack.id"
 					>
 						<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer

src/app/features/consultation/consultation.component.scss

@@ -0,0 +1,6 @@
+.loading_poll {
+	position: fixed;
+	bottom: 5em;
+	left: 1em;
+	z-index: 10;
+}

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

@@ -2,17 +2,12 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { Poll } from '../../core/models/poll.model';
-import { ModalService } from '../../core/services/modal.service';
 import { PollService } from '../../core/services/poll.service';
 import { DateService } from '../../core/services/date.service';
 import { PollUtilitiesService } from '../../core/services/poll.utilities.service';
 import { StorageService } from '../../core/services/storage.service';
 import { ApiService } from '../../core/services/api.service';
-import { Stack } from '../../core/models/stack.model';
-import { environment } from '../../../environments/environment';
 import { ToastService } from '../../core/services/toast.service';
-import { AxiosResponse } from 'axios';
-import { HttpResponse } from '@angular/common/http';
 
 @Component({
 	selector: 'app-consultation',
@@ -23,16 +18,11 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 	public isCompactMode = true;
 	public poll: Poll;
 	public pollSlug: string;
-	public passHash: string;
+	public pass_hash: string;
 	public fetching = true;
 	public isArchived: boolean;
+	public isAdmin: boolean;
 
-	public myVoteStack: any = {
-		id: '',
-	};
-	public myTempVoteStack: any = {
-		id: '',
-	};
 	private routeSubscription: Subscription;
 	window: any;
 
@@ -57,6 +47,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 			if (newpoll) {
 				this.isArchived = new Date(newpoll.expiracy_date) < new Date();
 				this.poll.is_archived = this.isArchived;
+				this.isAdmin = this.poll.admin_key !== null;
 				this.poll.choices_grouped.map((elem) => (elem.subSetToYes = false));
 			}
 		});
@@ -64,16 +55,24 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 		this._Activatedroute.paramMap.subscribe((params: ParamMap) => {
 			console.log('params _Activatedroute', params);
 			this.pollSlug = params.get('custom_url');
-			this.passHash = params.get('pass_hash');
+			this.pass_hash = params.get('pass_hash');
 
-			// if (this.passHash) {
-			// 	this.pollService.loadPollBycustom_urlWithPasswordHash(this.pollSlug, this.passHash);
-			// } else {
-			this.pollService.loadPollBycustom_url(this.pollSlug).then((resp) => {
-				console.log('resp', resp);
-				this.fetching = false;
-			});
-			// }
+			console.log('this.pass_hash ', this.pass_hash);
+			if (this.pass_hash) {
+				this.pollService.loadPollBycustom_urlWithPasswordHash(this.pollSlug, this.pass_hash).then((resp) => {
+					console.log('resp', resp);
+					this.fetching = false;
+					this.storageService.vote_stack.id = null;
+					this.storageService.setChoicesForVoteStack(this.pollService._poll.getValue().choices);
+				});
+			} else {
+				this.pollService.loadPollBycustom_url(this.pollSlug).then((resp) => {
+					console.log('resp', resp);
+					this.fetching = false;
+					this.storageService.vote_stack.id = null;
+					this.storageService.setChoicesForVoteStack(this.pollService._poll.getValue().choices);
+				});
+			}
 		});
 	}
 
@@ -109,6 +108,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 	 */
 	addVoteStack(): void {
 		this.storageService.vote_stack.poll_custom_url = this.poll.custom_url;
+		this.pollService.pass_hash = this.pass_hash;
 
 		this.toastService.display('envoi du vote ....');
 		this.api
@@ -127,8 +127,13 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 	 */
 	storeVoteStackAndReloadPoll(voteStack: any) {
 		if (voteStack.status == 200) {
-			this.storageService.mapVotes(voteStack);
-			this.pollService.loadPollBycustom_url(this.poll.custom_url);
+			this.storageService.mapVotes(voteStack.data);
+			this.pollService.enrichVoteStackWithCurrentPollChoicesDefaultVotes(this.storageService.vote_stack);
+			if (this.pass_hash) {
+				this.pollService.loadPollBycustom_urlWithPasswordHash(this.poll.custom_url, this.pass_hash);
+			} else {
+				this.pollService.loadPollBycustom_url(this.poll.custom_url);
+			}
 		} else {
 			this.toastService.display('erreur à l enregistrement');
 		}

src/app/routes-framadate.ts

@@ -23,7 +23,7 @@ export const routes: Routes = [
 		// resolve: { poll: PollService },
 	},
 	{
-		path: 'poll/:custom_url/administration',
+		path: 'admin/:admin_key',
 		loadChildren: () =>
 			import('./features/administration/administration.module').then((m) => m.AdministrationModule),
 		// resolve: { poll: PollService },
@@ -33,11 +33,6 @@ export const routes: Routes = [
 		loadChildren: () => import('./features/consultation/consultation.module').then((m) => m.ConsultationModule),
 		// resolve: { poll: PollService },
 	},
-	{
-		path: 'poll/:custom_url/participation',
-		loadChildren: () => import('./features/participation/participation.module').then((m) => m.ParticipationModule),
-		resolve: { poll: PollService },
-	},
 	{
 		path: 'success',
 		component: SuccessComponent,