Marvin
657c5ad5e3
- Added `barryvdh/laravel-dompdf` to `composer.json` for PDF generation capabilities. - Updated `boost.json` to include `tailwindcss-development` in skills. - Modified `package.json` and `package-lock.json` to upgrade Tailwind CSS and related packages. - Improved README.md for clarity and corrected French language errors. - Created design system documentation for Filament components. - Added new Filament pages for Dashboard and Documentation with dynamic content loading. - Enhanced TablesExplorer functionality with improved table and column management.
149 lines
9.4 KiB
PHP
149 lines
9.4 KiB
PHP
<x-filament-panels::page>
|
|
<x-logistics.error-banner :message="$errorMessage" />
|
|
|
|
@if ($tablesMetadata)
|
|
<x-logistics.stat-bar>
|
|
<x-logistics.stat-item icon="heroicon-o-server" :value="$tablesMetadata['endpoint'] ?? '-'" />
|
|
<x-logistics.stat-item icon="heroicon-o-circle-stack" label="Type :" :value="$tablesMetadata['folderType'] ?? '-'" />
|
|
<x-logistics.stat-item icon="heroicon-o-table-cells" :value="($tablesMetadata['tableCount'] ?? count($tables)) . ' table(s)'" />
|
|
</x-logistics.stat-bar>
|
|
@endif
|
|
|
|
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
|
|
{{-- Panneau gauche : liste des tables --}}
|
|
<x-logistics.card class="lg:col-span-1">
|
|
<x-logistics.section-header
|
|
title="Tables disponibles"
|
|
description="Sélectionnez une table pour explorer ses colonnes."
|
|
/>
|
|
|
|
@if (count($tables) > 6)
|
|
<div class="px-6 pt-4">
|
|
<x-logistics.search-input
|
|
wire:model.live.debounce.200ms="tableFilter"
|
|
placeholder="Filtrer les tables..."
|
|
/>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="max-h-[32rem] space-y-0.5 overflow-y-auto p-2">
|
|
@forelse ($this->filteredTables as $table)
|
|
@php
|
|
$tableName = $table['name'] ?? '';
|
|
$columnCount = $table['columnCount'] ?? 0;
|
|
$isSelected = $selectedTable === $tableName;
|
|
@endphp
|
|
<button
|
|
wire:click="selectTable('{{ $tableName }}')"
|
|
wire:key="table-{{ $tableName }}"
|
|
@class([
|
|
'flex w-full items-center justify-between rounded-lg px-3 py-2.5 text-left text-sm transition-colors',
|
|
'bg-primary-50 text-primary-700 ring-1 ring-primary-200 dark:bg-primary-400/10 dark:text-primary-400 dark:ring-primary-400/30' => $isSelected,
|
|
'text-gray-700 hover:bg-gray-50 dark:text-gray-300 dark:hover:bg-white/5' => ! $isSelected,
|
|
])
|
|
>
|
|
<div class="flex items-center gap-2.5">
|
|
<x-filament::icon
|
|
icon="heroicon-o-table-cells"
|
|
@class([
|
|
'h-4 w-4 shrink-0',
|
|
'text-primary-500 dark:text-primary-400' => $isSelected,
|
|
'text-gray-400' => ! $isSelected,
|
|
])
|
|
/>
|
|
<span class="font-mono font-medium">{{ $tableName }}</span>
|
|
</div>
|
|
<span @class([
|
|
'rounded-full px-2 py-0.5 text-xs font-medium tabular-nums',
|
|
'bg-primary-100 text-primary-700 dark:bg-primary-400/20 dark:text-primary-300' => $isSelected,
|
|
'bg-gray-100 text-gray-500 dark:bg-white/10 dark:text-gray-400' => ! $isSelected,
|
|
])>
|
|
{{ $columnCount }}
|
|
</span>
|
|
</button>
|
|
@empty
|
|
<x-logistics.empty-state
|
|
icon="heroicon-o-table-cells"
|
|
:title="filled($tableFilter) ? 'Aucune table ne correspond au filtre.' : 'Aucune table trouvée.'"
|
|
:description="filled($tableFilter) ? null : 'Vérifiez votre clé API.'"
|
|
/>
|
|
@endforelse
|
|
</div>
|
|
</x-logistics.card>
|
|
|
|
{{-- Panneau droit : colonnes de la table selectionnee --}}
|
|
<x-logistics.card class="lg:col-span-2">
|
|
<x-logistics.section-header :title="$selectedTable ? 'Colonnes de ' . $selectedTable : 'Colonnes'">
|
|
<x-slot:actions>
|
|
@if ($columnsMetadata && $selectedTable)
|
|
<span class="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium tabular-nums text-gray-600 dark:bg-white/10 dark:text-gray-300">
|
|
{{ $columnsMetadata['columnCount'] ?? count($columns) }} colonne(s)
|
|
</span>
|
|
@endif
|
|
</x-slot:actions>
|
|
</x-logistics.section-header>
|
|
|
|
<div class="p-6">
|
|
@if ($selectedTable)
|
|
<div wire:loading wire:target="selectTable" class="flex items-center justify-center py-12">
|
|
<x-filament::loading-indicator class="h-6 w-6 text-primary-500" />
|
|
<span class="ml-3 text-sm text-gray-500">Chargement des colonnes...</span>
|
|
</div>
|
|
|
|
<div wire:loading.remove wire:target="selectTable">
|
|
@if (count($columns) > 0)
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left text-sm">
|
|
<thead>
|
|
<tr class="border-b border-gray-200 dark:border-white/10">
|
|
<th class="px-3 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Nom</th>
|
|
<th class="px-3 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Type</th>
|
|
<th class="px-3 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Longueur</th>
|
|
<th class="px-3 py-2.5 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Précision</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100 dark:divide-white/5">
|
|
@foreach ($columns as $column)
|
|
@php
|
|
$dataType = strtoupper($column['dataType'] ?? '');
|
|
$typeLabel = \App\Filament\Pages\TablesExplorer::getDataTypeLabel($dataType);
|
|
@endphp
|
|
<tr class="transition-colors hover:bg-gray-50 dark:hover:bg-white/5">
|
|
<td class="px-3 py-2.5">
|
|
<span class="font-mono text-sm font-medium text-gray-900 dark:text-white">{{ $column['name'] ?? '-' }}</span>
|
|
</td>
|
|
<td class="px-3 py-2.5">
|
|
<span @class([
|
|
'inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset',
|
|
'bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:ring-blue-400/30' => $dataType === 'C',
|
|
'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-400 dark:ring-emerald-400/30' => $dataType === 'N',
|
|
'bg-violet-50 text-violet-700 ring-violet-600/20 dark:bg-violet-400/10 dark:text-violet-400 dark:ring-violet-400/30' => in_array($dataType, ['T', 'D']),
|
|
'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-400 dark:ring-amber-400/30' => $dataType === 'L',
|
|
'bg-gray-50 text-gray-700 ring-gray-600/20 dark:bg-gray-400/10 dark:text-gray-400 dark:ring-gray-400/30' => ! in_array($dataType, ['C', 'N', 'T', 'D', 'L']),
|
|
])>
|
|
{{ $typeLabel }}
|
|
</span>
|
|
</td>
|
|
<td class="px-3 py-2.5 tabular-nums text-gray-600 dark:text-gray-300">{{ $column['length'] ?? '-' }}</td>
|
|
<td class="px-3 py-2.5 tabular-nums text-gray-600 dark:text-gray-300">{{ $column['precision'] ?? '-' }}</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@else
|
|
<x-logistics.empty-state icon="heroicon-o-inbox" title="Aucune colonne trouvée pour cette table." />
|
|
@endif
|
|
</div>
|
|
@else
|
|
<x-logistics.empty-state
|
|
icon="heroicon-o-cursor-arrow-rays"
|
|
title="Aucune table sélectionnée"
|
|
description="Choisissez une table dans la liste pour afficher ses colonnes."
|
|
/>
|
|
@endif
|
|
</div>
|
|
</x-logistics.card>
|
|
</div>
|
|
</x-filament-panels::page>
|