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

make common app-nav-steps component

Browse Source
This commit is contained in:
Tykayn 2021-12-02 15:52:08 +01:00 committed by tykayn
parent 1307b9f1a3
commit 0cb295cce0
16 changed files with 130 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,7 @@ import { OptionLinkComponent } from './form/option-link/option-link.component';
import { TextListComponent } from './form/text-list/text-list.component'; import { TextListComponent } from './form/text-list/text-list.component';
import { HoursComponent } from './form/hours/hours.component'; import { HoursComponent } from './form/hours/hours.component';
import { ActionsMenuComponent } from './actions-menu/actions-menu.component'; import { ActionsMenuComponent } from './actions-menu/actions-menu.component';
import { NavStepsComponent } from './nav-steps/nav-steps.component';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -65,6 +66,7 @@ import { ActionsMenuComponent } from './actions-menu/actions-menu.component';
TextListComponent, TextListComponent,
HoursComponent, HoursComponent,
ActionsMenuComponent, ActionsMenuComponent,
NavStepsComponent,
], ],
imports: [ imports: [
AdministrationRoutingModule, AdministrationRoutingModule,

23
src/app/features/administration/form/steps/step-five/step-five.component.html
View File

@ -3,23 +3,18 @@
<section class="supplement"> <section class="supplement">
<app-stepper [step_current]="5" [step_max]="pollService.step_max"></app-stepper> <app-stepper [step_current]="5" [step_max]="pollService.step_max"></app-stepper>
<app-errors-list [form]="pollService.form"></app-errors-list> <app-errors-list [form]="pollService.form"></app-errors-list>
<fieldset class="advanced-config"> <div class="advanced-config">
<fieldset class="complete well" *ngIf="environment.advanced_options_display"> <h2>
Configuration avancée
</h2>
<div class="complete" *ngIf="environment.advanced_options_display">
<app-advanced-config [form]="pollService.form"></app-advanced-config> <app-advanced-config [form]="pollService.form"></app-advanced-config>
</fieldset>
</fieldset>
<div class="columns">
<div class="column">
<button class="button is-default is-fullwidth" [routerLink]="['/administration/step/4']">
Précédent
</button>
</div>
<div class="column">
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/6']">
Suivant
</button>
</div> </div>
</div> </div>
<app-nav-steps
[next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1"
></app-nav-steps>
</section> </section>
</div> </div>
</div> </div>

16
src/app/features/administration/form/steps/step-four/step-four.component.html
View File

@ -120,16 +120,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="columns"> <app-nav-steps
<div class="column"> [next_step_number]="pollService.step_current + 1"
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/3']"> [previous_step_number]="pollService.step_current - 1"
Précédent ></app-nav-steps>
</button>
</div>
<div class="column">
<button class="btn is-primary is-fullwidth" [routerLink]="['/administration/step/5']">
Suivant
</button>
</div>
</div>
</div> </div>

17
src/app/features/administration/form/steps/step-one/step-one.component.html
View File

@ -73,14 +73,11 @@
></button> ></button>
</ng-template> </ng-template>
</p-confirmDialog> </p-confirmDialog>
<div class="bottom-step-buttons">
<div class="columns"> <app-nav-steps
<div class="column"></div> [display_previous_button]="false"
<div class="column"> [display_next_button]="true"
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/2']"> [next_step_number]="pollService.step_current + 1"
Suivant [previous_step_number]="pollService.step_current - 1"
</button> ></app-nav-steps>
</div>
</div>
</div>
</div> </div>

22
src/app/features/administration/form/steps/step-seven/step-seven.component.html
View File

@ -1,4 +1,4 @@
<div class="step-container min-height step-resume"> <div class="step min-height step-resume">
<app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper> <app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
<div class="columns content"> <div class="columns content">
<div class="column"> <div class="column">
@ -80,20 +80,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="columns"> <app-nav-steps
<div class="column"> [next_step_number]="pollService.step_current + 1"
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/6']"> [previous_step_number]="pollService.step_current - 1"
précédent [is_finish_step]="true"
</button> [endAction]="createPoll"
</div> ></app-nav-steps>
<div class="column">
<button class="button is-finish is-fullwidth" (click)="createPoll()">
<!-- [disabled]="!pollService.form.valid"-->
<i class="fa fa-save"></i>
Enregistrer le sondage
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

18
src/app/features/administration/form/steps/step-six/step-six.component.html
View File

@ -1,4 +1,4 @@
<div class="step-container min-height"> <div class="step min-height">
<app-stepper [step_current]="6" [step_max]="pollService.step_max"></app-stepper> <app-stepper [step_current]="6" [step_max]="pollService.step_max"></app-stepper>
<div class="min-height"> <div class="min-height">
<form action="#" [formGroup]="pollService.form"> <form action="#" [formGroup]="pollService.form">
@ -18,16 +18,8 @@
<input class="input" type="text" id="email" formControlName="creatorEmail" /> <input class="input" type="text" id="email" formControlName="creatorEmail" />
</form> </form>
</div> </div>
<div class="columns"> <app-nav-steps
<div class="column"> [next_step_number]="pollService.step_current + 1"
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/5']"> [previous_step_number]="pollService.step_current - 1"
Précédent ></app-nav-steps>
</button>
</div>
<div class="column">
<button class="btn is-primary is-fullwidth" [routerLink]="['/administration/step/7']">
Suivant
</button>
</div>
</div>
</div> </div>

17
src/app/features/administration/form/steps/step-three/step-three.component.html
View File

@ -35,16 +35,7 @@
></app-day-list> ></app-day-list>
</div> </div>
</div> </div>
<div class="columns"> <app-nav-steps
<div class="column"> [next_step_number]="pollService.step_current + 1"
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/2']"> [previous_step_number]="pollService.step_current - 1"
précédent ></app-nav-steps>
</button>
</div>
<div class="column">
<!-- [disabled]="form.invalid"-->
<button class="button is-primary is-fullwidth" [routerLink]="['/administration/step/4']">
suivant
</button>
</div>
</div>

19
src/app/features/administration/form/steps/step-two/step-two.component.html
View File

@ -41,20 +41,9 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bottom-step-buttons"> <app-nav-steps
<div class="columns"> [next_step_number]="pollService.step_current + 1"
<div class="column"> [previous_step_number]="pollService.step_current - 1"
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/1']"> ></app-nav-steps>
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>
</form> </form>
</div> </div>

30
src/app/features/administration/nav-steps/nav-steps.component.html Normal file
View File

@ -0,0 +1,30 @@
<div class="bottom-step-buttons">
<div class="columns">
<div class="column">
<button
*ngIf="display_previous_button"
class="button is-secondary is-fullwidth"
[routerLink]="['/administration/step/' + previous_step_number]"
>
Précédent
</button>
</div>
<div class="column">
<button
*ngIf="display_next_button"
class="button is-fullwidth"
[ngClass]="{ 'is-finish': is_finish_step, 'is-primary': !is_finish_step }"
[routerLink]="['/administration/step/' + next_step_number]"
(click)="is_finish_step ? runEndAction() : null"
>
<span *ngIf="is_finish_step">
<i class="fa fa-save"></i>
Enregistrer le sondage
</span>
<span *ngIf="!is_finish_step">
Suivant
</span>
</button>
</div>
</div>
</div>

0
src/app/features/administration/nav-steps/nav-steps.component.scss Normal file
View File

24
src/app/features/administration/nav-steps/nav-steps.component.spec.ts Normal file
View File

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

29
src/app/features/administration/nav-steps/nav-steps.component.ts Normal file
View File

@ -0,0 +1,29 @@
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-nav-steps',
templateUrl: './nav-steps.component.html',
styleUrls: ['./nav-steps.component.scss'],
})
export class NavStepsComponent implements OnInit {
@Input()
display_next_button = true;
@Input()
previous_step_number = 1;
@Input()
next_step_number = 1;
@Input()
display_previous_button = true;
@Input()
is_finish_step = false;
@Input()
endAction: Function;
constructor() {}
ngOnInit(): void {}
runEndAction() {
return this.endAction();
}
}

10
src/app/features/administration/stepper/stepper.component.html
View File

@ -62,18 +62,10 @@
<h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3> <h3 class="step-counter-text">Étape {{ step_current }} sur {{ step_max }}</h3>
</div> </div>
<div class="column is-narrow has-text-right"> <div class="column is-narrow has-text-right">
<p-button class="cancel-button" (click)="showCancelDialog()"> <a class="cancel-button" (click)="showCancelDialog()"> Annuler <i class="fa fa-times"></i> </a>
Annuler <i class="fa fa-times"></i>
</p-button>
</div> </div>
</div> </div>
</div> </div>
<p-confirmDialog
[style]="{ width: '50vw' }"
key="positionDialog"
[baseZIndex]="10000"
rejectButtonStyleClass="p-button-outlined"
></p-confirmDialog>
<div class="step-bar-container" style="width: 100%;"> <div class="step-bar-container" style="width: 100%;">
<div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div> <div class="step-bar-progress" [ngStyle]="{ width: (step_current / step_max) * 100 + '%' }"></div>
</div> </div>

2
src/app/features/administration/stepper/stepper.component.ts
View File

@ -30,6 +30,8 @@ export class StepperComponent {
showCancelDialog() { showCancelDialog() {
this.confirmationService.confirm({ this.confirmationService.confirm({
header: 'Quitter ?', header: 'Quitter ?',
acceptLabel: 'Quitter',
rejectLabel: 'Rester',
message: 'Souhaitez-vous vraiment quitter le sondage ? Toutes les informations seront effacées.', message: 'Souhaitez-vous vraiment quitter le sondage ? Toutes les informations seront effacées.',
accept: () => this.goToHome(), accept: () => this.goToHome(),
reject: () => console.log('rejected'), reject: () => console.log('rejected'),

2
src/environments/environment.prod.ts
View File

@ -15,7 +15,7 @@ const apiV1 = {
}; };
export const environment = { export const environment = {
advanced_options_display: false, advanced_options_display: true,
appLogo: 'assets/img/logo.png', appLogo: 'assets/img/logo.png',
appTitle: 'FramaDate', appTitle: 'FramaDate',
appVersion: '2.2.1', appVersion: '2.2.1',

7
src/styles/partials/_forms.scss
View File

@ -297,14 +297,9 @@ mat-checkbox {
} }
.advanced-config { .advanced-config {
.box {
background: $light;
border: 3px solid $primary-color;
}
.work-in-progress { .work-in-progress {
padding: 1em 2em; padding: 1em 2em;
background: $border-color; border-left: 3px solid $warning-dark;
color: $light; color: $light;
} }
} }