feat: #79

bin/BrickEdit.js

@@ -45,6 +45,7 @@ define('package/quiqqer/bricks/bin/BrickEdit', [
             'showSettings',
             'showExtras',
             'showContent',
+            'showUsage',
 
             '$load',
             '$unload',
@@ -155,6 +156,15 @@ define('package/quiqqer/bricks/bin/BrickEdit', [
                     onClick: this.showContent
                 }
             });
+
+            this.addCategory({
+                name  : 'usage',
+                icon  : 'fa fa-map-signs',
+                text  : QUILocale.get(lg, 'brick.panel.category.usage'),
+                events: {
+                    onClick: this.showUsage
+                }
+            });
         },
 
         /**
@@ -539,6 +549,39 @@ define('package/quiqqer/bricks/bin/BrickEdit', [
             });
         },
 
+        /**
+         *
+         * @return {Promise<T>}
+         */
+        showUsage: function () {
+            var self = this;
+
+            return this.$hideCategory().then(function () {
+                return new Promise(function (resolve) {
+                    require(['package/quiqqer/bricks/bin/Controls/backend/BrickUsage'], function (Control) {
+                        new Control({
+                            events: {
+                                onLoad: resolve
+                            }
+                        }).inject(self.$Container);
+                    });
+                });
+            }).then(function (BrickUsage) {
+                self.$Container.setStyles({
+                    height: '100%'
+                });
+
+                BrickUsage.resize();
+
+                return self.$showCategory();
+            }).then(function () {
+                self.Loader.hide();
+            }).catch(function (err) {
+                console.error(err);
+                self.Loader.hide();
+            });
+        },
+
         /**
          * Create the editor, if the brick type is a content type
          *
@@ -741,6 +784,7 @@ define('package/quiqqer/bricks/bin/BrickEdit', [
                 case 'extra':
                 case 'settings':
                 case 'content':
+                case 'usage':
                     return Promise.resolve();
             }
 

bin/Controls/backend/BrickUsage.js

+/**
+ * @module package/quiqqer/bricks/bin/Controls/backend/BrickUsage
+ * @author www.pcsg.de (Henning Leutz)
+ */
+define('package/quiqqer/bricks/bin/Controls/backend/BrickUsage', [
+
+    'qui/QUI',
+    'qui/controls/Control',
+    'controls/grid/Grid',
+    'Locale',
+    'Ajax'
+
+], function (QUI, QUIControl, Grid, QUILocale, QUIAjax) {
+    "use strict";
+
+    return new Class({
+
+        Extends: QUIControl,
+        Type   : 'package/quiqqer/bricks/bin/Controls/backend/BrickUsage',
+
+        Binds: [
+            '$onInject'
+        ],
+
+        options: {
+            brickId: false,
+            styles : {
+                'float': 'left',
+                height : '100%',
+                width  : '100%'
+            }
+        },
+
+        initialize: function (options) {
+            this.parent(options);
+
+            this.addEvents({
+                onInject: this.$onInject
+            });
+        },
+
+        /**
+         * Create the DOMNode Element
+         *
+         * @return {Element}
+         */
+        create: function () {
+            this.$Elm = new Element('div');
+
+            if (this.getAttribute('styles')) {
+                this.$Elm.setStyles(this.getAttribute('styles'));
+            }
+
+            var Container = new Element('div', {
+                styles: {
+                    height: '100%',
+                    width : '100%'
+                }
+            }).inject(this.$Elm);
+
+            this.$Grid = new Grid(Container, {
+                columnModel: [{
+                    header   : QUILocale.get('quiqqer/system', 'project'),
+                    dataIndex: 'id',
+                    dataType : 'string',
+                    width    : 100
+                }, {
+                    header   : QUILocale.get('quiqqer/system', 'language'),
+                    dataIndex: 'lang',
+                    dataType : 'string',
+                    width    : 100
+                }, {
+                    header   : QUILocale.get('quiqqer/system', 'id'),
+                    dataIndex: 'id',
+                    dataType : 'string',
+                    width    : 100
+                }, {
+                    header   : QUILocale.get('quiqqer/system', 'title'),
+                    dataIndex: 'title',
+                    dataType : 'string',
+                    width    : 200
+                }],
+                onrefresh  : this.refresh
+            });
+
+            return this.$Elm;
+        },
+
+        /**
+         * Refresh the data
+         */
+        refresh: function () {
+            var self = this;
+
+            return new Promise(function (resolve) {
+                QUIAjax.get('package_quiqqer_bricks_ajax_getSitesFromBrick', function (result) {
+                    self.$Grid.setData(result);
+                    resolve();
+                }, {
+                    'package': 'quiqqer/bricks',
+                    brickId  : self.getAttribute('brickId')
+                });
+            });
+        },
+
+        /**
+         * resize the control
+         */
+        resize: function () {
+            if (!this.$Grid) {
+                return;
+            }
+
+            var Body = this.getElm();
+
+            if (!Body) {
+                return;
+            }
+
+            var size = Body.getSize();
+
+            this.$Grid.setHeight(size.y);
+            this.$Grid.setWidth(size.x);
+        },
+
+        /**
+         * event : on inject
+         */
+        $onInject: function () {
+            this.refresh().then(function () {
+                this.fireEvent('load', [this]);
+            });
+        }
+    });
+});
\ No newline at end of file

locale.xml

@@ -514,6 +514,11 @@
             <en><![CDATA[Add pages]]></en>
             <pl><![CDATA[Dodawanie stron]]></pl>
         </locale>
+
+        <locale name="brick.panel.category.usage">
+            <de><![CDATA[Verwendung]]></de>
+            <en><![CDATA[Usage]]></en>
+        </locale>
     </groups>
 
     <groups name="quiqqer/bricks" datatype="php">