#1115 pagination drop-down (#1257)

* add pagination dropdown for items per page selection

dropdown

* Pagination dropdown

Pagination dropdown

* paginator state

paginator state

* Comments

Comments

* conflict fix

* conflict fix1

* [Create Application] - do not display create-application button for mobile view for the wrong role #1223 (#1242)

* Update create-direction.component.ts (#1247)

* [Create Direction] - remove routing when you click on delete/edit icon on category-card #1248 (#1249)

* [Create Direction] - remove routing when you click on delete/edit icon on category-card #1248

* increased area clicking

* refactoring admin-state

* fix mobile view (#1241)

* Removing validation input hint (#1237)

* removing old form control

* Update create-direction.component.spec.ts

* fix

* fix module

* Update shared.module.ts

* Update create-application.component.spec.ts

* [Applying for a workshop] Incorrect behavior is displayed when editing the child's information (#1231)

* cancel navigation

* fix editMode submit button

* onSubmit navigation

* fix editMode submit button

* style guide

Co-authored-by: Oleksandra Lytvynets <alitvinets7@gmail.com>

* add validation-hint fore create-direction, create-department, create class form controls (#1236 )

* merge

* Update paginator.component.ts

* fix

* import removing

* Update result.component.ts

Co-authored-by: Dmytro Minochkin <dmytro.minochkin@gmail.com>
Co-authored-by: Oleksandra Lytvynets <alitvinets7@gmail.com>
Co-authored-by: Pabloostr <47858505+Pabloostr@users.noreply.github.com>
Co-authored-by: Aleksandr Perepichai <o.perepichai@gmail.com>

src/app/app.module.ts

@@ -26,6 +26,7 @@ import localeUk from '@angular/common/locales/uk';
 import { AdminState } from './shared/store/admin.state';
 import { MAT_SELECT_CONFIG } from '@angular/material/select';
 import { NotificationsState } from './shared/store/notifications.state';
+import { PaginatorState } from './shared/store/paginator.state';
 
 registerLocaleData(localeUk);
 
@@ -49,7 +50,8 @@ registerLocaleData(localeUk);
       UserState,
       AdminState,
       NavigationState,
-      NotificationsState
+      NotificationsState,
+      PaginatorState,
     ]),
 
     NgxsReduxDevtoolsPluginModule.forRoot({

src/app/shared/components/child-info-box/child-info-box.component.spec.ts

@@ -3,6 +3,8 @@ import { ChildInfoBoxComponent } from './child-info-box.component';
 import { MatCardModule } from '@angular/material/card';
 import { Child } from '../../models/child.model';
 import { HttpClientModule } from '@angular/common/http';
+import { GeolocationService } from '../../services/geolocation/geolocation.service';
+import { ChildrenService } from '../../services/children/children.service';
 
 describe('ChildInfoBoxComponent', () => {
   let component: ChildInfoBoxComponent;
@@ -14,7 +16,10 @@ describe('ChildInfoBoxComponent', () => {
         MatCardModule,
         HttpClientModule
       ],
-      declarations: [ChildInfoBoxComponent]
+      declarations: [ChildInfoBoxComponent],
+      providers: [
+        { provide: ChildrenService, useValue: ChildrenService }
+      ]
     })
       .compileComponents();
   });
@@ -30,3 +35,4 @@ describe('ChildInfoBoxComponent', () => {
     expect(component).toBeTruthy();
   });
 });
+

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

@@ -1,15 +1,22 @@
-<div *ngIf="totalPageAmount > 1" 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>
+<div class="paginator" fxLayout="row wrap" fxLayoutAlign="center center">
+  <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>
+
+  <label class="step-label">Відображати на сторінці:</label>
+  <mat-select disableOptionCentering panelClass="dropdown-panel" class="step-input" (selectionChange)="OnSelectOption($event)" placeholder="{{itemsPerPage}}">
+    <mat-option value="8" class="dropdown-option"> 8 </mat-option>
+    <mat-option value="12" selected class="dropdown-option"> 12 </mat-option>
+    <mat-option value="16" class="dropdown-option"> 16 </mat-option>
+    <mat-option value="20" class="dropdown-option"> 20 </mat-option>
+  </mat-select>
+</div>

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

@@ -1,3 +1,6 @@
+.paginator {
+  margin-bottom: 2rem;
+}
 .page{
   font-family: Innerspace;
   font-style: normal;
@@ -23,3 +26,29 @@
   cursor: pointer;
   opacity: 0.5;
 }
+.step-input {
+  max-width: 50px;
+  max-height: 100px;
+  overflow: visible;
+  text-align: center;
+}
+:host::ng-deep .mat-select-placeholder, .dropdown-option {
+  font-weight: 500;
+  text-align: center;
+  max-width: 100px;
+  height: 2.1rem;
+  color: rgba(0,0,0,.87);
+}
+:host::ng-deep .mat-select-arrow:hover {
+  opacity: 0,5;
+  color: #3849F9;
+}
+
+@media(max-width: 750px) {
+  .paginator {
+    flex-direction: column;
+    }
+}
+::ng-deep .custom-overlay-panel {
+  transform: translate(-1rem, 1.5rem) !important;
+}

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

@@ -1,6 +1,10 @@
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
 import { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxsModule } from '@ngxs/store';
 
 import { PaginatorComponent } from './paginator.component';
 
@@ -12,8 +16,12 @@ describe('PaginatorComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         MatButtonModule,
-        MatIconModule
+        MatIconModule,
+        MatSelectModule,
+        MatOptionModule,
+        NgxsModule.forRoot([]),
       ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
       declarations: [PaginatorComponent]
     })
       .compileComponents();
