Map Management: Show Groups (#16005)

* Map Management: Show Groups

* reorganize group selector a bit

* Use uuid to prevent issues with unicode strings and other oddities

* Edit buttons should not be primary

* Reactivity for small screens
This commit is contained in:
Tony Murray
2024-05-03 18:30:03 -05:00
committed by GitHub
parent 3313949ea7
commit 5b20886732
6 changed files with 63 additions and 35 deletions

View File

@@ -7,34 +7,51 @@
@include('map.custom-map-modal')
@include('map.custom-map-delete-modal')
<x-panel body-class="!tw-p-0" id="manage-custom-maps">
<x-panel id="manage-custom-maps" body-class="!tw-pb-0">
<x-slot name="title">
<div class="tw-flex tw-justify-between tw-items-center">
<div>
<i class="fa fa-map-marked fa-fw fa-lg" aria-hidden="true"></i> {{ __('map.custom.title.manage') }}
{{ __('map.custom.title.manage') }}
</div>
<div>
<button class="btn btn-primary" onclick="$('#mapModal').modal({backdrop: 'static', keyboard: false}, 'show');">{{ __('map.custom.create_map') }}</button>
<button class="btn btn-primary" onclick="$('#mapModal').modal({backdrop: 'static', keyboard: false}, 'show');">
{{ __('map.custom.create_map') }}
</button>
</div>
</div>
</x-slot>
<table class="table table-striped table-condensed" style="margin-bottom: 0; margin-top: -1px">
@foreach($maps as $map)
<tr id="map{{ $map->custom_map_id }}">
<td style="vertical-align: middle">
<a href="{{ route('maps.custom.show', $map->custom_map_id) }}">{{ $map->name }}</a>
</td>
<td>
<a class="btn btn-primary" href="{{ route('maps.custom.edit', $map->custom_map_id) }}"><i class="fa fa-pencil"></i> {{ __('Edit') }}</a>
<button class="btn btn-danger"
onclick="startMapDelete(this)"
data-map-id="{{ $map->custom_map_id }}"
><i class="fa fa-trash"></i> {{ __('Delete') }}</button>
</td>
</tr>
@endforeach
</table>
@foreach($maps as $group_name => $group)
<x-panel id="map-group-{{ $group_uuid = uniqid() }}" body-class="!tw-p-0">
@if($group_name)
<x-slot name="title">{{ $group_name }}</x-slot>
@endif
@foreach($group as $map)
<div id="map-{{ $map->custom_map_id }}" class="even:tw-bg-gray-50 dark:even:tw-bg-zinc-900">
<div class="tw-flex tw-p-3 tw-items-center hover:tw-bg-gray-100 dark:hover:tw-bg-gray-600">
<div class="tw-flex-1">
<i class="fa fa-map-marked fa-fw fa-lg" aria-hidden="true"></i>
<a href="{{ route('maps.custom.show', $map->custom_map_id) }}">{{ $map->name }}</a>
</div>
<div class="tw-flex-none sm:tw-flex-1 tw-flex-shrink tw-whitespace-nowrap">
<a class="btn btn-default" href="{{ route('maps.custom.edit', $map->custom_map_id) }}">
<i class="fa fa-pencil" aria-hidden="true"></i>
<span class="tw-hidden sm:tw-inline" aria-hidden="false">{{ __('Edit') }}</span>
</a>
<button class="btn btn-danger"
onclick="startMapDelete(this)"
data-map-name="{{ $map->name }}"
data-map-group-id="#map-group-{{ $group_uuid }}"
data-map-id="{{ $map->custom_map_id }}"
><i class="fa fa-trash" aria-hidden="true"></i>
<span class="tw-hidden sm:tw-inline" aria-hidden="false">{{ __('Delete') }}</span>
</button>
</div>
</div>
</div>
@endforeach
</x-panel>
@endforeach
</x-panel>
</div>
@endsection
@@ -42,7 +59,10 @@
@section('scripts')
@routes
<script type="text/javascript">
$("#mapBackgroundClearRow").hide();
$('#mapDeleteModal').on('show.bs.modal', () => {
let $mapDeleteModalLabel = $('#mapDeleteModalLabel');
$mapDeleteModalLabel.text($mapDeleteModalLabel.data('text').replace(':name', pendingMapToDelete.name));
});
function editMapSuccess(data) {
$('#mapModal').modal('hide');
@@ -53,21 +73,29 @@
$('#mapModal').modal('hide');
}
var pendingDeleteId;
var pendingMapToDelete;
function startMapDelete(target) {
pendingDeleteId = $(target).data('map-id');
$('#mapDeleteModal').modal({backdrop: 'static', keyboard: false}, 'show');
let $target = $(target);
pendingMapToDelete = {
id: $target.data('map-id'),
name: $target.data('map-name'),
group_id: $target.data('map-group-id')
};
$('#mapDeleteModal').modal('show');
}
function deleteMap() {
$.ajax({
url: "{{ route('maps.custom.destroy', ['map' => '?']) }}".replace('?', pendingDeleteId),
url: "{{ route('maps.custom.destroy', ['map' => '?']) }}".replace('?', pendingMapToDelete.id),
type: 'DELETE'
}).done(() => {
$('#map' + pendingDeleteId).remove();
pendingDeleteId = null;
$('#mapDeleteModal').modal('hide');
});
$('#map-' + pendingMapToDelete.id).remove();
if($(pendingMapToDelete.group_id + ' .panel-body').children().length === 0) {
$(pendingMapToDelete.group_id).remove()
}
pendingMapToDelete = null;
$('#mapDeleteModal').modal('hide');
});
}
</script>
@endsection

View File

@@ -2,7 +2,7 @@
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="mapDeleteModalLabel">{{ __('map.custom.edit.map.delete') }}</h5>
<h5 class="modal-title" id="mapDeleteModalLabel" data-text="{{ __('map.custom.edit.map.delete') }}"></h5>
</div>
<div class="modal-footer">
<center>