From dede290a52c1aab54858eab3554dbb8ca92f8475 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Tue, 21 May 2024 13:36:12 +0300 Subject: [PATCH] [develop | DONE | MOVED]: Add browse-stakeholder-base component implemented in Irish. --- .../browse-stakeholder-base.component.ts | 113 ++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 monitor/browse-stakeholder/browse-stakeholder-base.component.ts diff --git a/monitor/browse-stakeholder/browse-stakeholder-base.component.ts b/monitor/browse-stakeholder/browse-stakeholder-base.component.ts new file mode 100644 index 00000000..4e9eb889 --- /dev/null +++ b/monitor/browse-stakeholder/browse-stakeholder-base.component.ts @@ -0,0 +1,113 @@ +import {ChangeDetectorRef, Directive, OnInit} from "@angular/core"; +import {StakeholderBaseComponent} from "../../monitor-admin/utils/stakeholder-base.component"; +import {OpenaireEntities} from "../../utils/properties/searchFields"; +import {StakeholderType} from "../entities/stakeholder"; +import {Option} from "../../sharedComponents/input/input.component"; +import {FormBuilder, FormControl} from "@angular/forms"; +import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service"; +import {HelperFunctions} from "../../utils/HelperFunctions.class"; +import {debounceTime, distinctUntilChanged} from "rxjs/operators"; + + +@Directive() +export class BrowseStakeholderBaseComponent extends StakeholderBaseComponent implements OnInit { + openaireEntities = OpenaireEntities; + stakeholderType: StakeholderType; + stakeholders: T[] = []; + filteredStakeholders: T[] = []; + showLoading: boolean = true; + isMobile: boolean = false; + + gridView: boolean = true; + sortOptions: Option[] = [ + {value: 'alphAsc', label: 'Alphabetically Asc. (A-Z)'}, + {value: 'alphDsc', label: 'Alphabetically Dsc. (Z-A)'}, + ]; + pageOptions: number[] = [10, 20, 30, 40]; + sortBy: string = null; + currentPage: number = 1; + pageSize: number = 10; + parameters = {}; + keywordControl: FormControl; + hasPublications: boolean = true; + + /* Services */ + protected layoutService: LayoutService; + protected cdr: ChangeDetectorRef; + protected fb: FormBuilder; + + constructor() { + super(); + } + + ngOnInit() { + this.keywordControl = this.fb.control(this._route.snapshot.queryParams.keyword); + this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => { + this.isMobile = isMobile; + this.cdr.detectChanges(); + })); + this.stakeholderType = this._route.snapshot.data.type; + if (!this.stakeholderType) { + this.navigateToError(); + } + this.init(); + this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(200), distinctUntilChanged()).subscribe(value => { + this.filtering(value); + if (value?.length > 0) { + this.parameters['keyword'] = value; + } else { + delete this.parameters['keyword'] + } + this._router.navigate([], {queryParams: this.parameters}); + })); + } + + init() { + this.stakeholders = []; + this.filteredStakeholders = []; + } + + protected filtering(value) { + if (!value) { + this.filteredStakeholders = this.stakeholders; + } else { + this.filteredStakeholders = this.stakeholders.filter(item => (item['name'] && item['name'].toLowerCase().includes(value.toLowerCase())) || (item['alias'] && item['alias'].toLowerCase().includes(value.toLowerCase()))); + } + this.afterStakeholdersInitialized(); + this.currentPage = 1; + } + + sortByChanged() { + switch (this.sortBy) { + case 'alphAsc': + this.stakeholders = this.stakeholders.sort((a, b) => a['name'].localeCompare(b['name'])); + break; + case 'alphDsc': + this.stakeholders = this.stakeholders.sort((a, b) => b['name'].localeCompare(a['name'])); + break; + default: + break; + } + } + + sizeChanged($event) { + this.pageSize = $event; + this.currentPage = 1; + this.afterStakeholdersInitialized(); + } + + updateCurrentPage($event) { + this.currentPage = $event.value; + HelperFunctions.scrollToId('target'); + this.afterStakeholdersInitialized(); + } + + get typeAsLabel() { + return this.stakeholderUtils.types.find(type => type.value === this.stakeholderType).label; + } + + afterStakeholdersInitialized() { + // this is a method that will be overriden from the components extending this base component, if needed + this.showLoading = false; + } +}