feat(planning): gestion des camions, filtres et layout

- Dashboard réduit en barre de navigation compacte
- Mini calendrier démarrant le lundi (NZ_DATE_CONFIG)
- Bouton "Nouveau spectacle" déplacé dans la barre du haut
- Assignation / désassignation de camions sur les spectacles
- Création et modification de camions depuis le planning
- Plaque d'immatriculation + sélecteur de statut dans le formulaire camion
- Scroll du panneau droit corrigé (:host flex)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-02 18:51:04 +02:00
parent 91e220fb47
commit e968df526d
6 changed files with 346 additions and 73 deletions
+96 -23
View File
@@ -39,6 +39,12 @@
</svg>
</button>
</div>
<button class="new-show-btn" (click)="showModal()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M12 5v14M5 12h14" stroke-width="2.5" stroke-linecap="round"/>
</svg>
Nouveau spectacle
</button>
</div>
<div class="week-calendar" #weekCalendar>
@@ -151,6 +157,24 @@
</div>
<p *ngIf="show.place">{{ show.place }}</p>
<p *ngIf="show.description">{{ show.description }}</p>
<div class="show-trucks-row">
@for (truck of getTrucksForShow(show.id!); track truck.id) {
<span class="truck-tag">
{{ truck.type }}
<button class="truck-edit" (click)="openEditTruckModal(truck)"></button>
<button class="truck-remove" (click)="removeTruck(truck.id!)">×</button>
</span>
}
@if (getAvailableTrucks().length > 0) {
<select class="truck-select" (change)="onTruckAssign($event, show.id!)">
<option value="">+ Assigner</option>
@for (truck of getAvailableTrucks(); track truck.id) {
<option [value]="truck.id">{{ truck.type }}</option>
}
</select>
}
<button class="truck-create-btn" (click)="showTruckModal(show.id!)">+ Nouveau</button>
</div>
</div>
}
</div>
@@ -175,7 +199,10 @@
<div class="show-card truck-card">
<div class="show-card-header">
<strong>{{ truck.type || 'Camion' }}</strong>
<span class="truck-statut" *ngIf="truck.statut">{{ truck.statut }}</span>
<div style="display:flex; align-items:center; gap:6px;">
<span class="truck-statut" *ngIf="truck.statut">{{ truck.statut }}</span>
<button class="truck-edit-card" (click)="openEditTruckModal(truck)"></button>
</div>
</div>
<p *ngIf="truck.sizes">Taille : {{ truck.sizes }}</p>
<p *ngIf="truck.maxExplosiveCapacity">Capacité : {{ truck.maxExplosiveCapacity }} kg</p>
@@ -185,28 +212,6 @@
}
</div>
<div class="sidebar-block">
<h4>
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<circle cx="12" cy="12" r="3" stroke-width="2"/>
<path d="M12 1v6m0 6v6M1 12h6m6 0h6" stroke-width="2" stroke-linecap="round"/>
</svg>
Actions rapides
</h4>
<button class="sidebar-btn" (click)="showModal()">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M12 5v14M5 12h14" stroke-width="2" stroke-linecap="round"/>
</svg>
Créer un spectacle
</button>
<button class="sidebar-btn">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" stroke-width="2"/>
<polyline points="14 2 14 8 20 8" stroke-width="2"/>
</svg>
Voir rapports
</button>
</div>
</div>
</div>
@@ -282,4 +287,72 @@
</div>
</div>
</ng-container>
</nz-modal>
<nz-modal
[nzVisible]="isTruckModalVisible()"
(nzVisibleChange)="isTruckModalVisible.set($event)"
[nzFooter]="null"
[nzWidth]="440"
(nzOnCancel)="handleTruckCancel()">
<ng-container *nzModalContent>
<div class="create-form">
<div class="create-form-title">
<div class="create-form-icon" style="background: linear-gradient(135deg, #605DC8, #4e4aaa)">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<rect x="1" y="3" width="15" height="13" rx="2" ry="2" stroke-width="1.5"/>
<path d="M16 8h5l3 3v5h-4" stroke-width="1.5"/>
<circle cx="5.5" cy="18.5" r="2.5" stroke-width="1.5"/>
<circle cx="18.5" cy="18.5" r="2.5" stroke-width="1.5"/>
</svg>
</div>
<div>
<h3>{{ editTruckId ? 'Modifier le camion' : 'Nouveau camion' }}</h3>
<p>{{ editTruckId ? 'Modifiez les informations du camion' : 'Renseignez les informations du camion' }}</p>
</div>
</div>
<div class="form-field">
<label class="form-label">Plaque d'immatriculation <span class="form-required">*</span></label>
<input class="form-input" placeholder="Ex: AB-123-CD"
[(ngModel)]="newTruck.type" name="truckType"/>
</div>
<div class="form-row-2">
<div class="form-field">
<label class="form-label">Dimensions</label>
<input class="form-input" placeholder="Ex: 12m x 2.5m"
[(ngModel)]="newTruck.sizes" name="truckSizes"/>
</div>
<div class="form-field">
<label class="form-label">Capacité max (kg)</label>
<input class="form-input" type="number" placeholder="Ex: 500"
[(ngModel)]="newTruck.maxExplosiveCapacity" name="truckCapacity"/>
</div>
</div>
<div class="form-field">
<label class="form-label">Statut</label>
<select class="form-input" [(ngModel)]="newTruck.status" name="truckStatus">
<option value="">-- Choisir un statut --</option>
<option value="Disponible">Disponible</option>
<option value="Indisponible">Indisponible</option>
<option value="En panne">En panne</option>
<option value="En maintenance">En maintenance</option>
<option value="En déplacement">En déplacement</option>
</select>
</div>
<div class="form-actions">
<button class="form-btn-cancel" (click)="handleTruckCancel()">Annuler</button>
<button class="form-btn-submit" [disabled]="!newTruck.type" (click)="handleTruckOk()"
style="background: linear-gradient(135deg, #605DC8, #4e4aaa)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M12 5v14M5 12h14" stroke-width="2.5" stroke-linecap="round"/>
</svg>
{{ editTruckId ? 'Enregistrer' : 'Créer le camion' }}
</button>
</div>
</div>
</ng-container>
</nz-modal>