Refact/site form g

frontend/app/components/monitoring-form-g/monitoring-form-g.component.html

@@ -1,3 +1,20 @@
+<pnx-modal-msg [bDisplayModal]="deleteModal" *ngIf="object">
+  <h2>{{ 'Monitoring.DeletingPopup.Warning' | translate }}</h2>
+  <p>
+    {{ 'Monitoring.DeletingPopup.WarningDelete' | translate }}
+  </p>
+  <button class="btn btn-danger float-right" (click)="onDelete()">
+    <span
+      [ngClass]="{ 'hide-spinner': !deleteSpinner }"
+      class="spinner-border spinner-border-sm"
+      role="status"
+      aria-hidden="true"
+    ></span>
+    {{ 'Monitoring.DeletingPopup.ConfirmDelete' | translate }}
+  </button>
+  <button class="btn btn-primary" (click)="deleteModal = false">{{ 'Monitoring.DeletingPopup.Cancel' | translate }}</button>
+</pnx-modal-msg>
+
 <div>
   <div id="properties-form" class="cadre" *ngIf="formsDefinition">
     <div style="height: 25px;">
@@ -103,7 +120,7 @@
           [disabled]="!canDelete"
           color="warn"
           class="float-left"
-          (click)="canDelete ? (bDeleteModal = true) : null"
+          (click)="canDelete ? (deleteModal = true) : null"
           *ngIf="object"
         >
           {{ 'Monitoring.Form.Delete' | translate }}

frontend/app/components/monitoring-form-g/monitoring-form-g.component.ts

@@ -1,13 +1,15 @@
 import { forkJoin, Observable, of } from 'rxjs';
 import { concatMap } from 'rxjs/operators';
 import { Component, OnInit, Input, AfterViewInit, Output, EventEmitter } from '@angular/core';
-import { ApiService } from '../../services/api-geom.service';
 import { FormGroup, FormBuilder, Validators, FormControl, FormArray } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { TranslateService } from '@ngx-translate/core';
+
 import { CommonService } from '@geonature_common/service/common.service';
 import { DynamicFormService } from '@geonature_common/form/dynamic-form-generator/dynamic-form.service';
-import { Location } from '@angular/common';
 import { Utils } from '../../utils/utils';
+import { ApiService } from '../../services/api-geom.service';
 import { FormService } from '../../services/form.service';
 import { DataUtilsService } from '../../services/data-utils.service';
 import { JsonData } from '../../types/jsondata';
