Add icon property to backend and frontend models and UI

Co-authored-by: renemadsen <[email protected]>

Author: Copilot

eFormAPI/eFormAPI.Web/Services/NavigationMenu/NavigationMenuItemModel.cs

@@ -47,4 +47,5 @@ public class NavigationMenuItemModel
         = new List<NavigationMenuTranslationModel>();
 
     public bool IsInternalLink { get; set; }
+    public string Icon { get; set; }
 }

eFormAPI/eFormAPI.Web/Services/NavigationMenu/NavigationMenuTemplateItemModel.cs

@@ -35,4 +35,5 @@ public class NavigationMenuTemplateItemModel
     public int? RelatedTemplateItemId { get; set; }
     public List<NavigationMenuTranslationModel> Translations { get; set; }
         = new List<NavigationMenuTranslationModel>();
+    public string Icon { get; set; }
 }

eform-client/src/app/common/models/navigation-menu/navigation-menu.model.ts

@@ -18,6 +18,7 @@ export class NavigationMenuTemplateItemModel {
   link: string;
   collapsed: boolean;
   translations: NavigationMenuTranslationModel[];
+  icon: string;
 }
 
 export class NavigationMenuItemModel {
@@ -34,6 +35,7 @@ export class NavigationMenuItemModel {
   securityGroupsIds: number[];
   translations: NavigationMenuTranslationModel[];
   isInternalLink: boolean = true;
+  icon: string;
 }
 
 export class NavigationMenuTranslationModel {

eform-client/src/app/components/navigation/navigation.component.html

@@ -15,6 +15,7 @@
          [id]="node.e2EId"
          (click)="onClickOnNode()"
       >
+        <mat-icon *ngIf="node.icon" class="menu-icon">{{ node.icon }}</mat-icon>
         {{ node.name }}
       </a>
       <a mat-button
@@ -24,6 +25,7 @@
          [href]="node.link"
          (click)="onClickOnNode()"
       >
+        <mat-icon *ngIf="node.icon" class="menu-icon">{{ node.icon }}</mat-icon>
         {{node.name }}
       </a>
     </ng-container>
@@ -37,6 +39,7 @@
             matTreeNodeToggle
             [id]="node.e2EId"
           >
+            <mat-icon *ngIf="node.icon" class="menu-icon" style="vertical-align: middle; margin-right: 8px;">{{ node.icon }}</mat-icon>
             <span style="">{{node.name}}</span>
           </a>
         </mat-expansion-panel-header>

eform-client/src/app/components/navigation/navigation.component.ts

@@ -17,6 +17,7 @@ interface MenuNode {
   position: number;
   isInternalLink: boolean;
   guards: Array<string>;
+  icon?: string;
 }
 
 @AutoUnsubscribe()

eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.html

@@ -13,6 +13,17 @@ <h3 mat-dialog-title>{{'Edit menu entry' | translate}}</h3>
         [multiple]="true"      >
       </mtx-select>
     </mat-form-field>
+    <mat-form-field>
+      <mat-label>{{ 'Icon' | translate }}</mat-label>
+      <input
+        matInput
+        type="text"
+        id="editIconInput"
+        name="editIconInput"
+        [(ngModel)]="item.icon"
+        placeholder="e.g., home, settings, dashboard"
+      >
+    </mat-form-field>
     <div class="d-flex flex-row align-items-center need-wrapper"
          *ngIf="item.type === menuItemType.CustomLink || item.type === menuItemType.Link">
       <mat-form-field>