Ppg 40 the manage groups functionality changes UI

src/app/app.module.ts

@@ -197,6 +197,7 @@ import { SuccessOrgServiceComponent } from './pages/buyer/success-org-service/su
 import { ManageGroupErrorComponent } from './pages/manage-group/manage-group-error/manage-group-error.component';
 import { VerifyUserComponent } from './pages/manage-user/verify-user/verify-user.component';
 import { VerifyUserStatusComponent } from './pages/manage-user/verify-user-status/verify-user-status.component';
+import { AccordionComponent } from './components/accordion/accordion.component';
 
 export function HttpLoaderFactory(http: HttpClient) {
   return new TranslateHttpLoader(http);
@@ -359,7 +360,8 @@ export function createTranslateLoader(http: HttpClient) {
     SuccessOrgServiceComponent,
     ManageGroupErrorComponent,
     VerifyUserComponent,
-    VerifyUserStatusComponent
+    VerifyUserStatusComponent,
+    AccordionComponent
   ],
   imports: [
     // BrowserModule,

src/app/components/accordion/accordion.component.html

@@ -0,0 +1,113 @@
+<div class="admin_table" *ngIf="isAdmin">
+    <table class="govuk-table" *ngIf="data.length > 0; else noData">
+        <thead class="govuk-table__head">
+            <tr class="govuk-table__row">
+                <th scope="col" class="govuk-table__header border-bottom-0">{{headerText}}</th>
+                <th scope="col" class="govuk-table__header border-bottom-0 govuk-text-align-right">
+                    <p *ngIf="accessTable === 'groupsMember'" class="govuk-body"><a href="javascript:;"
+                            class="govuk-link" (click)="onTopToggle()">{{groupShow ==
+                            true ? 'hide all assigned' : (groupShow == false ? 'show all assigned' : '')}}
+                            ({{data.length}})</a></p>
+                    <p *ngIf="accessTable === 'noneGroupsMember'" class="govuk-body"><a href="javascript:;"
+                            class="govuk-link" (click)="onTopToggle()">{{groupShow ==
+                            true ? 'hide all unassigned' : (groupShow == false ? 'show all unassigned' : '')}}
+                            ({{data.length}})</a></p>
+                </th>
+            </tr>
+        </thead>
+        <tbody class="govuk-table__body border-top-1" *ngIf="groupShow">
+            <tr class="govuk-table__row" *ngFor="let groupdata of data ; let i=index">
+                <th scope="row" class="govuk-table__header">
+                    <div class="govuk-checkboxes" data-module="govuk-checkboxes">
+                        <div class="govuk-checkboxes__item">
+                            <input class="govuk-checkboxes__input" id="{{'orgGroupControl_' + groupdata.groupId}}"
+                                name="{{'orgGroupControl_' + groupdata.groupId}}" type="checkbox" value="true"
+                                [(ngModel)]="groupdata.checked" (click)="onCheckBoxClick(groupdata,groupdata.checked)">
+                            <label
+                                class="govuk-label govuk-checkboxes__label govuk-!-margin-bottom-2 govuk-!-margin-left-4 govuk-link"
+                                for="{{'groupdata' + groupdata.groupId}}">
+                                <a href="javascript:;" class="govuk-link"
+                                    (click)="goToEditGroup(groupdata.groupId)">{{groupdata[headerTextKeys]}}</a>
+                            </label>
+                            <ul class="govuk-list govuk-list--bullet govuk-!-margin-left-6" id="{{groupdata.groupId}}"
+                                style="display: none;">
+
+                                <span *ngIf="groupdata.serviceRoleGroups.length > 0; else noRoleData">
+                                    <li *ngFor="let orgRole of groupdata.serviceRoleGroups">{{orgRole.name}}
+                                        <strong *ngIf="orgRole.approvalStatus === 0"> - Pending approval</strong>
+                                    </li>
+                                </span>
+                                <ng-template #noRoleData>
+                                    {{!noRoleMessage? 'This user does not have access to any service through
+                                    their membership of this group.':noRoleMessage}}
+
+                                </ng-template>
+                            </ul>
+                        </div>
+                    </div>
+                </th>
+                <td class="govuk-table__cell govuk-text-align-right"><a href="javascript:;" class="govuk-link"
+                        (click)="onBottomToggle(groupdata.groupId)">{{getElementStatus(groupdata.groupId)}}</a></td>
+            </tr>
+        </tbody>
+    </table>
+    <ng-template #noData>
+        <div>
+            <fieldset class="gov_uk_fieldset">
+                <strong class="custom_strong">{{headerText}}</strong>
+                <br>
+                <br>
+                <span *ngIf="accessTable === 'groupsMember'" class="none_span">
+                    {{!noDataGroupsMemberMessage? 'This user is not
+                    member of any group.':noDataGroupsMemberMessage}}</span>
+                <span *ngIf="accessTable === 'noneGroupsMember'" class="none_span">
+                    {{!noDatanoneGroupsMemberMessage? 'There are no unassigned groups for
+                    this user.':noDatanoneGroupsMemberMessage}}
+
+                </span>
+            </fieldset>
+        </div>
+    </ng-template>
+</div>
+<div class="admin_table" *ngIf="!isAdmin">
+    <table class="govuk-table" *ngIf="data.length > 0; else noDataIsNotAdmin">
+        <thead class="govuk-table__head">
+            <tr class="govuk-table__row">
+                <th scope="col" class="govuk-table__header">Group name</th>
+                <th scope="col" class="govuk-table__header"></th>
+            </tr>
+        </thead>
+        <tbody class="govuk-table__body">
+            <tr class="govuk-table__row" *ngFor="let groupdata of data ; let i=index">
+                <th scope="row" class="govuk-table__header">{{groupdata[headerTextKeys]}}
+                    <ul class="govuk-list govuk-list--bullet govuk-!-margin-top-4" id="{{groupdata.groupId}}"
+                        style="display: none;">
+                        <span *ngIf="groupdata.serviceRoleGroups.length > 0; else noRoleDataIsNotAdmin">
+                            <li *ngFor="let orgRole of groupdata.serviceRoleGroups">{{orgRole.name}}
+                                <strong *ngIf="orgRole.approvalStatus === 0"> - Pending approval</strong>
+                            </li>
+                        </span>
+                        <ng-template #noRoleDataIsNotAdmin>
+                            {{!noRoleMessage? 'This user does not have access to any service through
+                            their membership of this group.':noRoleMessage}}
+                        </ng-template>
+                    </ul>
+                </th>
+                <td class="govuk-table__cell govuk-text-align-right"><a href="javascript:;" class="govuk-link"
+                        (click)="toggleRoleForUser(groupdata.groupId)">{{getElementStatus(groupdata.groupId)}}</a></td>
+            </tr>
+        </tbody>
+    </table>
+    <ng-template #noDataIsNotAdmin>
+        <div>
+            <fieldset class="gov_uk_fieldset">
+                <strong class="custom_strong">{{headerText}}</strong>
+                <br>
+                <br>
+                <span *ngIf="accessTable === 'groupsMember'" class="none_span">
+                    {{!noDataGroupsMemberMessage? 'This user is not
+                    member of any group.':noDataGroupsMemberMessage}}</span>
+            </fieldset>
+        </div>
+    </ng-template>
+</div>

src/app/components/accordion/accordion.component.scss

@@ -0,0 +1,28 @@
+.govuk-list--bullet {
+    padding-left: 35px;
+    list-style-type: disc;
+}
+.border-bottom-0 {
+    border-bottom: 0;
+}
+
+.border-top-1 {
+    border-top: 1px solid #b1b4b6;
+}
+.govuk-table__header.govuk-text-align-right,.govuk-table__cell.govuk-text-align-right {
+    text-align: right;
+}
+.custom_strong {
+    font-weight: 700;
+    font-family: "GDS Transport", arial, sans-serif;
+    font-size: 1.1875rem;
+    line-height: 1.3157894737;
+}
+.none_span {
+    font-size: 1.1875rem;
+    line-height: 1.3157894737; 
+}
+.gov_uk_fieldset {
+    // margin-top: 50px;
+    margin-bottom: 30px;
+}

src/app/components/accordion/accordion.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccordionComponent } from './accordion.component';
+
+describe('AccordionComponent', () => {
+  let component: AccordionComponent;
+  let fixture: ComponentFixture<AccordionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AccordionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/accordion/accordion.component.ts

@@ -0,0 +1,78 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-accordion',
+  templateUrl: './accordion.component.html',
+  styleUrls: ['./accordion.component.scss']
+})
+export class AccordionComponent implements OnInit, OnChanges {
+
+  @Input() data!: any[];
+  @Input() headerText!: string
+  @Input() headerTextKeys!: string
+  @Input() isAdmin!: boolean
+  @Input() accessTable!: string
+  @Input() groupShow!: boolean
+
+  @Input() noRoleMessage!: string
+  @Input() noDataGroupsMemberMessage!: string
+  @Input() noDatanoneGroupsMemberMessage!: string
+
+
+  @Output() checkBoxRemoveRoles = new EventEmitter<any>();
+  @Output() checkBoxAddRoles = new EventEmitter<any>();
+  public routeData: any = {};
+  public isEdit: boolean = false;
+
+
+  // public groupShow: boolean = false;
+  constructor(private activatedRoute: ActivatedRoute,) { }
+
+  ngOnChanges(): void {
+  }
+
+  ngOnInit(): void {
+  }
+
+  public onTopToggle(): void {
+    this.groupShow = !this.groupShow
+  }
+
+  public onBottomToggle(id: string): void {
+    const el: any = document.getElementById(id);
+    el.style.display = (el.style.display === 'block') ? 'none' : 'block';
+  }
+
+  public getElementStatus(id: string) {
+    const el: any = document.getElementById(id);
+    return el.style.display === 'block' ? 'Hide services' : 'Show services'
+  }
+
+  public onCheckBoxClick(data: any, checkValue: any): void {
+    const eventName = checkValue ? 'checkBoxRemoveRoles' : 'checkBoxAddRoles';
+    this[eventName].emit(data);
+  }
+
+  public toggleRoleForUser(id: string): void {
+    const el: any = document.getElementById(id);
+    el.style.display = (el.style.display === 'block') ? 'none' : 'block';
+  }
+
+  public goToEditGroup(groupId: any) {
+    let queryParams = this.activatedRoute.snapshot.queryParams;
+    if(queryParams.data)
+    {
+      this.routeData = JSON.parse(atob(queryParams.data));
+      this.isEdit = this.routeData['isEdit'];
+    }
+    let data = {
+      isEdit: true,
+      groupId: groupId,
+      accessFrom: "users",
+      isUserAccess: true,
+      userEditStatus: this.isEdit
+    };
+    window.open('manage-groups/view?data=' + JSON.stringify(data));
+  }
+}

src/app/components/govuk-table/govuk-table.component.html

@@ -37,6 +37,9 @@
           <span *ngIf="!findDateKey(dataKey) && dataKey != 'owner'">
             <div *ngIf="dataRow['serviceView'] == true;else other_content" class="role_group_content">
               <span [ngClass]="[ dataRow['serviceView'] == true ? 'role_lable' : '']">{{ dataRow[dataKey] }}</span>
+              <strong class="govuk-tag govuk-tag--grey govuk-!-margin-left-3" *ngIf="dataRow['approvalStatus'] === 0">
+                {{ 'PENDING_LABEL' | translate }}
+              </strong>
               <br>
               <span>{{dataRow['description']}}</span>
             </div>

src/app/models/organisationGroup.ts

@@ -1,4 +1,6 @@
 export interface Group {
+  serviceRoleGroups: any;
+  checked ?: boolean;
   groupId: number;
   mfaEnabled: boolean;
   groupName: string;

src/app/models/user.ts

@@ -70,8 +70,8 @@ export interface ServicePermissionInfo {
     name: string;
     key: string;
     id: number,
-    serviceClientId ?: string;
-    serviceClientName ?: string;
+    serviceClientId?: string;
+    serviceClientName?: string;
 }
 
 export interface UserProfileRequestInfo extends UserDetail {
@@ -132,14 +132,25 @@ export interface OrgUserListResponse extends PaginationInfo {
 
 export interface PendingApproveRole {
     userName: string;
-    detail : PendingApproveRoleDetail
+    detail: PendingApproveRoleDetail
 }
 
 export interface PendingApproveRoleDetail {
-    roleIds : []
+    roleIds: []
 }
 
 export interface acceptRejectRequestDetail {
-    pendingRoleIds : []
+    pendingRoleIds: []
     status: number
+}
+export interface userGroupTableDetail {
+    isAdmin: boolean
+    headerTextKey: string
+    headerText: string,
+    accessTable: string
+    groupShow: boolean
+    noRoleMessage?: string | any
+    noDataGroupsMemberMessage?: string | any
+    noDatanoneGroupsMemberMessage?: string | any
+    data: any[]
 }

src/app/pages/manage-group/manage-group-edit-users/manage-group-edit-users-component.ts

@@ -95,7 +95,8 @@ export class ManageGroupEditUsersComponent
         this.organisationId,
         this.searchingUserName,
         this.currentPage,
-        this.pageSize
+        this.pageSize,
+        true
       )
       .subscribe({
         next: (userListResponse: UserListResponse) => {