119 lines
5.5 KiB
PHP
119 lines
5.5 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 class="row-type-flex justify-space-between align-bottom" style="padding-bottom: 25px">
|
|
<div>
|
|
<input type="text" wire:model.debounce.1000ms="searchFilter" style="width: 300px"
|
|
placeholder="Search" class="ant-input">
|
|
<span class="ant-input-prefix" style="color: rgba(0,0,0,.25)">
|
|
<i class="anticon anticon-search"></i>
|
|
</span>
|
|
</div>
|
|
<div class="table-operations">
|
|
<button wire:click="clearAll" class="ant-btn">Clear filters</button>
|
|
@if ($url['csv'])
|
|
<div>Export Dropdown Placeholder</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<table class="ant-table ant-table-middle" wire:loading.class="loading">
|
|
<thead>
|
|
<tr>
|
|
@foreach($columns as $column)
|
|
<th wire:click="setSort('{{ $column['dataIndex'] }}')"
|
|
class="{{ $sortBy === $column['dataIndex'] ? 'ant-table-column-sort' : '' }}
|
|
{{ $sortOrder === 'asc' ? 'ascend' : 'descend' }}">
|
|
{{ $column['title'] }}
|
|
<span class="ant-table-column-sorter">
|
|
<span class="ant-table-column-sorter-inner">
|
|
<i class="anticon anticon-caret-up"></i>
|
|
<i class="anticon anticon-caret-down"></i>
|
|
</span>
|
|
</span>
|
|
</th>
|
|
@endforeach
|
|
@if($apiDelete)
|
|
<th>Action</th>
|
|
@endif
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($data as $record)
|
|
<tr>
|
|
@foreach($columns as $column)
|
|
<td>{{ $record[$column['dataIndex']] ?? '' }}</td>
|
|
@endforeach
|
|
@if($apiDelete)
|
|
<td>
|
|
@foreach($column['buttons'] ?? [] as $action)
|
|
@if($action['key'] === 'delete' && $record['editable'] !== false)
|
|
<button wire:click="delete({{ $record[$keyValue] }})" class="ant-btn ant-btn-danger">
|
|
Delete
|
|
</button>
|
|
@elseif(in_array($action['key'], ['edit', 'view', 'location']))
|
|
<button class="ant-btn ant-btn-primary" wire:click="redirect('{{ $action['key'] }}', {{ $record[$keyValue] }})">
|
|
{{ ucfirst($action['key']) }}
|
|
</button>
|
|
@endif
|
|
@endforeach
|
|
</td>
|
|
@endif
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
|
|
@if($total > 0)
|
|
<div class="row-type-flex justify-space-between" style="margin-top: 20px">
|
|
<div>
|
|
@if($apiDelete)
|
|
<button wire:click="handleBatchDelete" class="ant-btn ant-btn-danger" disabled="{{ count($selectedRowKeys) === 0 }}">
|
|
Delete
|
|
</button>
|
|
<span style="margin-left: 8px">
|
|
{{ count($selectedRowKeys) > 0 ? "Selected " . count($selectedRowKeys) . " item(s)" : '' }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<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>
|
|
</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%); color: rgba(0,0,0,.25); }
|
|
</style> |