Browse Source

put poll actions in pollService, nav on step one two three

develop
Tykayn 8 months ago committed by tykayn
parent
commit
303457afd6
  1. 33
      src/app/app.component.html
  2. 10
      src/app/core/services/poll.service.ts
  3. 1
      src/app/features/administration/administration-routing.module.ts
  4. 2
      src/app/features/administration/administration.module.ts
  5. 14
      src/app/features/administration/dev-menu/dev-menu.component.html
  6. 0
      src/app/features/administration/dev-menu/dev-menu.component.scss
  7. 24
      src/app/features/administration/dev-menu/dev-menu.component.spec.ts
  8. 14
      src/app/features/administration/dev-menu/dev-menu.component.ts
  9. 15
      src/app/features/administration/form/form.component.html
  10. 25
      src/app/features/administration/form/step-one/step-one.component.html
  11. 7
      src/app/features/administration/form/step-one/step-one.component.ts
  12. 70
      src/app/features/administration/form/step-three/step-three.component.html
  13. 4
      src/app/features/administration/form/step-three/step-three.component.ts
  14. 21
      src/app/features/administration/form/step-two/step-two.component.html
  15. 16
      src/styles/dev-utilities/_debug.scss
  16. 4
      src/styles/partials/_form-controls.scss

33
src/app/app.component.html

@ -1,23 +1,10 @@
<mat-sidenav-container (backdropClick)="sidenav.toggle()">
<mat-sidenav #sidenav mode="side">
<app-navigation></app-navigation>
</mat-sidenav>
<mat-sidenav-content>
<div id="big_container" [class]="themeClass">
<div class="container">
<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
<main>
<router-outlet></router-outlet>
<div *ngIf="devModeEnabled">
<br />
<mat-slide-toggle (change)="sidenav.toggle()" label="dev menu"> </mat-slide-toggle> menu
développeur
</div>
</main>
<app-footer></app-footer>
<app-feedback></app-feedback>
</div>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<div id="big_container" [class]="themeClass">
<div class="container">
<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
<main>
<router-outlet></router-outlet>
</main>
<app-footer></app-footer>
<app-feedback></app-feedback>
</div>
</div>

10
src/app/core/services/poll.service.ts

