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

Sort student list

This commit is contained in:
Matt Young 2024-05-29 13:13:08 -05:00
parent bb52d0f9c5
commit d7c36dd5f2
5 changed files with 64 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/Models/User.php
View File

@ -72,7 +72,10 @@ class User extends Authenticatable implements MustVerifyEmail
public function students(): HasManyThrough
{
return $this->hasManyThrough(Student::class, School::class, 'id','school_id','school_id','id');
return $this
->hasManyThrough(Student::class, School::class, 'id','school_id','school_id','id')
->orderBy('last_name','asc')
->orderBy('first_name','asc');
}

50
public/js/sort_table_by_column.js Normal file
View File

@ -0,0 +1,50 @@
function data() {
return {
sortBy: "",
sortAsc: false,
sortByColumn($event) {
if (this.sortBy === $event.target.innerText) {
if (this.sortAsc) {
this.sortBy = "";
this.sortAsc = false;
} else {
this.sortAsc = !this.sortAsc;
}
} else {
this.sortBy = $event.target.innerText;
}
let rows = this.getTableRows()
.sort(
this.sortCallback(
Array.from($event.target.parentNode.children).indexOf(
$event.target
)
)
)
.forEach((tr) => {
this.$refs.tbody.appendChild(tr);
});
},
getTableRows() {
return Array.from(this.$refs.tbody.querySelectorAll("tr"));
},
getCellValue(row, index) {
return row.children[index].innerText;
},
sortCallback(index) {
return (a, b) =>
((row1, row2) => {
return row1 !== "" &&
row2 !== "" &&
!isNaN(row1) &&
!isNaN(row2)
? row1 - row2
: row1.toString().localeCompare(row2);
})(
this.getCellValue(this.sortAsc ? a : b, index),
this.getCellValue(this.sortAsc ? b : a, index)
);
}
};
}

1
resources/js/app.js
View File

@ -1,6 +1,7 @@
import './bootstrap';
import Alpine from 'alpinejs'
Alpine.start()
window.Alpine = Alpine

1
resources/views/components/layout/app.blade.php
View File

@ -7,6 +7,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AuditionAdmin</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@stack('scripts')
</head>
<body class="h-full">

12
resources/views/students/index.blade.php
View File

@ -1,8 +1,12 @@
@php use Illuminate\Support\Facades\Auth; @endphp
@push('scripts')
{{-- Code from https://codepen.io/ryangjchandler/pen/WNQQKeR--}}
<script src="{{ asset('js/sort_table_by_column.js') }}"></script>
@endpush
<x-layout.app>
<x-slot:page_title>Students</x-slot:page_title>
<x-table.container class="mx-auto max-w-2xl">
<x-table.container class="mx-auto max-w-2xl" x-data="data()">
<x-table.title_above_table>
<x-slot:title>Students <x-badge_pill>{{ $students->count() }}</x-badge_pill></x-slot:title>
<x-slot:subtitle>Before submitting entries, you must enter your students</x-slot:subtitle>
@ -11,12 +15,12 @@
<x-table.table>
<x-table.table_header_row>
<x-table.th first>Name</x-table.th>
<x-table.th>Grade</x-table.th>
<x-table.th first @click="sortByColumn" class="cursor-pointer select-none">Name</x-table.th>
<x-table.th @click="sortByColumn" class="cursor-pointer select-none">Grade</x-table.th>
<x-table.th :placeholder="true">
<span class="sr-only">Edit</span>
</x-table.th>
<x-table.body>
<x-table.body x-ref="tbody">
@foreach($students as $student)
<tr>
<x-table.td :first="true">{{ $student->full_name(true) }}</x-table.td>