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

This commit is contained in:
Tykayn 2021-10-19 12:41:14 +02:00 committed by tykayn
parent 1d33d0787c
commit 303457afd6
16 changed files with 176 additions and 84 deletions

View File

@ -1,23 +1,10 @@
<mat-sidenav-container (backdropClick)="sidenav.toggle()"> <div id="big_container" [class]="themeClass">
<mat-sidenav #sidenav mode="side"> <div class="container">
<app-navigation></app-navigation> <app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header>
</mat-sidenav> <main>
<router-outlet></router-outlet>
<mat-sidenav-content> </main>
<div id="big_container" [class]="themeClass"> <app-footer></app-footer>
<div class="container"> <app-feedback></app-feedback>
<app-header [appTitle]="appTitle" [appLogo]="appLogo"></app-header> </div>
<main> </div>
<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>

View File

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

View File

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

View File

@ -15,6 +15,7 @@ import { StepTwoComponent } from './form/step-two/step-two.component';
import { StepThreeComponent } from './form/step-three/step-three.component'; import { StepThreeComponent } from './form/step-three/step-three.component';
import { StepFourComponent } from './form/step-four/step-four.component'; import { StepFourComponent } from './form/step-four/step-four.component';
import { StepFiveComponent } from './form/step-five/step-five.component'; import { StepFiveComponent } from './form/step-five/step-five.component';
import { DevMenuComponent } from './dev-menu/dev-menu.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -27,6 +28,7 @@ import { StepFiveComponent } from './form/step-five/step-five.component';
StepThreeComponent, StepThreeComponent,
StepFourComponent, StepFourComponent,
StepFiveComponent, StepFiveComponent,
DevMenuComponent,
], ],
imports: [ imports: [
AdministrationRoutingModule, AdministrationRoutingModule,

View File

@ -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>

View File

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

View File

@ -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 {}
}

View File

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

View File

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

View File

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

View File

@ -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--> <!-- choix spécialement pour les dates-->
<div class="dates-list"> <div class="dates-list">
<div class="title"> <div class="title">
<span class="count-dates"> <span class="count-dates">
{{ timeList.length }} {{ pollService.timeList.length }}
</span> </span>
<span class="count-dates-txt"> <span class="count-dates-txt">
{{ 'dates.count_time' | translate }} {{ 'dates.count_time' | translate }}
@ -12,13 +12,18 @@
</span> </span>
</div> </div>
<div class="actions"> <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> <i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.add_time' | translate }} {{ 'dates.add_time' | translate }}
</button> </button>
<button <button
(click)="removeAllTimes()" (click)="pollService.removeAllTimes()"
*ngIf="'false' === allowSeveralHours" *ngIf="'false' === pollService.allowSeveralHours"
class="btn btn--warning" class="btn btn--warning"
id="remove_time_button" id="remove_time_button"
> >
@ -26,8 +31,8 @@
Aucune plage horaire Aucune plage horaire
</button> </button>
<button <button
(click)="resetTimes()" (click)="pollService.resetTimes()"
*ngIf="'false' === allowSeveralHours" *ngIf="'false' === pollService.allowSeveralHours"
class="btn btn--warning" class="btn btn--warning"
id="reset_time_button" id="reset_time_button"
> >
@ -36,9 +41,9 @@
</button> </button>
</div> </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 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 }}"> <label for="timeChoices_{{ id }}">
<i class="fa fa-clock-o" aria-hidden="true"></i> <i class="fa fa-clock-o" aria-hidden="true"></i>
</label> </label>
@ -51,15 +56,15 @@
</div> </div>
<hr /> <hr />
<span class="count-dates title"> <span class="count-dates title">
{{ dateList.length }} {{ pollService.dateList.length }}
</span> </span>
<span> <span>
{{ 'dates.count_dates' | translate }} {{ 'dates.count_dates' | translate }}
</span> </span>
<button class="btn btn--primary" (click)="addChoice()"> <button class="btn btn--primary" (click)="pollService.addChoice()">
{{ 'dates.add' | translate }} {{ 'dates.add' | translate }}
</button> </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 <input
[(ngModel)]="choice.date_object" [(ngModel)]="choice.date_object"
name="dateChoices_{{ id }}" name="dateChoices_{{ id }}"
@ -67,13 +72,17 @@
useValueAsDate useValueAsDate
type="date" 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> <i class="fa fa-times" aria-hidden="true"></i>
</button> </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 }} {{ 'dates.add_time' | translate }}
</button> </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"> <div *ngFor="let timeItem of choice.timeList; index as idTime" class="time-choice">
<input <input
[(ngModel)]="timeItem.literal" [(ngModel)]="timeItem.literal"
@ -90,15 +99,15 @@
</div> </div>
<button <button
(click)="showDateInterval = !showDateInterval" (click)="pollService.showDateInterval = !pollService.showDateInterval"
[ngClass]="{ active: showDateInterval }" [ngClass]="{ active: pollService.showDateInterval }"
class="btn btn--primary" class="btn btn--primary"
id="toggle_interval_button" id="toggle_interval_button"
> >
<i class="fa fa-clock-o" aria-hidden="true"></i> <i class="fa fa-clock-o" aria-hidden="true"></i>
{{ 'dates.add_interval' | translate }} {{ 'dates.add_interval' | translate }}
</button> </button>
<section *ngIf="showDateInterval" class="date-interval form-row"> <section *ngIf="pollService.showDateInterval" class="date-interval form-row">
<h2>{{ 'dates.add_interval' | translate }}</h2> <h2>{{ 'dates.add_interval' | translate }}</h2>
<div class="columns"> <div class="columns">
<div class="column"> <div class="column">
@ -106,7 +115,12 @@
</div> </div>
<div class="column"> <div class="column">
<label for="start_interval" class="hidden">start</label> <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> </div>
<div class="columns"> <div class="columns">
@ -118,10 +132,24 @@
<input id="end_interval" formControlName="endDateInterval" type="date" /> <input id="end_interval" formControlName="endDateInterval" type="date" />
</div> </div>
</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> <i class="fa fa-plus" aria-hidden="true"></i>
{{ 'dates.interval_button' | translate }} {{ 'dates.interval_button' | translate }}
{{ intervalDays }} {{ pollService.intervalDays }}
{{ 'dates.interval_button_dates' | translate }} {{ 'dates.interval_button_dates' | translate }}
</button> </button>
</section> </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>

