creation forms, dispatch step one

This commit is contained in:
Tykayn 2021-10-18 16:02:54 +02:00 committed by tykayn
parent 19453978be
commit b559f6caba
18 changed files with 217 additions and 58 deletions

View File

@ -2,8 +2,28 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AdministrationComponent } from './administration.component';
import { StepTwoComponent } from './form/step-two/step-two.component';
import { StepThreeComponent } from './form/step-three/step-three.component';
import { StepFourComponent } from './form/step-four/step-four.component';
import { StepFiveComponent } from './form/step-five/step-five.component';
import { StepOneComponent } from './form/step-one/step-one.component';
const routes: Routes = [{ path: '', component: AdministrationComponent }];
const routes: Routes = [
{
path: '',
component: AdministrationComponent,
},
{
path: 'step',
children: [
{ path: '1', component: StepOneComponent },
{ path: '2', component: StepTwoComponent },
{ path: '3', component: StepThreeComponent },
{ path: '4', component: StepFourComponent },
{ path: '5', component: StepFiveComponent },
],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],

View File

@ -12,6 +12,9 @@ import { DateValueAccessorModule } from 'angular-date-value-accessor';
import { ClassicChoicesComponent } from './form/classic-choices/classic-choices.component';
import { StepOneComponent } from './form/step-one/step-one.component';
import { StepTwoComponent } from './form/step-two/step-two.component';
import { StepThreeComponent } from './form/step-three/step-three.component';
import { StepFourComponent } from './form/step-four/step-four.component';
import { StepFiveComponent } from './form/step-five/step-five.component';
@NgModule({
declarations: [
@ -21,6 +24,9 @@ import { StepTwoComponent } from './form/step-two/step-two.component';
ClassicChoicesComponent,
StepOneComponent,
StepTwoComponent,
StepThreeComponent,
StepFourComponent,
StepFiveComponent,
],
imports: [
AdministrationRoutingModule,

View File

@ -1,67 +1,31 @@
<div class="admin-form">
<header>
<h1>
{{ 'creation.title' | translate }}
</h1>
<form [formGroup]="form">
<app-stepper [step_current]="step_current" [step_max]="step_max"></app-stepper>
<section class="poll-title">
<span>
{{ 'creation.choose_title' | translate }}
</span>
<label class="hidden" for="title">Titre</label>
<input
#title
matInput
[placeholder]="'creation.choose_title_placeholder' | translate"
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>
</header>
<section class="step-container">
<router-outlet>
<app-step-one></app-step-one>
</router-outlet>
</section>
<div class="poll-description">
<label for="descr">Description (optionnel)</label>
<span class="rich-text-toggle">
mode de saisie avancée
<i class="fa fa-text"></i><input type="checkbox" formControlName="richTextMode" />
</span>
<textarea
#description
matInput
id="descr"
placeholder="Description"
formControlName="description"
required
></textarea>
<div class="text-info">
300 caractères maximum
<footer>
<div class="columns">
<div class="column">
<button class="button is-large is-secondary" [routerLink]="previousRouteName">précédent</button>
</div>
<button
mat-button
*ngIf="description.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="description.value = ''"
>
<i class="fa fa-close"></i>
</button>
<div class="column">
<button class="button is-primary is-large is-pulled-right">suivant</button>
</div>
</div>
</footer>
<hr />
<form [formGroup]="form">
<hr />
<app-stepper [step_current]="2" [step_max]="step_max"></app-stepper>
<div class="form-field poll-kind">
<h2 class="title is-2">

View File

@ -9,6 +9,7 @@ import { DateUtilities } from '../../old-stuff/config/DateUtilities';
import { DOCUMENT } from '@angular/common';
import { DateChoice, defaultTimeOfDay, otherDefaultDates } from '../../old-stuff/config/defaultConfigs';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { Router } from '@angular/router';
@Component({
selector: 'app-admin-form',
@ -34,6 +35,8 @@ export class FormComponent implements OnInit {
step_current: number = 1;
step_max: number = 5;
public round: Function;
private nextRouteName: string = '/administration/step/2';
previousRouteName: string = '/administration';
constructor(
private fb: FormBuilder,
@ -41,6 +44,7 @@ export class FormComponent implements OnInit {
private uuidService: UuidService,
private toastService: ToastService,
private pollService: PollService,
private router: Router,
public dateUtilities: DateUtilities,
private apiService: ApiService,
@Inject(DOCUMENT) private document: any
@ -312,4 +316,8 @@ export class FormComponent implements OnInit {
automaticSlug() {
this.poll.slug = this.pollService.makeSlug(this.poll);
}
goNextStep() {
this.router.navigate([this.nextRouteName]);
}
}

View File

@ -0,0 +1 @@
<p>step-five works!</p>

View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StepFiveComponent } from './step-five.component';
describe('StepFiveComponent', () => {
let component: StepFiveComponent;
let fixture: ComponentFixture<StepFiveComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [StepFiveComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StepFiveComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-step-five',
templateUrl: './step-five.component.html',
styleUrls: ['./step-five.component.scss'],
})
export class StepFiveComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}

View File

@ -0,0 +1 @@
<p>step-four works!</p>

View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StepFourComponent } from './step-four.component';
describe('StepFourComponent', () => {
let component: StepFourComponent;
let fixture: ComponentFixture<StepFourComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [StepFourComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StepFourComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-step-four',
templateUrl: './step-four.component.html',
styleUrls: ['./step-four.component.scss'],
})
export class StepFourComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}

View File

@ -1,3 +1,51 @@
<div class="step">
Nom de sondage
<section class="poll-title">
<span>
{{ 'creation.choose_title' | translate }}
</span>
<label class="hidden" for="title">Titre</label>
<input
#title
matInput
[placeholder]="'creation.choose_title_placeholder' | translate"
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>
</section>
<div class="poll-description">
<label for="descr">Description (optionnel)</label>
<span class="rich-text-toggle">
mode de saisie avancée
<i class="fa fa-text"></i><input type="checkbox" formControlName="richTextMode" />
</span>
<textarea
#description
matInput
id="descr"
placeholder="Description"
formControlName="description"
required
></textarea>
<div class="text-info">
300 caractères maximum
</div>
<button
mat-button
*ngIf="description.value"
matSuffix
mat-icon-button
aria-label="Clear"
(click)="description.value = ''"
>
<i class="fa fa-close"></i>
</button>
</div>
</div>

View File

@ -9,4 +9,6 @@ export class StepOneComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
updateSlug() {}
}

View File

@ -0,0 +1 @@
<p>step-three works!</p>

View File

@ -0,0 +1,24 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StepThreeComponent } from './step-three.component';
describe('StepThreeComponent', () => {
let component: StepThreeComponent;
let fixture: ComponentFixture<StepThreeComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [StepThreeComponent],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StepThreeComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,12 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-step-three',
templateUrl: './step-three.component.html',
styleUrls: ['./step-three.component.scss'],
})
export class StepThreeComponent implements OnInit {
constructor() {}
ngOnInit(): void {}
}