tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

add choices for the future

Browse Source
This commit is contained in:
Tykayn 2021-02-05 17:02:52 +01:00 committed by tykayn
parent 2d49389d11
commit 237984c040
9 changed files with 324 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -36,22 +36,22 @@ export class Poll {
new User(item.owner.pseudo, item.owner.email, undefined), new User(item.owner.pseudo, item.owner.email, undefined),
item.slug, item.slug,
item.title, item.title,
item.description, item.description
item.configuration, // item.configuration,
item.comments // item.comments
.map( // .map(
(c: Pick<Comment, 'author' | 'content' | 'dateCreated'>) => // (c: Pick<Comment, 'author' | 'content' | 'dateCreated'>) =>
new Comment(c.author, c.content, new Date(c.dateCreated)) // new Comment(c.author, c.content, new Date(c.dateCreated))
) // )
.sort(Comment.sortChronologically), // .sort(Comment.sortChronologically),
item.choices.map((c: Pick<Choice, 'label' | 'imageUrl' | 'participants' | 'counts'>) => { // item.choices.map((c: Pick<Choice, 'label' | 'imageUrl' | 'participants' | 'counts'>) => {
const choice = new Choice(c.label, c.imageUrl, new Map(c.participants)); // const choice = new Choice(c.label, c.imageUrl, new Map(c.participants));
choice.participants.forEach((value, key) => { // choice.participants.forEach((value, key) => {
choice.participants.set(key, new Set(value)); // choice.participants.set(key, new Set(value));
}); // });
choice.updateCounts(); // choice.updateCounts();
return choice; // return choice;
}) // })
); );
} }
} }

90
src/app/features/administration/form/advanced-config/advanced-config.component.html
View File

@ -23,9 +23,8 @@
<br /> <br />
<label for="slug" <label for="slug">
>Url pour les participants Url personnalisée pour les participants
<i class="fa fa-close"></i> <i class="fa fa-close"></i>
</label> </label>
<br /> <br />
@ -48,13 +47,16 @@
<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required /> <input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
<br /> <br />
<div appearance="outline" class="is-not-flex"> <div appearance="outline" class="is-not-flex">
<mat-label>Nombre de jours avant expiration</mat-label> <mat-label
>Nombre de jours avant expiration de la possibilité de voter, après le sondage reste
consultable</mat-label
>
<input <input
#expiracy #expiracy
id="expiracy" id="expiracy"
matInput matInput
type="number" type="number"
placeholder="Nombre de jours avant expiration" placeholder="Nombre de jours avant fin des votes"
formControlName="expiracyNumberOfDays" formControlName="expiracyNumberOfDays"
required required
/> />
@ -69,15 +71,57 @@
<i class="fa fa-close"></i> <i class="fa fa-close"></i>
</button> </button>
</div> </div>
<div appearance="outline" class="is-not-flex">
<mat-label
>Nombre de jours avant archivage, après quoi le sondage n'est plus visible par le public</mat-label
>
<input
#archive
id="archive"
matInput
type="number"
placeholder="Nombre de jours avant archivage"
formControlName="archiveNumberOfDays"
required
/>
<button
mat-button
*ngIf="archive.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="archive.value = ''"
>
<i class="fa fa-close"></i>
</button>
</div>
<mat-checkbox class="is-not-flex" formControlName="areResultsPublic"> <mat-checkbox class="is-not-flex" formControlName="areResultsPublic">
Les participants pourront consulter les résultats Les participants pourront consulter les résultats
</mat-checkbox> </mat-checkbox>
<mat-checkbox class="is-not-flex" formControlName="isAboutDate"> <h3 class="title is-3">
Les choix possibles concerneront des dates <i class="fa fa-lock"></i>
</mat-checkbox> Accès sécurisé
</h3>
<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword"> <mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
Le sondage sera protégé par un mot de passe Le sondage sera protégé par un mot de passe
</mat-checkbox> </mat-checkbox>
<input
*ngIf="form.value.isProtectedByPassword"
#password
id="password"
matInput
type="password"
placeholder="password"
formControlName="password"
required
/>
<h3 class="title is-3">
<i class="fa fa-enveloppe"></i>
Notifications
</h3>
<mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote"> <mat-checkbox class="is-not-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
Vous recevrez un mail à chaque nouvelle participation Vous recevrez un mail à chaque nouvelle participation
</mat-checkbox> </mat-checkbox>
@ -88,4 +132,34 @@
La réponse « peut-être » sera disponible La réponse « peut-être » sera disponible
</mat-checkbox> </mat-checkbox>
</fieldset> </fieldset>
<fieldset>
<h2>
Fonctionnalités pas encore disponibles:
</h2>
<app-wip-todo></app-wip-todo>
<mat-checkbox class="is-not-flex" formControlName="isProtectedByPassword">
Spécifier un lien unique de vote à des participants définis
</mat-checkbox>
<mat-checkbox class="is-not-flex" formControlName="allowComments">
Autoriser les commentaires
</mat-checkbox>
<mat-checkbox class="is-not-flex" formControlName="hasMaxCountOfAnswers">
Nombre de réponses limitées à ce nombre
</mat-checkbox>
<input
*ngIf="form.value.hasMaxCountOfAnswers"
#limitCount
id="limitCount"
matInput
type="number"
placeholder="Nombre de réponses max"
formControlName="maxCountOfAnswers"
required
/>
<mat-checkbox class="is-not-flex" formControlName="isZeroKnoledge">
Les informations du sondage seront chiffrés en base de données
</mat-checkbox>
</fieldset>
</form> </form>

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

