feat: 1493 add pagination on tiles view

src/app/features/home/components/routables/home-search/home-search.routable.html

@@ -29,7 +29,7 @@
        class="wrapper"
   >
     <ng-template [ngIf]="viewModeList === viewModeListEnum.list">
-      <dlcm-shared-data-table *ngIf="(listObs | async).length > 0;"
+      <dlcm-shared-data-table *ngIf="(listObs | async)?.length > 0;"
                               [isLoading]="isLoadingObs | async"
                               [columns]="columns"
                               [actions]="actions"
@@ -44,15 +44,26 @@
     </ng-template>
 
     <div *ngIf="viewModeList === viewModeListEnum.tiles"
-         class="tiles-container"
+         class="tile-view"
     >
-      <!--      <dlcm-shared-paginator></dlcm-shared-paginator>-->
-
-      <dlcm-home-archive-tile *ngFor="let archive of (listObs | async)"
-                              [archive]="archive"
-                              (downloadChange)="download($event)"
-                              (selectChange)="showDetail($event)"
-      ></dlcm-home-archive-tile>
+      <div *ngIf="(queryParametersObs | async) as queryParameters"
+           class="paginator-container"
+      >
+        <dlcm-shared-paginator *ngIf="queryParameters && (listObs | async)?.length > 0"
+                               #paginator
+                               class="paginator"
+                               [pagingModel]="queryParameters.paging"
+                               (pageChange)="pageChange($event)"
+        >
+        </dlcm-shared-paginator>
+      </div>
+      <div class="tiles-container">
+        <dlcm-home-archive-tile *ngFor="let archive of (listObs | async)"
+                                [archive]="archive"
+                                (downloadChange)="download($event)"
+                                (selectChange)="showDetail($event)"
+        ></dlcm-home-archive-tile>
+      </div>
     </div>
     <div *ngIf="!(isLoadingObs | async) && (listObs | async).length === 0 && !(searchObs | async | isNullOrUndefined) && (searchObs | async |
   isNonEmptyString)"

src/app/features/home/components/routables/home-search/home-search.routable.scss

@@ -55,10 +55,17 @@
 
     .wrapper {
 
-      .tiles-container {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        grid-gap: 20px;
+      .tile-view {
+        .paginator-container {
+          display: flex;
+          justify-content: flex-end;
+        }
+
+        .tiles-container {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+          grid-gap: 20px;
+        }
       }
     }
   }

src/app/features/home/components/routables/home-search/home-search.routable.ts

@@ -42,7 +42,9 @@ import {
   MemoizedUtil,
   OAuth2Service,
   OrderEnum,
+  Paging,
   QueryParameters,
+  QueryParametersUtil,
   StringUtil,
 } from "solidify-frontend";
 
@@ -212,4 +214,10 @@ export class HomeSearchRoutable extends SharedAbstractPresentational implements
   switchViewModeList(viewModeList: ViewModeListEnum): void {
     this.viewModeList = viewModeList;
   }
+
+  pageChange(paging: Paging): void {
+    const queryParameters = QueryParametersUtil.clone(MemoizedUtil.selectSnapshot(this.store, HomeState, state => state.queryParameters));
+    queryParameters.paging = paging;
+    this.store.dispatch(new HomeAction.ChangeQueryParameters(queryParameters));
+  }
 }