@@ -22,6 +30,8 @@ describe('PaginatorComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(PaginatorComponent);
     component = fixture.componentInstance;
+    component.itemsPerPage = 8;
+    component.totalEntities = 8;
     component.currentPage = {
       element: 1,
       isActive: true

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

@@ -1,6 +1,8 @@
 import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { Constants, PaginationConstants } from '../../constants/constants';
+import { MatSelectChange } from '@angular/material/select';
+import { PaginationConstants } from '../../constants/constants';
 import { PaginationElement } from '../../models/paginationElement.model';
+
 @Component({
   selector: 'app-paginator',
   templateUrl: './paginator.component.html',
@@ -11,9 +13,10 @@ export class PaginatorComponent implements OnInit, OnChanges {
 
   @Input() currentPage: PaginationElement;
   @Input() totalEntities: number;
-  @Input() itemsPerPage: number = this.constants.ITEMS_PER_PAGE_DEFAULT;
+  @Input() itemsPerPage: number;
 
   @Output() pageChange = new EventEmitter<PaginationElement>();
+  @Output() itemsPerPageChange = new EventEmitter<Number>();
 
   carouselPageList: PaginationElement[] = [];
   totalPageAmount: number;
@@ -25,12 +28,21 @@ export class PaginatorComponent implements OnInit, OnChanges {
     this.createPageList();
   }
 
+  OnSelectOption(event: MatSelectChange): void {
+    this.itemsPerPageChange.emit(event.value);
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes?.currentPage) {
       if (!changes.currentPage.isFirstChange()) {
         this.createPageList();
       }
     }
+    if (changes?.itemsPerPage) {
+      if (!changes.itemsPerPage.isFirstChange()) {
+       this.ngOnInit();
+      }
+    }
   }
 
   onPageChange(page: PaginationElement): void {

src/app/shared/services/categories/categories.service.spec.ts

@@ -1,5 +1,5 @@
 import { TestBed } from '@angular/core/testing';
-
+import { NgxsModule, Store } from '@ngxs/store';
 import { CategoriesService } from './categories.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 
@@ -8,7 +8,8 @@ describe('CategoriesService', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ HttpClientTestingModule ],
+      imports: [ HttpClientTestingModule,
+        NgxsModule.forRoot([]), ],
     });
     service = TestBed.inject(CategoriesService);
   });
@@ -17,3 +18,4 @@ describe('CategoriesService', () => {
     expect(service).toBeTruthy();
   });
 });
+

src/app/shared/services/categories/categories.service.ts

@@ -1,16 +1,22 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { Constants, PaginationConstants } from '../../constants/constants';
 import { IClass, Department, Direction, DirectionsFilter } from '../../models/category.model';
+import { PaginationElement } from '../../models/paginationElement.model';
 import { AdminStateModel } from '../../store/admin.state';
+import { PaginatorState } from '../../store/paginator.state';
 
 @Injectable({
   providedIn: 'root'
 })
 export class CategoriesService {
 
-  constructor(private http: HttpClient) { }
+  constructor(
+    private http: HttpClient,
+    private store: Store,
+  ) { }
 
   private setParams(filters: AdminStateModel): HttpParams {
     let params = new HttpParams();
@@ -19,13 +25,13 @@ export class CategoriesService {
       params = params.set('Name', filters.searchQuery);
     }
 
-    if (filters.currentPage) {
-      const size: number = PaginationConstants.ITEMS_PER_PAGE_TEN;
-      const from: number = size * (+filters.currentPage.element - 1);
+    const currentPage = this.store.selectSnapshot(PaginatorState.currentPage) as PaginationElement;
+    const size: number = this.store.selectSnapshot(PaginatorState.directionsPerPage);
+    const from: number = size * (+currentPage.element - 1);
+
+    params = params.set('Size', size.toString());
+    params = params.set('From', from.toString());
 
-      params = params.set('Size', size.toString());
-      params = params.set('From', from.toString());
-    }
     return params;
   }
 

src/app/shared/services/children/children.service.spec.ts

@@ -2,13 +2,15 @@ import { TestBed } from '@angular/core/testing';
 
 import { ChildrenService } from './children.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { NgxsModule } from '@ngxs/store';
 
 describe('CildrenService', () => {
   let service: ChildrenService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ HttpClientTestingModule ],
+      imports: [ HttpClientTestingModule,
+        NgxsModule.forRoot([]), ],
     });
     service = TestBed.inject(ChildrenService);
   });

