Provide selectable page size controls for RSDs fixes #307

ui/src/app/app.module.ts

@@ -9,7 +9,7 @@ import {RichSkillsLibraryComponent} from "./richskill/library/rich-skills-librar
 import {RichSkillPublicComponent} from "./richskill/detail/rich-skill-public/rich-skill-public.component"
 import {AppConfig} from "./app.config"
 import {RichSkillFormComponent} from "./richskill/form/rich-skill-form.component"
-import {ReactiveFormsModule} from "@angular/forms"
+import {FormsModule, ReactiveFormsModule} from "@angular/forms"
 import {LoadingObservablesDirective} from "./loading/loading-observables.directive"
 import {LoadingComponent} from "./loading/loading.component"
 import {HeaderComponent} from "./navigation/header.component"
@@ -94,7 +94,8 @@ import {MyWorkspaceComponent} from "./my-workspace/my-workspace.component"
 import {CollectionPipe} from "./pipes"
 import { ConvertToCollectionComponent } from "./my-workspace/convert-to-collection/convert-to-collection.component"
 import {SharedModule} from "@shared/shared.module"
-import {FormModule} from "./form/form.module"
+import {OsmtFormModule} from "./form/osmt-form.module"
+import { SizePaginationComponent } from "./table/skills-library-table/size-pagination/size-pagination.component"
 
 export function initializeApp(
   appConfig: AppConfig,
@@ -201,6 +202,7 @@ export function initializeApp(
     MyWorkspaceComponent,
     CollectionPipe,
     ConvertToCollectionComponent,
+    SizePaginationComponent,
   ],
   imports: [
     NgIdleKeepaliveModule.forRoot(),
@@ -210,7 +212,8 @@ export function initializeApp(
     ReactiveFormsModule,
     CommonModule,
     SharedModule,
-    FormModule
+    OsmtFormModule,
+    FormsModule
   ],
   providers: [
     EnvironmentService,

ui/src/app/collection/collection-skill-search.component.html

@@ -33,6 +33,8 @@ <h2 class="t-type-heading1 t-margin-small t-margin-bottom">Add RSDs to {{collect
 
       <app-filter-controls
         [selectedFilters]="selectedFilters"
+        [isSizePaginationVisible]="isSizePaginationVisible"
+        (changeValue)="sizeChange($event)"
         (filtersChanged)="handleFiltersChanged($event)"
       ></app-filter-controls>
 

ui/src/app/collection/detail/collection-public/collection-public.component.html

@@ -27,6 +27,13 @@
   </div>
 
   <div class="l-container">
+
+    <app-size-pagination
+      [isVisible]="isSizePaginationVisible"
+      [currentSize]="size"
+      [control]="sizeControl">
+    </app-size-pagination>
+
     <ng-template [appLoadingObservables]="[resultsLoaded]">
       <div class="t-margin-medium t-margin-bottom">
         <p class="t-visuallyHidden">Select one or more RSDs in the table, or select all in the table heading, then use the action menu to publish, archive, unarchive, or add the selected RSDs to a collection. </p>

ui/src/app/collection/detail/collection-public/collection-public.component.spec.ts

@@ -164,4 +164,17 @@ describe("CollectionPublicComponent", () => {
     expect(component.from).toEqual((13 - 1) * 50)
     expect(component.results).toEqual(expected)
   })
+
+  describe( "sizeChange", () => {
+    it("Should set size of page, from and call handlePageClicked", () => {
+      const size = 100
+      spyOn(component, "handlePageClicked").withArgs(1).and.callThrough()
+
+      component.sizeChange(size)
+
+      expect(component.from).toEqual(0)
+      expect(component.size).toEqual(size)
+      expect(component.handlePageClicked).toHaveBeenCalledTimes(1)
+    })
+  })
 })

ui/src/app/collection/detail/collection-public/collection-public.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from "@angular/core"
+import {Component, OnInit, ViewChild} from "@angular/core"
 import {ApiSearch, PaginatedSkills} from "../../../richskill/service/rich-skill-search.service"
 import {RichSkillService} from "../../../richskill/service/rich-skill.service"
 import {ActivatedRoute, Router} from "@angular/router"
@@ -10,13 +10,16 @@ import {PublishStatus} from "../../../PublishStatus"
 import {ApiCollection} from "../../ApiCollection"
 import {Title} from "@angular/platform-browser";
 import {Whitelabelled} from "../../../../whitelabel";
+import {FormControl} from "@angular/forms"
+import {SizePaginationComponent} from "../../../table/skills-library-table/size-pagination/size-pagination.component"
 
 @Component({
   selector: "app-collection-public",
   templateUrl: "./collection-public.component.html"
 })
 export class CollectionPublicComponent extends Whitelabelled implements OnInit {
 
+  @ViewChild(SizePaginationComponent) sizePagination!: SizePaginationComponent
   title = "Collection"
   uuidParam: string | null
   collection: ApiCollection | undefined
@@ -30,6 +33,7 @@ export class CollectionPublicComponent extends Whitelabelled implements OnInit {
   columnSort: ApiSortOrder = ApiSortOrder.NameAsc
 
   showLibraryEmptyMessage = false
+  sizeControl: FormControl = new FormControl(this.size)
 
   constructor(protected router: Router,
               protected skillService: RichSkillService,
@@ -39,6 +43,7 @@ export class CollectionPublicComponent extends Whitelabelled implements OnInit {
               protected titleService: Title
   ) {
     super()
+    this.sizeControl.valueChanges.subscribe(value => this.sizeChange(value))
     this.uuidParam = this.route.snapshot.paramMap.get("uuid")
   }
 
@@ -117,4 +122,15 @@ export class CollectionPublicComponent extends Whitelabelled implements OnInit {
     this.from = (newPageNo - 1) * this.size
     this.loadNextPage()
   }
+
+  sizeChange(size: number): void {
+    this.size = size
+    this.from = 0
+    this.handlePageClicked(1)
+  }
+
+  get isSizePaginationVisible(): () => boolean {
+    return () => this.totalCount > this.sizePagination?.values[0]
+  }
+
 }

ui/src/app/collection/detail/manage-collection.component.html

@@ -47,6 +47,9 @@
         </div>
 
         <app-filter-controls
+          (changeValue)="sizeChange($event)"
+          [isSizePaginationVisible]="isSizePaginationVisible"
+          [currentSize]="size"
           *ngIf="totalCount >= 0"
           [keywords]="keywords"
           [showAdvancedFilteredSearch]="showAdvancedFilteredSearch"

ui/src/app/form/form.module.ts → ui/src/app/form/osmt-form.module.ts

@@ -37,5 +37,5 @@ import {FormFieldTextArea} from "./form-field-textarea.component"
     FormFieldKeywordSearchMultiSelect
   ]
 })
-export class FormModule {
+export class OsmtFormModule {
 }

ui/src/app/richskill/list/skills-list.component.html

@@ -27,6 +27,9 @@ <h2 *ngIf="title" class="t-type-heading1 t-margin-small t-margin-bottom" tabinde
     <app-filter-controls
       [selectedFilters]="selectedFilters"
       [keywords]="keywords"
+      [currentSize]="size"
+      (changeValue)="sizeChange($event)"
+      [isSizePaginationVisible]="isSizePaginationVisible"
       (keywordsChanged)="keywordsChange($event)"
       [showAdvancedFilteredSearch]="showAdvancedFilteredSearch"
       (filtersChanged)="handleFiltersChanged($event)"

ui/src/app/richskill/list/skills-list.component.spec.ts

@@ -495,4 +495,17 @@ describe("SkillsListComponent", () => {
     ]
     expect(component["addToWorkspaceVisible"]()).toBeTrue()
   })
+
+  describe( "sizeChange", () => {
+    it("Should set size of page, from and call handlePageClicked", () => {
+      const size = 100
+      spyOn(component, "handlePageClicked").withArgs(1).and.callThrough()
+
+      component.sizeChange(size)
+
+      expect(component.from).toEqual(0)
+      expect(component.size).toEqual(size)
+      expect(component.handlePageClicked).toHaveBeenCalledTimes(1)
+    })
+  })
 })

