deleteCheckinModalの中身でなるべくjQueryを使わないようにした

This commit is contained in:
shibafu 2020-08-07 09:50:01 +09:00
parent 23189b76e4
commit 723587b0ac
3 changed files with 25 additions and 30 deletions

View File

@ -6,6 +6,8 @@ export function suicide<T>(e: T) {
}; };
} }
const die = suicide('Element not found!');
export function linkCard(el: Element) { export function linkCard(el: Element) {
const url = el.querySelector('a')?.href; const url = el.querySelector('a')?.href;
if (!url) { if (!url) {
@ -15,7 +17,6 @@ export function linkCard(el: Element) {
fetchGet('/api/checkin/card', { url }) fetchGet('/api/checkin/card', { url })
.then((response) => response.json()) .then((response) => response.json())
.then((data) => { .then((data) => {
const die = suicide('Element not found!');
const metaColumn = el.querySelector('.col-12:last-of-type') || die(); const metaColumn = el.querySelector('.col-12:last-of-type') || die();
const imageColumn = el.querySelector<HTMLElement>('.col-12:first-of-type') || die(); const imageColumn = el.querySelector<HTMLElement>('.col-12:first-of-type') || die();
const title = el.querySelector<HTMLElement>('.card-title') || die(); const title = el.querySelector<HTMLElement>('.card-title') || die();
@ -58,21 +59,15 @@ export function pageSelector(el: Element) {
return el; return el;
} }
export function deleteCheckinModal(el: Element) { export function deleteCheckinModal(modal: Element) {
return $(el) let id: any = null;
.on('show.bs.modal', function (event) { modal.querySelector('form')?.addEventListener('submit', function () {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion this.action = this.action.replace('@', id);
const target = $(event.relatedTarget!); });
const modal = $(this); return $(modal).on('show.bs.modal', function (event) {
modal.find('.modal-body .date-label').text(target.data('date')); const target = event.relatedTarget || die();
modal.data('id', target.data('id')); const dateLabel = this.querySelector('.modal-body .date-label') || die();
}) dateLabel.textContent = target.dataset.date || null;
.find('.btn-danger') id = target.dataset.id;
.on('click', function (_event) { });
const modal = $('#deleteCheckinModal');
const form = modal.find('form');
form.attr('action', form.attr('action')?.replace('@', modal.data('id')) || null);
form.submit();
})
.end();
} }

View File

@ -97,13 +97,13 @@
削除確認 削除確認
@endslot @endslot
<span class="date-label"></span> のチェックインを削除してもよろしいですか? <span class="date-label"></span> のチェックインを削除してもよろしいですか?
@slot('footer')
<form action="{{ route('checkin.destroy', ['id' => '@']) }}" method="post"> <form action="{{ route('checkin.destroy', ['id' => '@']) }}" method="post">
{{ csrf_field() }} {{ csrf_field() }}
{{ method_field('DELETE') }} {{ method_field('DELETE') }}
</form>
@slot('footer')
<button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
<button type="button" class="btn btn-danger">削除</button> <button type="submit" class="btn btn-danger">削除</button>
</form>
@endslot @endslot
@endcomponent @endcomponent
@endsection @endsection

View File

@ -117,13 +117,13 @@
削除確認 削除確認
@endslot @endslot
<span class="date-label"></span> のチェックインを削除してもよろしいですか? <span class="date-label"></span> のチェックインを削除してもよろしいですか?
@slot('footer')
<form action="{{ route('checkin.destroy', ['id' => '@']) }}" method="post"> <form action="{{ route('checkin.destroy', ['id' => '@']) }}" method="post">
{{ csrf_field() }} {{ csrf_field() }}
{{ method_field('DELETE') }} {{ method_field('DELETE') }}
</form>
@slot('footer')
<button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
<button type="button" class="btn btn-danger">削除</button> <button type="submit" class="btn btn-danger">削除</button>
</form>
@endslot @endslot
@endcomponent @endcomponent
@endsection @endsection