70-FE/license-page-missing-pagination-sorting (#166)

* Fixed pagination and added a new search input field for better overview in the licenses.

* Fixed tests

* Fixed integration tests.

---------

Co-authored-by: MilanMajchrák <milan.majchak@dataquest.sk>

src/app/clarin-licenses/clarin-license-table-pagination.ts

@@ -10,8 +10,8 @@ export const paginationID = 'cLicense';
 // pageSize: 200; get all licenses
 export const defaultPagination = Object.assign(new PaginationComponentOptions(), {
   id: paginationID,
-  currentPage: 0,
-  pageSize: 200
+  currentPage: 1,
+  pageSize: 10
 });
 
 export const defaultSortConfiguration = new SortOptions('', SortDirection.DESC);

src/app/clarin-licenses/clarin-license-table/clarin-license-table.component.html

@@ -1,4 +1,15 @@
 <div class="container">
+  <div class="form-group input-group">
+    <input type="text"
+           name="query"
+           [(ngModel)]="searchingLicenseName"
+           class="form-control ng-pristine ng-valid ng-touched"
+           [placeholder]="'clarin-license.button.search.placeholder' | translate"/>
+    <span class="input-group-append" (click)="loadAllLicenses()">
+      <button type="submit" class="btn btn-primary search-button">
+        <i class="fas fa-search"></i>{{'clarin-license.button.search' | translate}}</button>
+    </span>
+  </div>
   <!-- The table with pagination -->
   <div *ngVar="(licensesRD$ | async)?.payload as cLicenses">
     <div class="mb-2">

src/app/clarin-licenses/clarin-license-table/clarin-license-table.component.spec.ts

@@ -41,6 +41,7 @@ describe('ClarinLicenseTableComponent', () => {
       findAll: mockLicenseRD$,
       create: createdLicenseRD$,
       put: createdLicenseRD$,
+      searchBy: mockLicenseRD$,
       getLinkPath: observableOf('')
     });
     clarinLicenseLabelDataService = jasmine.createSpyObj('clarinLicenseLabelService', {
@@ -98,7 +99,7 @@ describe('ClarinLicenseTableComponent', () => {
 
   it('should onInit should initialize clarin license table data', () => {
     (component as ClarinLicenseTableComponent).ngOnInit();
-    expect((component as any).clarinLicenseService.findAll).toHaveBeenCalled();
+    expect((component as any).clarinLicenseService.searchBy).toHaveBeenCalled();
     expect((component as ClarinLicenseTableComponent).licensesRD$).not.toBeNull();
   });
 
@@ -108,7 +109,7 @@ describe('ClarinLicenseTableComponent', () => {
     // notificate successful response
     expect((component as any).notificationService.success).toHaveBeenCalled();
     // load table data
-    expect((component as any).clarinLicenseService.findAll).toHaveBeenCalled();
+    expect((component as any).clarinLicenseService.searchBy).toHaveBeenCalled();
     expect((component as ClarinLicenseTableComponent).licensesRD$).not.toBeNull();
   });
 
@@ -127,7 +128,7 @@ describe('ClarinLicenseTableComponent', () => {
       // notificate successful response
       expect((component as any).notificationService.success).toHaveBeenCalled();
       // load table data
-      expect((component as any).clarinLicenseService.findAll).toHaveBeenCalled();
+      expect((component as any).clarinLicenseService.searchBy).toHaveBeenCalled();
       expect((component as ClarinLicenseTableComponent).licensesRD$).not.toBeNull();
     });
   }));
@@ -141,7 +142,7 @@ describe('ClarinLicenseTableComponent', () => {
     // notificate successful response
     expect((component as any).notificationService.success).toHaveBeenCalled();
     // load table data
-    expect((component as any).clarinLicenseService.findAll).toHaveBeenCalled();
+    expect((component as any).clarinLicenseService.searchBy).toHaveBeenCalled();
     expect((component as ClarinLicenseTableComponent).licensesRD$).not.toBeNull();
   });
 });

src/app/clarin-licenses/clarin-license-table/clarin-license-table.component.ts

@@ -21,6 +21,7 @@ import { ClarinLicenseLabelDataService } from '../../core/data/clarin/clarin-lic
 import { ClarinLicenseLabelExtendedSerializer } from '../../core/shared/clarin/clarin-license-label-extended-serializer';
 import { ClarinLicenseRequiredInfoSerializer } from '../../core/shared/clarin/clarin-license-required-info-serializer';
 import { cloneDeep } from 'lodash';
+import { RequestParam } from '../../core/cache/models/request-param.model';
 
 /**
  * Component for managing clarin licenses and defining clarin license labels.
@@ -61,6 +62,11 @@ export class ClarinLicenseTableComponent implements OnInit {
    */
   isLoading = false;
 
+  /**
+   * License name typed into search input field, it is passed to the BE as searching value.
+   */
+  searchingLicenseName = '';
+
   ngOnInit(): void {
     this.initializePaginationOptions();
     this.loadAllLicenses();
@@ -311,10 +317,11 @@ export class ClarinLicenseTableComponent implements OnInit {
 
     observableCombineLatest([currentPagination$, currentSort$]).pipe(
       switchMap(([currentPagination, currentSort]) => {
-        return this.clarinLicenseService.findAll({
+        return this.clarinLicenseService.searchBy('byNameLike',{
             currentPage: currentPagination.currentPage,
             elementsPerPage: currentPagination.pageSize,
-            sort: {field: currentSort.field, direction: currentSort.direction}
+            sort: {field: currentSort.field, direction: currentSort.direction},
+            searchParams: [Object.assign(new RequestParam('name', this.searchingLicenseName))]
           }, false
         );
       }),

src/assets/i18n/en.json5

@@ -3882,6 +3882,10 @@
 
   "clarin-license.button.delete-license": "Delete License",
 
+  "clarin-license.button.search": "Search",
+
+  "clarin-license.button.search.placeholder": "Search by the license name ...",
+
 
   "clarin-license.define-license-form.form-name": "Define new license",