Skip to content

Commit 8c9e460

Browse files
pxpmpxpm
authored
Merge pull request #5877 from Laravel-Backpack/fix-tabs-in-modals
Fixes modal form tabs, and allow form card to be configured.
2 parents 9d2d54d + 9e6d9f9 commit 8c9e460

File tree

4 files changed

+43
-62
lines changed

4 files changed

+43
-62
lines changed

‎src/app/View/Components/Dataform.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ public function __construct(
3030
public $entry = null,
3131
public ?Closure $setup = null,
3232
public bool $focusOnFirstField = false,
33+
public bool $formInsideCard = false,
3334
) {
3435
// Get CRUD panel instance from the controller
3536
CrudManager::setActiveController($controller);
@@ -101,6 +102,7 @@ public function render()
101102
'formMethod' => $this->formMethod,
102103
'hasUploadFields' => $this->hasUploadFields,
103104
'entry' => $this->entry,
105+
'formInsideCard' => $this->formInsideCard,
104106
]);
105107
}
106108
}

‎src/resources/views/crud/components/dataform/form_content.blade.php‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎src/resources/views/crud/form_content.blade.php‎

Lines changed: 35 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,21 @@
66
@include('crud::inc.show_tabbed_fields')
77
<input type="hidden" name="_current_tab" value="{{ Str::slug($crud->getTabs()[0]) }}" />
88
@else
9-
<div class="card">
10-
<div class="card-body row">
9+
<div class="{{isset($formInsideCard) && $formInsideCard ? '' : 'card'}}">
10+
<div class="{{isset($formInsideCard) && $formInsideCard ? '' : 'card-body'}} row">
1111
@include('crud::inc.show_fields', ['fields' => $crud->fields()])
1212
</div>
1313
</div>
1414
@endif
1515

16+
@foreach (app('widgets')->toArray() as $currentWidget)
17+
@php
18+
$currentWidget = \Backpack\CRUD\app\Library\Widget::add($currentWidget);
19+
@endphp
20+
@if($currentWidget->getAttribute('inline'))
21+
@include($currentWidget->getFinalViewPath(), ['widget' => $currentWidget->toArray()])
22+
@endif
23+
@endforeach
1624

1725
{{-- Define blade stacks so css and js can be pushed from the fields to these sections. --}}
1826

