81 lines
3.3 KiB
PHP
81 lines
3.3 KiB
PHP
<x-layout.app>
|
|
<x-slot:page_title>Audition Administration</x-slot:page_title>
|
|
|
|
<x-card.card>
|
|
<x-table.table with_title_area>
|
|
<x-slot:title class="ml-3">Auditions</x-slot:title>
|
|
<x-slot:subtitle class="ml-3">Click name to edit</x-slot:subtitle>
|
|
<x-slot:title_block_right class="mr-3">
|
|
<x-form.button href="/admin/entries/create">New Audition</x-form.button>
|
|
</x-slot:title_block_right>
|
|
|
|
<thead>
|
|
<tr>
|
|
<x-table.th>Event</x-table.th>
|
|
<x-table.th>Name</x-table.th>
|
|
<x-table.th>Order</x-table.th>
|
|
<x-table.th>Deadline</x-table.th>
|
|
<x-table.th>Entry Fee</x-table.th>
|
|
<x-table.th>Grade Range</x-table.th>
|
|
<x-table.th>Entries</x-table.th>
|
|
|
|
|
|
</tr>
|
|
</thead>
|
|
<div x-data="sortableList()" x-init="init">
|
|
<x-table.body id="sortable-list">
|
|
@foreach($auditions as $audition)
|
|
<tr data-id="{{ $audition->id }}">
|
|
<x-table.td>{{ $audition->event->name }}</x-table.td>
|
|
<x-table.td>{{ $audition->name }}</x-table.td>
|
|
<x-table.td>{{ $audition->score_order }}</x-table.td>
|
|
<x-table.td>{{ $audition->entry_deadline }}</x-table.td>
|
|
<x-table.td>{{ $audition->dislpay_fee() }}</x-table.td>
|
|
<x-table.td>{{ $audition->minimum_grade }} - {{ $audition->maximum_grade }}</x-table.td>
|
|
<x-table.td>{{ $audition->entries->count() }}</x-table.td>
|
|
</tr>
|
|
@endforeach
|
|
</x-table.body>
|
|
</div>
|
|
</x-table.table>
|
|
|
|
</x-card.card>
|
|
<div class="mt-3 mx-3">
|
|
{{-- {{ $auditions->links('vendor.pagination.simple-audition') }}--}}
|
|
</div>
|
|
|
|
<script>
|
|
function sortableList() {
|
|
return {
|
|
init() {
|
|
let el = document.getElementById('sortable-list');
|
|
let sortable = Sortable.create(el, {
|
|
onEnd: function (evt) {
|
|
let order = Array.from(el.children).map((item, index) => item.getAttribute('data-id'));
|
|
fetch('/admin/auditions/reorder', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
},
|
|
body: JSON.stringify({ order })
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
console.log('Order updated successfully');
|
|
}
|
|
else {
|
|
console.log(data.status);
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
</x-layout.app>
|
|
{{--TODO add options to filter the page--}}
|