mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-26 10:03:12 +00:00
107 lines
4.1 KiB
HTML
107 lines
4.1 KiB
HTML
<mat-table #table [dataSource]="dataSource"
|
|
[@animateStagger]="{value:'50'}">
|
|
<!-- Checkbox Column -->
|
|
<ng-container matColumnDef="checkbox">
|
|
<mat-header-cell *matHeaderCellDef></mat-header-cell>
|
|
<mat-cell *matCellDef="let contact">
|
|
<mat-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)"
|
|
(click)="$event.stopPropagation()">
|
|
</mat-checkbox>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Avatar Column -->
|
|
<ng-container matColumnDef="avatar">
|
|
<mat-header-cell *matHeaderCellDef></mat-header-cell>
|
|
<mat-cell *matCellDef="let contact">
|
|
<img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
|
|
[src]="contact.avatar"/>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Name Column -->
|
|
<ng-container matColumnDef="name">
|
|
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
|
|
<mat-cell *matCellDef="let contact">
|
|
<p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Email Column -->
|
|
<ng-container matColumnDef="email">
|
|
<mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
|
|
<mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
|
|
<p class="email text-truncate">
|
|
{{contact.email}}
|
|
</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Phone Column -->
|
|
<ng-container matColumnDef="phone">
|
|
<mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
|
|
<mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
|
|
<p class="phone text-truncate">
|
|
{{contact.phone}}
|
|
</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Job Title Column -->
|
|
<ng-container matColumnDef="jobTitle">
|
|
<mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
|
|
<mat-cell *matCellDef="let contact" fxHide fxShow.gt-lg>
|
|
<p class="job-title text-truncate">
|
|
{{contact.jobTitle}}
|
|
</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Company Column -->
|
|
<ng-container matColumnDef="company">
|
|
<mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
|
|
<mat-cell *matCellDef="let contact" fxHide fxShow.gt-lg>
|
|
<p class="company text-truncate">
|
|
{{contact.company}}
|
|
</p>
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<!-- Buttons Column -->
|
|
<ng-container matColumnDef="buttons">
|
|
<mat-header-cell *matHeaderCellDef></mat-header-cell>
|
|
<mat-cell *matCellDef="let contact">
|
|
<div fxFlex="row" fxLayoutAlign="end center">
|
|
<button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
|
|
<mat-icon class="amber-fg" *ngIf="user.starred.includes(contact.id)">star</mat-icon>
|
|
<mat-icon class="secondary-text" *ngIf="!user.starred.includes(contact.id)">star_border</mat-icon>
|
|
</button>
|
|
|
|
<button mat-icon-button [matMenuTriggerFor]="moreMenu" aria-label="More"
|
|
(click)="$event.stopPropagation();">
|
|
<mat-icon class="secondary-text">more_vert</mat-icon>
|
|
</button>
|
|
|
|
<mat-menu #moreMenu="matMenu">
|
|
<button mat-menu-item aria-label="remove" (click)="deleteContact(contact)">
|
|
<mat-icon>delete</mat-icon>
|
|
<span>Remove</span>
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
|
|
</mat-cell>
|
|
</ng-container>
|
|
|
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
|
<mat-row *matRowDef="let contact; columns: displayedColumns;"
|
|
class="contact"
|
|
(click)="editContact(contact)"
|
|
[ngClass]="{'accent-50':checkboxes[contact.id]}"
|
|
matRipple
|
|
[@animate]="{value:'*',params:{y:'100%'}}">
|
|
</mat-row>
|
|
</mat-table>
|
|
|
|
|