Added NestedForm FormWidget (#3977)

Credit to @munxar

modules/backend/ServiceProvider.php

@@ -74,6 +74,7 @@ class ServiceProvider extends ModuleServiceProvider
             $combiner->registerBundle('~/modules/backend/formwidgets/repeater/assets/less/repeater.less');
             $combiner->registerBundle('~/modules/backend/formwidgets/codeeditor/assets/js/build.js');
             $combiner->registerBundle('~/modules/backend/formwidgets/fileupload/assets/less/fileupload.less');
+            $combiner->registerBundle('~/modules/backend/formwidgets/nestedform/assets/less/nestedform.less');
 
             /*
              * Rich Editor is protected by DRM
@@ -179,6 +180,7 @@ class ServiceProvider extends ModuleServiceProvider
             $manager->registerFormWidget('Backend\FormWidgets\Repeater', 'repeater');
             $manager->registerFormWidget('Backend\FormWidgets\TagList', 'taglist');
             $manager->registerFormWidget('Backend\FormWidgets\MediaFinder', 'mediafinder');
+            $manager->registerFormWidget('Backend\FormWidgets\NestedForm', 'nestedform');
         });
     }
 

modules/backend/formwidgets/NestedForm.php

@@ -0,0 +1,74 @@
+<?php namespace Backend\FormWidgets;
+
+use Backend\Classes\FormWidgetBase;
+use Backend\Widgets\Form;
+
+/**
+ * Nested Form
+ * Renders a nested form bound to a jsonable field of a model.
+ *
+ * @package october\backend
+ * @author Sascha Aeppli
+ */
+class NestedForm extends FormWidgetBase
+{
+    /**
+     * @inheritDoc
+     */
+    protected $defaultAlias = 'nestedform';
+
+    /**
+     * @var [] Form configuration
+     */
+    public $form;
+
+    /**
+     * @var bool defines if the nested form is styled like a panel (default true).
+     */
+    public $usePanelStyles = true;
+
+    /**
+     * @var Form form widget reference
+     */
+    protected $formWidget;
+
+    /**
+     * @inheritDoc
+     */
+    public function init() {
+        $this->fillFromConfig([
+            'form',
+            'usePanelStyles',
+        ]);
+
+        $config = $this->makeConfig($this->form);
+        $config->model = $this->model;
+        $config->data = $this->getLoadValue();
+        $config->alias = $this->alias . $this->defaultAlias;
+        $config->arrayName = $this->getFieldName();
+        $config->isNested = true;
+
+        $widget = $this->makeWidget(Form::class, $config);
+        $widget->bindToController();
+
+        $this->formWidget = $widget;
+    }
+
+    protected function loadAssets()
+    {
+        $this->addCss('css/nestedform.css', 'core');
+    }
+
+    /**
+     * @inheritdoc
+     */
+    function render()
+    {
+        $this->prepareVars();
+        return $this->makePartial('nestedform');
+    }
+
+    function prepareVars() {
+        $this->formWidget->previewMode = $this->previewMode;
+    }
+}

modules/backend/formwidgets/nestedform/assets/css/nestedform.css

@@ -0,0 +1,5 @@
+.nested-form{position:relative;min-height:30px}
+.nested-form .control-tabs.primary-tabs .nav-tabs{margin:0 !important}
+.nested-form.panel-styles{margin-top:5px;padding:1em 1.25em 0 1.25em !important;background:#f5f5f5;border:1px solid #d1d6d9;border-radius:3px;box-shadow:inset 0 1px 0 rgba(209,214,217,0.25),0 1px 0 rgba(255,255,255,.5)}
+.nested-form.panel-styles .control-tabs.primary-tabs .nav-tabs > li.active > a:before{background-color:#f5f5f5;border-color:#f5f5f5}
+.nested-form.panel-styles .control-tabs.primary-tabs .nav-tabs > li > a > span.title:before,.nested-form.panel-styles .control-tabs.primary-tabs .nav-tabs > li > a > span.title:after{background-color:#f5f5f5}

modules/backend/formwidgets/nestedform/assets/less/nestedform.less

@@ -0,0 +1,39 @@
+@import "../../../../assets/less/core/boot.less";
+
+@panel-bg-grey: #f5f5f5;
+
+.nested-form {
+    position: relative;
+    min-height: 30px;
+
+    .control-tabs.primary-tabs {
+        .nav-tabs {
+            margin: 0 !important;
+        }
+    }
+
+    &.panel-styles {
+        margin-top: 5px;
+        padding: 1em 1.25em 0 1.25em !important;
+        background: @panel-bg-grey;
+        border: 1px solid @input-border;
+        border-radius: @border-radius-base;
+        box-shadow: @input-box-shadow;
+
+        .control-tabs.primary-tabs {
+            .nav-tabs {
+                > li.active > a:before {
+                    background-color: @panel-bg-grey;
+                    border-color: @panel-bg-grey;
+                }
+
+                > li > a > span.title {
+                    &:before, &:after {
+                        background-color: @panel-bg-grey;
+                    }
+                }
+            }
+
+        }
+    }
+}

modules/backend/formwidgets/nestedform/partials/_nestedform.htm

@@ -0,0 +1,3 @@
+<div class="nested-form <?= $this->usePanelStyles ? 'panel-styles' : '' ?>">
+    <?= $this->formWidget->render() ?>
+</div>