Lots of Bugfixes (#3308)

UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.html

@@ -2,21 +2,23 @@
   <div class="modal-container">
     <div class="modal-header">
       <h4 class="modal-title">{{t('title')}}</h4>
-      <button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="modal.close()"></button>
+      <button type="button" class="btn-close" aria-label="close" (click)="modal.close()"></button>
     </div>
     <div class="modal-body scrollable-modal">
       @if (currentLevel.length > 0) {
         <button class="btn btn-secondary w-100 mb-3 text-start" (click)="handleBack()">
-          ← {{t('back-to', {action: t(currentLevel[currentLevel.length - 1])})}}
+          ← {{t('back-to', {action: currentLevel[currentLevel.length - 1]})}}
         </button>
       }
 
       <div class="d-grid gap-2">
+
+
         @for (action of currentItems; track action.title) {
           @if (willRenderAction(action)) {
             <button class="btn btn-outline-primary text-start d-flex justify-content-between align-items-center w-100"
                     (click)="handleItemClick(action)">
-              {{t(action.title)}}
+              {{action.title}}
               @if (action.children.length > 0 || action.dynamicList) {
                 <span class="ms-1">→</span>
               }

UI/Web/src/app/_single-module/actionable-modal/actionable-modal.component.ts

@@ -9,7 +9,7 @@ import {
   Output
 } from '@angular/core';
 import {NgClass} from "@angular/common";
-import {TranslocoDirective} from "@jsverse/transloco";
+import {translate, TranslocoDirective} from "@jsverse/transloco";
 import {Breakpoint, UtilityService} from "../../shared/_services/utility.service";
 import {NgbActiveModal} from "@ng-bootstrap/ng-bootstrap";
 import {Action, ActionItem} from "../../_services/action-factory.service";
@@ -48,7 +48,8 @@ export class ActionableModalComponent implements OnInit {
   user!: User | undefined;
 
   ngOnInit() {
-    this.currentItems = this.actions;
+    this.currentItems = this.translateOptions(this.actions);
+
     this.accountService.currentUser$.pipe(tap(user => {
       this.user = user;
       this.cdRef.markForCheck();
@@ -58,17 +59,21 @@ export class ActionableModalComponent implements OnInit {
   handleItemClick(item: ActionItem<any>) {
     if (item.children && item.children.length > 0) {
       this.currentLevel.push(item.title);
-      this.currentItems = item.children;
-    } else if (item.dynamicList) {
-      item.dynamicList.subscribe(dynamicItems => {
-        this.currentLevel.push(item.title);
-        this.currentItems = dynamicItems.map(di => ({
-          ...item,
-          title: di.title,
-          _extra: di
-        }));
-      });
-    } else {
+
+      if (item.children.length === 1 && item.children[0].dynamicList) {
+        item.children[0].dynamicList.subscribe(dynamicItems => {
+          this.currentItems = dynamicItems.map(di => ({
+            ...item,
+            children: [], // Required as dynamic list is only one deep
+            title: di.title,
+            _extra: di
+          }));
+        });
+      } else {
+        this.currentItems = this.translateOptions(item.children);
+      }
+    }
+    else {
       this.actionPerformed.emit(item);
       this.modal.close(item);
     }
@@ -84,15 +89,15 @@ export class ActionableModalComponent implements OnInit {
         items = items.find(item => item.title === level)?.children || [];
       }
 
-      this.currentItems = items;
+      this.currentItems = this.translateOptions(items);
       this.cdRef.markForCheck();
     }
   }
 
-  // willRenderAction(action: ActionItem<any>) {
-  //   if (this.user === undefined) return false;
-  //
-  //   return this.accountService.canInvokeAction(this.user, action.action);
-  // }
+  translateOptions(opts: Array<ActionItem<any>>) {
+    return opts.map(a => {
+      return {...a, title: translate('actionable.' + a.title)};
+    })
+  }
 
 }

UI/Web/src/app/_single-module/card-actionables/card-actionables.component.ts

@@ -124,7 +124,7 @@ export class CardActionablesComponent implements OnInit {
   openMobileActionableMenu(event: any) {
     this.preventEvent(event);
 
-    const ref = this.modalService.open(ActionableModalComponent, {fullscreen: 'sm'});
+    const ref = this.modalService.open(ActionableModalComponent, {fullscreen: true, centered: true});
     ref.componentInstance.actions = this.actions;
     ref.componentInstance.willRenderAction = this.willRenderAction.bind(this);
     ref.componentInstance.shouldRenderSubMenu = this.shouldRenderSubMenu.bind(this);