Pagination

src/app/shared/components/paginator/paginator.component.html

@@ -0,0 +1,15 @@
+<div fxLayout='row' fxLayoutAlign='center center'>
+  <button mat-button *ngIf="!(currentPage.element === 1)" class="page arrow" (click)="onArroveClick(false)">
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+
+  <button mat-button *ngFor="let page of carouselPageList" class="page"
+    [ngClass]="page.isActive && ((page.element === currentPage.element) ?  'page-selected' : 'page-unselected')"
+    (click)="onPageChange(page)">{{page.element}}</button>
+
+
+  <button mat-button *ngIf="currentPage.element !== totalPageAmount" class="page arrow" (click)="onArroveClick(true)">
+    <mat-icon>arrow_forward</mat-icon>
+  </button>
+
+</div>

src/app/shared/components/paginator/paginator.component.scss

@@ -0,0 +1,25 @@
+.page{
+  font-family: Innerspace;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 13px;
+  line-height: 15px;
+  color: #444444;
+  pointer-events: none;
+  padding: 1rem;
+  min-width: 20px !important;
+
+  &-selected{
+    color: #3849F9;
+  }
+}
+.arrow, .page-selected, .page-unselected{
+  pointer-events: all;
+}
+.arrow:hover{
+  color: #3849F9;
+}
+.page-selected:hover, .page-unselected:hover, .arrow:hover{
+  cursor: pointer;
+  opacity: 0.5;
+}

src/app/shared/components/paginator/paginator.component.spec.ts

@@ -0,0 +1,35 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+import { PaginatorComponent } from './paginator.component';
+
+describe('PaginatorComponent', () => {
+  let component: PaginatorComponent;
+  let fixture: ComponentFixture<PaginatorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        MatButtonModule,
+        MatIconModule
+      ],
+      declarations: [PaginatorComponent]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PaginatorComponent);
+    component = fixture.componentInstance;
+    component.currentPage = {
+      element: 1,
+      isActive: true
+    }
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/paginator/paginator.component.ts

