Ajout d'un stepper pour gérer les différentes étapes de l'assignation

develop
Yanaël GRETTE 4 years ago
parent f42748a5f9
commit 11d2676efd
  1. 16
      src/app/referents/assignation-referent/assignation-referent.component.html
  2. 6
      src/app/shared/angular-material/angular-material.module.ts
  3. 2
      src/app/shared/nav-menu/nav-menu-assistante/nav-menu-assistante.component.html

@ -1,2 +1,18 @@
<app-nav-menu></app-nav-menu> <app-nav-menu></app-nav-menu>
<h1>Assignation référent</h1> <h1>Assignation référent</h1>
<mat-horizontal-stepper linear #stepper>
<mat-step label="Choix du référent" [completed]="true">
<button mat-button matStepperNext>Suivant</button>
</mat-step>
<mat-step label="Choix des collaborateurs" [completed]="false">
<button mat-button matStepperPrevious>Retour</button>
<button mat-button matStepperNext>Suivant</button>
</mat-step>
<mat-step label="Confirmation">
<button mat-button matStepperPrevious>Retour</button>
<button mat-button >Valider</button>
</mat-step>
</mat-horizontal-stepper>

@ -16,7 +16,7 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
import {MatNativeDateModule} from '@angular/material/core'; import {MatNativeDateModule} from '@angular/material/core';
import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatSelectModule} from '@angular/material/select'; import {MatSelectModule} from '@angular/material/select';
import {MatStepperModule} from '@angular/material/stepper';
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker'; import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
@ -33,7 +33,7 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
MatTabsModule, MatFormFieldModule, MatTabsModule, MatFormFieldModule,
NgxMatDatetimePickerModule, MatDatepickerModule, NgxMatDatetimePickerModule, MatDatepickerModule,
NgxMatNativeDateModule, MatNativeDateModule, NgxMatNativeDateModule, MatNativeDateModule,
MatCheckboxModule, MatSelectModule MatCheckboxModule, MatSelectModule, MatStepperModule
], ],
exports : [MatCardModule, exports : [MatCardModule,
MatButtonModule, MatMenuModule, MatButtonModule, MatMenuModule,
@ -43,7 +43,7 @@ import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateMod
MatTabsModule, MatFormFieldModule, MatTabsModule, MatFormFieldModule,
NgxMatDatetimePickerModule, MatDatepickerModule, NgxMatDatetimePickerModule, MatDatepickerModule,
NgxMatNativeDateModule, MatNativeDateModule, NgxMatNativeDateModule, MatNativeDateModule,
MatCheckboxModule, MatSelectModule MatCheckboxModule, MatSelectModule, MatStepperModule
] ]
}) })
export class MaterialModule {} export class MaterialModule {}

@ -8,7 +8,7 @@
</mat-menu> </mat-menu>
<button mat-button [matMenuTriggerFor]="menuReferents"> <button mat-button [matMenuTriggerFor]="menuReferents">
<span>Référent</span> <span>Référents</span>
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #menuReferents="matMenu"> <mat-menu #menuReferents="matMenu">

Loading…
Cancel
Save