WEB-606 Add the columns Username and Is Self Service in the User Page (#3035)

src/app/users/users.component.html

@@ -30,6 +30,11 @@
         <td mat-cell *matCellDef="let user">{{ user.firstname }}</td>
       </ng-container>
 
+      <ng-container matColumnDef="username">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Login Name' | translate }}</th>
+        <td mat-cell *matCellDef="let user">{{ user.username }}</td>
+      </ng-container>
+
       <ng-container matColumnDef="lastname">
         <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Last Name' | translate }}</th>
         <td mat-cell *matCellDef="let user">{{ user.lastname }}</td>
@@ -45,6 +50,17 @@
         <td mat-cell *matCellDef="let user">{{ user.officeName }}</td>
       </ng-container>
 
+      <ng-container matColumnDef="isSelfServiceUser">
+        <th mat-header-cell *matHeaderCellDef>{{ 'labels.buttons.Is Self Service' | translate }}</th>
+        <td mat-cell *matCellDef="let user">
+          <span
+            [ngClass]="user.isSelfServiceUser ? 'self-service-true' : 'self-service-false'"
+            class="self-service-indicator"
+          ></span>
+          {{ user.isSelfServiceUser ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
+        </td>
+      </ng-container>
+
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns" [routerLink]="[row.id]" class="select-row"></tr>
     </table>

src/app/users/users.component.scss

@@ -12,4 +12,24 @@ table {
   .select-row:hover {
     cursor: pointer;
   }
+
+  .self-service-indicator {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    margin-right: 0.5rem;
+    vertical-align: middle;
+    box-sizing: border-box;
+  }
+
+  .self-service-true {
+    background-color: #43a047;
+    border: 1px solid #388e3c;
+  }
+
+  .self-service-false {
+    background-color: #e53935;
+    border: 1px solid #b71c1c;
+  }
 }

src/app/users/users.component.ts

@@ -69,10 +69,12 @@ export class UsersComponent implements OnInit, AfterViewInit {
   usersData: any;
   /** Columns to be displayed in users table. */
   displayedColumns: string[] = [
+    'username',
     'firstname',
     'lastname',
     'email',
-    'officeName'
+    'officeName',
+    'isSelfServiceUser'
   ];
   /** Data source for users table. */
   dataSource: MatTableDataSource<any>;

src/app/users/view-user/view-user.component.html

@@ -61,11 +61,13 @@
         <div class="content-row">
           <div class="label">{{ 'labels.buttons.Is Self Service' | translate }}</div>
           <div class="value">
-            <span
+            <span class="self-service-container">
-              [ngClass]="userData.selfService ? 'self-service-true' : 'self-service-false'"
+              <span
-              class="self-service-indicator"
+                [ngClass]="userData.selfService ? 'self-service-true' : 'self-service-false'"
-            ></span>
+                class="self-service-indicator"
-            {{ userData.selfService ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
+              ></span>
+              {{ userData.selfService ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
+            </span>
           </div>
         </div>
       </div>

src/app/users/view-user/view-user.component.scss

@@ -106,6 +106,12 @@
     border: 1px solid #b71c1c;
   }
 
+  .self-service-container {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
   button {
     transition: all 0.2s ease;