zitadel/console/src/app/pages/projects/project-list/project-list.component.html

<div class="max-width-container">
    <h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
    <p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>

    <app-project-grid *ngIf="grid && projectList" [loading]="loading$ | async" (changedView)="grid = false"
        [items]="projectList" (newClicked)="addProject()">
    </app-project-grid>

    <div *ngIf="!grid" class="view-toggle">
        <button (click)="grid = true" mat-icon-button>
            <mat-icon matTooltip="show grid view">grid_on</mat-icon>
        </button>
    </div>
    <div *ngIf="!grid && projectList">
        <div class="table-header-row">
            <div class="col">
                <ng-container *ngIf="!selection.hasValue()">
                    <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
                    <span class="count">{{dataSource?.data?.length}}</span>
                </ng-container>
                <ng-container *ngIf="selection.hasValue()">
                    <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
                    <span class="count">{{selection?.selected?.length}}</span>
                </ng-container>
            </div>
            <span class="fill-space"></span>
            <div @list class="action-btns" *ngIf="selection.hasValue()">
                <button @animate (click)="deactivateSelectedProjects()"
                    matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="icon-button" mat-icon-button>
                    <mat-icon svgIcon="mdi_light_off"></mat-icon>
                </button>
                <button @animate (click)="reactivateSelectedProjects()"
                    matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" class="icon-button" mat-icon-button>
                    <mat-icon svgIcon="mdi_light_on"></mat-icon>
                </button>
            </div>
            <a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
                <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
            </a>
        </div>
        <div class="table-wrapper">
            <div class="spinner-container" *ngIf="loading$ | async">
                <mat-spinner diameter="50"></mat-spinner>
            </div>
            <table class="background-style" mat-table [dataSource]="dataSource">
                <ng-container matColumnDef="select">
                    <th class="selection" mat-header-cell *matHeaderCellDef>
                        <mat-checkbox (change)="$event ? masterToggle() : null"
                            [checked]="selection.hasValue() && isAllSelected()"
                            [indeterminate]="selection.hasValue() && !isAllSelected()">
                        </mat-checkbox>
                    </th>
                    <td class="selection" mat-cell *matCellDef="let row">
                        <mat-checkbox (click)="$event.stopPropagation()"
                            (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
                        </mat-checkbox>
                    </td>
                </ng-container>

                <ng-container matColumnDef="name">
                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
                    <td mat-cell *matCellDef="let project"> {{project.name}} </td>
                </ng-container>

                <ng-container matColumnDef="orgName">
                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGNAME' | translate }} </th>
                    <td class="pointer" mat-cell *matCellDef="let project">
                        {{project.orgName}} </td>
                </ng-container>

                <ng-container matColumnDef="orgDomain">
                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGDOMAIN' | translate }} </th>
                    <td class="pointer" mat-cell *matCellDef="let project">
                        {{project?.orgDomain}} </td>
                </ng-container>

                <ng-container matColumnDef="state">
                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
                    <td mat-cell *matCellDef="let project"><span
                            *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span></td>
                </ng-container>

                <ng-container matColumnDef="type">
                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.TYPE' | translate }} </th>
                    <td mat-cell *matCellDef="let project">
                        <span *ngIf="project.type">{{'PROJECT.TYPE.'+project.type | translate}}</span>
                    </td>
                </ng-container>

                <ng-container matColumnDef="creationDate">
                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
                    <td mat-cell *matCellDef="let project">
                        <span
                            *ngIf="project.creationDate">{{dateFromTimestamp(project.creationDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
                    </td>
                </ng-container>


                <ng-container matColumnDef="changeDate">
                    <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
                    <td mat-cell *matCellDef="let project">
                        <span
                            *ngIf="project.changeDate">{{dateFromTimestamp(project.changeDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
                    </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
                    [routerLink]="['/projects', row.id]"></tr>

            </table>
            <mat-paginator class="background-style" [length]="totalResult" [pageSize]="10"
                [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
        </div>
    </div>
</div>