manage consultation path

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

@@ -13,6 +13,28 @@
 							| translate
 					}}
 				</blockquote>
+				<div class="demo" *ngIf="!env.production">
+					Environnement de développement: voici des liens de démonstration issus des fixtures Doctrine de
+					date-poll-api.
+					<button class="btn is-primary" [routerLink]="['/poll/aujourdhui-ou-demain/consultation']">
+						consulter le sondage
+						<strong>
+							aujourdhui-ou-demain
+						</strong>
+					</button>
+					<button
+						class="btn is-primary"
+						routerLink="/poll/citron/consultation/9199bdd9e0d4b29deafbf3463c0727fc"
+					>
+						consulter le sondage
+
+						<strong>
+							citron
+						</strong>
+
+						avec son hash md5 de mot de passe intégré
+					</button>
+				</div>
 				<img src="assets/img/undraw_group_selfie_ijc6.svg" alt="image WIP" />
 			</div>
 			<div class="columns">

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

@@ -4,7 +4,8 @@ import { RouterModule, Routes } from '@angular/router';
 import { ConsultationComponent } from './consultation.component';
 
 const routes: Routes = [
-	{ path: '', component: ConsultationComponent }
+	{ path: '', component: ConsultationComponent },
+	{ path: '/:hash', component: ConsultationComponent },
 ];
 
 @NgModule({

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

@@ -1,45 +1,47 @@
 <div class="columns">
 	<div class="column has-text-centered">
-		<h1>Consultation</h1>
+		<h1>Consultation de {{ pollSlug }}</h1>
 	</div>
 </div>
-
+<section class="loading_poll" *ngIf="fetching"></section>
-<div class="columns">
+<section class="poll_loaded" *ngIf="!fetching && poll">
-	<div class="column">
+	<div class="columns">
-		<div class="card">
+		<div class="column">
-			<header class="card-header">
+			<div class="card">
-				<p class="card-header-title">{{ poll.title }}</p>
+				<header class="card-header">
-				<!--				<p class="card-header-icon">author : {{ poll.owner?.pseudo }}</p>-->
+					<p class="card-header-title">{{ poll.title }}</p>
-			</header>
+					<!--				<p class="card-header-icon">author : {{ poll.owner?.pseudo }}</p>-->
-			<div class="card-content">
+				</header>
-				<div class="content">
+				<div class="card-content">
-					<p>{{ poll.description }}</p>
+					<div class="content">
-					<div class="buttons has-addons is-small is-right">
+						<p>{{ poll.description }}</p>
-						<button class="button" [class.is-active]="isCompactMode" (click)="isCompactMode = true">
+						<div class="buttons has-addons is-small is-right">
-							Compact
+							<button class="button" [class.is-active]="isCompactMode" (click)="isCompactMode = true">
-						</button>
+								Compact
-						<button class="button" [class.is-active]="!isCompactMode" (click)="isCompactMode = false">
+							</button>
-							Detailed
+							<button class="button" [class.is-active]="!isCompactMode" (click)="isCompactMode = false">
-						</button>
+								Detailed
+							</button>
+						</div>
+						<app-poll-results-compact *ngIf="isCompactMode" [poll]="poll"></app-poll-results-compact>
+						<app-poll-results-detailed *ngIf="!isCompactMode" [poll]="poll"></app-poll-results-detailed>
 					</div>
-					<app-poll-results-compact *ngIf="isCompactMode" [poll]="poll"></app-poll-results-compact>
-					<app-poll-results-detailed *ngIf="!isCompactMode" [poll]="poll"></app-poll-results-detailed>
 				</div>
+				<footer class="card-footer" *ngIf="!isArchived">
+					<a routerLink="{{ '../../../poll/' + poll.slug + '/participation' }}" class="card-footer-item">
+						Participer
+					</a>
+					<a routerLink="{{ '../../../poll/' + poll.slug + '/administration' }}" class="card-footer-item">
+						Administrer
+					</a>
+				</footer>
 			</div>
-			<footer class="card-footer" *ngIf="!isArchived">
-				<a routerLink="{{ '../../../poll/' + poll.slug + '/participation' }}" class="card-footer-item">
-					Participer
-				</a>
-				<a routerLink="{{ '../../../poll/' + poll.slug + '/administration' }}" class="card-footer-item">
-					Administrer
-				</a>
-			</footer>
 		</div>
 	</div>
-</div>
 
-<div class="columns">
+	<div class="columns">
-	<div class="column">
+		<div class="column">
-		<app-comments></app-comments>
+			<app-comments></app-comments>
+		</div>
 	</div>
-</div>
+</section>

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

@@ -1,12 +1,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
-
-import { PollConfiguration } from '../../core/models/configuration.model';
 import { Poll } from '../../core/models/poll.model';
 import { ModalService } from '../../core/services/modal.service';
-import { UserService } from '../../core/services/user.service';
+import { PollService } from '../../core/services/poll.service';
-import { SettingsComponent } from '../../shared/components/settings/settings.component';
 
 @Component({
 	selector: 'app-consultation',
@@ -16,28 +13,50 @@ import { SettingsComponent } from '../../shared/components/settings/settings.com
 export class ConsultationComponent implements OnInit, OnDestroy {
 	public isCompactMode = true;
 	public poll: Poll;
+	public pollSlug: string;
+	public passHash: string;
+	public fetching: boolean = true;
 	public isArchived: boolean;
 	private routeSubscription: Subscription;
 
 	constructor(
 		private router: Router,
-		private activatedRoute: ActivatedRoute,
+		private _Activatedroute: ActivatedRoute,
-		private userService: UserService,
+		public pollService: PollService,
 		private modalService: ModalService
 	) {}
 
 	ngOnInit(): void {
-		if (!this.userService.isCurrentUserIdentifiable()) {
+		console.log('constultation de poll');
-			this.modalService.openModal(SettingsComponent);
+		this.pollService.poll.subscribe((newpoll: Poll) => {
-		}
+			this.poll = newpoll;
-		this.routeSubscription = this.activatedRoute.data.subscribe((data: { poll: Poll }) => {
+		});
-			if (data.poll) {
+
-				this.poll = data.poll;
+		this._Activatedroute.paramMap.subscribe((params) => {
-				this.isArchived = PollConfiguration.isArchived(data.poll.configuration);
+			console.log('params', params);
+			this.pollSlug = params.get('slug');
+			this.passHash = params.get('hash');
+			if (this.passHash) {
+				this.pollService.loadPollBySlugWithPasswordHash(this.pollSlug, this.passHash);
 			} else {
-				this.router.navigate(['/page-not-found']);
+				this.pollService.loadPollBySlug(this.pollSlug).then((resp) => {
+					console.log('resp', resp);
+					this.fetching = false;
+				});
 			}
 		});
+
+		// if (!this.userService.isCurrentUserIdentifiable()) {
+		// 	this.modalService.openModal(SettingsComponent);
+		// }
+		// this.routeSubscription = this.activatedRoute.data.subscribe((data: { poll: Poll }) => {
+		// 	if (data.poll) {
+		// 		this.poll = data.poll;
+		// 		this.isArchived = PollConfiguration.isArchived(data.poll.configuration);
+		// 	} else {
+		// 		this.router.navigate(['/page-not-found']);
+		// 	}
+		// });
 	}
 
 	ngOnDestroy(): void {

src/app/routes-framadate.ts

@@ -30,7 +30,7 @@ export const routes: Routes = [
 	{
 		path: 'poll/:slug/consultation',
 		loadChildren: () => import('./features/consultation/consultation.module').then((m) => m.ConsultationModule),
-		resolve: { poll: PollService },
+		// resolve: { poll: PollService },
 	},
 	{
 		path: 'poll/:slug/participation',