151 lines
5.0 KiB
Markdown
151 lines
5.0 KiB
Markdown
# Composants UI Standardisés - BTPXpress
|
|
|
|
## ActionButton - Boutons d'Actions Standardisés
|
|
|
|
### Vue d'ensemble
|
|
Les composants `ActionButton` fournissent une approche cohérente pour tous les boutons d'actions dans l'application BTPXpress. Ils utilisent le style `p-button-text` pour un rendu subtil et professionnel, similaire au template Atlantis React.
|
|
|
|
### Utilisation de base
|
|
|
|
```tsx
|
|
import { ActionButton, ActionButtonGroup } from '../../components/ui/ActionButton';
|
|
|
|
// Bouton personnalisé
|
|
<ActionButton
|
|
icon="pi pi-eye"
|
|
tooltip="Voir détails"
|
|
onClick={() => handleView()}
|
|
color="blue"
|
|
/>
|
|
|
|
// Groupe de boutons
|
|
<ActionButtonGroup>
|
|
<ViewButton tooltip="Voir" onClick={() => handleView()} />
|
|
<EditButton tooltip="Modifier" onClick={() => handleEdit()} />
|
|
<DeleteButton tooltip="Supprimer" onClick={() => handleDelete()} />
|
|
</ActionButtonGroup>
|
|
```
|
|
|
|
### Boutons prédéfinis disponibles
|
|
|
|
- **ViewButton**: `pi pi-eye` - Couleur par défaut (gris)
|
|
- **EditButton**: `pi pi-pencil` - Orange
|
|
- **DeleteButton**: `pi pi-trash` - Rouge
|
|
- **StartButton**: `pi pi-play` - Vert
|
|
- **CompleteButton**: `pi pi-check` - Vert
|
|
- **ProgressButton**: `pi pi-percentage` - Bleu
|
|
- **PauseButton**: `pi pi-pause` - Orange
|
|
- **ResumeButton**: `pi pi-play` - Teal
|
|
- **DownloadButton**: `pi pi-download` - Bleu
|
|
- **PrintButton**: `pi pi-print` - Violet
|
|
|
|
### Props ActionButton
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| icon | string | - | Icône PrimeIcons (ex: "pi pi-eye") |
|
|
| tooltip | string | - | Texte du tooltip |
|
|
| onClick | function | - | Fonction appelée au clic |
|
|
| color | string | 'default' | Couleur: 'default', 'green', 'blue', 'orange', 'red', 'purple', 'teal' |
|
|
| disabled | boolean | false | Désactiver le bouton |
|
|
| size | string | 'small' | Taille: 'small', 'normal', 'large' |
|
|
|
|
### Props ActionButtonGroup
|
|
|
|
| Prop | Type | Default | Description |
|
|
|------|------|---------|-------------|
|
|
| children | ReactNode | - | Boutons enfants |
|
|
| align | string | 'center' | Alignement: 'left', 'center', 'right' |
|
|
| gap | string | '1' | Espacement: '1', '2', '3' |
|
|
|
|
### Exemples d'utilisation dans les tableaux
|
|
|
|
#### DataTable avec actions contextuelles
|
|
```tsx
|
|
const actionBodyTemplate = (rowData: any) => {
|
|
return (
|
|
<ActionButtonGroup>
|
|
<ViewButton
|
|
tooltip="Voir détails"
|
|
onClick={() => viewDetails(rowData)}
|
|
/>
|
|
|
|
{rowData.status === 'DRAFT' && (
|
|
<EditButton
|
|
tooltip="Modifier"
|
|
onClick={() => editItem(rowData)}
|
|
/>
|
|
)}
|
|
|
|
{rowData.canDelete && (
|
|
<DeleteButton
|
|
tooltip="Supprimer"
|
|
onClick={() => confirmDelete(rowData)}
|
|
/>
|
|
)}
|
|
</ActionButtonGroup>
|
|
);
|
|
};
|
|
```
|
|
|
|
#### Actions en en-tête de page
|
|
```tsx
|
|
<ActionButtonGroup align="right" gap="2">
|
|
<DownloadButton
|
|
tooltip="Exporter PDF"
|
|
onClick={handleExportPDF}
|
|
/>
|
|
<PrintButton
|
|
tooltip="Imprimer"
|
|
onClick={handlePrint}
|
|
/>
|
|
</ActionButtonGroup>
|
|
```
|
|
|
|
### Standards visuels
|
|
|
|
- **Style**: Tous les boutons utilisent `p-button-text` pour un rendu subtil
|
|
- **Forme**: Boutons ronds (`p-button-rounded`)
|
|
- **Taille**: Par défaut petite (`p-button-sm`)
|
|
- **Tooltips**: Toujours positionnés en haut
|
|
- **Couleurs**: Système cohérent basé sur l'action
|
|
- Actions neutres: Gris par défaut
|
|
- Actions positives: Vert (démarrer, valider, compléter)
|
|
- Actions d'information: Bleu (voir, télécharger)
|
|
- Actions de modification: Orange (éditer, pauser)
|
|
- Actions destructives: Rouge (supprimer)
|
|
- Actions spéciales: Violet (imprimer), Teal (reprendre)
|
|
|
|
### Intégration dans les pages existantes
|
|
|
|
Pour appliquer ces standards dans vos pages :
|
|
|
|
1. **Importez les composants nécessaires**
|
|
```tsx
|
|
import { ActionButtonGroup, ViewButton, EditButton, DeleteButton } from '../../components/ui/ActionButton';
|
|
```
|
|
|
|
2. **Remplacez les boutons existants**
|
|
```tsx
|
|
// Ancien style
|
|
<Button icon="pi pi-eye" className="p-button-text" onClick={handleView} />
|
|
<Button icon="pi pi-pencil" className="p-button-warning" onClick={handleEdit} />
|
|
|
|
// Nouveau style standardisé
|
|
<ActionButtonGroup>
|
|
<ViewButton tooltip="Voir" onClick={handleView} />
|
|
<EditButton tooltip="Modifier" onClick={handleEdit} />
|
|
</ActionButtonGroup>
|
|
```
|
|
|
|
3. **Adaptez selon le contexte**
|
|
- Utilisez les boutons prédéfinis quand possible
|
|
- Créez des boutons personnalisés avec `ActionButton` si nécessaire
|
|
- Groupez les actions logiquement avec `ActionButtonGroup`
|
|
|
|
### Maintenance et évolution
|
|
|
|
- **Cohérence**: Tous les boutons d'actions de l'application doivent utiliser ces composants
|
|
- **Extensibilité**: Ajoutez de nouveaux boutons prédéfinis selon les besoins
|
|
- **Accessibilité**: Les tooltips et l'état disabled sont automatiquement gérés
|
|
- **Responsive**: Les boutons s'adaptent automatiquement aux différentes tailles d'écran |