refactor(admin-ui): Move itemsPerPage control into own component

admin-ui/src/app/catalog/components/asset-list/asset-list.component.html

@@ -15,16 +15,8 @@
                    [multiSelect]="true"></vdr-asset-gallery>
 
 <div class="paging-controls">
-    <div class="form-group">
-        <div class="select">
-            <select [value]="itemsPerPage$ | async" (change)="setItemsPerPage($event.target.value)">
-                <option [value]="10">10 per page</option>
-                <option [value]="25">25 per page</option>
-                <option [value]="50">50 per page</option>
-                <option [value]="100">100 per page</option>
-            </select>
-        </div>
-    </div>
+    <vdr-items-per-page-controls [itemsPerPage]="itemsPerPage$ | async"
+                                 (itemsPerPageChange)="setItemsPerPage($event)"></vdr-items-per-page-controls>
 
     <vdr-pagination-controls [currentPage]="currentPage$ | async"
                              [itemsPerPage]="itemsPerPage$ | async"

admin-ui/src/app/shared/components/data-table/data-table.component.html

@@ -13,17 +13,8 @@
     </tbody>
 </table>
 <div class="table-footer">
-
-    <div class="form-group">
-        <div class="select">
-            <select [value]="itemsPerPage" (change)="itemsPerPageChange.emit($event.target.value)">
-                <option [value]="10">10 per page</option>
-                <option [value]="25">25 per page</option>
-                <option [value]="50">50 per page</option>
-                <option [value]="100">100 per page</option>
-            </select>
-        </div>
-    </div>
+    <vdr-items-per-page-controls [itemsPerPage]="itemsPerPage"
+                                 (itemsPerPageChange)="itemsPerPageChange.emit($event)"></vdr-items-per-page-controls>
 
     <vdr-pagination-controls [currentPage]="currentPage"
                              [itemsPerPage]="itemsPerPage"

admin-ui/src/app/shared/components/data-table/data-table.component.spec.ts

@@ -1,6 +1,8 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NgxPaginationModule } from 'ngx-pagination';
 
+import { TestingCommonModule } from '../../../../testing/testing-common.module';
+import { ItemsPerPageControlsComponent } from '../items-per-page-controls/items-per-page-controls.component';
 import { PaginationControlsComponent } from '../pagination-controls/pagination-controls.component';
 
 import { DataTableColumnComponent } from './data-table-column.component';
@@ -12,8 +14,13 @@ describe('DataTableComponent', () => {
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
-            imports: [NgxPaginationModule],
-            declarations: [DataTableComponent, DataTableColumnComponent, PaginationControlsComponent],
+            imports: [NgxPaginationModule, TestingCommonModule],
+            declarations: [
+                DataTableComponent,
+                DataTableColumnComponent,
+                PaginationControlsComponent,
+                ItemsPerPageControlsComponent,
+            ],
         }).compileComponents();
     }));
 

admin-ui/src/app/shared/components/items-per-page-controls/items-per-page-controls.component.html

@@ -0,0 +1,10 @@
+<div class="form-group">
+    <div class="select">
+        <select [value]="itemsPerPage" (change)="itemsPerPageChange.emit($event.target.value)">
+            <option [value]="10">{{ 'common.items-per-page-option' | translate : { count: 10 } }}</option>
+            <option [value]="25">{{ 'common.items-per-page-option' | translate : { count: 25 } }}</option>
+            <option [value]="50">{{ 'common.items-per-page-option' | translate : { count: 50 } }}</option>
+            <option [value]="100">{{ 'common.items-per-page-option' | translate : { count: 100 } }}</option>
+        </select>
+    </div>
+</div>

admin-ui/src/app/shared/components/items-per-page-controls/items-per-page-controls.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+
+/**
+ * A control for setting the number of items per page in a paginated list.
+ */
+@Component({
+    selector: 'vdr-items-per-page-controls',
+    templateUrl: './items-per-page-controls.component.html',
+    styleUrls: ['./items-per-page-controls.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItemsPerPageControlsComponent {
+    @Input() itemsPerPage = 10;
+    @Output() itemsPerPageChange = new EventEmitter<number>();
+}

admin-ui/src/app/shared/shared.module.ts

@@ -20,6 +20,7 @@ import { DataTableComponent } from './components/data-table/data-table.component
 import { FormFieldControlDirective } from './components/form-field/form-field-control.directive';
 import { FormFieldComponent } from './components/form-field/form-field.component';
 import { FormItemComponent } from './components/form-item/form-item.component';
+import { ItemsPerPageControlsComponent } from './components/items-per-page-controls/items-per-page-controls.component';
 import { LanguageSelectorComponent } from './components/language-selector/language-selector.component';
 import { DialogButtonsDirective } from './components/modal-dialog/dialog-buttons.directive';
 import { DialogComponentOutletComponent } from './components/modal-dialog/dialog-component-outlet.component';
@@ -51,6 +52,7 @@ const DECLARATIONS = [
     CustomFieldControlComponent,
     DataTableComponent,
     DataTableColumnComponent,
+    ItemsPerPageControlsComponent,
     PaginationControlsComponent,
     TableRowActionComponent,
     FileSizePipe,

admin-ui/src/i18n-messages/en.json

@@ -78,6 +78,7 @@
     "edit": "Edit",
     "edit-field": "Edit field",
     "finish": "Finish",
+    "items-per-page-option": "{ count } per page",
     "language": "Language",
     "log-out": "Log out",
     "login": "Log in",