@@ -151,7 +159,7 @@ function preventUnload(event) {
151159
// find the form id stored in the hidden input within this form instance
152160
const currentFormEl = focusField.closest('form');
153161
const formIdInput = currentFormEl ? currentFormEl.querySelector('input[name="_form_id"]') : null;
154-
const theFormId = formIdInput ? formIdInput.value : ('{{ $id ?? 'crudForm' }}');
162+
const theFormId = formIdInput ? formIdInput.value : ('{{ $formId ?? 'crudForm' }}');
155163
const selector = `#form_tabs[data-form-id="${theFormId}"] a[tab_name="${focusFieldTab}"]`;
156164
$(selector).tab('show');
157165
} catch (e) {
@@ -180,7 +188,7 @@ function preventUnload(event) {
180188
181189
window.errors = {!! json_encode(session()->get('errors')->getBags()) !!};
182190
var submittedFormId = "{{ old('_form_id') }}";
183-
var currentFormId = '{{ $id }}';
191+
var currentFormId = '{{ $formId }}';
184192
185193
// Only display errors if this is the form that was submitted
186194
if (submittedFormId && submittedFormId === currentFormId) {
@@ -205,7 +213,6 @@ function preventUnload(event) {
205213
@if ($crud->tabsEnabled())
206214
var tab_container = $(container).closest('[role="tabpanel"]');
207215
if (tab_container.length) {
208-
// ensure tab id includes form id suffix if present
209216
firstErrorTab = tab_container.attr('id');
210217
}
211218
@endif
@@ -237,29 +244,29 @@ function preventUnload(event) {
237244
238245
// highlight its parent tab
239246
@if ($crud->tabsEnabled())
240-
var tab_id = $(container).closest('[role="tabpanel"]').attr('id');
241-
try {
242-
$('#form_tabs[data-form-id="' + (typeof currentFormId !== 'undefined' ? currentFormId : '{{ $id }}') + '"] [aria-controls="'+tab_id+'"]').addClass('text-danger');
243-
} catch (e) {
244-
$("#form_tabs [aria-controls="+tab_id+"]").addClass('text-danger');
245-
}
246-
@endif
247-
});
248-
});
249-
});
250-
251-
// Focus on the first error field
252-
if (firstErrorField !== null) {
253-
@if ($crud->tabsEnabled())
254-
// Switch to the tab containing the first error if needed
255-
if (firstErrorTab) {
256-
try {
257-
var selector = '#form_tabs[data-form-id="' + (typeof currentFormId !== 'undefined' ? currentFormId : '{{ $id }}') + '"] .nav a[href="#' + firstErrorTab + '"]';
258-
$(selector).tab('show');
259-
} catch (e) {
260-
$('.nav a[href="#' + firstErrorTab + '"]').tab('show');
261-
}
262-
}
247+
var tab_id = $(container).closest('[role="tabpanel"]').attr('id');
248+
try {
249+
$('#form_tabs[data-form-id="' + (typeof currentFormId !== 'undefined' ? currentFormId : '{{ $formId }}') + '"] [aria-controls="'+tab_id+'"]').addClass('text-danger');
250+
} catch (e) {
251+
$("#form_tabs [aria-controls="+tab_id+"]").addClass('text-danger');
252+
}
253+
@endif
254+
});
255+
});
256+
});
257+
258+
// Focus on the first error field
259+
if (firstErrorField !== null) {
260+
@if ($crud->tabsEnabled())
261+
// Switch to the tab containing the first error if needed
262+
if (firstErrorTab) {
263+
try {
264+
var selector = '#form_tabs[data-form-id="' + (typeof currentFormId !== 'undefined' ? currentFormId : '{{ $formId }}') + '"] .nav a[href="#' + firstErrorTab + '"]';
265+
$(selector).tab('show');
266+
} catch (e) {
267+
$('.nav a[href="#' + firstErrorTab + '"]').tab('show');
268+
}
269+
}
263270
@endif
264271
265272
// Focus on the first error field

‎src/resources/views/crud/inc/show_tabbed_fields.blade.php‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232

3333
<div class="tab-container {{ $horizontalTabs ? '' : 'container'}} mb-2">
3434

35-
@php $formIdSuffix = $id ?? 'crudForm'; @endphp
36-
<div class="nav-tabs-custom {{ $horizontalTabs ? '' : 'row'}}" id="form_tabs" data-form-id="{{ $formIdSuffix }}">
35+
@php $formId = $formId ?? 'crudForm'; @endphp
36+
<div class="nav-tabs-custom {{ $horizontalTabs ? '' : 'row'}}" id="form_tabs" data-form-id="{{ $formId }}">
3737
<ul class="nav {{ $horizontalTabs ? 'nav-tabs' : 'flex-column nav-pills'}} {{ $horizontalTabs ? '' : 'col-md-3' }}" role="tablist">
3838
@foreach ($crud->getTabs() as $k => $tab)
3939
@php
@@ -43,13 +43,13 @@
4343
}
4444
@endphp
4545
<li role="presentation" class="nav-item">
46-
<a href="#tab_{{ $tabSlug }}_{{ $formIdSuffix }}"
47-
aria-controls="tab_{{ $tabSlug }}_{{ $formIdSuffix }}"
46+
<a href="#tab_{{ $tabSlug }}_{{ $formId }}"
47+
aria-controls="tab_{{ $tabSlug }}_{{ $formId }}"
4848
role="tab"
4949
data-toggle="tab" {{-- tab indicator for Bootstrap v4 --}}
5050
tab_name="{{ $tabSlug }}" {{-- tab name for Bootstrap v4 --}}
5151
data-name="{{ $tabSlug }}" {{-- tab name for Bootstrap v5 --}}
52-
data-bs-toggle="tab" {{-- tab name for Bootstrap v5 --}}
52+
data-bs-toggle="tab" {{-- tab for Bootstrap v5 --}}
5353
class="nav-link text-decoration-none {{ isset($tabWithError) && $tabWithError ? ($tab == $tabWithError ? 'active' : '') : ($k == 0 ? 'active' : '') }}"
5454
>{{ $tab }}</a>
5555
</li>
@@ -65,7 +65,7 @@ class="nav-link text-decoration-none {{ isset($tabWithError) && $tabWithError ?
6565
$tabSlug = $k;
6666
}
6767
@endphp
68-
<div role="tabpanel" class="tab-pane {{ isset($tabWithError) && $tabWithError ? ($tabLabel == $tabWithError ? ' active' : '') : ($k == 0 ? ' active' : '') }}" id="tab_{{ $tabSlug }}_{{ $formIdSuffix }}">
68+
<div role="tabpanel" class="tab-pane {{ isset($tabWithError) && $tabWithError ? ($tabLabel == $tabWithError ? ' active' : '') : ($k == 0 ? ' active' : '') }}" id="tab_{{ $tabSlug }}_{{ $formId }}">
6969

7070
<div class="row">
7171
@include('crud::inc.show_fields', ['fields' => $crud->getTabItems($tabLabel, 'fields')])

0 commit comments

Comments
 (0)