banana-sound-backend/src/app/pages/users/user/component/list.component.html

<div id="users" class="page-layout carded fullwidth inner-scroll">
  <!-- TOP BACKGROUND -->
  <div class="top-bg accent"></div>
  <!-- / TOP BACKGROUND -->

  <!-- CENTER -->
  <div class="center">
    <!-- HEADER -->
    <div
      class="header accent"
      fxLayout="column"
      fxLayoutAlign="center center"
      fxLayout.gt-xs="row"
      fxLayoutAlign.gt-xs="space-between center"
    >
      <!-- APP TITLE -->
      <div
        class="logo mb-24 mb-sm-0"
        fxLayout="row"
        fxLayoutAlign="start center"
      >
        <mat-icon
          class="logo-icon s-32 mr-16"
          [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
        >
          group
        </mat-icon>
        <span
          class="logo-text h1"
          [@animate]="{ value: '*', params: { delay: '100ms', x: '-25px' } }"
          >Users</span
        >
      </div>
      <!-- / APP TITLE -->

      <!-- SEARCH -->
      <div class="search-wrapper  ml-sm-32">
        <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
          <mat-icon>search</mat-icon>
          <input #filter placeholder="Search for an user" />
        </div>
      </div>
      <!-- / SEARCH -->
    </div>
    <!-- / HEADER -->

    <!-- CONTENT CARD -->
    <div class="content-card">
      <mat-table
        class="users-table"
        #table
        [dataSource]="dataSource"
        matSort
        [@animateStagger]="{ value: '50' }"
        fusePerfectScrollbar
      >
        <!-- Username Column -->
        <ng-container matColumnDef="username">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Username</mat-header-cell
          >
          <mat-cell *matCellDef="let user">
            <p class="text-truncate">{{ user.username }}</p>
          </mat-cell>
        </ng-container>

        <!-- Nickname Column -->
        <ng-container matColumnDef="nickname">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Nickname</mat-header-cell
          >
          <mat-cell *matCellDef="let user">
            <p class="text-truncate">
              {{ user.nickname }}
            </p>
          </mat-cell>
        </ng-container>

        <!-- Email Column -->
        <ng-container matColumnDef="email">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
            >Email</mat-header-cell
          >
          <mat-cell *matCellDef="let user" fxHide fxShow.gt-sm>
            <p class="text-truncate">{{ user.email }}</p>
          </mat-cell>
        </ng-container>

        <!-- Block Column -->
        <ng-container matColumnDef="block">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >Block</mat-header-cell
          >
          <mat-cell *matCellDef="let user">
            <mat-icon class="red-fg" *ngIf="user.block">check_circle</mat-icon>
            <mat-icon class="secondary-text" *ngIf="!user.block"
              >check_circle_outline</mat-icon
            >
          </mat-cell>
        </ng-container>

        <!-- SendEmail Column -->
        <ng-container matColumnDef="sendEmail">
          <mat-header-cell *matHeaderCellDef mat-sort-header
            >SendEmail</mat-header-cell
          >
          <mat-cell *matCellDef="let user">
            <mat-icon class="red-fg" *ngIf="user.sendEmail"
              >check_circle</mat-icon
            >
            <mat-icon class="secondary-text" *ngIf="!user.sendEmail"
              >check_circle_outline</mat-icon
            >
          </mat-cell>
        </ng-container>

        <!-- createdDate Column -->
        <ng-container matColumnDef="createdDate">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
            >Created Date</mat-header-cell
          >
          <mat-cell *matCellDef="let user" fxHide fxShow.gt-sm>
            <p class="text-truncate">
              {{ user.createdDate | date: 'yyyy.MM.dd, HH:mm:ss' }}
            </p>
          </mat-cell>
        </ng-container>

        <!-- Last Modified Date Column -->
        <ng-container matColumnDef="lastModifiedDate">
          <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm
            >Last Modified Date</mat-header-cell
          >
          <mat-cell *matCellDef="let user" fxHide fxShow.gt-sm>
            <p class="text-truncate">
              {{ user.lastModifiedDate | date: 'yyyy.MM.dd, HH:mm:ss' }}
            </p>
          </mat-cell>
        </ng-container>

        <mat-header-row
          *matHeaderRowDef="displayedColumns; sticky: true"
        ></mat-header-row>

        <mat-row
          *matRowDef="let user; columns: displayedColumns"
          class="user"
          matRipple
          [routerLink]="'/user/users/' + user.id"
        >
        </mat-row>
      </mat-table>

      <mat-paginator
        #paginator
        [length]="dataSource.page.totalElements"
        [pageIndex]="0"
        [pageSize]="20"
        [pageSizeOptions]="[5, 10, 25, 100]"
      >
      </mat-paginator>
    </div>
    <!-- / CONTENT CARD -->
  </div>
  <!-- / CENTER -->
</div>