⚡ make pages components and nav

src/app/app.component.html

@@ -12,6 +12,6 @@
 		Ceci est une démo
 	</i>
 </div>
-<router-outlet></router-outlet>
 <framadate-navigation></framadate-navigation>
+<router-outlet></router-outlet>
 <framadate-debugger></framadate-debugger>

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);
+        }
+    }
+
 }

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},

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;
-    }
 }

src/app/pages/answers/answers.component.html

@@ -0,0 +1,15 @@
+<h1 i18n>
+	Choisir les propositions
+</h1>
+<p class="subtitle" i18n>
+	vous pouvez utiliser la syntaxe markdown
+</p>
+<ol
+			*ngFor="let answer of config.answers"
+			class="anwser">
+	<li>
+		<input type="text" [(ngModel)]="answer" (keydown)="addWhenEnterKey($event)">
+		<button (click)="config.removeAnswer(answer)">X</button>
+	</li>
+</ol>
+<a [routerLink]="'/step/recapitulatif'" class="btn btn-block">Voyons ce que ça donne</a>

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<AnswersComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AnswersComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AnswersComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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();
+        }
+    }
+}

src/app/pages/base-page/base.component.html

@@ -1 +1,2 @@
 <h1>Ce composant est celui de base pour les pages</h1>
+<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

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;
+    }
 }

src/app/pages/dates/dates.component.html

@@ -32,3 +32,4 @@
 		{{choice.text}}
 	</div>
 </div>
+<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

src/app/pages/end-confirmation/end-confirmation.component.html

@@ -0,0 +1,6 @@
+<h1 i18n>
+	Et c'est tout pour nous!
+</h1>
+<h2 i18n>Coté administrateur-ice-eux</h2>
+<h2 i18n>Coté sondés</h2>
+<h2 i18n>recevoir les liens par e-mail</h2>

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<EndConfirmationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EndConfirmationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EndConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+  }
+
+}

src/app/pages/kind/kind.component.html

@@ -1,2 +1,3 @@
 <p>cette étape est en cours de développement. <br> S'inspirer de la page de FormContainer pour réaliser d'autres pages
 </p>
+<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

src/app/pages/pictures/pictures.component.html

@@ -0,0 +1,3 @@
+<h1 i18n>
+	Images
+</h1>

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<PicturesComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PicturesComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PicturesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+    }
+
+}

src/app/pages/resume/resume.component.html

@@ -0,0 +1,7 @@
+<h1 i18n>
+	Résumé avant validation
+</h1>
+<section>
+	TODO
+</section>
+<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

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<ResumeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ResumeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ResumeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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() {
+    }
+
+}

src/app/pages/visibility/visibility.component.html

@@ -11,3 +11,4 @@
 <h1 i18n>
 	Accès au sondage
 </h1>
+<a [routerLink]="'/step/end'" class="btn btn-block">C'est parfait!</a>

src/app/ui/navigation/navigation.component.html

@@ -5,6 +5,31 @@
 				[routerLink]="'/step/date'">
 		Aller aux dates
 	</a>
+	<a
+				class="btn btn-primary"
+				[routerLink]="'/step/answers'">
+		Réponses
+	</a>
+	<a
+				class="btn btn-primary"
+				[routerLink]="'/step/visibility'">
+		Visibilité
+	</a>
+	<a
+				class="btn btn-primary"
+				[routerLink]="'/step/answers'">
+		Base
+	</a>
+	<a
+				class="btn btn-primary"
+				[routerLink]="'/step/pictures'">
+		Images
+	</a>
+	<a
+				class="btn btn-primary"
+				[routerLink]="'/step/resume'">
+		Résumé
+	</a>
 	<a
 				class="btn btn-primary"
 				[routerLink]="'/step/kind'">

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();
+        }
+    }
 }

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;

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;