@@ -0,0 +1,162 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { Constants } from '../../constants/constants';
+import { PaginationElement } from '../../models/paginationElement.model';
+@Component({
+  selector: 'app-paginator',
+  templateUrl: './paginator.component.html',
+  styleUrls: ['./paginator.component.scss']
+})
+export class PaginatorComponent implements OnInit, OnChanges {
+
+  private readonly FIRST_PAGINATION_PAGE = 1;
+  private readonly MAX_PAGE_PAGINATOR_DISPLAY = 7;
+  private readonly PAGINATION_DOTS = '...';
+  private readonly PAGINATION_SHIFT_DELTA = 3;
+
+  @Input() currentPage: PaginationElement;
+  @Input() totalEntities: number;
+
+  carouselPageList: PaginationElement[] = [];
+  totalPageAmount: number;
+  size: number = Constants.WORKSHOPS_PER_PAGE;
+
+  @Output() pageChange = new EventEmitter<PaginationElement>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.totalPageAmount = this.getTotalPageAmount();
+
+    this.createPageList();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!changes.currentPage.isFirstChange()) {
+      const currentPage = this.carouselPageList.find((page: PaginationElement) => page.element === this.currentPage.element);
+
+      let isForward: boolean = changes.currentPage.previousValue.element < changes.currentPage.currentValue.element;
+      if (isForward) {
+        if (this.carouselPageList.indexOf(currentPage) >= this.PAGINATION_SHIFT_DELTA) {
+          this.createPageList();
+        }
+      } else {
+        if (this.carouselPageList.indexOf(currentPage) <= this.PAGINATION_SHIFT_DELTA) {
+          this.createPageList();
+        }
+      }
+    }
+  }
+
+  private createPageList(): void {
+    this.carouselPageList = [];
+
+    let firstPage = +this.currentPage.element - this.PAGINATION_SHIFT_DELTA;
+    firstPage = firstPage < this.FIRST_PAGINATION_PAGE ? this.FIRST_PAGINATION_PAGE : firstPage;
+
+    let lastPage = +this.currentPage.element + this.PAGINATION_SHIFT_DELTA;
+    lastPage = lastPage > this.totalPageAmount ? this.totalPageAmount : lastPage;
+
+    let pageList = this.createDisplayedPageList(firstPage);
+
+    if (this.totalPageAmount < this.MAX_PAGE_PAGINATOR_DISPLAY) {
+      this.carouselPageList = pageList;
+    } else {
+      this.createCarouselPageList(pageList, pageList[0]?.element !== this.FIRST_PAGINATION_PAGE, true);
+    }
+
+  }
+
+  onPageChange(page: PaginationElement): void {
+    this.pageChange.emit(page);
+  }
+
+  onArroveClick(isForward: boolean): void {
+    let page: PaginationElement = {
+      element: '',
+      isActive: true,
+    }
+    if (isForward) {
+      page.element = +this.currentPage.element + 1;
+    } else {
+      page.element = +this.currentPage.element - 1;
+    }
+
+    this.pageChange.emit(page);
+  }
+
+  private getTotalPageAmount(): number {
+    return Math.ceil(this.totalEntities / this.size);
+  }
+
+  private createDisplayedPageList(startPage: number): PaginationElement[] {
+    let i: number;
+    let end: number;
+    if (this.totalPageAmount > this.MAX_PAGE_PAGINATOR_DISPLAY) {
+      const isMaxAmountFit = (startPage + this.MAX_PAGE_PAGINATOR_DISPLAY) < this.totalPageAmount;
+      i = (isMaxAmountFit) ? startPage : this.totalPageAmount - this.MAX_PAGE_PAGINATOR_DISPLAY;
+      end = this.MAX_PAGE_PAGINATOR_DISPLAY;
+    } else {
+      i = startPage;
+      end = this.totalPageAmount;
+    }
+
+    let pageList: PaginationElement[] = [];
+    while (pageList.length < end) {
+      pageList.push({
+        element: i,
+        isActive: true
+      });
+      i++;
+    }
+    return pageList;
+  }
+
+  private createCarouselPageList(pageList: PaginationElement[], isOnStart?: boolean, isOnEnd?: boolean) {
+    if (isOnStart) {
+      let start: PaginationElement[] = [
+        {
+          element: this.FIRST_PAGINATION_PAGE,
+          isActive: true
+        }
+      ];
+
+      if (pageList[0]?.element !== 2) {
+        start.push(
+          {
+            element: this.PAGINATION_DOTS,
+            isActive: false
+          })
+      }
+
+      this.carouselPageList = this.carouselPageList.concat(start);
+    };
+
+    if (pageList[0]?.element === 2) {
+      pageList.pop();
+    }
+
+    if (pageList[pageList.length - 1]?.element === this.totalPageAmount - 1) {
+      pageList.shift();
+    }
+
+    this.carouselPageList = this.carouselPageList.concat(pageList);
+
+
+    if (isOnEnd) {
+      let end: PaginationElement[] = [
+        {
+          element: this.totalPageAmount,
+          isActive: true
+        }
+      ];
+      if (pageList[pageList.length - 1]?.element !== this.totalPageAmount - 1) {
+        end.unshift({
+          element: this.PAGINATION_DOTS,
+          isActive: false
+        })
+      }
+      this.carouselPageList = this.carouselPageList.concat(end);
+    }
+  }
+
+}

src/app/shared/constants/constants.ts

