88 lines
3.0 KiB
HTML
88 lines
3.0 KiB
HTML
<div class="min-h-screen flex flex-col gap-2">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Réunions</h1>
|
|
<button z-button (click)="openCreate()">Nouvelle réunion</button>
|
|
</div>
|
|
|
|
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<z-card class="text-center py-4">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Total des réunions</div>
|
|
<div class="text-3xl font-bold text-gray-900 dark:text-gray-100 mt-1">
|
|
{{ total() }}
|
|
</div>
|
|
</z-card>
|
|
|
|
<z-card class="text-center py-4">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Réunions à venir</div>
|
|
<div class="text-3xl font-bold text-blue-600 dark:text-blue-400 mt-1">
|
|
{{ upcomingReunions() }}
|
|
</div>
|
|
</z-card>
|
|
|
|
<z-card class="text-center py-4">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Réunions passées</div>
|
|
<div class="text-3xl font-bold text-amber-600 dark:text-amber-400 mt-1">
|
|
{{ pastReunions() }}
|
|
</div>
|
|
</z-card>
|
|
|
|
<z-card class="text-center py-4">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Hippodromes concernés</div>
|
|
<div class="text-3xl font-bold text-green-600 dark:text-green-400 mt-1">
|
|
{{ uniqueHippodromes() }}
|
|
</div>
|
|
</z-card>
|
|
</div>
|
|
|
|
<app-search-bar placeholder="Rechercher (nom, date, hippodrome…)" (search)="onSearch($event)" />
|
|
|
|
<div class="rounded-2xl overflow-hidden">
|
|
<app-data-table
|
|
[columns]="cols"
|
|
[data]="rows()"
|
|
[loading]="loading()"
|
|
[sort]="sort()"
|
|
(sortChange)="sort.set($event)"
|
|
>
|
|
<ng-template #rowActions let-row>
|
|
<div class="flex flex-row gap-2">
|
|
<button
|
|
class="p-1 rounded text-blue-600 hover:bg-blue-100 dark:text-blue-400 dark:hover:bg-gray-800 cursor-pointer"
|
|
(click)="openEdit(row)"
|
|
>
|
|
<lucide-angular name="folder-pen" class="size-5"></lucide-angular>
|
|
</button>
|
|
<button
|
|
class="p-1 rounded text-red-600 hover:bg-red-100 dark:text-red-400 dark:hover:bg-gray-800 cursor-pointer"
|
|
(click)="remove(row)"
|
|
>
|
|
<lucide-angular name="trash-2" class="size-5"></lucide-angular>
|
|
</button>
|
|
</div>
|
|
</ng-template>
|
|
</app-data-table>
|
|
|
|
<app-paginator
|
|
[page]="page()"
|
|
[perPage]="perPage()"
|
|
[total]="total()"
|
|
(pageChange)="page.set($event)"
|
|
(perPageChange)="perPage.set($event)"
|
|
[pageSizes]="pageSize"
|
|
/>
|
|
</div>
|
|
|
|
<app-modal [open]="modalOpen()" [title]="modalTitle()" size="md" (close)="closeModal()">
|
|
<app-reunion-form
|
|
[value]="editingItem()"
|
|
(save)="onFormSave($event)"
|
|
(cancel)="closeModal()"
|
|
></app-reunion-form>
|
|
|
|
<div modal-actions class="flex gap-2 justify-end">
|
|
<z-button zType="destructive" (click)="closeModal()">Annuler</z-button>
|
|
<z-button zType="default" (click)="submitChildForm()">Enregistrer</z-button>
|
|
</div>
|
|
</app-modal>
|
|
</div>
|