Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/app/app.component.html
View File

@ -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
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 { 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
View File

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

2
src/app/features/administration/administration.module.ts
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 { 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 Normal file
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>

0
src/app/features/administration/dev-menu/dev-menu.component.scss Normal file
View File

24
src/app/features/administration/dev-menu/dev-menu.component.spec.ts Normal file
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();
});
});

14
src/app/features/administration/dev-menu/dev-menu.component.ts Normal file
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 {}
}

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

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

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

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

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

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

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

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