From d7c36dd5f2d945264977f164b7bc628a3453ae35 Mon Sep 17 00:00:00 2001 From: Matt Young Date: Wed, 29 May 2024 13:13:08 -0500 Subject: [PATCH] Sort student list --- app/Models/User.php | 5 +- public/js/sort_table_by_column.js | 50 +++++++++++++++++++ resources/js/app.js | 1 + .../views/components/layout/app.blade.php | 1 + resources/views/students/index.blade.php | 12 +++-- 5 files changed, 64 insertions(+), 5 deletions(-) create mode 100644 public/js/sort_table_by_column.js diff --git a/app/Models/User.php b/app/Models/User.php index faf010d..d956843 100644 --- a/app/Models/User.php +++ b/app/Models/User.php @@ -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'); } diff --git a/public/js/sort_table_by_column.js b/public/js/sort_table_by_column.js new file mode 100644 index 0000000..50848aa --- /dev/null +++ b/public/js/sort_table_by_column.js @@ -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) + ); + } + }; +} diff --git a/resources/js/app.js b/resources/js/app.js index ed53ac9..4221e1e 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,6 +1,7 @@ import './bootstrap'; import Alpine from 'alpinejs' + Alpine.start() window.Alpine = Alpine diff --git a/resources/views/components/layout/app.blade.php b/resources/views/components/layout/app.blade.php index 261e87c..bdc2f08 100644 --- a/resources/views/components/layout/app.blade.php +++ b/resources/views/components/layout/app.blade.php @@ -7,6 +7,7 @@ AuditionAdmin @vite(['resources/css/app.css', 'resources/js/app.js']) + @stack('scripts') diff --git a/resources/views/students/index.blade.php b/resources/views/students/index.blade.php index b22e414..4ab2468 100644 --- a/resources/views/students/index.blade.php +++ b/resources/views/students/index.blade.php @@ -1,8 +1,12 @@ @php use Illuminate\Support\Facades\Auth; @endphp +@push('scripts') +{{-- Code from https://codepen.io/ryangjchandler/pen/WNQQKeR--}} + +@endpush Students - + Students {{ $students->count() }} Before submitting entries, you must enter your students @@ -11,12 +15,12 @@ - Name - Grade + Name + Grade Edit - + @foreach($students as $student) {{ $student->full_name(true) }}