Added ability to provide json file for cms layouts in order to render

the grid in the admin according to the frontend. closes #1361

CHANGELOG.md

@@ -20,6 +20,7 @@ All notable changes to this project will be documented in this file. This projec
 ### Added
 
 - [#1292](https://github.com/luyadev/luya/issues/1292) NEW ADMIN UI!
+- [#1361](https://github.com/luyadev/luya/issues/1361) Added ability to provide json file for cms layouts in order to render the grid in the admin according to the frontend.
 - [#1375](https://github.com/luyadev/luya/issues/1375) Added Import Helper class which provides functions to parse CSV files to Arrays.
 - [#1332](https://github.com/luyadev/luya/issues/1332) Added Export Helper class in order to generate CSV Files from Arrays.
 - [#1312](https://github.com/luyadev/luya/issues/1312) ArrayHelper::generateRange for select dropdowns with numeric values.

docs/guide/app-cmslayouts.md

@@ -1,14 +1,14 @@
 # CMS Layout
 
+The CMS Layouts let the Content Management System know where to render the content blocks.
+
 If you are using the CMS Module in your application (which is installed by default in the kickstarter application) then you can use the CMS Layouts.
 
-All CMS Layouts are stored in the `views/cmslayouts` folder which is located in the base path of your project. If we create a new layout with 2 columns (for example) we just add a new view template to the cmslayouts folder:
+## Create new Layout
 
-```
-views/cmslayouts/2columns.php
-```
+All CMS Layouts are stored in the `views/cmslayouts` folder which is located in the base path of your project. If we create a new layout with 2 columns (for example) we just add a new view file to the cmslayouts folder like `views/cmslayouts/2columns.php`.
 
-You can now add html content to the new cmslayout file *2columns.php* but the most important is to let the cms know on which part of the file the user can add content (blocks). To mark the area which can be filled with user content defined the area with `<?= $placeholders['YOUR_VARIABLE_NAME']; ?>`. In the example below we have made 2 placeholders for each column (left and right):
+You can now add html content to the new cmslayout file *2columns.php* but the most important is to let the cms know on which part of the file the user can add content (blocks). To mark the area which can be filled with user content is called placeholder a can be defined with the $placeholders array `<?= $placeholders['YOUR_VARIABLE_NAME']; ?>`. In the example below we have made 2 placeholders for each column (left and right):
 
 ```php
 <div class="row">
@@ -21,9 +21,43 @@ You can now add html content to the new cmslayout file *2columns.php* but the mo
 </div>
 ```
 
-You have now created a new cms layout which will be available after the import process.
+> Info: File names starting with *.* or *_* will be ignored. CMS Layouts in subfolders will be ignored to.
+
+Since version RC4 you can also add a json file to configure the cmslayout for the admin view, this is optional and will also work without a json file. It can be very helpfull if you want to let the adminarea know how your layout structured with rows and columns, like a grid system.
+
+In order to provide a json, use the same name es for the layout with the ending json, in our example *2columns.json*:
+
+```json
+{
+	"rows" : [
+	    [
+	        {"cols": 8, "var": "left", "label": "Main content Left"},
+	        {"cols": 4, "var": "right", "label": "Sidebar Right"}
+	    ],
+	]
+}
+```
+
+Now the administration area knows how the placeholder columns are structured, known from the bootstrap 4 grid system. The max amount of cols is 12.
+
+You an also define multiple rows, here an advanced example for a layout with 4 placeholders:
 
-> Info: Files starting with *.* or *_* will be ignored. Cmslayouts in subfolders will also be ignored.
+```json
+{
+	"rows" : [
+		[
+			{"cols": 12, "var": "stage", "label": "Stage"},
+		],
+	    [
+	        {"cols": 8, "var": "left", "label": "Main content"},
+	        {"cols": 4, "var": "right", "label": "Sidebar"}
+	    ],
+	    [
+			{"cols": 12, "var": "footer", "label": "Footer"},
+		],
+	]
+}
+```
 
 ## Import and Use
 
@@ -38,6 +72,4 @@ The import process will notify you what have been changed or added to your datab
 ```
 luya\cms\admin\importers\CmslayoutImporter:
  - new 2columns.php main.php found and added to database.
-```
-
-In order to change the labels of the placeholder go to `CMS Settings -> Layouts` in the administration area.
+```

envs/dev/views/cmslayouts/sidebar.json

@@ -1,6 +1,11 @@
-[
-    [
-        {"cols": 8, "var": "content", "label": "Content"},
-        {"cols": 4, "var": "sidebar", "label": "Sidebar"}
-    ]
-]
+{
+	"rows" : [
+	    [
+	        {"cols": 8, "var": "content", "label": "Content"},
+	        {"cols": 4, "var": "sidebar", "label": "Sidebar"}
+	    ],
+	    [
+	    	{"cols" : 12, "var" : "bimbam"}
+	    ]
+	]
+}

envs/kickstarter/views/cmslayouts/main.json

@@ -0,0 +1,7 @@
+{
+	"rows" : [
+	    [
+	        {"cols": 12, "var": "content", "label": "Main Container"}
+	    ],
+	]
+}

modules/admin/src/base/Module.php

@@ -123,7 +123,7 @@ public function getLinkedNgRestConfig($apiEndpoint)
     }
 
     /**
-     * @inheritdoc
+     * @return array|\luya\admin\components\AdminMenuBuilderInterface
      */
     public function getMenu()
     {
@@ -175,15 +175,13 @@ public function extendPermissionRoutes()
      */
     public function getAuthApis()
     {
-        $menu = $this->getMenu();
-
-        if (is_object($menu)) {
-            $perm = $menu->permissionApis;
-        } else {
-            $perm = $this->_permissionApis;
-        }
-
-        return ArrayHelper::merge($this->extendPermissionApis(), $perm);
+    	$menu = $this->getMenu();
+
+    	if (!$menu) {
+    		return $this->extendPermissionApis();
+    	}
+
+        return ArrayHelper::merge($this->extendPermissionApis(), $menu->getPermissionApis());
     }
 
     /**
@@ -193,14 +191,12 @@ public function getAuthApis()
      */
     public function getAuthRoutes()
     {
-        $menu = $this->getMenu();
-
-        if (is_object($menu)) {
-            $perm = $menu->permissionRoutes;
-        } else {
-            $perm = $this->_permissionRoutes;
-        }
-
-        return ArrayHelper::merge($this->extendPermissionRoutes(), $perm);
+    	$menu = $this->getMenu();
+
+    	if (!$menu) {
+    		return $this->extendPermissionRoutes();
+    	}
+
+        return ArrayHelper::merge($this->extendPermissionRoutes(), $menu->getPermissionRoutes());
     }
 }

modules/admin/src/components/AdminMenuBuilder.php

@@ -53,15 +53,9 @@ class AdminMenuBuilder extends Object implements AdminMenuBuilderInterface
      */
     protected $moduleContext;
 
-    /**
-     * @var array List of all permission APIs.
-     */
-    public $permissionApis = [];
 
-    /**
-     * @var array List of all permission Routes.
-     */
-    public $permissionRoutes = [];
+
+
 
     /**
      * @param \luya\base\AdminModuleInterface $module
@@ -73,6 +67,26 @@ public function __construct(AdminModuleInterface $module, array $config = [])
         parent::__construct($config);
     }
 
+    /**
+     * @var array List of all permission APIs.
+     */
+    private $_permissionApis = [];
+
+    public function getPermissionApis()
+    {
+    	return $this->_permissionApis;
+    }
+
+    /**
+     * @var array List of all permission Routes.
+     */
+    private $_permissionRoutes = [];
+
+    public function getPermissionRoutes()
+    {
+    	return $this->_permissionRoutes;
+    }
+
     /**
      * The node is the menu entry in the TOP navigation of the luya administration interface.
      *
@@ -124,7 +138,7 @@ public function nodeRoute($name, $icon, $route, $searchModelClass = null)
             'searchModelClass' => $searchModelClass,
         ];
 
-        $this->permissionRoutes[] = ['route' => $route, 'alias' => $name];
+        $this->_permissionRoutes[] = ['route' => $route, 'alias' => $name];
 
         self::$index++;
         return $this;
@@ -167,7 +181,7 @@ public function itemApi($name, $route, $icon, $apiEndpoint, array $options = [])
             'options' => $this->verifyOptions($options),
         ];
 
-        $this->permissionApis[] = ['api' => $apiEndpoint, 'alias' => $name];
+        $this->_permissionApis[] = ['api' => $apiEndpoint, 'alias' => $name];
 
         return $this;
     }
@@ -195,7 +209,7 @@ public function itemRoute($name, $route, $icon, $searchModelClass = null, array
             'options' => $this->verifyOptions($options),
         ];
 
-        $this->permissionRoutes[] = ['route' => $route, 'alias' => $name];
+        $this->_permissionRoutes[] = ['route' => $route, 'alias' => $name];
 
         return $this;
     }

modules/admin/src/components/AdminMenuBuilderInterface.php

@@ -59,4 +59,8 @@ interface AdminMenuBuilderInterface
      * @return array The menu array with all its nodes, subnodes routes and apis.
      */
     public function menu();
+
+    public function getPermissionApis();
+
+    public function getPermissionRoutes();
 }

modules/cms/src/admin/importers/CmslayoutImporter.php

@@ -57,6 +57,14 @@ public function run()
 
                     try {
                         $json = Json::decode($json);
+
+                        // the rows column defines the placeholders
+                        // if the rows column does not exists fail back to normal layout processing
+                        if (isset($json['rows'])) {
+                        	$json = $json['rows'];
+                        } else {
+                        	$json = false;
+                        }
                     } catch (\Exception $e) {
                         $json = false;
                     }