Skip to content

Commit

Permalink
feat: add modal for edit import action
Browse files Browse the repository at this point in the history
- create modal action component
- call modal on edit import and next button step
- add model modalData
- remove deleteModal (replace by new component)

[Refs]: https://github.com/orgs/PnX-SI/projects/13?pane=issue&itemId=82942301

Reviewed-by: andriacap
  • Loading branch information
andriacap committed Jan 22, 2025
1 parent d655a53 commit fee3af7
Show file tree
Hide file tree
Showing 17 changed files with 411 additions and 100 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<div
class="modal-header"
[attr.data-qa]="modalData.headerDataQa"
>
<h4 class="modal-title pull-left">{{ modalData.title }}</h4>
<button
type="button"
class="close pull-right"
aria-label="Close"
(click)="c()"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>{{ modalData.bodyMessage }}</p>
<p
*ngIf="modalData.additionalMessage"
class="attention-message"
>
{{ modalData.additionalMessage }}
</p>

<button
type="button"
(click)="c()"
mat-raised-button
class="mr-1"
>
{{ modalData.cancelButtonText || 'Annuler' }}
</button>

<button
type="button"
(click)="performAction()"
mat-raised-button
[color]="modalData.confirmButtonColor || 'primary'"
[attr.data-qa]="modalData.confirmButtonDataQa"
>
{{ modalData.confirmButtonText || 'Confirmer' }}
</button>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.attention-message {
color: red;
font-weight: bold;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { CommonService } from '@geonature_common/service/common.service';
import { ImportDataService } from '../../services/data.service';
import { Import } from '../../models/import.model';
import { ModalData } from '../../models/modal-data.model';

@Component({
selector: 'import-action-modal',
templateUrl: './action-modal.component.html',
styleUrls: ['./action-modal.component.scss'],
})
export class ModalActionImport implements OnInit {
@Input() data: Import;
@Input() c: any;
@Input() actionType: 'delete' | 'edit' = 'delete';
@Input() modalData: ModalData = {
title: 'Confirmation',
bodyMessage: 'Êtes-vous sûr de vouloir effectuer cette action ?',
additionalMessage: '',
cancelButtonText: 'Annuler',
confirmButtonText: 'Confirmer',
confirmButtonColor: 'warn',
headerDataQa: 'generic-modal-header',
confirmButtonDataQa: 'modal-confirm-action',
};
@Output() onAction = new EventEmitter<{ confirmed: boolean; actionType: string; data?: any }>();

constructor(
private _commonService: CommonService,
private _ds: ImportDataService
) {}

ngOnInit() {}

// Méthode générique pour traiter les actions
performAction() {
if (this.actionType === 'delete') {
this.deleteImport();
} else if (this.actionType === 'edit') {
this.editImport();
}
}

// Supprimer l'import
deleteImport() {
this._ds.deleteImport(this.data.id_import).subscribe(() => {
this._commonService.translateToaster('success', 'Import.ImportStatus.DeleteSuccessfully');
this.onAction.emit({ confirmed: true, actionType: this.actionType, data: this.data });
this.c();
});
}

// Modifier l'import
editImport() {
this.onAction.emit({ confirmed: true, actionType: this.actionType, data: this.data });
this.c();
}
}

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ <h5 class="card-title">Liste des imports</h5>
mat-icon-button
color="primary"
class="Datatable__button"
(click)="onFinishImport(row)"
(click)="openModal(editModal, 'edit', row)"
[attr.data-qa]="'import-list-table-row-' + index + '-actions-edit'"
>
<mat-icon>edit</mat-icon>
Expand Down Expand Up @@ -241,7 +241,7 @@ <h5 class="card-title">Liste des imports</h5>
mat-icon-button
color="warn"
class="Datatable__button"
(click)="openDeleteModal(row, deleteModal)"
(click)="openModal(deleteModal, 'delete', row)"
[matTooltip]="getTooltip(row, 'delete')"
[attr.data-qa]="'import-list-table-row-' + index + '-actions-delete'"
>
Expand All @@ -258,17 +258,35 @@ <h5 class="card-title">Liste des imports</h5>
data-qa="import-list-modal-destination"
></import-modal-destination>

<ng-template
#editModal
let-c="close"
let-d="dismiss"
data-qa="import-list-modal-edit"
>
<import-action-modal
[modalData]="editModalData"
[data]="selectedRow"
[actionType]="'edit'"
[c]="c"
(onAction)="handleModalAction($event)"
></import-action-modal>
</ng-template>

<!-- Modale pour Delete -->
<ng-template
#deleteModal
let-c="close "
let-c="close"
let-d="dismiss"
data-qa="import-list-modal-delete"
>
<import-delete
[row]="deleteOne"
<import-action-modal
[modalData]="deleteModalData"
[data]="selectedRow"
[actionType]="'delete'"
[c]="c"
(onDelete)="onImportList(offset, search_string)"
></import-delete>
(onAction)="handleModalAction($event)"
></import-action-modal>
</ng-template>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// @ts-ignore

import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { FormControl } from '@angular/forms';
import { saveAs } from 'file-saver';
Expand All @@ -13,6 +13,7 @@ import { Import } from '../../models/import.model';
import { ConfigService } from '@geonature/services/config.service';
import { CsvExportService } from '../../services/csv-export.service';
import { formatRowCount } from '../../utils/format-row-count';
import { ModalData } from '../../models/modal-data.model';

@Component({
styleUrls: ['import-list.component.scss'],
Expand All @@ -22,7 +23,7 @@ export class ImportListComponent implements OnInit {
public history;
public filteredHistory;
public empty: boolean = false;
public deleteOne: Import;
public selectedRow: Import;
public interval: any;
public search = new FormControl();
public selectDestinationForm = new FormControl();
Expand All @@ -41,12 +42,14 @@ export class ImportListComponent implements OnInit {
private destinationCode: string;
public searchString: string = '';

public editModalData:ModalData;
public deleteModalData:ModalData;
constructor(
public _cruvedStore: CruvedStoreService,
private _ds: ImportDataService,
private _router: Router,
private _commonService: CommonService,
private modal: NgbModal,
private _modalService: NgbModal,
private importProcessService: ImportProcessService,
public _csvExport: CsvExportService,
public config: ConfigService
Expand Down Expand Up @@ -178,10 +181,51 @@ export class ImportListComponent implements OnInit {
return formatRowCount(row);
}

openDeleteModal(row: Import, modalDelete) {
this.deleteOne = row;
this._ds.setDestination(row.destination.code);
this.modal.open(modalDelete);
openModal(modalTemplate: TemplateRef<any>, actionType: 'edit' | 'delete', row: Import) {
this.selectedRow = row;
// Prépare les données de la modale en fonction de l'action
if (actionType === 'edit') {
let additionalMessage:string;
if(!!this.selectedRow.date_end_import) {
additionalMessage = 'Attention : Vous vous apprêtez à modifier un import terminé. Toute modification entraînera la suppression des données importées.'
} else {
additionalMessage = 'Attention : à chaque confirmation de chaque étape de cet import en cours , les données seront écrasées.'
}
this.editModalData = {
title: 'Modification',
bodyMessage: `Modifier cet import associé au JDD "${this.selectedRow.dataset.dataset_name}" et commencé le ${this.selectedRow.date_create_import}?`,
additionalMessage: additionalMessage,
cancelButtonText: 'Annuler',
confirmButtonText: 'Confirmer',
confirmButtonColor: 'warn',
headerDataQa: 'import-modal-edit',
confirmButtonDataQa: 'modal-edit-validate',
};
} else if (actionType === 'delete') {
this._ds.setDestination(this.selectedRow.destination.code);
this.deleteModalData = {
title: 'Suppression',
bodyMessage: `Supprimer cet import associé au JDD "${row.dataset.dataset_name}" et commencé le ${row.date_create_import}?`,
additionalMessage: this.selectedRow.date_end_import
? 'Attention : cela supprimera aussi les données importées.'
: '',
cancelButtonText: 'Annuler',
confirmButtonText: 'Supprimer',
confirmButtonColor: 'warn',
headerDataQa: 'import-modal-delete',
confirmButtonDataQa: 'modal-delete-validate',
};
}
this._modalService.open(modalTemplate);
}
handleModalAction(event: { confirmed: boolean; actionType: string; data?: any }) {
if (event.confirmed) {
if (event.actionType === 'edit') {
this.onFinishImport(event.data);
} else if (event.actionType === 'delete') {
this.onImportList({offset :this.offset, search: this.searchString});
}
}
}

onSort(e) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -264,7 +264,7 @@ <h5 class="card-title mb-0">Correspondance des nomenclatures</h5>
<button
class="btn btn-success box-shadow d-flex justify-content-center align-content-between"
[disabled]="!isNextStepAvailable()"
(click)="onNextStep()"
(click)="checkBeforeNextStep()"
mat-raised-button
color="primary"
data-qa="import-contentmapping-model-validate"
Expand Down Expand Up @@ -456,3 +456,17 @@ <h5 class="card-title mb-0">Correspondance des nomenclatures</h5>
</button>
</div>
</ng-template>
<ng-template
#editModal
let-c="close"
let-d="dismiss"
data-qa="import-list-modal-edit"
>
<import-action-modal
[modalData]="modalData"
[data]="importData"
[actionType]="'edit'"
[c]="c"
(onAction)="handleModalAction($event)"
></import-action-modal>
</ng-template>
Loading

0 comments on commit fee3af7

Please sign in to comment.