Final fixes

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+* [PR-55](https://github.com/itk-dev/rpa-process-overview/pull/55)
+  * Made Danish translations for widgets work
+  * Removed filtering from Search widget
+  * Cleaned up UI
 * [PR-45](https://github.com/itk-dev/rpa-process-overview/pull/45)
   Added metadata filter
 * [PR-52](https://github.com/itk-dev/rpa-process-overview/pull/52)

assets/app.js

@@ -1,9 +1 @@
-/*
- * Welcome to your app's main JavaScript file!
- *
- * This file will be included onto the page via the importmap() Twig function,
- * which should already be in your base.html.twig.
- */
 import "./styles/app.css";
-
-console.log("This log comes from assets/app.js - welcome to AssetMapper! 🎉");

assets/styles/app.css

@@ -9,91 +9,25 @@
   --succeeded-color-bg: oklch(52.7% 0.154 150.069);
 
   --connector-width: 0.2em;
-}
-
-td.step {
-  position: relative;
-
-  &::before {
-    width: 100%;
-    height: var(--connector-width);
-    background: linear-gradient(
-      90deg,
-      var(--pending-color-bg) 0%,
-      var(--pending-color-bg) 50%,
-      var(--pending-color-bg) 50%,
-      var(--pending-color-bg) 100%
-    );
-    display: block;
-    position: absolute;
-    top: calc(50% - var(--connector-width) / 2);
-    left: 0;
-    content: "";
-  }
-
-  &.succeeded {
-    &::before {
-      background: var(--succeeded-color-bg);
-    }
-
-    &:has(+ .failed)::before {
-      background: linear-gradient(
-        90deg,
-        var(--succeeded-color-bg) 0%,
-        var(--succeeded-color-bg) 50%,
-        var(--pending-color-bg) 50%,
-        var(--pending-color-bg) 100%
-      );
-    }
 
-    &.first::before {
-      background: linear-gradient(
-        90deg,
-        var(--no-color) 0%,
-        var(--no-color) 50%,
-        var(--succeeded-color-bg) 50%,
-        var(--succeeded-color-bg) 100%
-      );
-    }
-
-    &.first:has(+ .failed)::before {
-      background: linear-gradient(
-        90deg,
-        var(--no-color) 0%,
-        var(--no-color) 50%,
-        var(--pending-color-bg) 50%,
-        var(--pending-color-bg) 100%
-      );
-    }
+  --step-width: 8em;
+  --meta-max-width: 12em;
+}
 
-    &.last::before {
-      background: linear-gradient(
-        90deg,
-        var(--succeeded-color-bg) 0%,
-        var(--succeeded-color-bg) 50%,
-        var(--no-color) 50%,
-        var(--no-color) 100%
-      );
-    }
-  }
+th.meta,
+td.meta {
+  text-align: left;
+  max-width: var(--meta-max-width);
+}
 
-  &.first::before {
-    background: linear-gradient(
-      90deg,
-      var(--no-color) 0%,
-      var(--no-color) 50%,
-      var(--pending-color-bg) 50%,
-      var(--pending-color-bg) 100%
-    );
-  }
+th.step,
+td.step {
+  text-align: center;
+  width: var(--step-width);
+  /* Setting only width does not seem to work. */
+  max-width: var(--step-width);
+}
 
-  &.last::before {
-    background: linear-gradient(
-      90deg,
-      var(--pending-color-bg) 0%,
-      var(--pending-color-bg) 50%,
-      var(--no-color) 50%,
-      var(--no-color) 100%
-    );
-  }
+td.step {
+  position: relative;
 }

config/packages/security.yaml

@@ -17,13 +17,20 @@ security:
                 - ItkDev\OpenIdConnectBundle\Security\CliLoginTokenAuthenticator
             entry_point: App\Security\OidcAuthenticator
 
+            logout:
+                path: /logout
+
             # activate different ways to authenticate
             # https://symfony.com/doc/current/security.html#the-firewall
 
             # https://symfony.com/doc/current/security/impersonating_user.html
             # switch_user: true
 
     role_hierarchy:
+        !php/enum App\Entity\UserRole::SuperAdmin->value:
+            - !php/enum App\Entity\UserRole::OverviewEditor->value
+            - !php/enum App\Entity\UserRole::OverviewViewer->value
+            - !php/enum App\Entity\UserRole::OverviewSearcher->value
         !php/enum App\Entity\UserRole::Admin->value:
             - !php/enum App\Entity\UserRole::OverviewViewer->value
         !php/enum App\Entity\UserRole::OverviewEditor->value:
@@ -41,12 +48,3 @@ security:
         - { path: ^/logout, roles: !php/enum App\Entity\UserRole::User->value }
         - { path: '^/openidconnect/login(/.+)?$', role: PUBLIC_ACCESS }
         - { path: ^/, roles: !php/enum App\Entity\UserRole::User->value }
-
-# During develoment it's nice to be able to easily log out, e.g. to test
-# different user roles.
-when@dev:
-    security:
-        firewalls:
-            main:
-                logout:
-                    path: /logout

fixtures/process_overview.yaml

@@ -48,6 +48,7 @@ App\Entity\ProcessOverview:
           run_status: failed
         page_size: 7
       search:
+        title: Citizen search
         minimum_search_query_length: 3
 
   process_overview_2:
@@ -68,6 +69,7 @@ App\Entity\ProcessOverview:
         title: Failed processes
         page_size: 3
       search:
+        title: Citizen search
         minimum_search_query_length: 2
 
   process_overview_3:
@@ -87,6 +89,7 @@ App\Entity\ProcessOverview:
           run_status: failed
         page_size: 3
       search:
+        title: Citizen search
         minimum_search_query_length: 2
 
   process_overview_4:
@@ -106,6 +109,7 @@ App\Entity\ProcessOverview:
           run_status: pending
         page_size: 5
       search:
+        title: Citizen search
         minimum_search_query_length: 3
 
   process_overview_5:
@@ -125,6 +129,7 @@ App\Entity\ProcessOverview:
           run_status: completed
         page_size: 5
       search:
+        title: Search
         minimum_search_query_length: 3
 
   process_overview_incomplete:

patches/widget-dev.patch

@@ -11,21 +11,15 @@ index f1cf2ad..818b6a7 100644
 
          return $this->assetsPathResolver->resolvePublicPath($digestedPath);
 diff --git a/config/packages/security.yaml b/config/packages/security.yaml
-index 03caffa..0274cf0 100644
+index ff7017c..1c781e8 100644
 --- a/config/packages/security.yaml
 +++ b/config/packages/security.yaml
-@@ -35,14 +35,6 @@ security:
+@@ -43,8 +43,3 @@ security:
      # Easy way to control access for large sections of your site
      # Note: Only the *first* access control that matches will be used
      access_control:
 -        - { path: ^/admin, roles: !php/enum App\Entity\UserRole::Admin->value }
 -        - { path: ^/login, roles: PUBLIC_ACCESS }
 -        - { path: ^/logout, roles: !php/enum App\Entity\UserRole::User->value }
 -        - { path: '^/openidconnect/login(/.+)?$', role: PUBLIC_ACCESS }
--        - {
--              path: ^/,
--              roles: !php/enum App\Entity\UserRole::OverviewViewer->value,
--          }
-
- # During develoment it's nice to be able to easily log out, e.g. to test
- # different user roles.
+-        - { path: ^/, roles: !php/enum App\Entity\UserRole::User->value }

src/Controller/Admin/ProcessOverviewCrudController.php

@@ -69,7 +69,10 @@ public function configureFields(string $pageName): iterable
     {
         yield IdField::new('id', t('ID'))
             ->onlyOnDetail();
-        yield TextField::new('label', t('Label'));
+        yield TextField::new('label', t('Label'))
+            // Needed prevent 'Expected argument of type "string", "null" given at property path "label".' exception
+            // when using Assert\NotBlank on property.
+            ->setFormTypeOption('empty_data', '');
         yield AssociationField::new('group', t('Group'));
 
         yield TextField::new('createdBy', t('Created by'))

src/Controller/DefaultController.php

@@ -11,6 +11,6 @@ final class DefaultController extends AbstractController
     #[Route('/', name: 'app_default')]
     public function index(): Response
     {
-        return $this->render('default/index.html.twig');
+        return $this->redirectToRoute('process_overview_group_index');
     }
 }

src/Controller/ProcessOverviewController.php

@@ -12,20 +12,23 @@
 use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
 use Symfony\Component\Routing\Attribute\Route;
 use Symfony\Component\Yaml\Yaml;
+use Symfony\Contracts\Translation\TranslatableInterface;
+use Symfony\Contracts\Translation\TranslatorInterface;
 
 use function Symfony\Component\Translation\t;
 
 #[Route('/group/{group}/overview', name: 'process_overview_')]
 final class ProcessOverviewController extends AbstractController
 {
     #[Route('/{overview}', name: 'show')]
-    public function show(ProcessOverviewGroup $group, ProcessOverview $overview): Response
+    public function show(ProcessOverviewGroup $group, ProcessOverview $overview, TranslatorInterface $translator): Response
     {
         if ($group !== $overview->getGroup()) {
             throw new BadRequestHttpException();
         }
 
         $overviewOptions = Yaml::parse($overview->getOptions() ?? '');
+        $translate = static fn (TranslatableInterface $t): string => $t->trans($translator);
 
         return $this->render('process_overview/show.html.twig', [
             'overview' => $overview,
@@ -34,8 +37,8 @@ public function show(ProcessOverviewGroup $group, ProcessOverview $overview): Re
                     'group' => $group->getId(),
                     'overview' => $overview->getId(),
                 ]),
-                'messages' => array_map('strval', [
-                    'Go to previous page' => strval(t('Go to previous page')),
+                'messages' => array_map($translate(...), [
+                    'Go to previous page' => t('Go to previous page'),
                     'Go to page {page}' => t('Go to page {page}'),
                     'Go to next page' => t('Go to next page'),
                     'Missing data' => t('Missing data'),
@@ -67,11 +70,12 @@ public function show(ProcessOverviewGroup $group, ProcessOverview $overview): Re
                 ]),
                 'process_id' => $overview->getId(),
                 'minimum_search_query_length' => $overviewOptions['search']['minimum_search_query_length'] ?? 2,
-                'messages' => array_map('strval', [
+                'messages' => array_map($translate(...), [
                     'Citizen search' => t('Citizen search'),
                     'Citizen information' => t('Citizen information'),
                     'An error occurred while searching' => t('An error occurred while searching'),
                 ]),
+                'title' => $overviewOptions['search']['title'] ?? '',
             ],
         ]);
     }

src/Entity/ProcessOverview.php

@@ -8,6 +8,7 @@
 use Doctrine\ORM\Mapping as ORM;
 use Gedmo\Blameable\Traits\BlameableEntity;
 use Gedmo\Timestampable\Traits\TimestampableEntity;
+use Symfony\Component\Validator\Constraints as Assert;
 
 #[ORM\Entity(repositoryClass: ProcessOverviewRepository::class)]
 #[ORM\HasLifecycleCallbacks]
@@ -22,13 +23,15 @@ class ProcessOverview
     private ?int $id = null;
 
     #[ORM\Column(length: 255)]
+    #[Assert\NotBlank]
     private ?string $label = null;
 
     #[ORM\ManyToOne(inversedBy: 'processes')]
     #[ORM\JoinColumn(nullable: false)]
     private ?ProcessOverviewGroup $group = null;
 
     #[ORM\Column(type: Types::TEXT, nullable: true)]
+    #[Assert\Yaml]
     private ?string $options = null;
 
     #[ORM\ManyToOne(inversedBy: 'processOverviews')]

templates/base.html.twig

@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>{% block title %}{{ site_title }}{% endblock %}</title>
-</script>
     {% block javascripts %}
         {% block importmap %}{{ importmap('app') }}{% endblock %}
     {% endblock %}

templates/default/index.html.twig

@@ -2,13 +2,13 @@
 
 {% block content %}
     <ul class="nav flex-column">
+        <li class="nav-item">
+            <a class="nav-link" href="{{ path('process_overview_group_index') }}">{{ 'Groups'|trans }}</a>
+        </li>
         {% if is_granted(enum('App\\Entity\\UserRole').Admin.value) %}
             <li class="nav-item">
                 <a class="nav-link" href="{{ path('process_overview_admin') }}">{{ 'Admin'|trans }}</a>
             </li>
         {% endif %}
-        <li class="nav-item">
-            <a class="nav-link" href="{{ path('process_overview_group_index') }}">{{ 'Groups'|trans }}</a>
-        </li>
     </ul>
 {% endblock %}

templates/process_overview_group/index.html.twig

@@ -3,14 +3,23 @@
 {% block title %}{{ 'Process overview groups'|trans }}{% endblock %}
 
 {% block content %}
-    <h1>{{ 'Groups'|trans }}</h1>
+    {# <h1>{{ 'Groups'|trans }}</h1> #}
 
-    <ul class="nav flex-column">
+    <ul>
         {% for group in groups %}
-            <li class="nav-item">
+            {% if group.overviews %}
+            <li>
                 <a class="nav-link"
                    href="{{ path('process_overview_group_show', {id: group.id}) }}">{{ group.label }}</a>
+                <ul>
+                    {% for overview in group.overviews %}
+                        <li class="ml-4">
+                            <a class="nav-link" href="{{ path('process_overview_show', {group: group.id, overview: overview.id}) }}">{{ overview.label }}</a>
+                        </li>
+                    {% endfor %}
+                </ul>
             </li>
+            {% endif %}
         {% endfor %}
     </ul>
 {% endblock %}