Testing admin rework See merge request framasoft/framadate/funky-framadate-front!45archived-develop
ty kayn
2 years ago
commit
c3972694cb
@ -0,0 +1,145 @@
|
||||
<div class="admin-form">
|
||||
<h1 i18n>
|
||||
{{ 'creation.title' | translate }}
|
||||
</h1>
|
||||
<span class="pre-selector" i18n>
|
||||
{{ 'creation.want' | translate }}
|
||||
</span>
|
||||
<button class="btn btn--warning">
|
||||
Reset all
|
||||
</button>
|
||||
|
||||
<div class="simple">
|
||||
<form [formGroup]="pollFormGroup">
|
||||
<label for="title">Titre</label>
|
||||
<input
|
||||
#title
|
||||
matInput
|
||||
placeholder="title posée, sujet"
|
||||
formControlName="title"
|
||||
id="title"
|
||||
autofocus="autofocus"
|
||||
(change)="updateSlug()"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="title.value"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="title.value = ''"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
|
||||
<label for="descr">Description</label>
|
||||
<textarea
|
||||
#description
|
||||
matInput
|
||||
id="descr"
|
||||
placeholder="Description"
|
||||
formControlName="description"
|
||||
required
|
||||
></textarea>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="description.value"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="description.value = ''"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
<h2>Choix de réponses</h2>
|
||||
<pre class="debug padded warning">
|
||||
choicesFormArray :
|
||||
{{ choicesFormArray | json }}
|
||||
</pre
|
||||
>
|
||||
|
||||
<label for="slug"
|
||||
>Url pour les participants
|
||||
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="slug.value"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="slug.value = ''"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
</label>
|
||||
<br />
|
||||
<span
|
||||
>{{ urlPrefix }}
|
||||
<strong>
|
||||
{{ slug.value }}
|
||||
</strong>
|
||||
</span>
|
||||
<input #slug matInput id="slug" placeholder="Url" formControlName="slug" required />
|
||||
<br />
|
||||
</form>
|
||||
</div>
|
||||
<div class="complete" *ngIf="longFormVersionEnabled">
|
||||
<form [formGroup]="configurationFormGroup">
|
||||
<h2>Version complète du formulaire</h2>
|
||||
<mat-form-field appearance="outline" class="is-flex">
|
||||
<mat-label>Nombre de jours avant expiration</mat-label>
|
||||
<input
|
||||
#expiracy
|
||||
matInput
|
||||
type="number"
|
||||
placeholder="Nombre de jours avant expiration"
|
||||
formControlName="expiracyNumberOfDays"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="expiracy.value"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="expiracy.value = ''"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<mat-checkbox class="is-flex" formControlName="areResultsPublic">
|
||||
Les participants pourront consulter les résultats
|
||||
</mat-checkbox>
|
||||
<mat-checkbox class="is-flex" formControlName="isAboutDate">
|
||||
Les choix possibles concerneront des dates
|
||||
</mat-checkbox>
|
||||
<mat-checkbox class="is-flex" formControlName="isProtectedByPassword">
|
||||
Le sondage sera protégé par un mot de passe
|
||||
</mat-checkbox>
|
||||
<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewVote">
|
||||
Vous recevrez un mail à chaque nouvelle participation
|
||||
</mat-checkbox>
|
||||
<mat-checkbox class="is-flex" formControlName="isOwnerNotifiedByEmailOnNewComment">
|
||||
Vous recevrez un mail à chaque nouveau commentaire
|
||||
</mat-checkbox>
|
||||
<mat-checkbox class="is-flex" formControlName="isMaybeAnswerAvailable">
|
||||
La réponse « peut-être » sera disponible
|
||||
</mat-checkbox>
|
||||
|
||||
<button
|
||||
mat-button
|
||||
(click)="createPoll()"
|
||||
[disabled]="!pollFormGroup.valid || !configurationFormGroup.valid"
|
||||
>
|
||||
Enregistrer le sondage
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<pre class="debug padded warning">
|
||||
poll :
|
||||
{{ poll | json }}
|
||||
</pre
|
||||
>
|
||||
</div>
|
||||
@ -0,0 +1,7 @@
|
||||
:host {
|
||||
input,
|
||||
textarea {
|
||||
padding: 0.5em;
|
||||
border: solid #eee;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FormComponent } from './form.component';
|
||||
|
||||
describe('FormComponent', () => {
|
||||
let component: FormComponent;
|
||||
let fixture: ComponentFixture<FormComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [FormComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FormComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,83 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { Poll } from '../../../core/models/poll.model';
|
||||
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
import { UuidService } from '../../../core/services/uuid.service';
|
||||
import { DateService } from '../../../core/services/date.service';
|
||||
import { ApiService } from '../../../core/services/api.service';
|
||||
import { Choice } from '../../../core/models/choice.model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-admin-form',
|
||||
templateUrl: './form.component.html',
|
||||
styleUrls: ['./form.component.scss'],
|
||||
})
|
||||
export class FormComponent implements OnInit {
|
||||
@Input()
|
||||
public poll?: Poll;
|
||||
public pollFormGroup: FormGroup;
|
||||
public configurationFormGroup: FormGroup;
|
||||
|
||||
public choicesFormArray: FormArray; // possible choices to answer
|
||||
|
||||
public longFormVersionEnabled = true;
|
||||
|
||||
public urlPrefix: string = window.location.origin + '/participation/';
|
||||
|
||||
constructor(private fb: FormBuilder, private uuidService: UuidService, private apiService: ApiService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.pollFormGroup = this.fb.group({
|
||||
title: [this.poll ? this.poll.title : '', [Validators.required]],
|
||||
slug: [this.poll ? this.poll.slug : this.uuidService.getUUID(), [Validators.required]],
|
||||
description: [this.poll ? this.poll.description : ''],
|
||||
});
|
||||
// add dynamically elements to add choices
|
||||
this.choicesFormArray = this.fb.array([
|
||||
{
|
||||
choices: this.poll.choices.forEach((elem: Choice) => {
|
||||
return {
|
||||
label: [elem.label, [Validators.required]],
|
||||
imageUrl: [elem.imageUrl, null],
|
||||
};
|
||||
}),
|
||||
},
|
||||
]);
|
||||
|
||||
this.configurationFormGroup = this.fb.group({
|
||||
isAboutDate: [this.poll ? this.poll.configuration.isAboutDate : false, [Validators.required]],
|
||||
isProtectedByPassword: [
|
||||
this.poll ? this.poll.configuration.isProtectedByPassword : false,
|
||||
[Validators.required],
|
||||
],
|
||||
isOwnerNotifiedByEmailOnNewVote: [
|
||||
this.poll ? this.poll.configuration.isOwnerNotifiedByEmailOnNewVote : false,
|
||||
[Validators.required],
|
||||
],
|
||||
isOwnerNotifiedByEmailOnNewComment: [
|
||||
this.poll ? this.poll.configuration.isOwnerNotifiedByEmailOnNewComment : false,
|
||||
[Validators.required],
|
||||
],
|
||||
isMaybeAnswerAvailable: [
|
||||
this.poll ? this.poll.configuration.isMaybeAnswerAvailable : false,
|
||||
[Validators.required],
|
||||
],
|
||||
areResultsPublic: [this.poll ? this.poll.configuration.areResultsPublic : true, [Validators.required]],
|
||||
expiracyNumberOfDays: [
|
||||
this.poll ? DateService.diffInDays(new Date(), this.poll.configuration.expires) : 60,
|
||||
[Validators.required],
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
public createPoll(): void {
|
||||
if (this.pollFormGroup.valid && this.configurationFormGroup.valid) {
|
||||
console.log('Le sondage est correctement rempli, prêt à enregistrer.');
|
||||
// TODO : save the poll
|
||||
this.apiService.createPoll(this.poll);
|
||||
}
|
||||
}
|
||||
public updateSlug() {
|
||||
let newValueFormatted = 'TODO';
|
||||
this.pollFormGroup.patchValue({ slug: newValueFormatted });
|
||||
}
|
||||
}
|
||||
@ -0,0 +1 @@
|
||||
<p>naming works!</p>
|
||||
@ -0,0 +1,24 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { NamingComponent } from './naming.component';
|
||||
|
||||
describe('NamingComponent', () => {
|
||||
let component: NamingComponent;
|
||||
let fixture: ComponentFixture<NamingComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [NamingComponent],
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(NamingComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,12 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-naming',
|
||||
templateUrl: './naming.component.html',
|
||||
styleUrls: ['./naming.component.scss'],
|
||||
})
|
||||
export class NamingComponent implements OnInit {
|
||||
constructor() {}
|
||||
|
||||
ngOnInit(): void {}
|
||||
}
|
||||
@ -1,46 +1,40 @@
|
||||
import {Routes} from "@angular/router";
|
||||
import {HomeComponent} from "./core/components/home/home.component";
|
||||
import {PollService} from "./core/services/poll.service";
|
||||
import {PageNotFoundComponent} from "./shared/components/page-not-found/page-not-found.component";
|
||||
import { Routes } from '@angular/router';
|
||||
import { HomeComponent } from './core/components/home/home.component';
|
||||
import { PollService } from './core/services/poll.service';
|
||||
import { PageNotFoundComponent } from './shared/components/page-not-found/page-not-found.component';
|
||||
|
||||
export const routes: Routes = [
|
||||
{path: '', component: HomeComponent},
|
||||
{ path: '', component: HomeComponent },
|
||||
{
|
||||
path: 'user',
|
||||
loadChildren: () => import('./features/user-profile/user-profile.module')
|
||||
.then((m) => m.UserProfileModule),
|
||||
loadChildren: () => import('./features/user-profile/user-profile.module').then((m) => m.UserProfileModule),
|
||||
},
|
||||
{
|
||||
path: 'administration',
|
||||
loadChildren: () =>
|
||||
import('./features/administration/administration.module')
|
||||
.then((m) => m.AdministrationModule),
|
||||
resolve: {poll: PollService},
|
||||
import('./features/administration/administration.module').then((m) => m.AdministrationModule),
|
||||
// resolve: {poll: PollService},
|
||||
},
|
||||
{
|
||||
path: 'poll/:slug/administration',
|
||||
loadChildren: () =>
|
||||
import('./features/administration/administration.module')
|
||||
.then((m) => m.AdministrationModule),
|
||||
resolve: {poll: PollService},
|
||||
import('./features/administration/administration.module').then((m) => m.AdministrationModule),
|
||||
resolve: { poll: PollService },
|
||||
},
|
||||
{
|
||||
path: 'poll/:slug/consultation',
|
||||
loadChildren: () => import('./features/consultation/consultation.module')
|
||||
.then((m) => m.ConsultationModule),
|
||||
resolve: {poll: PollService},
|
||||
loadChildren: () => import('./features/consultation/consultation.module').then((m) => m.ConsultationModule),
|
||||
resolve: { poll: PollService },
|
||||
},
|
||||
{
|
||||
path: 'poll/:slug/participation',
|
||||
loadChildren: () => import('./features/participation/participation.module')
|
||||
.then((m) => m.ParticipationModule),
|
||||
resolve: {poll: PollService},
|
||||
loadChildren: () => import('./features/participation/participation.module').then((m) => m.ParticipationModule),
|
||||
resolve: { poll: PollService },
|
||||
},
|
||||
{
|
||||
path: 'oldstuff',
|
||||
loadChildren: () => import('./features/old-stuff/old-stuff.module')
|
||||
.then((m) => m.OldStuffModule),
|
||||
loadChildren: () => import('./features/old-stuff/old-stuff.module').then((m) => m.OldStuffModule),
|
||||
},
|
||||
{path: 'page-not-found', component: PageNotFoundComponent},
|
||||
{path: '**', redirectTo: 'page-not-found', pathMatch: 'full'},
|
||||
{ path: 'page-not-found', component: PageNotFoundComponent },
|
||||
{ path: '**', redirectTo: 'page-not-found', pathMatch: 'full' },
|
||||
];
|
||||
|
||||
Loading…
Reference in new issue