⚡ add api version config in env

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

@@ -6,7 +6,7 @@
 				<span class="app-title title is-2">
 					{{ appTitle }}
 				</span>
-				<span class="dev-env button bg-success" *ngIf="!env.production">
+				<span class="dev-env button has-background-success" *ngIf="!env.production">
 					<i>
 						(dev)
 					</i>
@@ -19,7 +19,7 @@
 				aria-label="menu"
 				aria-expanded="false"
 				data-target="navbarBasicExample"
-				[ngClass]="{ 'bg-primary': mobileMenuVisible }"
+				[ngClass]="{ 'has-background-primary': mobileMenuVisible }"
 				(click)="mobileMenuVisible = !mobileMenuVisible"
 			>
 				<span aria-hidden="true"></span>

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

@@ -6,22 +6,28 @@ import { Answer } from '../enums/answer.enum';
 import { Poll } from '../models/poll.model';
 import { HttpHeaders } from '@angular/common/http';
 
+const apiVersion = environment.api.versionToUse;
+const currentApiRoutes = environment.api.version[apiVersion];
+const apiBaseHref = environment.api.version[apiVersion].baseHref;
+
+const apiEndpoints = environment.api.endpoints;
+
 @Injectable({
 	providedIn: 'root',
 })
 export class ApiService {
 	private axiosInstance: AxiosInstance;
 
-	private readonly pollsEndpoint = environment.api.endpoints.polls.name;
-	private readonly answersEndpoint = environment.api.endpoints.polls.answers.name;
-	private readonly commentsEndpoint = environment.api.endpoints.polls.comments.name;
-	private readonly slugsEndpoint = environment.api.endpoints.polls.slugs.name;
-	private readonly usersEndpoint = environment.api.endpoints.users.name;
-	private readonly usersPollsEndpoint = environment.api.endpoints.users.polls.name;
-	private readonly usersPollsSendEmailEndpoint = environment.api.endpoints.users.polls.sendEmail.name;
+	private readonly pollsEndpoint = apiEndpoints.polls.name;
+	private readonly answersEndpoint = apiEndpoints.polls.answers.name;
+	private readonly commentsEndpoint = apiEndpoints.polls.comments.name;
+	private readonly slugsEndpoint = apiEndpoints.polls.slugs.name;
+	private readonly usersEndpoint = apiEndpoints.users.name;
+	private readonly usersPollsEndpoint = apiEndpoints.users.polls.name;
+	private readonly usersPollsSendEmailEndpoint = apiEndpoints.users.polls.sendEmail.name;
 
 	constructor() {
-		this.axiosInstance = axios.create({ baseURL: environment.api.baseHref });
+		this.axiosInstance = axios.create({ baseURL: apiBaseHref });
 		this.axiosInstance.defaults.timeout = 2500;
 		this.axiosInstance.defaults.headers.post['Content-Type'] = 'application/json';
 	}
@@ -31,7 +37,8 @@ export class ApiService {
 	//////////////////////
 	public async createPoll(poll: Poll): Promise<string> {
 		try {
-			return await this.axiosInstance.post(`${this.pollsEndpoint}`, poll);
+			console.log('currentApiRoutes', currentApiRoutes);
+			return await this.axiosInstance.post(`${apiBaseHref}${currentApiRoutes['api_new_poll']}`, poll);
 		} catch (error) {
 			ApiService.handleError(error);
 		}

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

@@ -99,6 +99,7 @@ export class PollService implements Resolve<Poll> {
 		const pollUrl: string = await this.apiService.createPoll(this._poll.getValue());
 		// TODO: Maybe handle the url to update currentPoll according to backend response
 		if (pollUrl) {
+			console.log('pollUrl', pollUrl);
 			this.toastService.display('Le sondage a été enregistré.');
 		} else {
 			this.toastService.display('Le sondage n’a été correctement enregistré, veuillez ré-essayer.');

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

@@ -20,8 +20,13 @@
 	<div class="well">
 		{{ poll.slug }}
 	</div>
-	<div class="bg-danger" *ngIf="!form.valid">
+	<div class="has-background-danger" *ngIf="!form.valid">
 		le formulaire est invalide
+		<pre>
+
+ {{ form.errors | json }}
+		</pre
+		>
 	</div>
 	<div class="dates-list">
 		<div class="title">

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

@@ -75,4 +75,12 @@
 	.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
 		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 	}
+	.ng-touched.ng-invalid {
+		border-left: $danger 3px solid;
+		padding-left: 1em;
+	}
+	.ng-touched.ng-valid {
+		border-left: $success 3px solid;
+		padding-left: 1em;
+	}
 }

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

@@ -54,14 +54,15 @@ export class FormComponent implements OnInit {
 
 	public createPoll(): void {
 		console.log('this.form', this.form);
-		if (this.form.valid && this.form.valid) {
-			console.log('Le sondage est correctement rempli, prêt à enregistrer.');
-			const newpoll = this.pollService.newPollFromForm(this.form);
-			// TODO : save the poll
-			this.apiService.createPoll(newpoll);
-		} else {
-			this.toastService.display('invalid form');
-		}
+		this.apiService.createPoll(this.pollService.newPollFromForm(this.form));
+		// if (this.form.valid) {
+		// 	console.log('Le sondage est correctement rempli, prêt à enregistrer.');
+		// 	const newpoll = this.pollService.newPollFromForm(this.form);
+		// 	// TODO : save the poll
+		// 	this.apiService.createPoll(newpoll);
+		// } else {
+		// 	this.toastService.display('invalid form');
+		// }
 	}
 
 	public updateSlug(): void {
@@ -78,6 +79,7 @@ export class FormComponent implements OnInit {
 		if (optionalLabel) {
 			newControlGroup.patchValue({
 				label: optionalLabel,
+				imageUrl: 'mon url',
 			});
 		}
 		this.choices.push(newControlGroup);
@@ -164,7 +166,7 @@ export class FormComponent implements OnInit {
 			description: 'répondez SVP <3 ! *-* ',
 			slug: this.uuidService.getUUID(),
 			creatorPseudo: 'Chuck Norris',
-			creatorEmail: '',
+			creatorEmail: 'chucknorris@example.com',
 			isAboutDate: true,
 			whoModifiesAnswers: 'everybody',
 			whoCanChangeAnswers: 'everybody',
@@ -188,7 +190,6 @@ export class FormComponent implements OnInit {
 			this.dateUtilities.parseInputDateToDateObject(this.startDateInterval),
 			this.dateUtilities.parseInputDateToDateObject(this.endDateInterval)
 		);
-		this.toastService.display('intervalle de ' + this.intervalDays + ' jours');
 		this.cd.detectChanges();
 	}
 

src/environments/environment.ts

@@ -6,6 +6,13 @@ const backendApiUrlsInDev = {
 	local: '/api/v1',
 	remote: 'https://framadate-api.cipherbliss.com/api/v1',
 };
+const apiV1 = {
+	baseHref: 'https://framadate-api.cipherbliss.com/api/v1',
+	api_new_poll: '/poll/new',
+	api_get_poll: '/poll/{id}',
+	'api_test-mail-poll': '/api/v1/poll/mail/test-mail-poll/{emailChoice}',
+	'app.swagger': '/api/doc.json',
+};
 
 export const environment = {
 	production: false,
@@ -13,10 +20,14 @@ export const environment = {
 	appVersion: '2.0.0',
 	appLogo: 'assets/img/logo.png',
 	api: {
+		versionToUse: 'apiV1',
+		version: {
+			apiV1,
+		},
 		baseHref: backendApiUrlsInDev.local,
 		endpoints: {
 			polls: {
-				name: '/polls',
+				name: '/poll',
 				choices: {
 					name: '/choices',
 				},

src/styles/variables.scss

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 
 // colors from styleguide https://app.zeplin.io/project/5d4d83d68866d6522ff2ff10/styleguide/colors?cid=5d502bb032e23e3516af8154
-$camo: #839546;
+$green: #64d16e;
 $black: #000000;
 $ugly-purple: #b24eb7;
 $lavender-pink: #e9bdeb;
@@ -27,7 +27,7 @@ $primary: $ugly-purple;
 $secondary_color: $lavender-pink;
 $font_color: $black;
 $logo_color: $dark-lavender;
-$logo_color_2: $camo;
+$logo_color_2: $green;
 $legend_color: $dark-lavender;
 $legend_color_2: $dusty-orange;
 $choice_select_border_color: $cool-grey;
@@ -38,6 +38,7 @@ $clicked-color: $wisteria;
 $mini-button-color: $pale-purple;
 $warning: $dusty-orange;
 $danger: $red;
+$success: $green;
 
 // FONT
 $default_font: 'pt_sans';