creation poll style, fill DTO for creation

mocks/db.json

@@ -6,7 +6,7 @@
 	"polls": [
 		{
 			"id": 1,
-			"slug": "picnic",
+			"custom_url": "picnic",
 			"configuration": {
 				"id": 1,
 				"isAboutDate": true,
@@ -24,7 +24,7 @@
 		},
 		{
 			"id": 2,
-			"slug": "vacances",
+			"custom_url": "vacances",
 			"configuration": {
 				"id": 2,
 				"isAboutDate": true,

mocks/old-stuff/config/PollConfig.ts

@@ -54,7 +54,7 @@ export class PollConfig {
 	currentPoll; // current poll selected with createPoll or getPoll of ConfigService
 	passwordAccess = 0;
 	password = '';
-	customUrl = ''; // custom slug in the url, must be unique
+	customUrl = ''; // custom custom_url in the url, must be unique
 	customUrlIsUnique = null; // given by the backend
 	urlSlugPublic = null;
 	urlPublic = environment.production ? '' : document.location.href + '/poll/id/4';

mocks/old-stuff/old-stuff-routing.module.ts

@@ -33,7 +33,7 @@ const routes: Routes = [
 	{ path: 'step/end', component: EndConfirmationComponent },
 	{ path: 'graphic/:poll', component: PollGraphicComponent },
 	{ path: 'vote/poll/id/:id', component: PollDisplayComponent },
-	{ path: 'vote/poll/slug/:slug', component: PollDisplayComponent },
+	{ path: 'vote/poll/custom_url/:custom_url', component: PollDisplayComponent },
 	{ path: 'votingchoice', component: VotingChoiceComponent },
 	{ path: 'voting', component: VotingComponent },
 ];

mocks/old-stuff/pages/admin/admin.component.ts

@@ -39,7 +39,7 @@ export class AdminComponent implements OnInit {
 		});
 	}
 
-	// fetch poll with its ID or slug.
+	// fetch poll with its ID or custom_url.
 	fetchPoll() {
 		const token = this.tokenForAdministration;
 		const headers = this.utils.makeHeaders({ token: token });

mocks/old-stuff/pages/poll/poll-display/poll-display.component.ts

@@ -28,7 +28,7 @@ export class PollDisplayComponent extends BaseComponent implements OnInit {
 
 	ngOnInit(): void {}
 
-	// fetch poll with its ID or slug.
+	// fetch poll with its ID or custom_url.
 	fetchPoll() {
 		const id = this.activeRoute.snapshot.params.poll;
 		const pollSlug = this.activeRoute.snapshot.params.pollSlug;

mocks/old-stuff/pages/visibility/visibility.component.html

@@ -102,8 +102,8 @@
 		{{ 'visibility.access_instructions' | translate }}
 	</sub>
 	<div class="preview-url">
-		<a [href]="'/vote/poll/slug/' + config.customUrl">
-			{{ '/vote/poll/slug/' + config.customUrl }}
+		<a [href]="'/vote/poll/custom_url/' + config.customUrl">
+			{{ '/vote/poll/custom_url/' + config.customUrl }}
 		</a>
 	</div>
 	<br />

mocks/old-stuff/pages/visibility/visibility.component.ts

@@ -21,7 +21,7 @@ export class VisibilityComponent extends BaseComponent implements OnInit {
 	}
 
 	ngOnInit(): void {
-		this.config.customUrl = 'un slug';
+		this.config.customUrl = 'un custom_url';
 		this.config.expirationDate = this.config
 			.addDaysToDate(this.config.expiracyDateDefaultInDays, new Date())
 			.toISOString()

mocks/old-stuff/services/config.service.ts

@@ -97,12 +97,12 @@ export class ConfigService extends PollConfig {
 		// TODO: http requests moved to apiService
 		this.customUrlIsUnique = null;
 		if (!slug) {
-			slug = 'un slug';
+			slug = 'un custom_url';
 		}
 
 		this.loading = true;
 		// TODO
-		this.todo('check slug is unique');
+		this.todo('check custom_url is unique');
 		this.http
 			.get(`${this.apiBaseHref}/check-slug-is-uniq/${slug}`, this.utils.makeHeaders({ slug: this.customUrl }))
 			.subscribe(
@@ -163,7 +163,7 @@ export class ConfigService extends PollConfig {
 	}
 
 	/**
-	 * get one poll by its slug choice_label
+	 * get one poll by its custom_url choice_label
 	 * @param url
 	 */
 	getPollByURL(url: string) {
@@ -219,7 +219,7 @@ export class ConfigService extends PollConfig {
 		this.pollId = res.poll.id;
 		this.owner_modifier_token = res.owner_modifier_token;
 		this.urlPublic = this.apiBaseHref + '/vote/poll/id/' + res.poll.id;
-		this.urlSlugPublic = this.apiBaseHref + '/vote/poll/slug/' + res.poll.id;
+		this.urlSlugPublic = this.apiBaseHref + '/vote/poll/custom_url/' + res.poll.id;
 		if (res.poll.customUrl) {
 			this.urlSlugPublic = this.apiBaseHref + '/vote/poll/id/' + res.poll.customUrl;
 		}

src/app/app-routing.module.ts

@@ -3,7 +3,7 @@ import { RouterModule } from '@angular/router';
 import { routes } from './routes-framadate';
 
 @NgModule({
-	imports: [RouterModule.forRoot(routes, { useHash: true })],
+	imports: [RouterModule.forRoot(routes)],
 	exports: [RouterModule],
 })
 export class AppRoutingModule {}

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

@@ -10,14 +10,10 @@ export class Poll {
 
 	public default_expiracy_days_from_now = 60;
 
-	public title = 'mon titre';
-
 	public kind: string;
 
 	public description?: string;
 
-	public custom_url?: string;
-
 	public expiracy_date?: string;
 
 	public creation_date?: string;
@@ -49,40 +45,13 @@ export class Poll {
 	public dateChoices: Choice[] = [];
 	// sets of days as strings, config to set identical time for days in a special days poll
 	public timeChoices: Choice[] = []; // ranges of time expressed as strings
-	constructor(public owner: Owner = new Owner(), public urlPublic: string = '', public slug: string = '') {}
-
-	public static adaptFromLocalJsonServer(
-		item: Pick<Poll, 'owner' | 'title' | 'description' | 'slug' | 'configuration' | 'comments' | 'choices'>
-	): Poll {
-		return new Poll(
-			new Owner(item.owner.pseudo, item.owner.email, undefined),
-			''
-			// item.slug,
-			// item.title,
-			// item.description
-			// item.configuration,
-			// item.comments
-			// 	.map(
-			// 		(c: Pick<Comment, 'author' | 'content' | 'dateCreated'>) =>
-			// 			new Comment(c.author, c.content, new Date(c.dateCreated))
-			// 	)
-			// 	.sort(Comment.sortChronologically),
-			// item.choices.map((c: Pick<Choice, 'label' | 'url' | 'participants' | 'counts'>) => {
-			// 	const choice = new Choice(c.label, c.url, new Map(c.participants));
-			// 	choice.participants.forEach((value, key) => {
-			// 		choice.participants.set(key, new Set(value));
-			// 	});
-			// 	choice.updateCounts();
-			// 	return choice;
-			// })
-		);
-	}
+	constructor(public owner: Owner = new Owner(), public title = 'mon titre', public custom_url: string = '') {}
 
 	public getAdministrationUrl(): string {
-		return `${environment.api.baseHref}/administration/polls/${this.slug}`;
+		return `${environment.api.baseHref}/administration/polls/${this.custom_url}`;
 	}
 
 	public getParticipationUrl(): string {
-		return `${environment.api.baseHref}/participation/polls/${this.slug}`;
+		return `${environment.api.baseHref}/participation/polls/${this.custom_url}`;
 	}
 }

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

@@ -116,7 +116,7 @@ export class ApiService {
 	 * @param poll
 	 * @param vote_stack
 	 */
-	public sendVoteStackOfPoll(poll: Poll, vote_stack: Stack): Observable<any> {
+	public sendNewVoteStackOfPoll(poll: Poll, vote_stack: Stack): Observable<any> {
 		// api_new_vote_stack                   POST       ANY      ANY    /api/v1/poll/{id}/answer
 
 		console.log('vote_stack', vote_stack);
@@ -181,7 +181,7 @@ export class ApiService {
 		}
 	}
 
-	public async getPollBySlug(slug: string): Promise<Poll | undefined> {
+	public async getPollByCustomUrl(slug: string): Promise<Poll | undefined> {
 		try {
 			// TODO: this interceptor should be avoided if backends returns the good object
 			const adapterInterceptor: number = this.axiosInstance.interceptors.response.use(
@@ -192,7 +192,7 @@ export class ApiService {
 			);
 
 			const response: AxiosResponse<Poll> = await this.axiosInstance.get<Poll>(`${this.pollsEndpoint}/${slug}`);
-			console.log('fetch API : asking for poll with slug=' + slug, { response });
+			console.log('fetch API : asking for poll with custom_url=' + slug, { response });
 
 			axios.interceptors.request.eject(adapterInterceptor);
 
@@ -206,12 +206,12 @@ export class ApiService {
 		}
 	}
 
-	public async getPollBySlugWithHash(slug: string, hash: string): Promise<Poll | undefined> {
+	public async getPollByCustomUrlWithHash(slug: string, hash: string): Promise<Poll | undefined> {
 		try {
 			const response: AxiosResponse<Poll> = await this.axiosInstance.get<Poll>(
 				`${this.pollsEndpoint}/${slug}/pass/${hash}`
 			);
-			console.log('fetch API : asking for poll with slug=' + slug, { response });
+			console.log('fetch API : asking for poll with custom_url=' + slug, { response });
 
 			return response && response.data && !Array.isArray(response.data) ? response.data : undefined;
 		} catch (error) {
@@ -225,7 +225,7 @@ export class ApiService {
 
 	public async getSlug(slug: string): Promise<boolean> {
 		try {
-			// TODO: scenario should be : if we can get this slug, it exists. if not, it doesn't. It's just a GET.
+			// TODO: scenario should be : if we can get this custom_url, it exists. if not, it doesn't. It's just a GET.
 			const response: AxiosResponse = await this.axiosInstance.get(
 				`${this.pollsEndpoint}${this.slugsEndpoint}/${slug}`
 			);
@@ -244,12 +244,9 @@ export class ApiService {
 	////////////
 	// UPDATE //
 
-	public async sendEmailToUserOfItsPollsList(email: string): Promise<void> {
-		// If user is not authenticated: the list of polls is send to user's email by the backend.
+	public async sendUpdateVoteStack(vote_stack: Stack) {
 		try {
-			await this.axiosInstance.get<Poll[]>(
-				`${this.usersEndpoint}/${email}${this.usersPollsEndpoint}${this.usersPollsSendEmailEndpoint}`
-			);
+			return await this.axiosInstance.patch(`${this.baseHref}/vote_stack/${vote_stack.id}`, vote_stack);
 		} catch (error) {
 			ApiService.handleError(error);
 		}
@@ -295,9 +292,6 @@ export class ApiService {
 		}
 	}
 
-	/////////////////////
-	// PRIVATE METHODS //
-
 	public async deletePollAnswers(slug: string): Promise<boolean> {
 		try {
 			const response: AxiosResponse = await this.axiosInstance.delete(
@@ -319,4 +313,18 @@ export class ApiService {
 			ApiService.handleError(error);
 		}
 	}
+	/////////////////////
+	// PRIVATE METHODS //
+	/////////////////////
+
+	public async sendEmailToUserOfItsPollsList(email: string): Promise<void> {
+		// If user is not authenticated: the list of polls is send to user's email by the backend.
+		try {
+			await this.axiosInstance.get<Poll[]>(
+				`${this.usersEndpoint}/${email}${this.usersPollsEndpoint}${this.usersPollsSendEmailEndpoint}`
+			);
+		} catch (error) {
+			ApiService.handleError(error);
+		}
+	}
 }

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

@@ -40,15 +40,19 @@ export class PollService implements Resolve<Poll> {
 	 */
 	public async resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<Poll> {
 		const segments: string[] = state.url.split('/');
-		const wantedSlug: string = segments.includes('poll') ? segments[segments.indexOf('poll') + 1] : '';
-		if (!wantedSlug && state.url.includes('administration')) {
+		const wantedcustom_url: string = segments.includes('poll') ? segments[segments.indexOf('poll') + 1] : '';
+		if (!wantedcustom_url && state.url.includes('administration')) {
 			// creation of new poll
 			const poll = new Poll(this.userService.getCurrentUser(), this.uuidService.getUUID(), '');
 			this._poll.next(poll);
-			this.router.navigate(['poll/' + poll.slug + '/administration']);
+			this.router.navigate(['poll/' + poll.custom_url + '/administration']);
 		}
-		if (!this._poll.getValue() || !this._poll.getValue().slug || this._poll.getValue().slug !== wantedSlug) {
-			await this.loadPollBySlug(wantedSlug);
+		if (
+			!this._poll.getValue() ||
+			!this._poll.getValue().custom_url ||
+			this._poll.getValue().custom_url !== wantedcustom_url
+		) {
+			await this.loadPollBycustom_url(wantedcustom_url);
 		}
 		if (this._poll.getValue()) {
 			return this._poll.getValue();
@@ -72,25 +76,25 @@ export class PollService implements Resolve<Poll> {
 		}
 	}
 
-	public async loadPollBySlug(slug: string): Promise<void> {
-		console.log('slug', slug);
-		if (slug) {
-			const poll: Poll | undefined = await this.apiService.getPollBySlug(slug);
+	public async loadPollBycustom_url(custom_url: string): Promise<void> {
+		console.log('custom_url', custom_url);
+		if (custom_url) {
+			const poll: Poll | undefined = await this.apiService.getPollByCustomUrl(custom_url);
 
-			console.log({ loadPollBySlugResponse: poll });
+			console.log({ loadPollBycustom_urlResponse: poll });
 			if (poll) {
 				this.updateCurrentPoll(poll);
 				this.titleService.setTitle(`☑️ ${poll.title} - ${environment.appTitle}`);
 			} else {
-				this.toastService.display(`sondage ${slug} non trouvé`);
+				this.toastService.display(`sondage ${custom_url} non trouvé`);
 			}
 		}
 	}
-	public async loadPollBySlugWithPasswordHash(slug: string, hash: string): Promise<void> {
-		console.log('slug', slug);
-		if (slug) {
-			const poll: Poll | undefined = await this.apiService.getPollBySlugWithHash(slug, hash);
-			console.log({ loadPollBySlugResponse: poll });
+	public async loadPollBycustom_urlWithPasswordHash(custom_url: string, hash: string): Promise<void> {
+		console.log('custom_url', custom_url);
+		if (custom_url) {
+			const poll: Poll | undefined = await this.apiService.getPollByCustomUrlWithHash(custom_url, hash);
+			console.log({ loadPollBycustom_urlResponse: poll });
 			this.updateCurrentPoll(poll);
 		}
 	}
@@ -98,15 +102,17 @@ export class PollService implements Resolve<Poll> {
 	public updateCurrentPoll(poll: Poll): void {
 		this.storageService.setChoicesForVoteStack(poll.choices);
 
+		this.toastService.display('sondage bien mis à jour', 'success');
+
 		console.log('poll', poll);
 		this._poll.next(poll);
 	}
 
 	/**
-	 *  make a uniq slug for the current poll creation
+	 *  make a uniq custom_url for the current poll creation
 	 * @param config
 	 */
-	makeSlug(config: Poll): string {
+	makecustom_url(config: Poll): string {
 		console.log('config', config);
 		let str = '';
 		str =
@@ -152,80 +158,45 @@ export class PollService implements Resolve<Poll> {
 		const currentPoll = this._poll.getValue();
 		currentPoll.choices.find((c) => c.name === choice.name)?.updateParticipation(user, response);
 		this.updateCurrentPoll(currentPoll);
-		this.apiService.createParticipation(currentPoll.slug, choice.name, user.pseudo, response);
+		this.apiService.createParticipation(currentPoll.custom_url, choice.name, user.pseudo, response);
 		this.toastService.display('Votre participation au sondage a été enregistrée.');
 	}
 
 	public async deleteAllAnswers(): Promise<void> {
-		await this.apiService.deletePollAnswers(this._poll.getValue().slug);
+		await this.apiService.deletePollAnswers(this._poll.getValue().custom_url);
 		this.toastService.display('Les participations des votants à ce sondage ont été supprimées.');
 	}
 
 	public async addComment(comment: string): Promise<void> {
-		await this.apiService.createComment(this._poll.getValue().slug, comment);
+		await this.apiService.createComment(this._poll.getValue().custom_url, comment);
 		this.toastService.display('Votre commentaire a été enregistré.');
 	}
 
 	public async deleteComments(): Promise<void> {
-		await this.apiService.deletePollComments(this._poll.getValue().slug);
+		await this.apiService.deletePollComments(this._poll.getValue().custom_url);
 		this.toastService.display('Les commentaires de ce sondage ont été supprimés.');
 	}
 
-	newPollFromForm(form: any): any {
-		const newpoll = new Poll(
-			this.userService.getCurrentUser(),
-			this.uuidService.getUUID(),
-			form.controls.title.value
-		);
-		/**
-		 * convert to API version 1 config poll
-		 */
-		const apiV1Poll = {
-			menuVisible: true,
-			expiracyDateDefaultInDays: newpoll.configuration.expiresDaysDelay,
-			deletionDateAfterLastModification: newpoll.configuration.expiracyAfterLastModificationInDays,
-			pollType: newpoll.configuration.isAboutDate ? 'dates' : 'classic', // classic or dates
-			title: newpoll.title,
-			description: newpoll.description,
-			myName: newpoll.owner.pseudo,
-			myComment: '',
-			isAdmin: true, // when we create a poll, we are admin on it
-			myVoteStack: {},
-			myTempVoteStack: 0,
-			myEmail: newpoll.owner.email,
-			myPolls: [], // list of retrieved polls from the backend api
-			/*
-				 date specific poll, we have the choice to setup different hours (timeList) for all possible dates (dateList), or use the same hours for all dates
-				*/
-			allowSeveralHours: 'true',
-			// access
-			visibility: newpoll.configuration.areResultsPublic, // visible to one with the link:
-			voteChoices: newpoll.configuration.isMaybeAnswerAvailable ? 'yes, maybe, no' : 'yes', // possible answers to a vote choice: only "yes", "yes, maybe, no"
-			creationDate: new Date(),
-			expirationDate: '', // expiracy date
-			voteStackId: null, // id of the vote stack to update
-			pollId: null, // id of the current poll when created. data given by the backend api
-			pollSlug: null, // id of the current poll when created. data given by the backend api
-			currentPoll: null, // current poll selected with createPoll or getPoll of ConfigService
-			passwordAccess: newpoll.configuration.isProtectedByPassword,
-			password: newpoll.configuration.password,
-			customUrl: newpoll.slug, // custom slug in the url, must be unique
-			customUrlIsUnique: null, // given by the backend
-			urlSlugPublic: null,
-			urlPublic: null,
-			urlAdmin: null,
-			adminKey: '', // key to change config of the poll
-			owner_modifier_token: '', // key to change a vote stack
-			canModifyAnswers: newpoll.configuration.isAllowingtoChangeOwnAnswers, // bool for the frontend selector
-			whoCanChangeAnswers: newpoll.configuration.whoCanChangeAnswers, // everybody, self, nobody (: just admin)
-			dateList: newpoll.dateChoices, // sets of days as strings, config to set identical time for days in a special days poll
-			timeList: newpoll.timeChoices, // ranges of time expressed as strings
-
-			answers: newpoll.choices,
-			// modals
-			displayConfirmVoteModalAdmin: false,
-		};
-		console.log('apiV1Poll', apiV1Poll);
-		return apiV1Poll;
+	/**
+	 * @description convert to API version 1 data transition object
+	 * @param form
+	 */
+	newPollFromForm(form: any): Poll {
+		const newOwner = this.storageService.vote_stack.owner;
+
+		const newpoll = new Poll(newOwner, form.value.custom_url, form.value.title);
+
+		const pollKeys = Object.keys(newpoll);
+		const formFields = Object.keys(form.value);
+
+		for (const fieldOfForm of formFields) {
+			if (pollKeys.indexOf(fieldOfForm) !== -1) {
+				newpoll[fieldOfForm] = form.value[fieldOfForm];
+			}
+		}
+		newpoll.expiracy_date = form.value.expiracy_date;
+
+		console.log('newpoll', newpoll);
+		return newpoll;
 	}
 }

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

@@ -20,7 +20,7 @@ export class PollUtilitiesService {
 	}
 
 	/**
-	 * make a uniq slug for the current poll creation
+	 * make a uniq custom_url for the current poll creation
 	 * @param str
 	 */
 	makeSlug(config: Poll) {
@@ -37,7 +37,12 @@ export class PollUtilitiesService {
 			config.creatorPseudo +
 			'_' +
 			config.title;
-		str = str.replace(/^\s+|\s+$/g, ''); // trim
+
+		return this.makeSlugFromString(str);
+	}
+
+	makeSlugFromString(text: string): string {
+		let str = text.replace(/^\s+|\s+$/g, ''); // trim
 		str = str.toLowerCase();
 
 		// remove accents, swap ñ for n, etc
@@ -130,7 +135,7 @@ export class PollUtilitiesService {
 		const link = document.createElement('a');
 		link.setAttribute('href', encodedUri);
 		const exportFileName =
-			(poll.urlPublic ? poll.urlPublic : this.makeSlug(poll)) + '_export_' + new Date() + '.csv';
+			(poll.custom_url ? poll.custom_url : this.makeSlug(poll)) + '_export_' + new Date() + '.csv';
 		link.setAttribute('download', exportFileName);
 		document.body.appendChild(link); // Required for FF
 		link.click(); // This will download the data file named "my_data.csv".

src/app/features/administration/form/base-config/base-config.component.html

@@ -4,7 +4,6 @@
 			<p>
 				{{ 'creation.choose_title' | translate }}
 			</p>
-			<h2 class="title is-2">slug: {{ form.value.slug }}</h2>
 			<br />
 			<label class="hidden" for="title">Titre</label>
 			<input
@@ -29,35 +28,39 @@
 			</button>
 		</div>
 		<div class="column">
-			<label for="creatorPseudo">
-				<span>
-					{{ 'creation.email' | translate }}
-				</span>
-			</label>
+			<p>
+				<label for="creatorPseudo">
+					<span>
+						{{ 'creation.email' | translate }}
+					</span>
+				</label>
 
-			<input
-				#creatorEmail
-				matInput
-				placeholder="{{ 'creation.email_placeholder' | translate }}"
-				formControlName="creatorEmail"
-				id="creatorEmail"
-				required
-			/>
+				<input
+					#creatorEmail
+					matInput
+					placeholder="{{ 'creation.email_placeholder' | translate }}"
+					formControlName="creatorEmail"
+					id="creatorEmail"
+					required
+				/>
+			</p>
 			<br />
 
-			<label class="" for="creatorEmail">
-				<span>
-					{{ 'creation.name' | translate }}
-				</span>
-			</label>
-			<input
-				#creatorPseudo
-				matInput
-				placeholder="pseudo"
-				formControlName="creatorPseudo"
-				id="creatorPseudo"
-				required
-			/>
+			<p>
+				<label class="" for="creatorPseudo">
+					<span>
+						{{ 'creation.name' | translate }}
+					</span>
+				</label>
+				<input
+					#creatorPseudo
+					matInput
+					placeholder="pseudo"
+					formControlName="creatorPseudo"
+					id="creatorPseudo"
+					required
+				/>
+			</p>
 		</div>
 
 		<hr />
@@ -66,7 +69,7 @@
 	<hr />
 	<div class="columns">
 		<div class="column">
-			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />
+			<!--			<img src="assets/img/undraw_Moving_twwf.svg" alt="image WIP" />-->
 			<div>
 				<h2>
 					{{ 'choices.title' | translate }}

src/app/features/administration/form/base-config/base-config.component.ts

@@ -8,6 +8,7 @@ import { Router } from '@angular/router';
 import { DOCUMENT } from '@angular/common';
 import { Poll } from '../../../../core/models/poll.model';
 import { environment } from '../../../../../environments/environment';
+import { PollUtilitiesService } from '../../../../core/services/poll.utilities.service';
 
 @Component({
 	selector: 'app-base-config',
@@ -26,6 +27,7 @@ export class BaseConfigComponent {
 		private uuidService: UuidService,
 		private toastService: ToastService,
 		private pollService: PollService,
+		private utilitiesService: PollUtilitiesService,
 		private apiService: ApiService,
 		private router: Router,
 		@Inject(DOCUMENT) private document: Document
@@ -52,11 +54,11 @@ export class BaseConfigComponent {
 			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).then((resp) => {
 					console.log('resp', resp);
 					router.navigate(['success']);
+
+					this.toastService.display('sauvegarde du nouveau sondage réussie');
 				});
 			} else {
 				this.toastService.display('invalid form');
@@ -65,14 +67,14 @@ export class BaseConfigComponent {
 	}
 
 	public updateSlug(): void {
-		const newValueFormatted = 'TODO';
+		const newValueFormatted = this.pollService.makecustom_url(this.poll);
 		this.form.patchValue({ slug: newValueFormatted });
 	}
 
 	/**
-	 * set the poll slug from other data of the poll
+	 * set the poll custom_url from other data of the poll
 	 */
 	automaticSlug() {
-		this.form.patchValue({ slug: this.pollService.makeSlug(this.form.value) });
+		this.form.patchValue({ slug: this.utilitiesService.makeUuid() });
 	}
 }

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

@@ -1,69 +1,86 @@
 <div class="admin-form padded">
-	<form [formGroup]="form">
-		<header class="columns">
-			<div class="column">
-				<h1>
-					{{ 'creation.title' | translate }}
-				</h1>
-			</div>
-			<div class="column">
-				<button
-					class="btn is-success"
-					(click)="apiService.createPoll(poll)"
-					[disabled]="!form.valid || !form.valid"
-				>
-					<i class="fa fa-save"></i>
-					Enregistrer le sondage
-				</button>
-			</div>
-		</header>
-		<main class="columns">
-			<div class="column">
-				<p class="subtitle">
-					{{ 'creation.want' | translate }}
-				</p>
+	<div class="container is-max-widescreen">
+		<form [formGroup]="form">
+			<header class="columns">
+				<div class="column">
+					<h1 class="title is-2">
+						{{ 'creation.title' | translate }}
+					</h1>
+				</div>
+				<div class="column">
+					<button class="btn is-success" (click)="apiService.createPoll(poll)">
+						<!--					[disabled]="!form.valid || !form.valid"-->
+						<i class="fa fa-save"></i>
+						Enregistrer le sondage
+					</button>
+				</div>
+			</header>
+			<main class="columns">
+				<div class="column">
+					<p class="label is-medium">
+						{{ 'creation.want' | translate }}
+					</p>
 
-				<app-kind-select [form]="form"></app-kind-select>
-				<app-base-config [form]="form"></app-base-config>
-				<!--				<app-date-select-->
-				<!--					*ngIf="form.value.configuration && form.value.configuration.isAboutDate"-->
-				<!--					[form]="form"-->
-				<!--				></app-date-select>-->
-				<!--								<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>-->
+					<app-kind-select [form]="form"></app-kind-select>
 
-				<button
-					class="btn"
-					[class]="{ 'is-primary': advancedDisplayEnabled, 'is-info': !advancedDisplayEnabled }"
-					(click)="advancedDisplayEnabled = !advancedDisplayEnabled"
-				>
-					<i class="fa fa-save"></i>
-					{{ 'creation.advanced' | translate }}
-				</button>
-				<app-advanced-config [poll]="poll" [form]="form" *ngIf="advancedDisplayEnabled"></app-advanced-config>
-			</div>
-		</main>
-		<footer class="column" *ngIf="show_debug_data">
-			<h2>Debug data</h2>
-			<pre class="debug padded warning">
+					<div class="field is-grouped is-grouped-right">
+						<p class="control">
+							<a class="button is-light" (click)="goPreviousStep()">
+								Précédent
+							</a>
+						</p>
+						<p class="control">
+							<a class="button is-primary" (click)="goNextStep()">
+								Suivant
+							</a>
+						</p>
+					</div>
+
+					<app-base-config [form]="form"></app-base-config>
+					<!--								<app-date-select-->
+					<!--									*ngIf="form.value.configuration && form.value.kind == 'date'"-->
+					<!--									[form]="form"-->
+					<!--								></app-date-select>-->
+					<!--												<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>-->
+
+					<button
+						class="btn"
+						[class]="{ 'is-primary': advancedDisplayEnabled, 'is-info': !advancedDisplayEnabled }"
+						(click)="advancedDisplayEnabled = !advancedDisplayEnabled"
+					>
+						<i class="fa fa-save"></i>
+						{{ 'creation.advanced' | translate }}
+					</button>
+					<app-advanced-config
+						[poll]="poll"
+						[form]="form"
+						*ngIf="advancedDisplayEnabled"
+					></app-advanced-config>
+				</div>
+			</main>
+			<footer class="column" *ngIf="show_debug_data">
+				<h2>Debug data</h2>
+				<pre class="debug padded warning">
 				form values :
 					{{ form.value | json }}
 				</pre
-			>
-			<pre class="debug padded warning">
+				>
+				<pre class="debug padded warning">
 				poll initial values :
 				{{ poll | json }}
 				</pre
-			>
-		</footer>
-		<hr />
-		<div class="validation">
-			<div class="has-background-danger" *ngIf="!form.valid && form.touched">
-				le formulaire est invalide
-				<pre>
+				>
+			</footer>
+			<hr />
+			<div class="validation">
+				<div class="has-background-danger" *ngIf="!form.valid && form.touched">
+					le formulaire est invalide
+					<pre>
 		 {{ form.errors | json }}
 		</pre
-				>
+					>
+				</div>
 			</div>
-		</div>
-	</form>
+		</form>
+	</div>
 </div>

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

@@ -1,15 +1,8 @@
 @import '../../../../styles/variables';
 :host {
-	input,
-	textarea {
-		padding: 0.5em;
-		border: solid #eee;
-
-		width: 90%;
-	}
-	.form-field {
-		display: block;
-		margin-top: 1em;
+	.admin-form {
+		max-width: 800px;
+		margin: 0 auto;
 	}
 	.form-row {
 		margin-top: 0.5em;
@@ -75,6 +68,11 @@
 	.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
 		transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 	}
+	.ng-pristine,
+	.ng-dirty {
+		border-left: $white 3px solid;
+		padding-left: 1em;
+	}
 	.ng-touched.ng-invalid {
 		border-left: $danger 3px solid;
 		padding-left: 1em;

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

@@ -7,6 +7,8 @@ import { ToastService } from '../../../core/services/toast.service';
 import { PollService } from '../../../core/services/poll.service';
 import { DOCUMENT } from '@angular/common';
 import { Router } from '@angular/router';
+import { environment } from '../../../../environments/environment';
+import { PollUtilitiesService } from '../../../core/services/poll.utilities.service';
 
 @Component({
 	selector: 'app-admin-form',
@@ -24,7 +26,7 @@ export class FormComponent implements OnInit {
 	constructor(
 		private fb: FormBuilder,
 		private cd: ChangeDetectorRef,
-		private uuidService: UuidService,
+		private pollUtilitiesService: PollUtilitiesService,
 		private toastService: ToastService,
 		private pollService: PollService,
 		public apiService: ApiService,
@@ -39,14 +41,14 @@ export class FormComponent implements OnInit {
 		console.log('pollsAvailable', pollsAvailable);
 	}
 
-	initFormDefault(showDemoValues = true): void {
+	initFormDefault(showDemoValues = environment.autofill): void {
 		const creationDate = new Date();
 
 		this.form = this.fb.group({
 			title: ['', [Validators.required, Validators.minLength(12)]],
 			creatorPseudo: ['', [Validators.required]],
 			creatorEmail: ['', [Validators.required]],
-			slug: [this.uuidService.getUUID(), [Validators.required]],
+			custom_url: [this.pollUtilitiesService.makeUuid(), [Validators.required]],
 			description: ['', [Validators.required]],
 			choices: this.fb.array([
 				this.fb.group({
@@ -84,7 +86,7 @@ export class FormComponent implements OnInit {
 				expiresDaysDelay: [60, [Validators.required, Validators.min(1)]],
 				maxCountOfAnswers: [150, [Validators.required, Validators.min(1)]],
 				allowComments: [true, [Validators.required]],
-				password: [this.uuidService.getUUID(), [Validators.required]],
+				password: [this.pollUtilitiesService.makeUuid(), [Validators.required]],
 				dateCreated: [creationDate, [Validators.required]],
 				hasSeveralHours: [true, [Validators.required]],
 				hasMaxCountOfAnswers: [true, [Validators.required, Validators.min(1)]],
@@ -104,10 +106,11 @@ export class FormComponent implements OnInit {
 	 * add example values to the form, overrides defaults of PollConfiguration
 	 */
 	setDemoValues(): void {
+		const title = 'le titre de démo oh oh';
 		this.form.patchValue({
-			title: 'le titre de démo oh oh',
+			title: title,
+			custom_url: this.pollUtilitiesService.makeSlugFromString(title),
 			description: 'répondez SVP <3 ! *-* ',
-			slug: this.uuidService.getUUID(),
 			creatorPseudo: 'Chuck Norris',
 			creatorEmail: 'chucknorris@example.com',
 			isAboutDate: true,
@@ -124,9 +127,25 @@ export class FormComponent implements OnInit {
 				expiresDaysDelay: 60,
 			},
 			comments: [],
-			choices: [],
-			dateChoices: [],
+			choices: [
+				{
+					name: 'un choix',
+					url: 'https://placekitten.com/120/150',
+				},
+			],
+			dateChoices: [
+				{
+					name: new Date(),
+				},
+			],
 			timeChoices: [],
 		});
 	}
+
+	goPreviousStep() {
+		alert('todo');
+	}
+	goNextStep() {
+		alert('todo');
+	}
 }

src/app/features/administration/form/kind-select/kind-select.component.html

@@ -1,7 +1,7 @@
 <div class="kind-select form-field">
 	<form [formGroup]="form">
-		<div class="kind-of-poll columns">
-			<div class="column" *ngIf="template_questions_answers">
+		<div class="kind-of-poll control">
+			<div class="select" *ngIf="template_questions_answers">
 				<!--			version maquette questions réponses-->
 				<select name="type" id="type" class="input" formControlName="kind">
 					<option [value]="'date'">{{ 'creation.kind.date' | translate }}</option>

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

@@ -109,7 +109,7 @@
 					</button>
 					<button
 						class="btn btn--primary btn-block submit-votestack update"
-						(click)="updateVote(storageService.vote_stack)"
+						(click)="updateVoteStack(storageService.vote_stack)"
 						*ngIf="storageService.vote_stack && storageService.vote_stack.id"
 					>
 						<i class="fa fa-edit" aria-hidden="true"></i> Mettre à jour

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

@@ -80,13 +80,20 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 		}
 	}
 
-	updateVote(votestack: Stack) {
+	updateVoteStack(vote_stack: Stack): void {
 		alert('TODO');
+		this.api.sendUpdateVoteStack(vote_stack).then((resp) => {
+			console.log('sendUpdateVoteStack resp', resp);
+
+			this.toastService.display('vote bien mis à jour', 'success');
+		});
 	}
 
-	addVoteStack() {
-		this.api.sendVoteStackOfPoll(this.poll, this.storageService.vote_stack).subscribe((resp) => {
-			console.log('sendVoteStackOfPoll resp', resp);
+	addVoteStack(): void {
+		this.api.sendNewVoteStackOfPoll(this.poll, this.storageService.vote_stack).subscribe((resp) => {
+			console.log('sendNewVoteStackOfPoll resp', resp);
+
+			this.toastService.display('vote ajouté', 'success');
 
 			if (resp) {
 				this.api.getPollBySlug(this.poll.custom_url);
@@ -99,19 +106,19 @@ export class ConsultationComponent implements OnInit, OnDestroy {
 	/**
 	 * export all the poll data available to the public as a CSV single file
 	 */
-	exportCSV() {
+	exportCSV(): void {
 		this.utils.exportCSV(this.poll);
 	}
 
-	exportJson() {
+	exportJson(): void {
 		this.utils.download('export_poll_' + this.pollSlug + '.json', JSON.stringify(this.poll));
 	}
 
-	duplicate() {
+	duplicate(): void {
 		alert('TODO');
 	}
 
-	print() {
+	print(): void {
 		alert('TODO');
 	}
 }

src/app/routes-framadate.ts

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

src/environments/environment.prod.ts

@@ -14,6 +14,7 @@ export const environment = {
 	production: true,
 	display_routes: true,
 	autofill: true,
+	autoSendNewPoll: false,
 	appTitle: 'FramaDate Funky',
 	appVersion: '2.1.0',
 	appLogo: 'assets/img/logo.png',

src/environments/environment.ts

@@ -18,9 +18,10 @@ const apiV1 = {
 };
 
 export const environment = {
-	production: true,
+	production: false,
 	display_routes: true,
 	autofill: true,
+	autoSendNewPoll: true,
 	appTitle: 'FramaDate Funky',
 	appVersion: '2.1.0',
 	appLogo: 'assets/img/logo.png',

src/styles/partials/_form-controls.scss

@@ -19,13 +19,15 @@ option {
 	-moz-appearance: none;
 	border-radius: 0;
 	background-color: transparent;
-	background-image: url('/assets/img/fleche_bas.svg');
+	//background-image: url('/assets/img/fleche_bas.svg');
 	padding-right: 2.5rem;
 	background-repeat: no-repeat;
 	background-size: 9px 8px;
 	background-position: right 1rem center;
 	background-clip: border-box;
 	min-width: 10rem;
+	margin-bottom: 0.25rem;
+	border-bottom: 2px solid $primary_color !important;
 }
 
 select {