@ -64,50 +64,39 @@
</div> </div>
<hr /> <hr />
<!-- <div class="columns">--> <div class="columns">
<!-- <div class="column">--> <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>--> <div>
<!-- <h2>--> <h2>
<!-- {{ 'choices.title' | translate }}--> {{ 'choices.title' | translate }}
<!-- </h2>--> </h2>
<!-- {{ 'dates.add' | translate }}--> {{ 'dates.add' | translate }}
<!-- <p>--> <p>
<!-- <i>--> <i>
<!-- {{ 'choices.helper' | translate }}--> {{ 'choices.helper' | translate }}
<!-- </i>--> </i>
<!-- </p>--> </p>
<!-- {{ 'choices.answer_preset_1' | translate }}--> {{ 'choices.answer_preset_1' | translate }}
<!-- {{ 'choices.add' | translate }}--> {{ 'choices.add' | translate }}
<!-- {{ 'choices.continue' | translate }}--> {{ 'choices.continue' | translate }}
<!-- </div>--> </div>
<!-- </div>--> </div>
<!-- </div>--> </div>
<!-- <div class="column">--> <div class="column">
<!-- <button class="btn btn&#45;&#45;warning" (click)="askInitFormDefault()">--> <button class="btn btn--warning" (click)="askInitFormDefault()">
<!-- <i class="fa fa-refresh"></i>--> <i class="fa fa-refresh"></i>
<!-- Tout réinitialiser--> Tout réinitialiser
<!-- </button>--> </button>
<!-- <br />--> <br />
<!-- <button class="btn is-success" (click)="createPoll()">--> <button class="btn is-success" (click)="createPoll()">
<!-- <i class="fa fa-save"></i>--> <i class="fa fa-save"></i>
<!-- Enregistrer le sondage--> Enregistrer le sondage
<!-- </button>--> </button>
<!-- <br />--> <br />
<!-- <button class="btn is-default" (click)="automaticSlug()">--> <button class="btn is-default" (click)="automaticSlug()">
<!-- <i class="fa fa-refresh"></i>--> <i class="fa fa-refresh"></i>
<!-- Slug automatique--> Slug automatique
<!-- </button>--> </button>
</div>
<!-- <div class="columns">-->
<!-- <div class="column">-->
<!-- Slug:-->
<!-- </div>-->
<!-- <div class="column">-->
<!-- <div class="well">-->
<!-- {{ form.slug }}-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
</form> </form>

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

