Styling for nested GridFields without title.

Added loading indicator while nested GridField is being fetched.
This commit is contained in:
Niklas Forsdahl 2024-04-15 09:52:33 +03:00
parent db3edd7f16
commit 27dc6360ae
3 changed files with 18 additions and 2 deletions

View File

@ -231,6 +231,10 @@
padding-left: 60px; padding-left: 60px;
} }
.grid-field.nested.empty-title .grid-field__title-row th {
padding: 0;
}
.grid-field.nested table tbody tr:not(.nested-gridfield) { .grid-field.nested table tbody tr:not(.nested-gridfield) {
border-left: 1px solid #dbe0e9; border-left: 1px solid #dbe0e9;
} }

View File

@ -530,6 +530,13 @@
gridField.setState('GridFieldNestedForm', currState['GridFieldNestedForm']); gridField.setState('GridFieldNestedForm', currState['GridFieldNestedForm']);
if (toggleState) { if (toggleState) {
if (!$(this).closest('tr').next('.nested-gridfield').length) { if (!$(this).closest('tr').next('.nested-gridfield').length) {
// add loading indicator until the nested gridfield is loaded
let colspan = gridField.find('.grid-field__title-row th').attr('colspan');
let loadingCell = $('<td />')
.addClass('ss-gridfield-item loading')
.attr('colspan', colspan);
$(this).closest('tr').after($('<tr class="nested-gridfield" />').append(loadingCell));
let data = {}; let data = {};
let stateInput = gridField.find('input.gridstate').first(); let stateInput = gridField.find('input.gridstate').first();
data[stateInput.attr('name')] = JSON.stringify(currState); data[stateInput.attr('name')] = JSON.stringify(currState);
@ -633,7 +640,7 @@
let childID = ui.item.attr('data-id'); let childID = ui.item.attr('data-id');
let parentIntoChild = $(e.target).closest('.grid-field[data-name*="[GridFieldNestedForm]['+childID+']"]').length; let parentIntoChild = $(e.target).closest('.grid-field[data-name*="[GridFieldNestedForm]['+childID+']"]').length;
if (parentIntoChild) { if (parentIntoChild) {
// parent dragged into child, or widget dragged to root, cancel sorting // parent dragged into child, cancel sorting
ui.sender.sortable("cancel"); ui.sender.sortable("cancel");
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();

View File

@ -78,10 +78,15 @@ class GridFieldNestedForm_ItemRequest extends GridFieldDetailForm_ItemRequest
} }
$this->record->invokeWithExtensions('updateNestedConfig', $config); $this->record->invokeWithExtensions('updateNestedConfig', $config);
$title = _t(get_class($this->record).'.'.strtoupper($relationName), ' ');
$fields = new FieldList( $fields = new FieldList(
$gridField = new GridField($this->component->getGridField()->getName().'['.GridFieldNestedForm::POST_KEY.']['.$this->record->ID.']', _t(get_class($this->record).'.'.strtoupper($relationName), ' '), $list, $config) $gridField = new GridField($this->component->getGridField()->getName().'['.GridFieldNestedForm::POST_KEY.']['.$this->record->ID.']', $title, $list, $config)
); );
if (!trim($title)) {
$gridField->addExtraClass('empty-title');
}
$gridField->setModelClass($relationClass); $gridField->setModelClass($relationClass);
$gridField->setAttribute('data-class', str_replace('\\', '-', $relationClass)); $gridField->setAttribute('data-class', str_replace('\\', '-', $relationClass));
$gridField->addExtraClass('nested'); $gridField->addExtraClass('nested');