Browse Source
Testing admin rework See merge request framasoft/framadate/funky-framadate-front!45develop
ty kayn
2 years ago
33 changed files with 434 additions and 178 deletions
@ -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