Standardize admin page headers and main page layout

src/app/components/admin-app/admin-app.component.html

@@ -10,19 +10,15 @@
     mode="side"
     [opened]="true"
   >
+    <mat-toolbar class="sidenav-header">
+      <a class="nolink" [routerLink]="['/']" title="Exit Administration">
+        <div class="cssLayoutRowStartCenter">
+          <mat-icon class="icon-35px player-icon-header" svgIcon="ic_crucible_player"></mat-icon>
+          <h2 class="icon-text">Administration</h2>
+        </div>
+      </a>
+    </mat-toolbar>
     <mat-list class="appitems-container">
-      <mat-list-item class="appslist">
-        <a class="nolink" [routerLink]="['/']">
-          <div class="d-flex align-items-center">
-            <mat-icon
-              class="player-icon"
-              svgIcon="ic_crucible_player"
-            ></mat-icon>
-            <h2 class="icon-text">Administration</h2>
-          </div>
-        </a>
-        <mat-divider></mat-divider>
-      </mat-list-item>
       @for (sectionItem of sectionItems; track sectionItem) {
         @if (permissions$ | async; as permissions) {
           @if (permissions.includes(sectionItem.permission)) {

src/app/components/admin-app/admin-app.component.scss

@@ -24,7 +24,8 @@
 }
 
 .appbarmenu-container {
-  min-width: 50px;
+  width: 250px;
+  border-right: solid var(--mat-sys-surface-container);
 }
 
 .lefticon {
@@ -43,7 +44,7 @@
 
 .icon-text {
   margin-left: 10px;
-  font-family: open_sansbold;
+  font-weight: bold;
 }
 
 .player-icon {
@@ -60,3 +61,25 @@
   cursor: pointer;
   color: var(--mat-sys-primary);
 }
+
+.sidenav-header {
+  height: 40px;
+  border-bottom: 2px solid var(--mat-sys-surface-container);
+}
+
+.player-icon-header {
+  color: var(--mat-sys-primary);
+}
+
+.icon-35px {
+  width: 35px;
+  height: 35px;
+  font-size: 35px;
+}
+
+.cssLayoutRowStartCenter {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+}

src/app/components/admin-app/admin-app.component.ts

@@ -41,20 +41,20 @@ export class AdminAppComponent implements OnInit, OnDestroy {
       svgIcon: true,
       permission: SystemPermission.ViewViews,
     },
-    {
-      name: 'Users',
-      section: Section.ADMIN_USERS,
-      icon: 'assets/img/SP_Icon_User.png',
-      svgIcon: false,
-      permission: SystemPermission.ViewUsers,
-    },
     {
       name: 'Application Templates',
       section: Section.ADMIN_APP_TEMP,
       icon: 'assets/img/SP_Icon_Intel.png',
       svgIcon: false,
       permission: SystemPermission.ViewApplications,
     },
+    {
+      name: 'Users',
+      section: Section.ADMIN_USERS,
+      icon: 'assets/img/SP_Icon_User.png',
+      svgIcon: false,
+      permission: SystemPermission.ViewUsers,
+    },
     {
       name: 'Roles',
       section: Section.ADMIN_ROLE_PERM,

src/app/components/admin-app/admin-user-search/admin-user-search.component.html

@@ -2,120 +2,64 @@
 Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 -->
-<div
-  [class.hidden]="userToEdit !== undefined"
-  class="user-list-container mat-elevation-z8"
->
-  <div class="d-flex align-items-center gap-4">
-    <div class="sp-icon">
-      <img height="35" src="assets/img/SP_Icon_User.png" alt="Users" />
-    </div>
-    <span class="header-text">Users</span>
-    <div class="my-1">
-      <mat-form-field style="width: 320px" subscriptSizing="dynamic">
-        <mat-icon
-          matPrefix
-          style="transform: scale(0.85)"
-          svgIcon="ic_magnify_search"
-        ></mat-icon>
-        <input
-          matInput
-          [(ngModel)]="filterString"
-          (keyup)="applyFilter($event.target.value)"
-          placeholder="Search"
-        />
-        @if (filterString !== '') {
-          <button
-            mat-icon-button
-            matSuffix
-            (click)="clearFilter()"
-            title="Clear Search"
-          >
-            <mat-icon
-              style="transform: scale(0.85)"
-              svgIcon="ic_cancel_circle"
-            ></mat-icon>
-          </button>
-        }
-      </mat-form-field>
-    </div>
+
+<div class="cssLayoutRowStartCenter">
+  <div class="sp-icon">
+    <mat-icon class="mdi-24px" fontIcon="mdi-account-multiple"></mat-icon>
+  </div>
+  <mat-form-field style="width: 300px">
+    <input matInput [(ngModel)]="filterString" (keyup)="applyFilter($event.target.value)" placeholder="Search" />
+    @if (filterString) {
+    <button mat-icon-button matSuffix (click)="applyFilter('')" title="Clear Search">
+      <mat-icon style="transform: scale(0.85)" fontIcon="mdi-close-circle-outline"></mat-icon>
+    </button>
+    }
+  </mat-form-field>
+  <div class="button-end">
+    <mat-paginator #paginator [pageIndex]="0" [pageSize]="20"
+      [pageSizeOptions]="[5, 10, 15, 20, 25, 50, 100, 200]"></mat-paginator>
   </div>
+</div>
 
-  @if (isLoading) {
-    <mat-card class="d-flex content-center align-items-center">
-      <mat-progress-spinner color="primary" mode="indeterminate">
-      </mat-progress-spinner>
-    </mat-card>
-  }
+<div class="table-container">
+  <table mat-table [dataSource]="userDataSource" matSort>
+    <ng-container matColumnDef="id">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>
+        ID
+      </th>
+      <td mat-cell *matCellDef="let element">
+        <button mat-icon-button ngxClipboard [cbContent]="element.id" (click)="$event.stopPropagation()"
+          title="Copy:  {{ element.id }}">
+          <mat-icon class="mdi-24px" fontIcon="mdi-content-copy"></mat-icon>
+        </button>
+        {{ element.id }}
+      </td>
+    </ng-container>
 
-  <mat-accordion>
-    <mat-table #table [dataSource]="userDataSource" matSort>
-      <ng-container matColumnDef="name">
-        <mat-header-cell *matHeaderCellDef mat-sort-header
-          >User Name</mat-header-cell
-        >
-        <mat-cell *matCellDef="let element">
-          <button
-            mat-icon-button
-            ngxClipboard
-            [cbContent]="element.id"
-            title="Copy:  {{ element.id }}"
-          >
-            <mat-icon
-              style="transform: scale(0.85)"
-              svgIcon="ic_clipboard_copy"
-            ></mat-icon>
-          </button>
-          @if (element.name !== null) {
-            <div>{{ element.name }}</div>
-          }
-          @if (element.name === null) {
-            <div>{{ element.id }}</div>
-          }
-        </mat-cell>
-      </ng-container>
+    <ng-container matColumnDef="name">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+      <td mat-cell *matCellDef="let element">{{ element.name }}</td>
+    </ng-container>
 
-      <ng-container matColumnDef="roleName">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>
-          Role
-        </mat-header-cell>
-        <mat-cell *matCellDef="let element; let i = index">
-          <app-roles-permissions-select
-            [user]="element"
-          ></app-roles-permissions-select>
-        </mat-cell>
-      </ng-container>
+    <ng-container matColumnDef="role">
+      <th mat-header-cell *matHeaderCellDef>Role</th>
+      <td mat-cell *matCellDef="let element">
+        <app-roles-permissions-select [user]="element"></app-roles-permissions-select>
+        <button mat-icon-button (click)="deleteUser(element); $event.stopPropagation()"
+          title="Delete User">
+          <mat-icon class="mdi-24px" fontIcon="mdi-trash-can-outline"></mat-icon>
+        </button>
+      </td>
+    </ng-container>
 
-      <ng-container matColumnDef="actions">
-        <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
-        <mat-cell *matCellDef="let element">
-          <button
-            mat-icon-button
-            color="primary"
-            (click)="deleteUser(element)"
-            title="Delete User"
-          >
-            <mat-icon
-              class="mdi-24px"
-              fontIcon="mdi-delete-forever-outline"
-            ></mat-icon>
-          </button>
-        </mat-cell>
-      </ng-container>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+  </table>
 
-      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-    </mat-table>
-  </mat-accordion>
-  @if (userDataSource.filteredData.length === 0) {
-    <div>No results found</div>
+  @if (isLoading) {
+    <mat-card style="display: flex; justify-content: center; align-items: center">
+      <mat-progress-spinner color="primary" mode="indeterminate">
+      </mat-progress-spinner>
+    </mat-card>
   }
-  <mat-paginator
-    #paginator
-    [pageSize]="defaultPageSize"
-    [pageSizeOptions]="[10, 20, 30]"
-    [showFirstLastButtons]="true"
-    (page)="pageEvent = $event"
-  >
-  </mat-paginator>
 </div>

src/app/components/admin-app/admin-user-search/admin-user-search.component.scss

@@ -1,23 +1,53 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
-.user-list-container {
-  min-width: 600px;
-  margin-top: 40px;
-  width: 600px;
+
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
 }
 
-.mat-expansion-panel-header {
-  padding-left: 0;
+.cssLayoutRowStartCenter {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  flex-shrink: 0;
 }
 
-.sp-icon {
-  margin-left: 10px;
+.table-container {
+  flex: 1;
+  overflow: auto;
+  padding-bottom: 20px;
+}
+
+table {
+  width: 100%;
+  --mat-table-row-item-container-height: auto;
 }
 
-.hidden {
-  display: none !important;
+.mat-mdc-cell,
+.mat-mdc-header-cell {
+  overflow: hidden;
+  word-wrap: break-word;
+  padding-right: 10px;
+  padding-top: 2px;
+  padding-bottom: 2px;
+  vertical-align: middle;
+
+  button[mat-icon-button] {
+    vertical-align: middle;
+  }
+}
+
+.button-end {
+  margin-left: 100px;
 }
 
-.mat-column-name {
-  max-width: 30%;
+.sp-icon {
+  width: 5%;
+  color: var(--mat-sys-primary);
+  text-align: center;
+  min-width: 30px;
 }