Refactor room index for clarity
This commit is contained in:
parent
0ac9f67166
commit
920e2c5966
|
|
@ -0,0 +1,30 @@
|
||||||
|
<x-card.card>
|
||||||
|
<x-card.heading>
|
||||||
|
{{ $room->name }}
|
||||||
|
<x-slot:subheading>{{ $room->description }}</x-slot:subheading>
|
||||||
|
<x-slot:right_side>
|
||||||
|
@if($room->entries->count() === 0 and $room->id != '0')
|
||||||
|
<div class="flex justify-end">
|
||||||
|
<x-form.form method="DELETE"
|
||||||
|
action="{{ route('admin.rooms.destroy', ['room'=>$room->id]) }}"
|
||||||
|
class="!px-0 -mr-6 -mt-2"
|
||||||
|
id="deleteResource">
|
||||||
|
<x-form.red-trash-button/>
|
||||||
|
</x-form.form>
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
<x-badge_pill>{{ $room->entries->count() }}</x-badge_pill>
|
||||||
|
@endif
|
||||||
|
</x-slot:right_side>
|
||||||
|
</x-card.heading>
|
||||||
|
<x-card.list.body id="room-{{ $room->id }}" class="audition-list">
|
||||||
|
|
||||||
|
@foreach($room->auditions as $audition)
|
||||||
|
<x-card.list.row class="!py-3" data-id="{{ $audition->id }}">
|
||||||
|
<x-badge_pill>{{ $audition->entries->count() }}</x-badge_pill>
|
||||||
|
<x-card.list.row-text-subtext>{{ $audition->name }}</x-card.list.row-text-subtext>
|
||||||
|
</x-card.list.row>
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
</x-card.list.body>
|
||||||
|
</x-card.card>
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<script>
|
||||||
|
function roomManager() {
|
||||||
|
return {
|
||||||
|
rooms: @json($rooms), // Pass rooms data from the controller
|
||||||
|
init() {
|
||||||
|
this.rooms.forEach(room => {
|
||||||
|
new Sortable(document.getElementById('room-' + room.id), {
|
||||||
|
group: 'shared',
|
||||||
|
animation: 150,
|
||||||
|
onEnd: this.updateOrder.bind(this)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updateOrder(event) {
|
||||||
|
let order = [];
|
||||||
|
event.to.querySelectorAll('li').forEach((el, index) => {
|
||||||
|
order.push({
|
||||||
|
id: el.dataset.id,
|
||||||
|
room_id: event.to.id.split('-')[1],
|
||||||
|
room_order: index
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch('/admin/auditions/roomUpdate', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
||||||
|
},
|
||||||
|
body: JSON.stringify(order)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -5,91 +5,22 @@
|
||||||
|
|
||||||
<div class="col-span-3"> {{-- Container for room cards --}}
|
<div class="col-span-3"> {{-- Container for room cards --}}
|
||||||
<div class="grid md:grid-cols-3 gap-3">
|
<div class="grid md:grid-cols-3 gap-3">
|
||||||
|
|
||||||
@foreach($rooms as $room)
|
@foreach($rooms as $room)
|
||||||
{{-- Room 0 should be at the end for unassigned auditions--}}
|
{{-- Room 0 should be at the end for unassigned auditions--}}
|
||||||
@if($room->id == '0')
|
@continue($room->id === 0)
|
||||||
@push('noRoom')
|
@include('admin.rooms.index-room-card')
|
||||||
@endif
|
|
||||||
<x-card.card>
|
|
||||||
<x-card.heading>
|
|
||||||
{{ $room->name }}
|
|
||||||
<x-slot:subheading>{{ $room->description }}</x-slot:subheading>
|
|
||||||
<x-slot:right_side>
|
|
||||||
@if($room->entries->count() === 0 and $room->id != '0')
|
|
||||||
<div class="flex justify-end">
|
|
||||||
<x-form.form method="DELETE"
|
|
||||||
action="{{ route('admin.rooms.destroy', ['room'=>$room->id]) }}"
|
|
||||||
class="!px-0 -mr-6 -mt-2"
|
|
||||||
id="deleteResource">
|
|
||||||
<x-form.red-trash-button/>
|
|
||||||
</x-form.form>
|
|
||||||
</div>
|
|
||||||
@else
|
|
||||||
<x-badge_pill>{{ $room->entries->count() }}</x-badge_pill>
|
|
||||||
@endif
|
|
||||||
</x-slot:right_side>
|
|
||||||
</x-card.heading>
|
|
||||||
<x-card.list.body id="room-{{ $room->id }}" class="audition-list">
|
|
||||||
|
|
||||||
@foreach($room->auditions as $audition)
|
|
||||||
<x-card.list.row class="!py-3" data-id="{{ $audition->id }}">
|
|
||||||
<x-badge_pill>{{ $audition->entries->count() }}</x-badge_pill>
|
|
||||||
<x-card.list.row-text-subtext>{{ $audition->name }}</x-card.list.row-text-subtext>
|
|
||||||
</x-card.list.row>
|
|
||||||
@endforeach
|
|
||||||
|
|
||||||
</x-card.list.body>
|
|
||||||
|
|
||||||
</x-card.card>
|
|
||||||
@if($room->id == '0')
|
|
||||||
@endpush
|
|
||||||
@endif
|
|
||||||
@endforeach()
|
@endforeach()
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div> {{-- Unassigned Auditions --}}
|
<div> {{-- Unassigned Auditions --}}
|
||||||
@stack('noRoom')
|
@php
|
||||||
|
$room = $rooms->find(0);
|
||||||
|
@endphp
|
||||||
|
@include('admin.rooms.index-room-card')
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
@include('admin.rooms.index-sortablejs-script')
|
||||||
function roomManager() {
|
|
||||||
return {
|
|
||||||
rooms: @json($rooms), // Pass rooms data from the controller
|
|
||||||
init() {
|
|
||||||
this.rooms.forEach(room => {
|
|
||||||
new Sortable(document.getElementById('room-' + room.id), {
|
|
||||||
group: 'shared',
|
|
||||||
animation: 150,
|
|
||||||
onEnd: this.updateOrder.bind(this)
|
|
||||||
});
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateOrder(event) {
|
|
||||||
let order = [];
|
|
||||||
event.to.querySelectorAll('li').forEach((el, index) => {
|
|
||||||
order.push({
|
|
||||||
id: el.dataset.id,
|
|
||||||
room_id: event.to.id.split('-')[1],
|
|
||||||
room_order: index
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
fetch('/admin/auditions/roomUpdate', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'X-CSRF-TOKEN': '{{ csrf_token() }}'
|
|
||||||
},
|
|
||||||
body: JSON.stringify(order)
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</x-layout.app>
|
</x-layout.app>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue