purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Replace cdkTable stuff with matTable since table now is a proper Material element

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-20 16:32:26 +03:00
parent ba2f50bf62
commit 94d20f8d8d
11 changed files with 129 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/app/main/apps/contacts/contact-list/contact-list.component.html
View File

@ -1,9 +1,9 @@
<mat-table #table [dataSource]="dataSource" <mat-table #table [dataSource]="dataSource"
[@animateStagger]="{value:'50'}"> [@animateStagger]="{value:'50'}">
<!-- Checkbox Column --> <!-- Checkbox Column -->
<ng-container cdkColumnDef="checkbox"> <ng-container matColumnDef="checkbox">
<mat-header-cell *cdkHeaderCellDef></mat-header-cell> <mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *cdkCellDef="let contact"> <mat-cell *matCellDef="let contact">
<mat-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)" <mat-checkbox [(ngModel)]="checkboxes[contact.id]" (ngModelChange)="onSelectedChange(contact.id)"
(click)="$event.stopPropagation()"> (click)="$event.stopPropagation()">
</mat-checkbox> </mat-checkbox>
@ -11,26 +11,26 @@
</ng-container> </ng-container>
<!-- Avatar Column --> <!-- Avatar Column -->
<ng-container cdkColumnDef="avatar"> <ng-container matColumnDef="avatar">
<mat-header-cell *cdkHeaderCellDef></mat-header-cell> <mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *cdkCellDef="let contact"> <mat-cell *matCellDef="let contact">
<img class="avatar" *ngIf="contact.avatar" [alt]="contact.name" <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
[src]="contact.avatar"/> [src]="contact.avatar"/>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="name"> <ng-container matColumnDef="name">
<mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *cdkCellDef="let contact"> <mat-cell *matCellDef="let contact">
<p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p> <p class="text-truncate font-weight-600">{{contact.name}} {{contact.lastName}}</p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Email Column --> <!-- Email Column -->
<ng-container cdkColumnDef="email"> <ng-container matColumnDef="email">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell> <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Email</mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm> <mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
<p class="email text-truncate"> <p class="email text-truncate">
{{contact.email}} {{contact.email}}
</p> </p>
@ -38,9 +38,9 @@
</ng-container> </ng-container>
<!-- Phone Column --> <!-- Phone Column -->
<ng-container cdkColumnDef="phone"> <ng-container matColumnDef="phone">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell> <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Phone</mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md> <mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
<p class="phone text-truncate"> <p class="phone text-truncate">
{{contact.phone}} {{contact.phone}}
</p> </p>
@ -48,9 +48,9 @@
</ng-container> </ng-container>
<!-- Job Title Column --> <!-- Job Title Column -->
<ng-container cdkColumnDef="jobTitle"> <ng-container matColumnDef="jobTitle">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell> <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Job title</mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg> <mat-cell *matCellDef="let contact" fxHide fxShow.gt-lg>
<p class="job-title text-truncate"> <p class="job-title text-truncate">
{{contact.jobTitle}} {{contact.jobTitle}}
</p> </p>
@ -58,9 +58,9 @@
</ng-container> </ng-container>
<!-- Company Column --> <!-- Company Column -->
<ng-container cdkColumnDef="company"> <ng-container matColumnDef="company">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell> <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-lg>Company</mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-lg> <mat-cell *matCellDef="let contact" fxHide fxShow.gt-lg>
<p class="company text-truncate"> <p class="company text-truncate">
{{contact.company}} {{contact.company}}
</p> </p>
@ -68,9 +68,9 @@
</ng-container> </ng-container>
<!-- Buttons Column --> <!-- Buttons Column -->
<ng-container cdkColumnDef="buttons"> <ng-container matColumnDef="buttons">
<mat-header-cell *cdkHeaderCellDef></mat-header-cell> <mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *cdkCellDef="let contact"> <mat-cell *matCellDef="let contact">
<div fxFlex="row" fxLayoutAlign="end center"> <div fxFlex="row" fxLayoutAlign="end center">
<button mat-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star"> <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="amber-fg" *ngIf="user.starred.includes(contact.id)">star</mat-icon>
@ -93,8 +93,8 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *cdkRowDef="let contact; columns: displayedColumns;" <mat-row *matRowDef="let contact; columns: displayedColumns;"
class="contact" class="contact"
(click)="editContact(contact)" (click)="editContact(contact)"
[ngClass]="{'mat-accent-50-bg':checkboxes[contact.id]}" [ngClass]="{'mat-accent-50-bg':checkboxes[contact.id]}"

