#0 config - Migrated to jspm and Angular 4.0.2

rsanchez

2017-04-13 849f8f0acbe896cac7e531fee6895442382318cc

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<td-layout-card-over cardWidth="90">
  <md-toolbar role="toolbar" class="mat-secondary">
    <span class="push-left-sm">
        <span class="md-title" i18n>Packs</span>
    </span>
    <span class="push-left-sm" *ngIf="filteredItems < data.length">
        <span class="md-body-1">{{filteredItems}} of {{data.length}} packs filtered</span>
    </span>
    <td-search-box #searchBox class="push-right-sm" placeholder="Search here" (searchDebounce)="search($event)" flex>
    </td-search-box>
    <button md-mini-fab color="accent" (click)="create()" [mdTooltip]="$L.get('Create a new pack')">
        <md-icon>add</md-icon>
      </button>
  </md-toolbar>
     <div flex="84" layout-align="center end" layout="column">
    <td-data-table 
      [data]="filteredData" 
      [columns]="columns" 
      [sortable]="true"
      [sortBy]="sortBy"
      (sortChange)="sort($event)"
      style="width: 100%">
      <ng-template tdDataTableTemplate="used_licenses" let-row="row">
        <div layout="row">
          <md-chip-list flex>
            <md-chip selected [mdTooltip]="$L.get('field.num_licenses')" color="secondary" >{{row['num_licenses']}}</md-chip>
            <md-chip selected [mdTooltip]="$L.get('field.num_available')" [color]="row['num_available'] > 0 ? 'primary': 'warn'">{{row['num_available']}}</md-chip>
          </md-chip-list>
        </div>
      </ng-template>
      <ng-template tdDataTableTemplate="code" let-row="row" let-value="value">
        <div layout="row" layout-align="start center">
          <span style="white-space: nowrap">{{value}}</span>
        </div>
      </ng-template>
      <ng-template tdDataTableTemplate="status" let-row="row" let-value="value">
        <div layout="row" layout-align="start center">
          <md-chip selected [mdTooltip]="$L.get('pack.status.' +value)" [style.background-color]="packs.getStatusColor(value)"  >{{value}}</md-chip>
        </div>
      </ng-template>
      <ng-template tdDataTableTemplate="menu" let-row="row" let-index="index">
        <div layout="row" layout-align="end center">
          <button md-icon-button (click)="edit(row.id)" color="primary"><md-icon>edit</md-icon></button>
          <button md-icon-button [mdMenuTriggerFor]="packMenu" aria-label="Pack menu">
            <md-icon>more_vert</md-icon>
          </button>
          
          <md-menu #packMenu="mdMenu">
              <button md-menu-item *ngFor="let action of pack_menu_options" (click)="packAction(action.command, row)" [disabled]="!packs.isActionAvailable(action.command, row)">
                <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
              </button>
          </md-menu>
          <button md-icon-button (click)="showLicenses(row)" color="accent"><md-icon>arrow_forward</md-icon></button>
        </div>
      </ng-template>
    </td-data-table>
    <td-paging-bar #pagingBar [pageSizes]="[10, 20, 40]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= 10">
      <span td-paging-bar-label hide-xs>Rows per page:</span> {{pagingBar.range}} <span hide-xs>of {{pagingBar.total}}</span>
    </td-paging-bar>
  </div>
</td-layout-card-over>