View File

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

View File

@ -6,8 +6,8 @@
<div class="kind-of-poll columns"> <div class="kind-of-poll columns">
<div class="column"> <div class="column">
<button <button
class="btn-block btn" class="button is-fullwidth"
[ngClass]="{ 'is-primary': pollService.form.controls.isAboutDate.value }" [ngClass]="{ 'is-selected is-primary': pollService.form.controls.isAboutDate.value }"
(click)="pollService.form.controls.isAboutDate.setValue(true)" (click)="pollService.form.controls.isAboutDate.setValue(true)"
> >
<i class="fa fa-calendar"></i> <i class="fa fa-calendar"></i>
@ -16,8 +16,8 @@
</div> </div>
<div class="column"> <div class="column">
<button <button
class="btn-block btn btn-default" class="button is-fullwidth"
[ngClass]="{ 'is-primary': !pollService.form.controls.isAboutDate.value }" [ngClass]="{ 'is-selected is-primary': !pollService.form.controls.isAboutDate.value }"
(click)="pollService.form.controls.isAboutDate.setValue(false)" (click)="pollService.form.controls.isAboutDate.setValue(false)"
> >
<i class="fa fa-list-ul"></i> <i class="fa fa-list-ul"></i>
@ -25,4 +25,17 @@
</button> </button>
</div> </div>
</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> </div>

View File

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

View File

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