@ -1,6 +1,6 @@
import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core'; import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core';
import { ToastService } from '../../../../core/services/toast.service'; import { ToastService } from '../../../../core/services/toast.service';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup } from '@angular/forms';
import { UuidService } from '../../../../core/services/uuid.service'; import { UuidService } from '../../../../core/services/uuid.service';
import { PollService } from '../../../../core/services/poll.service'; import { PollService } from '../../../../core/services/poll.service';
import { ApiService } from '../../../../core/services/api.service'; import { ApiService } from '../../../../core/services/api.service';
@ -13,7 +13,7 @@ import { Poll } from '../../../../core/models/poll.model';
templateUrl: './base-config.component.html', templateUrl: './base-config.component.html',
styleUrls: ['./base-config.component.scss'], styleUrls: ['./base-config.component.scss'],
}) })
export class BaseConfigComponent implements OnInit { export class BaseConfigComponent {
@Input() @Input()
public poll?: Poll; public poll?: Poll;
@Input() @Input()
@ -30,8 +30,6 @@ export class BaseConfigComponent implements OnInit {
@Inject(DOCUMENT) private document: Document @Inject(DOCUMENT) private document: Document
) {} ) {}
ngOnInit(): void {}
askInitFormDefault(): void { askInitFormDefault(): void {
// this.initFormDefault(false); // this.initFormDefault(false);
this.toastService.display('formulaire réinitialisé'); this.toastService.display('formulaire réinitialisé');
@ -43,19 +41,18 @@ export class BaseConfigComponent implements OnInit {
console.log('newpoll', newpoll); console.log('newpoll', newpoll);
const router = this.router; const router = this.router;
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) => { this.apiService.createPoll(newpoll).then((resp) => {
console.log('resp', resp); console.log('resp', resp);
router.navigate(['success']); router.navigate(['success']);
}); });
// this.router } else {
// if (this.form.valid) { this.toastService.display('invalid form');
// console.log('Le sondage est correctement rempli, prêt à enregistrer.'); }
// const newpoll = this.pollService.newPollFromForm(this.form);
// // TODO : save the poll
// this.apiService.createPoll(newpoll);
// } else {
// this.toastService.display('invalid form');
// }
} }
public updateSlug(): void { public updateSlug(): void {
@ -67,10 +64,6 @@ export class BaseConfigComponent implements OnInit {
* set the poll slug from other data of the poll * set the poll slug from other data of the poll
*/ */
automaticSlug() { automaticSlug() {
this.form.patchValue({ slug: this.pollService.makeSlug(this.poll) }); this.form.patchValue({ slug: this.pollService.makeSlug(this.form.value) });
}
formUpdate() {
this.formChange.emit(this.form);
} }
} }

80
src/app/features/administration/form/date-select/date-select.component.html
View File

@ -1,42 +1,43 @@
<div class="date-selection"> <div class="date-selection">
<form [formGroup]="form">
<!-- interval--> <!-- interval-->
<section *ngIf="showDateInterval" class="date-interval form-row"> <!-- <section *ngIf="showDateInterval" class="date-interval form-row">-->
<button <!-- <button-->
(click)="showDateInterval = !showDateInterval" <!-- (click)="showDateInterval = !showDateInterval"-->
[ngClass]="{ active: showDateInterval }" <!-- [ngClass]="{ active: showDateInterval }"-->
class="btn btn--primary" <!-- class="btn btn&#45;&#45;primary"-->
id="toggle_interval_button" <!-- id="toggle_interval_button"-->
> <!-- >-->
<i class="fa fa-clock-o" aria-hidden="true"></i> <!-- <i class="fa fa-clock-o" aria-hidden="true"></i>-->
{{ 'dates.add_interval' | translate }} <!-- {{ 'dates.add_interval' | translate }}-->
</button> <!-- </button>-->
<h2>{{ 'dates.add_interval' | translate }}</h2> <!-- <h2>{{ 'dates.add_interval' | translate }}</h2>-->
<div class="columns"> <!-- <div class="columns">-->
<div class="column"> <!-- <div class="column">-->
{{ 'dates.interval_propose' | translate }} <!-- {{ 'dates.interval_propose' | translate }}-->
</div> <!-- </div>-->
<div class="column"> <!-- <div class="column">-->
<label for="start_interval" class="hidden">start</label> <!-- <label for="start_interval" class="hidden">start</label>-->
<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" /> <!-- <input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<div class="columns"> <!-- <div class="columns">-->
<div class="column"> <!-- <div class="column">-->
{{ 'dates.interval_span' | translate }} <!-- {{ 'dates.interval_span' | translate }}-->
</div> <!-- </div>-->
<div class="column"> <!-- <div class="column">-->
<label for="end_interval" class="hidden">end</label> <!-- <label for="end_interval" class="hidden">end</label>-->
<input id="end_interval" formControlName="endDateInterval" type="date" /> <!-- <input id="end_interval" formControlName="endDateInterval" type="date" />-->
</div> <!-- </div>-->
</div> <!-- </div>-->
<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary"> <!-- <button (click)="addIntervalOfDates()" class="btn btn-block btn&#45;&#45;primary">-->
<i class="fa fa-plus" aria-hidden="true"></i> <!-- <i class="fa fa-plus" aria-hidden="true"></i>-->
{{ 'dates.interval_button' | translate }} <!-- {{ 'dates.interval_button' | translate }}-->
{{ intervalDays }} <!-- {{ intervalDays }}-->
{{ 'dates.interval_button_dates' | translate }} <!-- {{ 'dates.interval_button_dates' | translate }}-->
</button> <!-- </button>-->
</section> <!-- </section>-->
<div class="dates-list"> <div class="dates-list">
<div class="title"> <div class="title">
@ -118,7 +119,11 @@
<button (click)="dateList.splice(id, 1)" class="btn btn-warning"> <button (click)="dateList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i> <i class="fa fa-times" aria-hidden="true"></i>
</button> </button>
<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary"> <button
(click)="addTimeToDate(choice, id)"
*ngIf="'true' === allowSeveralHours"
class="btn btn--primary"
>
{{ 'dates.add_time' | translate }} {{ 'dates.add_time' | translate }}
</button> </button>
<div *ngIf="'true' === allowSeveralHours" class="several-times"> <div *ngIf="'true' === allowSeveralHours" class="several-times">
@ -136,4 +141,5 @@
</div> </div>
</div> </div>
</div> </div>
</form>
</div> </div>

9
src/app/features/administration/form/date-select/date-select.component.ts
View File

@ -9,6 +9,7 @@ import { Router } from '@angular/router';
import { DOCUMENT } from '@angular/common'; import { DOCUMENT } from '@angular/common';
import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs'; import { DateChoice, otherDefaultDates } from '../../../old-stuff/config/defaultConfigs';
import { Poll } from '../../../../core/models/poll.model'; import { Poll } from '../../../../core/models/poll.model';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({ @Component({
selector: 'app-date-select', selector: 'app-date-select',
@ -16,8 +17,6 @@ import { Poll } from '../../../../core/models/poll.model';
styleUrls: ['./date-select.component.scss'], styleUrls: ['./date-select.component.scss'],
}) })
export class DateSelectComponent implements OnInit { export class DateSelectComponent implements OnInit {
@Input()
public poll?: Poll;
@Input() @Input()
public form: FormGroup; public form: FormGroup;
@ -163,7 +162,7 @@ export class DateSelectComponent implements OnInit {
imageUrl: 'mon url', imageUrl: 'mon url',
}); });
} }
this.choices.push(newControlGroup); this.form.value.choices.push(newControlGroup);
this.cd.detectChanges(); this.cd.detectChanges();
console.log('this.choices.length', this.choices.length); console.log('this.choices.length', this.choices.length);
@ -238,4 +237,8 @@ export class DateSelectComponent implements OnInit {
this.addChoice('raisin'); this.addChoice('raisin');
this.addChoice('abricot'); this.addChoice('abricot');
} }
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.form.value.choices, event.previousIndex, event.currentIndex);
}
} }

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

