feature: add (missing) areabrick overview in admin backend (#19)

Co-authored-by: Jacob Dreesen <j.dreesen@neusta.de>
Co-authored-by: Stephanie Ketzler <s.ketzler@neusta.de>

composer.json

@@ -17,7 +17,17 @@
   },
   "require": {
     "php": "~8.1.0 || ~8.2.0",
-    "pimcore/pimcore": "^10.5 || ^11.0"
+    "doctrine/dbal": "^2.13 || ^3.9",
+    "pimcore/pimcore": "^10.6 || ^11.0",
+    "symfony/config": "^5.4 || ^6.4",
+    "symfony/dependency-injection": "^5.4 || ^6.4",
+    "symfony/http-foundation": "^5.4 || ^6.4",
+    "symfony/http-kernel": "^5.4 || ^6.4",
+    "symfony/polyfill-php84": "^1.31",
+    "symfony/routing": "^5.4 || ^6.4",
+    "symfony/translation": "^5.4 || ^6.4",
+    "teamneusta/converter-bundle": "^1.6",
+    "twig/twig": "^3.8"
   },
   "require-dev": {
     "friendsofphp/php-cs-fixer": "^3.62",

config/pimcore/config.yaml

@@ -0,0 +1,24 @@
+doctrine_migrations:
+  migrations_paths:
+    Neusta\Pimcore\AreabrickConfigBundle\Migrations: '@NeustaPimcoreAreabrickConfigBundle/migrations'
+
+neusta_converter:
+  converter:
+    neusta_pimcore_areabrick_config.brick.converter:
+      target: Neusta\Pimcore\AreabrickConfigBundle\Bricks\Model\Brick
+      populators:
+        - Neusta\Pimcore\AreabrickConfigBundle\Bricks\Populator\BrickPagePopulator
+      properties:
+        id: ~
+        name: ~
+        version: ~
+        description: ~
+        template: ~
+
+    neusta_pimcore_areabrick_config.page.converter:
+      target: Neusta\Pimcore\AreabrickConfigBundle\Bricks\Model\Page
+      properties:
+        id: ~
+        type: ~
+        url: fullPath
+        published: ~

config/pimcore/routing.yaml

@@ -0,0 +1,7 @@
+neusta_pimcore_areabrick_config:
+  resource: '@NeustaPimcoreAreabrickConfigBundle/src/Controller/Admin/'
+  type: annotation
+  name_prefix: neusta_areabrick_config_
+  prefix: /admin/bundle/neusta-areabrick-config
+  options:
+    expose: true

config/services.yaml

@@ -0,0 +1,20 @@
+services:
+  _defaults:
+    autowire: true
+    autoconfigure: true
+
+  Neusta\Pimcore\AreabrickConfigBundle\Controller\Admin\AreabrickOverviewController:
+    arguments:
+      $brickConverter: '@neusta_pimcore_areabrick_config.brick.converter'
+    tags: [ 'controller.service_arguments' ]
+
+  Neusta\Pimcore\AreabrickConfigBundle\Bricks\Populator\BrickPageEditModeUrlPopulator: ~
+
+  Neusta\Pimcore\AreabrickConfigBundle\Bricks\Populator\BrickPagePopulator:
+    arguments:
+      $pageConverter: '@neusta_pimcore_areabrick_config.page.converter'
+
+  Neusta\Pimcore\AreabrickConfigBundle\EventListener\PimcoreAdminListener:
+    tags:
+      - { name: kernel.event_listener, event: pimcore.bundle_manager.paths.css, method: addCSSFiles }
+      - { name: kernel.event_listener, event: pimcore.bundle_manager.paths.js, method: addJSFiles }

migrations/Version20241001090000.php

@@ -0,0 +1,27 @@
+<?php
+declare(strict_types=1);
+
+namespace Neusta\Pimcore\AreabrickConfigBundle\Migrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Pimcore\Migrations\BundleAwareMigration;
+
+final class Version20241001090000 extends BundleAwareMigration
+{
+    private const PERMISSION_KEY_AREABRICKS = 'neusta_areabrick_config.areabrick_overview';
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql("INSERT IGNORE INTO users_permission_definitions (`key`, `category`) VALUES('" . self::PERMISSION_KEY_AREABRICKS . "', 'Neusta Areabrick Config Bundle');");
+    }
+
+    public function down(Schema $schema): void
+    {
+        $this->addSql("DELETE FROM users_permission_definitions WHERE `key` = '" . self::PERMISSION_KEY_AREABRICKS . "';");
+    }
+
+    protected function getBundleName(): string
+    {
+        return 'NeustaPimcoreAreabrickConfigBundle';
+    }
+}

