Bug 1414 - Is not possible to remove all role-mappings of a user

 * Able remove the project role mapping

Change-Id: I68ec168d18675434faf98b57a34183ac06cafb60
Signed-off-by: Barath Kumar R <barath.r@tataelxsi.co.in>
diff --git a/src/app/users/project-role/ProjectRoleComponent.html b/src/app/users/project-role/ProjectRoleComponent.html
index c093f37..c85b768 100644
--- a/src/app/users/project-role/ProjectRoleComponent.html
+++ b/src/app/users/project-role/ProjectRoleComponent.html
@@ -29,7 +29,9 @@
                     <i class="fas fa-plus-circle"></i> {{'PAGE.USERS.ADDMAPPINGS' | translate}}</button>
             </div>
         </div>
-        <label class="col-sm-12 col-form-label mandatory-label" [ngClass]="{'text-danger': projectRoleForm.invalid === true && submitted === true}">{{'MANDATORYCHECK' | translate}}</label>
+        <label class="col-sm-12 col-form-label mandatory-label"
+            [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>
@@ -44,9 +46,19 @@
                         formControlName="role_name" id="roles_{{i}}"
                         [ngClass]="{ 'is-invalid': submitted && params.controls.role_name.errors }"></ng-select>
                 </div>
-                <div class="col-sm-1">
-                    <button type="button" class="btn btn-sm btn-danger remove-mapping" (click)="removeMapping(i)">
-                        <i class="fas fa-times-circle"></i>
+                <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>
             </div>