@ -8,8 +8,12 @@
<p class="subtitle"> <p class="subtitle">
{{ 'creation.want' | translate }} {{ 'creation.want' | translate }}
</p> </p>
<app-kind-select [(form)]="form"></app-kind-select> <app-kind-select [form]="form"></app-kind-select>
<app-base-config [(form)]="form"></app-base-config> <app-date-select ng-if="form.value.isAboutDate" [form]="form"></app-date-select>
<app-text-select ng-if="!form.value.isAboutDate" [form]="form"></app-text-select>
<app-base-config [form]="form"></app-base-config>
</div>
</div> </div>
<div class="column"> <div class="column">
<pre class="debug padded warning"> <pre class="debug padded warning">
@ -23,11 +27,8 @@
</pre </pre
> >
</div> </div>
</div>
<!-- choix spécialement pour les dates--> <!-- choix spécialement pour les dates-->
<!-- <app-date-select ng-if="form.kind == 'date'"></app-date-select>-->
<!-- <app-text-select ng-if="form.kind == 'classic'"></app-text-select>-->
<button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled"> <button class="btn is-info" (click)="advancedDisplayEnabled = !advancedDisplayEnabled">
<i class="fa fa-save"></i> <i class="fa fa-save"></i>
{{ 'creation.advanced' | translate }} {{ 'creation.advanced' | translate }}

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

