Fix Bug 2289: Responsiveness Issue in GUI When Assigning Project Role Mapping
- Design change in project role mapping
- Added separate card for project role section to show 25 -
30 charcters in dropdown
Change-Id: If6ed4c43a03b10f6b6ab37c2116f59206e4d9535
Signed-off-by: SANDHYA.JS <sandhya.j@tataelxsi.co.in>
diff --git a/src/app/users/project-role/ProjectRoleComponent.html b/src/app/users/project-role/ProjectRoleComponent.html
index c85b768..31f71e4 100644
--- a/src/app/users/project-role/ProjectRoleComponent.html
+++ b/src/app/users/project-role/ProjectRoleComponent.html
@@ -33,33 +33,39 @@
[ngClass]="{'text-danger': projectRoleForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' |
translate}}</label>
<div *ngFor="let params of getControls(); let i = index;" [formGroupName]="i">
- <div class="form-group row">
- <label class="col-sm-2 col-form-label" for="project_{{i}}">{{'PROJECT' | translate}}*</label>
- <div class="col-sm-3">
- <ng-select placeholder="{{'SELECT' | translate}}" [items]="projects" bindLabel="name"
- bindValue="name" formControlName="project_name" id="project_{{i}}"
- [ngClass]="{ 'is-invalid': submitted && params.controls.project_name.errors }"></ng-select>
- </div>
- <label class="col-sm-2 col-form-label" for="roles_{{i}}">{{'ROLES' | translate}}*</label>
- <div class="col-sm-4">
- <ng-select placeholder="{{'SELECT' | translate}}" [items]="roles" bindLabel="name" bindValue="name"
- formControlName="role_name" id="roles_{{i}}"
- [ngClass]="{ 'is-invalid': submitted && params.controls.role_name.errors }"></ng-select>
- </div>
- <div class="col-sm-1"
- *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name === '' : true">
- <button class="button-xs" type="button" class="close mt-2" (click)="removeMapping(i)"
- placement="right" ngbTooltip="{{ 'CANCEL' | translate }}">
- <i class="fas fa-minus-circle text-danger"></i>
- </button>
- </div>
- <div class="col-sm-1"
- *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name !== '' : false">
- <button class="button-xs" type="button" class="close mt-2"
- (click)="deleteProjectAndRoleMapping(userDetails.project_role_mappings[i])" placement="right"
- ngbTooltip="{{ 'DELETE' | translate }}">
- <i class="fas fa-trash-alt text-danger"></i>
- </button>
+ <div class="card bg-light">
+ <div class="card-body">
+ <div class="form-group row">
+ <label class="col-sm-3 col-md-3 col-form-label" for="project_{{i}}">{{'PROJECT' | translate}}*</label>
+ <div class="col-sm-8 col-md-8">
+ <ng-select placeholder="{{'SELECT' | translate}}" [items]="projects" bindLabel="name"
+ bindValue="name" formControlName="project_name" id="project_{{i}}"
+ [ngClass]="{ 'is-invalid': submitted && params.controls.project_name.errors }">
+ </ng-select>
+ </div>
+ <label class="col-sm-3 col-md-3 col-form-label" for="roles_{{i}}">{{'ROLES' |
+ translate}}*</label>
+ <div class="col-sm-8 col-md-8">
+ <ng-select placeholder="{{'SELECT' | translate}}" [items]="roles" bindLabel="name"
+ bindValue="name" formControlName="role_name" id="roles_{{i}}"
+ [ngClass]="{ 'is-invalid': submitted && params.controls.role_name.errors }"></ng-select>
+ </div>
+ <div class="col-sm-1"
+ *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name === '' : true">
+ <button class="button-xs" type="button" class="close" (click)="removeMapping(i)"
+ placement="right" ngbTooltip="{{ 'CANCEL' | translate }}">
+ <i class="fas fa-minus-circle text-danger"></i>
+ </button>
+ </div>
+ <div class="col-sm-1"
+ *ngIf="userDetails.project_role_mappings[i] ? userDetails.project_role_mappings[i].project_name !== '' : false">
+ <button class="button-xs" type="button" class="close"
+ (click)="deleteProjectAndRoleMapping(userDetails.project_role_mappings[i])" placement="right"
+ ngbTooltip="{{ 'DELETE' | translate }}">
+ <i class="fas fa-trash-alt text-danger"></i>
+ </button>
+ </div>
+ </div>
</div>
</div>
</div>