From 585d3a215e62ee115d0bace3c5bc0c6f650c2b59 Mon Sep 17 00:00:00 2001 From: Tykayn Date: Fri, 30 Apr 2021 10:59:46 +0200 Subject: [PATCH] creation poll style, fill DTO for creation --- mocks/db.json | 4 +- mocks/old-stuff/config/PollConfig.ts | 2 +- mocks/old-stuff/old-stuff-routing.module.ts | 2 +- .../old-stuff/pages/admin/admin.component.ts | 2 +- .../poll-display/poll-display.component.ts | 2 +- .../visibility/visibility.component.html | 4 +- .../pages/visibility/visibility.component.ts | 2 +- mocks/old-stuff/services/config.service.ts | 8 +- src/app/app-routing.module.ts | 2 +- src/app/core/models/poll.model.ts | 37 +---- src/app/core/services/api.service.ts | 36 +++-- src/app/core/services/poll.service.ts | 125 +++++++---------- .../core/services/poll.utilities.service.ts | 11 +- .../base-config/base-config.component.html | 59 ++++---- .../form/base-config/base-config.component.ts | 12 +- .../administration/form/form.component.html | 129 ++++++++++-------- .../administration/form/form.component.scss | 18 ++- .../administration/form/form.component.ts | 35 +++-- .../kind-select/kind-select.component.html | 4 +- .../consultation/consultation.component.html | 2 +- .../consultation/consultation.component.ts | 23 ++-- src/app/routes-framadate.ts | 6 +- src/environments/environment.prod.ts | 1 + src/environments/environment.ts | 3 +- src/styles/partials/_form-controls.scss | 4 +- 25 files changed, 268 insertions(+), 265 deletions(-) diff --git a/mocks/db.json b/mocks/db.json index c1bf054c..ef57cf5a 100644 --- a/mocks/db.json +++ b/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, diff --git a/mocks/old-stuff/config/PollConfig.ts b/mocks/old-stuff/config/PollConfig.ts index b45b3573..99ceac24 100644 --- a/mocks/old-stuff/config/PollConfig.ts +++ b/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'; diff --git a/mocks/old-stuff/old-stuff-routing.module.ts b/mocks/old-stuff/old-stuff-routing.module.ts index 8a84fe53..a51f91e5 100644 --- a/mocks/old-stuff/old-stuff-routing.module.ts +++ b/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 }, ]; diff --git a/mocks/old-stuff/pages/admin/admin.component.ts b/mocks/old-stuff/pages/admin/admin.component.ts index cb56c601..5e0c1fd3 100644 --- a/mocks/old-stuff/pages/admin/admin.component.ts +++ b/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 }); diff --git a/mocks/old-stuff/pages/poll/poll-display/poll-display.component.ts b/mocks/old-stuff/pages/poll/poll-display/poll-display.component.ts index 768b8686..61a98bbe 100644 --- a/mocks/old-stuff/pages/poll/poll-display/poll-display.component.ts +++ b/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; diff --git a/mocks/old-stuff/pages/visibility/visibility.component.html b/mocks/old-stuff/pages/visibility/visibility.component.html index 1244f37e..d57e4f74 100644 --- a/mocks/old-stuff/pages/visibility/visibility.component.html +++ b/mocks/old-stuff/pages/visibility/visibility.component.html @@ -102,8 +102,8 @@ {{ 'visibility.access_instructions' | translate }}
- - {{ '/vote/poll/slug/' + config.customUrl }} + + {{ '/vote/poll/custom_url/' + config.customUrl }}

