comic-pages.component.html

<p-table *ngIf='!!comic'
         [value]='comic.pages'
         [responsive]='true'
         [rows]='rows'
         paginator='true'
         paginatorPosition='both'>
  <ng-template pTemplate='colgroup'>
    <col class='cx-table-column-small'/>
    <col class='cx-table-column-medium'/>
    <col class='cx-table-column-medium'/>
    <col class='cx-table-column-medium-large'/>
    <col/>
    <col class='cx-table-column-medium'/>
    <col class='cx-table-column-medium'/>
  </ng-template>
  <ng-template pTemplate='header'>
    <tr>
      <th>##</th>
      <th>{{ 'comic-pages.table.header.thumbnail' | translate }}</th>
      <th>{{ 'comic-pages.table.header.filename' | translate }}</th>
      <th>{{ 'comic-pages.table.header.page-type' | translate }}</th>
      <th>{{ 'comic-pages.table.header.hash' | translate }}</th>
      <th>{{ 'comic-pages.table.header.dimensions' | translate }}</th>
      <th>{{ 'comic-pages.table.header.blocked-status' | translate }}</th>
    </tr>
  </ng-template>
  <ng-template pTemplate='body'
               let-page>
    <tr>
      <td class='cx-table-column-align-center'>{{ page.index }}</td>
      <td>
        <div class='cx-comic-page-thumbnail'>
          <img src='{{ page | comicPageUrl }}'
               width='100%'/>
        </div>
      </td>
      <td>{{ page.filename }}</td>
      <td class='cx-table-column-align-center'>
        <p-inplace>
          <span pInplaceDisplay>
            {{ 'comic-pages.page-type.' + page.page_type.name | translate }}
          </span>
          <span pInplaceContent>
            <p-dropdown
                [options]='pageTypeOptions'
                [(ngModel)]='page.page_type'
                (onChange)='setPageType(page, $event.value)'></p-dropdown>
          </span>
        </p-inplace>
      </td>
      <td>{{ page.hash }}</td>
      <td class='cx-table-column-align-center'>
        {{ page.width }}x{{ page.height }}
      </td>
      <td class='cx-table-column-align-center'>
        <span
            class='fa fa-fw fa-switch'
            (click)='page.blocked ? unblockPage(page) : blockPage(page)'
            [pTooltip]='"comic-pages.tooltip.blocked"|translate:{blocked:page.blocked}'>
        {{'comic-pages.table.column.blocked-status'|translate: {blocked: page.blocked} }}
        </span>
      </td>
    </tr>
  </ng-template>
</p-table>