From 23e1aa54e67d2101826f89fb05d3e0daae587d7f Mon Sep 17 00:00:00 2001
From: Abel Cota <abel@escire.lat>
Date: Mon, 17 Aug 2026 12:05:51 -0600
Subject: [PATCH] -Fix issue 1059, refactor html view to display in tabs insted
 of list

---
 .../group-form/group-form.component.html      | 79 ++++++++++++-------
 .../group-form/group-form.component.ts        | 14 +++-
 src/assets/i18n/en.json5                      |  6 ++
 3 files changed, 69 insertions(+), 30 deletions(-)

diff --git a/src/app/access-control/group-registry/group-form/group-form.component.html b/src/app/access-control/group-registry/group-form/group-form.component.html
index 060cc5b86dc..fd6fc180cae 100644
--- a/src/app/access-control/group-registry/group-form/group-form.component.html
+++ b/src/app/access-control/group-registry/group-form/group-form.component.html
@@ -35,37 +35,58 @@ <h1 class="border-bottom pb-2">{{messagePrefix + '.head.create' | translate}}</h
         }
       }
 
-      <ds-form [formId]="formId"
-        [formModel]="formModel"
-        [formGroup]="formGroup"
-        [formLayout]="formLayout"
-        [displayCancel]="false"
-        (submitForm)="onSubmit()">
-        <div before class="btn-group">
-          <button (click)="onCancel()" type="button"
-            class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
-          </div>
-          @if ((canEdit$ | async) && !(activeGroup$ | async)?.permanent) {
-            <div after class="btn-group">
-              <button (click)="delete()" class="btn btn-danger delete-button" type="button">
-                <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
-              </button>
+      <ul ngbNav [destroyOnHide]="true" #tabs="ngbNav" class="nav-tabs" role="tablist">
+        <li [ngbNavItem]="'editGroupTab'" role="presentation" data-test="editGroupTab">
+          <a ngbNavLink>{{messagePrefix + '.tabs.edit' | translate}}</a>
+          <ng-template ngbNavContent>
+            <div class="mt-2">
+              <ds-form [formId]="formId"
+                [formModel]="formModel"
+                [formGroup]="formGroup"
+                [formLayout]="formLayout"
+                [displayCancel]="false"
+                (submitForm)="onSubmit()">
+                <div before class="btn-group">
+                  <button (click)="onCancel()" type="button"
+                    class="btn btn-outline-secondary"><i class="fas fa-arrow-left"></i> {{messagePrefix + '.return' | translate}}</button>
+                  </div>
+                  @if ((canEdit$ | async) && !(activeGroup$ | async)?.permanent) {
+                    <div after class="btn-group">
+                      <button (click)="delete()" class="btn btn-danger delete-button" type="button">
+                        <i class="fa fa-trash"></i> {{ messagePrefix + '.actions.delete' | translate}}
+                      </button>
+                    </div>
+                  }
+                </ds-form>
             </div>
-          }
-        </ds-form>
-
+          </ng-template>
+        </li>
         @if ((activeGroup$ | async); as groupBeingEdited) {
-          <div class="mb-5">
-            @if (groupBeingEdited !== undefined) {
-              <ds-members-list
-              [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
-            }
-          </div>
-          @if (groupBeingEdited !== undefined) {
-            <ds-subgroups-list
-            [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
-          }
+          <li [ngbNavItem]="'ePeopleTab'" role="presentation" data-test="ePeopleTab">
+            <a ngbNavLink>{{messagePrefix + '.tabs.ePeople' | translate}}</a>
+            <ng-template ngbNavContent>
+              <div class="mt-2">
+                @if (groupBeingEdited !== undefined) {
+                  <ds-members-list
+                    [messagePrefix]="messagePrefix + '.members-list'"></ds-members-list>
+                }
+              </div>
+            </ng-template>
+          </li>
+          <li [ngbNavItem]="'groupsTab'" role="presentation" data-test="groupsTab">
+            <a ngbNavLink>{{messagePrefix + '.tabs.groups' | translate}}</a>
+            <ng-template ngbNavContent>
+              <div class="mt-2">
+                @if (groupBeingEdited !== undefined) {
+                  <ds-subgroups-list
+                    [messagePrefix]="messagePrefix + '.subgroups-list'"></ds-subgroups-list>
+                }
+              </div>
+            </ng-template>
+          </li>
         }
-      </div>
+      </ul>
+      <div [ngbNavOutlet]="tabs"></div>
+    </div>
     </div>
   </div>
diff --git a/src/app/access-control/group-registry/group-form/group-form.component.ts b/src/app/access-control/group-registry/group-form/group-form.component.ts
index f6ce8e9c433..14e2c3f3c5c 100644
--- a/src/app/access-control/group-registry/group-form/group-form.component.ts
+++ b/src/app/access-control/group-registry/group-form/group-form.component.ts
@@ -42,7 +42,14 @@ import {
   hasValueOperator,
   isNotEmpty,
 } from '@dspace/shared/utils/empty.util';
-import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import {
+  NgbModal,
+  NgbNav,
+  NgbNavContent,
+  NgbNavItem,
+  NgbNavLink,
+  NgbNavOutlet,
+} from '@ng-bootstrap/ng-bootstrap';
 import {
   DynamicFormControlModel,
   DynamicFormLayout,
@@ -93,6 +100,11 @@ import { ValidateGroupExists } from './validators/group-exists.validator';
     ContextHelpDirective,
     FormComponent,
     MembersListComponent,
+    NgbNav,
+    NgbNavContent,
+    NgbNavItem,
+    NgbNavLink,
+    NgbNavOutlet,
     SubgroupsListComponent,
     TranslateModule,
   ],
diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
index 6551143ff13..b6eb888e69e 100644
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -535,6 +535,12 @@
 
   "admin.access-control.groups.form.return": "Back",
 
+  "admin.access-control.groups.form.tabs.edit": "Edit Group",
+
+  "admin.access-control.groups.form.tabs.ePeople": "EPeople",
+
+  "admin.access-control.groups.form.tabs.groups": "Groups",
+
   "admin.quality-assurance.breadcrumbs": "Quality Assurance",
 
   "admin.notifications.event.breadcrumbs": "Quality Assurance Suggestions",