[Example] Add custom view to the administration interface

assets/admin/app.js

@@ -1 +1,5 @@
 // Add project specific javascript code and import of additional bundles here:
+import {viewRegistry} from 'sulu-admin-bundle/containers';
+import ContactStatistics from "./views/ContactStatistics";
+
+viewRegistry.add('app.contact_statistics', ContactStatistics);

assets/admin/views/ContactStatistics.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import {observer} from 'mobx-react';
+import {action, observable} from 'mobx';
+import {Loader, Button} from 'sulu-admin-bundle/components';
+import {withToolbar} from 'sulu-admin-bundle/containers';
+import {translate} from 'sulu-admin-bundle/utils';
+import {ResourceRequester} from 'sulu-admin-bundle/services';
+
+@observer
+class ContactStatistics extends React.Component {
+    @observable loading = false;
+    @observable contactCount = undefined;
+
+    componentDidMount() {
+        this.loadData();
+    }
+
+    @action loadData = () => {
+        this.loading = true;
+        this.contactCount = undefined;
+        const contactResourceKey = this.props.router.route.options.contactResourceKey;
+
+        return ResourceRequester.getList(contactResourceKey)
+            .then(action((response) => {
+                this.contactCount = response.total;
+            }))
+            .catch((e) => {
+                console.error('Error while loading contact statistics from server.', e);
+            })
+            .finally(action(() => {
+                this.loading = false;
+            }));
+    }
+
+    navigateToContactList = () => {
+        const contactListView = this.props.router.route.options.contactListView;
+
+        this.props.router.navigate(contactListView);
+    }
+
+    render() {
+        if (this.loading) {
+            return <Loader/>;
+        }
+
+        return (
+            <div>
+                <div style={{marginBottom: 20}}>
+                    {translate('app.contact_statistics_count_text', {contactCount: this.contactCount})}
+                </div>
+                <Button
+                    onClick={this.navigateToContactList}
+                    skin="link"
+                >
+                    {translate('app.contact_statistics_link_text')}
+                </Button>
+            </div>
+        );
+    }
+}
+
+export default withToolbar(ContactStatistics, function () {
+    return {
+        items: [
+            {
+                type: 'button',
+                label: translate('app.refresh_statistics'),
+                icon: 'su-sync',
+                disabled: this.loading,
+                onClick: () => {
+                    this.loadData();
+                },
+            }
+        ]
+    };
+});

src/Admin/ContactStatisticsAdmin.php

@@ -0,0 +1,62 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Admin;
+
+use Sulu\Bundle\AdminBundle\Admin\Admin;
+use Sulu\Bundle\AdminBundle\Admin\Navigation\NavigationItem;
+use Sulu\Bundle\AdminBundle\Admin\Navigation\NavigationItemCollection;
+use Sulu\Bundle\AdminBundle\Admin\View\ViewBuilderFactoryInterface;
+use Sulu\Bundle\AdminBundle\Admin\View\ViewCollection;
+use Sulu\Bundle\ContactBundle\Admin\ContactAdmin;
+use Sulu\Component\Security\Authorization\PermissionTypes;
+use Sulu\Component\Security\Authorization\SecurityCheckerInterface;
+
+class ContactStatisticsAdmin extends Admin
+{
+    public const CONTACT_STATISTICS_VIEW = 'app.contact_statistics';
+
+    private ViewBuilderFactoryInterface $viewBuilderFactory;
+    private SecurityCheckerInterface $securityChecker;
+
+    public function __construct(
+        ViewBuilderFactoryInterface $viewBuilderFactory,
+        SecurityCheckerInterface $securityChecker
+    ) {
+        $this->viewBuilderFactory = $viewBuilderFactory;
+        $this->securityChecker = $securityChecker;
+    }
+
+    public function configureNavigationItems(NavigationItemCollection $navigationItemCollection): void
+    {
+        if (!$navigationItemCollection->has('sulu_contact.contacts')) {
+            return;
+        }
+
+        if ($this->securityChecker->hasPermission(ContactAdmin::CONTACT_SECURITY_CONTEXT, PermissionTypes::VIEW)) {
+            $contactStatisticsNavigationItem = new NavigationItem('app.contact_statistics');
+            $contactStatisticsNavigationItem->setPosition(30);
+            $contactStatisticsNavigationItem->setView(static::CONTACT_STATISTICS_VIEW);
+
+            $contactsNavigationItem = $navigationItemCollection->get('sulu_contact.contacts');
+            $contactsNavigationItem->addChild($contactStatisticsNavigationItem);
+        }
+    }
+
+    public function configureViews(ViewCollection $viewCollection): void
+    {
+        if ($this->securityChecker->hasPermission(ContactAdmin::CONTACT_SECURITY_CONTEXT, PermissionTypes::VIEW)) {
+            $viewCollection->add(
+                $this->viewBuilderFactory->createViewBuilder(self::CONTACT_STATISTICS_VIEW, '/contact-statistics', 'app.contact_statistics')
+                    ->setOption('contactListView', ContactAdmin::CONTACT_LIST_VIEW)
+                    ->setOption('contactResourceKey', 'contacts')
+            );
+        }
+    }
+
+    public static function getPriority(): int
+    {
+        return ContactAdmin::getPriority() - 1;
+    }
+}

translations/admin.de.json

@@ -10,5 +10,9 @@
     "app.album_selection_label": "{count} {count, plural, =1 {Album} other {Alben}} ausgewählt",
     "app.select_albums": "Alben auswählen",
     "app.no_album_selected": "Kein Album ausgewählt",
-    "app.select_album": "Album auswählen"
+    "app.select_album": "Album auswählen",
+    "app.contact_statistics": "Statistiken",
+    "app.refresh_statistics": "Stastiken aktualisieren",
+    "app.contact_statistics_count_text": "Die Applikation enthält {contactCount} Kontakte.",
+    "app.contact_statistics_link_text": "Navigiere zur Kontaktliste"
 }

translations/admin.en.json

@@ -10,5 +10,9 @@
     "app.album_selection_label": "{count} {count, plural, =1 {album} other {albums}} selected",
     "app.select_albums": "Select albums",
     "app.no_album_selected": "No album selected",
-    "app.select_album": "Select album"
+    "app.select_album": "Select album",
+    "app.contact_statistics": "Statistics",
+    "app.refresh_statistics": "Refresh Statistics",
+    "app.contact_statistics_count_text": "The application includes {contactCount} contacts at the moment.",
+    "app.contact_statistics_link_text": "Navigate to the contact list"
 }