refactor(admin/ui): admin dashboard

EMS/admin-ui-bundle/assets/src/core/helpers/choicePicker.js

@@ -24,11 +24,11 @@ class ChoicePicker {
         return {
           item: ({ classNames }, data) => {
             let icon = ''
-            if (data.element?.dataset.icon ?? data.customProperties.icon) {
+            if (data.element?.dataset.icon ?? data.customProperties?.icon) {
               icon = `<i class="${data.element?.dataset.icon ?? data.customProperties.icon}"></i> `
             }
             let style = ''
-            if (data.element?.dataset.color ?? data.customProperties.color) {
+            if (data.element?.dataset.color ?? data.customProperties?.color) {
               const blackOrWhite =
                 luma(
                   (data.element?.dataset.color ?? data.customProperties.color).replace('#', '')

EMS/admin-ui-bundle/templates/bootstrap5/dashboard/abstract.html.twig

@@ -1,12 +1,28 @@
-{% extends '@EMSAdminUI/bootstrap5/base/admin.html.twig' %}
-{% trans_default_domain 'emsco-twigs' %}
+{% extends '@EMSAdminUI/bootstrap5/template/card.html.twig' %}
 
-{% block breadcrumb %}
-    <ol class="breadcrumb float-sm-end">
-        <li class="breadcrumb-item"><a href="{{ path('emsco_dashboard_admin_index') }}"><i class="{{ 'view.icon.class.dashboard'|trans }}"></i> {{ 'dashboard.menu'|trans }}</a></li>
-        {% block breadcrumb_items %}{% endblock breadcrumb_items %}
-    </ol>
-{% endblock %}
+{% block form %}
+<div class="row">
+    {{ form_row(form.name) }}
+    <div class="clearfix"></div>
+    {{ form_row(form.role) }}
+    <div class="clearfix"></div>
+    {{ form_row(form.icon) }}
+    <div class="clearfix"></div>
+    {{ form_row(form.label) }}
+    <div class="clearfix"></div>
+    {{ form_row(form.color) }}
+    <div class="clearfix"></div>
+    {{ form_row(form.sidebarMenu) }}
+    <div class="clearfix"></div>
+    {{ form_row(form.notificationMenu) }}
+    <div class="clearfix"></div>
+    {%  if form.type is defined %}
+        {{ form_row(form.type) }}
+        <div class="clearfix"></div>
+    {% endif %}
+    {%  if form.options is defined %}
+        {{ form_row(form.options) }}
+    {% endif %}
+</div>
+{% endblock form %}
 
-{% block pagetitle %}{{ block('title') }}{% endblock %}
-{% block subtitle %}<small>{{ 'dashboard.tagline'|trans }}</small>{% endblock %}

EMS/admin-ui-bundle/templates/bootstrap5/dashboard/add.html.twig

@@ -1,4 +1 @@
-{% extends '@EMSAdminUI/bootstrap5/dashboard/form.html.twig' %}
-{% trans_default_domain 'emsco-twigs' %}
-
-{% block title %}{{ 'dashboard.add.title'|trans }}{% endblock %}
+{% extends '@EMSAdminUI/bootstrap5/dashboard/abstract.html.twig' %}

EMS/admin-ui-bundle/templates/bootstrap5/dashboard/edit.html.twig

@@ -1,4 +1 @@
-{% extends '@EMSAdminUI/bootstrap5/dashboard/form.html.twig' %}
-{% trans_default_domain 'emsco-twigs' %}
-
-{% block title %}{{ 'dashboard.edit.title'|trans({'%label%': dashboard.label}) }}{% endblock %}
+{% extends '@EMSAdminUI/bootstrap5/dashboard/abstract.html.twig' %}

EMS/admin-ui-bundle/templates/bootstrap5/dashboard/services/error.html.twig

@@ -1,22 +1,8 @@
-{% extends '@EMSAdminUI/bootstrap5/base/admin.html.twig' %}
-{% trans_default_domain 'emsco-twigs' %}
-
-{% block breadcrumb %}
-    <ol class="breadcrumb float-sm-end">
-        <li class="breadcrumb-item"><a href="{{ path('emsco_dashboard', {name: dashboard.name}) }}"><i class="{{ dashboard.icon }}"></i> {{ dashboard.label }}</a></li>
-    </ol>
-{% endblock %}
-
-{% block title %}{{ 'dashboard.exception.title'|trans({'%name%': dashboard.name}) }}{% endblock %}
-{% block pagetitle %}{{ block('title') }}{% endblock %}
-{% block subtitle %}{% endblock %}
+{% extends '@EMSAdminUI/bootstrap5/template/card.html.twig' %}
 
 {% block body %}
-    <div class="row">
-        <div class="col-12">
-            <div class="card card-{{ theme_color }} card-outline card-body">
-                <pre>{{ exception.message }}</pre>
-            </div>
-        </div>
-    </div>
+    {% set content %}
+        <pre>{{ exception.message }}</pre>
+    {% endset %}
+    {{ parent() }}
 {% endblock %}

EMS/admin-ui-bundle/templates/bootstrap5/dashboard/services/template.html.twig

@@ -1,16 +1,6 @@
 {% extends '@EMSAdminUI/bootstrap5/base/admin.html.twig' %}
-{% trans_default_domain 'emsco-twigs' %}
-
-{% block breadcrumb %}
-    <ol class="breadcrumb float-sm-end">
-        <li class="breadcrumb-item"><a href="{{ path('emsco_dashboard', {name: dashboard.name}) }}"><i class="{{ dashboard.icon }}"></i> {{ dashboard.label }}</a></li>
-        {% block breadcrumb_items %}{% endblock breadcrumb_items %}
-    </ol>
-{% endblock %}
 
 {% block title %}{{ dashboard.label }}{% endblock %}
-{% block pagetitle %}{{ block('title') }}{% endblock %}
-{% block subtitle %}{% endblock %}
 
 
 {% block extraheader %}

EMS/core-bundle/src/Controller/Dashboard/DashboardController.php

@@ -8,6 +8,7 @@
 use EMS\CoreBundle\Controller\CoreControllerTrait;
 use EMS\CoreBundle\Core\Dashboard\DashboardManager;
 use EMS\CoreBundle\Core\DataTable\DataTableFactory;
+use EMS\CoreBundle\Core\UI\Page\Navigation;
 use EMS\CoreBundle\DataTable\Type\DashboardDataTableType;
 use EMS\CoreBundle\Entity\Dashboard;
 use EMS\CoreBundle\Form\Data\TableAbstract;
@@ -58,40 +59,52 @@ public function index(Request $request): Response
             'icon' => 'fa fa-dashboard',
             'title' => t('type.title_overview', ['type' => 'dashboard'], 'emsco-core'),
             'subTitle' => t('type.title_sub', ['type' => 'dashboard'], 'emsco-core'),
-            'breadcrumb' => [
-                'admin' => t('key.admin', [], 'emsco-core'),
-                'page' => t('key.dashboards', [], 'emsco-core'),
-            ],
+            'breadcrumb' => $this->breadcrumb(),
         ]);
     }
 
     public function add(Request $request): Response
     {
         $dashboard = new Dashboard();
+        $form = $this->createForm(DashboardType::class, $dashboard, [
+            'create' => true,
+        ]);
+        $form->handleRequest($request);
+        if ($form->isSubmitted() && $form->isValid()) {
+            $this->dashboardManager->update($dashboard);
 
-        return $this->edit($request, $dashboard, true);
+            return $this->redirectToRoute(Routes::DASHBOARD_ADMIN_EDIT, ['dashboard' => $dashboard->getId()]);
+        }
+
+        return $this->render("@$this->templateNamespace/dashboard/add.html.twig", [
+            'form' => $form->createView(),
+            'dashboard' => $dashboard,
+            'title' => t('type.title_create', ['type' => 'dashboard'], 'emsco-core'),
+            'subTitle' => t('type.title_sub', ['type' => 'dashboard'], 'emsco-core'),
+            'breadcrumb' => $this->breadcrumb()->add(
+                t('type.title_create', ['type' => 'dashboard'], 'emsco-core')
+            ),
+        ]);
     }
 
-    public function edit(Request $request, Dashboard $dashboard, bool $create = false): Response
+    public function edit(Request $request, Dashboard $dashboard): Response
     {
-        $form = $this->createForm(DashboardType::class, $dashboard, [
-            'create' => $create,
-        ]);
+        $form = $this->createForm(DashboardType::class, $dashboard);
         $form->handleRequest($request);
-
         if ($form->isSubmitted() && $form->isValid()) {
             $this->dashboardManager->update($dashboard);
 
-            if ($create) {
-                return $this->redirectToRoute(Routes::DASHBOARD_ADMIN_EDIT, ['dashboard' => $dashboard->getId()]);
-            }
-
             return $this->redirectToRoute(Routes::DASHBOARD_ADMIN_INDEX);
         }
 
-        return $this->render($create ? "@$this->templateNamespace/dashboard/add.html.twig" : "@$this->templateNamespace/dashboard/edit.html.twig", [
+        return $this->render("@$this->templateNamespace/dashboard/edit.html.twig", [
             'form' => $form->createView(),
             'dashboard' => $dashboard,
+            'title' => t('type.title_edit', ['type' => 'dashboard', 'label' => $dashboard->getLabel()], 'emsco-core'),
+            'subTitle' => t('type.title_sub', ['type' => 'dashboard'], 'emsco-core'),
+            'breadcrumb' => $this->breadcrumb()->add(
+                t('type.title_edit', ['type' => 'dashboard', 'label' => $dashboard->getLabel()], 'emsco-core')
+            ),
         ]);
     }
 
@@ -115,4 +128,13 @@ public function undefine(Dashboard $dashboard): Response
 
         return $this->redirectToRoute(Routes::DASHBOARD_ADMIN_INDEX);
     }
+
+    private function breadcrumb(): Navigation
+    {
+        return Navigation::admin()->add(
+            label: t('key.dashboards', [], 'emsco-core'),
+            icon: 'fa fa-dashboard',
+            route: 'emsco_dashboard_admin_index',
+        );
+    }
 }

EMS/core-bundle/src/Core/Dashboard/Services/Template.php

@@ -4,10 +4,13 @@
 
 namespace EMS\CoreBundle\Core\Dashboard\Services;
 
+use EMS\CoreBundle\Core\UI\Page\Navigation;
 use EMS\CoreBundle\Entity\Dashboard;
 use Symfony\Component\HttpFoundation\Response;
 use Twig\Environment;
 
+use function Symfony\Component\Translation\t;
+
 class Template implements DashboardInterface
 {
     public function __construct(private readonly Environment $twig, private readonly string $templateNamespace)
@@ -22,12 +25,24 @@ public function getResponse(Dashboard $dashboard): Response
             $response->setContent($this->twig->render("@$this->templateNamespace/dashboard/services/template.html.twig", [
                 'dashboard' => $dashboard,
                 'options' => $dashboard->getOptions(),
+                'title' => t('dashboard.exception.title', [], 'emsco-core'),
+                'subTitle' => t('type.title_sub', ['type' => 'dashboard'], 'emsco-core'),
+                'breadcrumb' => Navigation::dashboards()->add(
+                    text: $dashboard->getLabel(),
+                    icon: $dashboard->getIcon(),
+                ),
             ]));
         } catch (\Throwable $e) {
             $response->setContent($this->twig->render("@$this->templateNamespace/dashboard/services/error.html.twig", [
                 'exception' => $e,
                 'dashboard' => $dashboard,
                 'options' => $dashboard->getOptions(),
+                'title' => t('dashboard.exception.title', [], 'emsco-core'),
+                'subTitle' => t('type.title_sub', ['type' => 'dashboard'], 'emsco-core'),
+                'breadcrumb' => Navigation::dashboards()->add(
+                    text: $dashboard->getLabel(),
+                    icon: $dashboard->getIcon(),
+                ),
             ]));
             $response->setStatusCode(Response::HTTP_INTERNAL_SERVER_ERROR);
         }

EMS/core-bundle/src/Core/UI/Page/Navigation.php

@@ -20,6 +20,11 @@ public static function admin(): self
         return (new self())->add(label: t('key.admin', [], 'emsco-core'));
     }
 
+    public static function dashboards(): self
+    {
+        return (new self())->add(label: t('key.dashboards', [], 'emsco-core'));
+    }
+
     public function contentType(ContentType $contentType): self
     {
         $this->contentTypes();

EMS/core-bundle/translations/emsco-core+intl-icu.en.yml

@@ -99,6 +99,9 @@ core:
                 other   {There are # indexes}
             }
     version: 'Version {core} with Symfony {symfony}'
+dashboard:
+    exception:
+        title: 'An exception has been raised'
 field:
     alias: Alias
     available: Available
@@ -323,6 +326,7 @@ type:
             action        {Create action}
             analyzer      {Create analyzer}
             channel       {Create channel}
+            dashboard     {Create dashboard}
             content_type  {Create content type}
             form          {Create form}
             job           {Launch new job}
@@ -333,6 +337,7 @@ type:
             action        {Edit action: {label}}
             analyzer      {Edit analyzer: {label}}
             channel       {Edit channel: {label}}
+            dashboard     {Edit dashboard: {label}}
             content_type  {Edit content type: {label}}
             form          {Edit form: {label}}
             other         {Edit}

EMS/core-bundle/translations/emsco-twigs.en.yml

@@ -190,10 +190,10 @@ table:
 ems_core:
     dashboard:
         template:
-            icon: 'fa fa-html5'
+            icon: 'fa fa-brands fa-html5'
             label: Template
         export:
-            icon: 'glyphicon glyphicon-export'
+            icon: 'glyphicon glyphicon-export fa-solid fa-file-export'
             label: Export
         revision_task:
             icon: 'fa fa-sticky-note'