@ -1,4 +1,4 @@
import { ChangeDetectorRef, Inject, Injectable } from '@angular/core';
import { Inject, Injectable } from '@angular/core';
import { ActivatedRoute, ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
@ -120,6 +120,11 @@ export class PollService implements Resolve<Poll> {
return form;
}
public updateSlug(): void {
console.log('this.form.value', this.form.value);
this.form.patchValue({ custom_url: this.makeSlug(this.form) });
}
/**
* auto fetch a poll when route is looking for one in the administration pattern
* @param route
@ -334,7 +339,6 @@ export class PollService implements Resolve<Poll> {
initFormDefault(showDemoValues = true): void {
this.form = this.createFormGroup();
console.log('this.form ', this.form);
this.setDefaultDatesForInterval();
if (showDemoValues) {
@ -363,7 +367,6 @@ export class PollService implements Resolve<Poll> {
});
}
this.choices.push(newControlGroup);
console.log('this.choices.length', this.choices.length);
this.focusOnChoice(this.choices.length - 1);
}
@ -406,7 +409,6 @@ export class PollService implements Resolve<Poll> {
const pollUrl: Subscription = await this.apiService.createPoll(this._poll.getValue());
// TODO: Maybe handle the url to update currentPoll according to backend response
if (pollUrl) {
console.log('pollUrl', pollUrl);
this.toastService.display('Le sondage a été enregistré.');
} else {
this.toastService.display('Le sondage n’a été correctement enregistré, veuillez ré-essayer.');

1
src/app/features/administration/administration-routing.module.ts

@ -12,6 +12,7 @@ const routes: Routes = [
{
path: '',
component: AdministrationComponent,
redirectTo: 'step/1',
},
{
path: 'step',

2
src/app/features/administration/administration.module.ts

@ -15,6 +15,7 @@ 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 { DevMenuComponent } from './dev-menu/dev-menu.component';
@NgModule({
declarations: [
@ -27,6 +28,7 @@ import { StepFiveComponent } from './form/step-five/step-five.component';
StepThreeComponent,
StepFourComponent,
StepFiveComponent,
DevMenuComponent,
],
imports: [
AdministrationRoutingModule,

14
src/app/features/administration/dev-menu/dev-menu.component.html

@ -0,0 +1,14 @@
<mat-sidenav-container (backdropClick)="sidenav.toggle()">
<mat-sidenav #sidenav mode="side">
<app-navigation></app-navigation>
</mat-sidenav>
<mat-sidenav-content> </mat-sidenav-content>
<hr />
<div *ngIf="devModeEnabled">
<br />
<mat-slide-toggle (change)="sidenav.toggle()" label="dev menu"></mat-slide-toggle>
menu développeur
</div>
</mat-sidenav-container>

0
src/app/features/administration/dev-menu/dev-menu.component.scss

24
src/app/features/administration/dev-menu/dev-menu.component.spec.ts

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

14
src/app/features/administration/dev-menu/dev-menu.component.ts

@ -0,0 +1,14 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dev-menu',
templateUrl: './dev-menu.component.html',
styleUrls: ['./dev-menu.component.scss'],
})
export class DevMenuComponent implements OnInit {
devModeEnabled: boolean = false;
constructor() {}
ngOnInit(): void {}
}

15
src/app/features/administration/form/form.component.html

@ -12,21 +12,10 @@
</section>
<footer>
<div class="columns">
<div class="column">
<button
class="button is-large is-secondary"
[routerLink]="pollService.previousRouteName"
*ngIf="pollService.step_current != 1"
>
précédent
</button>
</div>
<div class="column"></div>
<div class="column">
<!-- [disabled]="form.invalid"-->
<button
class="button is-primary is-large is-pulled-right"
[routerLink]="[pollService.nextRouteName, { from: route }]"
>
<button class="button is-primary is-fullwidth" [routerLink]="['administration/step/2']">
suivant
</button>
</div>

25
src/app/features/administration/form/step-one/step-one.component.html

@ -1,5 +1,5 @@
<div class="step">
<form [formGroup]="form">
<form [formGroup]="pollService.form">
<section class="poll-title">
<h2 class="title is-2">
{{ 'creation.choose_title' | translate }}
@ -16,7 +16,8 @@
placeholder="Quel resto ce soir ?"
id="title"
autofocus="autofocus"
(change)="updateSlug()"
(keyup)="pollService.updateSlug()"
(blur)="pollService.updateSlug()"
required
/>
</div>
@ -43,8 +44,11 @@
<mat-checkbox formControlName="richTextMode" id="richTextMode"></mat-checkbox>
</div>
<div class="rich-toolbar" *ngIf="pollService.form.value.richTextMode">
richTextMode activé
</div>
<textarea
class="ui-inputtextarea"
class="ui-inputtextarea is-fullwidth is-block"
#description
matInput
id="descr"
@ -52,6 +56,7 @@
placeholder="Description"
formControlName="description"
required
maxlength="300"
></textarea>
<div class="text-info">
300 caractères maximum
@ -71,5 +76,19 @@
</div>
</div>
</div>
slug: {{ pollService.form.value.custom_url }}
</form>
<div class="columns">
<div class="column">
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
précédent
</button>
</div>
<div class="column">
<!-- [disabled]="form.invalid"-->
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
suivant
</button>
</div>
</div>
</div>

7
src/app/features/administration/form/step-one/step-one.component.ts

@ -8,7 +8,7 @@ import { PollService } from '../../../../core/services/poll.service';
styleUrls: ['./step-one.component.scss'],
})
export class StepOneComponent implements OnInit {
constructor(private pollService: PollService) {}
constructor(public pollService: PollService) {}
@Input()
step_max: any;
@ -16,9 +16,4 @@ export class StepOneComponent implements OnInit {
form: FormGroup;
ngOnInit(): void {}
public updateSlug(): void {
const newValueFormatted = 'TODO';
this.form.patchValue({ slug: this.pollService.makeSlug(this.form.value['custom_url']) });
}
}

70
src/app/features/administration/form/step-three/step-three.component.html

@ -1,10 +1,10 @@
<app-stepper [step_current]="3" [step_max]="step_max"></app-stepper>
<app-stepper [step_current]="3" [step_max]="5"></app-stepper>
<!-- choix spécialement pour les dates-->
<div class="dates-list">
<div class="title">
<span class="count-dates">
{{ timeList.length }}
{{ pollService.timeList.length }}
</span>
<span class="count-dates-txt">
{{ 'dates.count_time' | translate }}
@ -12,13 +12,18 @@
</span>
</div>
<div class="actions">
<button (click)="addTime()" *ngIf="'false' === allowSeveralHours" class="btn btn--primary" id="add_time_button">
<button
(click)="pollService.addTime()"
*ngIf="'false' === pollService.allowSeveralHours"
class="btn btn--primary"
id="add_time_button"
>
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }}
</button>
<button
(click)="removeAllTimes()"
*ngIf="'false' === allowSeveralHours"
(click)="pollService.removeAllTimes()"
*ngIf="'false' === pollService.allowSeveralHours"
class="btn btn--warning"
id="remove_time_button"
>
@ -26,8 +31,8 @@
Aucune plage horaire
</button>
<button
(click)="resetTimes()"
*ngIf="'false' === allowSeveralHours"
(click)="pollService.resetTimes()"
*ngIf="'false' === pollService.allowSeveralHours"
class="btn btn--warning"
id="reset_time_button"
>
@ -36,9 +41,9 @@
</button>
</div>
<div *ngIf="'false' === allowSeveralHours" class="identical-dates">
<div *ngIf="'false' === pollService.allowSeveralHours" class="identical-dates">
<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<div *ngFor="let time of timeList; index as id" class="time-choice" cdkDrag>
<div *ngFor="let time of pollService.timeList; index as id" class="time-choice" cdkDrag>
<label for="timeChoices_{{ id }}">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</label>
@ -51,15 +56,15 @@
</div>
<hr />
<span class="count-dates title">
{{ dateList.length }}
{{ pollService.dateList.length }}
</span>
<span>
{{ 'dates.count_dates' | translate }}
</span>
<button class="btn btn--primary" (click)="addChoice()">
<button class="btn btn--primary" (click)="pollService.addChoice()">
{{ 'dates.add' | translate }}
</button>
<div *ngFor="let choice of dateList; index as id" class="date-choice">
<div *ngFor="let choice of pollService.dateList; index as id" class="date-choice">
<input
[(ngModel)]="choice.date_object"
name="dateChoices_{{ id }}"
@ -67,13 +72,17 @@
useValueAsDate
type="date"
/>
<button (click)="dateList.splice(id, 1)" class="btn btn-warning">
<button (click)="pollService.dateList.splice(id, 1)" class="btn btn-warning">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
<button (click)="addTimeToDate(choice, id)" *ngIf="'true' === allowSeveralHours" class="btn btn--primary">
<button
(click)="pollService.addTimeToDate(choice, id)"
*ngIf="'true' === pollService.allowSeveralHours"
class="btn btn--primary"
>
{{ 'dates.add_time' | translate }}
</button>
<div *ngIf="'true' === allowSeveralHours" class="several-times">
<div *ngIf="'true' === pollService.allowSeveralHours" class="several-times">
<div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
<input
[(ngModel)]="timeItem.literal"
@ -90,15 +99,15 @@
</div>
<button
(click)="showDateInterval = !showDateInterval"
[ngClass]="{ active: showDateInterval }"
(click)="pollService.showDateInterval = !pollService.showDateInterval"
[ngClass]="{ active: pollService.showDateInterval }"
class="btn btn--primary"
id="toggle_interval_button"
>
<i class="fa fa-clock-o" aria-hidden="true"></i>
{{ 'dates.add_interval' | translate }}
</button>
<section *ngIf="showDateInterval" class="date-interval form-row">
<section *ngIf="pollService.showDateInterval" class="date-interval form-row">
<h2>{{ 'dates.add_interval' | translate }}</h2>
<div class="columns">
<div class="column">
@ -106,7 +115,12 @@
</div>
<div class="column">
<label for="start_interval" class="hidden">start</label>
<input id="start_interval" (change)="countDays()" formControlName="startDateInterval" type="date" />
<input
id="start_interval"
(change)="pollService.countDays()"
formControlName="startDateInterval"
type="date"
/>
</div>
</div>
<div class="columns">
@ -118,10 +132,24 @@
<input id="end_interval" formControlName="endDateInterval" type="date" />
</div>
</div>
<button (click)="addIntervalOfDates()" class="btn btn-block btn--primary">
<button (click)="pollService.addIntervalOfDates()" class="btn btn-block btn--primary">
<i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }}
{{ intervalDays }}
{{ pollService.intervalDays }}
{{ 'dates.interval_button_dates' | translate }}
</button>
</section>
<div class="columns">
<div class="column">
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/2']">
précédent
</button>
</div>
<div class="column">
<!-- [disabled]="form.invalid"-->
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/4']">
suivant
</button>
</div>
</div>

4
src/app/features/administration/form/step-three/step-three.component.ts

@ -1,4 +1,5 @@
import { Component, Input, OnInit } from '@angular/core';
import { PollService } from '../../../../core/services/poll.service';
@Component({
selector: 'app-step-three',
@ -10,7 +11,8 @@ export class StepThreeComponent implements OnInit {
step_max: any;
@Input()
form: any;
constructor() {}
constructor(public pollService: PollService) {}
ngOnInit(): void {}
}

21
src/app/features/administration/form/step-two/step-two.component.html

@ -6,8 +6,8 @@
<div class="kind-of-poll columns">
<div class="column">
<button
class="btn-block btn"
[ngClass]="{ 'is-primary': pollService.form.controls.isAboutDate.value }"
class="button is-fullwidth"
[ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
(click)="pollService.form.controls.isAboutDate.setValue(true)"
>
<i class="fa fa-calendar"></i>
@ -16,8 +16,8 @@
</div>
<div class="column">
<button
class="btn-block btn btn-default"
[ngClass]="{ 'is-primary': !pollService.form.controls.isAboutDate.value }"
class="button is-fullwidth"
[ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
(click)="pollService.form.controls.isAboutDate.setValue(false)"
>
<i class="fa fa-list-ul"></i>
@ -25,4 +25,17 @@
</button>
</div>
</div>
<div class="columns">
<div class="column">
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']">
précédent
</button>
</div>
<div class="column">
<!-- [disabled]="form.invalid"-->
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/3']">
suivant
</button>
</div>
</div>
</div>

16
src/styles/dev-utilities/_debug.scss

@ -19,14 +19,14 @@ label {
cursor: pointer;
}
&:not([for]) {
color: $dusty-orange;
&:before {
content: "### debug: ce label n'a pas d'attribut for, c'est mal. ### ";
color: $violet;
}
}
//&:not([for]) {
// color: $dusty-orange;
//
// &:before {
// content: "### debug: ce label n'a pas d'attribut for, c'est mal. ### ";
// color: $violet;
// }
//}
}
input {

4
src/styles/partials/_form-controls.scss

@ -5,11 +5,13 @@ textarea {
@extend .input;
padding: calc(0.5em - 1px);
border-color: $border-color !important;
width: 100%;
max-width: 100%;
}
textarea {
min-height: 3em;
width: 100%;
display: block;
}

Loading…
Cancel
Save