@@ -37,6 +39,10 @@ export class MonitoringFormGComponent implements OnInit, AfterViewInit {
   public canDelete: boolean = true;
   public addChildren: boolean = false;
   public formsDefinition: JsonData;
+
+  public deleteSpinner = false;
+  public deleteModal = false;
+
   private queryParams: {};
   private pendingKeepValues: JsonData | null = null;
 
@@ -50,7 +56,8 @@ export class MonitoringFormGComponent implements OnInit, AfterViewInit {
     private _geojsonService: GeoJSONService,
     private _navigationService: NavigationService,
     private _route: ActivatedRoute,
-    private _formUtils: MonitoringObjectService
+    private _formUtils: MonitoringObjectService,
+    private translate: TranslateService
   ) {}
 
   ngAfterViewInit() {
@@ -107,56 +114,13 @@ export class MonitoringFormGComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
-    // Initialisation des variables
-    // this.initializeVariables(this.obj);
-
-    // Initialisation des permissions de l'utilisateur courant
-    // this.initPermission();
-
-    // // Initialisation des paramètres par défaut du formulaire
-    this.queryParams = this._route.snapshot.queryParams || {};
-
-    this.meta = {
-      nomenclatures: this._dataUtilsService.getDataUtil('nomenclature'),
-      dataset: this._dataUtilsService.getDataUtil('dataset'),
-      id_role: this.currentUser.id_role,
-      bChainInput: this.chainInput,
-      // parents: this.object.parents
-    };
+    this.initForm();
 
-    // Récupération de la définition du formulaire
-    this.formsDefinition = this.initFormDefiniton(this.config.fields, this.meta);
-    // Tri des proprités en fonction de la variable display_properties
     let displayProperties = [...(this.config.display_properties || [])];
-    this.formsDefinition = this.sortFormDefinition(displayProperties, this.formsDefinition);
-
-    if (this.config['geometry_type']) {
-      const validatorRequired =
-        this.objectType == 'sites_group'
-          ? this._formBuilder.control('')
-          : this._formBuilder.control('', Validators.required);
-
-      let frmCtrlGeom = {
-        frmCtrl: validatorRequired,
-        frmName: 'geometry',
-      };
-
-      this.form = this._formService.addFormCtrlToObjForm(frmCtrlGeom, this.form);
-      if (this.object) {
-        const geomCalculated = this.object.hasOwnProperty('is_geom_from_child')
-          ? this.object['is_geom_from_child']
-          : false;
-        if (geomCalculated) {
-          this.object.geometry = null;
-        } else {
-          // TODO pourquoi la conversion en JSON ici ?
-          this.object.geometry = JSON.parse(this.object.geometry);
-        }
-      }
-    }
-    // // Conversion des query params de type entier mais en string en int
-    // //  ??? A comprendre
-    // this.obj = this.setQueryParams(this.obj);
+    this.formsDefinition = this.sortFormDefinition(
+      displayProperties,
+      this.initFormDefiniton(this.config.fields, this.meta)
+    );
   }
 
   setDefaultFormValue() {
@@ -397,6 +361,21 @@ export class MonitoringFormGComponent implements OnInit, AfterViewInit {
     this.navigateToDetail();
   }
 
+  onDelete() {
+    this.deleteSpinner = true;
+    this.apiService.delete(this.object[this.object.pk]).subscribe((objData) => {
+      this.deleteSpinner = this.deleteModal = false;
+      this.object.deleted = true;
+      this._commonService.regularToaster(
+        'info',
+        this.translate.instant('Monitoring.Actions.Deleted')
+      );
+      setTimeout(() => {
+        this.navigateToParent();
+      }, 100);
+    });
+  }
+
   ngOnDestroy() {
     this.form.patchValue({ geometry: null });
     this._formService.changeFormMapObj({

frontend/app/components/monitoring-site-form-g/monitoring-site-form-g.component.css

@@ -0,0 +1,58 @@
+:host ::ng-deep .obj-form {
+  margin: 0;
+  margin-bottom: 10px;
+  padding: 0;
+}
+
+:host ::ng-deep .full-wrapper {
+  padding-bottom: 2rem!important;
+}
+
+.hide-spinner {
+  display: none;
+}
+
+.btn-height {
+  height: 39px;
+}
+
+
+.float-left {
+  margin-right: 10px;
+  float: left;
+}
+
+
+form:invalid {
+  outline: none;
+}
+
+form.ng-invalid {
+  border: 0px !important;
+}
+
+.form-scroll-info-geom {
+  overflow-y: auto;
+  max-height: 60vh;
+}
+
+.form-scroll {
+  overflow-y: auto;
+  max-height: 70vh;
+}
+
+.btn-child {
+  border: 0px solid #202020;
+  padding-top: 2px;
+  padding-bottom: auto;
+  -webkit-box-shadow: 0px -2px 2px rgba(50, 50, 50, 0.3);
+  -moz-box-shadow: 0px -2px 2px rgba(50, 50, 50, 0.3);
+  box-shadow: 0px -2px 2px rgba(50, 50, 50, 0.3);
+  overflow: hidden;
+  height: fit-content;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  pointer-events: all !important;
+}

frontend/app/components/monitoring-site-form-g/monitoring-site-form-g.component.html

@@ -0,0 +1,127 @@
+<div>
+  <div id="properties-form" class="cadre" *ngIf="formsDefinition">
+    <div style="height: 25px;">
+      <span
+        *ngIf="!object && config['chained']"
+        id="toggle-btn"
+        class="float-right"
+        matTooltip="Enchainer les saisies"
+        matTooltipPosition="left"
+      >
+        <i class="fa fa-repeat" aria-hidden="true"></i>
+        <mat-slide-toggle
+          color="primary"
+          [(ngModel)]="chainInput"
+          (change)="chainInputChanged($event)"
+        >
+        </mat-slide-toggle>
+      </span>
+    </div>
+    <form [formGroup]="form">
+      <p
+        class="alert alert-warning"
+        style="display: inline-block"
+        *ngIf="
+          config['geometry_type'] && !form.value.geometry && objectType != 'sites_group'
+        "
+      >
+        <span>{{ 'Monitoring.Form.PickGeom' | translate }}</span>
+      </p>
+      <p
+        class="alert alert-warning"
+        style="display: inline-block; padding: 4px"
+        *ngIf="
+          config['geometry_type'] &&
+          !form.value.geometry &&
+          objectType == 'sites_group'
+        "
+      >
+        <span>
+          {{ 'Monitoring.Form.GrpSiteGeom' | translate }}
+        </span>
+      </p>
+
+      <!-- composant choix de site select + filtre -->
+      <div
+        [ngClass]="{
+          'form-scroll-info-geom': config['geometry_type'] && !form.value.geometry,
+          'form-scroll': !(config['geometry_type'] && !form.value.geometry)
+        }"
+      >
+        <pnx-dynamic-form-generator
+          class="obj-form"
+          #dynamicForm
+          [autoGenerated]="true"
+          [myFormGroup]="form"
+          [formsDefinition]="formsDefinition"
+          (myFormGroupChange)="onDynamicFormGroupChange()"
+          (change)="onFormValueChange($event)"
+        ></pnx-dynamic-form-generator>
+
+        <ng-container *ngIf="typeSiteFormsDefinition && typeSiteFormsDefinition.length">
+          <ng-container *ngFor="let typeSite of typeSiteFormsDefinition; trackBy: trackByTypeSiteId">
+            <p style="font-weight: bold;">{{ 'Monitoring.Form.AssignedFields' | translate }}{{ typeSite.name }}</p>
+            <pnx-dynamic-form-generator
+              class="obj-form"
+              [autoGenerated]="true"
+              [myFormGroup]="form"
+              [formsDefinition]="typeSite.fields"
+              (change)="onFormValueChange($event)"
+            ></pnx-dynamic-form-generator>
+          </ng-container>
+        </ng-container>
+      </div>
+      <div class="btn-child">
+        <button
+          mat-raised-button
+          color="primary"
+          *ngIf="!chainInput && !object && config.children && addChildren"
+          class="btn btn-success float-right mr-1"
+          (click)="canUpdate ? onSubmit(true) : notAllowedMessage()"
+          [disabled]="!form.valid"
+        >
+          <span
+            [ngClass]="{ 'hide-spinner': !saveAndAddChildrenSpinner }"
+            class="spinner-border spinner-border-sm float-right"
+            role="status"
+            aria-hidden="true"
+          ></span>
+
+          <span>{{ 'Monitoring.Form.ValidateEnter' | translate }}{{ config.children[0] }}</span>
+        </button>
+        <button
+          mat-raised-button
+          color="primary"
+          class="float-right mr-1"
+          (click)="canUpdate ? onSubmit() : notAllowedMessage()"
+          [disabled]="!form.valid"
+          >
+          <span
+            [ngClass]="{ 'hide-spinner': !saveSpinner }"
+            class="spinner-border spinner-border-sm float-right"
+            role="status"
+            aria-hidden="true"
+          ></span>
+
+          <span *ngIf="chainInput && !object">{{ 'Monitoring.Form.ValidateChain' | translate }}</span>
+          <span *ngIf="!chainInput || object">{{ 'Monitoring.Form.Validate' | translate }}</span>
+        </button>
+
+        <button mat-raised-button color="warn" class="float-left" (click)="onCancelEdit()">
+          {{ 'Monitoring.Form.Cancel' | translate }}
+        </button>
+        <button
+          mat-raised-button
+          [matTooltip]="canDelete ? null : toolTipNotAllowed"
+          [disabled]="!canDelete"
+          color="warn"
+          class="float-left"
+          (click)="canDelete ? (bDeleteModal = true) : null"
+          *ngIf="object"
+        >
+          {{ 'Monitoring.Form.Delete' | translate }}
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

frontend/app/components/monitoring-site-form-g/monitoring-site-form-g.component.spec.ts

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