@@ -13,6 +13,8 @@ export class Constants {
   static readonly PHONE_LENGTH = 10;
   static readonly PROVIDER_ENTITY_TYPE = 1;
   static readonly WORKSHOP_ENTITY_TYPE = 2;
+  static readonly WORKSHOPS_PER_PAGE = 4;
+
 
   static readonly RATE_ONE_STAR = 1;
   static readonly RATE_TWO_STAR = 2;

src/app/shared/models/paginationElement.model.ts

@@ -0,0 +1,4 @@
+export interface PaginationElement {
+  element: number | string,
+  isActive: boolean
+}

src/app/shared/services/workshops/app-workshop/app-workshops.service.ts

@@ -1,6 +1,7 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
+import { Constants } from 'src/app/shared/constants/constants';
 import { Direction } from 'src/app/shared/models/category.model';
 
 import { WorkshopCard, WorkshopFilterCard } from '../../../models/workshop.model';
@@ -57,6 +58,14 @@ export class AppWorkshopsService {
       filters.directions.forEach((direction: Direction) => params = params.set('DirectionIds', direction.id.toString()));
     }
 
+    if (filters.currentPage) {
+      const size: number = Constants.WORKSHOPS_PER_PAGE;
+      const from: number = size * (+filters.currentPage.element - 1);
+
+      params = params.set('Size', size.toString());
+      params = params.set('From', from.toString());
+    }
+
     return params;
   }
   /**

src/app/shared/shared.module.ts

@@ -42,6 +42,7 @@ import { FullSearchBarComponent } from './components/full-search-bar/full-search
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MessageBarComponent } from './components/message-bar/message-bar.component';
 import { ShowTooltipIfTruncatedDirective } from './directives/show-tooltip-if-truncated.directive';
+import { PaginatorComponent } from './components/paginator/paginator.component';
 import { StarsComponent } from './components/stars/stars.component';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatIconModule } from '@angular/material/icon';
@@ -84,6 +85,7 @@ import { FooterComponent } from '../footer/footer.component';
     FullSearchBarComponent,
     MessageBarComponent,
     ShowTooltipIfTruncatedDirective,
+    PaginatorComponent,
     StarsComponent,
     FooterComponent,
   ],
@@ -136,6 +138,7 @@ import { FooterComponent } from '../footer/footer.component';
     MessageBarComponent,
     MatProgressBarModule,
     ShowTooltipIfTruncatedDirective,
+    PaginatorComponent,
     ReactiveFormsModule,
     StarsComponent,
     FooterComponent,

src/app/shared/store/filter.actions.ts

@@ -1,5 +1,6 @@
 import { Direction } from "../models/category.model";
 import { City } from "../models/city.model";
+import { PaginationElement } from "../models/paginationElement.model";
 import { WorkingHours } from "../models/workingHours.model";
 export class SetCity {
   static readonly type = '[app] Set City';
@@ -70,4 +71,8 @@ export class SetMinAge {
 export class SetMaxAge {
   static readonly type = '[filter] Set Max Age';
   constructor(public payload: number) { }
+}
+export class PageChange {
+  static readonly type = '[filter] Change Page';
+  constructor(public payload: PaginationElement) { }
 }

src/app/shared/store/filter.state.ts

@@ -22,8 +22,10 @@ import {
   FilterChange,
   SetMinAge,
   SetMaxAge,
+  PageChange,
 } from './filter.actions';
 import { AppWorkshopsService } from '../services/workshops/app-workshop/app-workshops.service';
+import { PaginationElement } from '../models/paginationElement.model';
 export interface FilterStateModel {
   directions: Direction[];
   maxAge: number;
@@ -38,10 +40,11 @@ export interface FilterStateModel {
   city: City;
   searchQuery: string;
   order: string;
-  filteredWorkshops: WorkshopCard[];
+  filteredWorkshops: WorkshopFilterCard;
   topWorkshops: WorkshopCard[];
   withDisabilityOption: boolean;
   isLoading: boolean;
+  currentPage: PaginationElement
 }
 @State<FilterStateModel>({
   name: 'filter',
@@ -59,17 +62,21 @@ export interface FilterStateModel {
     city: undefined,
     searchQuery: '',
     order: '',
-    filteredWorkshops: [],
+    filteredWorkshops: undefined,
     topWorkshops: [],
     withDisabilityOption: false,
-    isLoading: false
+    isLoading: false,
+    currentPage: {
+      element: 1,
+      isActive: true
+    }
   }
 })
 @Injectable()
 export class FilterState {
 
   @Selector()
-  static filteredWorkshops(state: FilterStateModel): WorkshopCard[] { return state.filteredWorkshops }
+  static filteredWorkshops(state: FilterStateModel): WorkshopFilterCard { return state.filteredWorkshops }
 
   @Selector()
   static topWorkshops(state: FilterStateModel): WorkshopCard[] { return state.topWorkshops }
@@ -161,7 +168,7 @@ export class FilterState {
 
     return this.appWorkshopsService
       .getFilteredWorkshops(state)
-      .subscribe((filterResult: WorkshopFilterCard) => patchState(filterResult ? { filteredWorkshops: filterResult.entities, isLoading: false } : { filteredWorkshops: [], isLoading: false }),
+      .subscribe((filterResult: WorkshopFilterCard) => patchState(filterResult ? { filteredWorkshops: filterResult, isLoading: false } : { filteredWorkshops: undefined, isLoading: false }),
         () => patchState({ isLoading: false }))
   }
 
@@ -193,6 +200,12 @@ export class FilterState {
     dispatch(new FilterChange());
   }
 
+  @Action(PageChange)
+  pageChange({ patchState, dispatch }: StateContext<FilterStateModel>, { payload }: PageChange) {
+    patchState({ currentPage: payload });
+    dispatch(new FilterChange());
+  }
+
   @Action(FilterChange)
   filterChange({ }: StateContext<FilterStateModel>, { }: FilterChange) { }
 }