92 lines
4.1 KiB
PHP
92 lines
4.1 KiB
PHP
<div style="margin: 0 24px; padding: 24px 0">
|
|
@if (session()->has('success'))
|
|
<div class="alert alert-success">{{ session('success') }}</div>
|
|
@endif
|
|
@if (session()->has('error'))
|
|
<div class="alert alert-danger">{{ session('error') }}</div>
|
|
@endif
|
|
@if (session()->has('info'))
|
|
<div class="alert alert-info">{{ session('info') }}</div>
|
|
@endif
|
|
|
|
<div wire:loading wire:target="fetchData" class="loading-overlay">
|
|
Loading...
|
|
</div>
|
|
|
|
<div style="margin-bottom: 16px; margin-top: 16px">
|
|
<input type="text" wire:model.debounce.1000ms="search" placeholder="Search" class="ant-input">
|
|
<span class="ant-input-prefix" style="color: rgba(0,0,0,.25)">
|
|
<i class="anticon anticon-search"></i>
|
|
</span>
|
|
<button wire:click="handleBatchDelete" class="ant-btn ant-btn-danger" disabled="{{ count($selectedRowKeys) === 0 }}">
|
|
Delete All
|
|
</button>
|
|
<span style="margin-left: 8px">
|
|
{{ count($selectedRowKeys) > 0 ? "Selected " . count($selectedRowKeys) . " items" : '' }}
|
|
</span>
|
|
</div>
|
|
|
|
<table class="ant-table ant-table-middle" wire:loading.class="loading">
|
|
<thead>
|
|
<tr>
|
|
@foreach($columns as $column)
|
|
<th>
|
|
{{ $column['title'] }}
|
|
</th>
|
|
@endforeach
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($data as $record)
|
|
<tr>
|
|
@foreach($columns as $column)
|
|
<td>{{ $record[$column['dataIndex']] ?? '' }}</td>
|
|
@endforeach
|
|
<td>
|
|
@foreach($column['renderActions'] ?? [] as $action)
|
|
@if($action['action_name'] === 'delete')
|
|
<button wire:click="delete('{{ $action['path'] }}', {{ $record[$keyValue] }})" class="ant-btn ant-btn-danger">
|
|
Delete
|
|
</button>
|
|
@else
|
|
<button class="ant-btn ant-btn-primary" wire:click="redirect('{{ $action['action_name'] }}', '{{ $action['path'] }}', {{ $record[$keyValue] }})">
|
|
{{ $action['action_name'] }}
|
|
</button>
|
|
@endif
|
|
@endforeach
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
@if($total > 0)
|
|
<div style="float: right; margin-top: 16px">
|
|
<ul class="ant-pagination">
|
|
@for($i = 1; $i <= ceil($total / $perPage); $i++)
|
|
<li class="{{ $currentPage === $i ? 'ant-pagination-item-active' : 'ant-pagination-item' }}" wire:click="updatePage({{ $i }})">
|
|
{{ $i }}
|
|
</li>
|
|
@endfor
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<style>
|
|
.row-type-flex { display: flex; justify-content: space-between; align-items: bottom; }
|
|
.justify-space-between { justify-content: space-between; }
|
|
.align-bottom { align-items: bottom; }
|
|
.table-operations > button { margin-right: 8px; }
|
|
.ant-table { width: 100%; border-collapse: collapse; }
|
|
.ant-table th, .ant-table td { border: 1px solid #f0f0f0; padding: 8px; text-align: left; }
|
|
.ant-table th { background: #fafafa; cursor: pointer; }
|
|
.ant-table-column-sort { background: #e6f7ff; }
|
|
.ant-btn { padding: 0 15px; height: 32px; border: 1px solid #d9d9d9; border-radius: 4px; cursor: pointer; }
|
|
.ant-btn-primary { background: #1890ff; color: white; border-color: #1890ff; }
|
|
.ant-btn-danger { background: #ff4d4f; color: white; border-color: #ff4d4f; }
|
|
.loading-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); color: white; text-align: center; padding-top: 20%; z-index: 1000; }
|
|
.ant-input { border: 1px solid #d9d9d9; border-radius: 4px; padding: 4px 11px; }
|
|
.ant-input-prefix { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); }
|
|
</style> |