Skip to content

Commit

Permalink
Merge pull request #155 from PnEcrins/allow-skip-steps-on-new-observa…
Browse files Browse the repository at this point in the history
…tion

allow skip steps on new observation
  • Loading branch information
bastyen authored Oct 23, 2024
2 parents e179eee + f1d6b34 commit fbb6ec9
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 23 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<div class="container">
<mat-stepper class="stepper" linear="true" orientation="vertical" #stepper>
<mat-stepper
class="stepper"
orientation="vertical"
#stepper
(selectedIndexChange)="selectedStepperIndexChange($event)"
>
<mat-step [stepControl]="typeForm">
<ng-template matStepLabel
>Quel type de phénomène observez-vous ?</ng-template
Expand All @@ -15,10 +20,17 @@
Retour
</button>
</div>
<div class="mat-title-large mt-16">{{ observationTypeParent.label }}</div>
<div class="mat-title-large mt-16">
{{ observationTypeParent.label }}
</div>
</div>
<form [formGroup]="typeForm">
<mat-grid-list #grid [cols]="columns" rowHeight="150px" gutterSize="10px">
<mat-grid-list
#grid
[cols]="columns"
rowHeight="150px"
gutterSize="10px"
>
@for (
observationsType of observationsTypes;
track observationsType.id
Expand Down Expand Up @@ -60,9 +72,7 @@
}
</mat-grid-list>
<div>
<button class="mt-1" mat-flat-button matStepperNext [disabled]="this.typeForm.invalid">
Suivant
</button>
<button class="mt-1" mat-flat-button matStepperNext>Suivant</button>
</div>
</form>
</mat-step>
Expand All @@ -88,7 +98,13 @@
<mat-icon>photo_camera</mat-icon>
Prendre une photo
</button>
<button mat-fab extended color="primary" class="mt-1" (click)="addPhotoFromLibrary()">
<button
mat-fab
extended
color="primary"
class="mt-1"
(click)="addPhotoFromLibrary()"
>
<input
#fileInput
type="file"
Expand Down Expand Up @@ -116,7 +132,9 @@
}
</div>
<div class="mt-16">
<button mat-flat-button matStepperPrevious class="mr-1">Précédent</button>
<button mat-flat-button matStepperPrevious class="mr-1">
Précédent
</button>
<button mat-flat-button matStepperNext>Suivant</button>
</div>
</mat-step>
Expand All @@ -130,7 +148,9 @@
</mat-chip-set>
</div>
<div class="mt-1">
<button mat-flat-button matStepperPrevious class="mr-1">Précédent</button>
<button mat-flat-button matStepperPrevious class="mr-1">
Précédent
</button>
<button mat-flat-button matStepperNext>Suivant</button>
</div>
</mat-step>
Expand Down Expand Up @@ -161,26 +181,35 @@
</mat-form-field>
</div>
<div>
<button mat-flat-button matStepperPrevious class="mr-1">Précédent</button>
<button mat-flat-button matStepperNext [disabled]="moreDataForm.invalid">
Suivant
<button mat-flat-button matStepperPrevious class="mr-1">
Précédent
</button>
<button mat-flat-button matStepperNext>Suivant</button>
</div>
</form>
</mat-step>
<mat-step>
<ng-template matStepLabel>Récapitulatif</ng-template>
<div *ngIf="typeForm.value.type">
<div>
Type d'observation
<div>
<div *ngIf="typeForm.value.type">
<span *ngIf="observationTypeParent"
>{{ observationTypeParent.label }} -
</span>
{{ typeForm.value.type.label }}
</div>
<mat-error *ngIf="typeForm.invalid"
>Le type d'observation est obligatoire</mat-error
>
</div>
<div *ngIf="photoForm.value.photos" class="mt-16">
<div>Contenu multimédia</div>
<div
*ngIf="!photoForm.value.photos || photoForm.value.photos.length === 0"
class="photos-container"
>
Aucun
</div>
<div *ngIf="photoForm.value.photos" class="photos-container">
@for (photo of photoForm.value.photos; track photo) {
<div class="photo-container">
Expand All @@ -196,15 +225,19 @@
<mat-chip>Longitude : {{ mapForm.value.position.lng }}</mat-chip>
</mat-chip-set>
</div>
<div
*ngIf="moreDataForm.value.date || moreDataForm.value.comment"
class="mt-16"
>
<div class="mt-16">
<div>Informations complémentaires</div>
<div *ngIf="moreDataForm.value.date">
<div>
Date de l'observation :
{{ moreDataForm.value.date | date: "dd/MM/yyyy" }}
<mat-error *ngIf="moreDataForm.invalid"
>La date d'observation est obligatoire</mat-error
>

<span *ngIf="moreDataForm.value.date">
{{ moreDataForm.value.date | date: "dd/MM/yyyy" }}
</span>
</div>

<div *ngIf="moreDataForm.value.name">
Nom de l'observation : {{ moreDataForm.value.name }}
</div>
Expand All @@ -216,12 +249,22 @@
<button mat-flat-button matStepperPrevious>Précédent</button>
</div>
<div class="mr-1 mb-1">
<button mat-flat-button (click)="saveAsDraft()">
<button
mat-flat-button
(click)="saveAsDraft()"
[disabled]="observationIsInvalid"
>
Enregistrer comme brouillon
</button>
</div>
<div>
<button mat-flat-button (click)="sendObservation()">Envoyer</button>
<button
mat-flat-button
(click)="sendObservation()"
[disabled]="observationIsInvalid"
>
Envoyer
</button>
</div>
</mat-step>
</mat-stepper>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,6 @@ import { default as _rollupMoment } from 'moment';
import { round } from '@turf/helpers';

import {
Icon,
Icons,
Observation,
ObservationFeature,
Expand Down Expand Up @@ -139,6 +138,8 @@ export class NewObservationComponent {

icons: Icons = [];

observationIsInvalid = true;

ngOnInit() {
this.mobile = this.platform.ANDROID || this.platform.IOS;
this.breakpointObserver
Expand Down Expand Up @@ -407,4 +408,11 @@ export class NewObservationComponent {
getIconFromStorage(iconId: number) {
return this.icons.find((icon) => icon.id === iconId)!.objectUrl;
}

selectedStepperIndexChange(stepperIndex: number) {
if (stepperIndex === 4) {
this.observationIsInvalid =
this.typeForm.invalid || this.moreDataForm.invalid;
}
}
}

0 comments on commit fbb6ec9

Please sign in to comment.