3
src/app/main/apps/contacts/contacts.module.ts
View File

@ -1,7 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { CdkTableModule } from '@angular/cdk/table';
import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatTableModule, MatToolbarModule } from '@angular/material'; import { MatButtonModule, MatCheckboxModule, MatDatepickerModule, MatFormFieldModule, MatIconModule, MatInputModule, MatMenuModule, MatRippleModule, MatTableModule, MatToolbarModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
@ -34,7 +32,6 @@ const routes: Routes = [
], ],
imports : [ imports : [
RouterModule.forChild(routes), RouterModule.forChild(routes),
CdkTableModule,
MatButtonModule, MatButtonModule,
MatCheckboxModule, MatCheckboxModule,

40
src/app/main/apps/dashboards/project/project.component.html
View File

@ -816,28 +816,28 @@
<mat-table #table [dataSource]="widget11.dataSource"> <mat-table #table [dataSource]="widget11.dataSource">
<!-- Avatar Column --> <!-- Avatar Column -->
<ng-container cdkColumnDef="avatar"> <ng-container matColumnDef="avatar">
<mat-header-cell fxFlex="96px" *cdkHeaderCellDef></mat-header-cell> <mat-header-cell fxFlex="96px" *matHeaderCellDef></mat-header-cell>
<mat-cell fxFlex="96px" *cdkCellDef="let contact"> <mat-cell fxFlex="96px" *matCellDef="let contact">
<img class="avatar" *ngIf="contact.avatar" [alt]="contact.name" <img class="avatar" *ngIf="contact.avatar" [alt]="contact.name"
[src]="contact.avatar"/> [src]="contact.avatar"/>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="name"> <ng-container matColumnDef="name">
<mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *cdkCellDef="let contact"> <mat-cell *matCellDef="let contact">
<p class="text-truncate font-weight-600">{{contact.name}} <p class="text-truncate font-weight-600">{{contact.name}}
{{contact.lastName}}</p> {{contact.lastName}}</p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Position Column --> <!-- Position Column -->
<ng-container cdkColumnDef="position"> <ng-container matColumnDef="position">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Position <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Position
</mat-header-cell> </mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm> <mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
<p class="position text-truncate"> <p class="position text-truncate">
{{contact.position}} {{contact.position}}
</p> </p>
@ -845,10 +845,10 @@
</ng-container> </ng-container>
<!-- Office Column --> <!-- Office Column -->
<ng-container cdkColumnDef="office"> <ng-container matColumnDef="office">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Office <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Office
</mat-header-cell> </mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md> <mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
<p class="office text-truncate"> <p class="office text-truncate">
{{contact.office}} {{contact.office}}
</p> </p>
@ -856,10 +856,10 @@
</ng-container> </ng-container>
<!-- Email Column --> <!-- Email Column -->
<ng-container cdkColumnDef="email"> <ng-container matColumnDef="email">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-sm>Email <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-sm>Email
</mat-header-cell> </mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-sm> <mat-cell *matCellDef="let contact" fxHide fxShow.gt-sm>
<p class="email text-truncate"> <p class="email text-truncate">
{{contact.email}} {{contact.email}}
</p> </p>
@ -867,10 +867,10 @@
</ng-container> </ng-container>
<!-- Phone Column --> <!-- Phone Column -->
<ng-container cdkColumnDef="phone"> <ng-container matColumnDef="phone">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Phone <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Phone
</mat-header-cell> </mat-header-cell>
<mat-cell *cdkCellDef="let contact" fxHide fxShow.gt-md> <mat-cell *matCellDef="let contact" fxHide fxShow.gt-md>
<p class="phone text-truncate"> <p class="phone text-truncate">
{{contact.phone}} {{contact.phone}}
</p> </p>
@ -878,8 +878,8 @@
</ng-container> </ng-container>
<mat-header-row <mat-header-row
*cdkHeaderRowDef="widgets.widget11.table.columns"></mat-header-row> *matHeaderRowDef="widgets.widget11.table.columns"></mat-header-row>
<mat-row *cdkRowDef="let contact; columns: widgets.widget11.table.columns;"> <mat-row *matRowDef="let contact; columns: widgets.widget11.table.columns;">
</mat-row> </mat-row>
</mat-table> </mat-table>
</div> </div>

2
src/app/main/apps/dashboards/project/project.module.ts
View File

@ -1,6 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { CdkTableModule } from '@angular/cdk/table';
import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTableModule, MatTabsModule } from '@angular/material'; import { MatButtonModule, MatDividerModule, MatFormFieldModule, MatIconModule, MatMenuModule, MatSelectModule, MatTableModule, MatTabsModule } from '@angular/material';
import { NgxChartsModule } from '@swimlane/ngx-charts'; import { NgxChartsModule } from '@swimlane/ngx-charts';
@ -28,7 +27,6 @@ const routes: Routes = [
imports : [ imports : [
RouterModule.forChild(routes), RouterModule.forChild(routes),
CdkTableModule,
MatButtonModule, MatButtonModule,
MatDividerModule, MatDividerModule,
MatFormFieldModule, MatFormFieldModule,

2
src/app/main/apps/e-commerce/e-commerce.module.ts
View File

@ -1,6 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { CdkTableModule } from '@angular/cdk/table';
import { MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule } from '@angular/material'; import { MatButtonModule, MatChipsModule, MatFormFieldModule, MatIconModule, MatInputModule, MatPaginatorModule, MatRippleModule, MatSelectModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule } from '@angular/material';
import { NgxChartsModule } from '@swimlane/ngx-charts'; import { NgxChartsModule } from '@swimlane/ngx-charts';
import { AgmCoreModule } from '@agm/core'; import { AgmCoreModule } from '@agm/core';
@ -75,7 +74,6 @@ const routes: Routes = [
imports : [ imports : [
RouterModule.forChild(routes), RouterModule.forChild(routes),
CdkTableModule,
MatButtonModule, MatButtonModule,
MatChipsModule, MatChipsModule,
MatFormFieldModule, MatFormFieldModule,

46
src/app/main/apps/e-commerce/orders/orders.component.html
View File

@ -46,25 +46,25 @@
fusePerfectScrollbar> fusePerfectScrollbar>
<!-- ID Column --> <!-- ID Column -->
<ng-container cdkColumnDef="id"> <ng-container matColumnDef="id">
<mat-header-cell *cdkHeaderCellDef mat-sort-header>ID</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
<mat-cell *cdkCellDef="let order"> <mat-cell *matCellDef="let order">
<p class="text-truncate">{{order.id}}</p> <p class="text-truncate">{{order.id}}</p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Reference Column --> <!-- Reference Column -->
<ng-container cdkColumnDef="reference"> <ng-container matColumnDef="reference">
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Reference</mat-header-cell>
<mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm> <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
<p class="text-truncate">{{order.reference}}</p> <p class="text-truncate">{{order.reference}}</p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="customer"> <ng-container matColumnDef="customer">
<mat-header-cell *cdkHeaderCellDef mat-sort-header>Customer</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>Customer</mat-header-cell>
<mat-cell *cdkCellDef="let order"> <mat-cell *matCellDef="let order">
<p class="text-truncate"> <p class="text-truncate">
{{order.customer.firstName}} {{order.customer.firstName}}
{{order.customer.lastName}} {{order.customer.lastName}}
@ -73,9 +73,9 @@
</ng-container> </ng-container>
<!-- Total Price Column --> <!-- Total Price Column -->
<ng-container cdkColumnDef="total"> <ng-container matColumnDef="total">
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-md>Total</mat-header-cell>
<mat-cell *cdkCellDef="let order" fxHide fxShow.gt-md> <mat-cell *matCellDef="let order" fxHide fxShow.gt-md>
<p class="total-price text-truncate"> <p class="total-price text-truncate">
{{order.total | currency:'USD':'symbol'}} {{order.total | currency:'USD':'symbol'}}
</p> </p>
@ -83,9 +83,9 @@
</ng-container> </ng-container>
<!-- Payment Column --> <!-- Payment Column -->
<ng-container cdkColumnDef="payment"> <ng-container matColumnDef="payment">
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Payment</mat-header-cell>
<mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm> <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
<p class="text-truncate"> <p class="text-truncate">
{{order.payment.method}} {{order.payment.method}}
</p> </p>
@ -93,9 +93,9 @@
</ng-container> </ng-container>
<!-- Status Column --> <!-- Status Column -->
<ng-container cdkColumnDef="status"> <ng-container matColumnDef="status">
<mat-header-cell *cdkHeaderCellDef mat-sort-header>Status</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
<mat-cell *cdkCellDef="let order"> <mat-cell *matCellDef="let order">
<p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color"> <p class="status text-truncate h6 p-4" [ngClass]="order.status[0].color">
{{order.status[0].name}} {{order.status[0].name}}
</p> </p>
@ -103,18 +103,18 @@
</ng-container> </ng-container>
<!-- Date Column --> <!-- Date Column -->
<ng-container cdkColumnDef="date"> <ng-container matColumnDef="date">
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Date</mat-header-cell>
<mat-cell *cdkCellDef="let order" fxHide fxShow.gt-sm> <mat-cell *matCellDef="let order" fxHide fxShow.gt-sm>
<p class="text-truncate"> <p class="text-truncate">
{{order.date}} {{order.date}}
</p> </p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *cdkRowDef="let order; columns: displayedColumns;" <mat-row *matRowDef="let order; columns: displayedColumns;"
class="order" class="order"
matRipple matRipple
[routerLink]="'/apps/e-commerce/orders/'+order.id"> [routerLink]="'/apps/e-commerce/orders/'+order.id">

46
src/app/main/apps/e-commerce/products/products.component.html
View File

@ -55,17 +55,17 @@
fusePerfectScrollbar> fusePerfectScrollbar>
<!-- ID Column --> <!-- ID Column -->
<ng-container cdkColumnDef="id"> <ng-container matColumnDef="id">
<mat-header-cell *cdkHeaderCellDef mat-sort-header>ID</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>ID</mat-header-cell>
<mat-cell *cdkCellDef="let product"> <mat-cell *matCellDef="let product">
<p class="text-truncate">{{product.id}}</p> <p class="text-truncate">{{product.id}}</p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Image Column --> <!-- Image Column -->
<ng-container cdkColumnDef="image"> <ng-container matColumnDef="image">
<mat-header-cell *cdkHeaderCellDef></mat-header-cell> <mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *cdkCellDef="let product"> <mat-cell *matCellDef="let product">
<img class="product-image" <img class="product-image"
*ngIf="product.images[0]" [alt]="product.name" *ngIf="product.images[0]" [alt]="product.name"
[src]="product.images[0].url"/> [src]="product.images[0].url"/>
@ -74,17 +74,17 @@
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="name"> <ng-container matColumnDef="name">
<mat-header-cell *cdkHeaderCellDef mat-sort-header>Name</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *cdkCellDef="let product"> <mat-cell *matCellDef="let product">
<p class="text-truncate">{{product.name}}</p> <p class="text-truncate">{{product.name}}</p>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Category Column --> <!-- Category Column -->
<ng-container cdkColumnDef="category"> <ng-container matColumnDef="category">
<mat-header-cell *cdkHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Category</mat-header-cell> <mat-header-cell *matHeaderCellDef fxHide mat-sort-header fxShow.gt-md>Category</mat-header-cell>
<mat-cell *cdkCellDef="let product" fxHide fxShow.gt-md> <mat-cell *matCellDef="let product" fxHide fxShow.gt-md>
<p class="category text-truncate"> <p class="category text-truncate">
{{product.categories[0]}} {{product.categories[0]}}
</p> </p>
@ -92,9 +92,9 @@
</ng-container> </ng-container>
<!-- Price Column --> <!-- Price Column -->
<ng-container cdkColumnDef="price"> <ng-container matColumnDef="price">
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Price</mat-header-cell>
<mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs> <mat-cell *matCellDef="let product" fxHide fxShow.gt-xs>
<p class="price text-truncate"> <p class="price text-truncate">
{{product.priceTaxIncl | currency:'USD':'symbol'}} {{product.priceTaxIncl | currency:'USD':'symbol'}}
</p> </p>
@ -102,9 +102,9 @@
</ng-container> </ng-container>
<!-- Quantity Column --> <!-- Quantity Column -->
<ng-container cdkColumnDef="quantity"> <ng-container matColumnDef="quantity">
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Quantity</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>Quantity</mat-header-cell>
<mat-cell *cdkCellDef="let product" fxHide fxShow.gt-sm> <mat-cell *matCellDef="let product" fxHide fxShow.gt-sm>
<span class="quantity-indicator text-truncate" <span class="quantity-indicator text-truncate"
[ngClass]="{'mat-red-500-bg':product.quantity <= 5, 'mat-amber-500-bg':product.quantity > 5 && product.quantity <= 25,'mat-green-600-bg':product.quantity > 25}"> [ngClass]="{'mat-red-500-bg':product.quantity <= 5, 'mat-amber-500-bg':product.quantity > 5 && product.quantity <= 25,'mat-green-600-bg':product.quantity > 25}">
@ -117,17 +117,17 @@
</ng-container> </ng-container>
<!-- Active Column --> <!-- Active Column -->
<ng-container cdkColumnDef="active"> <ng-container matColumnDef="active">
<mat-header-cell *cdkHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Active</mat-header-cell> <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>Active</mat-header-cell>
<mat-cell *cdkCellDef="let product" fxHide fxShow.gt-xs> <mat-cell *matCellDef="let product" fxHide fxShow.gt-xs>
<mat-icon *ngIf="product.active" class="active-icon mat-green-600-bg s-16">check</mat-icon> <mat-icon *ngIf="product.active" class="active-icon mat-green-600-bg s-16">check</mat-icon>
<mat-icon *ngIf="!product.active" class="active-icon mat-red-500-bg s-16">close</mat-icon> <mat-icon *ngIf="!product.active" class="active-icon mat-red-500-bg s-16">close</mat-icon>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *cdkRowDef="let product; columns: displayedColumns;" <mat-row *matRowDef="let product; columns: displayedColumns;"
class="product" class="product"
matRipple matRipple
[routerLink]="'/apps/e-commerce/products/'+product.id+'/'+product.handle"> [routerLink]="'/apps/e-commerce/products/'+product.id+'/'+product.handle">

46
src/app/main/apps/file-manager/file-list/file-list.component.html
View File

@ -1,47 +1,47 @@
<mat-table #table [dataSource]="dataSource" [@animateStagger]="{value:'50'}"> <mat-table #table [dataSource]="dataSource" [@animateStagger]="{value:'50'}">
<!-- Type Column --> <!-- Type Column -->
<ng-container cdkColumnDef="icon"> <ng-container matColumnDef="icon">
<mat-header-cell *cdkHeaderCellDef fxFlex="64px"></mat-header-cell> <mat-header-cell *matHeaderCellDef fxFlex="64px"></mat-header-cell>
<mat-cell *cdkCellDef="let row" fxFlex="64px"> <mat-cell *matCellDef="let row" fxFlex="64px">
<mat-icon class="type-icon" [ngClass]="row.type"></mat-icon> <mat-icon class="type-icon" [ngClass]="row.type"></mat-icon>
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="name"> <ng-container matColumnDef="name">
<mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *cdkCellDef="let row"> {{row.name}}</mat-cell> <mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
</ng-container> </ng-container>
<!-- Type Column --> <!-- Type Column -->
<ng-container cdkColumnDef="type"> <ng-container matColumnDef="type">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell> <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Type</mat-header-cell>
<mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell> <mat-cell *matCellDef="let row" fxHide fxShow.gt-md> {{row.type}}</mat-cell>
</ng-container> </ng-container>
<!-- Owner Column --> <!-- Owner Column -->
<ng-container cdkColumnDef="owner"> <ng-container matColumnDef="owner">
<mat-header-cell *cdkHeaderCellDef fxHide.xs>Owner</mat-header-cell> <mat-header-cell *matHeaderCellDef fxHide.xs>Owner</mat-header-cell>
<mat-cell *cdkCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell> <mat-cell *matCellDef="let row" fxHide.xs> {{row.owner}}</mat-cell>
</ng-container> </ng-container>
<!-- Size Column --> <!-- Size Column -->
<ng-container cdkColumnDef="size"> <ng-container matColumnDef="size">
<mat-header-cell *cdkHeaderCellDef fxHide.xs>Size</mat-header-cell> <mat-header-cell *matHeaderCellDef fxHide.xs>Size</mat-header-cell>
<mat-cell *cdkCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell> <mat-cell *matCellDef="let row" fxHide.xs>{{row.size === '' ? '-': row.size}}</mat-cell>
</ng-container> </ng-container>
<!-- Modified Column --> <!-- Modified Column -->
<ng-container cdkColumnDef="modified"> <ng-container matColumnDef="modified">
<mat-header-cell *cdkHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell> <mat-header-cell *matHeaderCellDef fxHide fxShow.gt-md>Modified</mat-header-cell>
<mat-cell *cdkCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell> <mat-cell *matCellDef="let row" fxHide fxShow.gt-md>{{row.modified}}</mat-cell>
</ng-container> </ng-container>
<!-- Detail Button Column --> <!-- Detail Button Column -->
<ng-container cdkColumnDef="detail-button"> <ng-container matColumnDef="detail-button">
<mat-header-cell *cdkHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell> <mat-header-cell *matHeaderCellDef fxFlex="48px" fxHide.gt-md></mat-header-cell>
<mat-cell *cdkCellDef="let row" fxFlex="48px" fxHide.gt-md> <mat-cell *matCellDef="let row" fxFlex="48px" fxHide.gt-md>
<button mat-icon-button class="sidebar-toggle" fxHide.gt-md <button mat-icon-button class="sidebar-toggle" fxHide.gt-md
(click)="toggleSidebar('file-manager-details-sidebar')"> (click)="toggleSidebar('file-manager-details-sidebar')">
<mat-icon class="secondary-text">info</mat-icon> <mat-icon class="secondary-text">info</mat-icon>
@ -49,8 +49,8 @@
</mat-cell> </mat-cell>
</ng-container> </ng-container>
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *cdkRowDef="let row; columns: displayedColumns;" <mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="onSelect(row)" (click)="onSelect(row)"
[ngClass]="{'mat-accent-50-bg':row == selected}" [ngClass]="{'mat-accent-50-bg':row == selected}"
matRipple [@animate]="{value:'*',params:{y:'100%'}}" matRipple [@animate]="{value:'*',params:{y:'100%'}}"

2
src/app/main/apps/file-manager/file-manager.module.ts
View File

@ -1,6 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router'; import { RouterModule, Routes } from '@angular/router';
import { CdkTableModule } from '@angular/cdk/table';
import { MatButtonModule, MatIconModule, MatRippleModule, MatSlideToggleModule, MatTableModule } from '@angular/material'; import { MatButtonModule, MatIconModule, MatRippleModule, MatSlideToggleModule, MatTableModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
@ -33,7 +32,6 @@ const routes: Routes = [
imports : [ imports : [
RouterModule.forChild(routes), RouterModule.forChild(routes),
CdkTableModule,
MatButtonModule, MatButtonModule,
MatIconModule, MatIconModule,
MatRippleModule, MatRippleModule,

2
src/app/main/pages/search/search.module.ts
View File

@ -1,6 +1,5 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; import { RouterModule } from '@angular/router';
import { CdkTableModule } from '@angular/cdk/table';
import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTableModule, MatTabsModule } from '@angular/material'; import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatTableModule, MatTabsModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module'; import { FuseSharedModule } from '@fuse/shared.module';
@ -29,7 +28,6 @@ const routes = [
], ],
imports : [ imports : [
RouterModule.forChild(routes), RouterModule.forChild(routes),
CdkTableModule,
MatButtonModule, MatButtonModule,
MatFormFieldModule, MatFormFieldModule,

28
src/app/main/pages/search/tabs/table/table.component.html
View File

@ -6,31 +6,31 @@
The actual rendered columns are set as a property on the row definition" --> The actual rendered columns are set as a property on the row definition" -->
<!-- ID Column --> <!-- ID Column -->
<ng-container cdkColumnDef="name"> <ng-container matColumnDef="name">
<mat-header-cell *cdkHeaderCellDef>Name</mat-header-cell> <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell *cdkCellDef="let row"> {{row.name}}</mat-cell> <mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
</ng-container> </ng-container>
<!-- Progress Column --> <!-- Progress Column -->
<ng-container cdkColumnDef="position"> <ng-container matColumnDef="position">
<mat-header-cell *cdkHeaderCellDef>Position</mat-header-cell> <mat-header-cell *matHeaderCellDef>Position</mat-header-cell>
<mat-cell *cdkCellDef="let row"> {{row.position}}</mat-cell> <mat-cell *matCellDef="let row"> {{row.position}}</mat-cell>
</ng-container> </ng-container>
<!-- Name Column --> <!-- Name Column -->
<ng-container cdkColumnDef="office"> <ng-container matColumnDef="office">
<mat-header-cell *cdkHeaderCellDef>Office</mat-header-cell> <mat-header-cell *matHeaderCellDef>Office</mat-header-cell>
<mat-cell *cdkCellDef="let row"> {{row.office}}</mat-cell> <mat-cell *matCellDef="let row"> {{row.office}}</mat-cell>
</ng-container> </ng-container>
<!-- Color Column --> <!-- Color Column -->
<ng-container cdkColumnDef="salary"> <ng-container matColumnDef="salary">
<mat-header-cell *cdkHeaderCellDef>Salary</mat-header-cell> <mat-header-cell *matHeaderCellDef>Salary</mat-header-cell>
<mat-cell *cdkCellDef="let row"> {{row.salary | currency:'USD':'symbol'}}</mat-cell> <mat-cell *matCellDef="let row"> {{row.salary | currency:'USD':'symbol'}}</mat-cell>
</ng-container> </ng-container>
<mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row> <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *cdkRowDef="let row; columns: displayedColumns;"></mat-row> <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table> </mat-table>
</div> </div>