add comment on display

proxy.conf.json

@@ -1,11 +0,0 @@
-{
-	"/api/v1/*": {
-		"target": "http://localhost:8000",
-		"secure": false,
-		"pathRewrite": {
-			"^/api/v1": ""
-		},
-		"changeOrigin": false,
-		"logLevel": "debug"
-	}
-}

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

@@ -11,6 +11,8 @@ export class Poll {
 		public slug: string = '',
 		public title: string = 'mon titre',
 		public description?: string,
+		public expiracy_date?: string,
+		public creation_date?: string,
 		public creatorPseudo?: string,
 		public creatorEmail?: string,
 		public allowSeveralHours?: boolean,

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

@@ -1,9 +1,18 @@
 <section class="loading_poll" *ngIf="fetching"></section>
 <section class="poll_loaded padded" *ngIf="!fetching && poll">
-	<div class="alert alert-info" *ngIf="poll.votes.length == 0">
+	<!--	messages-->
+	<article class="message is-warning" *ngIf="isArchived">
+		<div class="message-body">
+			⚰️ Ce sondage a expiré, il n'est plus possible d'y ajouter de votes ou de commentaires
+		</div>
+	</article>
+	<article class="message is-info" *ngIf="poll.votes.length == 0">
+		<div class="message-body">
 			aucun vote pour le moment
 		</div>
+	</article>
 
+	<!--	affichage des possibilités de réponse -->
 	<div class="columns">
 		<div class="column">
 			<div class="card">
@@ -30,18 +39,13 @@
 								Detailed
 							</button>
 						</div>
-						<app-poll-results-compact *ngIf="isCompactMode" [poll]="poll"></app-poll-results-compact>
+						<!--						<app-poll-results-compact *ngIf="isCompactMode" [poll]="poll"></app-poll-results-compact>-->
-						<app-poll-results-detailed *ngIf="!isCompactMode" [poll]="poll"></app-poll-results-detailed>
+						<!--						<app-poll-results-detailed *ngIf="!isCompactMode" [poll]="poll"></app-poll-results-detailed>-->
+						<!--						comments-->
 					</div>
 				</div>
 				<footer class="card-footer" *ngIf="!isArchived">
 					TODO links
-					<!--					<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>
@@ -49,7 +53,7 @@
 
 	<div class="columns">
 		<div class="column">
-			<app-comments></app-comments>
+			<app-comments [poll]="poll"></app-comments>
 		</div>
 	</div>
 </section>

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

@@ -4,6 +4,7 @@ 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';
 
 @Component({
 	selector: 'app-consultation',
@@ -15,7 +16,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 	public poll: Poll;
 	public pollSlug: string;
 	public passHash: string;
-	public fetching: boolean = true;
+	public fetching = true;
 	public isArchived: boolean;
 	private routeSubscription: Subscription;
 
@@ -23,6 +24,7 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 		private router: Router,
 		private _Activatedroute: ActivatedRoute,
 		public pollService: PollService,
+		public dateService: DateService,
 		private modalService: ModalService
 	) {}
 
@@ -30,6 +32,9 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 		console.log('constultation de poll');
 		this.pollService.poll.subscribe((newpoll: Poll) => {
 			this.poll = newpoll;
+			if (newpoll) {
+				this.isArchived = new Date(newpoll.expiracy_date) < new Date();
+			}
 		});
 
 		this._Activatedroute.paramMap.subscribe((params) => {
@@ -46,18 +51,6 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 				});
 			}
 		});
-
-		// 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/shared/components/comments/comments.component.html

@@ -1,9 +1,74 @@
-<article class="message is-primary is-small" *ngFor="let comment of (_poll | async)?.comments">
+<div class="comments" id="comments">
+	<h2 class="margin-top-x7">Laisser un commentaire</h2>
+	<article class="message">
 		<div class="message-header">
-		<p>{{ comment.author }}</p>
+			<div class="field">
-		<span class="tag is-info is-light">{{ comment.dateCreated | date: 'medium' }}</span>
+				<span class="control has-icons-left has-icons-right">
+					<input
+						type="email"
+						name="cremail"
+						id="email_comment"
+						[(ngModel)]="config.myEmail"
+						placeholder="chuck@norris.com"
+						required="required"
+					/>
+					<span class="icon is-small is-left">
+						<i class="fa fa-envelope"></i>
+					</span>
+				</span>
+				<span class="control has-icons-left">
+					<input
+						type="text"
+						class="margin-btm-x3"
+						name="crname"
+						[(ngModel)]="config.myName"
+						id="crname"
+						placeholder="pseudo"
+						required="required"
+					/>
+					<span class="icon is-small is-left">
+						<i class="fa fa-user"></i>
+					</span>
+				</span>
+			</div>
+
+			<!--			<label for="crname"><i class="fa fa-user" aria-hidden="true"></i> Votre nom / pseudo :</label>-->
+
+			<!--			<label for="cremail"><i class="fa fa-envelope" aria-hidden="true"></i> Votre email :</label>-->
 		</div>
 		<div class="message-body">
-		{{ comment.content }}
+			<label for="comment">Votre commentaire :</label>
+			<br />
+			<textarea name="comment" id="comment" [(ngModel)]="config.myComment"> </textarea>
+
+			<input
+				type="submit"
+				name="add-comment"
+				class="btn btn--primary btn--outline"
+				value="Ajouter mon commentaire ✉️"
+				(click)="addComment()"
+			/>
 		</div>
-</article>
+	</article>
+
+	<div class="comments-part" *ngIf="poll && poll.comments">
+		<h2 class="title is-2">{{ poll.comments.length }} Commentaires</h2>
+
+		<article class="message" *ngFor="let comment of poll.comments">
+			<div class="message-header">
+				<p>
+					<em class="cname"> {{ comment.pseudo }} </em>, le
+					<span class="date-days-ago">
+						il y a
+						{{ calculateDaysAgoOfComment(comment.owner.created_at) }} jours, le </span
+					><span class="date"> {{ comment.owner.created_at }} </span>
+				</p>
+			</div>
+			<div class="message-body">
+				<p class="text">
+					{{ comment.text }}
+				</p>
+			</div>
+		</article>
+	</div>
+</div>

src/app/shared/components/comments/comments.component.ts

@@ -1,8 +1,6 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
-import { Observable } from 'rxjs';
-
-import { Poll } from '../../../core/models/poll.model';
 import { PollService } from '../../../core/services/poll.service';
+import * as moment from 'moment';
 
 @Component({
 	selector: 'app-comments',
@@ -10,7 +8,26 @@ import { PollService } from '../../../core/services/poll.service';
 	styleUrls: ['./comments.component.scss'],
 })
 export class CommentsComponent {
-	public _poll: Observable<Poll> = this.pollService.poll;
+	@Input() public poll: any;
+
+	public config: any = {
+		myName: '',
+		myEmail: '',
+		myComment: '',
+	};
 
 	constructor(private pollService: PollService) {}
+	calculateDaysAgoOfComment(dateAsString) {
+		let numberOfDays = 0;
+
+		if (dateAsString && dateAsString) {
+			numberOfDays = moment(new Date()).diff(moment(new Date(dateAsString)), 'days');
+		}
+
+		return numberOfDays;
+	}
+
+	addComment() {
+		alert('TODO');
+	}
 }

src/proxy.conf.json

@@ -1,6 +1,6 @@
 {
 	"/api/*": {
-		"target": "http://localhost:3001",
+		"target": "http://localhost:8000/api",
 		"secure": false,
 		"logLevel": "debug"
 	}