link to base config

This commit is contained in:
Tykayn 2021-02-05 15:34:00 +01:00 committed by tykayn
parent f96dc1f3c4
commit 2d49389d11
6 changed files with 111 additions and 98 deletions

View File

@ -8,9 +8,12 @@ import { User } from './user.model';
export class Poll { export class Poll {
constructor( constructor(
public owner: User = new User(), public owner: User = new User(),
public slug: string = 'default-slug', public slug: string = '',
public title: string = 'default title', public title: string = '',
public description?: string, public description?: string,
public creatorPseudo?: string,
public creatorEmail?: string,
public isAboutDate?: boolean,
public configuration: PollConfiguration = new PollConfiguration(), public configuration: PollConfiguration = new PollConfiguration(),
public comments: Comment[] = [], public comments: Comment[] = [],
public choices: Choice[] = [], public choices: Choice[] = [],

View File

@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms'; import { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
import { SharedModule } from '../../shared/shared.module'; import { SharedModule } from '../../shared/shared.module';
@ -35,6 +35,7 @@ import { AdvancedConfigComponent } from './form/advanced-config/advanced-config.
CommonModule, CommonModule,
ReactiveFormsModule, ReactiveFormsModule,
SharedModule, SharedModule,
FormsModule,
TranslateModule.forChild({ extend: true }), TranslateModule.forChild({ extend: true }),
DateValueAccessorModule, DateValueAccessorModule,
], ],

View File

@ -4,11 +4,12 @@
<p> <p>
{{ 'creation.choose_title' | translate }} {{ 'creation.choose_title' | translate }}
</p> </p>
<h2 class="title is-2">slug: {{ form.value.slug }}</h2>
<br /> <br />
<label class="hidden" for="title">Titre</label> <label class="hidden" for="title">Titre</label>
<input <input
#title
matInput matInput
#title
[placeholder]="'creation.choose_title_placeholder' | translate" [placeholder]="'creation.choose_title_placeholder' | translate"
formControlName="title" formControlName="title"
id="title" id="title"
@ -18,11 +19,11 @@
/> />
<button <button
mat-button mat-button
*ngIf="title.value" *ngIf="form.value.title"
matSuffix matSuffix
mat-icon-button mat-icon-button
aria-label="Clear" aria-label="Clear"
(click)="title.value = ''" (click)="form.patchValue({ title: '' })"
> >
<i class="fa fa-close"></i> <i class="fa fa-close"></i>
</button> </button>
@ -35,7 +36,7 @@
</label> </label>
<input <input
#title #creatorEmail
matInput matInput
placeholder="{{ 'creation.email_placeholder' | translate }}" placeholder="{{ 'creation.email_placeholder' | translate }}"
formControlName="creatorEmail" formControlName="creatorEmail"
@ -49,57 +50,64 @@
{{ 'creation.name' | translate }} {{ 'creation.name' | translate }}
</span> </span>
</label> </label>
<input #title matInput placeholder="pseudo" formControlName="creatorPseudo" id="creatorPseudo" required /> <input
#creatorPseudo
matInput
placeholder="pseudo"
formControlName="creatorPseudo"
id="creatorPseudo"
required
/>
</div> </div>
<hr /> <hr />
</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--warning" (click)="askInitFormDefault()"> <!-- <button class="btn btn&#45;&#45;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 class="columns"> <!-- <div class="columns">-->
<div class="column"> <!-- <div class="column">-->
Slug: <!-- Slug:-->
</div> <!-- </div>-->
<div class="column"> <!-- <div class="column">-->
<div class="well"> <!-- <div class="well">-->
{{ poll.slug }} <!-- {{ form.slug }}-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</form> </form>

View File

@ -1,4 +1,4 @@
import { ChangeDetectorRef, Component, Inject, Input, OnInit } from '@angular/core'; import { ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnInit, Output } 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 { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UuidService } from '../../../../core/services/uuid.service'; import { UuidService } from '../../../../core/services/uuid.service';
@ -30,12 +30,10 @@ export class BaseConfigComponent implements OnInit {
@Inject(DOCUMENT) private document: Document @Inject(DOCUMENT) private document: Document
) {} ) {}
ngOnInit(): void { ngOnInit(): void {}
this.initFormDefault(false);
}
askInitFormDefault(): void { askInitFormDefault(): void {
this.initFormDefault(false); // this.initFormDefault(false);
this.toastService.display('formulaire réinitialisé'); this.toastService.display('formulaire réinitialisé');
} }
@ -60,29 +58,6 @@ export class BaseConfigComponent implements OnInit {
// } // }
} }
initFormDefault(showDemoValues = true): void {
this.form = this.fb.group({
title: ['', [Validators.required, Validators.minLength(12)]],
creatorPseudo: ['', [Validators.required]],
creatorEmail: ['', [Validators.required]],
slug: [this.uuidService.getUUID(), [Validators.required]],
description: ['', [Validators.required]],
choices: new FormArray([]),
whoModifiesAnswers: ['', [Validators.required]],
whoCanChangeAnswers: ['', [Validators.required]],
isAboutDate: [true, [Validators.required]],
startDateInterval: ['', [Validators.required]],
endDateInterval: ['', [Validators.required]],
isProtectedByPassword: [false, [Validators.required]],
isOwnerNotifiedByEmailOnNewVote: [false, [Validators.required]],
isOwnerNotifiedByEmailOnNewComment: [false, [Validators.required]],
isMaybeAnswerAvailable: [false, [Validators.required]],
areResultsPublic: [true, [Validators.required]],
expiracyNumberOfDays: [60, [Validators.required, Validators.min(0)]],
});
console.log('this.form ', this.form);
}
public updateSlug(): void { public updateSlug(): void {
const newValueFormatted = 'TODO'; const newValueFormatted = 'TODO';
this.form.patchValue({ slug: newValueFormatted }); this.form.patchValue({ slug: newValueFormatted });
@ -94,4 +69,8 @@ export class BaseConfigComponent implements OnInit {
automaticSlug() { automaticSlug() {
this.form.patchValue({ slug: this.pollService.makeSlug(this.poll) }); this.form.patchValue({ slug: this.pollService.makeSlug(this.poll) });
} }
formUpdate() {
this.formChange.emit(this.form);
}
} }

View File

@ -1,13 +1,29 @@
<div class="admin-form padded"> <div class="admin-form padded">
<form [formGroup]="form"> <form [formGroup]="form">
<div class="columns">
<div class="column">
<h1> <h1>
{{ 'creation.title' | translate }} {{ 'creation.title' | translate }}
</h1> </h1>
<p class="subtitle"> <p class="subtitle">
{{ 'creation.want' | translate }} {{ 'creation.want' | translate }}
</p> </p>
<app-kind-select [poll]="poll" [form]="form"></app-kind-select> <app-kind-select [(form)]="form"></app-kind-select>
<app-base-config [poll]="poll" [form]="form"></app-base-config> <app-base-config [(form)]="form"></app-base-config>
</div>
<div class="column">
<pre class="debug padded warning">
form values :
{{ form.value | json }}
</pre
>
<pre class="debug padded warning">
poll initial values :
{{ poll | json }}
</pre
>
</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-date-select ng-if="form.kind == 'date'"></app-date-select>-->

View File

@ -77,20 +77,26 @@ export class FormComponent implements OnInit {
*/ */
setDemoValues(): void { setDemoValues(): void {
this.form.patchValue({ this.form.patchValue({
title: 'mon titre', title: '',
description: 'répondez SVP <3 ! *-* ', description: 'répondez SVP <3 ! *-* ',
slug: this.uuidService.getUUID(), slug: this.uuidService.getUUID(),
creatorPseudo: 'Chuck Norris', creatorPseudo: 'Chuck Norris',
creatorEmail: 'chucknorris@example.com', creatorEmail: 'chucknorris@example.com',
isAboutDate: true, isAboutDate: true,
whoModifiesAnswers: 'everybody', // configuration: {
whoCanChangeAnswers: 'everybody', // whoModifiesAnswers: 'everybody',
isProtectedByPassword: false, // whoCanChangeAnswers: 'everybody'
isOwnerNotifiedByEmailOnNewVote: false, // isProtectedByPassword: false,
isOwnerNotifiedByEmailOnNewComment: false, // isOwnerNotifiedByEmailOnNewVote: false,
isMaybeAnswerAvailable: false, // isOwnerNotifiedByEmailOnNewComment: false,
areResultsPublic: true, // isMaybeAnswerAvailable: false,
expiracyNumberOfDays: 60, // areResultsPublic: true,
// expiracyNumberOfDays: 60,
// },
comments: [],
choices: [],
dateChoices: [],
timeChoices: [],
}); });
} }
} }