710 lines
27 KiB
TypeScript
710 lines
27 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { DataTable } from 'primereact/datatable';
|
|
import { Column } from 'primereact/column';
|
|
import { Button } from 'primereact/button';
|
|
import { Toast } from 'primereact/toast';
|
|
import { Dialog } from 'primereact/dialog';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { Calendar } from 'primereact/calendar';
|
|
import { Slider } from 'primereact/slider';
|
|
import { Tag } from 'primereact/tag';
|
|
import { Card } from 'primereact/card';
|
|
import { ProgressBar } from 'primereact/progressbar';
|
|
import { Toolbar } from 'primereact/toolbar';
|
|
import { Badge } from 'primereact/badge';
|
|
import { Divider } from 'primereact/divider';
|
|
import { InputTextarea } from 'primereact/inputtextarea';
|
|
import { InputNumber } from 'primereact/inputnumber';
|
|
import { confirmDialog } from 'primereact/confirmdialog';
|
|
import { ConfirmDialog } from 'primereact/confirmdialog';
|
|
import { Page } from '@/types';
|
|
import phaseChantierService from '@/services/phaseChantierService';
|
|
import { PhaseChantier, StatutPhase } from '@/types/btp-extended';
|
|
import {
|
|
ActionButtonGroup,
|
|
ViewButton,
|
|
EditButton,
|
|
DeleteButton,
|
|
StartButton
|
|
} from '../../../components/ui/ActionButton';
|
|
|
|
const PhasesChantierPage: Page = () => {
|
|
const [phases, setPhases] = useState<PhaseChantier[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedPhases, setSelectedPhases] = useState<PhaseChantier[]>([]);
|
|
const [phaseDialog, setPhaseDialog] = useState(false);
|
|
const [deletePhaseDialog, setDeletePhaseDialog] = useState(false);
|
|
const [currentPhase, setCurrentPhase] = useState<PhaseChantier | null>(null);
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const [globalFilter, setGlobalFilter] = useState('');
|
|
const [expandedRows, setExpandedRows] = useState<any>(null);
|
|
const [filters, setFilters] = useState({
|
|
statut: '',
|
|
chantierId: '',
|
|
enRetard: false
|
|
});
|
|
|
|
const toast = useRef<Toast>(null);
|
|
const dt = useRef<DataTable<PhaseChantier[]>>(null);
|
|
|
|
// État pour le formulaire de phase
|
|
const [formData, setFormData] = useState({
|
|
nom: '',
|
|
description: '',
|
|
dateDebutPrevue: null as Date | null,
|
|
dateFinPrevue: null as Date | null,
|
|
budgetPrevu: 0,
|
|
statut: 'PLANIFIEE' as StatutPhase,
|
|
critique: false,
|
|
notes: '',
|
|
ordreExecution: 1
|
|
});
|
|
|
|
const statutOptions = [
|
|
{ label: 'Planifiée', value: 'PLANIFIEE' },
|
|
{ label: 'En attente', value: 'EN_ATTENTE' },
|
|
{ label: 'En cours', value: 'EN_COURS' },
|
|
{ label: 'En pause', value: 'EN_PAUSE' },
|
|
{ label: 'Terminée', value: 'TERMINEE' },
|
|
{ label: 'Annulée', value: 'ANNULEE' },
|
|
{ label: 'En retard', value: 'EN_RETARD' }
|
|
];
|
|
|
|
useEffect(() => {
|
|
loadPhases();
|
|
}, []);
|
|
|
|
const loadPhases = async () => {
|
|
try {
|
|
setLoading(true);
|
|
// Pour l'exemple, on charge toutes les phases.
|
|
// En production, on pourrait charger par chantier spécifique
|
|
const data = await phaseChantierService.getByChantier(1); // ID exemple
|
|
setPhases(data || []);
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des phases:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Impossible de charger les phases',
|
|
life: 3000
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const openNew = () => {
|
|
setCurrentPhase(null);
|
|
setFormData({
|
|
nom: '',
|
|
description: '',
|
|
dateDebutPrevue: null,
|
|
dateFinPrevue: null,
|
|
budgetPrevu: 0,
|
|
statut: 'PLANIFIEE',
|
|
critique: false,
|
|
notes: '',
|
|
ordreExecution: 1
|
|
});
|
|
setSubmitted(false);
|
|
setPhaseDialog(true);
|
|
};
|
|
|
|
const editPhase = (phase: PhaseChantier) => {
|
|
setCurrentPhase(phase);
|
|
setFormData({
|
|
nom: phase.nom || '',
|
|
description: phase.description || '',
|
|
dateDebutPrevue: phase.dateDebutPrevue ? new Date(phase.dateDebutPrevue) : null,
|
|
dateFinPrevue: phase.dateFinPrevue ? new Date(phase.dateFinPrevue) : null,
|
|
budgetPrevu: phase.budgetPrevu || 0,
|
|
statut: phase.statut,
|
|
critique: phase.critique || false,
|
|
notes: phase.notes || '',
|
|
ordreExecution: phase.ordreExecution || 1
|
|
});
|
|
setSubmitted(false);
|
|
setPhaseDialog(true);
|
|
};
|
|
|
|
const confirmDeletePhase = (phase: PhaseChantier) => {
|
|
setCurrentPhase(phase);
|
|
setDeletePhaseDialog(true);
|
|
};
|
|
|
|
const deletePhase = async () => {
|
|
try {
|
|
if (currentPhase?.id) {
|
|
await phaseChantierService.delete(Number(currentPhase.id));
|
|
await loadPhases();
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: 'Phase supprimée avec succès',
|
|
life: 3000
|
|
});
|
|
}
|
|
} catch (error) {
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Erreur lors de la suppression',
|
|
life: 3000
|
|
});
|
|
}
|
|
setDeletePhaseDialog(false);
|
|
setCurrentPhase(null);
|
|
};
|
|
|
|
const hideDialog = () => {
|
|
setSubmitted(false);
|
|
setPhaseDialog(false);
|
|
};
|
|
|
|
const hideDeleteDialog = () => {
|
|
setDeletePhaseDialog(false);
|
|
};
|
|
|
|
const savePhase = async () => {
|
|
setSubmitted(true);
|
|
|
|
if (formData.nom.trim()) {
|
|
try {
|
|
const phaseData = {
|
|
...formData,
|
|
dateDebutPrevue: formData.dateDebutPrevue?.toISOString(),
|
|
dateFinPrevue: formData.dateFinPrevue?.toISOString(),
|
|
chantierId: '1', // ID exemple - en production, viendrait du contexte
|
|
ordreExecution: formData.ordreExecution || 1
|
|
};
|
|
|
|
if (currentPhase?.id) {
|
|
await phaseChantierService.update(Number(currentPhase.id), phaseData);
|
|
} else {
|
|
await phaseChantierService.create(phaseData);
|
|
}
|
|
|
|
await loadPhases();
|
|
hideDialog();
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: currentPhase ? 'Phase modifiée avec succès' : 'Phase créée avec succès',
|
|
life: 3000
|
|
});
|
|
} catch (error) {
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Erreur lors de la sauvegarde',
|
|
life: 3000
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const onInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
|
|
const val = e.target.value || '';
|
|
setFormData(prev => ({ ...prev, [name]: val }));
|
|
};
|
|
|
|
const onNumberInputChange = (value: number | null, name: string) => {
|
|
setFormData(prev => ({ ...prev, [name]: value || 0 }));
|
|
};
|
|
|
|
const onDateChange = (value: Date | null, name: string) => {
|
|
setFormData(prev => ({ ...prev, [name]: value }));
|
|
};
|
|
|
|
const onDropdownChange = (e: any, name: string) => {
|
|
setFormData(prev => ({ ...prev, [name]: e.value }));
|
|
};
|
|
|
|
// Actions sur les phases
|
|
const startPhase = async (phase: PhaseChantier) => {
|
|
try {
|
|
if (phase.id) {
|
|
await phaseChantierService.start(Number(phase.id));
|
|
await loadPhases();
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: 'Phase démarrée',
|
|
life: 3000
|
|
});
|
|
}
|
|
} catch (error) {
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Erreur lors du démarrage',
|
|
life: 3000
|
|
});
|
|
}
|
|
};
|
|
|
|
const completePhase = async (phase: PhaseChantier) => {
|
|
try {
|
|
if (phase.id) {
|
|
await phaseChantierService.complete(Number(phase.id));
|
|
await loadPhases();
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: 'Phase terminée',
|
|
life: 3000
|
|
});
|
|
}
|
|
} catch (error) {
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Erreur lors de la finalisation',
|
|
life: 3000
|
|
});
|
|
}
|
|
};
|
|
|
|
const suspendPhase = async (phase: PhaseChantier) => {
|
|
try {
|
|
if (phase.id) {
|
|
await phaseChantierService.suspend(Number(phase.id));
|
|
await loadPhases();
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: 'Phase suspendue',
|
|
life: 3000
|
|
});
|
|
}
|
|
} catch (error) {
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Erreur lors de la suspension',
|
|
life: 3000
|
|
});
|
|
}
|
|
};
|
|
|
|
// Templates pour les colonnes
|
|
const actionBodyTemplate = (rowData: PhaseChantier) => {
|
|
return (
|
|
<ActionButtonGroup>
|
|
<EditButton
|
|
onClick={() => editPhase(rowData)}
|
|
tooltip="Modifier"
|
|
/>
|
|
<DeleteButton
|
|
onClick={() => confirmDeletePhase(rowData)}
|
|
tooltip="Supprimer"
|
|
/>
|
|
{rowData.statut === 'PLANIFIEE' && (
|
|
<StartButton
|
|
onClick={() => startPhase(rowData)}
|
|
tooltip="Démarrer"
|
|
/>
|
|
)}
|
|
{rowData.statut === 'EN_COURS' && (
|
|
<>
|
|
<Button
|
|
icon="pi pi-pause"
|
|
rounded
|
|
severity="warning"
|
|
onClick={() => suspendPhase(rowData)}
|
|
tooltip="Suspendre"
|
|
/>
|
|
<Button
|
|
icon="pi pi-check"
|
|
rounded
|
|
severity="success"
|
|
onClick={() => completePhase(rowData)}
|
|
tooltip="Terminer"
|
|
/>
|
|
</>
|
|
)}
|
|
</ActionButtonGroup>
|
|
);
|
|
};
|
|
|
|
const statutBodyTemplate = (rowData: PhaseChantier) => {
|
|
const severity = phaseChantierService.getStatutColor(rowData.statut);
|
|
const label = phaseChantierService.getStatutLabel(rowData.statut);
|
|
|
|
return (
|
|
<Tag
|
|
value={label}
|
|
style={{ backgroundColor: severity }}
|
|
className="text-white"
|
|
/>
|
|
);
|
|
};
|
|
|
|
const avancementBodyTemplate = (rowData: PhaseChantier) => {
|
|
const value = rowData.pourcentageAvancement || 0;
|
|
return (
|
|
<div className="flex align-items-center gap-2">
|
|
<ProgressBar
|
|
value={value}
|
|
className="w-8rem"
|
|
style={{ height: '0.5rem' }}
|
|
/>
|
|
<span className="text-sm">{value.toFixed(1)}%</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const dateBodyTemplate = (date: string | null) => {
|
|
return date ? new Date(date).toLocaleDateString('fr-FR') : '-';
|
|
};
|
|
|
|
const budgetBodyTemplate = (value: number) => {
|
|
return new Intl.NumberFormat('fr-FR', {
|
|
style: 'currency',
|
|
currency: 'EUR'
|
|
}).format(value || 0);
|
|
};
|
|
|
|
const retardBodyTemplate = (rowData: PhaseChantier) => {
|
|
const isEnRetard = phaseChantierService.isEnRetard(rowData);
|
|
if (!isEnRetard) return null;
|
|
|
|
const retard = phaseChantierService.calculateRetard(rowData);
|
|
return (
|
|
<Badge
|
|
value={`${retard}j`}
|
|
severity="danger"
|
|
/>
|
|
);
|
|
};
|
|
|
|
// Template pour les détails expandables
|
|
const rowExpansionTemplate = (data: PhaseChantier) => {
|
|
return (
|
|
<div className="p-3">
|
|
<h5>Détails de la phase: {data.nom}</h5>
|
|
<div className="grid">
|
|
<div className="col-12 md:col-6">
|
|
<p><strong>Description:</strong> {data.description || 'Aucune description'}</p>
|
|
<p><strong>Prérequis:</strong> {data.prerequis || 'Aucun'}</p>
|
|
<p><strong>Livrables:</strong> {data.livrables || 'Non définis'}</p>
|
|
</div>
|
|
<div className="col-12 md:col-6">
|
|
<p><strong>Risques:</strong> {data.risques || 'Non identifiés'}</p>
|
|
<p><strong>Notes:</strong> {data.notes || 'Aucune note'}</p>
|
|
<p><strong>Phase critique:</strong> {data.critique ? 'Oui' : 'Non'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Statistiques rapides
|
|
const stats = phaseChantierService.calculateStatistiques(phases);
|
|
|
|
const leftToolbarTemplate = () => {
|
|
return (
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
label="Nouvelle Phase"
|
|
icon="pi pi-plus"
|
|
severity="success"
|
|
onClick={openNew}
|
|
/>
|
|
<Button
|
|
label="Phases en Retard"
|
|
icon="pi pi-exclamation-triangle"
|
|
severity="warning"
|
|
onClick={() => {/* TODO: Filtrer les phases en retard */}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const rightToolbarTemplate = () => {
|
|
return (
|
|
<div className="flex align-items-center gap-2">
|
|
<span className="p-input-icon-left">
|
|
<i className="pi pi-search" />
|
|
<InputText
|
|
type="search"
|
|
placeholder="Rechercher..."
|
|
onInput={(e) => setGlobalFilter(e.currentTarget.value)}
|
|
/>
|
|
</span>
|
|
<Button
|
|
icon="pi pi-refresh"
|
|
onClick={loadPhases}
|
|
tooltip="Actualiser"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="grid">
|
|
<div className="col-12">
|
|
<Toast ref={toast} />
|
|
<ConfirmDialog />
|
|
|
|
{/* Statistiques rapides */}
|
|
<div className="grid mb-4">
|
|
<div className="col-12 md:col-3">
|
|
<Card>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-primary">{stats.total}</div>
|
|
<div className="text-sm text-color-secondary">Total phases</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div className="col-12 md:col-3">
|
|
<Card>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-green-500">{stats.terminees}</div>
|
|
<div className="text-sm text-color-secondary">Terminées</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div className="col-12 md:col-3">
|
|
<Card>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-blue-500">{stats.enCours}</div>
|
|
<div className="text-sm text-color-secondary">En cours</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div className="col-12 md:col-3">
|
|
<Card>
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-red-500">{stats.enRetard}</div>
|
|
<div className="text-sm text-color-secondary">En retard</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
<Card title="Gestion des Phases de Chantier">
|
|
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
|
|
|
<DataTable
|
|
ref={dt}
|
|
value={phases}
|
|
selection={selectedPhases}
|
|
onSelectionChange={(e) => setSelectedPhases(e.value as PhaseChantier[])}
|
|
selectionMode="checkbox"
|
|
dataKey="id"
|
|
paginator
|
|
rows={10}
|
|
rowsPerPageOptions={[5, 10, 25]}
|
|
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
|
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} phases"
|
|
globalFilter={globalFilter}
|
|
header="Liste des Phases de Chantier"
|
|
loading={loading}
|
|
expandedRows={expandedRows}
|
|
onRowToggle={(e) => setExpandedRows(e.data)}
|
|
rowExpansionTemplate={rowExpansionTemplate}
|
|
className="datatable-responsive"
|
|
emptyMessage="Aucune phase trouvée"
|
|
>
|
|
<Column expander style={{ width: '3rem' }} />
|
|
<Column selectionMode="multiple" style={{ width: '3rem' }} exportable={false} />
|
|
<Column field="nom" header="Nom" sortable style={{ minWidth: '12rem' }} />
|
|
<Column
|
|
field="statut"
|
|
header="Statut"
|
|
body={statutBodyTemplate}
|
|
sortable
|
|
style={{ minWidth: '8rem' }}
|
|
/>
|
|
<Column
|
|
field="pourcentageAvancement"
|
|
header="Avancement"
|
|
body={avancementBodyTemplate}
|
|
sortable
|
|
style={{ minWidth: '10rem' }}
|
|
/>
|
|
<Column
|
|
field="dateDebutPrevue"
|
|
header="Début prévu"
|
|
body={(rowData) => dateBodyTemplate(rowData.dateDebutPrevue)}
|
|
sortable
|
|
style={{ minWidth: '8rem' }}
|
|
/>
|
|
<Column
|
|
field="dateFinPrevue"
|
|
header="Fin prévue"
|
|
body={(rowData) => dateBodyTemplate(rowData.dateFinPrevue)}
|
|
sortable
|
|
style={{ minWidth: '8rem' }}
|
|
/>
|
|
<Column
|
|
field="budgetPrevu"
|
|
header="Budget"
|
|
body={(rowData) => budgetBodyTemplate(rowData.budgetPrevu)}
|
|
sortable
|
|
style={{ minWidth: '8rem' }}
|
|
/>
|
|
<Column
|
|
header="Retard"
|
|
body={retardBodyTemplate}
|
|
style={{ minWidth: '6rem' }}
|
|
/>
|
|
<Column
|
|
body={actionBodyTemplate}
|
|
exportable={false}
|
|
style={{ minWidth: '12rem' }}
|
|
/>
|
|
</DataTable>
|
|
</Card>
|
|
|
|
{/* Dialog pour créer/modifier une phase */}
|
|
<Dialog
|
|
visible={phaseDialog}
|
|
style={{ width: '600px' }}
|
|
header="Détails de la Phase"
|
|
modal
|
|
className="p-fluid"
|
|
footer={
|
|
<div>
|
|
<Button
|
|
label="Annuler"
|
|
icon="pi pi-times"
|
|
outlined
|
|
onClick={hideDialog}
|
|
/>
|
|
<Button
|
|
label="Enregistrer"
|
|
icon="pi pi-check"
|
|
onClick={savePhase}
|
|
/>
|
|
</div>
|
|
}
|
|
onHide={hideDialog}
|
|
>
|
|
<div className="field">
|
|
<label htmlFor="nom" className="font-bold">Nom *</label>
|
|
<InputText
|
|
id="nom"
|
|
value={formData.nom}
|
|
onChange={(e) => onInputChange(e, 'nom')}
|
|
required
|
|
autoFocus
|
|
className={submitted && !formData.nom ? 'p-invalid' : ''}
|
|
/>
|
|
{submitted && !formData.nom && <small className="p-error">Le nom est obligatoire.</small>}
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label htmlFor="description" className="font-bold">Description</label>
|
|
<InputTextarea
|
|
id="description"
|
|
value={formData.description}
|
|
onChange={(e) => onInputChange(e, 'description')}
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
|
|
<div className="formgrid grid">
|
|
<div className="field col">
|
|
<label htmlFor="dateDebutPrevue" className="font-bold">Date début prévue *</label>
|
|
<Calendar
|
|
id="dateDebutPrevue"
|
|
value={formData.dateDebutPrevue}
|
|
onChange={(e) => onDateChange(e.value, 'dateDebutPrevue')}
|
|
dateFormat="dd/mm/yy"
|
|
showIcon
|
|
className={submitted && !formData.dateDebutPrevue ? 'p-invalid' : ''}
|
|
/>
|
|
</div>
|
|
<div className="field col">
|
|
<label htmlFor="dateFinPrevue" className="font-bold">Date fin prévue *</label>
|
|
<Calendar
|
|
id="dateFinPrevue"
|
|
value={formData.dateFinPrevue}
|
|
onChange={(e) => onDateChange(e.value, 'dateFinPrevue')}
|
|
dateFormat="dd/mm/yy"
|
|
showIcon
|
|
className={submitted && !formData.dateFinPrevue ? 'p-invalid' : ''}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="formgrid grid">
|
|
<div className="field col">
|
|
<label htmlFor="budgetPrevu" className="font-bold">Budget prévu (€)</label>
|
|
<InputNumber
|
|
id="budgetPrevu"
|
|
value={formData.budgetPrevu}
|
|
onValueChange={(e) => onNumberInputChange(e.value, 'budgetPrevu')}
|
|
mode="currency"
|
|
currency="EUR"
|
|
locale="fr-FR"
|
|
/>
|
|
</div>
|
|
<div className="field col">
|
|
<label htmlFor="statut" className="font-bold">Statut</label>
|
|
<Dropdown
|
|
id="statut"
|
|
value={formData.statut}
|
|
options={statutOptions}
|
|
onChange={(e) => onDropdownChange(e, 'statut')}
|
|
placeholder="Sélectionner un statut"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label htmlFor="notes" className="font-bold">Notes</label>
|
|
<InputTextarea
|
|
id="notes"
|
|
value={formData.notes}
|
|
onChange={(e) => onInputChange(e, 'notes')}
|
|
rows={2}
|
|
/>
|
|
</div>
|
|
</Dialog>
|
|
|
|
{/* Dialog de confirmation de suppression */}
|
|
<Dialog
|
|
visible={deletePhaseDialog}
|
|
style={{ width: '450px' }}
|
|
header="Confirmer"
|
|
modal
|
|
footer={
|
|
<div>
|
|
<Button
|
|
label="Non"
|
|
icon="pi pi-times"
|
|
outlined
|
|
onClick={hideDeleteDialog}
|
|
/>
|
|
<Button
|
|
label="Oui"
|
|
icon="pi pi-check"
|
|
severity="danger"
|
|
onClick={deletePhase}
|
|
/>
|
|
</div>
|
|
}
|
|
onHide={hideDeleteDialog}
|
|
>
|
|
<div className="confirmation-content">
|
|
<i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
|
|
{currentPhase && (
|
|
<span>
|
|
Êtes-vous sûr de vouloir supprimer la phase <b>{currentPhase.nom}</b> ?
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Dialog>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PhasesChantierPage; |