ソート機能追加
All checks were successful
Deploy main / deploy (push) Successful in 27s

This commit is contained in:
你的名字 2025-09-09 20:09:28 +09:00
parent af44534048
commit 1de2a0f022
2 changed files with 110 additions and 125 deletions

View File

@ -17,7 +17,7 @@
<div class="card mb-3"> <div class="card mb-3">
<div class="card-body"> <div class="card-body">
<form method="GET" action="{{ route('seals') }}"> <form method="GET" action="{{ route('seals') }}">
<div class="row mb-3"> <div class="row mb-3 align-items-center">
<label class="col-sm-2 col-form-label fw-bold">シール発行駐輪場</label> <label class="col-sm-2 col-form-label fw-bold">シール発行駐輪場</label>
<div class="col-sm-4"> <div class="col-sm-4">
<select name="park_id" class="form-select"> <select name="park_id" class="form-select">
@ -29,9 +29,9 @@
</div> </div>
</div> </div>
<div class="row mb-3 align-items-center"> <div class="row mb-3 align-items-center">
<label class="col-sm-2 col-form-label fw-bold">発行日</label> <label class="col-sm-2 col-form-label fw-bold py-0">発行日</label>
<div class="col-sm-10"> <div class="col-sm-10">
<div class="row g-2 align-items-center mb-2"> <div class="row g-2 align-items-center mb-0">
<div class="col-auto"> <div class="col-auto">
<div class="form-check form-check-inline"> <div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="period_type" id="period_type_range" value="range" {{ request('period_type', 'range') == 'range' ? 'checked' : '' }}> <input class="form-check-input" type="radio" name="period_type" id="period_type_range" value="range" {{ request('period_type', 'range') == 'range' ? 'checked' : '' }}>
@ -79,64 +79,42 @@
</div> </div>
<!-- データテーブル --> <!-- データテーブル -->
<div class="table-responsive"> <style>
<table class="table table-bordered table-hover table-sm"> /* このページ限定:テーブルの右端/下端線を常に表示 */
#seals-table-wrapper {
border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
}
</style>
<div id="seals-table-wrapper" class="table-responsive">
<table class="table table-bordered table-hover table-sm dataTable">
<thead class="thead-light"> <thead class="thead-light">
<tr> <tr>
<th> <th class="sorting {{ ($sort=='seal_issueid') ? ($sort_type=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="seal_issueid" style="cursor:pointer;">
<a href="{{ route('seals', array_merge(request()->all(), ['sort' => 'seal_issueid', 'sort_type' => ($sort === 'seal_issueid' && $sort_type === 'asc') ? 'desc' : 'asc'])) }}"> シール発行履歴ID
シール発行履歴ID
@if($sort === 'seal_issueid')
<i class="fa fa-sort-{{ $sort_type }}"></i>
@endif
</a>
</th> </th>
<th> <th class="sorting {{ ($sort=='park_id') ? ($sort_type=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="park_id" style="cursor:pointer;">
<a href="{{ route('seals', array_merge(request()->all(), ['sort' => 'park_id', 'sort_type' => ($sort === 'park_id' && $sort_type === 'asc') ? 'desc' : 'asc'])) }}"> シール発行駐輪場
シール発行駐輪場
@if($sort === 'park_id')
<i class="fa fa-sort-{{ $sort_type }}"></i>
@endif
</a>
</th> </th>
<th> <th class="sorting {{ ($sort=='contract_id') ? ($sort_type=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="contract_id" style="cursor:pointer;">
<a href="{{ route('seals', array_merge(request()->all(), ['sort' => 'contract_id', 'sort_type' => ($sort === 'contract_id' && $sort_type === 'asc') ? 'desc' : 'asc'])) }}"> 定期契約ID
定期契約ID
@if($sort === 'contract_id')
<i class="fa fa-sort-{{ $sort_type }}"></i>
@endif
</a>
</th> </th>
<th>車種区分ID</th> <th>車種区分ID</th>
<th> <th class="sorting {{ ($sort=='seal_day') ? ($sort_type=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="seal_day" style="cursor:pointer;">
<a href="{{ route('seals', array_merge(request()->all(), ['sort' => 'seal_day', 'sort_type' => ($sort === 'seal_day' && $sort_type === 'asc') ? 'desc' : 'asc'])) }}"> 発行日
発行日
@if($sort === 'seal_day')
<i class="fa fa-sort-{{ $sort_type }}"></i>
@endif
</a>
</th> </th>
<th> <th class="sorting {{ ($sort=='contract_seal_issue') ? ($sort_type=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="contract_seal_issue" style="cursor:pointer;">
<a href="{{ route('seals', array_merge(request()->all(), ['sort' => 'contract_seal_issue', 'sort_type' => ($sort === 'contract_seal_issue' && $sort_type === 'asc') ? 'desc' : 'asc'])) }}"> 発行回数
発行回数
@if($sort === 'contract_seal_issue')
<i class="fa fa-sort-{{ $sort_type }}"></i>
@endif
</a>
</th> </th>
<th>理由</th> <th>理由</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody class="bg-white">
@foreach($list as $item) @foreach($list as $item)
<tr> <tr>
<td>{{ $item->seal_issueid }}</td> <td>{{ $item->seal_issueid }}</td>
<td>{{ $item->park_name ?? $item->park_id }}</td> <td>{{ $item->park_name ?? $item->park_id }}</td>
<td> <td>{{ $item->contract_id }}</td>
{{-- @if($item->contract_id)
<a href="{{ route('contracts.show', ['contract' => $item->contract_id]) }}" target="_blank">{{ $item->contract_id }}</a>
@endif --}}
</td>
<td>{{ $item->psection_name ?? $item->psection_id }}</td> <td>{{ $item->psection_name ?? $item->psection_id }}</td>
<td>{{ $item->seal_day }}</td> <td>{{ $item->seal_day }}</td>
<td>{{ $item->contract_seal_issue }}</td> <td>{{ $item->contract_seal_issue }}</td>
@ -145,10 +123,30 @@
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
<div class="d-flex align-items-center mb-2"> </div>
<div class="ms-auto"> <div class="d-flex align-items-center mb-2">
{{ $list->appends(request()->except('page'))->links('pagination') }} @push('scripts')
</div> <script>
// タグ発行キュー処理と同じソート挙動
document.querySelectorAll('th.sorting').forEach(th => {
th.addEventListener('click', function(){
const url = new URL(window.location.href);
const current = url.searchParams.get('sort') || '';
const currentType = url.searchParams.get('sort_type') || '';
const nextCol = this.getAttribute('sort');
let nextType = 'asc';
if (current === nextCol) {
nextType = (currentType === 'asc') ? 'desc' : 'asc';
}
url.searchParams.set('sort', nextCol);
url.searchParams.set('sort_type', nextType);
window.location.href = url.toString();
});
});
</script>
@endpush
<div class="ms-auto">
{{ $list->appends(request()->except('page'))->links('pagination') }}
</div> </div>
</div> </div>
</div> </div>