public/css/admin-style.css

@@ -0,0 +1,108 @@
+#neusta_areabrick_config table {
+    background-color: #ffffff;
+    border-collapse: collapse;
+    border: none;
+    width: 100%;
+}
+
+#neusta_areabrick_config thead {
+    background-color: #177fac;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    color: #ffffff;
+}
+
+#neusta_areabrick_config tfoot {
+    background-color: #F7F1D4;
+    font-size: 80%;
+    border-top: 1px solid #999;
+}
+
+#neusta_areabrick_config td,
+#neusta_areabrick_config th {
+    text-align: match-parent;
+    padding: 0.5em 1em;
+    width: auto;
+}
+
+#neusta_areabrick_config tbody {
+    display: block;
+    height: 100%;
+    overflow-y: auto;
+}
+
+#neusta_areabrick_config thead,
+#neusta_areabrick_config tbody tr {
+    display: table;
+    width: 100%;
+    table-layout: fixed; /* Prevents columns of different widths */
+}
+
+#neusta_areabrick_config tbody tr:nth-child(odd) {
+    background-color: #ffffff;
+}
+
+#neusta_areabrick_config tbody tr:nth-child(even) {
+    background-color: #d9d9d9;
+}
+
+#neusta_areabrick_config a {
+    color: #0096f3;
+    text-decoration: none;
+}
+
+#neusta_areabrick_config a:hover {
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+/* Additional Properties */
+#neusta_areabrick_config ul.additional-properties li {
+    list-style-type: none;
+    margin-left: 5px;
+    width: 150px;
+    padding: 2px 4px;
+    border-radius: 3px;
+    display: inline-block;
+    color: #ffffff;
+}
+
+#neusta_areabrick_config ul.additional-properties li.tag {
+    background-color: #2a6f9c;
+}
+
+#neusta_areabrick_config ul.additional-properties li.group {
+    background-color: #194567;
+}
+
+/* Accordion */
+#neusta_areabrick_config .accordion button {
+    background-color: #efefef;
+    color: #444;
+    cursor: pointer;
+    padding: 10px;
+    width: 100%;
+    text-align: left;
+    border: none;
+    outline: none;
+    transition: 0.4s;
+    margin-bottom: 3px;
+}
+
+#neusta_areabrick_config .accordion button.active,
+#neusta_areabrick_config .accordion button:hover {
+    background-color: #ccc;
+}
+
+#neusta_areabrick_config .accordion ul {
+    padding: 0 18px;
+    display: none;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: 500px;
+}
+
+#neusta_areabrick_config .accordion ul.active {
+    display: block;
+}

public/js/areabrick-overview-unpublished-toggle.js

@@ -0,0 +1,9 @@
+document.addEventListener('DOMContentLoaded', function () {
+    document.addEventListener('click', event => {
+        const el = event.target.closest('#neusta_areabrick_config .accordion');
+
+        if (el) {
+            el.querySelectorAll('button, ul').forEach(el => el.classList.toggle('active'));
+        }
+    });
+}, { once: true });

public/js/areabrick-overview.js

