Skip to content

Commit

Permalink
Feature/ppg 40 vijay the manage groups functionality changes UI (#1262)
Browse files Browse the repository at this point in the history
* Group related changes are done
for manage my account page

* normal users A/Cs are
verified and fixed.
  • Loading branch information
VijayHirudayasamy-bc authored Apr 24, 2023
1 parent 094e197 commit bc26289
Show file tree
Hide file tree
Showing 6 changed files with 679 additions and 580 deletions.
85 changes: 58 additions & 27 deletions src/app/components/accordion/accordion.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@
<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 ==
<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>
<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>
Expand All @@ -24,17 +26,21 @@
<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>
<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}}
<li *ngFor="let orgRole of groupdata.serviceRoleGroups">{{orgRole.name}}
<strong *ngIf="orgRole.approvalStatus === 0"> - Pending approval</strong>
</li>
</span>
<ng-template #noRoleData>
This user does not have access to any service through their membership of this group
{{!noRoleMessage? 'This user does not have access to any service through
their membership of this group.':noRoleMessage}}

</ng-template>
</ul>
</div>
Expand All @@ -51,32 +57,57 @@
<strong class="custom_strong">{{headerText}}</strong>
<br>
<br>
<!-- <span class="none_span">None</span> -->
<span *ngIf="accessTable === 'groupsMember'" class="none_span">This user is not member of any group.</span>
<span *ngIf="accessTable === 'noneGroupsMember'" class="none_span">There are no unassigned groups for this user.</span>
<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">
<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>
<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;">
<li *ngFor="let orgRole of groupdata.serviceRoleGroups">{{orgRole.name}}
<strong *ngIf="orgRole.approvalStatus === 0"> - Pending approval</strong>
</li>
</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>
<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>
</div>
</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>
15 changes: 11 additions & 4 deletions src/app/components/accordion/accordion.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,16 @@ export class AccordionComponent implements OnInit, OnChanges {
@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 groupShow: boolean = false;
constructor(private router: Router) { }

Expand Down Expand Up @@ -45,18 +52,18 @@ export class AccordionComponent implements OnInit, OnChanges {
this[eventName].emit(data);
}

public toggleRoleForUser(id: string):void{
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 data = {
public goToEditGroup(groupId: any) {
let data = {
isEdit: false,
groupId: groupId,
accessFrom: "users",
isUserAccess: true
};
window.open( 'manage-groups/view?data=' + JSON.stringify(data));
window.open('manage-groups/view?data=' + JSON.stringify(data));
}
}
23 changes: 13 additions & 10 deletions src/app/models/user.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -132,22 +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
isAdmin: boolean
headerTextKey: string
headerText:string,
accessTable:string
groupShow:boolean
data:any[]
headerText: string,
accessTable: string
groupShow: boolean
noRoleMessage?: string | any
noDataGroupsMemberMessage?: string | any
noDatanoneGroupsMemberMessage?: string | any
data: any[]
}
Original file line number Diff line number Diff line change
@@ -1,59 +1,60 @@
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<div class="user-profile-container">
<div class="govuk-breadcrumbs">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a *ngIf="isOrgAdmin" class="govuk-breadcrumbs__link" routerLink="/home">
{{ 'ADMINISTRATOR_DASHBOARD' | translate }}
<div class="govuk-grid-column-two-thirds">
<div class="user-profile-container">
<div class="govuk-breadcrumbs">
<ol class="govuk-breadcrumbs__list">
<li class="govuk-breadcrumbs__list-item">
<a *ngIf="isOrgAdmin" class="govuk-breadcrumbs__link" routerLink="/home">
{{ 'ADMINISTRATOR_DASHBOARD' | translate }}
</a>
<a *ngIf="!isOrgAdmin" class="govuk-breadcrumbs__link" routerLink="/home">
{{"PUBLIC_PROCUREMENT_GATEWAY_DASHBOARD" | translate}}
{{"PUBLIC_PROCUREMENT_GATEWAY_DASHBOARD" | translate}}
</a>
</li>
<li class="govuk-breadcrumbs__list-item" *ngIf="userStatus === 0">
<span class="govuk-breadcrumbs__link">Account already created</span>
</li>
<li class="govuk-breadcrumbs__list-item" *ngIf="userStatus === 1 || userStatus === 2">
<span class="govuk-breadcrumbs__link">User not created</span>
</li>
<li class="govuk-breadcrumbs__list-item" *ngIf="userStatus === 3">
<span class="govuk-breadcrumbs__link">Error</span>
</li>
</ol>
</div>
<div *ngIf="userStatus === 3" class="govuk-error-summary contact-form-error" aria-labelledby="error-summary-title"
role="alert" tabindex="-1" id="error-summary" data-module="govuk-error-summary">
<h2 class="govuk-error-summary__title" id="error-summary-title">
{{ "ERROR_SUMMARY" | translate }}
</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li>
<a href="javascript:;" onClick="return false;">Invalid Link</a>
</li>
<li class="govuk-breadcrumbs__list-item" *ngIf="userStatus === 0">
<span class="govuk-breadcrumbs__link">Account already created</span>
</li>
<li class="govuk-breadcrumbs__list-item" *ngIf="userStatus === 1 || userStatus === 2">
<span class="govuk-breadcrumbs__link">User not created</span>
</li>
<li class="govuk-breadcrumbs__list-item" *ngIf="userStatus === 3">
<span class="govuk-breadcrumbs__link">Error</span>
</li>
</ol>
</ul>
</div>
<div *ngIf="userStatus === 3" class="govuk-error-summary contact-form-error" aria-labelledby="error-summary-title"
role="alert" tabindex="-1" id="error-summary" data-module="govuk-error-summary">
<h2 class="govuk-error-summary__title" id="error-summary-title">
{{ "ERROR_SUMMARY" | translate }}
</h2>
<div class="govuk-error-summary__body">
<ul class="govuk-list govuk-error-summary__list">
<li>
<a href="javascript:;" onClick="return false;">Invalid Link</a>
</li>
</ul>
</div>
</div>
<div *ngIf="userStatus === 0">
<h1 class="govuk-heading-xl">Account already created</h1>
<div class="link_valid">
<p class="govuk-body-l">An account has already been set up for {{userInfo.email}}</p>
</div>
</div>
<div *ngIf="userStatus === 0">
<h1 class="govuk-heading-xl">Account already created</h1>
<div class="link_valid">
<p class="govuk-body-l">An account has already been set up for {{userInfo.email}}</p>
</div>
<div *ngIf="userStatus === 1">
<h1 class="govuk-heading-xl">User not created</h1>
<div class="link_valid">
<p class="govuk-body-l">You don't have permission to action this request.</p>
</div>
</div>
<div *ngIf="userStatus === 1">
<h1 class="govuk-heading-xl">User not created</h1>
<div class="link_valid">
<p class="govuk-body-l">You do not have permission to action this request.</p>
</div>
<div *ngIf="userStatus === 2">
<h1 class="govuk-heading-xl">User not created</h1>
<div class="link_valid">
<p class="govuk-body-l">The user creation request has expired. You can set this user up by <a class="navigation-text" routerLink="/manage-users/add-user/details">Adding a new user</a>. </p>
</div>
</div>
<div *ngIf="userStatus === 2">
<h1 class="govuk-heading-xl">User not created</h1>
<div class="link_valid">
<p class="govuk-body-l">The user creation request has expired. You can set this user up by <a
class="navigation-text" routerLink="/manage-users/add-user/details">Adding a new user</a>. </p>
</div>
<a *ngIf="userStatus != 3" href="javascript:;" class="navigation-text" routerLink="/home">Return to dashboard</a>
</div>
<a *ngIf="userStatus != 3" href="javascript:;" class="navigation-text" routerLink="/home">Return to dashboard</a>
</div>
</div>
</div>
</div>
Loading

0 comments on commit bc26289

Please sign in to comment.