diff --git a/mocks/old-stuff/pages/visibility/visibility.component.ts b/mocks/old-stuff/pages/visibility/visibility.component.ts index 6d18a1fd..c2996329 100644 --- a/mocks/old-stuff/pages/visibility/visibility.component.ts +++ b/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() diff --git a/mocks/old-stuff/services/config.service.ts b/mocks/old-stuff/services/config.service.ts index d24f085e..fe22909f 100644 --- a/mocks/old-stuff/services/config.service.ts +++ b/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; } diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 4a0e9f19..f347c701 100644 --- a/src/app/app-routing.module.ts +++ b/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 {} diff --git a/src/app/core/models/poll.model.ts b/src/app/core/models/poll.model.ts index cab6ce48..a9fc1241 100644 --- a/src/app/core/models/poll.model.ts +++ b/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 { - 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) => - // new Comment(c.author, c.content, new Date(c.dateCreated)) - // ) - // .sort(Comment.sortChronologically), - // item.choices.map((c: Pick) => { - // 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}`; } } diff --git a/src/app/core/services/api.service.ts b/src/app/core/services/api.service.ts index b80e686f..73dc252b 100644 --- a/src/app/core/services/api.service.ts +++ b/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 { + public sendNewVoteStackOfPoll(poll: Poll, vote_stack: Stack): Observable { // 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 { + public async getPollByCustomUrl(slug: string): Promise { 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 = await this.axiosInstance.get(`${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 { + public async getPollByCustomUrlWithHash(slug: string, hash: string): Promise { try { const response: AxiosResponse = await this.axiosInstance.get( `${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 { 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 { - // 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( - `${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 { 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 { + // If user is not authenticated: the list of polls is send to user's email by the backend. + try { + await this.axiosInstance.get( + `${this.usersEndpoint}/${email}${this.usersPollsEndpoint}${this.usersPollsSendEmailEndpoint}` + ); + } catch (error) { + ApiService.handleError(error); + } + } } diff --git a/src/app/core/services/poll.service.ts b/src/app/core/services/poll.service.ts index 94302300..3a717d84 100644 --- a/src/app/core/services/poll.service.ts +++ b/src/app/core/services/poll.service.ts @@ -40,15 +40,19 @@ export class PollService implements Resolve { */ public async resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise { 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 { } } - public async loadPollBySlug(slug: string): Promise { - console.log('slug', slug); - if (slug) { - const poll: Poll | undefined = await this.apiService.getPollBySlug(slug); + public async loadPollBycustom_url(custom_url: string): Promise { + 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 { - 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 { + 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 { 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 { 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 { - 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 { - 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 { - 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 + /** + * @description convert to API version 1 data transition object + * @param form + */ + newPollFromForm(form: any): Poll { + const newOwner = this.storageService.vote_stack.owner; - answers: newpoll.choices, - // modals - displayConfirmVoteModalAdmin: false, - }; - console.log('apiV1Poll', apiV1Poll); - return apiV1Poll; + 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; } } diff --git a/src/app/core/services/poll.utilities.service.ts b/src/app/core/services/poll.utilities.service.ts index 3514cde9..0b6471fe 100644 --- a/src/app/core/services/poll.utilities.service.ts +++ b/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". diff --git a/src/app/features/administration/form/base-config/base-config.component.html b/src/app/features/administration/form/base-config/base-config.component.html index 85decc75..2984cca1 100644 --- a/src/app/features/administration/form/base-config/base-config.component.html +++ b/src/app/features/administration/form/base-config/base-config.component.html @@ -4,7 +4,6 @@

{{ 'creation.choose_title' | translate }}

-

slug: {{ form.value.slug }}


- +

+ - + +


- - +

+ + +

@@ -66,7 +69,7 @@
- image WIP +

{{ 'choices.title' | translate }} diff --git a/src/app/features/administration/form/base-config/base-config.component.ts b/src/app/features/administration/form/base-config/base-config.component.ts index 8d0b4d7b..8c34ab6c 100644 --- a/src/app/features/administration/form/base-config/base-config.component.ts +++ b/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() }); } } diff --git a/src/app/features/administration/form/form.component.html b/src/app/features/administration/form/form.component.html index 1938a652..0ab9696a 100644 --- a/src/app/features/administration/form/form.component.html +++ b/src/app/features/administration/form/form.component.html @@ -1,69 +1,86 @@
-
-
-
-

- {{ 'creation.title' | translate }} -

-
-
- -
-
-
-
-

- {{ 'creation.want' | translate }} -

+
+ +
+
+

+ {{ 'creation.title' | translate }} +

+
+
+ +
+
+
+
+

+ {{ 'creation.want' | translate }} +

- - - - - - - + - - -
-
-
+
+
+

Debug data

+ 
 				form values :
 					{{ form.value | json }}
- 
+				>
+				
 				poll initial values :
 				{{ poll | json }}
 				

-
-
-
-
- le formulaire est invalide - 
+				>
+			
+			

+			

+				

+					le formulaire est invalide
+					
 		 {{ form.errors | json }}
 		

+					>
+				

 			

-
- + +
diff --git a/src/app/features/administration/form/form.component.scss b/src/app/features/administration/form/form.component.scss index 3814f6aa..9632e62e 100644 --- a/src/app/features/administration/form/form.component.scss +++ b/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; diff --git a/src/app/features/administration/form/form.component.ts b/src/app/features/administration/form/form.component.ts index 5e29d004..41c3fd1f 100644 --- a/src/app/features/administration/form/form.component.ts +++ b/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'); + } } diff --git a/src/app/features/administration/form/kind-select/kind-select.component.html b/src/app/features/administration/form/kind-select/kind-select.component.html index f322436f..2608ef3e 100644 --- a/src/app/features/administration/form/kind-select/kind-select.component.html +++ b/src/app/features/administration/form/kind-select/kind-select.component.html @@ -1,7 +1,7 @@
-
-
+
+