matt
/
auditionadmin
1
0
Fork 0
Code Issues 16 Pull Requests Packages Projects Releases Wiki Activity

Refactor room index for clarity

This commit is contained in:
Matt Young 2024-06-27 11:16:58 -05:00
parent 0ac9f67166
commit 920e2c5966
3 changed files with 72 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
resources/views/admin/rooms/index-room-card.blade.php Normal file
View File

@ -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>

35
resources/views/admin/rooms/index-sortablejs-script.blade.php Normal file
View File

@ -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>

83
resources/views/admin/rooms/index.blade.php
View File

@ -5,91 +5,22 @@
<div class="col-span-3"> {{-- Container for room cards --}}
<div class="grid md:grid-cols-3 gap-3">
@foreach($rooms as $room)
{{-- Room 0 should be at the end for unassigned auditions--}}
@if($room->id == '0')
@push('noRoom')
@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
@continue($room->id === 0)
@include('admin.rooms.index-room-card')
@endforeach()
</div>
</div>
<div> {{-- Unassigned Auditions --}}
@stack('noRoom')
@php
$room = $rooms->find(0);
@endphp
@include('admin.rooms.index-room-card')
</div>
</div>
<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>
@include('admin.rooms.index-sortablejs-script')
</x-layout.app>