<x-dynamic-component :component="$layout">
<x-slot name="header">
<div class="mb-4">
<x-admin-crud::linkbutton href="{{ admin_crud_route('crud') }}" color="gray" size="sm">
← Crud Tables に戻る
</x-admin-crud::linkbutton>
</div>
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ __('Crud Table') }} {{ $tableName }} {{ count($data) }}/{{ $numdata }}
</h2>
</x-slot>
<style>
/* CHECKBOX TOGGLE SWITCH */
.toggle-checkbox:checked {
right: 0;
border-color: #68D391;
}
.toggle-checkbox:checked+.toggle-label {
background-color: #68D391;
}
</style>
@if (session('feedback.success'))
<x-admin-crud::alert.success>{{ session('feedback.success') }}</x-admin-crud::alert.success>
@endif
@if (session('feedback.error'))
<x-admin-crud::alert.error>{{ session('feedback.error') }}</x-admin-crud::alert.error>
@endif
@push('localcss')
<link rel="stylesheet" href="{{ asset('vendor/admin-crud/css/localflash.css') }}">
@endpush
<div class="py-4">
<div class="sm:mx-auto mx-6 sm:px-6 lg:px-8">
<table class="divide-y divide-gray-400 dark:text-gray-300">
<thead>
<tr>
<th>Chk
</th>
@foreach ($coldetails as $nam => $typ)
<th class="px-2 py-0 text-sm my-0">{{ $nam }} ({{ $typ }})</th>
@endforeach
</tr>
<form action="{{ admin_crud_route('crud') }}?table={{ $tableName }}" method="post"
id="admincrudwhere">
@csrf
@method('post')
<tr class="m-0">
<th></th>
@foreach ($coldetails as $nam => $typ)
<th><input id="whereby{{ $nam }}" type="text"
class="whereBy text-sm bg-slate-100 font-thin mr-2 p-0 h-5 w-full"
name="whereBy__{{ $nam }}"
@isset($whereBy[$nam])
value= {{ $whereBy[$nam] }}
@endisset>
</th>
@endforeach
</tr>
</form>
</thead>
<tbody>
@foreach ($data as $d)
<tr>
<td>
<input type="checkbox" class="chkbox" name="did[]" form="chkdelete"
value="{{ $d->id }}">
</td>
@foreach ($coldetails as $nam => $typ)
@if ($typ == 'tinyint')
<td class="p-2 hover:text-blue-600 hover:bg-slate-200 dark:hover:bg-slate-700 dark:hover:text-blue-500 text-center"
id="td__{{ $nam }}__{{ $d->id }}__{{ $typ }}"
data-scheduled-update-cell="1"
data-field="{{ $nam }}"
data-target-id="{{ $d->id }}">
<x-admin-crud::toggle formid="admincrudpost"
name="name_{{ $nam }}__{{ $d->id }}__{{ $typ }}"
id="{{ $nam }}__{{ $d->id }}__{{ $typ }}"
:checked="$d->$nam"></x-admin-crud::toggle>
@else
<td class="p-2 hover:text-blue-600 hover:bg-slate-200 clicktoedit dark:hover:bg-slate-700 dark:hover:text-blue-500"
id="{{ $nam }}__{{ $d->id }}__{{ $typ }}"
data-scheduled-update-cell="1"
data-field="{{ $nam }}"
data-target-id="{{ $d->id }}">
@if ($nam == 'id')
<a
href="{{ admin_crud_route('crud', ['table' => $tableName, 'row' => $d->id]) }}">{{ $d->$nam }}</a>
@else
{{ $d->$nam }}
@endif
@endif
@endforeach
</tr>
@endforeach
</tbody>
</table>
<div class="mt-4">
<x-admin-crud::linkbutton href="{{ admin_crud_route('crudnew', ['table' => $tableName]) }}"
color="yellow" size="sm">
あたらしい行を追加
</x-admin-crud::linkbutton>
</div>
<div class="mt-4">
<form action="{{ admin_crud_route('crudchkdelete') }}" method="post" id="chkdelete">
@csrf
@method('post')
<input type="hidden" name="table" value="{{ $tableName }}">
<x-admin-crud::submitbutton type="submit" value="bcopy" color="lime" size="sm"
confirm="本当にまとめてコピーする？">
選択した行をコピー
</x-admin-crud::submitbutton>
<span class="mx-4"></span>
<x-admin-crud::submitbutton type="submit" value="bdelete" color="purple" size="sm"
confirm="本当にまとめて削除する？">
選択した行を削除
</x-admin-crud::submitbutton>
</form>
</div>
<div class="mt-4">
<form action="{{ admin_crud_route('crud_setautoinc') }}" method="post" id="setautoinc">
@csrf
@method('post')
<input type="hidden" name="table" value="{{ $tableName }}">
<input type="number" name="autoinc" value="{{ $nextId }}"
class="w-32 text-sm bg-cyan-100 p-1 rounded text-right">
<x-admin-crud::submitbutton type="submit" value="set_autoinc" color="cyan" size="sm"
confirm="本当にautoincrement値を設定しますか？">
autoincrement値を設定
</x-admin-crud::submitbutton>
</form>
</div>
<div class="mt-4">
<x-admin-crud::linkbutton href="{{ admin_crud_route('crud') }}" color="gray" size="sm">
← Crud Tables に戻る
</x-admin-crud::linkbutton>
</div>
<div class="mt-4">
<x-admin-crud::linkbutton href="{{ admin_crud_route('crudtruncate', ['table' => $tableName]) }}"
color="red" size="sm" confirm="本当に、すべての行を削除(truncate)しますか?">
すべての行を削除(truncate)
</x-admin-crud::linkbutton>
</div>
</div>
</div>
<form action="{{ admin_crud_route('crudpost') }}" method="post" id="admincrudpost">
@csrf
@method('post')
</form>
@if ($scheduledUpdateCreateUrl)
<div id="scheduled-update-context-menu"
class="hidden fixed z-50 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 shadow-lg rounded-md py-1 text-sm">
<a id="scheduled-update-context-link" href="#"
class="block px-3 py-2 text-slate-700 dark:text-slate-200 hover:bg-pink-100 dark:hover:bg-slate-700">
このセルを予約更新
</a>
</div>
@endif
@push('localjs')
<script src="{{ $jqueryUrl }}"></script>
<script src="{{ asset('vendor/admin-crud/js/crud_table.js') }}"></script>
<script src="{{ asset('vendor/admin-crud/js/crud_where.js') }}"></script>
@endpush
<script>
var table = "{{ $tableName }}";
var origData = {};
@if ($scheduledUpdateCreateUrl)
var scheduledUpdateCreateUrl = "{{ $scheduledUpdateCreateUrl }}";
var scheduledUpdateTargetType = @json($scheduledUpdateTargetType);
@endif
</script>
@if ($scheduledUpdateCreateUrl)
<script>
(() => {
const menu = document.getElementById('scheduled-update-context-menu');
const link = document.getElementById('scheduled-update-context-link');
document.querySelectorAll('[data-scheduled-update-cell="1"]').forEach((cell) => {
cell.addEventListener('contextmenu', (event) => {
const field = cell.dataset.field;
if (!field || field === 'id') {
return;
}
event.preventDefault();
const params = new URLSearchParams({
target_type: scheduledUpdateTargetType,
target_id: cell.dataset.targetId,
field_name: field,
});
link.href = `${scheduledUpdateCreateUrl}?${params.toString()}`;
menu.style.left = `${event.clientX}px`;
menu.style.top = `${event.clientY}px`;
menu.classList.remove('hidden');
});
});
document.addEventListener('click', () => {
menu.classList.add('hidden');
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
menu.classList.add('hidden');
}
});
})();
</script>
@endif
</x-dynamic-component>
