add comment in participation

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

@@ -142,7 +142,10 @@ export class ApiService {
 
 	public async createComment(slug: string, comment: string): Promise<string> {
 		try {
-			return await this.axiosInstance.post(`${this.pollsEndpoint}/${slug}${this.commentsEndpoint}`, comment);
+			return await this.axiosInstance.post(
+				`${this.baseHref}${this.commentsEndpoint}/${slug}${this.commentsEndpoint}`,
+				comment
+			);
 		} catch (error) {
 			ApiService.handleError(error);
 		}

src/app/features/administration/form/date/interval/interval.component.html

@@ -56,9 +56,9 @@
 				<div class="span resume">
 					<div class="well">
 						Du
-						{{ form.value.startDateInterval | date: 'EEEE d':'Europe/Paris':'fr_FR' }}
+						{{ form.value.startDateInterval | date: 'EEEE d':'Europe/Paris' }}
 						au
-						{{ form.value.endDateInterval | date: 'EEEE d':'Europe/Paris':'fr_FR' }}
+						{{ form.value.endDateInterval | date: 'EEEE d':'Europe/Paris' }}
 						, soit {{ intervalDays }} jours.
 					</div>
 				</div>

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

@@ -117,7 +117,7 @@
 					class="button is-primary cancel-button-reject pull-right"
 					(click)="focusOnCancelButton()"
 				>
-					Fermer <i class="fa fa-times"></i>
+					{{ 'SENTENCES.Close' | translate }} <i class="fa fa-times"></i>
 				</button>
 			</div>
 			<h1 class="title">

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

@@ -13,7 +13,7 @@ import { EditComponent } from './edit/edit.component';
 const routes: Routes = [
 	{
 		path: '',
-		component: ConsultationLandingComponent,
+		component: ConsultationComponent,
 	},
 	{ path: 'simple', component: ConsultationComponent },
 	{ path: 'secure/:pass_hash', component: ConsultationComponent },

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

@@ -80,7 +80,7 @@
 				{{ 'participation.fav_choice' | translate }}
 			</h2>
 			<div class="rounded-block">
-				<div class="section no-votes">
+				<div class="no-votes">
 					<div class="message is-info" *ngIf="poll.stacks.length == 0">
 						<div class="message-body">
 							{{ 'participation.no_votes_yet' | translate }}

src/app/features/consultation/poll-results-detailed/poll-results-detailed.component.html

@@ -10,7 +10,7 @@
 					{{ choice.name }}
 				</span>
 				<span class="label" *ngIf="poll.kind == 'date' && choice.name.indexOf('>>>') === -1">
-					{{ make_date(choice.name) | date: 'fullDate':'Europe/Paris':'fr_FR' }}
+					{{ make_date(choice.name) | date: 'fullDate':'Europe/Paris' }}
 				</span>
 				<span class="label" *ngIf="poll.kind == 'date' && choice.name.indexOf('>>>') !== -1">
 					{{ make_display_range_time(choice.name) }}
@@ -101,7 +101,7 @@
 					{{ stack.pseudo }}
 				</div>
 				<div class="date">
-					<sub> le {{ make_date(stack.created_at) | date: 'short':'Europe/Paris':'fr_FR' }} </sub>
+					<sub> le {{ make_date(stack.created_at) | date: 'short':'Europe/Paris' }} </sub>
 				</div>
 			</td>
 			<ng-container *ngFor="let vote of stack.votes">

src/app/features/consultation/poll-results-dinum/poll-results-dinum.component.scss

@@ -30,3 +30,35 @@
 	font-weight: bold;
 	margin-bottom: 1.25rem;
 }
+
+.choice-bars-display {
+	.is-narrow {
+		width: 5em;
+		text-align: right;
+		padding-right: 1em;
+	}
+	.bar {
+	}
+}
+.bar-div {
+	padding: 0.25rem 0.025rem;
+	text-align: center;
+	border-radius: 0.25rem;
+}
+div {
+	&.has-background-yes {
+		border: green;
+		background: yellowgreen;
+		@extend .bar-div;
+	}
+	&.has-background-maybe {
+		border: orange;
+		background: yellow;
+		@extend .bar-div;
+	}
+	&.has-background-no {
+		border: red;
+		background: pink;
+		@extend .bar-div;
+	}
+}

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

@@ -8,24 +8,26 @@
 			{{ 'participation.comments_new' | translate }}
 		</h2>
 
-		<article class="message" *ngFor="let comment of poll.comments">
-			<div class="message-header">
+		<article class="message rounded-block" *ngFor="let comment of poll.comments">
+			<div class="header">
 				<p>
-					<em class="cname"> {{ comment.pseudo }} </em>,
+					<em class="cname" *ngIf="comment.pseudo"> {{ comment.pseudo }} </em>
+					<em class="cname" *ngIf="!comment.pseudo"> (somebody) </em>
+					,
 
 					<span class="date date-days-ago">
 						{{
-							'participation.dipslay_comments_delay'
+							'date_delays.dipslay_comments_delay'
 								| translate
 									: {
 											counter_delay: calculateDaysAgoOfComment(comment.created_at),
-											time_unit: 'participation.days' | translate
+											time_unit: 'date_delays.days' | translate
 									  }
 						}}
 						{{ calculateDaysAgoOfComment(comment.created_at) }} ,
 					</span>
 					<span class="date is-small">
-						{{ comment.created_at | date: 'short':'Europe/Paris':'fr_FR' }}
+						{{ comment.created_at | date: 'short':'Europe/Paris' }}
 					</span>
 				</p>
 			</div>
@@ -38,7 +40,7 @@
 	</section>
 	<section class="add-comment" *ngIf="!poll.is_archived && vote_stack.owner">
 		<article class="message">
-			<div class="message-header">
+			<div class="header">
 				<div class="field">
 					<!--					<span class="control has-icons-left has-icons-right">-->
 					<!--						<input-->

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

@@ -3,6 +3,9 @@ import { PollService } from '../../../core/services/poll.service';
 import * as moment from 'moment';
 import { Stack } from '../../../core/models/stack.model';
 import { Poll } from '../../../core/models/poll.model';
+import { ApiService } from '../../../core/services/api.service';
+import { StorageService } from '../../../core/services/storage.service';
+import { ToastService } from '../../../core/services/toast.service';
 
 @Component({
 	selector: 'app-comments',
@@ -19,7 +22,12 @@ export class CommentsComponent {
 		myComment: '',
 	};
 
-	constructor(private pollService: PollService) {}
+	constructor(
+		private pollService: PollService,
+		private api: ApiService,
+		private toastService: ToastService,
+		private storageService: StorageService
+	) {}
 
 	calculateDaysAgoOfComment(dateAsString) {
 		let numberOfDays = 0;
@@ -32,6 +40,13 @@ export class CommentsComponent {
 	}
 
 	addComment() {
-		alert('TODO');
+		this.api
+			.createComment(this.pollService._poll.getValue().custom_url, this.storageService.vote_stack.comment)
+			.then((resp) => {
+				this.toastService.display('commentaire ajouté');
+			})
+			.catch((error) => {
+				this.toastService.display('Erreur', error.message);
+			});
 	}
 }

src/assets/i18n/fr.json

@@ -783,15 +783,15 @@
         "FR": "Fr",
         "BR": "Br",
         "CA": "Ca",
-        "EL": "el",
+        "EL": "El",
         "ES": "Es",
         "EN": "En",
         "GL": "gl",
         "HU": "hu",
         "IT": "It",
         "NL": "Nl",
-        "OC": "oc",
-        "SV": "sv"
+        "OC": "Oc",
+        "SV": "Sv"
     },
     "calendar_widget": {
         "startsWith": "Commence par",

src/environments/endpoints.ts

@@ -33,7 +33,7 @@ export const endpoints = {
 				name: '/choices',
 			},
 			comments: {
-				name: '/comments',
+				name: '/comment',
 			},
 			slugs: {
 				name: '/slugs',

src/styles/partials/_forms.scss

@@ -317,6 +317,7 @@ mat-checkbox {
 		margin-top: 0;
 		.column {
 			padding-left: 0;
+			padding-right: 0;
 		}
 	}
 }