ui/src/app/richskill/list/skills-list.component.ts

@@ -18,6 +18,7 @@ import {CollectionService} from "../../collection/service/collection.service"
 import {ApiCollection} from "../../collection/ApiCollection"
 import {CollectionPipe} from "../../pipes"
 import {FilterDropdown} from "../../models/filter-dropdown.model"
+import {FilterControlsComponent} from "../../table/filter-controls/filter-controls.component"
 
 @Component({
   selector: "app-skills-list",
@@ -32,6 +33,7 @@ export class SkillsListComponent extends QuickLinksHelper {
 
   @ViewChild("titleHeading") titleElement!: ElementRef
   @ViewChild(TableActionBarComponent) tableActionBar!: TableActionBarComponent
+  @ViewChild(FilterControlsComponent) filterControlsComponent!: FilterControlsComponent
 
 
   resultsLoaded: Observable<PaginatedSkills> | undefined
@@ -442,6 +444,12 @@ export class SkillsListComponent extends QuickLinksHelper {
     this.loadNextPage()
   }
 
+  sizeChange(size: number): void {
+    this.size = size
+    this.from = 0
+    this.handlePageClicked(1)
+  }
+
   get selectedKeywords(): any {
     const a: any = {}
     const b: any = this.keywords
@@ -453,4 +461,8 @@ export class SkillsListComponent extends QuickLinksHelper {
     return a
   }
 
+  get isSizePaginationVisible(): () => boolean {
+    return () => this.totalCount > this.filterControlsComponent?.sizePagination?.values[0]
+  }
+
 }

ui/src/app/table/filter-controls/filter-controls.component.html

@@ -19,6 +19,8 @@ <h3 class="t-visuallyHidden">Filters</h3>
         (filterChanged)="onFilterChangeArchived($event)"
       ></app-filter-choice>
     </div>
+    <app-size-pagination [isVisible]="isSizePaginationVisible" [control]="sizeControl" [currentSize]="currentSize">
+    </app-size-pagination>
     <div *ngIf="showAdvancedFilteredSearch">
       <app-filter-dropdown (applyFilter)="applyFilter($event)" [filterFg]="filterFg">
       </app-filter-dropdown>

ui/src/app/table/filter-controls/filter-controls.component.ts

@@ -1,14 +1,17 @@
-import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from "@angular/core"
+import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild} from "@angular/core"
 import {PublishStatus} from "../../PublishStatus";
 import {FilterDropdown} from "../../models/filter-dropdown.model"
-import {FormBuilder, FormGroup} from "@angular/forms"
+import {FormBuilder, FormControl, FormGroup} from "@angular/forms"
+import {SizePaginationComponent} from "../skills-library-table/size-pagination/size-pagination.component"
 
 @Component({
   selector: "app-filter-controls",
   templateUrl: "./filter-controls.component.html",
   styleUrls: ["./filter-controls.component.scss"]
 })
 export class FilterControlsComponent implements OnInit, OnChanges {
+
+  @ViewChild(SizePaginationComponent) sizePagination!: SizePaginationComponent
   @Input() selectedFilters: Set<PublishStatus> = new Set()
   @Output() keywordsChanged: EventEmitter<FilterDropdown> = new EventEmitter<FilterDropdown>()
   @Output() filtersChanged: EventEmitter<Set<PublishStatus>> = new EventEmitter<Set<PublishStatus>>()
@@ -17,11 +20,20 @@ export class FilterControlsComponent implements OnInit, OnChanges {
   filterFg: FormGroup
   @Input()
   showAdvancedFilteredSearch?: boolean
+  @Output()
+  changeValue: EventEmitter<number> = new EventEmitter()
+  sizeControl?: FormControl
+  @Input()
+  currentSize = 50
+  @Input()
+  isSizePaginationVisible: () => boolean = () => false
 
   constructor(
     protected formBuilder: FormBuilder
   ) {
     this.filterFg = this.configureFilterFg()
+    this.sizeControl = new FormControl(this.currentSize)
+    this.sizeControl.valueChanges.subscribe(value => this.changeValue.emit(value))
   }
 
   ngOnInit(): void {

ui/src/app/table/skills-library-table/size-pagination/size-pagination.component.html

@@ -0,0 +1,10 @@
+<div class="size-pagination-container" *ngIf="isVisible()">
+  <label>
+    Items per page
+  </label>
+  <select name="size-pagination" #size (change)="onValueChange(+size.value)" [ngModel]="currentSize" class="m-text">
+    <option [value]="value" *ngFor="let value of values">
+      {{value}}
+    </option>
+  </select>
+</div>

ui/src/app/table/skills-library-table/size-pagination/size-pagination.component.scss

@@ -0,0 +1,19 @@
+select {
+  width: fit-content;
+  margin-left: 20px;
+  border-radius: 8px;
+  -webkit-box-sizing: border-box;
+  background-color: var(--color-background300);
+  border: 1px solid var(--color-background500);
+  outline: 2px solid transparent;
+  outline-offset: 4px;
+  box-sizing: border-box;
+  padding: 1px 8px;
+  -webkit-appearance: menulist;
+  transition: outline var(--t-transition),outline-offset var(--t-transition),border-radius var(--t-transition),border-color var(--t-transition),background-color var(--t-transition),box-shadow var(--t-transition);
+}
+
+.size-pagination-container {
+  display: flex;
+  margin-bottom: 20px;
+}

ui/src/app/table/skills-library-table/size-pagination/size-pagination.component.spec.ts

@@ -0,0 +1,36 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing"
+
+import { SizePaginationComponent } from "./size-pagination.component"
+
+describe("SizePaginationComponent", () => {
+  let component: SizePaginationComponent
+  let fixture: ComponentFixture<SizePaginationComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SizePaginationComponent ]
+    })
+    .compileComponents()
+  })
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SizePaginationComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it("should create", () => {
+    expect(component).toBeTruthy()
+  })
+
+  it("Should call onValueChange with a param of type number", () => {
+    const param = 100
+    const onValueChangeSpy = spyOn(component, "onValueChange").withArgs(param).and.callThrough()
+
+    component.onValueChange(100);
+
+    expect(component.values).toContain(param)
+    expect(onValueChangeSpy).toHaveBeenCalled()
+    expect(typeof param).toEqual('number')
+  })
+})

ui/src/app/table/skills-library-table/size-pagination/size-pagination.component.ts

@@ -0,0 +1,23 @@
+import {Component, Input} from "@angular/core"
+import {FormControl} from "@angular/forms"
+
+@Component({
+  selector: "app-size-pagination",
+  templateUrl: "./size-pagination.component.html",
+  styleUrls: ["./size-pagination.component.scss"]
+})
+export class SizePaginationComponent {
+
+  readonly values: number[] = [50, 100, 150]
+  @Input()
+  control?: FormControl
+  @Input()
+  currentSize = 50
+  @Input()
+  isVisible: () => boolean = () => false
+
+  onValueChange(value: number): void {
+    this.control?.patchValue(value)
+  }
+
+}