@@ -0,0 +1,56 @@
+pimcore.registerNS('neusta.areabrick_config.areabrick_overview');
+
+neusta.areabrick_config.areabrick_overview = Class.create({
+
+    tabId: 'neusta-areabrick-overview-tab',
+    panel: null,
+
+    initialize: function () {
+        this.getTabPanel();
+    },
+
+    getTabPanel: function () {
+        if (!this.panel) {
+            this.panel = Ext.create('Ext.panel.Panel', {
+                id: this.tabId,
+                title: t('neusta_areabrick_config.areabrick_overview'),
+                iconCls: 'pimcore_icon_areabrick',
+                border: false,
+                layout: 'fit',
+                flex: 1,
+                width: '100%',
+                scrollable: true,
+                closable: true,
+            });
+
+            const tabPanel = Ext.getCmp('pimcore_panel_tabs');
+            tabPanel.add(this.panel);
+            tabPanel.setActiveItem(this.tabId);
+
+            this.panel.on('destroy', function () {
+                pimcore.globalmanager.remove(this.tabId);
+            }.bind(this));
+
+            Ext.Ajax.request({
+                url: Routing.generate('neusta_areabrick_config_areabrick_overview'),
+                success: function(response) {
+                    this.panel.add({
+                        html: response.responseText,
+                        autoScroll: true,
+                    });
+                }.bind(this),
+            });
+
+            document.getElementById(this.tabId).addEventListener('click', event => {
+                const el = event.target.closest('#neusta_areabrick_config a[data-page-id]');
+
+                if (el) {
+                    pimcore.helpers.openDocument(el.dataset.pageId, el.dataset.pageType);
+                }
+            });
+        }
+
+        return this.panel;
+    },
+
+});

public/js/startup.js

@@ -0,0 +1,49 @@
+pimcore.registerNS('neusta.areabrick_config.startup');
+
+neusta.areabrick_config.startup = Class.create({
+
+    initialize: function () {
+        if (pimcore.events.preMenuBuild) {
+            document.addEventListener(pimcore.events.preMenuBuild, this.preMenuBuild.bind(this));
+        } else {
+            // Todo: remove when we drop Pimcore 10 support
+            document.addEventListener(pimcore.events.pimcoreReady, this.preMenuBuild.bind(this));
+        }
+    },
+
+    preMenuBuild: function (e) {
+        if (!pimcore.globalmanager.get('perspective').inToolbar('tools.areabricks')) {
+            return;
+        }
+
+        if (!pimcore.globalmanager.get('user').isAllowed('neusta_areabrick_config.areabrick_overview')) {
+            return;
+        }
+
+        const items = {
+            text: t('neusta_areabrick_config.areabrick_overview'),
+            iconCls: 'pimcore_nav_icon_objectbricks',
+            priority: 31,
+            itemId: 'pimcore_menu_tools_areabricks',
+            handler: this.openAreabrickOverview,
+        }
+
+        if (e.type === pimcore.events.preMenuBuild) {
+            e.detail.menu.extras.items.push(items);
+        } else {
+            // Todo: remove when we drop Pimcore 10 support
+            pimcore.globalmanager.get('layout_toolbar').extrasMenu.insert(4, items);
+        }
+    },
+
+    openAreabrickOverview: function() {
+        try {
+            pimcore.globalmanager.get('neusta_areabrick_config_areabrick_overview').activate();
+        } catch (e) {
+            pimcore.globalmanager.add('neusta_areabrick_config_areabrick_overview', new neusta.areabrick_config.areabrick_overview());
+        }
+    },
+
+});
+
+new neusta.areabrick_config.startup();

src/Bricks/Model/Brick.php

@@ -0,0 +1,18 @@
+<?php declare(strict_types=1);
+
+namespace Neusta\Pimcore\AreabrickConfigBundle\Bricks\Model;
+
+final class Brick
+{
+    public string $id;
+    public string $name;
+    public ?string $version;
+    public ?string $description;
+    public ?string $template;
+
+    /** @var list<Page> */
+    public array $pages;
+
+    /** @var list<BrickProperty> */
+    public array $additionalProperties;
+}

src/Bricks/Model/BrickProperty.php

@@ -0,0 +1,9 @@
+<?php declare(strict_types=1);
+
+namespace Neusta\Pimcore\AreabrickConfigBundle\Bricks\Model;
+
+final class BrickProperty
+{
+    public string $name;
+    public string $value;
+}

src/Bricks/Model/Page.php

@@ -0,0 +1,11 @@
+<?php declare(strict_types=1);
+
+namespace Neusta\Pimcore\AreabrickConfigBundle\Bricks\Model;
+
+final class Page
+{
+    public int $id;
+    public string $type;
+    public string $url;
+    public bool $published = false;
+}