tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

creation poll style, fill DTO for creation

This commit is contained in:
Tykayn 2021-04-30 10:59:46 +02:00 committed by tykayn
parent 765299e1c3
commit 585d3a215e
25 changed files with 268 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
mocks/db.json
View File

@ -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,

2
mocks/old-stuff/config/PollConfig.ts
View File

@ -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';

2
mocks/old-stuff/old-stuff-routing.module.ts
View File

@ -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 },
];

2
mocks/old-stuff/pages/admin/admin.component.ts
View File

@ -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 });

2
mocks/old-stuff/pages/poll/poll-display/poll-display.component.ts
View File

@ -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;

4
mocks/old-stuff/pages/visibility/visibility.component.html
View File

@ -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 />

2
mocks/old-stuff/pages/visibility/visibility.component.ts
View File

@ -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()

8
mocks/old-stuff/services/config.service.ts
View File

@ -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;
}

2
src/app/app-routing.module.ts
View File

@ -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 {}

37
src/app/core/models/poll.model.ts
View File

@ -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}`;
}
}

36
src/app/core/services/api.service.ts
View File

@ -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);
}
}
}

125
src/app/core/services/poll.service.ts
View File

@ -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
/**
* @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;
}
}

11
src/app/core/services/poll.utilities.service.ts
View File

@ -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".

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

@ -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 }}

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

@ -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() });
}
}

129
src/app/features/administration/form/form.component.html
View File

@ -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>

18
src/app/features/administration/form/form.component.scss
View File

@ -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;

35
src/app/features/administration/form/form.component.ts
View File

@ -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');
}
}

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

@ -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>

2
src/app/features/consultation/consultation.component.html
View File

@ -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

23
src/app/features/consultation/consultation.component.ts
View File

@ -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');
}
}

6
src/app/routes-framadate.ts
View File

@ -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 },
},

1
src/environments/environment.prod.ts
View File

@ -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',

3
src/environments/environment.ts
View File

@ -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',

4
src/styles/partials/_form-controls.scss
View File

@ -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 {