From 27dc6360ae2bd1eeb6ca3ed89ce538dfb22eaf18 Mon Sep 17 00:00:00 2001
From: Niklas Forsdahl <niklas@creamarketing.com>
Date: Mon, 15 Apr 2024 09:52:33 +0300
Subject: [PATCH] Styling for nested GridFields without title. Added loading
 indicator while nested GridField is being fetched.

---
 css/GridFieldExtensions.css             | 4 ++++
 javascript/GridFieldExtensions.js       | 9 ++++++++-
 src/GridFieldNestedForm_ItemRequest.php | 7 ++++++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/css/GridFieldExtensions.css b/css/GridFieldExtensions.css
index 2bd2760..785faa7 100644
--- a/css/GridFieldExtensions.css
+++ b/css/GridFieldExtensions.css
@@ -231,6 +231,10 @@
   padding-left: 60px;
 }
 
+.grid-field.nested.empty-title .grid-field__title-row th {
+  padding: 0;
+}
+
 .grid-field.nested table tbody tr:not(.nested-gridfield) {
   border-left: 1px solid #dbe0e9;
 }
diff --git a/javascript/GridFieldExtensions.js b/javascript/GridFieldExtensions.js
index 886308f..c7bd02c 100644
--- a/javascript/GridFieldExtensions.js
+++ b/javascript/GridFieldExtensions.js
@@ -530,6 +530,13 @@
 				gridField.setState('GridFieldNestedForm', currState['GridFieldNestedForm']);
 				if (toggleState) {
 					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 stateInput = gridField.find('input.gridstate').first();
 						data[stateInput.attr('name')] = JSON.stringify(currState);
@@ -633,7 +640,7 @@
 						let childID = ui.item.attr('data-id');
 						let parentIntoChild = $(e.target).closest('.grid-field[data-name*="[GridFieldNestedForm]['+childID+']"]').length;
 						if (parentIntoChild) {
-							// parent dragged into child, or widget dragged to root, cancel sorting
+							// parent dragged into child, cancel sorting
 							ui.sender.sortable("cancel");
 							e.preventDefault();
 							e.stopPropagation();
diff --git a/src/GridFieldNestedForm_ItemRequest.php b/src/GridFieldNestedForm_ItemRequest.php
index fcdc5bd..9488ea5 100644
--- a/src/GridFieldNestedForm_ItemRequest.php
+++ b/src/GridFieldNestedForm_ItemRequest.php
@@ -78,10 +78,15 @@ class GridFieldNestedForm_ItemRequest extends GridFieldDetailForm_ItemRequest
         }
 
         $this->record->invokeWithExtensions('updateNestedConfig', $config);
+
+        $title = _t(get_class($this->record).'.'.strtoupper($relationName), ' ');
         
         $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->setAttribute('data-class', str_replace('\\', '-', $relationClass));
         $gridField->addExtraClass('nested');