tykayn
parent
6c30872c0e
commit
19453978be
@ -1 +0,0 @@
|
||||
<p>naming works!</p>
|
||||
@ -1,24 +0,0 @@
|
||||
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();
|
||||
});
|
||||
});
|
||||
@ -1,12 +0,0 @@
|
||||
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,114 +1,11 @@
|
||||
<mat-vertical-stepper #stepper linear>
|
||||
<mat-step [stepControl]="pollFormGroup" class="is-expanded">
|
||||
<form [formGroup]="pollFormGroup">
|
||||
<ng-template matStepLabel>Informations du sondage</ng-template>
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Titre</mat-label>
|
||||
<input #title matInput placeholder="Question posée, sujet" formControlName="title" required />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="outline" class="is-flex">
|
||||
<mat-label>Description</mat-label>
|
||||
<textarea
|
||||
#description
|
||||
matInput
|
||||
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>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="outline" class="is-flex">
|
||||
<mat-label>Url pour les participants</mat-label>
|
||||
<span matPrefix>{{ urlPrefix }}</span>
|
||||
<input #slug matInput placeholder="Url" formControlName="slug" required />
|
||||
<button
|
||||
mat-button
|
||||
*ngIf="slug.value"
|
||||
matSuffix
|
||||
mat-icon-button
|
||||
aria-label="Clear"
|
||||
(click)="slug.value = ''"
|
||||
>
|
||||
<i class="fa fa-close"></i>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<button mat-button matStepperNext>Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<mat-step [stepControl]="configurationFormGroup">
|
||||
<form [formGroup]="configurationFormGroup">
|
||||
<ng-template matStepLabel>PollConfiguration du sondage</ng-template>
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Back</button>
|
||||
<button mat-button matStepperNext>Next</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>Done</ng-template>
|
||||
<p>You are now done.</p>
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Back</button>
|
||||
<button mat-button (click)="stepper.reset()">Reset</button>
|
||||
</div>
|
||||
<div>
|
||||
<button mat-button (click)="savePoll()" [disabled]="!pollFormGroup.valid || !configurationFormGroup.valid">
|
||||
Enregistrer le sondage
|
||||
</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
</mat-vertical-stepper>
|
||||
<section class="creation-stepper">
|
||||
<div class="step-info">
|
||||
<h2 class="title is-2">
|
||||
Étape {{ step_current }} /
|
||||
{{ step_max }}
|
||||
</h2>
|
||||
</div>
|
||||
<div class="step-bar-container" style="width: 100%;">
|
||||
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -0,0 +1,19 @@
|
||||
@import '../../../../styles/variables';
|
||||
|
||||
.step-bar-container {
|
||||
margin: 1em 0;
|
||||
height: 0.5em;
|
||||
display: inline-block;
|
||||
min-width: 1px;
|
||||
background: $grey-light;
|
||||
width: 100%;
|
||||
}
|
||||
.step-bar-progress {
|
||||
position: relative;
|
||||
top: -0.6em;
|
||||
left: 0;
|
||||
height: 0.5em;
|
||||
display: inline-block;
|
||||
min-width: 1px;
|
||||
background: $primary;
|
||||
}
|
||||
@ -1,65 +1,13 @@
|
||||
import { Component, Input, OnInit } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
import { Poll } from '../../../core/models/poll.model';
|
||||
import { UuidService } from '../../../core/services/uuid.service';
|
||||
import { DateService } from '../../../core/services/date.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-stepper',
|
||||
templateUrl: './stepper.component.html',
|
||||
styleUrls: ['./stepper.component.scss'],
|
||||
})
|
||||
export class StepperComponent implements OnInit {
|
||||
export class StepperComponent {
|
||||
@Input()
|
||||
public poll?: Poll;
|
||||
|
||||
public pollFormGroup: FormGroup;
|
||||
public configurationFormGroup: FormGroup;
|
||||
public choicesFormGroup: FormGroup;
|
||||
|
||||
public urlPrefix: string = window.location.origin + '/participation/';
|
||||
|
||||
constructor(private fb: FormBuilder, private uuidService: UuidService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.pollFormGroup = this.fb.group({
|
||||
question: [this.poll ? this.poll.title : '', [Validators.required]],
|
||||
slug: [this.poll ? this.poll.slug : this.uuidService.getUUID(), [Validators.required]],
|
||||
description: [this.poll ? this.poll.description : ''],
|
||||
});
|
||||
|
||||
this.configurationFormGroup = this.fb.group({
|
||||
title: [this.poll ? this.poll.configuration : false, [Validators.required]],
|
||||
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 savePoll(): void {
|
||||
if (this.pollFormGroup.valid && this.configurationFormGroup.valid) {
|
||||
console.log('Le sondage est correctement rempli, prêt à enregistrer.');
|
||||
// TODO : save the poll
|
||||
}
|
||||
}
|
||||
public step_current: number = 1;
|
||||
@Input()
|
||||
public step_max: number = 5;
|
||||
}
|
||||
|
||||
Loading…
Reference in new issue