rsanchez
2017-03-19 280daa7f3f858ecfef9c91ffd5dea1007f021048
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<td-layout-card-over cardWidth="80">
  <md-toolbar role="toolbar" class="mat-secondary">
    <span class="push-left-sm">
      <button md-icon-button (click)="goBack()" color="accent">
          <md-icon>arrow_back</md-icon>
      </button>
        <span class="md-title" i18n>Licenses for pack</span>: {{pack?.code}}
    </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 license')">
        <md-icon>add</md-icon>        
      </button>
    <md-toolbar-row *ngIf="!!pack">
      <md-chip-list flex="70" style="margin-left: 70px;">
        <md-chip selected [mdTooltip]="$L.get('field.application_name')" color="primary">{{pack.application_name}} </md-chip>
        <md-chip selected [mdTooltip]="$L.get('field.organization_id')" color="accent">{{pack.organization_name}} </md-chip>
        <md-chip selected [mdTooltip]="$L.get('field.license_type_id')" color="accent">{{pack.licensetype_code}} </md-chip>
      </md-chip-list>
      <span flex></span>
      <md-chip-list>
        <md-chip [mdTooltip]="$L.get('field.num_available')" color="secondary" [class.bgc-red-A100]="pack.num_available <= 0">
          <span i18n="field.num_available"></span>: {{pack.num_available}} </md-chip>
      </md-chip-list>
    </md-toolbar-row>
  </md-toolbar>
  <div flex layout="column" layout-align="center end" >
    <td-data-table 
      [data]="filteredData" 
      [columns]="columns" 
      [sortable]="true"
      [sortBy]="sortBy"
      (sortChange)="sort($event)"
      style="width: 100%">
      <template tdDataTableTemplate="code" let-row="row" let-value="value">
        <div layout="row" layout-align="start center">
          <span style="white-space: nowrap">{{value}}</span>
        </div>
      </template>
      <template tdDataTableTemplate="status" let-row="row">
        <div layout="row" layout-align="start center">
            <md-icon [style.color]="licenses.getStatusColor(row.status)">brightness_1</md-icon>&nbsp;<span>{{licenses.getStatusName(row.status)}}</span>
        </div>
      </template>
      <template tdDataTableTemplate="email" let-row="row">
        <div layout="row">
          <a md-button color="primary" [href]="'mailto:' + row.email + '?subject=SeCuris'">{{row.email}}</a>
        </div>
      </template>
      <template tdDataTableTemplate="expiration_date" let-row="row">
        <div layout="row">
          <span [class.expired]="isLicenseExpired(row)" >{{row.expiration_date | date: 'mediumDate'}}</span>
        </div>
      </template>
      
      <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]="licenseMenu" aria-label="License menu">
            <md-icon>more_vert</md-icon>
          </button>
          <md-menu #licenseMenu="mdMenu">
              <button md-menu-item *ngFor="let action of license_menu_options" (click)="licenseAction(action.command, row)" [disabled]="!isActionAvailable(row)">
                <md-icon *ngIf="!!action.icon">{{ action.icon }}</md-icon> {{ action.name }}
              </button>
          </md-menu>
        </div>
      </template>
    </td-data-table>
    <td-paging-bar #pagingBar [pageSizes]="[10, 25, 50, 100]" [total]="filteredTotal" (change)="page($event)" [hidden]="pagingBar.total <= 10" >
      <span i18n 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>