From 49f4b4c13b555e0498d7bc2c8770e446d2ec2968 Mon Sep 17 00:00:00 2001 From: tykayn Date: Sat, 10 Aug 2019 17:41:01 +0200 Subject: [PATCH] :zap: make pages components and nav --- src/app/app.component.html | 2 +- src/app/config/PollConfig.ts | 14 ++++++++- src/app/config/Routes.ts | 4 ++- .../form-container.component.ts | 17 ----------- src/app/pages/answers/answers.component.html | 15 ++++++++++ src/app/pages/answers/answers.component.scss | 0 .../pages/answers/answers.component.spec.ts | 25 ++++++++++++++++ src/app/pages/answers/answers.component.ts | 26 ++++++++++++++++ src/app/pages/base-page/base.component.html | 1 + src/app/pages/base-page/base.component.ts | 13 +++++++- src/app/pages/dates/dates.component.html | 1 + .../end-confirmation.component.html | 6 ++++ .../end-confirmation.component.scss | 0 .../end-confirmation.component.spec.ts | 25 ++++++++++++++++ .../end-confirmation.component.ts | 15 ++++++++++ src/app/pages/kind/kind.component.html | 1 + .../pages/pictures/pictures.component.html | 3 ++ .../pages/pictures/pictures.component.scss | 0 .../pages/pictures/pictures.component.spec.ts | 25 ++++++++++++++++ src/app/pages/pictures/pictures.component.ts | 19 ++++++++++++ src/app/pages/resume/resume.component.html | 7 +++++ src/app/pages/resume/resume.component.scss | 0 src/app/pages/resume/resume.component.spec.ts | 25 ++++++++++++++++ src/app/pages/resume/resume.component.ts | 19 ++++++++++++ .../visibility/visibility.component.html | 1 + .../ui/navigation/navigation.component.html | 25 ++++++++++++++++ src/app/ui/navigation/navigation.component.ts | 30 ++++++++++++++----- src/assets/_global_layout.scss | 4 +++ src/assets/variables.scss | 6 ++-- 29 files changed, 297 insertions(+), 32 deletions(-) create mode 100644 src/app/pages/answers/answers.component.html create mode 100644 src/app/pages/answers/answers.component.scss create mode 100644 src/app/pages/answers/answers.component.spec.ts create mode 100644 src/app/pages/answers/answers.component.ts create mode 100644 src/app/pages/end-confirmation/end-confirmation.component.html create mode 100644 src/app/pages/end-confirmation/end-confirmation.component.scss create mode 100644 src/app/pages/end-confirmation/end-confirmation.component.spec.ts create mode 100644 src/app/pages/end-confirmation/end-confirmation.component.ts create mode 100644 src/app/pages/pictures/pictures.component.html create mode 100644 src/app/pages/pictures/pictures.component.scss create mode 100644 src/app/pages/pictures/pictures.component.spec.ts create mode 100644 src/app/pages/pictures/pictures.component.ts create mode 100644 src/app/pages/resume/resume.component.html create mode 100644 src/app/pages/resume/resume.component.scss create mode 100644 src/app/pages/resume/resume.component.spec.ts create mode 100644 src/app/pages/resume/resume.component.ts diff --git a/src/app/app.component.html b/src/app/app.component.html index c7385bbb..58804dc6 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -12,6 +12,6 @@ Ceci est une démo - + diff --git a/src/app/config/PollConfig.ts b/src/app/config/PollConfig.ts index ef6aa1e2..232f380d 100644 --- a/src/app/config/PollConfig.ts +++ b/src/app/config/PollConfig.ts @@ -8,7 +8,7 @@ export interface DateOption { } /** - * configuration + * configuration of the poll, add new fields at will */ export class PollConfig { step = 0; @@ -16,9 +16,21 @@ export class PollConfig { pollType = 'classic'; title = ''; description = ''; + visibility = 'link_only'; // date specific poll allowSeveralHours = false; dateList: DateOption[] = []; answers: string[] = []; + addAnswer() { + this.answers.push(''); + } + + removeAnswer(answer: string) { + const indexFound = this.answers.indexOf(answer); + if (indexFound !== -1) { + this.answers.splice(indexFound); + } + } + } diff --git a/src/app/config/Routes.ts b/src/app/config/Routes.ts index 3e4e41d3..7e66c369 100644 --- a/src/app/config/Routes.ts +++ b/src/app/config/Routes.ts @@ -5,6 +5,7 @@ import {VisibilityComponent} from '../pages/visibility/visibility.component'; import {ResumeComponent} from '../pages/resume/resume.component'; import {PicturesComponent} from '../pages/pictures/pictures.component'; import {EndConfirmationComponent} from '../pages/end-confirmation/end-confirmation.component'; +import {AnswersComponent} from '../pages/answers/answers.component'; /** * each step in the form is a component @@ -15,7 +16,8 @@ export const Routes = {path: 'home', component: FormContainerComponent}, {path: 'step/date', component: DatesComponent}, {path: 'step/kind', component: KindComponent}, - {path: 'step/picture', component: PicturesComponent}, + {path: 'step/answers', component: AnswersComponent}, + {path: 'step/pictures', component: PicturesComponent}, {path: 'step/visibility', component: VisibilityComponent}, {path: 'step/recapitulatif', component: ResumeComponent}, {path: 'step/end', component: EndConfirmationComponent}, diff --git a/src/app/form-container/form-container.component.ts b/src/app/form-container/form-container.component.ts index 2aab4955..8ce3d487 100644 --- a/src/app/form-container/form-container.component.ts +++ b/src/app/form-container/form-container.component.ts @@ -24,22 +24,5 @@ export class FormContainerComponent implements OnInit { ngOnInit() { } - nextPage() { - if (this.checkValidity()) { - this.progressionStep++; - } else { - this.displayErrorMessage(); - } - } - - checkValidity() { - // TODO with form controls - return true; - } - - displayErrorMessage() { - // TODO - return true; - } } diff --git a/src/app/pages/answers/answers.component.html b/src/app/pages/answers/answers.component.html new file mode 100644 index 00000000..8082cfac --- /dev/null +++ b/src/app/pages/answers/answers.component.html @@ -0,0 +1,15 @@ +

+ Choisir les propositions +

+

+ vous pouvez utiliser la syntaxe markdown +

+
    +
  1. + + +
    2. +
+Voyons ce que ça donne diff --git a/src/app/pages/answers/answers.component.scss b/src/app/pages/answers/answers.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/pages/answers/answers.component.spec.ts b/src/app/pages/answers/answers.component.spec.ts new file mode 100644 index 00000000..25ce7b36 --- /dev/null +++ b/src/app/pages/answers/answers.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AnswersComponent } from './answers.component'; + +describe('AnswersComponent', () => { + let component: AnswersComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AnswersComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AnswersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/answers/answers.component.ts b/src/app/pages/answers/answers.component.ts new file mode 100644 index 00000000..aec85fb5 --- /dev/null +++ b/src/app/pages/answers/answers.component.ts @@ -0,0 +1,26 @@ +import {Component, OnInit} from '@angular/core'; +import {BaseComponent} from '../base-page/base.component'; +import {ConfigService} from '../../config.service'; + +@Component({ + selector: 'framadate-answers', + templateUrl: './answers.component.html', + styleUrls: ['./answers.component.scss'] +}) +export class AnswersComponent extends BaseComponent implements OnInit { + + constructor(config: ConfigService) { + super(config); + } + + // todo, manage validation of each page in a common way + ngOnInit() { + } + + // add a new answer on the press of ENTER in an input + addWhenEnterKey(event) { + if (event.keyCode === 13) { + this.config.addAnswer(); + } + } +} diff --git a/src/app/pages/base-page/base.component.html b/src/app/pages/base-page/base.component.html index d0ca5c75..e98349b4 100644 --- a/src/app/pages/base-page/base.component.html +++ b/src/app/pages/base-page/base.component.html @@ -1 +1,2 @@

Ce composant est celui de base pour les pages

+C'est parfait! diff --git a/src/app/pages/base-page/base.component.ts b/src/app/pages/base-page/base.component.ts index dc6c6907..32f97e97 100644 --- a/src/app/pages/base-page/base.component.ts +++ b/src/app/pages/base-page/base.component.ts @@ -11,10 +11,21 @@ import {ConfigService} from '../../config.service'; */ export class BaseComponent implements OnInit { - constructor(private config: ConfigService) { + constructor(protected config: ConfigService) { } ngOnInit() { } + + + checkValidity() { + // TODO with form controls + return true; + } + + displayErrorMessage() { + // TODO + return true; + } } diff --git a/src/app/pages/dates/dates.component.html b/src/app/pages/dates/dates.component.html index 2c6cbd17..72c0daf4 100644 --- a/src/app/pages/dates/dates.component.html +++ b/src/app/pages/dates/dates.component.html @@ -32,3 +32,4 @@ {{choice.text}} +C'est parfait! diff --git a/src/app/pages/end-confirmation/end-confirmation.component.html b/src/app/pages/end-confirmation/end-confirmation.component.html new file mode 100644 index 00000000..108fbddb --- /dev/null +++ b/src/app/pages/end-confirmation/end-confirmation.component.html @@ -0,0 +1,6 @@ +

+ Et c'est tout pour nous! +

+

Coté administrateur-ice-eux

+

Coté sondés

+

recevoir les liens par e-mail

diff --git a/src/app/pages/end-confirmation/end-confirmation.component.scss b/src/app/pages/end-confirmation/end-confirmation.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/pages/end-confirmation/end-confirmation.component.spec.ts b/src/app/pages/end-confirmation/end-confirmation.component.spec.ts new file mode 100644 index 00000000..eb5d31b9 --- /dev/null +++ b/src/app/pages/end-confirmation/end-confirmation.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EndConfirmationComponent } from './end-confirmation.component'; + +describe('EndConfirmationComponent', () => { + let component: EndConfirmationComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EndConfirmationComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EndConfirmationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/end-confirmation/end-confirmation.component.ts b/src/app/pages/end-confirmation/end-confirmation.component.ts new file mode 100644 index 00000000..c6a8febf --- /dev/null +++ b/src/app/pages/end-confirmation/end-confirmation.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'framadate-end-confirmation', + templateUrl: './end-confirmation.component.html', + styleUrls: ['./end-confirmation.component.scss'] +}) +export class EndConfirmationComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/pages/kind/kind.component.html b/src/app/pages/kind/kind.component.html index dcc95f98..8d1d6fd0 100644 --- a/src/app/pages/kind/kind.component.html +++ b/src/app/pages/kind/kind.component.html @@ -1,2 +1,3 @@

cette étape est en cours de développement.
S'inspirer de la page de FormContainer pour réaliser d'autres pages

+C'est parfait! diff --git a/src/app/pages/pictures/pictures.component.html b/src/app/pages/pictures/pictures.component.html new file mode 100644 index 00000000..712bbaa7 --- /dev/null +++ b/src/app/pages/pictures/pictures.component.html @@ -0,0 +1,3 @@ +

+ Images +

diff --git a/src/app/pages/pictures/pictures.component.scss b/src/app/pages/pictures/pictures.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/pages/pictures/pictures.component.spec.ts b/src/app/pages/pictures/pictures.component.spec.ts new file mode 100644 index 00000000..402073e1 --- /dev/null +++ b/src/app/pages/pictures/pictures.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PicturesComponent } from './pictures.component'; + +describe('PicturesComponent', () => { + let component: PicturesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PicturesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PicturesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/pictures/pictures.component.ts b/src/app/pages/pictures/pictures.component.ts new file mode 100644 index 00000000..aa4d8603 --- /dev/null +++ b/src/app/pages/pictures/pictures.component.ts @@ -0,0 +1,19 @@ +import {Component, OnInit} from '@angular/core'; +import {ConfigService} from '../../config.service'; +import {BaseComponent} from '../base-page/base.component'; + +@Component({ + selector: 'framadate-pictures', + templateUrl: './pictures.component.html', + styleUrls: ['./pictures.component.scss'] +}) +export class PicturesComponent extends BaseComponent implements OnInit { + + constructor(config: ConfigService) { + super(config); + } + + ngOnInit() { + } + +} diff --git a/src/app/pages/resume/resume.component.html b/src/app/pages/resume/resume.component.html new file mode 100644 index 00000000..c99efdd8 --- /dev/null +++ b/src/app/pages/resume/resume.component.html @@ -0,0 +1,7 @@ +

+ Résumé avant validation +

+
+ TODO +
+C'est parfait! diff --git a/src/app/pages/resume/resume.component.scss b/src/app/pages/resume/resume.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/pages/resume/resume.component.spec.ts b/src/app/pages/resume/resume.component.spec.ts new file mode 100644 index 00000000..8d4824de --- /dev/null +++ b/src/app/pages/resume/resume.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ResumeComponent } from './resume.component'; + +describe('ResumeComponent', () => { + let component: ResumeComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ResumeComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ResumeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/resume/resume.component.ts b/src/app/pages/resume/resume.component.ts new file mode 100644 index 00000000..b76f231d --- /dev/null +++ b/src/app/pages/resume/resume.component.ts @@ -0,0 +1,19 @@ +import {Component, OnInit} from '@angular/core'; +import {BaseComponent} from '../base-page/base.component'; +import {ConfigService} from '../../config.service'; + +@Component({ + selector: 'framadate-resume', + templateUrl: './resume.component.html', + styleUrls: ['./resume.component.scss'] +}) +export class ResumeComponent extends BaseComponent implements OnInit { + + constructor(config: ConfigService) { + super(config); + } + + ngOnInit() { + } + +} diff --git a/src/app/pages/visibility/visibility.component.html b/src/app/pages/visibility/visibility.component.html index a8447a60..eca674bd 100644 --- a/src/app/pages/visibility/visibility.component.html +++ b/src/app/pages/visibility/visibility.component.html @@ -11,3 +11,4 @@

Accès au sondage

+C'est parfait! diff --git a/src/app/ui/navigation/navigation.component.html b/src/app/ui/navigation/navigation.component.html index e994d8e7..dfc75807 100644 --- a/src/app/ui/navigation/navigation.component.html +++ b/src/app/ui/navigation/navigation.component.html @@ -5,6 +5,31 @@ [routerLink]="'/step/date'"> Aller aux dates + + Réponses + + + Visibilité + + + Base + + + Images + + + Résumé + diff --git a/src/app/ui/navigation/navigation.component.ts b/src/app/ui/navigation/navigation.component.ts index d61e2564..46501235 100644 --- a/src/app/ui/navigation/navigation.component.ts +++ b/src/app/ui/navigation/navigation.component.ts @@ -1,15 +1,29 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; +import {BaseComponent} from '../../pages/base-page/base.component'; +import {ConfigService} from '../../config.service'; @Component({ - selector: 'framadate-navigation', - templateUrl: './navigation.component.html', - styleUrls: ['./navigation.component.scss'] + selector: 'framadate-navigation', + templateUrl: './navigation.component.html', + styleUrls: ['./navigation.component.scss'] }) -export class NavigationComponent implements OnInit { +export class NavigationComponent extends BaseComponent implements OnInit { - constructor() { } + constructor(config: ConfigService) { + super(config); + } - ngOnInit() { - } + ngOnInit() { + } + nextPage() { + if (this.checkValidity()) { + if (this.config.step < this.config.stepMax) { + this.config.step++; + } + + } else { + this.displayErrorMessage(); + } + } } diff --git a/src/assets/_global_layout.scss b/src/assets/_global_layout.scss index 79dfb380..c0a0562a 100644 --- a/src/assets/_global_layout.scss +++ b/src/assets/_global_layout.scss @@ -3,6 +3,10 @@ select { @extend .funky-box; } +textarea { + border-left: 3px solid $main_color_strong; +} + .funky-box { background: $light; padding: 1em; diff --git a/src/assets/variables.scss b/src/assets/variables.scss index c8ac1b7d..9bff7463 100644 --- a/src/assets/variables.scss +++ b/src/assets/variables.scss @@ -1,7 +1,7 @@ $main_color: #fdffbf; -$main_color_strong: #ffa300; +$main_color_strong: #FFD52C; $second_color: cyan; $light: white; -$logo_color: violet; -$logo_color_2: green; +$logo_color: #000; +$logo_color_2: #8A9B51;