src/app/shared/services/children/children.service.ts

@@ -1,28 +1,33 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { PaginationConstants } from '../../constants/constants';
 import { Child, ChildCards } from '../../models/child.model';
+import { PaginationElement } from '../../models/paginationElement.model';
 import { SocialGroup } from '../../models/socialGroup.model';
+import { PaginatorState } from '../../store/paginator.state';
 import { UserStateModel } from '../../store/user.state';
 @Injectable({
   providedIn: 'root'
 })
 
 export class ChildrenService {
 
-  constructor(private http: HttpClient) { }
+  constructor(
+    private http: HttpClient,
+    private store: Store,
+  ) { }
 
   private setParams(state: UserStateModel): HttpParams {
     let params = new HttpParams();
 
-    if (state.currentPage) {
-      const size: number = PaginationConstants.ITEMS_PER_PAGE_DEFAULT;
-      const from: number = size * (+state.currentPage.element - 1);
-
-      params = params.set('Size', (size).toString());
-      params = params.set('From', (from).toString());
-    }
+    const currentPage = this.store.selectSnapshot(PaginatorState.currentPage) as PaginationElement;
+    const size: number = this.store.selectSnapshot(PaginatorState.childrensPerPage);
+    const from: number = size * (+currentPage.element - 1);
+
+    params = params.set('Size', size.toString());
+    params = params.set('From', from.toString());
 
     return params;
   }

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

@@ -1,13 +1,15 @@
 import { TestBed } from '@angular/core/testing';
 import { AppWorkshopsService } from './app-workshops.service';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { NgxsModule } from '@ngxs/store';
 
 describe('OrgCardsService', () => {
   let service: AppWorkshopsService;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ HttpClientTestingModule ],
+      imports: [ HttpClientTestingModule,
+        NgxsModule.forRoot([]), ],
     });
     service = TestBed.inject(AppWorkshopsService);
   });

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

@@ -1,21 +1,23 @@
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
-import { Constants, PaginationConstants } from 'src/app/shared/constants/constants';
+import { Constants } from 'src/app/shared/constants/constants';
 import { Ordering } from 'src/app/shared/enum/ordering';
 import { Direction } from 'src/app/shared/models/category.model';
-
+import { PaginationElement } from 'src/app/shared/models/paginationElement.model';
+import { PaginatorState } from 'src/app/shared/store/paginator.state';
 import { WorkshopCard, WorkshopFilterCard } from '../../../models/workshop.model';
 import { FilterStateModel } from '../../../store/filter.state';
 @Injectable({
   providedIn: 'root'
 })
 export class AppWorkshopsService {
 
-  dataUrlMock = '/assets/mock-org-cards.json';
-  size: number = PaginationConstants.ITEMS_PER_PAGE_DEFAULT;
-
-  constructor(private http: HttpClient) { }
+  constructor(
+    private http: HttpClient,
+    private store: Store,
+  ) {}
 
   private setParams(filters: FilterStateModel, isMapView: boolean): HttpParams {
     let params = new HttpParams();
@@ -83,9 +85,10 @@ export class AppWorkshopsService {
       params = params.set('OrderByField', Ordering.nearest);
       params = params.set('Size', '100');
       params = params.set('From', '0');
-    } else if (filters.currentPage) {
-      const size: number = PaginationConstants.ITEMS_PER_PAGE_DEFAULT;
-      const from: number = size * (+filters.currentPage.element - 1);
+    } else {
+      const currentPage = this.store.selectSnapshot(PaginatorState.currentPage) as PaginationElement;
+      const size: number = this.store.selectSnapshot(PaginatorState.workshopsPerPage);
+      const from: number = size * (+currentPage.element - 1);
 
       params = params.set('Size', size.toString());
       params = params.set('From', from.toString());
@@ -121,8 +124,9 @@ export class AppWorkshopsService {
    */
   getTopWorkshops(filters: FilterStateModel): Observable<WorkshopCard[]> {
     let params = new HttpParams();
+    const size: number = this.store.selectSnapshot(PaginatorState.workshopsPerPage);
 
-    params = params.set('Limit', this.size.toString());
+    params = params.set('Limit', size.toString());
     params = params.set('City', filters.city?.name ?? Constants.KIEV.name);
 
     return this.http.get<WorkshopCard[]>('/api/v1/Statistic/GetWorkshops', { params });