@ -20,7 +20,7 @@ export class FormComponent implements OnInit {
public poll?: Poll; public poll?: Poll;
public form: FormGroup; public form: FormGroup;
public advancedDisplayEnabled = false; public advancedDisplayEnabled = true;
constructor( constructor(
private fb: FormBuilder, private fb: FormBuilder,
@ -34,10 +34,6 @@ export class FormComponent implements OnInit {
@Inject(DOCUMENT) private document: any @Inject(DOCUMENT) private document: any
) {} ) {}
drop(event: CdkDragDrop<string[]>) {
// moveItemInArray(this.choices, event.previousIndex, event.currentIndex);
}
ngOnInit(): void { ngOnInit(): void {
this.initFormDefault(); this.initFormDefault();
@ -53,16 +49,21 @@ export class FormComponent implements OnInit {
slug: [this.uuidService.getUUID(), [Validators.required]], slug: [this.uuidService.getUUID(), [Validators.required]],
description: ['', [Validators.required]], description: ['', [Validators.required]],
choices: new FormArray([]), choices: new FormArray([]),
// configuration: new FormGroup(),
whoModifiesAnswers: ['', [Validators.required]], whoModifiesAnswers: ['', [Validators.required]],
whoCanChangeAnswers: ['', [Validators.required]], whoCanChangeAnswers: ['', [Validators.required]],
isAboutDate: [true, [Validators.required]], isAboutDate: [true, [Validators.required]],
startDateInterval: ['', [Validators.required]], startDateInterval: ['', [Validators.required]],
endDateInterval: ['', [Validators.required]], endDateInterval: ['', [Validators.required]],
isProtectedByPassword: [false, [Validators.required]], isProtectedByPassword: [false, [Validators.required]],
hasMaxCountOfAnswers: [true, [Validators.required]],
allowComments: [true, [Validators.required]],
maxCountOfAnswers: [150, [Validators.required]],
isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]], isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]], isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
isMaybeAnswerAvailable: [false, [Validators.required]], isMaybeAnswerAvailable: [false, [Validators.required]],
areResultsPublic: [true, [Validators.required]], areResultsPublic: [true, [Validators.required]],
password: [this.uuidService.getUUID(), [Validators.required]],
expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]], expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
}); });
console.log('this.form ', this.form); console.log('this.form ', this.form);
@ -83,16 +84,16 @@ export class FormComponent implements OnInit {
creatorPseudo: 'Chuck Norris', creatorPseudo: 'Chuck Norris',
creatorEmail: 'chucknorris@example.com', creatorEmail: 'chucknorris@example.com',
isAboutDate: true, isAboutDate: true,
// configuration: { configuration: {
// whoModifiesAnswers: 'everybody', whoModifiesAnswers: 'everybody',
// whoCanChangeAnswers: 'everybody' whoCanChangeAnswers: 'everybody',
// isProtectedByPassword: false, isProtectedByPassword: false,
// isOwnerNotifiedByEmailOnNewVote: false, isOwnerNotifiedByEmailOnNewVote: false,
// isOwnerNotifiedByEmailOnNewComment: false, isOwnerNotifiedByEmailOnNewComment: false,
// isMaybeAnswerAvailable: false, isMaybeAnswerAvailable: false,
// areResultsPublic: true, areResultsPublic: true,
// expiracyNumberOfDays: 60, expiracyNumberOfDays: 60,
// }, },
comments: [], comments: [],
choices: [], choices: [],
dateChoices: [], dateChoices: [],

6
src/app/features/administration/form/text-select/text-select.component.ts
View File

@ -1,4 +1,5 @@
import { Component, OnInit } from '@angular/core'; import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
@Component({ @Component({
selector: 'app-text-select', selector: 'app-text-select',
@ -6,6 +7,9 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./text-select.component.scss'], styleUrls: ['./text-select.component.scss'],
}) })
export class TextSelectComponent implements OnInit { export class TextSelectComponent implements OnInit {
@Input()
public form: FormGroup;
constructor() {} constructor() {}
ngOnInit(): void {} ngOnInit(): void {}