View File

@ -140,72 +140,38 @@
</div> </div>
<div class="col-md-8 mb-1"></div> <div class="col-md-8 mb-1"></div>
</div> </div>
<div class="table-responsive mt-2"> <div class="mt-2">
<table class="table table-bordered table-hover table-sm"> <div style="overflow-x: auto;">
<thead class="thead-light"> <table class="table table-bordered dataTable text-nowrap">
<tr> <thead class="thead-light">
<th style="width:30px; background-color"><input type="checkbox"></th>
<th>
<a href="{{ route('tagissue', array_merge(request()->all(), ['sort' => 'que_id', 'sort_type' => (request('sort') === 'que_id' && request('sort_type') === 'asc') ? 'desc' : 'asc'])) }}">
キューID
@if(request('sort') === 'que_id')
<i class="fa fa-sort-{{ request('sort_type') }}"></i>
@endif
</a>
</th>
<th>
<a href="{{ route('tagissue', array_merge(request()->all(), ['sort' => 'user_tag_serial', 'sort_type' => (request('sort') === 'user_tag_serial' && request('sort_type') === 'asc') ? 'desc' : 'asc'])) }}">
タグシリアル
@if(request('sort') === 'user_tag_serial')
<i class="fa fa-sort-{{ request('sort_type') }}"></i>
@endif
</a>
</th>
<th>
<a href="{{ route('tagissue', array_merge(request()->all(), ['sort' => 'user_tag_serial_64', 'sort_type' => (request('sort') === 'user_tag_serial_64' && request('sort_type') === 'asc') ? 'desc' : 'asc'])) }}">
タグシリアル64進
@if(request('sort') === 'user_tag_serial_64')
<i class="fa fa-sort-{{ request('sort_type') }}"></i>
@endif
</a>
</th>
<th>
<a href="{{ route('tagissue', array_merge(request()->all(), ['sort' => 'user_tag_issue', 'sort_type' => (request('sort') === 'user_tag_issue' && request('sort_type') === 'asc') ? 'desc' : 'asc'])) }}">
タグ発送ステータス
@if(request('sort') === 'user_tag_issue')
<i class="fa fa-sort-{{ request('sort_type') }}"></i>
@endif
</a>
</th>
<th>
<a href="{{ route('tagissue', array_merge(request()->all(), ['sort' => 'user_name', 'sort_type' => (request('sort') === 'user_name' && request('sort_type') === 'asc') ? 'desc' : 'asc'])) }}">
利用者名
@if(request('sort') === 'user_name')
<i class="fa fa-sort-{{ request('sort_type') }}"></i>
@endif
</a>
</th>
<th>携帯電話番号</th>
<th>自宅電話番号</th>
<th>居住所:郵便番号</th>
<th>居住所:都道府県</th>
<th>居住所:市区郡</th>
<th>居住所:住所</th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr> <tr>
<td style="background-color:#faebd7;"> <th style="width:40px;background-color:"><input type="checkbox" onclick="document.querySelectorAll('input[name=\'ids[]\']').forEach(cb => cb.checked = this.checked);"></th>
<input type="checkbox" name="ids[]" value="{{ $user->user_id }}"> <th class="sorting {{ ($sort=='que_id') ? ($sortType=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="que_id" style="color:#212529;cursor:pointer;"><span>キューID</span></th>
</td> <th class="sorting {{ ($sort=='user_tag_serial') ? ($sortType=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="user_tag_serial" style="color:#212529;cursor:pointer;"><span>タグシリアル</span></th>
@php <th class="sorting {{ ($sort=='user_tag_serial_64') ? ($sortType=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="user_tag_serial_64" style="color:#212529;cursor:pointer;"><span>タグシリアル64進</span></th>
$que = \App\Models\OperatorQue::where('user_id', $user->user_id)->first(); <th class="sorting {{ ($sort=='user_tag_issue') ? ($sortType=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="user_tag_issue" style="color:#212529;cursor:pointer;"><span>タグ発送ステータス</span></th>
@endphp <th class="sorting {{ ($sort=='user_name') ? ($sortType=='asc'?'sorting_asc':'sorting_desc') : '' }}" sort="user_name" style="color:#212529;cursor:pointer;"><span>利用者名</span></th>
<td>{{ $que ? $que->que_id : '' }}</td> <th><span>携帯電話番号</span></th>
<td>{{ $user->user_tag_serial }}</td> <th><span>自宅電話番号</span></th>
<td>{{ $user->user_tag_serial_64 }}</td> <th><span>居住所:郵便番号</span></th>
<td>{{ $user->user_tag_issue }}</td> <th><span>居住所:都道府県</span></th>
<th><span>居住所:市区郡</span></th>
<th><span>居住所:住所</span></th>
</tr>
</thead>
<tbody>
@foreach($users as $user)
<tr>
<td style="background-color:#faebd7;">
<input type="checkbox" name="ids[]" value="{{ $user->user_id }}">
</td>
@php
$que = \App\Models\OperatorQue::where('user_id', $user->user_id)->first();
@endphp
<td>{{ $que ? $que->que_id : '' }}</td>
<td>{{ $user->user_tag_serial }}</td>
<td>{{ $user->user_tag_serial_64 }}</td>
<td>{{ $user->user_tag_issue }}</td>
<td> <td>
@if(!empty($user->user_seq)) @if(!empty($user->user_seq))
<a href="{{ route('user_edit', ['seq' => $user->user_seq]) }}" target="_blank"> <a href="{{ route('user_edit', ['seq' => $user->user_seq]) }}" target="_blank">
@ -215,16 +181,17 @@
{{ $user->user_name }} {{ $user->user_name }}
@endif @endif
</td> </td>
<td>{{ $user->user_mobile }}</td> <td>{{ $user->user_mobile }}</td>
<td>{{ $user->user_homephone }}</td> <td>{{ $user->user_homephone }}</td>
<td>{{ $user->user_regident_zip }}</td> <td>{{ $user->user_regident_zip }}</td>
<td>{{ $user->user_regident_pre }}</td> <td>{{ $user->user_regident_pre }}</td>
<td>{{ $user->user_regident_city }}</td> <td>{{ $user->user_regident_city }}</td>
<td>{{ $user->user_regident_add }}</td> <td>{{ $user->user_regident_add }}</td>
</tr> </tr>
@endforeach @endforeach
</tbody> </tbody>
</table> </table>
</div>
<div class="d-flex align-items-center mb-2"> <div class="d-flex align-items-center mb-2">
<div class="ms-auto"> <div class="ms-auto">
{{ $users->appends(request()->except('page'))->links('pagination') }} {{ $users->appends(request()->except('page'))->links('pagination') }}
@ -276,4 +243,24 @@
</div> </div>
</div> </div>
</div> </div>
<script>
// ソート挙動
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('th.sorting').forEach(function(th) {
th.addEventListener('click', function() {
var sort = th.getAttribute('sort');
var currentSort = new URLSearchParams(window.location.search).get('sort');
var currentType = new URLSearchParams(window.location.search).get('sort_type');
var nextType = 'asc';
if (currentSort === sort) {
nextType = (currentType === 'asc') ? 'desc' : 'asc';
}
var params = new URLSearchParams(window.location.search);
params.set('sort', sort);
params.set('sort_type', nextType);
window.location.search = params.toString();
});
});
});
</script>
@endsection @endsection