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

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

<div *ngIf="!grid" class="view-toggle">
    <button (click)="grid = true" mat-icon-button>
        <i matTooltip="show grid view" class="las la-th-large"></i>
    </button>
</div>
<div *ngIf="!grid && ownedProjectList">
    <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) || (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 !== undefined">{{'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>