diff --git a/src/app/mydata/components/account-settings/account-settings.component.ts b/src/app/mydata/components/account-settings/account-settings.component.ts
index 700a11cf9..949343db5 100644
--- a/src/app/mydata/components/account-settings/account-settings.component.ts
+++ b/src/app/mydata/components/account-settings/account-settings.component.ts
@@ -1,276 +1,289 @@
-import { Component, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
-import { ProfileService } from '@mydata/services/profile.service';
-import { ActivatedRoute, Router } from '@angular/router';
-import { take } from 'rxjs/operators';
-import { MatDialog } from '@angular/material/dialog';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
-import { CommonStrings } from '@mydata/constants/strings';
-import { cloneDeep } from 'lodash-es';
-import { Constants } from '@mydata/constants';
-import { getName } from '@mydata/utils';
-import { SnackbarService } from '@mydata/services/snackbar.service';
-
-@Component({
- selector: 'app-account-settings',
- templateUrl: './account-settings.component.html',
- styleUrls: ['./account-settings.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class AccountSettingsComponent implements OnInit {
- orcid: any;
- orcidData: any;
- profileData: any;
-
-
- orcidFetchStateChangeInProgress: boolean;
- loadingHideProfile: boolean;
-
- accountSettingsTitle = $localize`:@@accountSettings:Tiliasetukset`;
-
- // Dialog variables
- showDialog: boolean;
- dialogTitle: any;
- dialogTemplate: any;
- dialogExtraContentTemplate: any;
- currentDialogActions: any[];
- disableDialogClose: boolean;
- showDataToPublish = $localize`:@@showDataToPublish:Näytä julkaistavat tiedot`;
- basicDialogActions = [
- { label: $localize`:@@close:Sulje`, primary: true, method: 'close' },
- ];
-
-
- // Delete profile variables
- deleteProfileInProgress: boolean;
- connProblemDeleteProfile: boolean;
- connectionProblemDeleteProfile = $localize`:@@connectionProblemDeleteProfile:Yhteysongelma. Profiilin poisto ei onnistu. Kokeile hetken kuluttua uudestaan....`;
- deleteProfileWait = $localize`:@@deleteProfileWait:Profiilia poistetaan, odota hetki...`;
- deleteProfileTitle = $localize`:@@removeProfileCaption:Profiilin poistaminen`;
- deleteProfileModalTitle = $localize`:@@deleteProfileModalTitle:Haluatko poistaa julkisen profiilisi?`;
- generalInfoDeleteProfile = $localize`:@@accountSettingsProfileRemovalInfo:Profiilin poistaminen tarkoittaa sitä, että julkinen profiilisi poistetaan ja ORCIDista tuomasi tiedot poistetaan. Myös kirjautumisen yhteydessä profiilityökaluun tallennetut tiedot poistetaan.`;
- deleteProfileModalText = $localize`:@@accountSettingsProfileRemovalModalText:Profiilin poistaminen tarkoittaa sitä, että julkinen profiilisi poistetaan ja ORCIDista tuomasi tiedot poistetaan. Myös kirjautumisen yhteydessä profiilityökaluun tallennetut tiedot poistetaan.`;
- deleteProfileDialogActions = [
- { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
- {
- label: $localize`:@@deleteProfile:Poista profiili`,
- primary: true,
- method: 'delete',
- },
- ];
-
- // Hide profile variables
- hideProfileInProgress: boolean;
- connProblemHideProfile: boolean;
- connectionProblemHideProfile = $localize`:@@connectionProblemHideProfile:Yhteysongelma. Profiilin piilottaminen ei onnistu. Kokeile hetken kuluttua uudestaan....`;
- hideProfileWait = $localize`:@@hideProfileWait:Profiilia piilotetaan, odota hetki...`;
-
- // HIDE PROFILE
- hideProfileTitle = $localize`:@@hideProfileCaption:Julkisen profiilin piilottaminen`;
- generalInfoHideProfile = $localize`:@@accountSettingsHideAccountInfo:Julkisen profiilin piilottaminen tarkoittaa sitä, että profiilisi piilotetaan Tiedejatutkimus.fi-palvelusta. Voit edelleen kirjautua työkaluun ja julkaista profiilisi uudestaan.`;
-
- hideProfileModalTitle = $localize`:@@hideProfileModalTitle:Haluatko piilottaa julkisen profiilisi?`;
- hideProfileModalText = $localize`:@@accountSettingsHideAccountModalText:Julkisen profiilin piilottaminen tarkoittaa sitä, että profiilisi piilotetaan Tiedejatutkimus.fi-palvelusta. Voit edelleen kirjautua työkaluun ja julkaista profiilisi uudestaan.`;
-
- // REPUBLISH PROFILE
- showProfileTitle = $localize`:@@mydata.account.title-for-hide:Julkaise piilotettu profiili`;
- showProfileText = $localize`:@@mydata.account.text-for-hide:Piilottamasi profiili julkaistaan uudestaan niillä tiedoilla, jotka olet aiemmin valinnut julkisiksi Tiedejatutkimus.fi-palveluun.`;
-
- showProfileModalTitle = $localize`:@@mydata.account.hide-modal.title:Haluatko julkaista piilottamasi profiilin?`;
- showProfileModalText = $localize`:@@mydata.account.hide-modal.text:Piilottamasi profiili julkaistaan uudestaan niillä tiedoilla, jotka olet aiemmin valinnut julkisiksi Tiedejatutkimus.fi-palveluun.`;
-
- hideProfileDialogActions = [
- { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
- {
- label: $localize`:@@hideProfile:Piilota profiili`,
- primary: true,
- method: 'hidePublicProfile',
- },
- ];
-
- showProfileDialogActions = [
- { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
- {
- label: $localize`:@@mydata.account.republish-button.text:Julkaise profiili`,
- primary: true,
- method: 'showPublicProfile',
- },
- ];
-
- // Orcid variables
- isOrcidFetchInUse = false;
- automaticOrcidFetchCaption = $localize`:@@showDataToPublish:ORCID-tietojen automaattinen päivittyminen`;
- generalInfoOrcid = $localize`:@@accountSettingsOrcidInfo:Tämä asetus lisää jatkossa ORCID-palveluun lisäämäsi tai kotiorganisaatiossasi ORCID-tunnisteeseesi liitetyt uudet tiedot automaattisesti julkiseen profiiliisi Tiedejatutkimus.fi-palvelussa.`;
- orcidFetchModalTextEnable = $localize`:@@accountSettingsOrcidModalTextEnable:ORCID-palveluun lisäämäsi tai kotiorganisaatiossasi ORCID-tunnisteeseesi liitetyt uudet tiedot päivittyvät jatkossa automaattisesti julkiseen profiiliisi Tiedejatutkimus.fi-palvelussa.`;
- orcidFetchModalTextDisable = $localize`:@@accountSettingsOrcidModalTextDisable:ORCID-palveluun lisäämäsi tai kotiorganisaatiossasi ORCID-tunnisteeseesi liitetyt uudet tiedot eivät enää päivity automaattisesti julkiseen profiiliisi Tiedejatutkimus.fi-palvelussa.`;
- disableOrcidFetchDialogActions = [
- { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
- {
- label: $localize`:@@disableOrcidDataFetch:Poista käytöstä`,
- primary: true,
- method: 'changeOrcidFetchState',
- },
- ];
-
- enableOrcidFetchDialogActions = [
- { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
- {
- label: $localize`:@@enableOrcidDataFetch:Ota käyttöön`,
- primary: true,
- method: 'changeOrcidFetchState',
- },
- ];
-
- profileVisibility$ = this.profileService.getProfileVisibility();
-
- constructor(public profileService: ProfileService, private router: Router, private route: ActivatedRoute, public dialog: MatDialog, public oidcSecurityService: OidcSecurityService, private snackbarService: SnackbarService) {
- this.profileService.initializeProfileVisibility();
- }
-
- ngOnInit(): void {
- // Get data from resolver
- const orcidProfile = this.route.snapshot.data.orcidProfile;
- this.profileData = this.route.snapshot.data.myDataProfile;
-
- this.orcidData = orcidProfile;
- this.orcid = orcidProfile.orcid;
- }
-
- openDialog(props: { template: TemplateRef; disableDialogClose: boolean; title: string; actions: ({ method: string; label: string; primary: boolean } | { method: string; label: string; primary: boolean })[] }){
- this.dialogTitle = props.title;
- this.showDialog = true;
- this.dialogTemplate = props.template;
- //this.dialogExtraContentTemplate = props.extraContentTemplate;
- this.currentDialogActions = props.actions;
- this.disableDialogClose = props.disableDialogClose;
- }
-
- doDialogAction(action: string) {
- this.dialog.closeAll();
- this.dialogTitle = '';
- this.showDialog = false;
- this.dialogTemplate = null;
-
- switch (action) {
- case 'delete': {
- this.deleteProfile();
- break;
- }
- case 'showPublicProfile': {
- this.showPublicProfile();
- break;
- }
- case 'hidePublicProfile': {
- this.hidePublicProfile();
- break;
- }
- case 'showPublicProfile': {
- this.showPublicProfile();
- }
- case 'changeOrcidFetchState': {
- this.enableOrDisableOrcidFetching();
- break;
- }
- }
- }
-
- closeDialog() {
- this.dialog.closeAll();
- this.dialogTitle = '';
- this.showDialog = false;
- this.dialogTemplate = null;
- this.deleteProfileInProgress = false;
- this.hideProfileInProgress = false;
- this.disableDialogClose = false;
- }
-
- enableOrDisableOrcidFetching() {
- this.orcidFetchStateChangeInProgress = true;
- if (this.isOrcidFetchInUse) {
- // TODO: method call and error handling here when back end implementation ready
- }
- else {
- // TODO: method call and error handling here when back end implementation ready
- }
- }
-
- async showPublicProfile() {
- await this.profileService.showProfile();
-
- try {
- this.hideProfileInProgress = true;
- await this.profileService.showProfile();
-
- this.hideProfileInProgress = false;
- this.snackbarService.show(
- $localize`:@@profilePublishedToast:Profiili julkaistu. Tiedot näkyvät muutaman minuutin kuluttua tiedejatutkimus.fi -palvelussa.`,
- 'success'
- );
- } catch (error) {
- console.error(error);
- }
- }
-
- hidePublicProfile() {
- this.hideProfileInProgress = true;
- this.connProblemHideProfile = false;
- this.profileService
- .hideProfile()
- .then(
- (value) => {
- this.hideProfileInProgress = false;
- this.dialog.closeAll();
- this.snackbarService.show(
- $localize`:@@profileHiddenToast:Profiilin piilottaminen onnistui. Profiilisi piilotetaan Tiedejatutkimus.fi -palvelusta muutaman minuutin kuluttua.`,
- 'success'
- );
- //this.reset();
- },
- (reason) => {
- this.hideProfileInProgress = false;
- this.connProblemHideProfile = true;
- },);
- }
-
-
- deleteProfile() {
- this.deleteProfileInProgress = true;
- this.connProblemDeleteProfile = false;
- this.profileService
- .deleteProfile()
- .then(
- (value) => {
- this.deleteProfileInProgress = false;
- this.dialog.closeAll();
- this.reset();
-
- // Wait for dialog to close
- setTimeout(() => {
- this.oidcSecurityService.logoff();
- }, 500);
-
- },
- (reason) => {
- this.deleteProfileInProgress = false;
- this.connProblemDeleteProfile = true;
- },);
- }
-
- /*
- * Clear draft data from storage and service
- */
- reset() {
- const currentProfileData = cloneDeep(
- this.profileService.currentProfileData
- );
-
- sessionStorage.removeItem(Constants.draftProfile);
- sessionStorage.removeItem(Constants.draftPatchPayload);
- sessionStorage.removeItem(Constants.draftPublicationPatchPayload);
- sessionStorage.removeItem(Constants.draftDatasetPatchPayload);
- sessionStorage.removeItem(Constants.draftFundingPatchPayload);
- sessionStorage.removeItem(Constants.draftCollaborationPatchPayload);
-
- this.profileData = currentProfileData;
- this.profileService.setEditorProfileName(getName(currentProfileData));
- }
-}
+import { Component, OnInit, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { ProfileService } from '@mydata/services/profile.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { take } from 'rxjs/operators';
+import { MatDialog } from '@angular/material/dialog';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { CommonStrings } from '@mydata/constants/strings';
+import { cloneDeep } from 'lodash-es';
+import { Constants } from '@mydata/constants';
+import { getName } from '@mydata/utils';
+import { SnackbarService } from '@mydata/services/snackbar.service';
+import { DialogComponent } from '../../../shared/components/dialog/dialog.component';
+import { PrimaryActionButtonComponent } from '../../../shared/components/buttons/primary-action-button/primary-action-button.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { SecondaryButtonComponent } from '../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { NgIf, AsyncPipe } from '@angular/common';
+import { BannerDividerComponent } from '@shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-account-settings',
+ templateUrl: './account-settings.component.html',
+ styleUrls: ['./account-settings.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgIf,
+ SecondaryButtonComponent,
+ MatProgressSpinner,
+ PrimaryActionButtonComponent,
+ DialogComponent,
+ AsyncPipe,
+ BannerDividerComponent
+ ]
+})
+export class AccountSettingsComponent implements OnInit {
+ orcid: any;
+ orcidData: any;
+ profileData: any;
+
+
+ orcidFetchStateChangeInProgress: boolean;
+ loadingHideProfile: boolean;
+
+ accountSettingsTitle = $localize`:@@accountSettings:Tiliasetukset`;
+
+ // Dialog variables
+ showDialog: boolean;
+ dialogTitle: any;
+ dialogTemplate: any;
+ dialogExtraContentTemplate: any;
+ currentDialogActions: any[];
+ disableDialogClose: boolean;
+ showDataToPublish = $localize`:@@showDataToPublish:Näytä julkaistavat tiedot`;
+ basicDialogActions = [
+ { label: $localize`:@@close:Sulje`, primary: true, method: 'close' },
+ ];
+
+
+ // Delete profile variables
+ deleteProfileInProgress: boolean;
+ connProblemDeleteProfile: boolean;
+ connectionProblemDeleteProfile = $localize`:@@connectionProblemDeleteProfile:Yhteysongelma. Profiilin poisto ei onnistu. Kokeile hetken kuluttua uudestaan....`;
+ deleteProfileWait = $localize`:@@deleteProfileWait:Profiilia poistetaan, odota hetki...`;
+ deleteProfileTitle = $localize`:@@removeProfileCaption:Profiilin poistaminen`;
+ deleteProfileModalTitle = $localize`:@@deleteProfileModalTitle:Haluatko poistaa julkisen profiilisi?`;
+ generalInfoDeleteProfile = $localize`:@@accountSettingsProfileRemovalInfo:Profiilin poistaminen tarkoittaa sitä, että julkinen profiilisi poistetaan ja ORCIDista tuomasi tiedot poistetaan. Myös kirjautumisen yhteydessä profiilityökaluun tallennetut tiedot poistetaan.`;
+ deleteProfileModalText = $localize`:@@accountSettingsProfileRemovalModalText:Profiilin poistaminen tarkoittaa sitä, että julkinen profiilisi poistetaan ja ORCIDista tuomasi tiedot poistetaan. Myös kirjautumisen yhteydessä profiilityökaluun tallennetut tiedot poistetaan.`;
+ deleteProfileDialogActions = [
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
+ {
+ label: $localize`:@@deleteProfile:Poista profiili`,
+ primary: true,
+ method: 'delete',
+ },
+ ];
+
+ // Hide profile variables
+ hideProfileInProgress: boolean;
+ connProblemHideProfile: boolean;
+ connectionProblemHideProfile = $localize`:@@connectionProblemHideProfile:Yhteysongelma. Profiilin piilottaminen ei onnistu. Kokeile hetken kuluttua uudestaan....`;
+ hideProfileWait = $localize`:@@hideProfileWait:Profiilia piilotetaan, odota hetki...`;
+
+ // HIDE PROFILE
+ hideProfileTitle = $localize`:@@hideProfileCaption:Julkisen profiilin piilottaminen`;
+ generalInfoHideProfile = $localize`:@@accountSettingsHideAccountInfo:Julkisen profiilin piilottaminen tarkoittaa sitä, että profiilisi piilotetaan Tiedejatutkimus.fi-palvelusta. Voit edelleen kirjautua työkaluun ja julkaista profiilisi uudestaan.`;
+
+ hideProfileModalTitle = $localize`:@@hideProfileModalTitle:Haluatko piilottaa julkisen profiilisi?`;
+ hideProfileModalText = $localize`:@@accountSettingsHideAccountModalText:Julkisen profiilin piilottaminen tarkoittaa sitä, että profiilisi piilotetaan Tiedejatutkimus.fi-palvelusta. Voit edelleen kirjautua työkaluun ja julkaista profiilisi uudestaan.`;
+
+ // REPUBLISH PROFILE
+ showProfileTitle = $localize`:@@mydata.account.title-for-hide:Julkaise piilotettu profiili`;
+ showProfileText = $localize`:@@mydata.account.text-for-hide:Piilottamasi profiili julkaistaan uudestaan niillä tiedoilla, jotka olet aiemmin valinnut julkisiksi Tiedejatutkimus.fi-palveluun.`;
+
+ showProfileModalTitle = $localize`:@@mydata.account.hide-modal.title:Haluatko julkaista piilottamasi profiilin?`;
+ showProfileModalText = $localize`:@@mydata.account.hide-modal.text:Piilottamasi profiili julkaistaan uudestaan niillä tiedoilla, jotka olet aiemmin valinnut julkisiksi Tiedejatutkimus.fi-palveluun.`;
+
+ hideProfileDialogActions = [
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
+ {
+ label: $localize`:@@hideProfile:Piilota profiili`,
+ primary: true,
+ method: 'hidePublicProfile',
+ },
+ ];
+
+ showProfileDialogActions = [
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
+ {
+ label: $localize`:@@mydata.account.republish-button.text:Julkaise profiili`,
+ primary: true,
+ method: 'showPublicProfile',
+ },
+ ];
+
+ // Orcid variables
+ isOrcidFetchInUse = false;
+ automaticOrcidFetchCaption = $localize`:@@showDataToPublish:ORCID-tietojen automaattinen päivittyminen`;
+ generalInfoOrcid = $localize`:@@accountSettingsOrcidInfo:Tämä asetus lisää jatkossa ORCID-palveluun lisäämäsi tai kotiorganisaatiossasi ORCID-tunnisteeseesi liitetyt uudet tiedot automaattisesti julkiseen profiiliisi Tiedejatutkimus.fi-palvelussa.`;
+ orcidFetchModalTextEnable = $localize`:@@accountSettingsOrcidModalTextEnable:ORCID-palveluun lisäämäsi tai kotiorganisaatiossasi ORCID-tunnisteeseesi liitetyt uudet tiedot päivittyvät jatkossa automaattisesti julkiseen profiiliisi Tiedejatutkimus.fi-palvelussa.`;
+ orcidFetchModalTextDisable = $localize`:@@accountSettingsOrcidModalTextDisable:ORCID-palveluun lisäämäsi tai kotiorganisaatiossasi ORCID-tunnisteeseesi liitetyt uudet tiedot eivät enää päivity automaattisesti julkiseen profiiliisi Tiedejatutkimus.fi-palvelussa.`;
+ disableOrcidFetchDialogActions = [
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
+ {
+ label: $localize`:@@disableOrcidDataFetch:Poista käytöstä`,
+ primary: true,
+ method: 'changeOrcidFetchState',
+ },
+ ];
+
+ enableOrcidFetchDialogActions = [
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
+ {
+ label: $localize`:@@enableOrcidDataFetch:Ota käyttöön`,
+ primary: true,
+ method: 'changeOrcidFetchState',
+ },
+ ];
+
+ profileVisibility$ = this.profileService.getProfileVisibility();
+
+ constructor(public profileService: ProfileService, private router: Router, private route: ActivatedRoute, public dialog: MatDialog, public oidcSecurityService: OidcSecurityService, private snackbarService: SnackbarService) {
+ this.profileService.initializeProfileVisibility();
+ }
+
+ ngOnInit(): void {
+ // Get data from resolver
+ const orcidProfile = this.route.snapshot.data.orcidProfile;
+ this.profileData = this.route.snapshot.data.myDataProfile;
+
+ this.orcidData = orcidProfile;
+ this.orcid = orcidProfile.orcid;
+ }
+
+ openDialog(props: { template: TemplateRef; disableDialogClose: boolean; title: string; actions: ({ method: string; label: string; primary: boolean } | { method: string; label: string; primary: boolean })[] }){
+ this.dialogTitle = props.title;
+ this.showDialog = true;
+ this.dialogTemplate = props.template;
+ //this.dialogExtraContentTemplate = props.extraContentTemplate;
+ this.currentDialogActions = props.actions;
+ this.disableDialogClose = props.disableDialogClose;
+ }
+
+ doDialogAction(action: string) {
+ this.dialog.closeAll();
+ this.dialogTitle = '';
+ this.showDialog = false;
+ this.dialogTemplate = null;
+
+ switch (action) {
+ case 'delete': {
+ this.deleteProfile();
+ break;
+ }
+ case 'showPublicProfile': {
+ this.showPublicProfile();
+ break;
+ }
+ case 'hidePublicProfile': {
+ this.hidePublicProfile();
+ break;
+ }
+ case 'changeOrcidFetchState': {
+ this.enableOrDisableOrcidFetching();
+ break;
+ }
+ }
+ }
+
+ closeDialog() {
+ this.dialog.closeAll();
+ this.dialogTitle = '';
+ this.showDialog = false;
+ this.dialogTemplate = null;
+ this.deleteProfileInProgress = false;
+ this.hideProfileInProgress = false;
+ this.disableDialogClose = false;
+ }
+
+ enableOrDisableOrcidFetching() {
+ this.orcidFetchStateChangeInProgress = true;
+ if (this.isOrcidFetchInUse) {
+ // TODO: method call and error handling here when back end implementation ready
+ }
+ else {
+ // TODO: method call and error handling here when back end implementation ready
+ }
+ }
+
+ async showPublicProfile() {
+ await this.profileService.showProfile();
+
+ try {
+ this.hideProfileInProgress = true;
+ await this.profileService.showProfile();
+
+ this.hideProfileInProgress = false;
+ this.snackbarService.show(
+ $localize`:@@profilePublishedToast:Profiili julkaistu. Tiedot näkyvät muutaman minuutin kuluttua tiedejatutkimus.fi -palvelussa.`,
+ 'success'
+ );
+ } catch (error) {
+ console.error(error);
+ }
+ }
+
+ hidePublicProfile() {
+ this.hideProfileInProgress = true;
+ this.connProblemHideProfile = false;
+ this.profileService
+ .hideProfile()
+ .then(
+ (value) => {
+ this.hideProfileInProgress = false;
+ this.dialog.closeAll();
+ this.snackbarService.show(
+ $localize`:@@profileHiddenToast:Profiilin piilottaminen onnistui. Profiilisi piilotetaan Tiedejatutkimus.fi -palvelusta muutaman minuutin kuluttua.`,
+ 'success'
+ );
+ //this.reset();
+ },
+ (reason) => {
+ this.hideProfileInProgress = false;
+ this.connProblemHideProfile = true;
+ },);
+ }
+
+
+ deleteProfile() {
+ this.deleteProfileInProgress = true;
+ this.connProblemDeleteProfile = false;
+ this.profileService
+ .deleteProfile()
+ .then(
+ (value) => {
+ this.deleteProfileInProgress = false;
+ this.dialog.closeAll();
+ this.reset();
+
+ // Wait for dialog to close
+ setTimeout(() => {
+ this.oidcSecurityService.logoff();
+ }, 500);
+
+ },
+ (reason) => {
+ this.deleteProfileInProgress = false;
+ this.connProblemDeleteProfile = true;
+ },);
+ }
+
+ /*
+ * Clear draft data from storage and service
+ */
+ reset() {
+ const currentProfileData = cloneDeep(
+ this.profileService.currentProfileData
+ );
+
+ sessionStorage.removeItem(Constants.draftProfile);
+ sessionStorage.removeItem(Constants.draftPatchPayload);
+ sessionStorage.removeItem(Constants.draftPublicationPatchPayload);
+ sessionStorage.removeItem(Constants.draftDatasetPatchPayload);
+ sessionStorage.removeItem(Constants.draftFundingPatchPayload);
+ sessionStorage.removeItem(Constants.draftCollaborationPatchPayload);
+
+ this.profileData = currentProfileData;
+ this.profileService.setEditorProfileName(getName(currentProfileData));
+ }
+}
diff --git a/src/app/mydata/components/home/home.component.html b/src/app/mydata/components/home/home.component.html
index 4e16802f4..a877d6cea 100644
--- a/src/app/mydata/components/home/home.component.html
+++ b/src/app/mydata/components/home/home.component.html
@@ -3,6 +3,8 @@
:author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
:license: MIT -->
+
diff --git a/src/app/mydata/components/home/home.component.ts b/src/app/mydata/components/home/home.component.ts
index 77aa6d6b4..81dfc2c0e 100644
--- a/src/app/mydata/components/home/home.component.ts
+++ b/src/app/mydata/components/home/home.component.ts
@@ -1,66 +1,76 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit } from '@angular/core';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { UtilityService } from '@shared/services/utility.service';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
-import { Router } from '@angular/router';
-import { NotificationService } from '@shared/services/notification.service';
-import { DialogEventsService } from '@shared/services/dialog-events.service';
-
-
-@Component({
- selector: 'app-home',
- templateUrl: './home.component.html',
- styleUrls: ['./home.component.scss'],
-})
-export class HomeComponent implements OnInit {
- title = $localize`:@@home:Etusivu`;
- homeWelcomeCaption = $localize`:@@homeWelcomeCaption:Kokoa tiedoistasi julkinen profiili Tiedejatutkimus.fi-palveluun`;
- homeWelcomeText = $localize`:@@homeWelcomeText:Tutkijan tiedot -työkalun avulla yhdistelet julkisen profiilin Tiedejatutkimus.fi -palveluun ORCID-palvelun sisältämistä sekä kotiorganisaatiostasi peräisin olevista tiedoistasi. Työkalussa voit esikatsella tietoja ennen niiden julkaisua ja valita profiiliisi vain ne tiedot, jotka haluat osaksi profiiliasi.`;
- alreadyCreatedProfile = $localize`:@@alreadyCreatedProfile:Oletko jo luonut profiilin tähän palveluun?`;
- additionalInfoText = $localize`:@@additionalInfo:Lisätietoa` + ':';
-
- suomiFiAutheticationProblemSnackbarText = $localize`:@@suomiFiAutheticationProblemSnackbarText:Osalla käyttäjistä on ilmennyt virhetilanne Suomi.fi-tunnistautumisen jälkeen, joka estää pääsyn profiilin luontiin. Mikäli virhetilanne ilmenee, kirjautumista pääsee jatkamaan klikkaamalla "Kirjaudu sisään" -painiketta sivun ylälaidassa.`;
-
- locale: string;
-
- constructor(
- public oidcSecurityService: OidcSecurityService,
- private utilityService: UtilityService,
- private appSettingsService: AppSettingsService,
- private router: Router,
- private notificationService: NotificationService,
- private dialogEventsService: DialogEventsService
- ) {}
-
- ngOnInit() {
- this.utilityService.setMyDataTitle(this.title);
- this.locale = this.appSettingsService.currentLocale;
-
- // BANNER THAT WAS USED TO INFORM USERS REGARDING THE PROBLEM WITH SUOMI.FI AUTHENTICATION
- /*this.notificationService.notify({
- notificationText: this.suomiFiAutheticationProblemSnackbarText,
- buttons: [
- {
- label: $localize`:@@close:Sulje`,
- action: () => this.notificationService.clearNotification(),
- },
- ],
- });*/
-
- }
-
- login() {
- this.oidcSecurityService.authorize();
- }
-
- showWelcomeModal() {
- this.dialogEventsService.setQuickstartState(true);
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnInit } from '@angular/core';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { UtilityService } from '@shared/services/utility.service';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { Router, RouterLink } from '@angular/router';
+import { NotificationService } from '@shared/services/notification.service';
+import { DialogEventsService } from '@shared/services/dialog-events.service';
+import { SecondaryButtonComponent } from '../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { PrimaryActionButtonComponent } from '../../../shared/components/buttons/primary-action-button/primary-action-button.component';
+import { BannerDividerComponent } from '@shared/components/banner-divider/banner-divider.component';
+
+
+@Component({
+ selector: 'app-home',
+ templateUrl: './home.component.html',
+ styleUrls: ['./home.component.scss'],
+ standalone: true,
+ imports: [
+ PrimaryActionButtonComponent,
+ RouterLink,
+ SecondaryButtonComponent,
+ BannerDividerComponent
+ ]
+})
+export class HomeComponent implements OnInit {
+ title = $localize`:@@home:Etusivu`;
+ homeWelcomeCaption = $localize`:@@homeWelcomeCaption:Kokoa tiedoistasi julkinen profiili Tiedejatutkimus.fi-palveluun`;
+ homeWelcomeText = $localize`:@@homeWelcomeText:Tutkijan tiedot -työkalun avulla yhdistelet julkisen profiilin Tiedejatutkimus.fi -palveluun ORCID-palvelun sisältämistä sekä kotiorganisaatiostasi peräisin olevista tiedoistasi. Työkalussa voit esikatsella tietoja ennen niiden julkaisua ja valita profiiliisi vain ne tiedot, jotka haluat osaksi profiiliasi.`;
+ alreadyCreatedProfile = $localize`:@@alreadyCreatedProfile:Oletko jo luonut profiilin tähän palveluun?`;
+ additionalInfoText = $localize`:@@additionalInfo:Lisätietoa` + ':';
+
+ suomiFiAutheticationProblemSnackbarText = $localize`:@@suomiFiAutheticationProblemSnackbarText:Osalla käyttäjistä on ilmennyt virhetilanne Suomi.fi-tunnistautumisen jälkeen, joka estää pääsyn profiilin luontiin. Mikäli virhetilanne ilmenee, kirjautumista pääsee jatkamaan klikkaamalla "Kirjaudu sisään" -painiketta sivun ylälaidassa.`;
+
+ locale: string;
+
+ constructor(
+ public oidcSecurityService: OidcSecurityService,
+ private utilityService: UtilityService,
+ private appSettingsService: AppSettingsService,
+ private router: Router,
+ private notificationService: NotificationService,
+ private dialogEventsService: DialogEventsService
+ ) {}
+
+ ngOnInit() {
+ this.utilityService.setMyDataTitle(this.title);
+ this.locale = this.appSettingsService.currentLocale;
+
+ // BANNER THAT WAS USED TO INFORM USERS REGARDING THE PROBLEM WITH SUOMI.FI AUTHENTICATION
+ /*this.notificationService.notify({
+ notificationText: this.suomiFiAutheticationProblemSnackbarText,
+ buttons: [
+ {
+ label: $localize`:@@close:Sulje`,
+ action: () => this.notificationService.clearNotification(),
+ },
+ ],
+ });*/
+
+ }
+
+ login() {
+ this.oidcSecurityService.authorize();
+ }
+
+ showWelcomeModal() {
+ this.dialogEventsService.setQuickstartState(true);
+ }
+}
diff --git a/src/app/mydata/components/login/login.component.html b/src/app/mydata/components/login/login.component.html
deleted file mode 100644
index 88b73e849..000000000
--- a/src/app/mydata/components/login/login.component.html
+++ /dev/null
@@ -1,122 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/app/mydata/components/login/login.component.scss b/src/app/mydata/components/login/login.component.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/mydata/components/login/login.component.ts b/src/app/mydata/components/login/login.component.ts
deleted file mode 100644
index 2616c4069..000000000
--- a/src/app/mydata/components/login/login.component.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { UtilityService } from '@shared/services/utility.service';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
-
-@Component({
- selector: 'app-login',
- templateUrl: './login.component.html',
- styleUrls: ['./login.component.scss'],
-})
-export class LoginComponent implements OnInit {
- title = $localize`:@@serviceDeployment:Profiilityökalun käyttöönotto - Tutkijan tiedot`;
- textContent: string;
- locale: string;
- loginStep = 1;
-
- constructor(
- public oidcSecurityService: OidcSecurityService,
- private utilityService: UtilityService,
- private route: ActivatedRoute,
- private appSettingsService: AppSettingsService
- ) {
- this.locale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- // Get page content from CMS data
- this.textContent = this.route.snapshot.data.pages.find(
- (page) => page.id === 'mydata_create_profile'
- )['content' + this.locale];
-
- this.utilityService.setMyDataTitle(this.title);
- }
-
- login() {
- this.oidcSecurityService.authorize();
- }
-
- logout() {
- this.oidcSecurityService.logoff();
- }
-}
diff --git a/src/app/mydata/components/mydata-beta-info/mydata-beta-info.component.ts b/src/app/mydata/components/mydata-beta-info/mydata-beta-info.component.ts
index e5d447336..661b69f56 100644
--- a/src/app/mydata/components/mydata-beta-info/mydata-beta-info.component.ts
+++ b/src/app/mydata/components/mydata-beta-info/mydata-beta-info.component.ts
@@ -1,42 +1,50 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, OnInit, TemplateRef } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, OnInit, TemplateRef } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { MatButton } from '@angular/material/button';
+import { NgClass, NgIf } from '@angular/common';
+
@Component({
- selector: 'app-mydata-beta-info',
- templateUrl: './mydata-beta-info.component.html',
- styleUrls: ['./mydata-beta-info.component.scss'],
-})
-export class MydataBetaInfoComponent implements OnInit {
- @Input() template: TemplateRef;
- @Input() showCloseButton: boolean;
-
- open = true;
- appSettings: any;
- textContent: string;
-
- constructor(
- public appSettingsService: AppSettingsService,
- private route: ActivatedRoute
- ) {}
-
- ngOnInit(): void {
- this.appSettings = this.appSettingsService.myDataSettings;
-
- // Get localized text content from CMS
- this.textContent = this.route.snapshot.data.pages.find(
- (item) => item.id === 'mydata_beta_text'
- )['content' + this.appSettingsService.capitalizedLocale];
- }
-
- toggle() {
- this.open = !this.open;
- }
-}
+ selector: 'app-mydata-beta-info',
+ templateUrl: './mydata-beta-info.component.html',
+ styleUrls: ['./mydata-beta-info.component.scss'],
+ standalone: true,
+ imports: [
+ NgClass,
+ NgIf,
+ MatButton,
+ ],
+})
+export class MydataBetaInfoComponent implements OnInit {
+ @Input() template: TemplateRef;
+ @Input() showCloseButton: boolean;
+
+ open = true;
+ appSettings: any;
+ textContent: string;
+
+ constructor(
+ public appSettingsService: AppSettingsService,
+ private route: ActivatedRoute
+ ) {}
+
+ ngOnInit(): void {
+ this.appSettings = this.appSettingsService.myDataSettings;
+
+ // Get localized text content from CMS
+ this.textContent = this.route.snapshot.data.pages.find(
+ (item) => item.id === 'mydata_beta_text'
+ )['content' + this.appSettingsService.capitalizedLocale];
+ }
+
+ toggle() {
+ this.open = !this.open;
+ }
+}
diff --git a/src/app/mydata/components/mydata-terms/mydata-terms.component.html b/src/app/mydata/components/mydata-terms/mydata-terms.component.html
index 93e6f091d..876e02e10 100644
--- a/src/app/mydata/components/mydata-terms/mydata-terms.component.html
+++ b/src/app/mydata/components/mydata-terms/mydata-terms.component.html
@@ -3,6 +3,8 @@
:author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
:license: MIT -->
+
-
-
-
-
-
- {{ title }}
-
-
-
-
-
-
-
-
-
-
-
-
-
- - Tutkijan tiedot -työkalun käyttöehdot -
-
-
-
-
- Olen lukenut palvelun käyttöehdot, ja hyväksyn ne
-
-
-
-
- - Henkilötietojen käsittely -
-
-
-
-
- Hyväksyn henkilötietojeni käsittelyn
-
-
-
-
-
- {
- const data = pageData.find((page) => page.id === id);
-
- this.utilityService.setMyDataTitle(data['title' + this.currentLocale]);
- this.content = data['content' + this.currentLocale];
- };
-
- switch (this.id) {
- case 'terms': {
- getPageData('mydata_terms_of_use');
- break;
- }
- case 'privacy': {
- getPageData('mydata_privacy_policy');
- break;
- }
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { UtilityService } from '@shared/services/utility.service';
+import { SanitizeHtmlPipe } from '../../../shared/pipes/sanitize-html.pipe';
+import { NgIf } from '@angular/common';
+import { BannerDividerComponent } from '@shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-mydata-terms',
+ templateUrl: './mydata-terms.component.html',
+ standalone: true,
+ imports: [NgIf, SanitizeHtmlPipe, BannerDividerComponent]
+})
+
+/*
+ * This component renders content for Terms and Privacy pages.
+ * Text content is handled in CMS.
+ */
+export class MyDataTerms implements OnInit {
+ @Input() id: string;
+
+ currentLocale: string;
+ content: string;
+ path: string;
+
+ constructor(
+ private route: ActivatedRoute,
+ private appSettingsService: AppSettingsService,
+ private utilityService: UtilityService
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit() {
+ this.path = this.route.snapshot.routeConfig.path;
+
+ if (this.path !== 'service-deployment') {
+ this.id = this.path;
+ }
+
+ // Get text content from CMS
+ const pageData = this.route.snapshot.data.pages;
+
+ const getPageData = (id: string): void => {
+ const data = pageData.find((page) => page.id === id);
+
+ this.utilityService.setMyDataTitle(data['title' + this.currentLocale]);
+ this.content = data['content' + this.currentLocale];
+ };
+
+ switch (this.id) {
+ case 'terms': {
+ getPageData('mydata_terms_of_use');
+ break;
+ }
+ case 'privacy': {
+ getPageData('mydata_privacy_policy');
+ break;
+ }
+ }
+ }
+}
diff --git a/src/app/mydata/components/not-found/not-found.component.ts b/src/app/mydata/components/not-found/not-found.component.ts
index 31f75f789..8d61e2599 100644
--- a/src/app/mydata/components/not-found/not-found.component.ts
+++ b/src/app/mydata/components/not-found/not-found.component.ts
@@ -1,16 +1,17 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component } from '@angular/core';
+
@Component({
- selector: 'app-not-found',
- templateUrl: './not-found.component.html',
-})
-export class NotFoundComponent {
- constructor() {}
-}
+ selector: 'app-not-found',
+ templateUrl: './not-found.component.html',
+ standalone: true,
+})
+export class NotFoundComponent {
+ constructor() {}
+}
diff --git a/src/app/mydata/components/profile/cards/collaboration-card/collaboration-card.component.html b/src/app/mydata/components/profile/cards/collaboration-card/collaboration-card.component.html
index b386782ad..1541857d5 100644
--- a/src/app/mydata/components/profile/cards/collaboration-card/collaboration-card.component.html
+++ b/src/app/mydata/components/profile/cards/collaboration-card/collaboration-card.component.html
@@ -15,6 +15,7 @@
>
+
{
- const options = response?.data;
-
- this.originalCollaborationOptions = options;
-
- this.setInitialValue(options);
-
- // Render selections from storage if draft available
- const draft = sessionStorage.getItem(
- Constants.draftCollaborationPatchPayload
- );
-
- const draftOptions = draft && JSON.parse(draft);
-
- if (draftOptions) {
- for (const [i, option] of options.entries()) {
- const match = draftOptions.find(
- (draftOption) => option.id === draftOption.id
- );
-
- if (match) {
- options[i].selected = match.selected;
- }
- }
- }
-
- this.collaborationOptions = options;
-
- this.checkForSelection();
- });
- }
-
- private setInitialValue(options) {
- this.collaborationsService.setInitialValue(cloneDeep(options));
- }
-
- public resetInitialValue() {
- this.collaborationOptions = cloneDeep(
- this.collaborationsService.initialValue
- );
-
- this.checkForSelection();
- }
-
- openDialog() {
- this.showDialog = true;
- }
-
- doDialogAction(action: string) {
- this.dialog.closeAll();
- this.showDialog = false;
-
- if (action) {
- this.optionsToggled.forEach((option) => {
- const match = this.collaborationOptions.findIndex(
- (item) => item.id === option.id
- );
-
- this.collaborationOptions[match].selected = option.selected;
- });
-
- this.collaborationsService.addToPayload(this.optionsToggled);
- }
-
- this.checkForSelection();
- this.optionsToggled = [];
- }
-
- toggleOption(i, event) {
- const selectedOption = this.collaborationOptions[i];
-
- // Check if selection differs from options saved in profile.
- // Add to payload if new selection.
- if (selectedOption.selected === event.checked) {
- this.optionsToggled = this.optionsToggled.filter(
- (option) => option.id !== selectedOption.id
- );
- } else {
- this.optionsToggled.push({
- ...selectedOption,
- selected: event.checked,
- });
- }
- }
-
- private checkForSelection() {
- this.hasCheckedOption = !!this.collaborationOptions.find(
- (option) => option.selected
- );
- }
-
- ngOnDestroy(): void {
- this.collaborationOptionsSub?.unsubscribe();
- }
-}
+ selector: 'app-collaboration-card',
+ templateUrl: './collaboration-card.component.html',
+ styleUrls: ['./collaboration-card.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ ProfileEditorCardHeaderComponent,
+ NgIf,
+ EmptyCardComponent,
+ NgFor,
+ MatCheckbox,
+ DialogComponent,
+ ],
+})
+export class CollaborationCardComponent implements OnInit, OnDestroy {
+ @Input() label: string;
+
+ originalCollaborationOptions;
+ collaborationOptions = [];
+ showDialog: boolean;
+ hasCheckedOption: boolean;
+
+ dialogActions = [
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'cancel' },
+ { label: $localize`:@@continue:Jatka`, primary: true, method: 'save' },
+ ];
+ optionsToggled = [];
+ nameLocale = '';
+
+ collaborationOptionsSub: Subscription;
+
+ constructor(
+ private dialog: MatDialog,
+ private collaborationsService: CollaborationsService,
+ private appSettingsService: AppSettingsService
+ ) {}
+
+ ngOnInit(): void {
+ this.nameLocale = 'name' + this.appSettingsService.capitalizedLocale;
+
+ this.fetchCollaborationChoices();
+ }
+
+ private fetchCollaborationChoices() {
+ this.collaborationOptionsSub = this.collaborationsService
+ .getCooperationChoices()
+ .pipe(take(1))
+ .subscribe((response: any) => {
+ const options = response?.data;
+
+ this.originalCollaborationOptions = options;
+
+ this.setInitialValue(options);
+
+ // Render selections from storage if draft available
+ const draft = sessionStorage.getItem(
+ Constants.draftCollaborationPatchPayload
+ );
+
+ const draftOptions = draft && JSON.parse(draft);
+
+ if (draftOptions) {
+ for (const [i, option] of options.entries()) {
+ const match = draftOptions.find(
+ (draftOption) => option.id === draftOption.id
+ );
+
+ if (match) {
+ options[i].selected = match.selected;
+ }
+ }
+ }
+
+ this.collaborationOptions = options;
+
+ this.checkForSelection();
+ });
+ }
+
+ private setInitialValue(options) {
+ this.collaborationsService.setInitialValue(cloneDeep(options));
+ }
+
+ public resetInitialValue() {
+ this.collaborationOptions = cloneDeep(
+ this.collaborationsService.initialValue
+ );
+
+ this.checkForSelection();
+ }
+
+ openDialog() {
+ this.showDialog = true;
+ }
+
+ doDialogAction(action: string) {
+ this.dialog.closeAll();
+ this.showDialog = false;
+
+ if (action) {
+ this.optionsToggled.forEach((option) => {
+ const match = this.collaborationOptions.findIndex(
+ (item) => item.id === option.id
+ );
+
+ this.collaborationOptions[match].selected = option.selected;
+ });
+
+ this.collaborationsService.addToPayload(this.optionsToggled);
+ }
+
+ this.checkForSelection();
+ this.optionsToggled = [];
+ }
+
+ toggleOption(i, event) {
+ const selectedOption = this.collaborationOptions[i];
+
+ // Check if selection differs from options saved in profile.
+ // Add to payload if new selection.
+ if (selectedOption.selected === event.checked) {
+ this.optionsToggled = this.optionsToggled.filter(
+ (option) => option.id !== selectedOption.id
+ );
+ } else {
+ this.optionsToggled.push({
+ ...selectedOption,
+ selected: event.checked,
+ });
+ }
+ }
+
+ private checkForSelection() {
+ this.hasCheckedOption = !!this.collaborationOptions.find(
+ (option) => option.selected
+ );
+ }
+
+ ngOnDestroy(): void {
+ this.collaborationOptionsSub?.unsubscribe();
+ }
+}
diff --git a/src/app/mydata/components/profile/cards/contact-card/contact-card.component.html b/src/app/mydata/components/profile/cards/contact-card/contact-card.component.html
index 3b04fb5fa..197edc422 100644
--- a/src/app/mydata/components/profile/cards/contact-card/contact-card.component.html
+++ b/src/app/mydata/components/profile/cards/contact-card/contact-card.component.html
@@ -88,10 +88,12 @@
-
+
>
diff --git a/src/app/mydata/components/profile/cards/contact-card/contact-card.component.ts b/src/app/mydata/components/profile/cards/contact-card/contact-card.component.ts
index 272fa33c3..a319dce89 100644
--- a/src/app/mydata/components/profile/cards/contact-card/contact-card.component.ts
+++ b/src/app/mydata/components/profile/cards/contact-card/contact-card.component.ts
@@ -1,143 +1,168 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, OnChanges, OnInit } from '@angular/core';
-import { DraftService } from '@mydata/services/draft.service';
-import { SnackbarService } from '@mydata/services/snackbar.service';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { PatchService } from '@mydata/services/patch.service';
-import { cloneDeep } from 'lodash-es';
-import { Constants } from '@mydata/constants/';
-import { checkGroupSelected } from '@mydata/utils';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
-import { ProfileService } from '@mydata/services/profile.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, OnChanges, OnInit } from '@angular/core';
+import { DraftService } from '@mydata/services/draft.service';
+import { SnackbarService } from '@mydata/services/snackbar.service';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { PatchService } from '@mydata/services/patch.service';
+import { cloneDeep } from 'lodash-es';
+import { Constants } from '@mydata/constants/';
+import { checkGroupSelected } from '@mydata/utils';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { ProfileService } from '@mydata/services/profile.service';
import { ActivatedRoute } from '@angular/router';
-
+import { HasSelectedItemsPipe } from '../../../../pipes/has-selected-items.pipe';
+import { JoinAllGroupItemsPipe } from '../../../../pipes/join-all-group-items.pipe';
+import { FilterPipe } from '../../../../pipes/filter.pipe';
+import { EditorModalComponent } from '../../editor-modal/editor-modal.component';
+import { PanelArrayItemComponent } from '../../profile-panel/panel-array-item/panel-array-item.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { EmptyCardComponent } from '../empty-card/empty-card.component';
+import { NgIf, NgFor, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import { ProfileEditorCardHeaderComponent } from '../profile-editor-card-header/profile-editor-card-header.component';
+
@Component({
- selector: 'app-contact-card',
- templateUrl: './contact-card.component.html',
-})
-export class ContactCardComponent implements OnInit, OnChanges {
- @Input() data: any;
- @Input() label: string;
-
- fieldTypes = FieldTypes;
- checkGroupSelected = checkGroupSelected;
- contactFields: any;
-
- showDialog: boolean;
- dialogData: any;
- myDataProfile: any;
- publishedFullname: string;
- publishedFullnameLabel: string;
-
- constructor(
- private appSettingsService: AppSettingsService,
- private patchService: PatchService,
- private snackbarService: SnackbarService,
- private draftService: DraftService,
- public profileService: ProfileService,
- private route: ActivatedRoute,
- ) {}
-
-
- ngOnInit(): void {
- this.myDataProfile = this.route.snapshot.data.myDataProfile;
- }
-
- ngOnChanges(): void {
- this.contactFields = this.data[0].fields;
- this.myDataProfile = this.route.snapshot.data.myDataProfile;
- this.publishedFullname = null;
- //this.setVisibleNameById(null);
- }
-
- openDialog(event: MouseEvent) {
- this.showDialog = true;
- this.dialogData = { data: cloneDeep(this.data[0]), trigger: event.detail };
- }
-
- setVisibleNameById(metaId: number) {
- // Without id, sets current name from profile
- if (this.myDataProfile) {
- this.publishedFullname = this.myDataProfile.profileData.filter(
- item => item.id === 'contact')[0].fields.filter(
- item => {
- if (item.id === 'name') {
- this.publishedFullnameLabel = item.label;
- return true;
- }
- }
- )[0].items.filter(
- item => {
- if (metaId) {
- return item.itemMeta.id === metaId;
- } else {
- return item.itemMeta.show === true;
- }
- })[0].fullName;
- if (metaId) {
- this.profileService.setEditorProfileName(this.publishedFullname);
- }
- }
- }
-
- handleChanges(result) {
- this.showDialog = false;
-
- const confirmedPayLoad = this.patchService.confirmedPayLoad;
- if (this.appSettingsService.isBrowser) {
- if (result) {
- // Set primary name to profile header
- if (
- confirmedPayLoad.find(
- (item) => item.type === FieldTypes.personName
- )
- ) {
- const selectedNameId = confirmedPayLoad.find(
- (item) =>
- item.show && item.type === this.fieldTypes.personName
- ).id;
- this.setVisibleNameById(selectedNameId);
- }
-
- // Update card & summary data with selection
- this.contactFields = result.fields;
- this.data[0] = result;
-
- this.draftService.saveDraft(this.data);
-
- // Do actions only if user has made changes
- if (confirmedPayLoad.length) {
- this.snackbarService.show(
- $localize`:@@draftUpdated:Luonnos päivitetty`,
- 'success'
- );
- }
-
- if (confirmedPayLoad.length) {
- // Set draft profile data to storage
- sessionStorage.setItem(
- Constants.draftProfile,
- JSON.stringify(this.data)
- );
- }
- }
-
- // Set patch payload to store
- sessionStorage.setItem(
- Constants.draftPatchPayload,
- JSON.stringify(this.patchService.confirmedPayLoad)
- );
- }
- }
-
- filterNameField(fields) {
- // Filter out name field which is rendered in profile heading
- return fields.filter((field) => field.id !== 'name');
- }
-}
+ selector: 'app-contact-card',
+ templateUrl: './contact-card.component.html',
+ standalone: true,
+ imports: [
+ ProfileEditorCardHeaderComponent,
+ NgIf,
+ EmptyCardComponent,
+ NgFor,
+ NgSwitch,
+ NgSwitchCase,
+ NgSwitchDefault,
+ FontAwesomeModule,
+ PanelArrayItemComponent,
+ EditorModalComponent,
+ FilterPipe,
+ JoinAllGroupItemsPipe,
+ HasSelectedItemsPipe,
+ ],
+})
+export class ContactCardComponent implements OnInit, OnChanges {
+ @Input() data: any;
+ @Input() label: string;
+
+ fieldTypes = FieldTypes;
+ checkGroupSelected = checkGroupSelected;
+ contactFields: any;
+
+ showDialog: boolean;
+ dialogData: any;
+ myDataProfile: any;
+ publishedFullname: string;
+ publishedFullnameLabel: string;
+
+ constructor(
+ private appSettingsService: AppSettingsService,
+ private patchService: PatchService,
+ private snackbarService: SnackbarService,
+ private draftService: DraftService,
+ public profileService: ProfileService,
+ private route: ActivatedRoute,
+ ) {}
+
+
+ ngOnInit(): void {
+ this.myDataProfile = this.route.snapshot.data.myDataProfile;
+ }
+
+ ngOnChanges(): void {
+ this.contactFields = this.data[0].fields;
+ this.myDataProfile = this.route.snapshot.data.myDataProfile;
+ this.publishedFullname = null;
+ //this.setVisibleNameById(null);
+ }
+
+ openDialog(event: MouseEvent) {
+ this.showDialog = true;
+ this.dialogData = { data: cloneDeep(this.data[0]), trigger: event.detail };
+ }
+
+ setVisibleNameById(metaId: number) {
+ // Without id, sets current name from profile
+ if (this.myDataProfile) {
+ this.publishedFullname = this.myDataProfile.profileData.filter(
+ item => item.id === 'contact')[0].fields.filter(
+ item => {
+ if (item.id === 'name') {
+ this.publishedFullnameLabel = item.label;
+ return true;
+ }
+ }
+ )[0].items.filter(
+ item => {
+ if (metaId) {
+ return item.itemMeta.id === metaId;
+ } else {
+ return item.itemMeta.show === true;
+ }
+ })[0].fullName;
+ if (metaId) {
+ this.profileService.setEditorProfileName(this.publishedFullname);
+ }
+ }
+ }
+
+ handleChanges(result) {
+ this.showDialog = false;
+
+ const confirmedPayLoad = this.patchService.confirmedPayLoad;
+ if (this.appSettingsService.isBrowser) {
+ if (result) {
+ // Set primary name to profile header
+ if (
+ confirmedPayLoad.find(
+ (item) => item.type === FieldTypes.personName
+ )
+ ) {
+ const selectedNameId = confirmedPayLoad.find(
+ (item) =>
+ item.show && item.type === this.fieldTypes.personName
+ ).id;
+ this.setVisibleNameById(selectedNameId);
+ }
+
+ // Update card & summary data with selection
+ this.contactFields = result.fields;
+ this.data[0] = result;
+
+ this.draftService.saveDraft(this.data);
+
+ // Do actions only if user has made changes
+ if (confirmedPayLoad.length) {
+ this.snackbarService.show(
+ $localize`:@@draftUpdated:Luonnos päivitetty`,
+ 'success'
+ );
+ }
+
+ if (confirmedPayLoad.length) {
+ // Set draft profile data to storage
+ sessionStorage.setItem(
+ Constants.draftProfile,
+ JSON.stringify(this.data)
+ );
+ }
+ }
+
+ // Set patch payload to store
+ sessionStorage.setItem(
+ Constants.draftPatchPayload,
+ JSON.stringify(this.patchService.confirmedPayLoad)
+ );
+ }
+ }
+
+ filterNameField(fields) {
+ // Filter out name field which is rendered in profile heading
+ return fields.filter((field) => field.id !== 'name');
+ }
+}
diff --git a/src/app/mydata/components/profile/cards/empty-card/empty-card.component.ts b/src/app/mydata/components/profile/cards/empty-card/empty-card.component.ts
index fc4aa7271..acd2ce74f 100644
--- a/src/app/mydata/components/profile/cards/empty-card/empty-card.component.ts
+++ b/src/app/mydata/components/profile/cards/empty-card/empty-card.component.ts
@@ -1,23 +1,26 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-
+import { SecondaryButtonComponent } from '../../../../../shared/components/buttons/secondary-button/secondary-button.component';
+
@Component({
- selector: 'app-empty-card',
- templateUrl: './empty-card.component.html',
-})
-export class EmptyCardComponent implements OnInit {
- @Output() onButtonClick = new EventEmitter();
- constructor() {}
-
- ngOnInit(): void {}
-
- openDialog(event: MouseEvent) {
- this.onButtonClick.emit(event);
- }
-}
+ selector: 'app-empty-card',
+ templateUrl: './empty-card.component.html',
+ standalone: true,
+ imports: [SecondaryButtonComponent],
+})
+export class EmptyCardComponent implements OnInit {
+ @Output() onButtonClick = new EventEmitter();
+ constructor() {}
+
+ ngOnInit(): void {}
+
+ openDialog(event: MouseEvent) {
+ this.onButtonClick.emit(event);
+ }
+}
diff --git a/src/app/mydata/components/profile/cards/profile-editor-card-header/profile-editor-card-header.component.ts b/src/app/mydata/components/profile/cards/profile-editor-card-header/profile-editor-card-header.component.ts
index 9a43b99c2..fa1b53345 100644
--- a/src/app/mydata/components/profile/cards/profile-editor-card-header/profile-editor-card-header.component.ts
+++ b/src/app/mydata/components/profile/cards/profile-editor-card-header/profile-editor-card-header.component.ts
@@ -1,19 +1,23 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-
+import { SecondaryButtonComponent } from '../../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { NgIf } from '@angular/common';
+
@Component({
- selector: 'app-profile-editor-card-header',
- templateUrl: './profile-editor-card-header.component.html',
-})
-export class ProfileEditorCardHeaderComponent implements OnInit {
- @Input() label: string;
- @Input() displayButton: boolean;
- @Output() handleOpenDialog = new EventEmitter();
-
- constructor() {}
-
- ngOnInit(): void {}
-
- openDialog(event: MouseEvent) {
- this.handleOpenDialog.emit(event);
- }
-}
+ selector: 'app-profile-editor-card-header',
+ templateUrl: './profile-editor-card-header.component.html',
+ standalone: true,
+ imports: [NgIf, SecondaryButtonComponent],
+})
+export class ProfileEditorCardHeaderComponent implements OnInit {
+ @Input() label: string;
+ @Input() displayButton: boolean;
+ @Output() handleOpenDialog = new EventEmitter();
+
+ constructor() {}
+
+ ngOnInit(): void {}
+
+ openDialog(event: MouseEvent) {
+ this.handleOpenDialog.emit(event);
+ }
+}
diff --git a/src/app/mydata/components/profile/data-sources/data-sources-filters/data-sources-filters.component.ts b/src/app/mydata/components/profile/data-sources/data-sources-filters/data-sources-filters.component.ts
index 8143caf5a..03f0b43d8 100644
--- a/src/app/mydata/components/profile/data-sources/data-sources-filters/data-sources-filters.component.ts
+++ b/src/app/mydata/components/profile/data-sources/data-sources-filters/data-sources-filters.component.ts
@@ -1,125 +1,128 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
-import { FiltersConfig } from '@mydata/constants';
-import { getUniqueSources, filterData } from '@mydata/utils';
-import { AppSettingsService } from '@shared/services/app-settings.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { FiltersConfig } from '@mydata/constants';
+import { getUniqueSources, filterData } from '@mydata/utils';
+import { AppSettingsService } from '@shared/services/app-settings.service';
import { Subscription } from 'rxjs';
-
+import { FiltersComponent } from '../../../../../portal/components/results/filters/filters.component';
+
@Component({
- selector: 'app-data-sources-filters',
- templateUrl: './data-sources-filters.component.html',
- styleUrls: ['./data-sources-filters.component.scss'],
-})
-
-/*
- * This component uses filters-component from Portal to render filters with shared
- * styles. Filtering happens locally and therefore we don't reuse filtering logic from
- * shared filters component.
- */
-export class DataSourcesFiltersComponent
- implements OnInit, OnChanges, OnDestroy
-{
- @Input() profileData: any;
- @Input() activeFilters: {
- status?: string[];
- dataset?: string[];
- source?: string[];
- };
-
- filters: any;
- filtersConfig = FiltersConfig;
- queryParamSub: Subscription;
-
- constructor(private appSettingsService: AppSettingsService) {}
-
- ngOnInit(): void {}
-
- ngOnChanges(): void {
- this.createFilterData(this.profileData);
- }
-
- createFilterData(profileData) {
- // Filter out empty groups and flatten fields
- const filterEmptyGroups = (data: any[]) =>
- data
- .flatMap((group) => group.fields)
- .filter((field) => field.items.length);
-
- /*
- * Method for listing all profile items as non grouped version,
- * which gives easier access to e.g. publicity value
- */
- const flattenItems = (groups) =>
- groups.flatMap((group) => group.fields).flatMap((field) => field.items);
-
- const handleDataFilter = (category: string) =>
- filterData(profileData, this.activeFilters, category);
-
- // JSON structure mimics the one we got in Portal from Elasticsearch
- const filters = {
- aggregations: {
- status: {
- buckets: [
- {
- key: 'public',
- label: $localize`:@@public:Julkinen`,
- doc_count: flattenItems(handleDataFilter('status')).filter(
- (item) => item.itemMeta.show
- ).length,
- },
- {
- key: 'private',
- label: $localize`:@@notPublic:Ei julkinen`,
- doc_count: flattenItems(handleDataFilter('status')).filter(
- (item) => !item.itemMeta.show
- ).length,
- },
- ],
- },
- dataset: {
- buckets: filterEmptyGroups(handleDataFilter('dataset')).map(
- (group) => {
- return {
- key: group.id,
- label: group.label,
- doc_count: group.items.length,
- };
- }
- ),
- },
- source: {
- buckets: getUniqueSources(
- handleDataFilter('source'),
- this.appSettingsService.capitalizedLocale
- ).map((organization) => {
- return {
- key: organization.key,
- label: organization.label,
- doc_count: organization.count,
- };
- }),
- },
- },
- };
-
- // Hide empty filters
- for (const filter of Object.keys(filters.aggregations)) {
- let buckets = filters.aggregations[filter].buckets;
- filters.aggregations[filter].buckets = buckets.filter(
- (item) => item.doc_count > 0
- );
- }
-
- this.filters = filters;
- }
-
- ngOnDestroy(): void {
- this.queryParamSub?.unsubscribe();
- }
-}
+ selector: 'app-data-sources-filters',
+ templateUrl: './data-sources-filters.component.html',
+ styleUrls: ['./data-sources-filters.component.scss'],
+ standalone: true,
+ imports: [FiltersComponent],
+})
+
+/*
+ * This component uses filters-component from Portal to render filters with shared
+ * styles. Filtering happens locally and therefore we don't reuse filtering logic from
+ * shared filters component.
+ */
+export class DataSourcesFiltersComponent
+ implements OnInit, OnChanges, OnDestroy
+{
+ @Input() profileData: any;
+ @Input() activeFilters: {
+ status?: string[];
+ dataset?: string[];
+ source?: string[];
+ };
+
+ filters: any;
+ filtersConfig = FiltersConfig;
+ queryParamSub: Subscription;
+
+ constructor(private appSettingsService: AppSettingsService) {}
+
+ ngOnInit(): void {}
+
+ ngOnChanges(): void {
+ this.createFilterData(this.profileData);
+ }
+
+ createFilterData(profileData) {
+ // Filter out empty groups and flatten fields
+ const filterEmptyGroups = (data: any[]) =>
+ data
+ .flatMap((group) => group.fields)
+ .filter((field) => field.items.length);
+
+ /*
+ * Method for listing all profile items as non grouped version,
+ * which gives easier access to e.g. publicity value
+ */
+ const flattenItems = (groups) =>
+ groups.flatMap((group) => group.fields).flatMap((field) => field.items);
+
+ const handleDataFilter = (category: string) =>
+ filterData(profileData, this.activeFilters, category);
+
+ // JSON structure mimics the one we got in Portal from Elasticsearch
+ const filters = {
+ aggregations: {
+ status: {
+ buckets: [
+ {
+ key: 'public',
+ label: $localize`:@@public:Julkinen`,
+ doc_count: flattenItems(handleDataFilter('status')).filter(
+ (item) => item.itemMeta.show
+ ).length,
+ },
+ {
+ key: 'private',
+ label: $localize`:@@notPublic:Ei julkinen`,
+ doc_count: flattenItems(handleDataFilter('status')).filter(
+ (item) => !item.itemMeta.show
+ ).length,
+ },
+ ],
+ },
+ dataset: {
+ buckets: filterEmptyGroups(handleDataFilter('dataset')).map(
+ (group) => {
+ return {
+ key: group.id,
+ label: group.label,
+ doc_count: group.items.length,
+ };
+ }
+ ),
+ },
+ source: {
+ buckets: getUniqueSources(
+ handleDataFilter('source'),
+ this.appSettingsService.capitalizedLocale
+ ).map((organization) => {
+ return {
+ key: organization.key,
+ label: organization.label,
+ doc_count: organization.count,
+ };
+ }),
+ },
+ },
+ };
+
+ // Hide empty filters
+ for (const filter of Object.keys(filters.aggregations)) {
+ let buckets = filters.aggregations[filter].buckets;
+ filters.aggregations[filter].buckets = buckets.filter(
+ (item) => item.doc_count > 0
+ );
+ }
+
+ this.filters = filters;
+ }
+
+ ngOnDestroy(): void {
+ this.queryParamSub?.unsubscribe();
+ }
+}
diff --git a/src/app/mydata/components/profile/data-sources/data-sources-selection-actions/data-sources-selection-actions.component.html b/src/app/mydata/components/profile/data-sources/data-sources-selection-actions/data-sources-selection-actions.component.html
index 1af1f9920..d8a476dcb 100644
--- a/src/app/mydata/components/profile/data-sources/data-sources-selection-actions/data-sources-selection-actions.component.html
+++ b/src/app/mydata/components/profile/data-sources/data-sources-selection-actions/data-sources-selection-actions.component.html
@@ -8,7 +8,7 @@
!item.itemMeta.show
- );
- break;
- }
- case 'hide': {
- this.filteredSelectedItems = this.selectedItems.filter(
- (item) => item.itemMeta.show
- );
- break;
- }
- default:
- this.filteredSelectedItems = this.selectedItems;
- }
- }
-
- closeDialog() {
- this.showDialog = false;
- this.selectedAction = '';
- }
-
- handleDialogAction(action: Action) {
- switch (action) {
- case 'publish':
- return this.patchItems('publish');
- case 'hide':
- return this.patchItems('hide');
- }
- this.closeDialog();
- }
-
- async patchItems(action: Action) {
- const patchItemsArr = this.patchService.confirmedPayLoad;
-
- const filteredItems = patchItemsArr.filter((item) =>
- action === 'publish' ? item.show : !item.show
- );
-
- this.profileService
- .patchObjects(filteredItems).then(
- (value) => {
- this.onPatchSuccess.emit(filteredItems);
- // Enable hide profile button in account settings section, if it has been disabled
- sessionStorage.removeItem('profileHidden');
- this.snackbarService.showPatchMessage('success');
- },
- (reason) => {
- this.snackbarService.showPatchMessage('error');
- },);
- }
-
- // Used as callback function in filter pipe
- filterByStatus(items, action: Action) {
- return items.filter((item) =>
- // filterBy utility function can't be used since it's outside of 'this'
- // scope when using filter pipe
- action === 'publish' ? !item.itemMeta.show : item.itemMeta.show
- );
- }
-
- // Get filtered data for draft summary in dialog
- // E.g. display only items that are public in 'hide' dialogs summary
- filterProfileData(action: Action) {
- const dataCopy = cloneDeep(this.profileData);
-
- const fields = dataCopy.flatMap((group) => group.fields);
-
- fields.forEach(
- (field) =>
- (field.items = field.items.filter((item) =>
- this.filterBy(action, item.itemMeta)
- ))
- );
-
- this.filteredProfileData = dataCopy;
- }
-
- // Utility function for profile data filter callback
- filterBy(action: string, item: { show: boolean }) {
- return action === 'publish' ? !item.show : item.show;
- }
-
- ngOnDestroy(): void {
- this.patchItemsSub?.unsubscribe();
- }
-}
+ selector: 'app-data-sources-selection-actions',
+ templateUrl: './data-sources-selection-actions.component.html',
+ styleUrls: ['./data-sources-selection-actions.component.scss'],
+ standalone: true,
+ imports: [
+ NgFor,
+ NgIf,
+ SecondaryButtonComponent,
+ PrimaryActionButtonComponent,
+ DialogComponent,
+ NgSwitch,
+ NgSwitchCase,
+ NgTemplateOutlet,
+ NgSwitchDefault,
+ MatCheckbox,
+ DraftSummaryComponent,
+ FilterPipe,
+ ],
+})
+export class DataSourcesSelectionActionsComponent implements OnInit, OnDestroy {
+ @Input() selectedItems: any[];
+ @Input() profileData: any[];
+
+ filteredProfileData: any;
+
+ actions: {
+ id: Action;
+ label: string;
+ dialogTitle: string;
+ dialogPreviewLabel: string;
+ dialogPreviewLabelToggled: string;
+ patchButtonLabel: string;
+ }[] = [
+ {
+ id: 'publish',
+ label: $localize`:@@makePublic:Aseta julkiseksi`,
+ dialogTitle: $localize`:@@showDataToPublishInService:Aseta valitut tiedot julkiseksi Tiedejatutkimus.fi -palvelussa`,
+ dialogPreviewLabel: $localize`:@@showDataToPublish:Näytä julkaistavat tiedot`,
+ dialogPreviewLabelToggled: $localize`:@@hideDataToPublish:Piilota julkaistavat tiedot`,
+ patchButtonLabel: $localize`:@@publish:Julkaise`,
+ },
+ {
+ id: 'hide',
+ label: $localize`:@@hideInProfile:Piilota profiilista`,
+ dialogTitle: $localize`:@@showDataToHideInService:Piilota valitut tiedot tiedejatutkimus.fi -palvelusta`,
+ dialogPreviewLabel: $localize`:@@showDataToHide:Näytä piilotettavat tiedot`,
+ dialogPreviewLabelToggled: $localize`:@@closeDataToHide:Sulje piilotettavat tiedot`,
+ patchButtonLabel: $localize`:@@hide:Piilota`,
+ },
+ // {
+ // id: 'share',
+ // label: 'Jaa kohteille...',
+ // dialogTitle: 'Jaa valitut tiedot kohteille',
+ // dialogPreviewLabel: 'Näytä jaettavat tiedot',
+ // dialogPreviewLabelToggled: 'Piilota jaettavat tiedot',
+ // patchButtonLabel: 'Jaa',
+ // },
+ ];
+
+ // Dialog variables
+ showDialog: boolean;
+ dialogTemplate: any;
+ dialogTitle: string;
+ selectedAction: string = '';
+ dialogActions: DialogAction[] = [
+ {
+ label: '',
+ labelToggle: { on: '', off: '' },
+ primary: false,
+ method: 'preview',
+ flexStart: true,
+ },
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'cancel' },
+ { label: '', primary: true, method: '' },
+ ];
+
+ // For development purposes
+ shareTargets = [
+ { label: 'Tiedejatutkimus.fi' },
+ { label: 'Organisaatio X' },
+ { label: 'Palvelu Y' },
+ ];
+
+ patchItemsSub: Subscription;
+
+ @Output() onPatchSuccess = new EventEmitter();
+
+ filteredSelectedItems: any[];
+
+ constructor(
+ private patchService: PatchService,
+ private profileService: ProfileService,
+ private snackbarService: SnackbarService
+ ) {}
+
+ ngOnInit(): void {}
+
+ openDialog(index: number) {
+ this.patchService.confirmPayload();
+
+ const action = this.actions[index];
+
+ this.filterProfileData(action.id); // For draft summary
+
+ this.showDialog = true;
+ this.selectedAction = action.id;
+ this.dialogTitle = action.dialogTitle;
+ // Preview button content changes on toggle
+ // Set initial label
+ this.dialogActions[0].label = action.dialogPreviewLabel;
+ this.dialogActions[0].labelToggle.on = action.dialogPreviewLabel;
+ this.dialogActions[0].labelToggle.off = action.dialogPreviewLabelToggled;
+
+ // Set patch button label and method
+ this.dialogActions[2].label = action.patchButtonLabel;
+ this.dialogActions[2].method = action.id;
+
+ // Used for item count in action based selection indicator
+ switch (action.id) {
+ case 'publish': {
+ this.filteredSelectedItems = this.selectedItems.filter(
+ (item) => !item.itemMeta.show
+ );
+ break;
+ }
+ case 'hide': {
+ this.filteredSelectedItems = this.selectedItems.filter(
+ (item) => item.itemMeta.show
+ );
+ break;
+ }
+ default:
+ this.filteredSelectedItems = this.selectedItems;
+ }
+ }
+
+ closeDialog() {
+ this.showDialog = false;
+ this.selectedAction = '';
+ }
+
+ handleDialogAction(action: Action) {
+ switch (action) {
+ case 'publish':
+ return this.patchItems('publish');
+ case 'hide':
+ return this.patchItems('hide');
+ }
+ this.closeDialog();
+ }
+
+ async patchItems(action: Action) {
+ const patchItemsArr = this.patchService.confirmedPayLoad;
+
+ const filteredItems = patchItemsArr.filter((item) =>
+ action === 'publish' ? item.show : !item.show
+ );
+
+ this.profileService
+ .patchObjects(filteredItems).then(
+ (value) => {
+ this.onPatchSuccess.emit(filteredItems);
+ // Enable hide profile button in account settings section, if it has been disabled
+ sessionStorage.removeItem('profileHidden');
+ this.snackbarService.showPatchMessage('success');
+ },
+ (reason) => {
+ this.snackbarService.showPatchMessage('error');
+ },);
+ }
+
+ // Used as callback function in filter pipe
+ filterByStatus(items, action: Action) {
+ return items.filter((item) =>
+ // filterBy utility function can't be used since it's outside of 'this'
+ // scope when using filter pipe
+ action === 'publish' ? !item.itemMeta.show : item.itemMeta.show
+ );
+ }
+
+ // Get filtered data for draft summary in dialog
+ // E.g. display only items that are public in 'hide' dialogs summary
+ filterProfileData(action: Action) {
+ const dataCopy = cloneDeep(this.profileData);
+
+ const fields = dataCopy.flatMap((group) => group.fields);
+
+ fields.forEach(
+ (field) =>
+ (field.items = field.items.filter((item) =>
+ this.filterBy(action, item.itemMeta)
+ ))
+ );
+
+ this.filteredProfileData = dataCopy;
+ }
+
+ // Utility function for profile data filter callback
+ filterBy(action: string, item: { show: boolean }) {
+ return action === 'publish' ? !item.show : item.show;
+ }
+
+ ngOnDestroy(): void {
+ this.patchItemsSub?.unsubscribe();
+ }
+}
diff --git a/src/app/mydata/components/profile/data-sources/data-sources-table/data-sources-table.component.ts b/src/app/mydata/components/profile/data-sources/data-sources-table/data-sources-table.component.ts
index 5ed2673a0..bae9343f7 100644
--- a/src/app/mydata/components/profile/data-sources/data-sources-table/data-sources-table.component.ts
+++ b/src/app/mydata/components/profile/data-sources/data-sources-table/data-sources-table.component.ts
@@ -1,363 +1,378 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- AfterViewInit,
- ChangeDetectorRef,
- Component,
- ElementRef,
- EventEmitter,
- Input,
- OnChanges,
- OnDestroy,
- OnInit,
- Output,
- QueryList,
- ViewChild,
- ViewChildren,
-} from '@angular/core';
-import { Sort, SortDirection } from '@angular/material/sort';
-import { ActivatedRoute } from '@angular/router';
-import { FiltersConfig, TableColumns } from '@mydata/constants';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
-import { first, Subscription } from 'rxjs';
-import { TableRow } from 'src/types';
-import { TableComponent } from '@shared/components/table/table.component';
-import { AppSettingsService } from '@shared/services/app-settings.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ AfterViewInit,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ EventEmitter,
+ Input,
+ OnChanges,
+ OnDestroy,
+ OnInit,
+ Output,
+ QueryList,
+ ViewChild,
+ ViewChildren,
+} from '@angular/core';
+import { Sort, SortDirection } from '@angular/material/sort';
+import { ActivatedRoute } from '@angular/router';
+import { FiltersConfig, TableColumns } from '@mydata/constants';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { first, Subscription } from 'rxjs';
+import { TableRow } from 'src/types';
+import { TableComponent } from '@shared/components/table/table.component';
+import { AppSettingsService } from '@shared/services/app-settings.service';
import { MatCheckboxChange } from '@angular/material/checkbox';
-
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { PaginationComponent } from '../../../../../shared/components/pagination/pagination.component';
+import { TableComponent as TableComponent_1 } from '../../../../../shared/components/table/table.component';
+import { NgIf, NgFor, AsyncPipe } from '@angular/common';
+
@Component({
- selector: 'app-data-sources-table',
- templateUrl: './data-sources-table.component.html',
- styleUrls: ['./data-sources-table.component.scss'],
-})
-export class DataSourcesTableComponent
- implements OnInit, AfterViewInit, OnChanges, OnDestroy
-{
- @Input() data: any;
- @Output() onSelectionChange = new EventEmitter();
-
- public fieldTypes = FieldTypes;
-
- dataMapped: boolean;
-
- activeSort: string;
- sortDirection: SortDirection;
-
- @ViewChildren('contentCell') contentCells: QueryList;
- @ViewChildren('textContent') textContent: QueryList;
- @ViewChildren('publicityCell') publicityCells: QueryList;
- // @ViewChildren('sharingCell') sharingCells: QueryList;
-
- @ViewChild(TableComponent) table: TableComponent;
-
- tableColumns = TableColumns;
-
- tableRows: Record[];
- expandedRows = [];
-
- originalDataSources: any;
-
- devDataSource = {
- active: true,
- selection: true,
- name: 'Name of data source',
- content: 'Some dynamic content',
- public: false,
- source: 'Source of data',
- sharing: [0],
- };
-
- shareTargets = [
- { label: 'Tiedejatutkimus.fi' },
- { label: 'Organisaatio X' },
- { label: 'Palvelu Y' },
- ];
-
- itemsPerPage = 10;
- rawProfileRows: any[] = [];
-
- filtersConfig = FiltersConfig;
- queryParamsSub: Subscription;
-
- // Pagination
- pageNumber: number = 1;
- pageSize: number = 10;
- total: number;
-
- locale: string;
-
- maxContentLength = 35;
- mobileStatusSub: Subscription;
- mobile: boolean;
- rowCheckboxTicks: string[] = [];
- allSelected: boolean;
-
- constructor(
- private cdr: ChangeDetectorRef,
- private route: ActivatedRoute,
- public appSettingsService: AppSettingsService
- ) {
- this.locale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- this.handleProfileData(this.data);
-
- /*
- * Handle sorting & pagination from query parameters
- * Active sort can be selected from table or reusable sort by button component
- */
- const initialQueryParams = this.route.snapshot.queryParams;
-
- // Initial sort parameters
- this.activeSort = initialQueryParams.sort;
- this.sortDirection = initialQueryParams.sortDirection || 'asc';
-
- // When sorting changes
- this.queryParamsSub = this.route.queryParams.subscribe((params) => {
- if (this.dataMapped) {
- this.sort({ active: params.sort, direction: params.sortDirection });
- }
-
- this.pageNumber = Number(params.page) || 1;
- });
-
- this.mobileStatusSub = this.appSettingsService.mobileStatus.subscribe(
- (status) => {
- this.mobile = status;
- }
- );
- }
-
- // Handle data again when data is filtered
- ngOnChanges(): void {
- if (this.dataMapped) {
- this.updateData();
- }
- }
-
- updateData() {
- this.rawProfileRows = [];
- this.handleProfileData(this.data);
- this.cdr.detectChanges();
- this.mapData();
- }
-
- // Allow templates to be rendered before mapping data from cells
- ngAfterViewInit(): void {
- this.mapData();
- this.cdr.detectChanges();
- }
-
- ngOnDestroy(): void {
- this.queryParamsSub?.unsubscribe();
- this.mobileStatusSub?.unsubscribe();
- }
-
- // Create raw data for table rows
- handleProfileData(profileData) {
- // Filter out empty groups and flatten structure
- const filteredGroups = profileData
- .flatMap((group) => group.fields)
- .filter((group) => group.items.length);
-
- for (const group of filteredGroups) {
- for (const item of group.items) {
- let displayValue: string;
-
- switch (item.itemMeta.type) {
- case FieldTypes.activityAffiliation: {
- displayValue = [item.positionName, item.organizationName]
- .filter((item) => item.length > 0)
- .join(', ');
- break;
- }
- case FieldTypes.activityEducation: {
- displayValue = item.degreeGrantingInstitutionName;
- break;
- }
- case FieldTypes.activityPublication:
- case FieldTypes.activityOrcidPublication: {
- displayValue = item.title;
- break;
- }
- case FieldTypes.activityDataset:
- case FieldTypes.activityDatasetOrcid:
- case FieldTypes.activityFunding:
- case FieldTypes.activityFundingOrcid:
- case FieldTypes.activityActivitiesAndRewards: {
- displayValue = item.name;
- break;
- }
- case FieldTypes.activityActivitiesAndRewardsOrcid: {
- displayValue = item.name;
- break;
- }
- default: {
- displayValue = item.value;
- }
- }
-
- this.rawProfileRows.push({
- ...item,
- groupLabel: group.label,
- source: item.dataSources,
- displayValue: displayValue,
- });
- }
- }
- }
-
- /*
- * Map data for table view.
- * Cells are rendered from dynamic templates and content can be
- * either projected from template or added dynamically below.
- */
- mapData() {
- // Data from templates
- const contentCellItems = this.contentCells.toArray();
- const publicityCellItems = this.publicityCells.toArray();
- // const sharingCellItems = this.sharingCells.toArray();
-
- const rows = [];
-
- for (const [index, item] of this.rawProfileRows.entries()) {
- rows.push({
- selection: { checkboxDisabled: item.itemMeta.type === 110, entryId: item.itemMeta.temporaryUniqueId.toString() },
- name: { label: item.groupLabel },
- content: { template: contentCellItems[index] },
- public: {
- template: publicityCellItems[index],
- label: item.itemMeta.show, // Used for sorting
- value: item.itemMeta.show, // Used for row color highlight
- },
- source: {
- label: item.source
- ?.map((source) => source.organization.nameFi)
- .join(', '),
- },
- // sharing: {
- // template: sharingCellItems[index],
- // label: sharingCellItems[index],
- // },
- });
- }
-
- this.tableRows = rows;
-
- // Initial sorting
- if (this.activeSort) {
- this.sort({ active: this.activeSort, direction: this.sortDirection });
- }
-
- /*
- * Get content cell as text for sorting purposes. Previously declared
- * ´contentCellItems´ is for getting template refs only and does not contain
- * any usable text content.
- * Elements get duplicated because of Angular ng-template html output,
- * therefore we need to filter these elements to get corresponding values
- */
- this.textContent.changes.pipe(first()).subscribe((content) => {
- const textContent = content
- .toArray()
- .map((item) => item.nativeElement.innerText)
- .filter((_item, index) => index % 2 === 0);
-
- this.tableRows.forEach((row, index) => {
- row.content.label = textContent[index]?.trim();
- });
-
- // Create a copy of original data for sort reset
- this.originalDataSources = [...this.tableRows];
- });
-
- // Set flag for onChanges hook so it doesn't re-render on init
- this.dataMapped = true;
-
- this.updatePagination();
- }
-
- sort(sort: Sort) {
- // Create a shallow copy of current rows so original data doesn't change
- const data = this.tableRows.slice();
-
- if (!sort.active || sort.direction === '') {
- this.activeSort = '';
- this.tableRows = this.originalDataSources;
- return;
- }
-
- // Simple compare method for returning numeric value for JS sort() function
- const compare = (
- a: string | number,
- b: string | number,
- isAsc: boolean
- ) => {
- return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
- };
-
- // Inference correct sort column and sort with compare -method
- const sortables: string[] = this.tableColumns.map((column) => column.key);
-
- this.tableRows = data.sort((a, b) => {
- const isAsc = sort.direction === 'asc';
- const matchIndex = sortables.indexOf(sort.active);
-
- if (matchIndex > -1) {
- return compare(
- a[sortables[matchIndex]].label,
- b[sortables[matchIndex]].label,
- isAsc
- );
- } else {
- return 0;
- }
- });
-
- this.activeSort = sort.active;
- this.sortDirection = sort.direction;
- }
-
- handleSelection(selectedRowUniqueId) {
- this.rowCheckboxTicks.find((index) => index === selectedRowUniqueId) !== undefined
- ? (this.rowCheckboxTicks = this.rowCheckboxTicks.filter(
- (index) => index !== selectedRowUniqueId
- ))
- : this.rowCheckboxTicks.push(selectedRowUniqueId);
- this.onSelectionChange.emit(this.rowCheckboxTicks);
- this.allSelected = this.rowCheckboxTicks.length + 1 === this.tableRows.length;
- }
-
- handleSelectAll(event: MatCheckboxChange) {
- let rowIds = event.checked
- ? this.tableRows.map((_row, index) => {
- if (_row.selection.checkboxDisabled === false) return _row.selection.entryId.toString()})
- : [];
-
- rowIds = rowIds.filter(item => !!item);
- this.rowCheckboxTicks = rowIds.map(String);
-
- this.onSelectionChange.emit(this.rowCheckboxTicks);
- this.allSelected = event.checked;
- }
-
- clearSelections() {
- this.table.handleSelectAll({ checked: false, source: null });
- this.updateData();
- }
-
- updatePagination() {
- this.total = this.tableRows.length;
- }
-
- toggleRowExpand(index) {
- this.expandedRows.indexOf(index) > -1
- ? (this.expandedRows = this.expandedRows.filter((i) => i !== index))
- : this.expandedRows.push(index);
- }
-}
+ selector: 'app-data-sources-table',
+ templateUrl: './data-sources-table.component.html',
+ styleUrls: ['./data-sources-table.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ TableComponent_1,
+ PaginationComponent,
+ NgFor,
+ MatMenuTrigger,
+ MatMenu,
+ MatMenuItem,
+ AsyncPipe,
+ ],
+})
+export class DataSourcesTableComponent
+ implements OnInit, AfterViewInit, OnChanges, OnDestroy
+{
+ @Input() data: any;
+ @Output() onSelectionChange = new EventEmitter();
+
+ public fieldTypes = FieldTypes;
+
+ dataMapped: boolean;
+
+ activeSort: string;
+ sortDirection: SortDirection;
+
+ @ViewChildren('contentCell') contentCells: QueryList;
+ @ViewChildren('textContent') textContent: QueryList;
+ @ViewChildren('publicityCell') publicityCells: QueryList;
+ // @ViewChildren('sharingCell') sharingCells: QueryList;
+
+ @ViewChild(TableComponent) table: TableComponent;
+
+ tableColumns = TableColumns;
+
+ tableRows: Record[];
+ expandedRows = [];
+
+ originalDataSources: any;
+
+ devDataSource = {
+ active: true,
+ selection: true,
+ name: 'Name of data source',
+ content: 'Some dynamic content',
+ public: false,
+ source: 'Source of data',
+ sharing: [0],
+ };
+
+ shareTargets = [
+ { label: 'Tiedejatutkimus.fi' },
+ { label: 'Organisaatio X' },
+ { label: 'Palvelu Y' },
+ ];
+
+ itemsPerPage = 10;
+ rawProfileRows: any[] = [];
+
+ filtersConfig = FiltersConfig;
+ queryParamsSub: Subscription;
+
+ // Pagination
+ pageNumber: number = 1;
+ pageSize: number = 10;
+ total: number;
+
+ locale: string;
+
+ maxContentLength = 35;
+ mobileStatusSub: Subscription;
+ mobile: boolean;
+ rowCheckboxTicks: string[] = [];
+ allSelected: boolean;
+
+ constructor(
+ private cdr: ChangeDetectorRef,
+ private route: ActivatedRoute,
+ public appSettingsService: AppSettingsService
+ ) {
+ this.locale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ this.handleProfileData(this.data);
+
+ /*
+ * Handle sorting & pagination from query parameters
+ * Active sort can be selected from table or reusable sort by button component
+ */
+ const initialQueryParams = this.route.snapshot.queryParams;
+
+ // Initial sort parameters
+ this.activeSort = initialQueryParams.sort;
+ this.sortDirection = initialQueryParams.sortDirection || 'asc';
+
+ // When sorting changes
+ this.queryParamsSub = this.route.queryParams.subscribe((params) => {
+ if (this.dataMapped) {
+ this.sort({ active: params.sort, direction: params.sortDirection });
+ }
+
+ this.pageNumber = Number(params.page) || 1;
+ });
+
+ this.mobileStatusSub = this.appSettingsService.mobileStatus.subscribe(
+ (status) => {
+ this.mobile = status;
+ }
+ );
+ }
+
+ // Handle data again when data is filtered
+ ngOnChanges(): void {
+ if (this.dataMapped) {
+ this.updateData();
+ }
+ }
+
+ updateData() {
+ this.rawProfileRows = [];
+ this.handleProfileData(this.data);
+ this.cdr.detectChanges();
+ this.mapData();
+ }
+
+ // Allow templates to be rendered before mapping data from cells
+ ngAfterViewInit(): void {
+ this.mapData();
+ this.cdr.detectChanges();
+ }
+
+ ngOnDestroy(): void {
+ this.queryParamsSub?.unsubscribe();
+ this.mobileStatusSub?.unsubscribe();
+ }
+
+ // Create raw data for table rows
+ handleProfileData(profileData) {
+ // Filter out empty groups and flatten structure
+ const filteredGroups = profileData
+ .flatMap((group) => group.fields)
+ .filter((group) => group.items.length);
+
+ for (const group of filteredGroups) {
+ for (const item of group.items) {
+ let displayValue: string;
+
+ switch (item.itemMeta.type) {
+ case FieldTypes.activityAffiliation: {
+ displayValue = [item.positionName, item.organizationName]
+ .filter((item) => item.length > 0)
+ .join(', ');
+ break;
+ }
+ case FieldTypes.activityEducation: {
+ displayValue = item.degreeGrantingInstitutionName;
+ break;
+ }
+ case FieldTypes.activityPublication:
+ case FieldTypes.activityOrcidPublication: {
+ displayValue = item.title;
+ break;
+ }
+ case FieldTypes.activityDataset:
+ case FieldTypes.activityDatasetOrcid:
+ case FieldTypes.activityFunding:
+ case FieldTypes.activityFundingOrcid:
+ case FieldTypes.activityActivitiesAndRewards: {
+ displayValue = item.name;
+ break;
+ }
+ case FieldTypes.activityActivitiesAndRewardsOrcid: {
+ displayValue = item.name;
+ break;
+ }
+ default: {
+ displayValue = item.value;
+ }
+ }
+
+ this.rawProfileRows.push({
+ ...item,
+ groupLabel: group.label,
+ source: item.dataSources,
+ displayValue: displayValue,
+ });
+ }
+ }
+ }
+
+ /*
+ * Map data for table view.
+ * Cells are rendered from dynamic templates and content can be
+ * either projected from template or added dynamically below.
+ */
+ mapData() {
+ // Data from templates
+ const contentCellItems = this.contentCells.toArray();
+ const publicityCellItems = this.publicityCells.toArray();
+ // const sharingCellItems = this.sharingCells.toArray();
+
+ const rows = [];
+
+ for (const [index, item] of this.rawProfileRows.entries()) {
+ rows.push({
+ selection: { checkboxDisabled: item.itemMeta.type === 110, entryId: item.itemMeta.temporaryUniqueId.toString() },
+ name: { label: item.groupLabel },
+ content: { template: contentCellItems[index] },
+ public: {
+ template: publicityCellItems[index],
+ label: item.itemMeta.show, // Used for sorting
+ value: item.itemMeta.show, // Used for row color highlight
+ },
+ source: {
+ label: item.source
+ ?.map((source) => source.organization.nameFi)
+ .join(', '),
+ },
+ // sharing: {
+ // template: sharingCellItems[index],
+ // label: sharingCellItems[index],
+ // },
+ });
+ }
+
+ this.tableRows = rows;
+
+ // Initial sorting
+ if (this.activeSort) {
+ this.sort({ active: this.activeSort, direction: this.sortDirection });
+ }
+
+ /*
+ * Get content cell as text for sorting purposes. Previously declared
+ * ´contentCellItems´ is for getting template refs only and does not contain
+ * any usable text content.
+ * Elements get duplicated because of Angular ng-template html output,
+ * therefore we need to filter these elements to get corresponding values
+ */
+ this.textContent.changes.pipe(first()).subscribe((content) => {
+ const textContent = content
+ .toArray()
+ .map((item) => item.nativeElement.innerText)
+ .filter((_item, index) => index % 2 === 0);
+
+ this.tableRows.forEach((row, index) => {
+ row.content.label = textContent[index]?.trim();
+ });
+
+ // Create a copy of original data for sort reset
+ this.originalDataSources = [...this.tableRows];
+ });
+
+ // Set flag for onChanges hook so it doesn't re-render on init
+ this.dataMapped = true;
+
+ this.updatePagination();
+ }
+
+ sort(sort: Sort) {
+ // Create a shallow copy of current rows so original data doesn't change
+ const data = this.tableRows.slice();
+
+ if (!sort.active || sort.direction === '') {
+ this.activeSort = '';
+ this.tableRows = this.originalDataSources;
+ return;
+ }
+
+ // Simple compare method for returning numeric value for JS sort() function
+ const compare = (
+ a: string | number,
+ b: string | number,
+ isAsc: boolean
+ ) => {
+ return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+ };
+
+ // Inference correct sort column and sort with compare -method
+ const sortables: string[] = this.tableColumns.map((column) => column.key);
+
+ this.tableRows = data.sort((a, b) => {
+ const isAsc = sort.direction === 'asc';
+ const matchIndex = sortables.indexOf(sort.active);
+
+ if (matchIndex > -1) {
+ return compare(
+ a[sortables[matchIndex]].label,
+ b[sortables[matchIndex]].label,
+ isAsc
+ );
+ } else {
+ return 0;
+ }
+ });
+
+ this.activeSort = sort.active;
+ this.sortDirection = sort.direction;
+ }
+
+ handleSelection(selectedRowUniqueId) {
+ this.rowCheckboxTicks.find((index) => index === selectedRowUniqueId) !== undefined
+ ? (this.rowCheckboxTicks = this.rowCheckboxTicks.filter(
+ (index) => index !== selectedRowUniqueId
+ ))
+ : this.rowCheckboxTicks.push(selectedRowUniqueId);
+ this.onSelectionChange.emit(this.rowCheckboxTicks);
+ this.allSelected = this.rowCheckboxTicks.length + 1 === this.tableRows.length;
+ }
+
+ handleSelectAll(event: MatCheckboxChange) {
+ let rowIds = event.checked
+ ? this.tableRows.map((_row, index) => {
+ if (_row.selection.checkboxDisabled === false) return _row.selection.entryId.toString()})
+ : [];
+
+ rowIds = rowIds.filter(item => !!item);
+ this.rowCheckboxTicks = rowIds.map(String);
+
+ this.onSelectionChange.emit(this.rowCheckboxTicks);
+ this.allSelected = event.checked;
+ }
+
+ clearSelections() {
+ this.table.handleSelectAll({ checked: false, source: null });
+ this.updateData();
+ }
+
+ updatePagination() {
+ this.total = this.tableRows.length;
+ }
+
+ toggleRowExpand(index) {
+ this.expandedRows.indexOf(index) > -1
+ ? (this.expandedRows = this.expandedRows.filter((i) => i !== index))
+ : this.expandedRows.push(index);
+ }
+}
diff --git a/src/app/mydata/components/profile/data-sources/data-sources-theme.scss b/src/app/mydata/components/profile/data-sources/data-sources-theme.scss
index b1be7de35..ae3d94e64 100644
--- a/src/app/mydata/components/profile/data-sources/data-sources-theme.scss
+++ b/src/app/mydata/components/profile/data-sources/data-sources-theme.scss
@@ -1,11 +1,11 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-data-sources-theme($theme) {
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-data-sources-theme($theme) {
+}
diff --git a/src/app/mydata/components/profile/data-sources/data-sources.component.html b/src/app/mydata/components/profile/data-sources/data-sources.component.html
index 3258aeaa7..34f0b1219 100644
--- a/src/app/mydata/components/profile/data-sources/data-sources.component.html
+++ b/src/app/mydata/components/profile/data-sources/data-sources.component.html
@@ -3,6 +3,8 @@
:author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
:license: MIT -->
+
-
Valitse profiilissasi näytettävät tiedot{{ option[nameLocale] }}
+
@@ -69,7 +71,7 @@
+
diff --git a/src/app/mydata/components/profile/data-sources/data-sources.component.ts b/src/app/mydata/components/profile/data-sources/data-sources.component.ts
index 922fa26f1..7142d68f8 100644
--- a/src/app/mydata/components/profile/data-sources/data-sources.component.ts
+++ b/src/app/mydata/components/profile/data-sources/data-sources.component.ts
@@ -1,377 +1,394 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { Constants, FiltersConfig, TableColumns } from '@mydata/constants';
-import { ProfileService } from '@mydata/services/profile.service';
-import { Subscription } from 'rxjs';
-import { getUniqueSources, filterData, getName } from '@mydata/utils';
-import { ActiveFilter, DataSource, ItemMeta, SortByOption } from 'src/types';
-import { PatchService } from '@mydata/services/patch.service';
-import { DataSourcesTableComponent } from './data-sources-table/data-sources-table.component';
-import { NotificationService } from '@shared/services/notification.service';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
-import { clone, cloneDeep } from 'lodash-es';
-
-@Component({
- selector: 'app-data-sources',
- templateUrl: './data-sources.component.html',
- styleUrls: ['./data-sources.component.scss'],
-})
-export class DataSourcesComponent implements OnInit, OnDestroy {
- orcidData: Record;
- profileData: Record;
-
- devFilters = [];
- initialProfileData: any;
- visibleData: any[];
- activeFilters: {};
- parsedActiveFilters: any[];
- activeFiltersDialogConfig: any;
- queryParamsSub: Subscription;
- sortOptions: SortByOption[] = [];
- activeSort: string;
- selectedItems: any[] = [];
-
- @ViewChild(DataSourcesTableComponent)
- dataSourcesTable: DataSourcesTableComponent;
-
- locale: string;
-
- originalKeywords: {
- value: string;
- dataSources: DataSource[];
- itemMeta: ItemMeta;
- }[];
- nameField: any;
-
- constructor(
- private route: ActivatedRoute,
- private router: Router,
- public profileService: ProfileService,
- private patchService: PatchService,
- private notificationService: NotificationService,
- private appSettingsService: AppSettingsService
- ) {}
-
- ngOnInit(): void {
- this.locale = this.appSettingsService.capitalizedLocale;
-
- const draftProfile = this.profileService.getDraftProfile();
-
- /*
- * Inform user if unsaved changes in profile view
- */
- if (draftProfile) {
- this.notificationService.notify({
- notificationText: $localize`:@@youHaveUnpublishedChangesSnackbar:Sinulla on julkaisemattomia muutoksia profiilinäkymässä.`,
- buttons: [
- {
- label: $localize`:@@youHaveUnpublishedChangesSnackbarButton:Tarkasta muutokset.`,
- action: () => this.router.navigate(['mydata/profile']),
- },
- ],
- });
- }
-
- const orcidProfile = this.route.snapshot.data.orcidProfile;
- const myDataProfile = this.route.snapshot.data.myDataProfile;
-
- this.orcidData = orcidProfile;
- this.profileData = myDataProfile;
-
- // Filter out required name field which can't be hidden
- const contactGroup = myDataProfile.profileData.find(
- (group) => group.id === 'contact'
- );
-
- // Name field needs to be replaced when storing data into service
- this.nameField = contactGroup.fields.filter(
- (field) => field.id === 'name'
- )[0];
-
-
- // Set original, non-altered profile data.
- // Used in filters.
- this.initialProfileData = myDataProfile.profileData;
-
- // Initial approach on keywords aims to display all keywords as joined list
- this.storeOriginalKeywords(this.initialProfileData);
-
- // Get active filters from query parameters
- // Match params with filters config that filter keys match
- this.queryParamsSub = this.route.queryParams.subscribe((queryParams) => {
- this.doFiltering(queryParams)
- });
- this.setSortOptions();
- }
-
- doFiltering(queryParams: any){
- {
- const filterConfigFields = FiltersConfig.map((item) => item.field);
- const activeFilters = {};
-
- for (const key of Object.keys(queryParams)) {
- if (
- filterConfigFields.indexOf(key) > -1 &&
- queryParams[key]?.length > 0
- ) {
- activeFilters[key] = queryParams[key];
- }
- }
-
- // This is used in model
- this.activeFilters = activeFilters;
-
- // Single active filter value is presented as string on init.
- // Convert string typed filter value to array so it matches further filtering
- for (const key of Object.keys(activeFilters)) {
- const filter = activeFilters[key];
- if (typeof filter === 'string') {
- activeFilters[key] = [filter];
- }
- }
-
- // Create data for active filters component
- this.parseActiveFilters(activeFilters);
-
- // Configuration for displaying active filters list in dialog
- this.activeFiltersDialogConfig = {
- filtersConfig: FiltersConfig,
- };
-
- this.visibleData =
- Object.keys(activeFilters).length > 0
- ? filterData(this.initialProfileData, activeFilters)
- : this.initialProfileData;
- this.activeSort = queryParams.sort;
- }
- }
-
- async reloadProfileData(activeFilters: any) {
- this.profileService
- .getProfileData()
- .then(
- (value) => {
- if (value) {
- this.profileService.setCurrentProfileData(
- cloneDeep(value.profileData)
- );
- this.initialProfileData = clone(value.profileData);
- //this.visibleData = cloneDeep(value.profileData);
- this.storeOriginalKeywords(this.initialProfileData);
- this.clearFilters();
- }
- });
- }
-
- // Method for displaying keywords as single item.
- // Original values are stored for patch operation.
- storeOriginalKeywords = (data) => {
- const descriptionGroup = data.find((group) => group.id === 'description');
- if (descriptionGroup) {
- const keywordsField = descriptionGroup.fields.find(
- (field) => field.id === 'keywords'
- );
-
- if (keywordsField && keywordsField.items.length) {
- this.originalKeywords = [...keywordsField.items];
-
- keywordsField.items = [
- {
- value: keywordsField.items
- .map((keyword) => keyword.value)
- .join(', '),
- dataSources: keywordsField.items[0].dataSources,
- itemMeta: keywordsField.items[0].itemMeta,
- },
- ];
- }
- }
- };
-
- ngOnDestroy(): void {
- this.queryParamsSub?.unsubscribe();
- this.notificationService.clearNotification();
- }
-
- // Sort options for sort-by-button component (mobile view only)
- setSortOptions() {
- this.sortOptions = TableColumns.filter((item) => !item.sortDisabled).map(
- (item) => ({
- key: item.key,
- label: item.mobileSortLabel || item.label,
- direction: item.mobileSortDirection,
- })
- );
- }
-
- // Handle active filters for use of active filters list component
- parseActiveFilters(activeFilters) {
- const statuses = [
- { id: 'public', label: $localize`:@@public:Julkinen` },
- { id: 'private', label: $localize`:@@notPublic:Ei julkinen` },
- ];
-
- const datasets = this.initialProfileData
- .flatMap((group) => group.fields)
- .map((field) => ({ id: field.id, label: field.label }));
-
- const sources = getUniqueSources(
- this.initialProfileData,
- this.appSettingsService.capitalizedLocale
- ).map((source) => ({
- id: source.key,
- label: source.label,
- }));
-
- const mappedFilters = [...statuses, ...datasets, ...sources];
-
- this.parsedActiveFilters = [];
-
- for (const filter of Object.keys(activeFilters)) {
- activeFilters[filter].forEach((activeFilter: string) => {
- this.parsedActiveFilters.push({
- category: filter,
- value: activeFilter,
- translation: mappedFilters.find(
- (filter) => filter.id === activeFilter
- )?.label,
- });
- });
- }
- }
-
- // Removes single active filter
- removeFilter(filter: ActiveFilter) {
- const queryParams = { ...this.route.snapshot.queryParams };
-
- /*
- * Angular handles single instance of query param as string.
- * Convert param to array so it matches the case when there's
- * multiple params per category
- */
- if (typeof queryParams[filter.category] === 'string') {
- queryParams[filter.category] = [queryParams[filter.category]];
- }
-
- if (queryParams[filter.category]) {
- queryParams[filter.category] = queryParams[filter.category].filter(
- (item) => item !== filter.value
- );
- }
-
- this.router.navigate([], { queryParams: queryParams });
- }
-
- // Clears all active filters
- clearFilters() {
- const clearedQueryParams = {};
- const currentQueryParams = this.route.snapshot.queryParams;
- const active = Object.keys(this.activeFilters);
- const current = Object.keys(currentQueryParams);
-
- for (const item of current) {
- if (active.indexOf(item) === -1) {
- clearedQueryParams[item] = currentQueryParams[item];
- }
- }
-
- this.router.navigate([], { queryParams: clearedQueryParams });
- }
-
- /*
- * Patch payload is recreated on every dialog open.
- * Selection can be toggled and therefore we create payload again on every
- * selection change.
- */
- handleSelection(selectedRows) {
- selectedRows = selectedRows.map((row) => {
- return row.toString();
- });
-
- // Reset previous selection
- this.patchService.patchItems = [];
- this.patchService.cancelConfirmedPayload();
-
- const items = [];
-
- const filteredGroups = this.initialProfileData
- .flatMap((group) => group.fields)
- .filter((field) => field.items.length);
-
- for (const group of filteredGroups) {
- for (const item of group.items) {
- items.push({
- ...item,
- groupLabel: group.label,
- source: item.dataSources
- ?.map((source) => source.organization['name' + this.locale])
- .join(', '),
- });
- }
- }
-
- const selection = items.filter(
- (item) => {
- return selectedRows.includes(item.itemMeta.temporaryUniqueId.toString());
- }
- );
-
- selection.forEach((item) => {
- let payload;
-
- // Special use case for keywords when keywords are joined and displayed as single item
- if (item.itemMeta.type === FieldTypes.personKeyword) {
- payload = this.originalKeywords.map((item) => ({
- ...item.itemMeta,
- show: !item.itemMeta.show,
- }));
- } else {
- payload = {
- ...item.itemMeta,
- show: !item.itemMeta.show,
- };
- }
-
- this.patchService.addToPayload(payload);
- });
-
- this.selectedItems = selection;
- }
-
- // Update data after successful patch operation
- updateData(patchItemsArr) {
- const fields = this.visibleData.flatMap((group) => group.fields);
-
- fields.forEach((field) => {
- field.items.forEach((item) => {
- const payloadMatch = patchItemsArr.find(
- (patchItem) => patchItem.id === item.itemMeta.id
- );
- if (payloadMatch) {
- item.itemMeta.show = payloadMatch.show;
- }
- });
- });
-
- this.dataSourcesTable.clearSelections();
-
- // Add name field back to data which is stored in state
- const dataToStore = cloneDeep(this.visibleData);
-
- let contactGroup = dataToStore.find((group) => group.id === 'contact');
-
- contactGroup.fields.unshift(this.nameField);
-
- this.profileService.setCurrentProfileData(dataToStore);
- this.initialProfileData = dataToStore;
- this.reloadProfileData(null);
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Constants, FiltersConfig, TableColumns } from '@mydata/constants';
+import { ProfileService } from '@mydata/services/profile.service';
+import { Subscription } from 'rxjs';
+import { getUniqueSources, filterData, getName } from '@mydata/utils';
+import { ActiveFilter, DataSource, ItemMeta, SortByOption } from 'src/types';
+import { PatchService } from '@mydata/services/patch.service';
+import { DataSourcesTableComponent } from './data-sources-table/data-sources-table.component';
+import { NotificationService } from '@shared/services/notification.service';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { clone, cloneDeep } from 'lodash-es';
+import { DataSourcesSelectionActionsComponent } from './data-sources-selection-actions/data-sources-selection-actions.component';
+import { ActiveFiltersListComponent } from '../../../../shared/components/active-filters-list/active-filters-list.component';
+import { SortByButtonComponent } from '../../../../shared/components/buttons/sort-by-button/sort-by-button.component';
+import { DataSourcesFiltersComponent } from './data-sources-filters/data-sources-filters.component';
+import { NgTemplateOutlet, NgIf } from '@angular/common';
+import { BannerDividerComponent } from '@shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-data-sources',
+ templateUrl: './data-sources.component.html',
+ styleUrls: ['./data-sources.component.scss'],
+ standalone: true,
+ imports: [
+ NgTemplateOutlet,
+ DataSourcesFiltersComponent,
+ SortByButtonComponent,
+ NgIf,
+ ActiveFiltersListComponent,
+ DataSourcesTableComponent,
+ DataSourcesSelectionActionsComponent,
+ BannerDividerComponent
+ ]
+})
+export class DataSourcesComponent implements OnInit, OnDestroy {
+ orcidData: Record;
+ profileData: Record;
+
+ devFilters = [];
+ initialProfileData: any;
+ visibleData: any[];
+ activeFilters: {};
+ parsedActiveFilters: any[];
+ activeFiltersDialogConfig: any;
+ queryParamsSub: Subscription;
+ sortOptions: SortByOption[] = [];
+ activeSort: string;
+ selectedItems: any[] = [];
+
+ @ViewChild(DataSourcesTableComponent)
+ dataSourcesTable: DataSourcesTableComponent;
+
+ locale: string;
+
+ originalKeywords: {
+ value: string;
+ dataSources: DataSource[];
+ itemMeta: ItemMeta;
+ }[];
+ nameField: any;
+
+ constructor(
+ private route: ActivatedRoute,
+ private router: Router,
+ public profileService: ProfileService,
+ private patchService: PatchService,
+ private notificationService: NotificationService,
+ private appSettingsService: AppSettingsService
+ ) {}
+
+ ngOnInit(): void {
+ this.locale = this.appSettingsService.capitalizedLocale;
+
+ const draftProfile = this.profileService.getDraftProfile();
+
+ /*
+ * Inform user if unsaved changes in profile view
+ */
+ if (draftProfile) {
+ this.notificationService.notify({
+ notificationText: $localize`:@@youHaveUnpublishedChangesSnackbar:Sinulla on julkaisemattomia muutoksia profiilinäkymässä.`,
+ buttons: [
+ {
+ label: $localize`:@@youHaveUnpublishedChangesSnackbarButton:Tarkasta muutokset.`,
+ action: () => this.router.navigate(['mydata/profile']),
+ },
+ ],
+ });
+ }
+
+ const orcidProfile = this.route.snapshot.data.orcidProfile;
+ const myDataProfile = this.route.snapshot.data.myDataProfile;
+
+ this.orcidData = orcidProfile;
+ this.profileData = myDataProfile;
+
+ // Filter out required name field which can't be hidden
+ const contactGroup = myDataProfile.profileData.find(
+ (group) => group.id === 'contact'
+ );
+
+ // Name field needs to be replaced when storing data into service
+ this.nameField = contactGroup.fields.filter(
+ (field) => field.id === 'name'
+ )[0];
+
+
+ // Set original, non-altered profile data.
+ // Used in filters.
+ this.initialProfileData = myDataProfile.profileData;
+
+ // Initial approach on keywords aims to display all keywords as joined list
+ this.storeOriginalKeywords(this.initialProfileData);
+
+ // Get active filters from query parameters
+ // Match params with filters config that filter keys match
+ this.queryParamsSub = this.route.queryParams.subscribe((queryParams) => {
+ this.doFiltering(queryParams)
+ });
+ this.setSortOptions();
+ }
+
+ doFiltering(queryParams: any){
+ {
+ const filterConfigFields = FiltersConfig.map((item) => item.field);
+ const activeFilters = {};
+
+ for (const key of Object.keys(queryParams)) {
+ if (
+ filterConfigFields.indexOf(key) > -1 &&
+ queryParams[key]?.length > 0
+ ) {
+ activeFilters[key] = queryParams[key];
+ }
+ }
+
+ // This is used in model
+ this.activeFilters = activeFilters;
+
+ // Single active filter value is presented as string on init.
+ // Convert string typed filter value to array so it matches further filtering
+ for (const key of Object.keys(activeFilters)) {
+ const filter = activeFilters[key];
+ if (typeof filter === 'string') {
+ activeFilters[key] = [filter];
+ }
+ }
+
+ // Create data for active filters component
+ this.parseActiveFilters(activeFilters);
+
+ // Configuration for displaying active filters list in dialog
+ this.activeFiltersDialogConfig = {
+ filtersConfig: FiltersConfig,
+ };
+
+ this.visibleData =
+ Object.keys(activeFilters).length > 0
+ ? filterData(this.initialProfileData, activeFilters)
+ : this.initialProfileData;
+ this.activeSort = queryParams.sort;
+ }
+ }
+
+ async reloadProfileData(activeFilters: any) {
+ this.profileService
+ .getProfileData()
+ .then(
+ (value) => {
+ if (value) {
+ this.profileService.setCurrentProfileData(
+ cloneDeep(value.profileData)
+ );
+ this.initialProfileData = clone(value.profileData);
+ //this.visibleData = cloneDeep(value.profileData);
+ this.storeOriginalKeywords(this.initialProfileData);
+ this.clearFilters();
+ }
+ });
+ }
+
+ // Method for displaying keywords as single item.
+ // Original values are stored for patch operation.
+ storeOriginalKeywords = (data) => {
+ const descriptionGroup = data.find((group) => group.id === 'description');
+ if (descriptionGroup) {
+ const keywordsField = descriptionGroup.fields.find(
+ (field) => field.id === 'keywords'
+ );
+
+ if (keywordsField && keywordsField.items.length) {
+ this.originalKeywords = [...keywordsField.items];
+
+ keywordsField.items = [
+ {
+ value: keywordsField.items
+ .map((keyword) => keyword.value)
+ .join(', '),
+ dataSources: keywordsField.items[0].dataSources,
+ itemMeta: keywordsField.items[0].itemMeta,
+ },
+ ];
+ }
+ }
+ };
+
+ ngOnDestroy(): void {
+ this.queryParamsSub?.unsubscribe();
+ this.notificationService.clearNotification();
+ }
+
+ // Sort options for sort-by-button component (mobile view only)
+ setSortOptions() {
+ this.sortOptions = TableColumns.filter((item) => !item.sortDisabled).map(
+ (item) => ({
+ key: item.key,
+ label: item.mobileSortLabel || item.label,
+ direction: item.mobileSortDirection,
+ })
+ );
+ }
+
+ // Handle active filters for use of active filters list component
+ parseActiveFilters(activeFilters) {
+ const statuses = [
+ { id: 'public', label: $localize`:@@public:Julkinen` },
+ { id: 'private', label: $localize`:@@notPublic:Ei julkinen` },
+ ];
+
+ const datasets = this.initialProfileData
+ .flatMap((group) => group.fields)
+ .map((field) => ({ id: field.id, label: field.label }));
+
+ const sources = getUniqueSources(
+ this.initialProfileData,
+ this.appSettingsService.capitalizedLocale
+ ).map((source) => ({
+ id: source.key,
+ label: source.label,
+ }));
+
+ const mappedFilters = [...statuses, ...datasets, ...sources];
+
+ this.parsedActiveFilters = [];
+
+ for (const filter of Object.keys(activeFilters)) {
+ activeFilters[filter].forEach((activeFilter: string) => {
+ this.parsedActiveFilters.push({
+ category: filter,
+ value: activeFilter,
+ translation: mappedFilters.find(
+ (filter) => filter.id === activeFilter
+ )?.label,
+ });
+ });
+ }
+ }
+
+ // Removes single active filter
+ removeFilter(filter: ActiveFilter) {
+ const queryParams = { ...this.route.snapshot.queryParams };
+
+ /*
+ * Angular handles single instance of query param as string.
+ * Convert param to array so it matches the case when there's
+ * multiple params per category
+ */
+ if (typeof queryParams[filter.category] === 'string') {
+ queryParams[filter.category] = [queryParams[filter.category]];
+ }
+
+ if (queryParams[filter.category]) {
+ queryParams[filter.category] = queryParams[filter.category].filter(
+ (item) => item !== filter.value
+ );
+ }
+
+ this.router.navigate([], { queryParams: queryParams });
+ }
+
+ // Clears all active filters
+ clearFilters() {
+ const clearedQueryParams = {};
+ const currentQueryParams = this.route.snapshot.queryParams;
+ const active = Object.keys(this.activeFilters);
+ const current = Object.keys(currentQueryParams);
+
+ for (const item of current) {
+ if (active.indexOf(item) === -1) {
+ clearedQueryParams[item] = currentQueryParams[item];
+ }
+ }
+
+ this.router.navigate([], { queryParams: clearedQueryParams });
+ }
+
+ /*
+ * Patch payload is recreated on every dialog open.
+ * Selection can be toggled and therefore we create payload again on every
+ * selection change.
+ */
+ handleSelection(selectedRows) {
+ selectedRows = selectedRows.map((row) => {
+ return row.toString();
+ });
+
+ // Reset previous selection
+ this.patchService.patchItems = [];
+ this.patchService.cancelConfirmedPayload();
+
+ const items = [];
+
+ const filteredGroups = this.initialProfileData
+ .flatMap((group) => group.fields)
+ .filter((field) => field.items.length);
+
+ for (const group of filteredGroups) {
+ for (const item of group.items) {
+ items.push({
+ ...item,
+ groupLabel: group.label,
+ source: item.dataSources
+ ?.map((source) => source.organization['name' + this.locale])
+ .join(', '),
+ });
+ }
+ }
+
+ const selection = items.filter(
+ (item) => {
+ return selectedRows.includes(item.itemMeta.temporaryUniqueId.toString());
+ }
+ );
+
+ selection.forEach((item) => {
+ let payload;
+
+ // Special use case for keywords when keywords are joined and displayed as single item
+ if (item.itemMeta.type === FieldTypes.personKeyword) {
+ payload = this.originalKeywords.map((item) => ({
+ ...item.itemMeta,
+ show: !item.itemMeta.show,
+ }));
+ } else {
+ payload = {
+ ...item.itemMeta,
+ show: !item.itemMeta.show,
+ };
+ }
+
+ this.patchService.addToPayload(payload);
+ });
+
+ this.selectedItems = selection;
+ }
+
+ // Update data after successful patch operation
+ updateData(patchItemsArr) {
+ const fields = this.visibleData.flatMap((group) => group.fields);
+
+ fields.forEach((field) => {
+ field.items.forEach((item) => {
+ const payloadMatch = patchItemsArr.find(
+ (patchItem) => patchItem.id === item.itemMeta.id
+ );
+ if (payloadMatch) {
+ item.itemMeta.show = payloadMatch.show;
+ }
+ });
+ });
+
+ this.dataSourcesTable.clearSelections();
+
+ // Add name field back to data which is stored in state
+ const dataToStore = cloneDeep(this.visibleData);
+
+ let contactGroup = dataToStore.find((group) => group.id === 'contact');
+
+ contactGroup.fields.unshift(this.nameField);
+
+ this.profileService.setCurrentProfileData(dataToStore);
+ this.initialProfileData = dataToStore;
+ this.reloadProfileData(null);
+ }
+}
diff --git a/src/app/mydata/components/profile/draft-summary/draft-summary.component.html b/src/app/mydata/components/profile/draft-summary/draft-summary.component.html
index 2010150a9..bb58ea6bb 100644
--- a/src/app/mydata/components/profile/draft-summary/draft-summary.component.html
+++ b/src/app/mydata/components/profile/draft-summary/draft-summary.component.html
@@ -1,160 +1,159 @@
-
-
-
-
-
-
-
- {{ group.label }} ({{
- (
- group.fields
- | countFieldItems
- : {
- filterSelected: true,
- patchItems: combinedPatchItems,
- onlyCount: true
- }
- ).length
- }})
-
-
-
-
-
-
-
- Avainsanat
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ collaborationHeader }} ({{ collaborationOptions.length }})
-
-
-
-
- {{ option[nameLocale] }}
-
-
-
-
+
+
+
+
+
+
+
+ {{ group.label }} ({{
+ (
+ group.fields
+ | countFieldItems
+ : {
+ filterSelected: true,
+ patchItems: combinedPatchItems,
+ onlyCount: true
+ }
+ ).length
+ }})
+
+
+
+
+
+
+
+ Avainsanat
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ collaborationHeader }} ({{ collaborationOptions.length }})
+
+
+
+
+ {{ option[nameLocale] }}
+
+
+
+
diff --git a/src/app/mydata/components/profile/draft-summary/draft-summary.component.scss b/src/app/mydata/components/profile/draft-summary/draft-summary.component.scss
index f3ecca40e..a3daefbf2 100644
--- a/src/app/mydata/components/profile/draft-summary/draft-summary.component.scss
+++ b/src/app/mydata/components/profile/draft-summary/draft-summary.component.scss
@@ -1,14 +1,15 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-/*
- * Theme colors defined in profile.component-theme.scss
- */
-
-#collaboration-options-panel .mat-checkbox-disabled .mat-checkbox-label {
- color: #000;
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+/*
+ * Theme colors defined in profile.component-theme.scss
+ */
+
+/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+#collaboration-options-panel .mat-checkbox-disabled .mat-checkbox-label {
+ color: #000;
+}
diff --git a/src/app/mydata/components/profile/draft-summary/draft-summary.component.ts b/src/app/mydata/components/profile/draft-summary/draft-summary.component.ts
index 53d85b9b7..9397e3c2d 100644
--- a/src/app/mydata/components/profile/draft-summary/draft-summary.component.ts
+++ b/src/app/mydata/components/profile/draft-summary/draft-summary.component.ts
@@ -1,81 +1,107 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { PatchService } from '@mydata/services/patch.service';
-import { PublicationsService } from '@mydata/services/publications.service';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
-import { checkGroupPatchItem } from '@mydata/utils';
-import { combineLatest } from 'rxjs';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { DatasetsService } from '@mydata/services/datasets.service';
-import { FundingsService } from '@mydata/services/fundings.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { PatchService } from '@mydata/services/patch.service';
+import { PublicationsService } from '@mydata/services/publications.service';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { checkGroupPatchItem } from '@mydata/utils';
+import { combineLatest } from 'rxjs';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { DatasetsService } from '@mydata/services/datasets.service';
+import { FundingsService } from '@mydata/services/fundings.service';
import { CollaborationsService } from '@mydata/services/collaborations.service';
-
+import { FindByKeyValuePipe } from '../../../pipes/find-by-key-value.pipe';
+import { countFieldItemsPipe } from '../../../pipes/count-field-items.pipe';
+import { JoinItemsPipe } from '../../../../shared/pipes/join-items.pipe';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { PrimaryBadgeComponent } from '../profile-panel/primary-badge/primary-badge.component';
+import { PanelArrayItemComponent } from '../profile-panel/panel-array-item/panel-array-item.component';
+import { NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
+
@Component({
- selector: 'app-draft-summary',
- templateUrl: './draft-summary.component.html',
- styleUrls: ['./draft-summary.component.scss'],
-})
-export class DraftSummaryComponent implements OnInit, OnDestroy {
- fieldTypes = FieldTypes;
-
- @Input() profileData: any;
- @Input() collaborationOptions: any;
-
- collaborationHeader = $localize`:@@collaborationHeader:Yhteistyö`;
- selectedData: any;
-
- checkGroupPatchItem = checkGroupPatchItem;
-
- primarySource: string;
-
- openPanels = [];
-
- locale: string;
-
- combinedPatchItems: any[];
- patchPayloadSub: any;
- nameLocale = '';
-
- constructor(
- private patchService: PatchService,
- private publicationsService: PublicationsService,
- private datasetsService: DatasetsService,
- private fundingsService: FundingsService,
- private appSettingsService: AppSettingsService,
- private collaborationsService: CollaborationsService
- ) {
- this.locale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- this.collaborationOptions = this.collaborationsService.confirmedPayload;
-
- this.nameLocale = 'name' + this.appSettingsService.capitalizedLocale;
- this.patchPayloadSub = combineLatest([
- this.patchService.currentPatchItems,
- this.publicationsService.currentPublicationPayload,
- this.datasetsService.currentDatasetPayload,
- this.fundingsService.currentFundingPayload,
- ]).subscribe((res) => {
- const patchItems = res[0];
-
- const patchPortalItems = res
- .slice(1)
- .flat()
- .flatMap((item) => item.itemMeta);
-
- const combinedItems = patchItems.concat(patchPortalItems);
-
- this.combinedPatchItems = combinedItems;
- });
- }
-
- ngOnDestroy() {
- this.patchPayloadSub?.unsubscribe();
- }
-}
+ selector: 'app-draft-summary',
+ templateUrl: './draft-summary.component.html',
+ styleUrls: ['./draft-summary.component.scss'],
+ standalone: true,
+ imports: [
+ MatAccordion,
+ NgFor,
+ NgIf,
+ MatExpansionPanel,
+ MatExpansionPanelHeader,
+ MatExpansionPanelTitle,
+ NgSwitch,
+ NgSwitchCase,
+ NgSwitchDefault,
+ PanelArrayItemComponent,
+ PrimaryBadgeComponent,
+ MatCheckbox,
+ JoinItemsPipe,
+ countFieldItemsPipe,
+ FindByKeyValuePipe,
+ ],
+})
+export class DraftSummaryComponent implements OnInit, OnDestroy {
+ fieldTypes = FieldTypes;
+
+ @Input() profileData: any;
+ @Input() collaborationOptions: any;
+
+ collaborationHeader = $localize`:@@collaborationHeader:Yhteistyö`;
+ selectedData: any;
+
+ checkGroupPatchItem = checkGroupPatchItem;
+
+ primarySource: string;
+
+ openPanels = [];
+
+ locale: string;
+
+ combinedPatchItems: any[];
+ patchPayloadSub: any;
+ nameLocale = '';
+
+ constructor(
+ private patchService: PatchService,
+ private publicationsService: PublicationsService,
+ private datasetsService: DatasetsService,
+ private fundingsService: FundingsService,
+ private appSettingsService: AppSettingsService,
+ private collaborationsService: CollaborationsService
+ ) {
+ this.locale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ this.collaborationOptions = this.collaborationsService.confirmedPayload;
+
+ this.nameLocale = 'name' + this.appSettingsService.capitalizedLocale;
+ this.patchPayloadSub = combineLatest([
+ this.patchService.currentPatchItems,
+ this.publicationsService.currentPublicationPayload,
+ this.datasetsService.currentDatasetPayload,
+ this.fundingsService.currentFundingPayload,
+ ]).subscribe((res) => {
+ const patchItems = res[0];
+
+ const patchPortalItems = res
+ .slice(1)
+ .flat()
+ .flatMap((item) => item.itemMeta);
+
+ const combinedItems = patchItems.concat(patchPortalItems);
+
+ this.combinedPatchItems = combinedItems;
+ });
+ }
+
+ ngOnDestroy() {
+ this.patchPayloadSub?.unsubscribe();
+ }
+}
diff --git a/src/app/mydata/components/profile/editor-modal/editor-modal.component.html b/src/app/mydata/components/profile/editor-modal/editor-modal.component.html
index 2de7aadb6..2edcafbb2 100644
--- a/src/app/mydata/components/profile/editor-modal/editor-modal.component.html
+++ b/src/app/mydata/components/profile/editor-modal/editor-modal.component.html
@@ -4,6 +4,7 @@
:license: MIT -->
+
{
- if (item.additionalFields) {
- item.additionalFields.map(it => {
- if (it.field === 'organizationName') {
- it.field = 'organizationName' + this.localeId.charAt(0).toUpperCase() + this.localeId.charAt(1);
- }
- if (it.field === 'departmentName'){
- it.field = 'departmentName' + this.localeId.charAt(0).toUpperCase() + this.localeId.charAt(1);
- }
- });
- }
- }
- );
- }
-
- itemClicked() {
- const fields = this.editorData.fields;
-
- const items = fields
- .flatMap((field) => field.items);
-
- this.toggleAllDisabled = items.length === 0;
-
- this.allSelected = !!!items.some((item) => !item.itemMeta.show);
-
- this.selectedItems = items.filter((item) => item.itemMeta.show);
-
- this.someSelected = this.allSelected
- ? false
- : !!items.some((item) => item.itemMeta.show);
- }
-
- toggleAll(event) {
- this.allSelected = event.checked;
-
- // Change detection won't work if nested properties change
- const copy = cloneDeep(this.editorData);
-
- this.editorData = {};
- const patchItems = [];
-
- copy.fields.forEach((field) => {
- if (field.selectedPublications)
- field.selectedPublications.map((item) => (item.show = event.checked));
-
- field.items.map((item) => {
- // Single selections should always have show as true. Therefore these items shouldn't be altered
- if (!field.single && item) {
- item.itemMeta.show = event.checked;
- patchItems.push(item.itemMeta);
- }
- });
- });
-
- this.editorData = { ...copy };
- this.itemClicked();
- this.patchService.addToPayload(patchItems);
- }
-
- doDialogAction(action: string) {
- switch (action) {
- case 'save': {
- this.patchService.confirmPayload();
- this.publicationsService.confirmPayload();
- this.datasetsService.confirmPayload();
- this.fundingsService.confirmPayload();
-
- return this.onEditorClose.emit(this.editorData);
- }
- case 'cancel': {
- this.patchService.clearPayload();
- this.publicationsService.clearPayload();
- this.publicationsService.clearDeletables();
- break;
- }
- }
-
- this.onEditorClose.emit(null); // close component wrapper from parent
- this.showDialog = false;
- }
-
- onTabChange(event: MatTabChangeEvent) {
- this.currentTabIndex = event.index;
- this.searchPortalService.resetSort();
-
- if (event.index === 0) {
- this.dialogActions = [...this.basicDialogActions];
- this.itemClicked();
- } else if (event.index === 1) {
- this.dialogActions = [...this.searchFromPortalDialogActions];
- this.selectedItems = [];
- }
- }
-
- // For use of imported items
- handleSelection(items) {
- // Display 'add' button only if selected items
- if (!this.dialogActions.find((action) => action.method === 'add')) {
- this.dialogActions = [
- ...this.searchFromPortalDialogActions,
- {
- label2: `Lisää valitut ${this.portalItemGroupStringPlural} tietoihini`,
- label:
- $localize`:@@addSelected:Lisää valitut` +
- ` ${this.portalItemGroupStringPlural} ` +
- $localize`:@@toMyInformation:tietoihini`,
- primary: true,
- method: 'add',
- action: () => this.addItems(),
- },
- ];
- }
-
- if (items.length === 0) {
- this.dialogActions = this.dialogActions.filter(
- (action) => action.method !== 'add'
- );
- }
-
- this.importedItems = items;
- this.selectedItems = items;
- }
-
- // Add items that have been imported from portal search
- addItems() {
- const group = this.dialogData.data;
- let fieldType: number;
- let service: PublicationsService | DatasetsService | FundingsService;
- let label = '';
-
- switch (group.id) {
- case 'publication': {
- fieldType = FieldTypes.activityPublication;
- service = this.publicationsService;
- label = $localize`:@@addedPublications:Tuodut julkaisut`;
- break;
- }
- case 'dataset': {
- fieldType = FieldTypes.activityDataset;
- service = this.datasetsService;
- label = $localize`:@@addedDatasets:Tuodut aineistot`;
- break;
- }
- case 'funding': {
- fieldType = FieldTypes.activityFunding;
- service = this.fundingsService;
- label = $localize`:@@addedProjects:Tuodut hankkeet`;
- break;
- }
- }
-
- const selection = this.importedItems?.map((item) => ({
- ...item,
- ...(group.id === 'publication' && { publicationName: item.title }),
- dataSources: [
- {
- id: null,
- organization: {
- nameFi: CommonStrings.ttvLabel,
- nameSv: CommonStrings.ttvLabel,
- nameEn: CommonStrings.ttvLabel,
- },
- registeredDataSource: 'TTV',
- },
- ],
- itemMeta: {
- id: item.id,
- type: fieldType,
- show: true,
- primaryValue: true,
- },
- }));
-
- service.addToPayload(selection);
-
- // Merge imported items to previous data
- const itemsGroup = group.fields.find((el) => el.id === group.id);
- itemsGroup.items = itemsGroup.items.concat(selection);
-
- this.currentTabIndex = 0;
-
- // /*
- // * Create new field for recently imported items.
- // * Add selected items into imported field if user decides to add more items.
- // */
- // const imported = group.fields.find((field) => field.id === 'imported');
-
- // if (imported) {
- // imported.items = imported.items.concat(selection);
- // } else {
- // group.fields.unshift({
- // id: 'imported',
- // label: label,
- // items: selection,
- // });
- // }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ EventEmitter, Inject,
+ Input, LOCALE_ID,
+ OnInit,
+ Output,
+ ViewChild,
+ ViewEncapsulation
+} from '@angular/core';
+import { checkSelected } from '@mydata/utils';
+import { cloneDeep } from 'lodash-es';
+import { PatchService } from '@mydata/services/patch.service';
+import { PublicationsService } from '@mydata/services/publications.service';
+import { DatasetsService } from '@mydata/services/datasets.service';
+import { FundingsService } from '@mydata/services/fundings.service';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import { MatTabChangeEvent, MatTabGroup, MatTab, MatTabLabel } from '@angular/material/tabs';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { CommonStrings } from '@mydata/constants/strings';
+import {
+ PublicationColumns,
+ DatasetColumns,
+ ActivityColumns,
+ FundingColumns,
+ PortalGroupIds,
+} from '@mydata/constants';
+import { EditorModalColumn } from 'src/types';
+import { SearchPortalService } from '@mydata/services/search-portal.service';
+import { GroupTypes } from '@mydata/constants/groupTypes';
+import { DialogComponent } from '../../../../shared/components/dialog/dialog.component';
+import { SearchPortalComponent } from '../search-portal/search-portal.component';
+import { ProfileItemsTableComponent } from '../profile-items-table/profile-items-table.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ProfilePanelComponent } from '../profile-panel/profile-panel.component';
+import { AutofocusDirective } from '../../../../shared/directives/autofocus.directive';
+import { NgIf } from '@angular/common';
+
+@Component({
+ selector: 'app-editor-modal',
+ templateUrl: './editor-modal.component.html',
+ styleUrls: ['./editor-modal.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgIf,
+ MatCheckbox,
+ AutofocusDirective,
+ ProfilePanelComponent,
+ MatTabGroup,
+ MatTab,
+ FontAwesomeModule,
+ ProfileItemsTableComponent,
+ MatTabLabel,
+ SearchPortalComponent,
+ DialogComponent,
+ ],
+})
+export class EditorModalComponent implements OnInit {
+ @Input() dialogData: { data: any; trigger: number };
+ showDialog: boolean;
+ editorData: any;
+ originalEditorData: any;
+
+ allSelected: boolean;
+ someSelected: boolean;
+ selectedItems: any[];
+ toggleAllDisabled: boolean = false;
+
+ primarySource: string;
+
+ @Output() emitClose = new EventEmitter();
+ @Output() onEditorClose = new EventEmitter();
+
+ publicationPayload: any[];
+
+ checkSelected = checkSelected;
+
+ patchPayload = [];
+
+ dialogActions: any[];
+
+ basicDialogActions = [
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'cancel' },
+ { label: $localize`:@@continue:Jatka`, primary: true, method: 'save' },
+ ];
+
+ searchFromPortalDialogActions = [
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'cancel' },
+ ];
+
+ @ViewChild('selectAllCheckbox') selectAllCheckbox: MatCheckbox;
+
+ portalModalIndicatorIds = PortalGroupIds;
+
+ disabledSearchPortalModalIds = [GroupTypes.activitiesAndRewards];
+
+ faSearch = faSearch as any; // TODO: Fix type
+
+ currentTabIndex: number = 0;
+ importedItems: any[];
+ tableColumns: EditorModalColumn[];
+
+ // Dynamic strings used in tabs
+ addFromPortalTabString: string;
+ portalItemGroupStringPlural: string;
+ selectItemsTabLabel: string;
+ tabInfoText: string;
+ chooseItemsText: string;
+
+ constructor(
+ private patchService: PatchService,
+ private publicationsService: PublicationsService,
+ private datasetsService: DatasetsService,
+ private fundingsService: FundingsService,
+ private searchPortalService: SearchPortalService,
+ @Inject(LOCALE_ID) protected localeId: string,
+ ) {}
+
+ ngOnInit(): void {
+ this.showDialog = true;
+ this.editorData = this.dialogData.data;
+ this.originalEditorData = cloneDeep(this.dialogData.data);
+ this.primarySource = this.editorData.primarySource;
+ this.dialogActions = this.basicDialogActions;
+
+ this.itemClicked();
+
+ switch (this.dialogData.data.id) {
+ case 'publication': {
+ this.addFromPortalTabString = $localize`:@@publications:julkaisuja`;
+ this.portalItemGroupStringPlural = $localize`:@@publications:julkaisut`;
+ this.tableColumns = PublicationColumns;
+ this.selectItemsTabLabel = $localize`:@@selectPublications:Valitse julkaisut`;
+ this.tabInfoText = $localize`:@@myDataEditorModalPublicationTabInfo:Tiedejatutkimus.fi-palvelusta löytyvät julkaisut, joissa on ORCID-tunnuksesi, lisätään tietoihisi automaattisesti. Julkaisuja, joihin ei ole liitetty ORCID-tunnustasi, voit lisätä "Hae muita julkaisuja" -toiminnolla.`;
+ this.chooseItemsText = $localize`:@@myDataEditorModalPublicationChooseItems:Voit valita profiiliisi julkaisuja alla olevasta listasta.`;
+ break;
+ }
+ case 'dataset': {
+ this.addFromPortalTabString = $localize`:@@datasets:aineistoja`;
+ this.portalItemGroupStringPlural = $localize`:@@datasets:aineistot`;
+ this.tableColumns = DatasetColumns;
+ this.selectItemsTabLabel = $localize`:@@selectDatasets:Valitse aineistot`;
+ this.tabInfoText = $localize`:@@myDataEditorModalDatasetTabInfo:Tiedejatutkimus.fi-palvelusta löytyvät tutkimusaineistot, joissa on ORCID-tunnuksesi, lisätään profiiliisi automaattisesti. Aineistoja, joihin ei ole liitetty ORCID-tunnustasi, voit lisätä "Hae muita tutkimusaineistoja" -toiminnolla.`;
+ this.chooseItemsText = $localize`:@@myDataEditorModalDatasetChooseItems:Voit valita profiiliisi tutkimusaineistoja alla olevasta listasta.`;
+ break;
+ }
+ case 'funding': {
+ this.addFromPortalTabString = $localize`:@@fundings:hankkeita`;
+ this.selectItemsTabLabel = $localize`:@@selectProjects:Valitse hankkeet`;
+ this.portalItemGroupStringPlural = $localize`:@@fundings:hankkeet`;
+ this.tableColumns = FundingColumns;
+ this.tabInfoText = $localize`:@@myDataEditorModalFundingTabInfo:Tiedejatutkimus.fi-palvelusta löytyvät hankkeet, joissa on ORCID-tunnuksesi, lisätään tietoihisi automaattisesti. hankkeita, joihin ei ole liitetty ORCID-tunnustasi, voit lisätä "Hae muita hankkeita" -toiminnolla.`;
+ break;
+ }
+ case 'activitiesAndRewards': {
+ this.addFromPortalTabString = $localize`:@@activities:aktiviteetteja`;
+ this.selectItemsTabLabel = $localize`:@@selectActivities:Valitse aktiviteetit`;
+ this.portalItemGroupStringPlural = $localize`:@@activities:aktiviteetit`;
+ this.tableColumns = ActivityColumns;
+ this.localizeActivitiesAndRewardsColumns();
+ this.tabInfoText = $localize`:@@myDataEditorModalActivityTabInfo:Voit muokata ORCIDista tuotuja tietoja ORCID-profiilissasi. Tietojen päivittyminen voi viedä noin vuorokauden. Kotiorganisaatiosta tuotuja tietoja voi muokata vain oman organisaation järjestelmässä.`;
+ break;
+ }
+ }
+
+ this.portalItemGroupStringPlural =
+ this.portalItemGroupStringPlural?.toLowerCase();
+ }
+
+ localizeActivitiesAndRewardsColumns() {
+ this.tableColumns.forEach(item => {
+ if (item.additionalFields) {
+ item.additionalFields.map(it => {
+ if (it.field === 'organizationName') {
+ it.field = 'organizationName' + this.localeId.charAt(0).toUpperCase() + this.localeId.charAt(1);
+ }
+ if (it.field === 'departmentName'){
+ it.field = 'departmentName' + this.localeId.charAt(0).toUpperCase() + this.localeId.charAt(1);
+ }
+ });
+ }
+ }
+ );
+ }
+
+ itemClicked() {
+ const fields = this.editorData.fields;
+
+ const items = fields
+ .flatMap((field) => field.items);
+
+ this.toggleAllDisabled = items.length === 0;
+
+ this.allSelected = !!!items.some((item) => !item.itemMeta.show);
+
+ this.selectedItems = items.filter((item) => item.itemMeta.show);
+
+ this.someSelected = this.allSelected
+ ? false
+ : !!items.some((item) => item.itemMeta.show);
+ }
+
+ toggleAll(event) {
+ this.allSelected = event.checked;
+
+ // Change detection won't work if nested properties change
+ const copy = cloneDeep(this.editorData);
+
+ this.editorData = {};
+ const patchItems = [];
+
+ copy.fields.forEach((field) => {
+ if (field.selectedPublications)
+ field.selectedPublications.map((item) => (item.show = event.checked));
+
+ field.items.map((item) => {
+ // Single selections should always have show as true. Therefore these items shouldn't be altered
+ if (!field.single && item) {
+ item.itemMeta.show = event.checked;
+ patchItems.push(item.itemMeta);
+ }
+ });
+ });
+
+ this.editorData = { ...copy };
+ this.itemClicked();
+ this.patchService.addToPayload(patchItems);
+ }
+
+ doDialogAction(action: string) {
+ switch (action) {
+ case 'save': {
+ this.patchService.confirmPayload();
+ this.publicationsService.confirmPayload();
+ this.datasetsService.confirmPayload();
+ this.fundingsService.confirmPayload();
+
+ return this.onEditorClose.emit(this.editorData);
+ }
+ case 'cancel': {
+ this.patchService.clearPayload();
+ this.publicationsService.clearPayload();
+ this.publicationsService.clearDeletables();
+ break;
+ }
+ }
+
+ this.onEditorClose.emit(null); // close component wrapper from parent
+ this.showDialog = false;
+ }
+
+ onTabChange(event: MatTabChangeEvent) {
+ this.currentTabIndex = event.index;
+ this.searchPortalService.resetSort();
+
+ if (event.index === 0) {
+ this.dialogActions = [...this.basicDialogActions];
+ this.itemClicked();
+ } else if (event.index === 1) {
+ this.dialogActions = [...this.searchFromPortalDialogActions];
+ this.selectedItems = [];
+ }
+ }
+
+ // For use of imported items
+ handleSelection(items) {
+ // Display 'add' button only if selected items
+ if (!this.dialogActions.find((action) => action.method === 'add')) {
+ this.dialogActions = [
+ ...this.searchFromPortalDialogActions,
+ {
+ label2: `Lisää valitut ${this.portalItemGroupStringPlural} tietoihini`,
+ label:
+ $localize`:@@addSelected:Lisää valitut` +
+ ` ${this.portalItemGroupStringPlural} ` +
+ $localize`:@@toMyInformation:tietoihini`,
+ primary: true,
+ method: 'add',
+ action: () => this.addItems(),
+ },
+ ];
+ }
+
+ if (items.length === 0) {
+ this.dialogActions = this.dialogActions.filter(
+ (action) => action.method !== 'add'
+ );
+ }
+
+ this.importedItems = items;
+ this.selectedItems = items;
+ }
+
+ // Add items that have been imported from portal search
+ addItems() {
+ const group = this.dialogData.data;
+ let fieldType: number;
+ let service: PublicationsService | DatasetsService | FundingsService;
+ let label = '';
+
+ switch (group.id) {
+ case 'publication': {
+ fieldType = FieldTypes.activityPublication;
+ service = this.publicationsService;
+ label = $localize`:@@addedPublications:Tuodut julkaisut`;
+ break;
+ }
+ case 'dataset': {
+ fieldType = FieldTypes.activityDataset;
+ service = this.datasetsService;
+ label = $localize`:@@addedDatasets:Tuodut aineistot`;
+ break;
+ }
+ case 'funding': {
+ fieldType = FieldTypes.activityFunding;
+ service = this.fundingsService;
+ label = $localize`:@@addedProjects:Tuodut hankkeet`;
+ break;
+ }
+ }
+
+ const selection = this.importedItems?.map((item) => ({
+ ...item,
+ ...(group.id === 'publication' && { publicationName: item.title }),
+ dataSources: [
+ {
+ id: null,
+ organization: {
+ nameFi: CommonStrings.ttvLabel,
+ nameSv: CommonStrings.ttvLabel,
+ nameEn: CommonStrings.ttvLabel,
+ },
+ registeredDataSource: 'TTV',
+ },
+ ],
+ itemMeta: {
+ id: item.id,
+ type: fieldType,
+ show: true,
+ primaryValue: true,
+ },
+ }));
+
+ service.addToPayload(selection);
+
+ // Merge imported items to previous data
+ const itemsGroup = group.fields.find((el) => el.id === group.id);
+ itemsGroup.items = itemsGroup.items.concat(selection);
+
+ this.currentTabIndex = 0;
+
+ // /*
+ // * Create new field for recently imported items.
+ // * Add selected items into imported field if user decides to add more items.
+ // */
+ // const imported = group.fields.find((field) => field.id === 'imported');
+
+ // if (imported) {
+ // imported.items = imported.items.concat(selection);
+ // } else {
+ // group.fields.unshift({
+ // id: 'imported',
+ // label: label,
+ // items: selection,
+ // });
+ // }
+ }
+}
diff --git a/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.html b/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.html
index 3960f6d07..bfe145713 100644
--- a/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.html
+++ b/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.html
@@ -14,7 +14,7 @@
-
+
-
+
-
+
{{ column.label }}
@@ -50,7 +50,7 @@
-
+
@@ -79,7 +79,7 @@
-
-
-
-
-
-
-
- {{ group.fields[0].items | joinItems: 'value' }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ {{ group.fields[0].items | joinItems: 'value' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ additionalField.label }}
@@ -110,7 +110,7 @@
-
+
diff --git a/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.scss b/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.scss
index cd16ef267..89fa60f1f 100644
--- a/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.scss
+++ b/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.scss
@@ -1,87 +1,94 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - I
-
-app-profile-items-table {
- .mat-checkbox-inner-container {
- margin-top: -0.125rem !important;
- }
-
- table {
- width: 100%;
- }
-
- mat-header-row {
- min-height: unset;
- }
-
- mat-header-row,
- mat-row {
- padding: 0 1rem;
- }
-
- mat-row,
- mat-footer-row {
- min-height: unset;
- align-items: unset;
- }
-
- mat-cell,
- mat-header-cell,
- mat-footer-cell {
- padding: 0.5rem;
- align-items: flex-start;
- }
-
- mat-cell {
- margin-top: 0.25rem;
- }
-
- .mat-column-selection {
- flex: 0 0 2rem;
- overflow: visible;
- }
-
- .mat-column-show-more {
- flex: 0 0 6.5rem;
- }
-
- // Cell with multiple rows which can be expanded with 'show more'
- .expandable-cell {
- flex-direction: column;
- }
-
- mat-cell:first-of-type,
- mat-header-cell:first-of-type,
- mat-footer-cell:first-of-type {
- padding-left: 0;
- }
-
- // Delete row button
- app-secondary-button button {
- min-height: unset !important;
- padding: 0.125rem 1.5rem !important;
- margin-top: -0.5rem;
- }
-
- @media (max-width: 991px) {
- .mat-header-row {
- display: none;
- }
-
- .mat-row {
- display: block;
- padding: 0.5rem 0;
- }
-
- .mat-column-selection {
- float: right;
- }
-
- mat-cell {
- padding-left: 0;
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - I
+
+app-profile-items-table {
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-checkbox-inner-container {
+ margin-top: -0.125rem !important;
+ }
+
+ table {
+ width: 100%;
+ }
+
+ mat-header-row {
+ min-height: unset;
+ }
+
+ mat-header-row,
+ mat-row {
+ padding: 0;
+ }
+
+ mat-row,
+ mat-footer-row {
+ min-height: unset;
+ align-items: unset;
+ }
+
+ mat-cell,
+ mat-header-cell,
+ mat-footer-cell {
+ padding: 0.5rem;
+ align-items: flex-start;
+ }
+
+ mat-cell {
+ margin-top: 0.25rem;
+ }
+
+ .mat-column-selection {
+ overflow: visible;
+ }
+
+ .mat-column-show-more {
+ display: flex;
+ flex: 2;
+ flex-direction: row;
+ padding-right: 24px !important;
+ a {
+ font-weight: bold;
+ text-decoration-color: #4546B9;
+ }
+ }
+
+ // Cell with multiple rows which can be expanded with 'show more'
+ .expandable-cell {
+ flex-direction: column;
+ }
+
+ mat-cell:first-of-type,
+ mat-header-cell:first-of-type,
+ mat-footer-cell:first-of-type {
+ padding-left: 0;
+ }
+
+ // Delete row button
+ app-secondary-button button {
+ min-height: unset !important;
+ padding: 0.125rem 1.5rem !important;
+ margin-top: -0.5rem;
+ }
+
+ @media (max-width: 991px) {
+ .mat-mdc-header-row {
+ display: none;
+ }
+
+ .mat-mdc-row {
+ display: block;
+ padding: 0.5rem 0;
+ }
+
+ .mat-column-selection {
+ float: right;
+ }
+
+ mat-cell {
+ padding-left: 0;
+ }
+ }
+}
diff --git a/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.ts b/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.ts
index 29a1e6f84..624d2c51d 100644
--- a/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.ts
+++ b/src/app/mydata/components/profile/profile-items-table/profile-items-table.component.ts
@@ -1,242 +1,277 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- EventEmitter,
- Input,
- OnChanges,
- OnInit,
- Output,
- ViewEncapsulation,
-} from '@angular/core';
-import { Sort, SortDirection } from '@angular/material/sort';
-import {
- faSort,
- faSortDown,
- faSortUp,
-} from '@fortawesome/free-solid-svg-icons';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
-import { DatasetsService } from '@mydata/services/datasets.service';
-import { FundingsService } from '@mydata/services/fundings.service';
-import { PatchService } from '@mydata/services/patch.service';
-import { PublicationsService } from '@mydata/services/publications.service';
-import { EditorModalColumn, ItemMeta } from 'src/types';
-
-@Component({
- selector: 'app-profile-items-table',
- templateUrl: './profile-items-table.component.html',
- styleUrls: ['./profile-items-table.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class ProfileItemsTableComponent implements OnInit, OnChanges {
- @Input() columns: EditorModalColumn[];
- @Input() data: any;
- @Input() tableConfig: { defaultSort: string };
-
- @Output() onSingleItemToggle = new EventEmitter();
- @Output() onAllItemToggle = new EventEmitter();
-
- sortSettings: any;
-
- currentPage = 0;
- currentPageSize = 10;
- pageCount: number;
-
- showMoreArray = [];
-
- faSort = faSort;
- faSortDown = faSortDown;
- faSortUp = faSortUp;
-
- displayedColumns: string[];
-
- sortColumn = '';
- activeSort: string;
- sortDirection: SortDirection;
-
- tableRows: any[] = [];
- originalRows: any[];
- allSelected: boolean;
-
- constructor(
- private patchService: PatchService,
- private publicationsService: PublicationsService,
- private datasetsService: DatasetsService,
- private fundingsService: FundingsService
- ) {}
-
- ngOnInit(): void {
- // Configuration for mat-table.
- // Selection and show-more columns are automatically appended
- this.displayedColumns = this.columns.map((column) => column.id);
- this.displayedColumns.unshift('selection');
- this.displayedColumns.push('show-more');
-
- // Original data is used in sort reset
- this.originalRows = this.tableRows;
- }
-
- ngOnChanges() {
- if (this.data) {
- this.tableRows = this.data.fields[0].items;
- this.checkAllSelected();
- this.pageCount = Math.ceil(this.tableRows.length / this.currentPageSize);
- }
- }
-
- sort(sort: Sort) {
- // Create a shallow copy of current rows so original data doesn't change
- const data = this.tableRows.slice();
-
- if (!sort.active || sort.direction === '') {
- this.activeSort = '';
- this.tableRows = this.originalRows;
- return;
- }
-
- // Simple compare method for returning numeric value for JS sort() function
- const compare = (
- a: string | number,
- b: string | number,
- isAsc: boolean
- ) => {
- return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
- };
-
- // Inference correct sort column and sort with compare -method
- const sortables: string[] = this.columns.map((column) => column.id);
-
- // Get sortable field
- const sortField = this.columns.find(
- (column) => column.id === sort.active
- ).field;
-
- this.tableRows = data.sort((a, b) => {
- const isAsc = sort.direction === 'asc';
- const matchIndex = sortables.indexOf(sort.active);
-
- if (matchIndex > -1) {
- return compare(a[sortField], b[sortField], isAsc);
- } else {
- return 0;
- }
- });
-
- this.activeSort = sort.active;
- this.sortDirection = sort.direction;
- }
-
- paginate(event) {
- this.currentPage = event.pageIndex;
- this.currentPageSize = event.pageSize;
-
- this.pageCount = Math.ceil(this.tableRows.length / event.pageSize);
- }
-
- toggleShowMore(index) {
- const arr = this.showMoreArray;
- const item = arr.indexOf(index);
-
- if (item > -1) {
- arr.splice(item, 1);
- } else {
- this.showMoreArray.push(index);
- }
- }
-
- toggleItem(
- event: { checked: boolean },
- item: { itemMeta: ItemMeta; dataSources: any[] }
- ) {
- item.itemMeta.show = event.checked;
-
- this.onSingleItemToggle.emit();
-
- if (
- item.dataSources?.find(
- (dataSource) => dataSource.registeredDataSource === 'ttv'
- )
- ) {
- // Handle portal item patch
- switch (item.itemMeta.type) {
- case FieldTypes.activityPublication: {
- this.publicationsService.addToPayload(item);
- break;
- }
- case FieldTypes.activityDataset: {
- this.datasetsService.addToPayload(item);
- break;
- }
- case FieldTypes.activityFunding: {
- this.fundingsService.addToPayload(item);
- break;
- }
- }
- } else {
- // Regular patch
- this.patchService.addToPayload({
- ...item.itemMeta,
- show: event.checked,
- });
- }
-
- this.checkAllSelected();
- }
-
- toggleAll(event: { checked: boolean }) {
- for (const row of this.tableRows) {
- row.itemMeta.show = event.checked;
-
- this.patchService.addToPayload({
- ...row.itemMeta,
- show: event.checked
- });
- }
-
- this.tableRows = [...this.tableRows];
-
- this.checkAllSelected();
- this.onAllItemToggle.emit();
- }
-
- checkAllSelected() {
- const pageItems = this.tableRows.slice(
- this.currentPage,
- this.currentPageSize * (this.currentPage + 1)
- );
-
- this.allSelected =
- pageItems.filter((row) => row.itemMeta.show).length === pageItems.length;
- }
-
- // Removes item added from portal search but which hasn't been patched yet
- removeItem(item: { itemMeta: ItemMeta }) {
- this.tableRows = this.tableRows.filter(
- (el) => el.itemMeta.id !== item.itemMeta.id
- );
-
- this.data.fields[0].items = this.tableRows; // Updates data in summary
-
- this.onSingleItemToggle.emit();
-
- switch (item.itemMeta.type) {
- case FieldTypes.activityPublication: {
- this.publicationsService.addToDeletables(item);
- break;
- }
- case FieldTypes.activityDataset: {
- this.datasetsService.addToDeletables(item);
- break;
- }
- case FieldTypes.activityFunding: {
- this.fundingsService.addToDeletables(item);
- break;
- }
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ OnInit,
+ Output,
+ ViewEncapsulation,
+} from '@angular/core';
+import { Sort, SortDirection, MatSort, MatSortHeader } from '@angular/material/sort';
+import {
+ faSort,
+ faSortDown,
+ faSortUp,
+} from '@fortawesome/free-solid-svg-icons';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { DatasetsService } from '@mydata/services/datasets.service';
+import { FundingsService } from '@mydata/services/fundings.service';
+import { PatchService } from '@mydata/services/patch.service';
+import { PublicationsService } from '@mydata/services/publications.service';
+import { EditorModalColumn, ItemMeta } from 'src/types';
+import { IsPortalItemPipe } from '../../../pipes/is-portal-item.pipe';
+import { GetValuePipe } from '../../../pipes/get-value.pipe';
+import { CutContentPipe } from '../../../../shared/pipes/cut-content.pipe';
+import { MatPaginator } from '@angular/material/paginator';
+import { DatasetAuthorComponent } from '../../../../portal/components/single/single-dataset/dataset-author/dataset-author.component';
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { NgFor, NgIf } from '@angular/common';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
+
+@Component({
+ selector: 'app-profile-items-table',
+ templateUrl: './profile-items-table.component.html',
+ styleUrls: ['./profile-items-table.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ MatTable,
+ MatSort,
+ MatColumnDef,
+ MatHeaderCellDef,
+ MatHeaderCell,
+ MatCheckbox,
+ MatCellDef,
+ MatCell,
+ NgFor,
+ MatSortHeader,
+ NgIf,
+ FontAwesomeModule,
+ SecondaryButtonComponent,
+ DatasetAuthorComponent,
+ MatHeaderRowDef,
+ MatHeaderRow,
+ MatRowDef,
+ MatRow,
+ MatPaginator,
+ CutContentPipe,
+ GetValuePipe,
+ IsPortalItemPipe,
+ ],
+})
+export class ProfileItemsTableComponent implements OnInit, OnChanges {
+ @Input() columns: EditorModalColumn[];
+ @Input() data: any;
+ @Input() tableConfig: { defaultSort: string };
+
+ @Output() onSingleItemToggle = new EventEmitter();
+ @Output() onAllItemToggle = new EventEmitter();
+
+ sortSettings: any;
+
+ currentPage = 0;
+ currentPageSize = 10;
+ pageCount: number;
+
+ showMoreArray = [];
+
+ faSort = faSort as any; // TODO: Fix type
+ faSortDown = faSortDown as any; // TODO: Fix type
+ faSortUp = faSortUp as any; // TODO: Fix type
+
+ displayedColumns: string[];
+
+ sortColumn = '';
+ activeSort: string;
+ sortDirection: SortDirection;
+
+ tableRows: any[] = [];
+ originalRows: any[];
+ allSelected: boolean;
+
+ constructor(
+ private patchService: PatchService,
+ private publicationsService: PublicationsService,
+ private datasetsService: DatasetsService,
+ private fundingsService: FundingsService
+ ) {}
+
+ ngOnInit(): void {
+ // Configuration for mat-table.
+ // Selection and show-more columns are automatically appended
+ this.displayedColumns = this.columns.map((column) => column.id);
+ this.displayedColumns.unshift('selection');
+ this.displayedColumns.push('show-more');
+
+ // Original data is used in sort reset
+ this.originalRows = this.tableRows;
+ }
+
+ ngOnChanges() {
+ if (this.data) {
+ this.tableRows = this.data.fields[0].items;
+ this.checkAllSelected();
+ this.pageCount = Math.ceil(this.tableRows.length / this.currentPageSize);
+ }
+ }
+
+ sort(sort: Sort) {
+ // Create a shallow copy of current rows so original data doesn't change
+ const data = this.tableRows.slice();
+
+ if (!sort.active || sort.direction === '') {
+ this.activeSort = '';
+ this.tableRows = this.originalRows;
+ return;
+ }
+
+ // Simple compare method for returning numeric value for JS sort() function
+ const compare = (
+ a: string | number,
+ b: string | number,
+ isAsc: boolean
+ ) => {
+ return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+ };
+
+ // Inference correct sort column and sort with compare -method
+ const sortables: string[] = this.columns.map((column) => column.id);
+
+ // Get sortable field
+ const sortField = this.columns.find(
+ (column) => column.id === sort.active
+ ).field;
+
+ this.tableRows = data.sort((a, b) => {
+ const isAsc = sort.direction === 'asc';
+ const matchIndex = sortables.indexOf(sort.active);
+
+ if (matchIndex > -1) {
+ return compare(a[sortField], b[sortField], isAsc);
+ } else {
+ return 0;
+ }
+ });
+
+ this.activeSort = sort.active;
+ this.sortDirection = sort.direction;
+ }
+
+ paginate(event) {
+ this.currentPage = event.pageIndex;
+ this.currentPageSize = event.pageSize;
+
+ this.pageCount = Math.ceil(this.tableRows.length / event.pageSize);
+ }
+
+ toggleShowMore(index) {
+ const arr = this.showMoreArray;
+ const item = arr.indexOf(index);
+
+ if (item > -1) {
+ arr.splice(item, 1);
+ } else {
+ this.showMoreArray.push(index);
+ }
+ }
+
+ toggleItem(
+ event: { checked: boolean },
+ item: { itemMeta: ItemMeta; dataSources: any[] }
+ ) {
+ item.itemMeta.show = event.checked;
+
+ this.onSingleItemToggle.emit();
+
+ if (
+ item.dataSources?.find(
+ (dataSource) => dataSource.registeredDataSource === 'ttv'
+ )
+ ) {
+ // Handle portal item patch
+ switch (item.itemMeta.type) {
+ case FieldTypes.activityPublication: {
+ this.publicationsService.addToPayload(item);
+ break;
+ }
+ case FieldTypes.activityDataset: {
+ this.datasetsService.addToPayload(item);
+ break;
+ }
+ case FieldTypes.activityFunding: {
+ this.fundingsService.addToPayload(item);
+ break;
+ }
+ }
+ } else {
+ // Regular patch
+ this.patchService.addToPayload({
+ ...item.itemMeta,
+ show: event.checked,
+ });
+ }
+
+ this.checkAllSelected();
+ }
+
+ toggleAll(event: { checked: boolean }) {
+ for (const row of this.tableRows) {
+ row.itemMeta.show = event.checked;
+
+ this.patchService.addToPayload({
+ ...row.itemMeta,
+ show: event.checked
+ });
+ }
+
+ this.tableRows = [...this.tableRows];
+
+ this.checkAllSelected();
+ this.onAllItemToggle.emit();
+ }
+
+ checkAllSelected() {
+ const pageItems = this.tableRows.slice(
+ this.currentPage,
+ this.currentPageSize * (this.currentPage + 1)
+ );
+
+ this.allSelected =
+ pageItems.filter((row) => row.itemMeta.show).length === pageItems.length;
+ }
+
+ // Removes item added from portal search but which hasn't been patched yet
+ removeItem(item: { itemMeta: ItemMeta }) {
+ this.tableRows = this.tableRows.filter(
+ (el) => el.itemMeta.id !== item.itemMeta.id
+ );
+
+ this.data.fields[0].items = this.tableRows; // Updates data in summary
+
+ this.onSingleItemToggle.emit();
+
+ switch (item.itemMeta.type) {
+ case FieldTypes.activityPublication: {
+ this.publicationsService.addToDeletables(item);
+ break;
+ }
+ case FieldTypes.activityDataset: {
+ this.datasetsService.addToDeletables(item);
+ break;
+ }
+ case FieldTypes.activityFunding: {
+ this.fundingsService.addToDeletables(item);
+ break;
+ }
+ }
+ }
+}
diff --git a/src/app/mydata/components/profile/profile-panel/activity-item/activity-item.component.ts b/src/app/mydata/components/profile/profile-panel/activity-item/activity-item.component.ts
index 38fdb8899..33d455390 100644
--- a/src/app/mydata/components/profile/profile-panel/activity-item/activity-item.component.ts
+++ b/src/app/mydata/components/profile/profile-panel/activity-item/activity-item.component.ts
@@ -1,28 +1,31 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
import { Component, Input, OnInit } from '@angular/core';
-
+import { NgFor } from '@angular/common';
+
@Component({
- selector: 'app-activity-item',
- templateUrl: './activity-item.component.html',
-})
-export class ActivityItemComponent implements OnInit {
- @Input() rows: any[];
- @Input() smallLastItem: boolean;
-
- constructor() {}
-
- /*
- * Component renders rows of particular item.
- */
- ngOnInit() {
- // First row should be highlighted.
- // Row value is empty string if no match in profile data
- this.rows = this.rows.filter((item) => item?.toString().trim().length > 0);
- }
-}
+ selector: 'app-activity-item',
+ templateUrl: './activity-item.component.html',
+ standalone: true,
+ imports: [NgFor],
+})
+export class ActivityItemComponent implements OnInit {
+ @Input() rows: any[];
+ @Input() smallLastItem: boolean;
+
+ constructor() {}
+
+ /*
+ * Component renders rows of particular item.
+ */
+ ngOnInit() {
+ // First row should be highlighted.
+ // Row value is empty string if no match in profile data
+ this.rows = this.rows.filter((item) => item?.toString().trim().length > 0);
+ }
+}
diff --git a/src/app/mydata/components/profile/profile-panel/panel-array-item/panel-array-item.component.html b/src/app/mydata/components/profile/profile-panel/panel-array-item/panel-array-item.component.html
index c71b88858..f925044e6 100644
--- a/src/app/mydata/components/profile/profile-panel/panel-array-item/panel-array-item.component.html
+++ b/src/app/mydata/components/profile/profile-panel/panel-array-item/panel-array-item.component.html
@@ -1,150 +1,151 @@
-
-
-
-
-
- {{ _item.url }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ _item.value }}
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ _item.url }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ _item.value }}
+
+
+
+
+
+
+
+
+
diff --git a/src/app/mydata/components/profile/profile-panel/panel-array-item/panel-array-item.component.ts b/src/app/mydata/components/profile/profile-panel/panel-array-item/panel-array-item.component.ts
index 892c9448c..edb27867a 100644
--- a/src/app/mydata/components/profile/profile-panel/panel-array-item/panel-array-item.component.ts
+++ b/src/app/mydata/components/profile/profile-panel/panel-array-item/panel-array-item.component.ts
@@ -1,35 +1,51 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, OnInit } from '@angular/core';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, OnInit } from '@angular/core';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { ParseDatePipe } from '../../../../pipes/parse-date.pipe';
+import { GetLocalizedValuesPipe } from '../../../../pipes/getLocalizedValues.pipe';
+import { ActivityItemComponent } from '../activity-item/activity-item.component';
+import { NgIf, NgSwitch, NgSwitchCase, NgFor, NgTemplateOutlet, NgSwitchDefault } from '@angular/common';
+
@Component({
- selector: 'app-panel-array-item',
- templateUrl: './panel-array-item.component.html',
-})
-export class PanelArrayItemComponent implements OnInit {
- @Input() set item(item: any) {
- this._item = item;
- }
- @Input() fieldType: string;
- @Input() localized: boolean;
- @Input() summary: boolean;
-
- fieldTypes = FieldTypes;
- _item: any;
-
- isContentLocalized = false;
- locale: string;
-
- constructor(private appSettingsService: AppSettingsService) {
- this.locale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {}
-}
+ selector: 'app-panel-array-item',
+ templateUrl: './panel-array-item.component.html',
+ standalone: true,
+ imports: [
+ NgIf,
+ NgSwitch,
+ NgSwitchCase,
+ NgFor,
+ ActivityItemComponent,
+ NgTemplateOutlet,
+ NgSwitchDefault,
+ GetLocalizedValuesPipe,
+ ParseDatePipe,
+ ],
+})
+export class PanelArrayItemComponent implements OnInit {
+ @Input() set item(item: any) {
+ this._item = item;
+ }
+ @Input() fieldType: string;
+ @Input() localized: boolean;
+ @Input() summary: boolean;
+
+ fieldTypes = FieldTypes;
+ _item: any;
+
+ isContentLocalized = false;
+ locale: string;
+
+ constructor(private appSettingsService: AppSettingsService) {
+ this.locale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {}
+}
diff --git a/src/app/mydata/components/profile/profile-panel/primary-badge/primary-badge.component-theme.scss b/src/app/mydata/components/profile/profile-panel/primary-badge/primary-badge.component-theme.scss
index edda121a4..181761de1 100644
--- a/src/app/mydata/components/profile/profile-panel/primary-badge/primary-badge.component-theme.scss
+++ b/src/app/mydata/components/profile/profile-panel/primary-badge/primary-badge.component-theme.scss
@@ -1,19 +1,19 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-primary-badge-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-primary-badge {
- .unselected {
- background: mat-contrast($primary, 500);
- color: mat-color($primary);
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-primary-badge-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-primary-badge {
+ .unselected {
+ background: mat-contrast($primary, 500);
+ color: mat-color($primary);
+ }
+ }
+}
diff --git a/src/app/mydata/components/profile/profile-panel/primary-badge/primary-badge.component.ts b/src/app/mydata/components/profile/profile-panel/primary-badge/primary-badge.component.ts
index e8c97f8f7..e05aef8fc 100644
--- a/src/app/mydata/components/profile/profile-panel/primary-badge/primary-badge.component.ts
+++ b/src/app/mydata/components/profile/profile-panel/primary-badge/primary-badge.component.ts
@@ -1,42 +1,45 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input } from '@angular/core';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input } from '@angular/core';
import { PatchService } from '@mydata/services/patch.service';
-
+import { MatRipple } from '@angular/material/core';
+
@Component({
- selector: 'app-primary-badge',
- templateUrl: './primary-badge.component.html',
- styleUrls: ['./primary-badge.component.scss'],
-})
-export class PrimaryBadgeComponent {
- @Input() label: string;
- @Input() selected: boolean;
- @Input() item: any;
- @Input() data: any;
- @Input() disabled: boolean;
- @Input() disableClick: boolean;
-
- constructor(private patchService: PatchService) {}
-
- togglePrimary() {
- const currentItemMeta = this.item.itemMeta;
-
- const selectedItems = this.data.items
- .filter((item) => item.itemMeta.primaryValue)
- .flat();
-
- // Primary selections is limited to 3. Remove older selection.
- if (selectedItems.length === 3 && !currentItemMeta.primaryValue) {
- selectedItems[0].itemMeta.primaryValue = false;
- }
-
- currentItemMeta.primaryValue = !currentItemMeta.primaryValue;
-
- this.patchService.addToPayload(this.item.itemMeta);
- }
-}
+ selector: 'app-primary-badge',
+ templateUrl: './primary-badge.component.html',
+ styleUrls: ['./primary-badge.component.scss'],
+ standalone: true,
+ imports: [MatRipple],
+})
+export class PrimaryBadgeComponent {
+ @Input() label: string;
+ @Input() selected: boolean;
+ @Input() item: any;
+ @Input() data: any;
+ @Input() disabled: boolean;
+ @Input() disableClick: boolean;
+
+ constructor(private patchService: PatchService) {}
+
+ togglePrimary() {
+ const currentItemMeta = this.item.itemMeta;
+
+ const selectedItems = this.data.items
+ .filter((item) => item.itemMeta.primaryValue)
+ .flat();
+
+ // Primary selections is limited to 3. Remove older selection.
+ if (selectedItems.length === 3 && !currentItemMeta.primaryValue) {
+ selectedItems[0].itemMeta.primaryValue = false;
+ }
+
+ currentItemMeta.primaryValue = !currentItemMeta.primaryValue;
+
+ this.patchService.addToPayload(this.item.itemMeta);
+ }
+}
diff --git a/src/app/mydata/components/profile/profile-panel/profile-panel.component.html b/src/app/mydata/components/profile/profile-panel/profile-panel.component.html
index 39410345b..08aaa43c6 100644
--- a/src/app/mydata/components/profile/profile-panel/profile-panel.component.html
+++ b/src/app/mydata/components/profile/profile-panel/profile-panel.component.html
@@ -1,235 +1,237 @@
-
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/src/app/mydata/components/profile/profile-panel/profile-panel.component.ts b/src/app/mydata/components/profile/profile-panel/profile-panel.component.ts
index 53e2bf862..fb5871e23 100644
--- a/src/app/mydata/components/profile/profile-panel/profile-panel.component.ts
+++ b/src/app/mydata/components/profile/profile-panel/profile-panel.component.ts
@@ -1,252 +1,287 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- AfterViewInit,
- ChangeDetectorRef,
- Component,
- EventEmitter,
- Input,
- OnChanges,
- OnInit,
- Output,
-} from '@angular/core';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { Subscription } from 'rxjs';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
-import { checkGroupSelected, isEmptySection } from '@mydata/utils';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { SearchPortalComponent } from '../search-portal/search-portal.component';
-import { PublicationsService } from '@mydata/services/publications.service';
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
-import { PatchService } from '@mydata/services/patch.service';
-import { ProfileService } from '@mydata/services/profile.service';
-import { cloneDeep } from 'lodash-es';
-import { GroupTypes } from '@mydata/constants/groupTypes';
-import { CommonStrings } from '@mydata/constants/strings';
-import { DatasetsService } from '@mydata/services/datasets.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ AfterViewInit,
+ ChangeDetectorRef,
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ OnInit,
+ Output,
+} from '@angular/core';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { Subscription } from 'rxjs';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { checkGroupSelected, isEmptySection } from '@mydata/utils';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { SearchPortalComponent } from '../search-portal/search-portal.component';
+import { PublicationsService } from '@mydata/services/publications.service';
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
+import { PatchService } from '@mydata/services/patch.service';
+import { ProfileService } from '@mydata/services/profile.service';
+import { cloneDeep } from 'lodash-es';
+import { GroupTypes } from '@mydata/constants/groupTypes';
+import { CommonStrings } from '@mydata/constants/strings';
+import { DatasetsService } from '@mydata/services/datasets.service';
import { FundingsService } from '@mydata/services/fundings.service';
-
+import { FindSelectedItemPipe } from '../../../pipes/find-selected-item.pipe';
+import { JoinDataSourcesPipe } from '../../../pipes/join-data-sources.pipe';
+import { FilterPipe } from '../../../pipes/filter.pipe';
+import { JoinItemsPipe } from '../../../../shared/pipes/join-items.pipe';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { PrimaryBadgeComponent } from './primary-badge/primary-badge.component';
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { PanelArrayItemComponent } from './panel-array-item/panel-array-item.component';
+import { MatRadioButton } from '@angular/material/radio';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
+import { NgIf, NgFor, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+
@Component({
- selector: 'app-profile-panel',
- templateUrl: './profile-panel.component.html',
-})
-export class ProfilePanelComponent implements OnInit, OnChanges, AfterViewInit {
- @Input() primarySource: string;
- @Input() data: any;
- @Output() onSingleItemToggle = new EventEmitter();
-
- allSelected: boolean;
-
- mobileStatusSub: Subscription;
-
- fieldTypes = FieldTypes;
- groupTypes = GroupTypes;
-
- checkGroupSelected = checkGroupSelected;
- isEmptySection = isEmptySection;
-
- maxItems = 7;
- openPanels = [];
-
- locale: string;
-
- showDialog: boolean;
- dialogData: any;
- currentGroupId: any;
- dialogRef: MatDialogRef;
-
- faChevronDown = faChevronDown;
- faChevronUp = faChevronUp;
-
- disableAnimation = true;
- hasFetchedPublications: boolean;
-
- updated: Date; // Generate new Date to detect changes in pipes
- selectedPublications: any[];
- combinedItems: any[];
-
- ttvLabel = CommonStrings.ttvLabel;
- primary = CommonStrings.primary;
- setAsPrimary = CommonStrings.setAsPrimary;
-
- constructor(
- public appSettingsService: AppSettingsService,
- public dialog: MatDialog,
- private publicationsService: PublicationsService,
- private datasetsService: DatasetsService,
- private fundingsService: FundingsService,
- private profileService: ProfileService,
- private patchService: PatchService,
- private cdr: ChangeDetectorRef
- ) {
- this.locale = appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- const field = this.data.fields[0];
-
- // Combine items from groups
- const items = cloneDeep(field.items);
- if (items) {
- items.map((groupItem) => ({
- ...groupItem,
- source: groupItem.source,
- }));
-
- const result = [...items];
-
- this.combinedItems = result;
- } else {
- this.combinedItems = [];
- }
- // Merge publications that share DOI
- if (this.data.id === this.groupTypes.publication) {
- //mergePublications(field);
- }
- this.enableSaveForAddingName();
- }
-
- ngOnChanges() {
- this.cdr.detectChanges();
- }
-
- // Fix for Mat Expansion Panel render FOUC
- ngAfterViewInit(): void {
- setTimeout(() => (this.disableAnimation = false));
- }
-
- enableSaveForAddingName() {
- let noNameSelected = true;
- this.combinedItems.forEach(item => {
- if (item?.firstNames && item?.lastName && item.itemMeta.show) {
- noNameSelected = false;
- // Add item to payload to enable publishing profile only with name
- this.patchService.addToPayload({
- ...item.itemMeta,
- show: true,
- });
- }
- });
-
- // Add first name occurence to payload, in case no name was visible
- if (noNameSelected) {
- this.combinedItems.every(item => {
- if (item?.firstNames && item?.lastName) {
- this.patchService.addToPayload({
- ...item.itemMeta,
- show: true,
- });
- return false;
- } else {
- return true;
- }
- });
- }
- }
-
- toggleGroup(index: number) {
- this.openPanels.includes(index)
- ? (this.openPanels = this.openPanels.filter((item) => item !== index))
- : this.openPanels.push(index);
- }
-
- closePanel(index) {
- this.openPanels = this.openPanels.filter((item) => item !== index);
- }
-
- toggleRadioItem(event, index) {
- let selectedItem: { itemMeta: any };
- const patchObjects = [];
-
- const original = cloneDeep(
- this.profileService.currentProfileData.find(
- (group) => group.id === this.data.id
- ).fields[index]
- );
-
- const group = this.data.fields[index];
-
- const currentSelection = group.items.find(
- (item) => item.itemMeta.id === event.value
- );
-
- group.items.map((groupItem) => {
- if (currentSelection) {
- selectedItem = currentSelection;
- patchObjects.push({ ...currentSelection.itemMeta, show: true });
- }
-
- groupItem.itemMeta.show =
- groupItem.itemMeta.id === event.value ? true : false;
- });
-
- const previousSelection = original.items.find((item) => item.itemMeta.show);
-
- if (previousSelection.itemMeta.id !== selectedItem.itemMeta.id)
- patchObjects.push({ ...previousSelection.itemMeta, show: false });
-
- // Remove patch items with type same as radio button item type
- this.patchService.removeItemsWithType(selectedItem.itemMeta.type);
-
- // Add to patch items
- this.patchService.addToPayload(patchObjects);
- }
-
- toggleItem(
- event: { checked: boolean },
- item: { itemMeta: { show: boolean } }
- ) {
- item.itemMeta.show = event.checked;
-
- this.onSingleItemToggle.emit();
-
- this.patchService.addToPayload({
- ...item.itemMeta,
- show: event.checked,
- });
- }
-
- toggleJoined(event, items) {
- items.map((item) => (item.itemMeta.show = event.checked));
-
- const patchItems = items.map((item) => item.itemMeta);
-
- this.onSingleItemToggle.emit();
-
- this.patchService.addToPayload(patchItems);
- }
-
- removeItem(
- groupType: number,
- itemToRemove: { id: string; itemMeta: { id: string | null } }
- ) {
- const field = this.data.fields[0];
- const items = field.items;
-
- this.data.fields[0].items = items.filter(
- (item) => item.itemMeta.id !== itemToRemove.itemMeta.id
- );
-
- switch (groupType) {
- case this.fieldTypes.activityPublication: {
- this.publicationsService.addToDeletables(itemToRemove);
- break;
- }
- case this.fieldTypes.activityDataset: {
- this.datasetsService.addToDeletables(itemToRemove);
- break;
- }
- case this.fieldTypes.activityFunding: {
- this.fundingsService.addToDeletables(itemToRemove);
- break;
- }
- }
-
- this.updated = new Date();
- }
-}
+ selector: 'app-profile-panel',
+ templateUrl: './profile-panel.component.html',
+ standalone: true,
+ imports: [
+ NgIf,
+ MatAccordion,
+ NgFor,
+ MatExpansionPanel,
+ MatExpansionPanelHeader,
+ MatExpansionPanelTitle,
+ NgSwitch,
+ NgSwitchCase,
+ MatCheckbox,
+ NgSwitchDefault,
+ MatRadioButton,
+ PanelArrayItemComponent,
+ SecondaryButtonComponent,
+ PrimaryBadgeComponent,
+ FontAwesomeModule,
+ SearchPortalComponent,
+ JoinItemsPipe,
+ FilterPipe,
+ JoinDataSourcesPipe,
+ FindSelectedItemPipe,
+ ],
+})
+export class ProfilePanelComponent implements OnInit, OnChanges, AfterViewInit {
+ @Input() primarySource: string;
+ @Input() data: any;
+ @Output() onSingleItemToggle = new EventEmitter();
+
+ allSelected: boolean;
+
+ mobileStatusSub: Subscription;
+
+ fieldTypes = FieldTypes;
+ groupTypes = GroupTypes;
+
+ checkGroupSelected = checkGroupSelected;
+ isEmptySection = isEmptySection;
+
+ maxItems = 7;
+ openPanels = [];
+
+ locale: string;
+
+ showDialog: boolean;
+ dialogData: any;
+ currentGroupId: any;
+ dialogRef: MatDialogRef;
+
+ faChevronDown = faChevronDown;
+ faChevronUp = faChevronUp;
+
+ disableAnimation = true;
+ hasFetchedPublications: boolean;
+
+ updated: Date; // Generate new Date to detect changes in pipes
+ selectedPublications: any[];
+ combinedItems: any[];
+
+ ttvLabel = CommonStrings.ttvLabel;
+ primary = CommonStrings.primary;
+ setAsPrimary = CommonStrings.setAsPrimary;
+
+ constructor(
+ public appSettingsService: AppSettingsService,
+ public dialog: MatDialog,
+ private publicationsService: PublicationsService,
+ private datasetsService: DatasetsService,
+ private fundingsService: FundingsService,
+ private profileService: ProfileService,
+ private patchService: PatchService,
+ private cdr: ChangeDetectorRef
+ ) {
+ this.locale = appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ const field = this.data.fields[0];
+
+ // Combine items from groups
+ const items = cloneDeep(field.items);
+ if (items) {
+ items.map((groupItem) => ({
+ ...groupItem,
+ source: groupItem.source,
+ }));
+
+ const result = [...items];
+
+ this.combinedItems = result;
+ } else {
+ this.combinedItems = [];
+ }
+ // Merge publications that share DOI
+ if (this.data.id === this.groupTypes.publication) {
+ //mergePublications(field);
+ }
+ this.enableSaveForAddingName();
+ }
+
+ ngOnChanges() {
+ this.cdr.detectChanges();
+ }
+
+ // Fix for Mat Expansion Panel render FOUC
+ ngAfterViewInit(): void {
+ setTimeout(() => (this.disableAnimation = false));
+ }
+
+ enableSaveForAddingName() {
+ let noNameSelected = true;
+ this.combinedItems.forEach(item => {
+ if (item?.firstNames && item?.lastName && item.itemMeta.show) {
+ noNameSelected = false;
+ // Add item to payload to enable publishing profile only with name
+ this.patchService.addToPayload({
+ ...item.itemMeta,
+ show: true,
+ });
+ }
+ });
+
+ // Add first name occurence to payload, in case no name was visible
+ if (noNameSelected) {
+ this.combinedItems.every(item => {
+ if (item?.firstNames && item?.lastName) {
+ this.patchService.addToPayload({
+ ...item.itemMeta,
+ show: true,
+ });
+ return false;
+ } else {
+ return true;
+ }
+ });
+ }
+ }
+
+ toggleGroup(index: number) {
+ this.openPanels.includes(index)
+ ? (this.openPanels = this.openPanels.filter((item) => item !== index))
+ : this.openPanels.push(index);
+ }
+
+ closePanel(index) {
+ this.openPanels = this.openPanels.filter((item) => item !== index);
+ }
+
+ toggleRadioItem(event, index) {
+ let selectedItem: { itemMeta: any };
+ const patchObjects = [];
+
+ const original = cloneDeep(
+ this.profileService.currentProfileData.find(
+ (group) => group.id === this.data.id
+ ).fields[index]
+ );
+
+ const group = this.data.fields[index];
+
+ const currentSelection = group.items.find(
+ (item) => item.itemMeta.id === event.value
+ );
+
+ group.items.map((groupItem) => {
+ if (currentSelection) {
+ selectedItem = currentSelection;
+ patchObjects.push({ ...currentSelection.itemMeta, show: true });
+ }
+
+ groupItem.itemMeta.show =
+ groupItem.itemMeta.id === event.value ? true : false;
+ });
+
+ const previousSelection = original.items.find((item) => item.itemMeta.show);
+
+ if (previousSelection.itemMeta.id !== selectedItem.itemMeta.id)
+ patchObjects.push({ ...previousSelection.itemMeta, show: false });
+
+ // Remove patch items with type same as radio button item type
+ this.patchService.removeItemsWithType(selectedItem.itemMeta.type);
+
+ // Add to patch items
+ this.patchService.addToPayload(patchObjects);
+ }
+
+ toggleItem(
+ event: { checked: boolean },
+ item: { itemMeta: { show: boolean } }
+ ) {
+ item.itemMeta.show = event.checked;
+
+ this.onSingleItemToggle.emit();
+
+ this.patchService.addToPayload({
+ ...item.itemMeta,
+ show: event.checked,
+ });
+ }
+
+ toggleJoined(event, items) {
+ items.map((item) => (item.itemMeta.show = event.checked));
+
+ const patchItems = items.map((item) => item.itemMeta);
+
+ this.onSingleItemToggle.emit();
+
+ this.patchService.addToPayload(patchItems);
+ }
+
+ removeItem(
+ groupType: number,
+ itemToRemove: { id: string; itemMeta: { id: string | null } }
+ ) {
+ const field = this.data.fields[0];
+ const items = field.items;
+
+ this.data.fields[0].items = items.filter(
+ (item) => item.itemMeta.id !== itemToRemove.itemMeta.id
+ );
+
+ switch (groupType) {
+ case this.fieldTypes.activityPublication: {
+ this.publicationsService.addToDeletables(itemToRemove);
+ break;
+ }
+ case this.fieldTypes.activityDataset: {
+ this.datasetsService.addToDeletables(itemToRemove);
+ break;
+ }
+ case this.fieldTypes.activityFunding: {
+ this.fundingsService.addToDeletables(itemToRemove);
+ break;
+ }
+ }
+
+ this.updated = new Date();
+ }
+}
diff --git a/src/app/mydata/components/profile/profile-summary/profile-summary.component.ts b/src/app/mydata/components/profile/profile-summary/profile-summary.component.ts
index 99cc4763d..a671d9e7a 100644
--- a/src/app/mydata/components/profile/profile-summary/profile-summary.component.ts
+++ b/src/app/mydata/components/profile/profile-summary/profile-summary.component.ts
@@ -1,231 +1,256 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- Input,
- OnChanges,
- OnDestroy,
- OnInit,
- ViewEncapsulation,
-} from '@angular/core';
-
-import { cloneDeep } from 'lodash-es';
-import { take } from 'rxjs/operators';
-import { PatchService } from '@mydata/services/patch.service';
-import { PublicationsService } from '@mydata/services/publications.service';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { SnackbarService } from '@mydata/services/snackbar.service';
-import { DraftService } from '@mydata/services/draft.service';
-import { Constants, PortalGroupIds } from '@mydata/constants/';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
-import { GroupTypes, PortalGroups } from '@mydata/constants/groupTypes';
-import { CommonStrings } from '@mydata/constants/strings';
-import { DatasetsService } from '@mydata/services/datasets.service';
-import { FundingsService } from '@mydata/services/fundings.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ Input,
+ OnChanges,
+ OnDestroy,
+ OnInit,
+ ViewEncapsulation,
+} from '@angular/core';
+
+import { cloneDeep } from 'lodash-es';
+import { take } from 'rxjs/operators';
+import { PatchService } from '@mydata/services/patch.service';
+import { PublicationsService } from '@mydata/services/publications.service';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { SnackbarService } from '@mydata/services/snackbar.service';
+import { DraftService } from '@mydata/services/draft.service';
+import { Constants, PortalGroupIds } from '@mydata/constants/';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { GroupTypes, PortalGroups } from '@mydata/constants/groupTypes';
+import { CommonStrings } from '@mydata/constants/strings';
+import { DatasetsService } from '@mydata/services/datasets.service';
+import { FundingsService } from '@mydata/services/fundings.service';
import { Subscription } from 'rxjs';
-
+import { HasSelectedItemsPipe } from '../../../pipes/has-selected-items.pipe';
+import { JoinItemsPipe } from '../../../../shared/pipes/join-items.pipe';
+import { EditorModalComponent } from '../editor-modal/editor-modal.component';
+import { PanelArrayItemComponent } from '../profile-panel/panel-array-item/panel-array-item.component';
+import { SummaryDividerComponent } from './summary-divider/summary-divider.component';
+import { SummaryPortalItemsComponent } from './summary-portal-items/summary-portal-items.component';
+import { SummaryAffiliationsComponent } from './summary-affiliations/summary-affiliation.component';
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+
@Component({
- selector: 'app-profile-summary',
- templateUrl: './profile-summary.component.html',
- styleUrls: ['./profile-summary.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class ProfileSummaryComponent implements OnInit, OnDestroy, OnChanges {
- @Input() profileData: any;
- displayData: any;
-
- fieldTypes = FieldTypes;
- groupTypes = GroupTypes;
-
- filteredProfileData: any;
-
- openPanels = [];
-
- locale: string;
-
- showDialog: boolean;
- dialogData: any;
- currentIndex: number;
-
- editString = CommonStrings.reselect;
- selectString = CommonStrings.select;
-
- removeGroupItemsSub: Subscription;
-
- noPublicDataText = $localize`:@@youHaveNotSelectedAnyPublicData:Et ole vielä valinnut julkisesti näytettäviä tietoja`;
-
- summaryGroupIds = [
- GroupTypes.publication,
- GroupTypes.dataset,
- GroupTypes.education,
- GroupTypes.affiliation,
- GroupTypes.description,
- GroupTypes.activitiesAndRewards,
- GroupTypes.funding,
- ];
-
- constructor(
- private appSettingsService: AppSettingsService,
- private patchService: PatchService,
- private publicationsService: PublicationsService,
- private datasetsService: DatasetsService,
- private fundingsService: FundingsService,
- private snackbarService: SnackbarService,
- private draftService: DraftService
- ) {
- this.locale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {}
-
- ngOnChanges(): void {
- this.displayData = cloneDeep(this.profileData);
-
- // Clear imported items
- this.profileData.forEach((group) => {
- if (group.fields.find((field) => field.id === 'imported')) {
- group.fields = group.fields.filter((item) => item.id !== 'imported');
- }
- });
- }
-
- openDialog(event: MouseEvent, index: number) {
- event.stopPropagation();
- this.showDialog = true;
-
- const selectedGroup = cloneDeep(this.profileData[index]);
-
- const filteredFields = selectedGroup.fields.filter(
- (field) => field.items.length
- );
-
- // Filter out fields with 0 items from groups that don't use search from portal functionality
- if (PortalGroups.indexOf(selectedGroup.id) === -1) {
- selectedGroup.fields = filteredFields;
- }
-
- this.dialogData = {
- data: selectedGroup,
- trigger: event.detail,
- };
- this.currentIndex = index;
- }
-
- closeDialog() {
- this.showDialog = false;
- }
-
- handleChanges(result) {
- this.closeDialog();
-
- const confirmedPayLoad = this.patchService.confirmedPayLoad;
-
- this.draftService.saveDraft(this.displayData);
-
- // Groups are used in different loops to set storage items and handle removal of items
- const patchGroups = [
- { key: Constants.draftProfile, data: this.displayData },
- {
- key: Constants.draftPatchPayload,
- data: this.patchService.confirmedPayLoad,
- },
- {
- id: GroupTypes.publication,
- key: Constants.draftPublicationPatchPayload,
- service: this.publicationsService,
- data: this.publicationsService.confirmedPayload,
- deletables: this.publicationsService.deletables,
- },
- {
- id: GroupTypes.dataset,
- key: Constants.draftDatasetPatchPayload,
- service: this.datasetsService,
- data: this.datasetsService.confirmedPayload,
- deletables: this.datasetsService.deletables,
- },
- {
- id: GroupTypes.funding,
- key: Constants.draftFundingPatchPayload,
- service: this.fundingsService,
- data: this.fundingsService.confirmedPayload,
- deletables: this.fundingsService.deletables,
- },
- ];
-
- const portalPatchGroups = patchGroups.filter((group) => group.id);
-
- if (result) {
- // Adding imported data to profileData enables correct listing of imported items if
- // editor modal is opened again before imported items have been published
- const currentGroup = this.displayData[this.currentIndex];
-
- this.profileData[this.currentIndex].fields = result.fields;
- // Update binded profile data. Renders changes into summary view
- this.displayData[this.currentIndex] = result;
-
- if (PortalGroupIds.indexOf(currentGroup.id) > -1) {
- this.mergeImportedItems(currentGroup.id);
- }
-
- // Handle removal of items added from portal search
- portalPatchGroups.forEach((group) => {
- if (result.id === group.id) {
- if (group.deletables.length) {
- const removeItem = (publication: { id: string }) => {
- group.service.removeFromConfirmed(publication.id);
- };
-
- for (const [i, item] of group.deletables.entries()) {
- removeItem(item);
- if (i === group.deletables.length - 1)
- group.service.clearDeletables();
- }
-
- this.removeGroupItemsSub = group.service
- .removeItems(group.deletables)
- .pipe(take(1))
- .subscribe(() => {});
- }
- }
- });
-
- // Set draft data into storage with SSR check
- if (this.appSettingsService.isBrowser && confirmedPayLoad.length) {
- patchGroups.forEach((group) => {
- sessionStorage.setItem(group.key, JSON.stringify(group.data));
- });
-
- // Display snackbar only if user has made changes
- if (result && confirmedPayLoad.length) {
- this.snackbarService.show(
- $localize`:@@draftUpdated:Luonnos päivitetty`,
- 'success'
- );
- }
- }
- }
- }
-
- // Merge imported items for display purposes.
- mergeImportedItems(id) {
- const group = this.displayData.find((item) => item.id === id);
-
- if (group?.fields?.length > 1) {
- const imported = group.fields.find((item) => item.id === 'imported');
- const existing = group.fields.find((item) => item.id === id);
-
- const merged = existing.items.concat(imported.items);
-
- group.fields = [{ ...existing, items: merged }];
- }
- }
-
- ngOnDestroy(): void {
- this.removeGroupItemsSub?.unsubscribe();
- }
-}
+ selector: 'app-profile-summary',
+ templateUrl: './profile-summary.component.html',
+ styleUrls: ['./profile-summary.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgFor,
+ NgIf,
+ SecondaryButtonComponent,
+ NgSwitch,
+ NgSwitchCase,
+ SummaryAffiliationsComponent,
+ SummaryPortalItemsComponent,
+ NgSwitchDefault,
+ SummaryDividerComponent,
+ PanelArrayItemComponent,
+ EditorModalComponent,
+ JoinItemsPipe,
+ HasSelectedItemsPipe,
+ ],
+})
+export class ProfileSummaryComponent implements OnInit, OnDestroy, OnChanges {
+ @Input() profileData: any;
+ displayData: any;
+
+ fieldTypes = FieldTypes;
+ groupTypes = GroupTypes;
+
+ filteredProfileData: any;
+
+ openPanels = [];
+
+ locale: string;
+
+ showDialog: boolean;
+ dialogData: any;
+ currentIndex: number;
+
+ editString = CommonStrings.reselect;
+ selectString = CommonStrings.select;
+
+ removeGroupItemsSub: Subscription;
+
+ noPublicDataText = $localize`:@@youHaveNotSelectedAnyPublicData:Et ole vielä valinnut julkisesti näytettäviä tietoja`;
+
+ summaryGroupIds = [
+ GroupTypes.publication,
+ GroupTypes.dataset,
+ GroupTypes.education,
+ GroupTypes.affiliation,
+ GroupTypes.description,
+ GroupTypes.activitiesAndRewards,
+ GroupTypes.funding,
+ ];
+
+ constructor(
+ private appSettingsService: AppSettingsService,
+ private patchService: PatchService,
+ private publicationsService: PublicationsService,
+ private datasetsService: DatasetsService,
+ private fundingsService: FundingsService,
+ private snackbarService: SnackbarService,
+ private draftService: DraftService
+ ) {
+ this.locale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {}
+
+ ngOnChanges(): void {
+ this.displayData = cloneDeep(this.profileData);
+
+ // Clear imported items
+ this.profileData.forEach((group) => {
+ if (group.fields.find((field) => field.id === 'imported')) {
+ group.fields = group.fields.filter((item) => item.id !== 'imported');
+ }
+ });
+ }
+
+ openDialog(event: MouseEvent, index: number) {
+ event.stopPropagation();
+ this.showDialog = true;
+
+ const selectedGroup = cloneDeep(this.profileData[index]);
+
+ const filteredFields = selectedGroup.fields.filter(
+ (field) => field.items.length
+ );
+
+ // Filter out fields with 0 items from groups that don't use search from portal functionality
+ if (PortalGroups.indexOf(selectedGroup.id) === -1) {
+ selectedGroup.fields = filteredFields;
+ }
+
+ this.dialogData = {
+ data: selectedGroup,
+ trigger: event.detail,
+ };
+ this.currentIndex = index;
+ }
+
+ closeDialog() {
+ this.showDialog = false;
+ }
+
+ handleChanges(result) {
+ this.closeDialog();
+
+ const confirmedPayLoad = this.patchService.confirmedPayLoad;
+
+ this.draftService.saveDraft(this.displayData);
+
+ // Groups are used in different loops to set storage items and handle removal of items
+ const patchGroups = [
+ { key: Constants.draftProfile, data: this.displayData },
+ {
+ key: Constants.draftPatchPayload,
+ data: this.patchService.confirmedPayLoad,
+ },
+ {
+ id: GroupTypes.publication,
+ key: Constants.draftPublicationPatchPayload,
+ service: this.publicationsService,
+ data: this.publicationsService.confirmedPayload,
+ deletables: this.publicationsService.deletables,
+ },
+ {
+ id: GroupTypes.dataset,
+ key: Constants.draftDatasetPatchPayload,
+ service: this.datasetsService,
+ data: this.datasetsService.confirmedPayload,
+ deletables: this.datasetsService.deletables,
+ },
+ {
+ id: GroupTypes.funding,
+ key: Constants.draftFundingPatchPayload,
+ service: this.fundingsService,
+ data: this.fundingsService.confirmedPayload,
+ deletables: this.fundingsService.deletables,
+ },
+ ];
+
+ const portalPatchGroups = patchGroups.filter((group) => group.id);
+
+ if (result) {
+ // Adding imported data to profileData enables correct listing of imported items if
+ // editor modal is opened again before imported items have been published
+ const currentGroup = this.displayData[this.currentIndex];
+
+ this.profileData[this.currentIndex].fields = result.fields;
+ // Update binded profile data. Renders changes into summary view
+ this.displayData[this.currentIndex] = result;
+
+ if (PortalGroupIds.indexOf(currentGroup.id) > -1) {
+ this.mergeImportedItems(currentGroup.id);
+ }
+
+ // Handle removal of items added from portal search
+ portalPatchGroups.forEach((group) => {
+ if (result.id === group.id) {
+ if (group.deletables.length) {
+ const removeItem = (publication: { id: string }) => {
+ group.service.removeFromConfirmed(publication.id);
+ };
+
+ for (const [i, item] of group.deletables.entries()) {
+ removeItem(item);
+ if (i === group.deletables.length - 1)
+ group.service.clearDeletables();
+ }
+
+ this.removeGroupItemsSub = group.service
+ .removeItems(group.deletables)
+ .pipe(take(1))
+ .subscribe(() => {});
+ }
+ }
+ });
+
+ // Set draft data into storage with SSR check
+ if (this.appSettingsService.isBrowser && confirmedPayLoad.length) {
+ patchGroups.forEach((group) => {
+ sessionStorage.setItem(group.key, JSON.stringify(group.data));
+ });
+
+ // Display snackbar only if user has made changes
+ if (result && confirmedPayLoad.length) {
+ this.snackbarService.show(
+ $localize`:@@draftUpdated:Luonnos päivitetty`,
+ 'success'
+ );
+ }
+ }
+ }
+ }
+
+ // Merge imported items for display purposes.
+ mergeImportedItems(id) {
+ const group = this.displayData.find((item) => item.id === id);
+
+ if (group?.fields?.length > 1) {
+ const imported = group.fields.find((item) => item.id === 'imported');
+ const existing = group.fields.find((item) => item.id === id);
+
+ const merged = existing.items.concat(imported.items);
+
+ group.fields = [{ ...existing, items: merged }];
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.removeGroupItemsSub?.unsubscribe();
+ }
+}
diff --git a/src/app/mydata/components/profile/profile-summary/summary-affiliations/summary-affiliation.component.ts b/src/app/mydata/components/profile/profile-summary/summary-affiliations/summary-affiliation.component.ts
index 8c4837f18..e195a7ad7 100644
--- a/src/app/mydata/components/profile/profile-summary/summary-affiliations/summary-affiliation.component.ts
+++ b/src/app/mydata/components/profile/profile-summary/summary-affiliations/summary-affiliation.component.ts
@@ -1,50 +1,63 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, OnInit } from '@angular/core';
-import { sortItemsByNew } from '@mydata/utils';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, OnInit } from '@angular/core';
+import { sortItemsByNew } from '@mydata/utils';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { GetItemsByPipe } from '../../../../pipes/get-items-by.pipe';
+import { SummaryDividerComponent } from '../summary-divider/summary-divider.component';
+import { NgIf, NgFor, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
+
@Component({
- selector: 'app-summary-affiliations',
- templateUrl: './summary-affiliation.component.html',
-})
-export class SummaryAffiliationsComponent implements OnInit {
- @Input() data: any;
- @Input() fieldTypes: any;
-
- sortItemsByNew = sortItemsByNew;
- sortedItems: any[];
-
- locale = 'Fi';
-
- columns = [
- {
- label: $localize`:@@organizationUnit:Organisaation yksikkö`,
- field: 'departmentName',
- },
- { label: $localize`:@@title:Nimike`, field: 'positionName' },
- {
- label: $localize`:@@researchCommunity:Tutkimusyhteisö`,
- field: 'researchCommunity',
- },
- {
- label: $localize`:@@roleInResearchCommunity:Rooli tutkimusyhteisössä`,
- field: 'roleInResearchCommunity',
- },
- ];
-
- constructor(private appSettingsService: AppSettingsService) {}
-
- ngOnInit(): void {
- this.locale = this.appSettingsService.capitalizedLocale;
- this.sortedItems = this.sortItemsByNew(
- this.data.items,
- 'itemMeta.primaryValue'
- );
- }
-}
+ selector: 'app-summary-affiliations',
+ templateUrl: './summary-affiliation.component.html',
+ standalone: true,
+ imports: [
+ NgIf,
+ NgFor,
+ SummaryDividerComponent,
+ NgSwitch,
+ NgSwitchCase,
+ NgSwitchDefault,
+ GetItemsByPipe,
+ ],
+})
+export class SummaryAffiliationsComponent implements OnInit {
+ @Input() data: any;
+ @Input() fieldTypes: any;
+
+ sortItemsByNew = sortItemsByNew;
+ sortedItems: any[];
+
+ locale = 'Fi';
+
+ columns = [
+ {
+ label: $localize`:@@organizationUnit:Organisaation yksikkö`,
+ field: 'departmentName',
+ },
+ { label: $localize`:@@title:Nimike`, field: 'positionName' },
+ {
+ label: $localize`:@@researchCommunity:Tutkimusyhteisö`,
+ field: 'researchCommunity',
+ },
+ {
+ label: $localize`:@@roleInResearchCommunity:Rooli tutkimusyhteisössä`,
+ field: 'roleInResearchCommunity',
+ },
+ ];
+
+ constructor(private appSettingsService: AppSettingsService) {}
+
+ ngOnInit(): void {
+ this.locale = this.appSettingsService.capitalizedLocale;
+ this.sortedItems = this.sortItemsByNew(
+ this.data.items,
+ 'itemMeta.primaryValue'
+ );
+ }
+}
diff --git a/src/app/mydata/components/profile/profile-summary/summary-divider/summary-divider.component.ts b/src/app/mydata/components/profile/profile-summary/summary-divider/summary-divider.component.ts
index f8de6c7ae..dacad96ea 100644
--- a/src/app/mydata/components/profile/profile-summary/summary-divider/summary-divider.component.ts
+++ b/src/app/mydata/components/profile/profile-summary/summary-divider/summary-divider.component.ts
@@ -1,21 +1,22 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input } from '@angular/core';
+
@Component({
- selector: 'app-summary-divider',
- templateUrl: './summary-divider.component.html',
- styleUrls: ['./summary-divider.component.scss'],
-})
-export class SummaryDividerComponent {
- @Input() thick: boolean;
-
- constructor() {}
-
- ngOnInit(): void {}
-}
+ selector: 'app-summary-divider',
+ templateUrl: './summary-divider.component.html',
+ styleUrls: ['./summary-divider.component.scss'],
+ standalone: true,
+})
+export class SummaryDividerComponent {
+ @Input() thick: boolean;
+
+ constructor() {}
+
+ ngOnInit(): void {}
+}
diff --git a/src/app/mydata/components/profile/profile-summary/summary-portal-items/summary-portal-items.component.ts b/src/app/mydata/components/profile/profile-summary/summary-portal-items/summary-portal-items.component.ts
index 0af9836f7..f063bbb7f 100644
--- a/src/app/mydata/components/profile/profile-summary/summary-portal-items/summary-portal-items.component.ts
+++ b/src/app/mydata/components/profile/profile-summary/summary-portal-items/summary-portal-items.component.ts
@@ -1,52 +1,65 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, OnInit } from '@angular/core';
-import { mergePublications, sortItemsByNew } from '@mydata/utils';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, OnInit } from '@angular/core';
+import { mergePublications, sortItemsByNew } from '@mydata/utils';
import { cloneDeep } from 'lodash-es';
-
+import { MatButton } from '@angular/material/button';
+import { SummaryDividerComponent } from '../summary-divider/summary-divider.component';
+import { PanelArrayItemComponent } from '../../profile-panel/panel-array-item/panel-array-item.component';
+import { NgFor, NgIf, LowerCasePipe } from '@angular/common';
+
@Component({
- selector: 'app-summary-portal-items',
- templateUrl: './summary-portal-items.component.html',
-})
-export class SummaryPortalItemsComponent implements OnInit {
- @Input() data: any;
- @Input() fieldType: any;
- @Input() sortField: string;
- @Input() showMoreLabel: string;
-
- sortItemsByNew = sortItemsByNew;
- sortedItems: any[] = [];
-
- itemDisplayCount = 3;
-
- showMorePrefix = $localize`:@@showAll:Näytä kaikki`;
-
- constructor() {}
-
- ngOnInit(): void {
- // User can have duplicate publications, one from ORCID and one from Research.fi
- // Merge these and display only one
- const dataCopy = cloneDeep(this.data);
-
- if (dataCopy.id === 'publication') {
- // mergePublications(dataCopy);
- }
-
- // Display only selected items
- if (dataCopy?.items) {
- this.sortedItems = this.sortItemsByNew(
- dataCopy.items,
- this.sortField
- ).filter((item) => item.itemMeta.show);
- }
- }
-
- showAllItems() {
- this.itemDisplayCount = this.sortedItems.length;
- }
-}
+ selector: 'app-summary-portal-items',
+ templateUrl: './summary-portal-items.component.html',
+ standalone: true,
+ imports: [
+ NgFor,
+ NgIf,
+ PanelArrayItemComponent,
+ SummaryDividerComponent,
+ MatButton,
+ LowerCasePipe,
+ ],
+})
+export class SummaryPortalItemsComponent implements OnInit {
+ @Input() data: any;
+ @Input() fieldType: any;
+ @Input() sortField: string;
+ @Input() showMoreLabel: string;
+
+ sortItemsByNew = sortItemsByNew;
+ sortedItems: any[] = [];
+
+ itemDisplayCount = 3;
+
+ showMorePrefix = $localize`:@@showAll:Näytä kaikki`;
+
+ constructor() {}
+
+ ngOnInit(): void {
+ // User can have duplicate publications, one from ORCID and one from Research.fi
+ // Merge these and display only one
+ const dataCopy = cloneDeep(this.data);
+
+ if (dataCopy.id === 'publication') {
+ // mergePublications(dataCopy);
+ }
+
+ // Display only selected items
+ if (dataCopy?.items) {
+ this.sortedItems = this.sortItemsByNew(
+ dataCopy.items,
+ this.sortField
+ ).filter((item) => item.itemMeta.show);
+ }
+ }
+
+ showAllItems() {
+ this.itemDisplayCount = this.sortedItems.length;
+ }
+}
diff --git a/src/app/mydata/components/profile/profile.component-theme.scss b/src/app/mydata/components/profile/profile.component-theme.scss
index eb3edcb49..c2251a37c 100644
--- a/src/app/mydata/components/profile/profile.component-theme.scss
+++ b/src/app/mydata/components/profile/profile.component-theme.scss
@@ -1,29 +1,29 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-profile-theme($theme) {
- app-profile,
- app-draft-summary {
- .row.profile {
- border-bottom: 0.25rem solid mat-color($primary, 500);
- }
-
- .profile-card {
- border-color: mat-color($primary, 100);
- }
-
- .group-wrapper:nth-child(even) {
- background-color: mat-color($primary, 50);
- }
-
- .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
- background-color: mat-color($primary, 500);
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-profile-theme($theme) {
+ app-profile,
+ app-draft-summary {
+ .row.profile {
+ border-bottom: 0.25rem solid mat-color($primary, 500);
+ }
+
+ .profile-card {
+ border-color: mat-color($primary, 100);
+ }
+
+ .group-wrapper:nth-child(even) {
+ background-color: mat-color($primary, 50);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background {
+ background-color: mat-color($primary, 500);
+ }
+ }
+}
diff --git a/src/app/mydata/components/profile/profile.component.html b/src/app/mydata/components/profile/profile.component.html
index 0d0e224ca..e39395174 100644
--- a/src/app/mydata/components/profile/profile.component.html
+++ b/src/app/mydata/components/profile/profile.component.html
@@ -5,6 +5,8 @@
-
-
- {{ value.locale.toUpperCase() }}
-
-
-
-
- {{ value.value }}
-
-
-
-
- {{ value.locale.toUpperCase() }}
-
-
-
-
- {{ value.value }}
-
-
+
+
+ {{ value.locale.toUpperCase() }}
+
+
+
+
+ {{ value.value }}
+
+
+
+
+ {{ value.locale.toUpperCase() }}
+
+
+
+
+ {{ value.value }}
+
+
-
-
-
-
-
- {{ field.label }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-- Ensisijaiset näytetään profiilissasi listan ensimmäisinä. -
-
-
-
-
-
-
-
- {{ field.items | joinItems: 'value' }}
-
-
-
-
-
- {{ field.items | joinDataSources: locale }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ ds.organization['name' + locale] }}
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+ {{ field.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
++ Ensisijaiset näytetään profiilissasi listan ensimmäisinä. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ field.items | joinItems: 'value' }}
+
+
+
+
+
+ {{ field.items | joinDataSources: locale }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ ds.organization['name' + locale] }}
+
+
+
+
+
+
+
+
+
+
@@ -193,7 +195,7 @@
-
+
diff --git a/src/app/mydata/components/profile/profile.component.scss b/src/app/mydata/components/profile/profile.component.scss
index 386c07897..bb3dd4994 100644
--- a/src/app/mydata/components/profile/profile.component.scss
+++ b/src/app/mydata/components/profile/profile.component.scss
@@ -1,33 +1,33 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-app-profile {
- .profile-image-container {
- border: 1px solid;
- border-radius: 50%;
- width: 4rem;
- height: 4rem;
- padding: 0.5rem;
- margin: 0 0.5rem;
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+app-profile {
+ .profile-image-container {
+ border: 1px solid;
+ border-radius: 50%;
+ width: 4rem;
+ height: 4rem;
+ padding: 0.5rem;
+ margin: 0 0.5rem;
}
-
- .mat-checkbox-inner-container {
- margin-top: 4px;
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-checkbox-inner-container {
+ margin-top: 4px;
}
-
- .mat-checkbox-layout {
- white-space: normal;
- }
-
- app-profile-card,
- .profile-card {
- display: block;
- padding: 1rem;
- margin: 1rem 0;
- border: 0.75rem solid;
- }
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-checkbox-layout {
+ white-space: normal;
+ }
+
+ app-profile-card,
+ .profile-card {
+ display: block;
+ padding: 1rem;
+ margin: 1rem 0;
+ border: 0.75rem solid;
+ }
+}
diff --git a/src/app/mydata/components/profile/profile.component.ts b/src/app/mydata/components/profile/profile.component.ts
index ba4cf8f8b..9415effc4 100644
--- a/src/app/mydata/components/profile/profile.component.ts
+++ b/src/app/mydata/components/profile/profile.component.ts
@@ -1,505 +1,534 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- ViewEncapsulation,
- ViewChild,
- ElementRef,
- OnDestroy,
-} from '@angular/core';
-import { ProfileService } from '@mydata/services/profile.service';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
-import { map, takeUntil } from 'rxjs/operators';
-import { MatDialog } from '@angular/material/dialog';
-import { mergePublications } from '@mydata/utils';
-import { ActivatedRoute, Router } from '@angular/router';
-import { DraftService } from '@mydata/services/draft.service';
-import { PatchService } from '@mydata/services/patch.service';
-import { SnackbarService } from '@mydata/services/snackbar.service';
-import { Constants } from '@mydata/constants/';
-import { PublicationsService } from '@mydata/services/publications.service';
-import { CommonStrings } from '@mydata/constants/strings';
-import { getName } from '@mydata/utils';
-import { UtilityService } from '@shared/services/utility.service';
-import { DatasetsService } from '@mydata/services/datasets.service';
-import { FundingsService } from '@mydata/services/fundings.service';
-import { CollaborationsService } from '@mydata/services/collaborations.service';
-import { lastValueFrom, Observable, Subject, timer, BehaviorSubject, combineLatest } from 'rxjs';
-import { cloneDeep } from 'lodash-es';
-import { Person } from '@portal/models/person/person.model';
-import { SingleItemService } from '@portal/services/single-item.service';
-
-@Component({
- selector: 'app-profile',
- templateUrl: './profile.component.html',
- styleUrls: ['./profile.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class ProfileComponent implements OnInit, OnDestroy {
- @ViewChild('collaborationComponentRef') collaborationComponentRef;
-
- orcidData: any;
- profileData: any;
- testData: any;
- orcid: string;
- currentProfileName: string;
-
- publishUpdatedProfile = $localize`:@@publishUpdatedProfile:Julkaise päivitetty profiili`;
- discardChanges = $localize`:@@discardChanges:Hylkää muutokset`;
- termsForTool = CommonStrings.termsForTool;
- processingOfPersonalData = CommonStrings.processingOfPersonalData;
-
- republishUpdatedProfile = $localize`:@@mydata.profile.republish-modal.title:Julkaise piilotettu profiili`;
- republishText = $localize`:@@publish:Julkaise`;
-
- // Dialog variables
- showDialog: boolean;
- dialogTitle: any;
- dialogTemplate: any;
- dialogExtraContentTemplate: any;
- currentDialogActions: any[];
- disableDialogClose: boolean;
- showDataToPublish = $localize`:@@showDataToPublish:Näytä julkaistavat tiedot`;
- basicDialogActions = [
- { label: $localize`:@@close:Sulje`, primary: true, method: 'close' },
- ];
- publishUpdatedProfileDialogActions = [
- {
- label: this.showDataToPublish,
- labelToggle: {
- on: this.showDataToPublish,
- off: $localize`:@@hideDataToPublish:Piilota julkaistavat tiedot`,
- },
- primary: false,
- method: 'preview',
- flexStart: true,
- },
- { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'cancel' },
- { label: $localize`:@@publish:Julkaise`, primary: true, method: 'publish' },
- ];
- discardChangesActions = [
- { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
- {
- label: this.discardChanges,
- primary: true,
- method: 'discard',
- },
- ];
-
- republishActions = [
- { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
- {
- label: this.republishText,
- primary: true,
- method: 'republish',
- },
- ];
-
- connProblem: boolean;
- loading: boolean;
-
- draftPayload: any[];
-
- previousRoute: string | undefined;
- showWelcomeDialog = false;
-
- private unsubscribe = new Subject();
-
- // person$: Observable;
- person$ = new BehaviorSubject(null);
-
- hasProfile$: Observable;
- profileVisible$ = this.profileService.getProfileVisibility();
-
- edited$ = combineLatest([
- this.publicationsService.currentPublicationPayload,
- this.datasetsService.currentDatasetPayload,
- this.fundingsService.currentFundingPayload,
- this.patchService.currentPatchItems,
- this.collaborationsService.currentCollaborationsPayload,
- ]).pipe(
- map(([pubs, datasets, fundings, patches, collabs]) => !!(pubs.length || datasets.length || fundings.length || patches.length || collabs.length))
- );
-
- constructor(
- public profileService: ProfileService,
- public oidcSecurityService: OidcSecurityService,
- public appSettingsService: AppSettingsService,
- public dialog: MatDialog,
- private router: Router,
- private route: ActivatedRoute,
- private snackbarService: SnackbarService,
- public draftService: DraftService,
- public patchService: PatchService,
- public collaborationsService: CollaborationsService,
- public publicationsService: PublicationsService,
- public datasetsService: DatasetsService,
- public fundingsService: FundingsService,
- private utilityService: UtilityService,
- private singleItemService: SingleItemService,
- ) {
- this.profileService.initializeProfileVisibility();
-
- this.testData = profileService.testData;
-
- // Find if user has navigated to profile route from service deployment stepper
- // Display welcome dialog if so
- this.previousRoute = this.router
- .getCurrentNavigation()
- .previousNavigation?.finalUrl.toString();
- }
-
- ngOnInit(): void {
- this.utilityService.setMyDataTitle($localize`:@@profile:Profiili`);
-
- // Get data from resolver
- const orcidProfile = this.route.snapshot.data.orcidProfile;
- const myDataProfile = this.route.snapshot.data.myDataProfile;
-
- this.orcidData = orcidProfile;
- this.orcid = orcidProfile.orcid;
-
- /*
- * Draft data is stored in session storage.
- * Set draft data to profile view if draft available.
- * Drafts are deleted with reset and publish methods
- */
- if (this.appSettingsService.isBrowser) {
- const draft = sessionStorage.getItem(Constants.draftProfile);
- const draftPatchPayload = JSON.parse(
- sessionStorage.getItem(Constants.draftPatchPayload)
- );
- const draftPublicationPatchPayload = JSON.parse(
- sessionStorage.getItem(Constants.draftPublicationPatchPayload)
- );
- const draftDatasetPatchPayload = JSON.parse(
- sessionStorage.getItem(Constants.draftDatasetPatchPayload)
- );
- const draftCollaborationPatchPayload = JSON.parse(
- sessionStorage.getItem(Constants.draftCollaborationPatchPayload)
- );
- const draftFundingPatchPayload = JSON.parse(
- sessionStorage.getItem(Constants.draftFundingPatchPayload)
- );
-
- this.draftPayload = draftPatchPayload;
-
- // Display either draft profile from storage or profile from database
- if (draft) {
- const parsedDraft = JSON.parse(draft);
- this.draftService.saveDraft(parsedDraft);
- this.profileData = parsedDraft;
- this.profileService.setEditorProfileName(getName(parsedDraft));
- } else {
- this.profileData = myDataProfile.profileData;
- this.profileService.setEditorProfileName(myDataProfile.name);
- }
-
- // Profile, publications, datasets, collaborations and fundings have separate draft data
- const draftItems = [
- { payload: draftPatchPayload, service: this.patchService },
- {
- payload: draftPublicationPatchPayload,
- service: this.publicationsService,
- },
- {
- payload: draftDatasetPatchPayload,
- service: this.datasetsService,
- },
- {
- payload: draftFundingPatchPayload,
- service: this.fundingsService,
- },
- {
- payload: draftCollaborationPatchPayload,
- service: this.collaborationsService,
- },
- ];
-
- // Set draft item into view if draft available in storage
- draftItems.forEach((item) => {
- if (item.payload && !this.profileService.profileInitialized) {
- item.service.addToPayload(item.payload);
- item.service.confirmPayload();
- }
- });
- }
-
- this.profileService.profileInitialized = true;
-
- this.updatePerson();
-
- this.hasProfile$ = this.person$.pipe(map((person) => person != null ));
- }
-
- openDialog(title: string, template: any, extraContentTemplate: any, actions: any, disableDialogClose: boolean) {
- this.dialogTitle = title;
- this.showDialog = true;
- this.dialogTemplate = template;
- this.dialogExtraContentTemplate = extraContentTemplate;
- this.currentDialogActions = actions;
- this.disableDialogClose = disableDialogClose;
- }
-
- doDialogAction(action: string) {
- this.dialog.closeAll();
- this.dialogTitle = '';
- this.showDialog = false;
- this.dialogTemplate = null;
-
- switch (action) {
- case 'publish': {
- this.publish();
- break;
- }
- case 'discard': {
- this.reset();
- break;
- }
- case 'republish': {
- this.republish();
- break;
- }
- }
- }
-
- closeDialog() {
- this.dialog.closeAll();
- this.dialogTitle = '';
- this.showDialog = false;
- this.dialogTemplate = null;
- this.disableDialogClose = false;
- }
-
- /*
- * Add selected publications to profile
- */
- private handlePublicationsPromise() {
- return new Promise((resolve, reject) => {
- this.publicationsService
- .addPublications()
- .pipe(takeUntil(this.unsubscribe))
- .subscribe({
- next: (result) => {
- resolve(true);
- },
- error: (error) => {
- reject(error);
- },
- });
- });
- }
-
- /*
- * Patch items to backend
- */
- private patchItemsPromise() {
- const patchItems = this.patchService.confirmedPayLoad;
- return this.profileService.patchObjects(patchItems);
- }
-
- /*
- * Patch datasets to backend
- */
- private handleDatasetsPromise() {
- // return this.datasetsService.addDatasets();
- return lastValueFrom(this.datasetsService.addDatasets());
- }
-
- /*
- * Patch fundings to backend
- */
- private handleFundingsPromise() {
- return new Promise((resolve, reject) => {
- this.fundingsService
- .addFundings()
- .pipe(takeUntil(this.unsubscribe))
- .subscribe({
- next: (result) => {
- resolve(true);
- },
- error: (error) => {
- reject(error);
- },
- });
- });
- }
-
- /*
- * Patch cooperation choices to backend
- */
- private patchCooperationChoicesPromise() {
- return new Promise((resolve, reject) => {
- this.collaborationsService
- .patchCooperationChoices()
- .pipe(takeUntil(this.unsubscribe))
- .subscribe({
- next: (result) => {
- resolve(true);
- },
- error: (error) => {
- reject(error);
- },
- });
- });
- }
-
- async publish() {
- const promises = [];
-
- // Use of handler property as function prevents handler method firing when iterating
- const promiseHandlers: {handler: () => Promise, payload: any}[] = [
- {
- handler: () => this.handlePublicationsPromise(),
- payload: this.publicationsService.confirmedPayload,
- },
- {
- handler: () => this.handleDatasetsPromise(),
- payload: this.datasetsService.confirmedPayload,
- },
- {
- handler: () => this.handleFundingsPromise(),
- payload: this.fundingsService.confirmedPayload,
- },
- {
- handler: () => this.patchItemsPromise(),
- payload: this.patchService.confirmedPayLoad,
- },
- {
- handler: () => this.patchCooperationChoicesPromise(),
- payload: this.collaborationsService.confirmedPayload,
- },
- ];
-
- // Prevent empty payload API requests
- for (const item of promiseHandlers) {
- if (item.payload.length > 0) {
- promises.push(item.handler());
- }
- }
-
- // Enable hide profile button in account settings section, if it has been disabled
- sessionStorage.removeItem('profileHidden');
-
- try {
- const response = await Promise.all(promises);
- if (response.includes(false)) {
- this.snackbarService.showPatchMessage('error');
- } else {
- this.clearDraftData();
- this.snackbarService.showPatchMessage('success');
- }
- } catch (error) {
- this.snackbarService.showPatchMessage('error');
- console.error(`Error in data patching`, error);
- }
-
- this.profileService.setCurrentProfileData(this.profileData);
-
- await this.setProfileVisible();
- await this.pollProfile();
- }
-
- /*
- * Clear draft data from storage and service
- */
- reset() {
- const currentProfileData = cloneDeep(
- this.profileService.currentProfileData
- );
-
- sessionStorage.removeItem(Constants.draftProfile);
- sessionStorage.removeItem(Constants.draftPatchPayload);
- sessionStorage.removeItem(Constants.draftPublicationPatchPayload);
- sessionStorage.removeItem(Constants.draftDatasetPatchPayload);
- sessionStorage.removeItem(Constants.draftFundingPatchPayload);
- sessionStorage.removeItem(Constants.draftCollaborationPatchPayload);
-
- this.profileData = currentProfileData;
- this.profileService.setEditorProfileName(getName(currentProfileData));
- this.clearDraftData();
- this.collaborationComponentRef?.resetInitialValue();
- }
-
- clearDraftData() {
- const itemServices = [
- this.patchService,
- this.collaborationsService,
- this.publicationsService,
- this.datasetsService,
- this.fundingsService,
- ];
-
- itemServices.forEach((service) => {
- service.clearPayload();
- service.cancelConfirmedPayload();
- });
-
- this.draftService.clearData();
- }
-
- ngOnDestroy(): void {
- this.unsubscribe.next(null);
- this.unsubscribe.complete();
- }
-
- private updatePerson() {
- const id = this.orcid;
-
- const source = this.singleItemService.getSinglePerson(id);
-
- source.subscribe({
- next: (search) => {
- const person = search.persons[0] as Person;
-
- if (person != null) {
- this.person$.next(person);
- }
- },
- error: (error) => {
- console.error("Error in updating person", error);
- }
- }
- );
-
- return source;
- }
-
- private async setProfileVisible() {
- await this.profileService.showProfile();
- }
-
- async republish() {
-
-
- try {
- const response = await this.setProfileVisible();
- await this.pollProfile();
- this.snackbarService.showPatchMessage('success');
- } catch (error) {
- console.error(`Error in data patching`, error);
- }
- }
-
- private async pollProfile() {
- let response;
- const delays = [2000, 2000, 2000, 2000, 20000];
-
- for (const delay of delays) {
- await lastValueFrom(timer(delay));
- console.log("polling profile");
-
- response = await lastValueFrom(this.updatePerson());
-
- if (response != null) { return; }
- }
- }
-
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ ViewEncapsulation,
+ ViewChild,
+ ElementRef,
+ OnDestroy,
+} from '@angular/core';
+import { ProfileService } from '@mydata/services/profile.service';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { map, takeUntil } from 'rxjs/operators';
+import { MatDialog } from '@angular/material/dialog';
+import { mergePublications } from '@mydata/utils';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { DraftService } from '@mydata/services/draft.service';
+import { PatchService } from '@mydata/services/patch.service';
+import { SnackbarService } from '@mydata/services/snackbar.service';
+import { Constants } from '@mydata/constants/';
+import { PublicationsService } from '@mydata/services/publications.service';
+import { CommonStrings } from '@mydata/constants/strings';
+import { getName } from '@mydata/utils';
+import { UtilityService } from '@shared/services/utility.service';
+import { DatasetsService } from '@mydata/services/datasets.service';
+import { FundingsService } from '@mydata/services/fundings.service';
+import { CollaborationsService } from '@mydata/services/collaborations.service';
+import { lastValueFrom, Observable, Subject, timer, BehaviorSubject, combineLatest } from 'rxjs';
+import { cloneDeep } from 'lodash-es';
+import { Person } from '@portal/models/person/person.model';
+import { SingleItemService } from '@portal/services/single-item.service';
+import { DialogComponent } from '../../../shared/components/dialog/dialog.component';
+import { MydataBetaInfoComponent } from '../mydata-beta-info/mydata-beta-info.component';
+import { CollaborationCardComponent } from './cards/collaboration-card/collaboration-card.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { ProfileSummaryComponent } from './profile-summary/profile-summary.component';
+import { ContactCardComponent } from './cards/contact-card/contact-card.component';
+import { DraftSummaryComponent } from './draft-summary/draft-summary.component';
+import { MatButton } from '@angular/material/button';
+import { PrimaryActionButtonComponent } from '../../../shared/components/buttons/primary-action-button/primary-action-button.component';
+import { WelcomeDialogComponent } from './welcome-dialog/welcome-dialog.component';
+import { NgIf, AsyncPipe } from '@angular/common';
+import { BannerDividerComponent } from '@shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-profile',
+ templateUrl: './profile.component.html',
+ styleUrls: ['./profile.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgIf,
+ WelcomeDialogComponent,
+ PrimaryActionButtonComponent,
+ MatButton,
+ DraftSummaryComponent,
+ RouterLink,
+ ContactCardComponent,
+ ProfileSummaryComponent,
+ MatProgressSpinner,
+ CollaborationCardComponent,
+ MydataBetaInfoComponent,
+ DialogComponent,
+ AsyncPipe,
+ BannerDividerComponent
+ ]
+})
+export class ProfileComponent implements OnInit, OnDestroy {
+ @ViewChild('collaborationComponentRef') collaborationComponentRef;
+
+ orcidData: any;
+ profileData: any;
+ testData: any;
+ orcid: string;
+ currentProfileName: string;
+
+ publishUpdatedProfile = $localize`:@@publishUpdatedProfile:Julkaise päivitetty profiili`;
+ discardChanges = $localize`:@@discardChanges:Hylkää muutokset`;
+ termsForTool = CommonStrings.termsForTool;
+ processingOfPersonalData = CommonStrings.processingOfPersonalData;
+
+ republishUpdatedProfile = $localize`:@@mydata.profile.republish-modal.title:Julkaise piilotettu profiili`;
+ republishText = $localize`:@@publish:Julkaise`;
+
+ // Dialog variables
+ showDialog: boolean;
+ dialogTitle: any;
+ dialogTemplate: any;
+ dialogExtraContentTemplate: any;
+ currentDialogActions: any[];
+ disableDialogClose: boolean;
+ showDataToPublish = $localize`:@@showDataToPublish:Näytä julkaistavat tiedot`;
+ basicDialogActions = [
+ { label: $localize`:@@close:Sulje`, primary: true, method: 'close' },
+ ];
+ publishUpdatedProfileDialogActions = [
+ {
+ label: this.showDataToPublish,
+ labelToggle: {
+ on: this.showDataToPublish,
+ off: $localize`:@@hideDataToPublish:Piilota julkaistavat tiedot`,
+ },
+ primary: false,
+ method: 'preview',
+ flexStart: true,
+ },
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'cancel' },
+ { label: $localize`:@@publish:Julkaise`, primary: true, method: 'publish' },
+ ];
+ discardChangesActions = [
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
+ {
+ label: this.discardChanges,
+ primary: true,
+ method: 'discard',
+ },
+ ];
+
+ republishActions = [
+ { label: $localize`:@@cancel:Peruuta`, primary: false, method: 'close' },
+ {
+ label: this.republishText,
+ primary: true,
+ method: 'republish',
+ },
+ ];
+
+ connProblem: boolean;
+ loading: boolean;
+
+ draftPayload: any[];
+
+ previousRoute: string | undefined;
+ showWelcomeDialog = false;
+
+ private unsubscribe = new Subject();
+
+ // person$: Observable;
+ person$ = new BehaviorSubject(null);
+
+ hasProfile$: Observable;
+ profileVisible$ = this.profileService.getProfileVisibility();
+
+ edited$ = combineLatest([
+ this.publicationsService.currentPublicationPayload,
+ this.datasetsService.currentDatasetPayload,
+ this.fundingsService.currentFundingPayload,
+ this.patchService.currentPatchItems,
+ this.collaborationsService.currentCollaborationsPayload,
+ ]).pipe(
+ map(([pubs, datasets, fundings, patches, collabs]) => !!(pubs.length || datasets.length || fundings.length || patches.length || collabs.length))
+ );
+
+ constructor(
+ public profileService: ProfileService,
+ public oidcSecurityService: OidcSecurityService,
+ public appSettingsService: AppSettingsService,
+ public dialog: MatDialog,
+ private router: Router,
+ private route: ActivatedRoute,
+ private snackbarService: SnackbarService,
+ public draftService: DraftService,
+ public patchService: PatchService,
+ public collaborationsService: CollaborationsService,
+ public publicationsService: PublicationsService,
+ public datasetsService: DatasetsService,
+ public fundingsService: FundingsService,
+ private utilityService: UtilityService,
+ private singleItemService: SingleItemService,
+ ) {
+ this.profileService.initializeProfileVisibility();
+
+ this.testData = profileService.testData;
+
+ // Find if user has navigated to profile route from service deployment stepper
+ // Display welcome dialog if so
+ this.previousRoute = this.router
+ .getCurrentNavigation()
+ .previousNavigation?.finalUrl.toString();
+ }
+
+ ngOnInit(): void {
+ this.utilityService.setMyDataTitle($localize`:@@profile:Profiili`);
+
+ // Get data from resolver
+ const orcidProfile = this.route.snapshot.data.orcidProfile;
+ const myDataProfile = this.route.snapshot.data.myDataProfile;
+
+ this.orcidData = orcidProfile;
+ this.orcid = orcidProfile.orcid;
+
+ /*
+ * Draft data is stored in session storage.
+ * Set draft data to profile view if draft available.
+ * Drafts are deleted with reset and publish methods
+ */
+ if (this.appSettingsService.isBrowser) {
+ const draft = sessionStorage.getItem(Constants.draftProfile);
+ const draftPatchPayload = JSON.parse(
+ sessionStorage.getItem(Constants.draftPatchPayload)
+ );
+ const draftPublicationPatchPayload = JSON.parse(
+ sessionStorage.getItem(Constants.draftPublicationPatchPayload)
+ );
+ const draftDatasetPatchPayload = JSON.parse(
+ sessionStorage.getItem(Constants.draftDatasetPatchPayload)
+ );
+ const draftCollaborationPatchPayload = JSON.parse(
+ sessionStorage.getItem(Constants.draftCollaborationPatchPayload)
+ );
+ const draftFundingPatchPayload = JSON.parse(
+ sessionStorage.getItem(Constants.draftFundingPatchPayload)
+ );
+
+ this.draftPayload = draftPatchPayload;
+
+ // Display either draft profile from storage or profile from database
+ if (draft) {
+ const parsedDraft = JSON.parse(draft);
+ this.draftService.saveDraft(parsedDraft);
+ this.profileData = parsedDraft;
+ this.profileService.setEditorProfileName(getName(parsedDraft));
+ } else {
+ this.profileData = myDataProfile.profileData;
+ this.profileService.setEditorProfileName(myDataProfile.name);
+ }
+
+ // Profile, publications, datasets, collaborations and fundings have separate draft data
+ const draftItems = [
+ { payload: draftPatchPayload, service: this.patchService },
+ {
+ payload: draftPublicationPatchPayload,
+ service: this.publicationsService,
+ },
+ {
+ payload: draftDatasetPatchPayload,
+ service: this.datasetsService,
+ },
+ {
+ payload: draftFundingPatchPayload,
+ service: this.fundingsService,
+ },
+ {
+ payload: draftCollaborationPatchPayload,
+ service: this.collaborationsService,
+ },
+ ];
+
+ // Set draft item into view if draft available in storage
+ draftItems.forEach((item) => {
+ if (item.payload && !this.profileService.profileInitialized) {
+ item.service.addToPayload(item.payload);
+ item.service.confirmPayload();
+ }
+ });
+ }
+
+ this.profileService.profileInitialized = true;
+
+ this.updatePerson();
+
+ this.hasProfile$ = this.person$.pipe(map((person) => person != null ));
+ }
+
+ openDialog(title: string, template: any, extraContentTemplate: any, actions: any, disableDialogClose: boolean) {
+ this.dialogTitle = title;
+ this.showDialog = true;
+ this.dialogTemplate = template;
+ this.dialogExtraContentTemplate = extraContentTemplate;
+ this.currentDialogActions = actions;
+ this.disableDialogClose = disableDialogClose;
+ }
+
+ doDialogAction(action: string) {
+ this.dialog.closeAll();
+ this.dialogTitle = '';
+ this.showDialog = false;
+ this.dialogTemplate = null;
+
+ switch (action) {
+ case 'publish': {
+ this.publish();
+ break;
+ }
+ case 'discard': {
+ this.reset();
+ break;
+ }
+ case 'republish': {
+ this.republish();
+ break;
+ }
+ }
+ }
+
+ closeDialog() {
+ this.dialog.closeAll();
+ this.dialogTitle = '';
+ this.showDialog = false;
+ this.dialogTemplate = null;
+ this.disableDialogClose = false;
+ }
+
+ /*
+ * Add selected publications to profile
+ */
+ private handlePublicationsPromise() {
+ return new Promise((resolve, reject) => {
+ this.publicationsService
+ .addPublications()
+ .pipe(takeUntil(this.unsubscribe))
+ .subscribe({
+ next: (result) => {
+ resolve(true);
+ },
+ error: (error) => {
+ reject(error);
+ },
+ });
+ });
+ }
+
+ /*
+ * Patch items to backend
+ */
+ private patchItemsPromise() {
+ const patchItems = this.patchService.confirmedPayLoad;
+ return this.profileService.patchObjects(patchItems);
+ }
+
+ /*
+ * Patch datasets to backend
+ */
+ private handleDatasetsPromise() {
+ // return this.datasetsService.addDatasets();
+ return lastValueFrom(this.datasetsService.addDatasets());
+ }
+
+ /*
+ * Patch fundings to backend
+ */
+ private handleFundingsPromise() {
+ return new Promise((resolve, reject) => {
+ this.fundingsService
+ .addFundings()
+ .pipe(takeUntil(this.unsubscribe))
+ .subscribe({
+ next: (result) => {
+ resolve(true);
+ },
+ error: (error) => {
+ reject(error);
+ },
+ });
+ });
+ }
+
+ /*
+ * Patch cooperation choices to backend
+ */
+ private patchCooperationChoicesPromise() {
+ return new Promise((resolve, reject) => {
+ this.collaborationsService
+ .patchCooperationChoices()
+ .pipe(takeUntil(this.unsubscribe))
+ .subscribe({
+ next: (result) => {
+ resolve(true);
+ },
+ error: (error) => {
+ reject(error);
+ },
+ });
+ });
+ }
+
+ async publish() {
+ const promises = [];
+
+ // Use of handler property as function prevents handler method firing when iterating
+ const promiseHandlers: {handler: () => Promise, payload: any}[] = [
+ {
+ handler: () => this.handlePublicationsPromise(),
+ payload: this.publicationsService.confirmedPayload,
+ },
+ {
+ handler: () => this.handleDatasetsPromise(),
+ payload: this.datasetsService.confirmedPayload,
+ },
+ {
+ handler: () => this.handleFundingsPromise(),
+ payload: this.fundingsService.confirmedPayload,
+ },
+ {
+ handler: () => this.patchItemsPromise(),
+ payload: this.patchService.confirmedPayLoad,
+ },
+ {
+ handler: () => this.patchCooperationChoicesPromise(),
+ payload: this.collaborationsService.confirmedPayload,
+ },
+ ];
+
+ // Prevent empty payload API requests
+ for (const item of promiseHandlers) {
+ if (item.payload.length > 0) {
+ promises.push(item.handler());
+ }
+ }
+
+ // Enable hide profile button in account settings section, if it has been disabled
+ sessionStorage.removeItem('profileHidden');
+
+ try {
+ const response = await Promise.all(promises);
+ if (response.includes(false)) {
+ this.snackbarService.showPatchMessage('error');
+ } else {
+ this.clearDraftData();
+ this.snackbarService.showPatchMessage('success');
+ }
+ } catch (error) {
+ this.snackbarService.showPatchMessage('error');
+ console.error(`Error in data patching`, error);
+ }
+
+ this.profileService.setCurrentProfileData(this.profileData);
+
+ await this.setProfileVisible();
+ await this.pollProfile();
+ }
+
+ /*
+ * Clear draft data from storage and service
+ */
+ reset() {
+ const currentProfileData = cloneDeep(
+ this.profileService.currentProfileData
+ );
+
+ sessionStorage.removeItem(Constants.draftProfile);
+ sessionStorage.removeItem(Constants.draftPatchPayload);
+ sessionStorage.removeItem(Constants.draftPublicationPatchPayload);
+ sessionStorage.removeItem(Constants.draftDatasetPatchPayload);
+ sessionStorage.removeItem(Constants.draftFundingPatchPayload);
+ sessionStorage.removeItem(Constants.draftCollaborationPatchPayload);
+
+ this.profileData = currentProfileData;
+ this.profileService.setEditorProfileName(getName(currentProfileData));
+ this.clearDraftData();
+ this.collaborationComponentRef?.resetInitialValue();
+ }
+
+ clearDraftData() {
+ const itemServices = [
+ this.patchService,
+ this.collaborationsService,
+ this.publicationsService,
+ this.datasetsService,
+ this.fundingsService,
+ ];
+
+ itemServices.forEach((service) => {
+ service.clearPayload();
+ service.cancelConfirmedPayload();
+ });
+
+ this.draftService.clearData();
+ }
+
+ ngOnDestroy(): void {
+ this.unsubscribe.next(null);
+ this.unsubscribe.complete();
+ }
+
+ private updatePerson() {
+ const id = this.orcid;
+
+ const source = this.singleItemService.getSinglePerson(id);
+
+ source.subscribe({
+ next: (search) => {
+ const person = search.persons[0] as Person;
+
+ if (person != null) {
+ this.person$.next(person);
+ }
+ },
+ error: (error) => {
+ console.error("Error in updating person", error);
+ }
+ }
+ );
+
+ return source;
+ }
+
+ private async setProfileVisible() {
+ await this.profileService.showProfile();
+ }
+
+ async republish() {
+
+
+ try {
+ const response = await this.setProfileVisible();
+ await this.pollProfile();
+ this.snackbarService.showPatchMessage('success');
+ } catch (error) {
+ console.error(`Error in data patching`, error);
+ }
+ }
+
+ private async pollProfile() {
+ let response;
+ const delays = [2000, 2000, 2000, 2000, 20000];
+
+ for (const delay of delays) {
+ await lastValueFrom(timer(delay));
+ console.log("polling profile");
+
+ response = await lastValueFrom(this.updatePerson());
+
+ if (response != null) { return; }
+ }
+ }
+
+}
diff --git a/src/app/mydata/components/profile/search-portal/custom-paginator-intl/custom-paginator-intl.component.ts b/src/app/mydata/components/profile/search-portal/custom-paginator-intl/custom-paginator-intl.component.ts
index f7c60fcaf..e85515ba0 100644
--- a/src/app/mydata/components/profile/search-portal/custom-paginator-intl/custom-paginator-intl.component.ts
+++ b/src/app/mydata/components/profile/search-portal/custom-paginator-intl/custom-paginator-intl.component.ts
@@ -1,33 +1,33 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Injectable } from '@angular/core';
-import { MatPaginatorIntl } from '@angular/material/paginator';
-
-@Injectable()
-export class CustomPaginatorIntlComponent extends MatPaginatorIntl {
- itemsPerPageLabel = $localize`:@@resultsOnPage:Tuloksia sivulla`;
- nextPageLabel = $localize`:@@nextPage:Seuraava sivu`;
- previousPageLabel = $localize`:@@previousPage:Edellinen sivu`;
-
- getRangeLabel = function (page: number, pageSize: number, length: any) {
- if (length === 0 || pageSize === 0) {
- return '0 / ' + length;
- }
-
- length = Math.max(length, 0);
-
- const startIndex = page * pageSize;
-
- const endIndex =
- startIndex < length
- ? Math.min(startIndex + pageSize, length)
- : startIndex + pageSize;
-
- return startIndex + 1 + ' - ' + endIndex + ' / ' + length;
- };
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Injectable } from '@angular/core';
+import { MatPaginatorIntl } from '@angular/material/paginator';
+
+@Injectable()
+export class CustomPaginatorIntlComponent extends MatPaginatorIntl {
+ itemsPerPageLabel = $localize`:@@resultsOnPage:Tuloksia sivulla`;
+ nextPageLabel = $localize`:@@nextPage:Seuraava sivu`;
+ previousPageLabel = $localize`:@@previousPage:Edellinen sivu`;
+
+ getRangeLabel = function (page: number, pageSize: number, length: any) {
+ if (length === 0 || pageSize === 0) {
+ return '0 / ' + length;
+ }
+
+ length = Math.max(length, 0);
+
+ const startIndex = page * pageSize;
+
+ const endIndex =
+ startIndex < length
+ ? Math.min(startIndex + pageSize, length)
+ : startIndex + pageSize;
+
+ return startIndex + 1 + ' - ' + endIndex + ' / ' + length;
+ };
+}
diff --git a/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.html b/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.html
index 2600fac12..1399978fb 100644
--- a/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.html
+++ b/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.html
@@ -14,8 +14,8 @@
"
>
-
+
{{ column.label }}
@@ -67,7 +67,7 @@
-
+
diff --git a/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.scss b/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.scss
index a3f065e39..90aa28006 100644
--- a/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.scss
+++ b/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.scss
@@ -1,83 +1,102 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - I
-
-app-search-portal-results {
- .mat-checkbox-inner-container {
- margin-top: 0.175rem !important;
- }
-
- table {
- width: 100%;
- }
-
- mat-header-row {
- min-height: unset;
- }
-
- mat-row,
- mat-footer-row {
- min-height: unset;
- align-items: unset;
- }
-
- mat-header-row,
- mat-row {
- padding: 0 1rem;
- }
-
- mat-cell,
- mat-header-cell,
- mat-footer-cell {
- padding: 0.5rem;
- align-items: flex-start;
- }
-
- mat-cell {
- margin-top: 0.25rem;
- }
-
- .mat-column-selection {
- flex: 0 0 2rem;
- overflow: visible;
- }
-
- .mat-column-year {
- flex: 0 0 3.75rem;
- }
-
- .mat-column-name {
- flex-direction: column;
- }
-
- .mat-column-show-more {
- flex: 0 0 6.5rem;
- }
-
- mat-cell:first-of-type,
- mat-header-cell:first-of-type,
- mat-footer-cell:first-of-type {
- padding-left: 0;
- }
-
- @media (max-width: 991px) {
- .mat-header-row {
- display: none;
- }
-
- .mat-row {
- display: block;
- padding: 0.5rem 0;
- }
-
- .mat-column-selection {
- float: right;
- }
-
- mat-cell {
- padding-left: 0;
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - I
+
+app-search-portal-results {
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-checkbox-inner-container {
+ margin-top: 0.175rem !important;
+ }
+
+ table {
+ width: 100%;
+ }
+
+ mat-header-row {
+ min-height: unset;
+ }
+
+ mat-paginator {
+ font-size: 0.875rem !important;
+ }
+
+ mat-option {
+ font-size: 0.875rem !important;
+ }
+
+ mat-row,
+ mat-footer-row {
+ min-height: unset;
+ align-items: unset;
+ }
+
+ mat-header-row,
+ mat-row {
+ padding: 0px
+ }
+
+ mat-cell,
+ mat-header-cell,
+ mat-footer-cell {
+ padding: 0.5rem;
+ align-items: flex-start;
+ }
+
+ mat-cell {
+ justify-content: start;
+ flex-direction: column;
+ margin-top: 0.25rem;
+ letter-spacing: 0 !important;
+ }
+
+ .mat-column-selection {
+ flex: 0 0 2rem;
+ overflow: visible;
+ }
+
+ .mat-column-year {
+ flex: 0 0 3.75rem;
+ }
+
+ .mat-column-name {
+ flex-direction: column;
+ }
+
+ .mat-column-show-more {
+ display: flex;
+ flex: 2;
+ flex-direction: row;
+ padding-right: 24px !important;
+ a {
+ font-weight: bold;
+ text-decoration-color: #4546B9;
+ }
+ }
+
+ mat-cell:first-of-type,
+ mat-header-cell:first-of-type,
+ mat-footer-cell:first-of-type {
+ padding-left: 0;
+ }
+
+ @media (max-width: 991px) {
+ .mat-mdc-header-row {
+ display: none;
+ }
+
+ .mat-mdc-row {
+ display: block;
+ padding: 0.5rem 0;
+ }
+
+ .mat-column-selection {
+ float: right;
+ }
+
+ mat-cell {
+ padding-left: 0;
+ }
+ }
+}
diff --git a/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.ts b/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.ts
index 711281af3..b0ba2ba3c 100644
--- a/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.ts
+++ b/src/app/mydata/components/profile/search-portal/search-portal-results/search-portal-results.component.ts
@@ -1,210 +1,240 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- EventEmitter,
- Input,
- OnChanges,
- OnDestroy,
- OnInit,
- Output,
- ViewChild,
- ViewEncapsulation,
-} from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { Sort } from '@angular/material/sort';
-import {
- faSort,
- faSortDown,
- faSortUp,
-} from '@fortawesome/free-solid-svg-icons';
-import {
- DatasetColumns,
- FundingColumns,
- PublicationColumns,
-} from '@mydata/constants';
-import { SearchPortalService } from '@mydata/services/search-portal.service';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { Subscription } from 'rxjs';
-
-@Component({
- selector: 'app-search-portal-results',
- templateUrl: './search-portal-results.component.html',
- styleUrls: ['./search-portal-results.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class SearchPortalResultsComponent
- implements OnInit, OnChanges, OnDestroy
-{
- @Input() groupId: string;
- @Input() data: any[];
- @Input() total: number;
- @Input() itemsInProfile: any;
- @Input() selectedInSession: any[];
-
- @Output() onItemToggle = new EventEmitter();
- @Output() onPageChange = new EventEmitter();
- @Output() onSortToggle = new EventEmitter();
-
- showMoreArray = [];
- publicationArray = [];
-
- currentPage = 1;
- currentPageSize = 10;
- pageCount: number;
-
- faSort = faSort;
- faSortDown = faSortDown;
- faSortUp = faSortUp;
-
- columns: string[] = ['selection', 'year', 'name', 'show-more'];
-
- sortSettings: any;
- selectedItemsIdArray: any[] = [];
- currentSelection = [];
-
- idField = 'id';
-
- currentTable: any;
-
- locale = this.appSettingsService.capitalizedLocale;
-
- publicationsTable = {
- idField: 'id',
- columns: PublicationColumns.filter((column) => column.id !== 'source'),
- };
-
- datasetsTable = {
- idField: 'id',
- columns: DatasetColumns.filter((column) => column.id !== 'source'),
- };
-
- fundingsTable = {
- idField: 'id',
- columns: FundingColumns.filter((column) => column.id !== 'source'),
- };
-
- @ViewChild(MatPaginator) paginator: MatPaginator;
- termSub: Subscription;
- activeSort: Sort;
- selectedInSessionIds: any[] = [];
-
- constructor(
- private searchPortalService: SearchPortalService,
- private appSettingsService: AppSettingsService
- ) {
- this.sortSettings = this.searchPortalService.currentSort;
- }
-
- ngOnInit() {
- // Set default sort (all groups default to year field at this point)
- this.activeSort = { active: 'year', direction: 'desc' };
-
- // Set table by groupId
- switch (this.groupId) {
- case 'publication': {
- this.currentTable = this.publicationsTable;
- break;
- }
- case 'dataset': {
- this.currentTable = this.datasetsTable;
- break;
- }
- case 'funding': {
- this.currentTable = this.fundingsTable;
- break;
- }
- }
-
- // Reset to first page on term change
- this.termSub = this.searchPortalService.currentTerm.subscribe(() => {
- this.currentPage = 1;
- if (this.paginator) this.paginator.pageIndex = 0;
- });
-
- // Create list of ids that we can match for existing selections in template
- if (this.itemsInProfile.length) {
- const profileItemIDs = this.itemsInProfile
- .map((item) => item.id)
- .filter((item) => item?.toString().trim().length);
-
- this.selectedItemsIdArray = profileItemIDs;
- }
- }
-
- ngOnChanges() {
- this.pageCount = Math.ceil(this.total / this.currentPageSize);
-
- // Items selected in active session are stored in parent component.
- // This prevents selections to lose checked status if page settings is changed
- this.selectedInSessionIds = this.selectedInSession.map((item) => item.id);
- }
-
- ngOnDestroy() {
- this.termSub?.unsubscribe();
- }
-
- toggleShowMore(index) {
- const arr = this.showMoreArray;
- const item = arr.indexOf(index);
-
- if (item > -1) {
- arr.splice(item, 1);
- } else {
- this.showMoreArray.push(index);
- }
- }
-
- showMore(index) {
- this.showMoreArray.push(index);
- }
-
- showLess(index) {
- const arr = this.showMoreArray;
- const item = arr.indexOf(index);
-
- arr.splice(item, 1);
- }
-
- toggleItem(event, index) {
- const selectedItem = this.data[index];
-
- let arr = this.currentSelection;
-
- if (event.checked) {
- // Prevent adding of duplicate items
- !arr.find((item) => item.id === selectedItem.id) &&
- arr.push({ ...selectedItem, show: true });
- } else {
- arr = arr.filter((item) => item.id !== selectedItem.id);
- this.currentSelection = arr;
- }
-
- this.onItemToggle.emit(arr);
- }
-
- sortData(sort: Sort) {
- if (!sort.active || sort.direction === '') {
- this.activeSort = null;
- return;
- }
-
- this.activeSort = sort;
- this.onSortToggle.emit(sort);
- }
-
- navigate(event) {
- this.data = [];
- this.currentPage = event.pageIndex + 1;
- this.currentPageSize = event.pageSize;
-
- this.pageCount = Math.ceil(this.total / event.pageSize);
-
- this.onPageChange.emit(event);
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ OnDestroy,
+ OnInit,
+ Output,
+ ViewChild,
+ ViewEncapsulation,
+} from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { Sort, MatSort, MatSortHeader } from '@angular/material/sort';
+import {
+ faSort,
+ faSortDown,
+ faSortUp,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+ DatasetColumns,
+ FundingColumns,
+ PublicationColumns,
+} from '@mydata/constants';
+import { SearchPortalService } from '@mydata/services/search-portal.service';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { Subscription } from 'rxjs';
+import { GetValuePipe } from '../../../../pipes/get-value.pipe';
+import { CutContentPipe } from '../../../../../shared/pipes/cut-content.pipe';
+import { DatasetAuthorComponent } from '../../../../../portal/components/single/single-dataset/dataset-author/dataset-author.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
+import { NgIf, NgFor } from '@angular/common';
+
+@Component({
+ selector: 'app-search-portal-results',
+ templateUrl: './search-portal-results.component.html',
+ styleUrls: ['./search-portal-results.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgIf,
+ MatTable,
+ MatSort,
+ MatColumnDef,
+ MatHeaderCellDef,
+ MatHeaderCell,
+ MatCellDef,
+ MatCell,
+ MatCheckbox,
+ NgFor,
+ MatSortHeader,
+ FontAwesomeModule,
+ DatasetAuthorComponent,
+ MatHeaderRowDef,
+ MatHeaderRow,
+ MatRowDef,
+ MatRow,
+ MatPaginator,
+ CutContentPipe,
+ GetValuePipe,
+ ],
+})
+export class SearchPortalResultsComponent
+ implements OnInit, OnChanges, OnDestroy
+{
+ @Input() groupId: string;
+ @Input() data: any[];
+ @Input() total: number;
+ @Input() itemsInProfile: any;
+ @Input() selectedInSession: any[];
+
+ @Output() onItemToggle = new EventEmitter();
+ @Output() onPageChange = new EventEmitter();
+ @Output() onSortToggle = new EventEmitter();
+
+ showMoreArray = [];
+ publicationArray = [];
+
+ currentPage = 1;
+ currentPageSize = 10;
+ pageCount: number;
+
+ faSort = faSort as any; // TODO: Fix type
+ faSortDown = faSortDown as any; // TODO: Fix type
+ faSortUp = faSortUp as any; // TODO: Fix type
+
+ columns: string[] = ['selection', 'year', 'name', 'show-more'];
+
+ sortSettings: any;
+ selectedItemsIdArray: any[] = [];
+ currentSelection = [];
+
+ idField = 'id';
+
+ currentTable: any;
+
+ locale = this.appSettingsService.capitalizedLocale;
+
+ publicationsTable = {
+ idField: 'id',
+ columns: PublicationColumns.filter((column) => column.id !== 'source'),
+ };
+
+ datasetsTable = {
+ idField: 'id',
+ columns: DatasetColumns.filter((column) => column.id !== 'source'),
+ };
+
+ fundingsTable = {
+ idField: 'id',
+ columns: FundingColumns.filter((column) => column.id !== 'source'),
+ };
+
+ @ViewChild(MatPaginator) paginator: MatPaginator;
+ termSub: Subscription;
+ activeSort: Sort;
+ selectedInSessionIds: any[] = [];
+
+ constructor(
+ private searchPortalService: SearchPortalService,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.sortSettings = this.searchPortalService.currentSort;
+ }
+
+ ngOnInit() {
+ // Set default sort (all groups default to year field at this point)
+ this.activeSort = { active: 'year', direction: 'desc' };
+
+ // Set table by groupId
+ switch (this.groupId) {
+ case 'publication': {
+ this.currentTable = this.publicationsTable;
+ break;
+ }
+ case 'dataset': {
+ this.currentTable = this.datasetsTable;
+ break;
+ }
+ case 'funding': {
+ this.currentTable = this.fundingsTable;
+ break;
+ }
+ }
+
+ // Reset to first page on term change
+ this.termSub = this.searchPortalService.currentTerm.subscribe(() => {
+ this.currentPage = 1;
+ if (this.paginator) this.paginator.pageIndex = 0;
+ });
+
+ // Create list of ids that we can match for existing selections in template
+ if (this.itemsInProfile.length) {
+ const profileItemIDs = this.itemsInProfile
+ .map((item) => item.id)
+ .filter((item) => item?.toString().trim().length);
+
+ this.selectedItemsIdArray = profileItemIDs;
+ }
+ }
+
+ ngOnChanges() {
+ this.pageCount = Math.ceil(this.total / this.currentPageSize);
+
+ // Items selected in active session are stored in parent component.
+ // This prevents selections to lose checked status if page settings is changed
+ this.selectedInSessionIds = this.selectedInSession.map((item) => item.id);
+ }
+
+ ngOnDestroy() {
+ this.termSub?.unsubscribe();
+ }
+
+ toggleShowMore(index) {
+ const arr = this.showMoreArray;
+ const item = arr.indexOf(index);
+
+ if (item > -1) {
+ arr.splice(item, 1);
+ } else {
+ this.showMoreArray.push(index);
+ }
+ }
+
+ showMore(index) {
+ this.showMoreArray.push(index);
+ }
+
+ showLess(index) {
+ const arr = this.showMoreArray;
+ const item = arr.indexOf(index);
+
+ arr.splice(item, 1);
+ }
+
+ toggleItem(event, index) {
+ const selectedItem = this.data[index];
+
+ let arr = this.currentSelection;
+
+ if (event.checked) {
+ // Prevent adding of duplicate items
+ !arr.find((item) => item.id === selectedItem.id) &&
+ arr.push({ ...selectedItem, show: true });
+ } else {
+ arr = arr.filter((item) => item.id !== selectedItem.id);
+ this.currentSelection = arr;
+ }
+
+ this.onItemToggle.emit(arr);
+ }
+
+ sortData(sort: Sort) {
+ if (!sort.active || sort.direction === '') {
+ this.activeSort = null;
+ return;
+ }
+
+ this.activeSort = sort;
+ this.onSortToggle.emit(sort);
+ }
+
+ navigate(event) {
+ this.data = [];
+ this.currentPage = event.pageIndex + 1;
+ this.currentPageSize = event.pageSize;
+
+ this.pageCount = Math.ceil(this.total / event.pageSize);
+
+ this.onPageChange.emit(event);
+ }
+}
diff --git a/src/app/mydata/components/profile/search-portal/search-portal.component.ts b/src/app/mydata/components/profile/search-portal/search-portal.component.ts
index 18ec927bd..1b77b15f9 100644
--- a/src/app/mydata/components/profile/search-portal/search-portal.component.ts
+++ b/src/app/mydata/components/profile/search-portal/search-portal.component.ts
@@ -1,158 +1,177 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- EventEmitter,
- Inject,
- Input,
- OnDestroy,
- OnInit,
- Output,
- ViewEncapsulation,
-} from '@angular/core';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { take } from 'rxjs/operators';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
-import { SearchPortalService } from '@mydata/services/search-portal.service';
-import { GroupTypes } from '@mydata/constants/groupTypes';
-import { Subscription } from 'rxjs';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ EventEmitter,
+ Inject,
+ Input,
+ OnDestroy,
+ OnInit,
+ Output,
+ ViewEncapsulation,
+} from '@angular/core';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { take } from 'rxjs/operators';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { SearchPortalService } from '@mydata/services/search-portal.service';
+import { GroupTypes } from '@mydata/constants/groupTypes';
+import { Subscription } from 'rxjs';
import { Sort } from '@angular/material/sort';
-
+import { ThousandSeparatorPipe } from '../../../../shared/pipes/thousand-separator.pipe';
+import { SearchPortalResultsComponent } from './search-portal-results/search-portal-results.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { SearchComponent } from '../../../../shared/components/search/search.component';
+import { NgSwitch, NgSwitchCase, NgIf, NgSwitchDefault, NgClass } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
@Component({
- selector: 'app-search-portal',
- templateUrl: './search-portal.component.html',
- styleUrls: ['./search-portal.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class SearchPortalComponent implements OnInit, OnDestroy {
- @Input() data: any;
- @Input() columns: any;
-
- @Output() onAddItems = new EventEmitter();
-
- results: any;
- total: number;
- loading: boolean;
- currentSelection: any[];
- currentTerm: string;
- mobile: boolean;
-
- public fieldTypes = FieldTypes;
- public groupTypes = GroupTypes;
-
- addPublication = $localize`:@@addPublication:Lisää julkaisu`;
- addPublications = $localize`:@@addPublications:Lisää julkaisut`;
-
- addDataText: string;
- addDataPluralText: string;
-
- searchHelpText: string;
- searchPlaceholder: string;
-
- searchSub: Subscription;
-
- searchForMissingPublication = $localize`:@@searchForMissingPublication:Puuttuvan julkaisun hakeminen`;
- searchForMissingDataset = $localize`:@@searchForMissingDataset:Puuttuvan tutkimusaineiston hakeminen`;
- searchForMissingFunding = $localize`:@@searchForMissingFunding:Puuttuvan hankkeen hakeminen`;
-
- searchForPublicationWithName = $localize`:@@searchForPublicationWithName:Hae omalla nimelläsi tai julkaisun nimellä`;
- searchForDatasetsWithName = $localize`:@@searchForDatasetWithName:Hae nimellä tai organisaatiolla`;
- searchForFundingsWithName = $localize`:@@searchForFundingWithName:Hae hankkeen tai vastuullisen tutkijan nimellä`;
-
- publicationSearchPlaceholder = $localize`:@@nameOfPublicationOrAuthor:Julkaisun tai tekijän nimi`;
- datasetSearchPlaceholder = $localize`:@@datasetSearchPlaceholder:Esim. nimi, organisaatio`;
- fundingSearchPlaceholder = $localize`:@@enterPartOfName:Kirjoita osa nimestä`;
-
- itemsInProfile: any[];
-
- infoText: string;
-
- constructor(
- private searchPortalService: SearchPortalService,
- private appSettingsService: AppSettingsService
- ) {}
-
- ngOnInit(): void {
- this.setLocalizedContent();
-
- this.appSettingsService.mobileStatus
- .subscribe((status) => {
- this.mobile = status;
- })
- .unsubscribe();
-
- this.itemsInProfile = this.data.fields.flatMap((field) => field.items);
- }
-
- setLocalizedContent() {
- switch (this.data.id) {
- case GroupTypes.publication: {
- this.searchHelpText = this.searchForPublicationWithName;
- this.searchPlaceholder = this.publicationSearchPlaceholder;
- this.infoText = $localize`:@@searchForOtherPublicationsFromPortal:Hae muita julkaisuja Tiedejatutkimus.fi:stä julkaisun tai tekijän nimellä ja liitä ne profiiliisi.`;
- break;
- }
- case GroupTypes.dataset: {
- this.searchHelpText = this.searchForDatasetsWithName;
- this.searchPlaceholder = this.datasetSearchPlaceholder;
- this.infoText = $localize`:@@searchForOtherDatasetsFromPortal:Hae muita tutkimusaineistoja Tiedejatutkimus.fi:stä aineiston tai tekijän nimellä ja liitä ne profiiliisi.`;
- break;
- }
- case GroupTypes.funding: {
- this.searchHelpText = this.searchForFundingsWithName;
- this.searchPlaceholder = this.fundingSearchPlaceholder;
- this.infoText = $localize`:@@searchForOtherFundingsFromPortal:Hae muita hankkeita Tiedejatutkimus.fi:stä hankkeen sisältämien tietojen perusteella ja liitä ne profiiliisi.`;
- break;
- }
- }
- }
-
- handleSearch(term: string) {
- this.searchPortalService.updateSearchTerm(term);
- this.searchPortalService.updatePageSettings(null);
- this.currentTerm = term;
- this.search(term);
- }
-
- search(term: string) {
- this.results = [];
- this.loading = true;
-
- this.searchSub = this.searchPortalService
- .getData(term, this.data.id)
- .pipe(take(1))
- .subscribe((result) => {
- this.results = result[this.data.id + 's'];
- this.total = result.total;
- this.loading = false;
- });
- }
-
- handleSelection(arr) {
- this.currentSelection = arr;
-
- this.onAddItems.emit(arr);
- }
-
- changePage(pageSettings: object) {
- this.searchPortalService.updatePageSettings(pageSettings);
- this.search(this.currentTerm);
- }
-
- sort(sortSettings: Sort) {
- sortSettings.direction === ''
- ? this.searchPortalService.resetSort()
- : this.searchPortalService.updateSort(this.data.id, sortSettings);
-
- this.search(this.currentTerm);
- }
-
- ngOnDestroy(): void {
- this.searchSub?.unsubscribe();
- }
-}
+ selector: 'app-search-portal',
+ templateUrl: './search-portal.component.html',
+ styleUrls: ['./search-portal.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ FontAwesomeModule,
+ NgSwitch,
+ NgSwitchCase,
+ SearchComponent,
+ NgIf,
+ NgSwitchDefault,
+ NgClass,
+ MatProgressSpinner,
+ SearchPortalResultsComponent,
+ ThousandSeparatorPipe,
+ ],
+})
+export class SearchPortalComponent implements OnInit, OnDestroy {
+ @Input() data: any;
+ @Input() columns: any;
+
+ @Output() onAddItems = new EventEmitter();
+
+ results: any;
+ total: number;
+ loading: boolean;
+ currentSelection: any[];
+ currentTerm: string;
+ mobile: boolean;
+
+ public fieldTypes = FieldTypes;
+ public groupTypes = GroupTypes;
+
+ addPublication = $localize`:@@addPublication:Lisää julkaisu`;
+ addPublications = $localize`:@@addPublications:Lisää julkaisut`;
+
+ addDataText: string;
+ addDataPluralText: string;
+
+ searchHelpText: string;
+ searchPlaceholder: string;
+
+ searchSub: Subscription;
+
+ searchForMissingPublication = $localize`:@@searchForMissingPublication:Puuttuvan julkaisun hakeminen`;
+ searchForMissingDataset = $localize`:@@searchForMissingDataset:Puuttuvan tutkimusaineiston hakeminen`;
+ searchForMissingFunding = $localize`:@@searchForMissingFunding:Puuttuvan hankkeen hakeminen`;
+
+ searchForPublicationWithName = $localize`:@@searchForPublicationWithName:Hae omalla nimelläsi tai julkaisun nimellä`;
+ searchForDatasetsWithName = $localize`:@@searchForDatasetWithName:Hae nimellä tai organisaatiolla`;
+ searchForFundingsWithName = $localize`:@@searchForFundingWithName:Hae hankkeen tai vastuullisen tutkijan nimellä`;
+
+ publicationSearchPlaceholder = $localize`:@@nameOfPublicationOrAuthor:Julkaisun tai tekijän nimi`;
+ datasetSearchPlaceholder = $localize`:@@datasetSearchPlaceholder:Esim. nimi, organisaatio`;
+ fundingSearchPlaceholder = $localize`:@@enterPartOfName:Kirjoita osa nimestä`;
+
+ itemsInProfile: any[];
+
+ infoText: string;
+
+ constructor(
+ private searchPortalService: SearchPortalService,
+ private appSettingsService: AppSettingsService
+ ) {}
+
+ ngOnInit(): void {
+ this.setLocalizedContent();
+
+ this.appSettingsService.mobileStatus
+ .subscribe((status) => {
+ this.mobile = status;
+ })
+ .unsubscribe();
+
+ this.itemsInProfile = this.data.fields.flatMap((field) => field.items);
+ }
+
+ setLocalizedContent() {
+ switch (this.data.id) {
+ case GroupTypes.publication: {
+ this.searchHelpText = this.searchForPublicationWithName;
+ this.searchPlaceholder = this.publicationSearchPlaceholder;
+ this.infoText = $localize`:@@searchForOtherPublicationsFromPortal:Hae muita julkaisuja Tiedejatutkimus.fi:stä julkaisun tai tekijän nimellä ja liitä ne profiiliisi.`;
+ break;
+ }
+ case GroupTypes.dataset: {
+ this.searchHelpText = this.searchForDatasetsWithName;
+ this.searchPlaceholder = this.datasetSearchPlaceholder;
+ this.infoText = $localize`:@@searchForOtherDatasetsFromPortal:Hae muita tutkimusaineistoja Tiedejatutkimus.fi:stä aineiston tai tekijän nimellä ja liitä ne profiiliisi.`;
+ break;
+ }
+ case GroupTypes.funding: {
+ this.searchHelpText = this.searchForFundingsWithName;
+ this.searchPlaceholder = this.fundingSearchPlaceholder;
+ this.infoText = $localize`:@@searchForOtherFundingsFromPortal:Hae muita hankkeita Tiedejatutkimus.fi:stä hankkeen sisältämien tietojen perusteella ja liitä ne profiiliisi.`;
+ break;
+ }
+ }
+ }
+
+ handleSearch(term: string) {
+ this.searchPortalService.updateSearchTerm(term);
+ this.searchPortalService.updatePageSettings(null);
+ this.currentTerm = term;
+ this.search(term);
+ }
+
+ search(term: string) {
+ this.results = [];
+ this.loading = true;
+
+ this.searchSub = this.searchPortalService
+ .getData(term, this.data.id)
+ .pipe(take(1))
+ .subscribe((result) => {
+ this.results = result[this.data.id + 's'];
+ this.total = result.total;
+ this.loading = false;
+ });
+ }
+
+ handleSelection(arr) {
+ this.currentSelection = arr;
+
+ this.onAddItems.emit(arr);
+ }
+
+ changePage(pageSettings: object) {
+ this.searchPortalService.updatePageSettings(pageSettings);
+ this.search(this.currentTerm);
+ }
+
+ sort(sortSettings: Sort) {
+ sortSettings.direction === ''
+ ? this.searchPortalService.resetSort()
+ : this.searchPortalService.updateSort(this.data.id, sortSettings);
+
+ this.search(this.currentTerm);
+ }
+
+ ngOnDestroy(): void {
+ this.searchSub?.unsubscribe();
+ }
+}
diff --git a/src/app/mydata/components/profile/welcome-dialog/welcome-dialog.component.ts b/src/app/mydata/components/profile/welcome-dialog/welcome-dialog.component.ts
index a873f8346..abf892db8 100644
--- a/src/app/mydata/components/profile/welcome-dialog/welcome-dialog.component.ts
+++ b/src/app/mydata/components/profile/welcome-dialog/welcome-dialog.component.ts
@@ -1,24 +1,27 @@
import { Component, OnInit } from '@angular/core';
-
+import { DialogComponent } from '../../../../shared/components/dialog/dialog.component';
+
@Component({
- selector: 'app-welcome-dialog',
- templateUrl: './welcome-dialog.component.html',
-})
-export class WelcomeDialogComponent implements OnInit {
- showDialog = true;
-
- startManagingYourProfileText = $localize`:@@startManagingYourProfile:Voit aloittaa Tutkijan tiedot -profiilin hallinnoinnin.`;
- serviceDeploymentSuccessful = $localize`:@@serviceDeploymentSuccesful:Profiilityökalun käyttöönotto onnistui`;
-
- dialogActions = [
- {
- label: $localize`:@@continue:Jatka`,
- primary: true,
- method: 'close',
- },
- ];
-
- constructor() {}
-
- ngOnInit(): void {}
-}
+ selector: 'app-welcome-dialog',
+ templateUrl: './welcome-dialog.component.html',
+ standalone: true,
+ imports: [DialogComponent],
+})
+export class WelcomeDialogComponent implements OnInit {
+ showDialog = true;
+
+ startManagingYourProfileText = $localize`:@@startManagingYourProfile:Voit aloittaa Tutkijan tiedot -profiilin hallinnoinnin.`;
+ serviceDeploymentSuccessful = $localize`:@@serviceDeploymentSuccesful:Profiilityökalun käyttöönotto onnistui`;
+
+ dialogActions = [
+ {
+ label: $localize`:@@continue:Jatka`,
+ primary: true,
+ method: 'close',
+ },
+ ];
+
+ constructor() {}
+
+ ngOnInit(): void {}
+}
diff --git a/src/app/mydata/components/redirect/redirect.component.ts b/src/app/mydata/components/redirect/redirect.component.ts
index 26679f795..385c582b2 100644
--- a/src/app/mydata/components/redirect/redirect.component.ts
+++ b/src/app/mydata/components/redirect/redirect.component.ts
@@ -1,14 +1,17 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
import { Component } from '@angular/core';
-
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+
@Component({
- selector: 'app-redirect',
- templateUrl: './redirect.component.html',
-})
-export class RedirectComponent {}
+ selector: 'app-redirect',
+ templateUrl: './redirect.component.html',
+ standalone: true,
+ imports: [MatProgressSpinner],
+})
+export class RedirectComponent {}
diff --git a/src/app/mydata/components/service-deployment/cancel-deployment/cancel-deployment.component.html b/src/app/mydata/components/service-deployment/cancel-deployment/cancel-deployment.component.html
index f3f51d8f5..da54f1941 100644
--- a/src/app/mydata/components/service-deployment/cancel-deployment/cancel-deployment.component.html
+++ b/src/app/mydata/components/service-deployment/cancel-deployment/cancel-deployment.component.html
@@ -1,55 +1,57 @@
-
-
-
-
+
+
+
+
diff --git a/src/app/mydata/components/service-deployment/cancel-deployment/cancel-deployment.component.ts b/src/app/mydata/components/service-deployment/cancel-deployment/cancel-deployment.component.ts
index 502dcd0b3..bb0ae5598 100644
--- a/src/app/mydata/components/service-deployment/cancel-deployment/cancel-deployment.component.ts
+++ b/src/app/mydata/components/service-deployment/cancel-deployment/cancel-deployment.component.ts
@@ -1,60 +1,71 @@
-import { HttpResponse } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { ProfileService } from '@mydata/services/profile.service';
-import { UtilityService } from '@shared/services/utility.service';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
-import { take } from 'rxjs';
-
-@Component({
- selector: 'app-cancel-deployment',
- templateUrl: './cancel-deployment.component.html',
-})
-export class CancelDeploymentComponent implements OnInit {
- previousStep: number;
- loading = false;
-
- constructor(
- private router: Router,
- private utilityService: UtilityService,
- private oidcSecurityService: OidcSecurityService,
- private profileService: ProfileService
- ) {
- // Look for previous step
- this.previousStep =
- this.router.getCurrentNavigation().previousNavigation?.finalUrl.queryParams?.step;
- }
-
- ngOnInit(): void {
- this.utilityService.setMyDataTitle(
- $localize`:@@cancelServiceDeployment:Peruutetaanko palvelun käyttöönotto?`
- );
- }
-
- cancelDeployment() {
- this.loading = true;
-
- const token = this.oidcSecurityService.getAccessToken();
-
- const logout = () => this.oidcSecurityService.logoff();
-
- if (token) {
- this.profileService
- .deleteAccount().then(
- (value) => {
- this.oidcSecurityService.logoff()
- },
- (reason) => {
- console.error(reason);
- },);
- } else {
- this.router.navigate(['/mydata']);
- }
- }
-
- continueDeployment() {
- this.router.navigate(['/mydata/service-deployment'], {
- queryParams: { step: this.previousStep ? this.previousStep : 1 },
- });
- }
-}
+import { HttpResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ProfileService } from '@mydata/services/profile.service';
+import { UtilityService } from '@shared/services/utility.service';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { take } from 'rxjs';
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf } from '@angular/common';
+import { BannerDividerComponent } from '@shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-cancel-deployment',
+ templateUrl: './cancel-deployment.component.html',
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ SecondaryButtonComponent,
+ BannerDividerComponent
+ ]
+})
+export class CancelDeploymentComponent implements OnInit {
+ previousStep: number;
+ loading = false;
+
+ constructor(
+ private router: Router,
+ private utilityService: UtilityService,
+ private oidcSecurityService: OidcSecurityService,
+ private profileService: ProfileService
+ ) {
+ // Look for previous step
+ this.previousStep =
+ this.router.getCurrentNavigation().previousNavigation?.finalUrl.queryParams?.step;
+ }
+
+ ngOnInit(): void {
+ this.utilityService.setMyDataTitle(
+ $localize`:@@cancelServiceDeployment:Peruutetaanko palvelun käyttöönotto?`
+ );
+ }
+
+ cancelDeployment() {
+ this.loading = true;
+
+ const token = this.oidcSecurityService.getAccessToken();
+
+ const logout = () => this.oidcSecurityService.logoff();
+
+ if (token) {
+ this.profileService
+ .deleteAccount().then(
+ (value) => {
+ this.oidcSecurityService.logoff()
+ },
+ (reason) => {
+ console.error(reason);
+ },);
+ } else {
+ this.router.navigate(['/mydata']);
+ }
+ }
+
+ continueDeployment() {
+ this.router.navigate(['/mydata/service-deployment'], {
+ queryParams: { step: this.previousStep ? this.previousStep : 1 },
+ });
+ }
+}
diff --git a/src/app/mydata/components/service-deployment/orcid-data-fetch/orcid-data-fetch.component.ts b/src/app/mydata/components/service-deployment/orcid-data-fetch/orcid-data-fetch.component.ts
index 96bcde19d..d286b4495 100644
--- a/src/app/mydata/components/service-deployment/orcid-data-fetch/orcid-data-fetch.component.ts
+++ b/src/app/mydata/components/service-deployment/orcid-data-fetch/orcid-data-fetch.component.ts
@@ -1,80 +1,91 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
-import { Router } from '@angular/router';
-import { ProfileService } from '@mydata/services/profile.service';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Router } from '@angular/router';
+import { ProfileService } from '@mydata/services/profile.service';
import { Subscription, take } from 'rxjs';
-
+import { DialogComponent } from '../../../../shared/components/dialog/dialog.component';
+import { NgIf } from '@angular/common';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { PrimaryActionButtonComponent } from '../../../../shared/components/buttons/primary-action-button/primary-action-button.component';
+
@Component({
- selector: 'app-orcid-data-fetch',
- templateUrl: './orcid-data-fetch.component.html',
- styleUrls: ['./orcid-data-fetch.component.scss'],
-})
-export class OrcidDataFetchComponent implements OnInit, OnDestroy {
- @Input() userData: any;
- @Input() orcid: string;
-
- configLoading = true;
- loading = false;
-
- createProfileSub: Subscription;
- accountLinkSub: Subscription;
-
- constructor(
- private profileService: ProfileService,
- private router: Router,
- public dialog: MatDialog
- ) {}
-
- ngOnInit(): void {}
-
- orcidDataFetchWaitingText = $localize`:@@orcidDataFetchWaitingText:Tietoja tuodaan, odota hetki...`;
- orcidDataFetchInfo1 = $localize`:@@orcidDataFetchInfo1:Tutkijan profiilipalvelun käyttöönotto edellyttää, että ORCID -palveluun tallentamasi julkiset tiedot tallennetaan profiilipalveluun.`;
- orcidDataFetchInfo2 = $localize`:@@orcidDataFetchInfo2:Valitsemalla “Tuo ORCID-tietoni” annat luvan ORCID:iin tallentamiesi julkisten tietojesi tallentamiseen Tutkijan profiilipalveluun.`;
- orcidDataFetchInfo3 = $localize`:@@orcidDataFetchInfo3:Tässä vaiheessa emme vielä julkaise profiiliasi.`;
- orcidDataFetchInfo4 = $localize`:@@orcidDataFetchInfo4:Voit hallinnoida tietojesi julkisuutta seuraavaksi aukeavassa profiilieditorissa.`;
-
-
- // Create profile when proceeding from step 4. Get ORCID data after profile creation
- async createProfile() {
- this.profileService
- .createProfile().then(
- (value) => {
- this.loading = true;
- this.getOrcidData();
- },
- (reason) => {
- console.error(reason);
- },);
- }
-
- async fetchOrcidData() {
- if (!this.orcid) {
- this.profileService.handleOrcidNotLinked();
- } else {
- this.profileService
- .accountlink().then(
- (value) => {
- this.loading = true;
- this.createProfile();
- },
- (reason) => {
- console.error(reason);
- console.error('Unable to link ORCID');
- },);
- }
- }
-
- async getOrcidData() {
- const response: any = await this.profileService.getOrcidData();
- if (response.success) {
- this.dialog.closeAll();
- this.loading = false;
- this.router.navigate(['/mydata/profile']);
- }
- }
-
- ngOnDestroy(): void {
- this.createProfileSub?.unsubscribe();
- this.accountLinkSub?.unsubscribe();
- }
-}
+ selector: 'app-orcid-data-fetch',
+ templateUrl: './orcid-data-fetch.component.html',
+ styleUrls: ['./orcid-data-fetch.component.scss'],
+ standalone: true,
+ imports: [
+ PrimaryActionButtonComponent,
+ MatProgressSpinner,
+ NgIf,
+ DialogComponent,
+ ],
+})
+export class OrcidDataFetchComponent implements OnInit, OnDestroy {
+ @Input() userData: any;
+ @Input() orcid: string;
+
+ configLoading = true;
+ loading = false;
+
+ createProfileSub: Subscription;
+ accountLinkSub: Subscription;
+
+ constructor(
+ private profileService: ProfileService,
+ private router: Router,
+ public dialog: MatDialog
+ ) {}
+
+ ngOnInit(): void {}
+
+ orcidDataFetchWaitingText = $localize`:@@orcidDataFetchWaitingText:Tietoja tuodaan, odota hetki...`;
+ orcidDataFetchInfo1 = $localize`:@@orcidDataFetchInfo1:Tutkijan profiilipalvelun käyttöönotto edellyttää, että ORCID -palveluun tallentamasi julkiset tiedot tallennetaan profiilipalveluun.`;
+ orcidDataFetchInfo2 = $localize`:@@orcidDataFetchInfo2:Valitsemalla “Tuo ORCID-tietoni” annat luvan ORCID:iin tallentamiesi julkisten tietojesi tallentamiseen Tutkijan profiilipalveluun.`;
+ orcidDataFetchInfo3 = $localize`:@@orcidDataFetchInfo3:Tässä vaiheessa emme vielä julkaise profiiliasi.`;
+ orcidDataFetchInfo4 = $localize`:@@orcidDataFetchInfo4:Voit hallinnoida tietojesi julkisuutta seuraavaksi aukeavassa profiilieditorissa.`;
+
+
+ // Create profile when proceeding from step 4. Get ORCID data after profile creation
+ async createProfile() {
+ this.profileService
+ .createProfile().then(
+ (value) => {
+ this.loading = true;
+ this.getOrcidData();
+ },
+ (reason) => {
+ console.error(reason);
+ },);
+ }
+
+ async fetchOrcidData() {
+ if (!this.orcid) {
+ this.profileService.handleOrcidNotLinked();
+ } else {
+ this.profileService
+ .accountlink().then(
+ (value) => {
+ this.loading = true;
+ this.createProfile();
+ },
+ (reason) => {
+ console.error(reason);
+ console.error('Unable to link ORCID');
+ },);
+ }
+ }
+
+ async getOrcidData() {
+ const response: any = await this.profileService.getOrcidData();
+ if (response.success) {
+ this.dialog.closeAll();
+ this.loading = false;
+ this.router.navigate(['/mydata/profile']);
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.createProfileSub?.unsubscribe();
+ this.accountLinkSub?.unsubscribe();
+ }
+}
diff --git a/src/app/mydata/components/service-deployment/orcid-login/orcid-login.component.ts b/src/app/mydata/components/service-deployment/orcid-login/orcid-login.component.ts
index 90172f136..34c7fdf68 100644
--- a/src/app/mydata/components/service-deployment/orcid-login/orcid-login.component.ts
+++ b/src/app/mydata/components/service-deployment/orcid-login/orcid-login.component.ts
@@ -1,56 +1,60 @@
-import { DOCUMENT } from '@angular/common';
-import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { OrcidAccoungLinkingService } from '@mydata/services/orcid-account-linking.service';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { OrcidAccoungLinkingService } from '@mydata/services/orcid-account-linking.service';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
import { Subscription } from 'rxjs';
-
+import { PrimaryActionButtonComponent } from '../../../../shared/components/buttons/primary-action-button/primary-action-button.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
@Component({
- selector: 'app-orcid-login',
- templateUrl: './orcid-login.component.html',
- styleUrls: ['./orcid-login.component.scss'],
-})
-export class OrcidLoginComponent implements OnInit, OnDestroy {
- profileName: string;
- userDataSub: Subscription;
- orcidLink: string;
-
- constructor(
- private oidcSecurityService: OidcSecurityService,
- private orcidAccountLinkingService: OrcidAccoungLinkingService,
- @Inject(DOCUMENT) private document: any,
- private router: Router
- ) {}
-
- ngOnInit(): void {
- this.userDataSub = this.oidcSecurityService.userData$.subscribe((data) => {
- if (data.userData) {
- const userData = data.userData;
- this.profileName = userData?.name;
-
- // Redirect to profile view if ORCID is already linked
- if (userData.orcid) {
- this.router.navigate(['/mydata/profile']);
- }
- }
- });
- }
-
- async getOrcidLink() {
- this.orcidLink = await this.orcidAccountLinkingService.getOrcidLink();
- }
-
- loginOrcid() {
- this.getOrcidLink().then(() => {
- if (this.orcidLink) {
- this.document.location.href = this.orcidLink;
- } else {
- console.error('Unable to get ORCID link');
- }
- });
- }
-
- ngOnDestroy(): void {
- this.userDataSub?.unsubscribe();
- }
-}
+ selector: 'app-orcid-login',
+ templateUrl: './orcid-login.component.html',
+ styleUrls: ['./orcid-login.component.scss'],
+ standalone: true,
+ imports: [FontAwesomeModule, PrimaryActionButtonComponent],
+})
+export class OrcidLoginComponent implements OnInit, OnDestroy {
+ profileName: string;
+ userDataSub: Subscription;
+ orcidLink: string;
+
+ constructor(
+ private oidcSecurityService: OidcSecurityService,
+ private orcidAccountLinkingService: OrcidAccoungLinkingService,
+ @Inject(DOCUMENT) private document: any,
+ private router: Router
+ ) {}
+
+ ngOnInit(): void {
+ this.userDataSub = this.oidcSecurityService.userData$.subscribe((data) => {
+ if (data.userData) {
+ const userData = data.userData;
+ this.profileName = userData?.name;
+
+ // Redirect to profile view if ORCID is already linked
+ if (userData.orcid) {
+ this.router.navigate(['/mydata/profile']);
+ }
+ }
+ });
+ }
+
+ async getOrcidLink() {
+ this.orcidLink = await this.orcidAccountLinkingService.getOrcidLink();
+ }
+
+ loginOrcid() {
+ this.getOrcidLink().then(() => {
+ if (this.orcidLink) {
+ this.document.location.href = this.orcidLink;
+ } else {
+ console.error('Unable to get ORCID link');
+ }
+ });
+ }
+
+ ngOnDestroy(): void {
+ this.userDataSub?.unsubscribe();
+ }
+}
diff --git a/src/app/mydata/components/service-deployment/service-deployment.component.html b/src/app/mydata/components/service-deployment/service-deployment.component.html
index 769a9609a..afbb0f60c 100644
--- a/src/app/mydata/components/service-deployment/service-deployment.component.html
+++ b/src/app/mydata/components/service-deployment/service-deployment.component.html
@@ -1,86 +1,88 @@
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/src/app/mydata/components/service-deployment/service-deployment.component.ts b/src/app/mydata/components/service-deployment/service-deployment.component.ts
index c0f5962c7..5caa6012b 100644
--- a/src/app/mydata/components/service-deployment/service-deployment.component.ts
+++ b/src/app/mydata/components/service-deployment/service-deployment.component.ts
@@ -1,134 +1,160 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ProfileService } from '@mydata/services/profile.service';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { UtilityService } from '@shared/services/utility.service';
-import { Subscription, switchMap } from 'rxjs';
-import {
- faHandshakeAlt,
- faFileAlt,
- faDownload,
- IconDefinition,
-} from '@fortawesome/free-solid-svg-icons';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
-
-type Step = { label: string; icon: IconDefinition; loading?: boolean };
-@Component({
- selector: 'app-service-deployment',
- templateUrl: './service-deployment.component.html',
- styleUrls: ['./service-deployment.component.scss'],
-})
-export class ServiceDeploymentComponent implements OnInit, OnDestroy {
- step: number;
- title = $localize`:@@serviceDeployment:Profiilityökalun käyttöönotto - Tutkijan tiedot`;
- textContent: string;
- locale: string;
- cancel = false;
- queryParamsSub: Subscription;
- userDataSub: Subscription;
- userData: any;
- loading = true;
- currentStep: Step;
-
- openTermsAndProcessingPrinciples = $localize`:@@openTermsAndProcessingPrinciples:Avaa käyttöehdot ja käsittelyperiaatteet`;
-
- steps: Step[] = [
- {
- label: $localize`:@@serviceDeploymentCreateProfile:Kokoa profiili`,
- icon: faHandshakeAlt,
- },
- {
- label: $localize`:@@termsPersonalDataProcessing:Käyttöehdot ja henkilötietojen käsittely`,
- icon: faFileAlt,
- },
- {
- label: $localize`:@@serviceDeploymentAuthenticationSucceful:Tunnistautuminen onnistui`,
- icon: faHandshakeAlt,
- },
- {
- label: $localize`:@@serviceDeploymentOrcidLoginSuccesful:ORCID-kirjautuminen onnistui`,
- icon: faDownload,
- loading: true,
- },
- ];
-
- IDPLinkSub: Subscription;
- orcid: string;
-
- constructor(
- private utilityService: UtilityService,
- private route: ActivatedRoute,
- private appSettingsService: AppSettingsService,
- private router: Router,
- private profileService: ProfileService,
- private oidcSecurityService: OidcSecurityService
- ) {
- this.locale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- // Initialize step
- this.queryParamsSub = this.route.queryParams.subscribe((params) => {
- this.step = Number(params.step) || 1;
-
- const current = this.steps[this.step - 1];
-
- this.utilityService.setMyDataTitle(`${current.label} | ${this.title}`);
-
- this.currentStep = current;
-
- // Initialize Identity Provider configuration and enable ORCID data fetch in step 4
- if (this.step === 4) {
- this.profileService
- .accountlink().then(
- (value) => {
- this.IDPLinkSub = this.oidcSecurityService.forceRefreshSession()
- .subscribe(() => {
- this.oidcSecurityService.getPayloadFromIdToken().subscribe(data => {
- this.orcid = data.orcid;
- this.profileService.setUserData(data);
- });
- });
- },
- (reason) => {
- console.error(reason);
- },);
- }
- });
-
- // Get page content from CMS data
- this.textContent = this.route.snapshot.data.pages.find(
- (page) => page.id === 'mydata_create_profile'
- )['content' + this.locale];
-
- this.userDataSub = this.profileService.userData.subscribe((userData) => {
- this.userData = userData;
- this.handleLoadingIndicator();
- });
- }
-
- changeStep(step: number) {
- this.step = step;
- this.router.navigate([], { queryParams: { step: step } });
- }
-
- toggleCancel(): void {
- this.cancel = !this.cancel;
- }
-
- /*
- * There is a short lag in ORCID - OIDC communication when coming back from ORCID login.
- * Prevent user from fetching ORCID data before configuration is initialized.
- */
- handleLoadingIndicator() {
- if (this.currentStep.loading) {
- this.currentStep.loading = !!!this.userData;
- }
- }
-
- ngOnDestroy(): void {
- this.queryParamsSub?.unsubscribe();
- this.userDataSub?.unsubscribe();
- this.IDPLinkSub?.unsubscribe();
- }
-}
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ProfileService } from '@mydata/services/profile.service';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { UtilityService } from '@shared/services/utility.service';
+import { Subscription, switchMap } from 'rxjs';
+import {
+ faHandshakeAlt,
+ faFileAlt,
+ faDownload,
+ IconDefinition,
+} from '@fortawesome/free-solid-svg-icons';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { OrcidComponent } from '../../../shared/components/orcid/orcid.component';
+import { SecondaryButtonComponent } from '../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { OrcidDataFetchComponent } from './orcid-data-fetch/orcid-data-fetch.component';
+import { OrcidLoginComponent } from './orcid-login/orcid-login.component';
+import { ServiceTermsComponent } from './service-terms/service-terms.component';
+import { PrimaryActionButtonComponent } from '../../../shared/components/buttons/primary-action-button/primary-action-button.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf, NgSwitch, NgSwitchCase } from '@angular/common';
+import { BannerDividerComponent } from '@shared/components/banner-divider/banner-divider.component';
+
+type Step = { label: string; icon: /*IconDefinition*/ any; loading?: boolean };
+@Component({
+ selector: 'app-service-deployment',
+ templateUrl: './service-deployment.component.html',
+ styleUrls: ['./service-deployment.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ FontAwesomeModule,
+ NgSwitch,
+ NgSwitchCase,
+ PrimaryActionButtonComponent,
+ ServiceTermsComponent,
+ OrcidLoginComponent,
+ OrcidDataFetchComponent,
+ SecondaryButtonComponent,
+ RouterLink,
+ OrcidComponent,
+ BannerDividerComponent
+ ]
+})
+export class ServiceDeploymentComponent implements OnInit, OnDestroy {
+ step: number;
+ title = $localize`:@@serviceDeployment:Profiilityökalun käyttöönotto - Tutkijan tiedot`;
+ textContent: string;
+ locale: string;
+ cancel = false;
+ queryParamsSub: Subscription;
+ userDataSub: Subscription;
+ userData: any;
+ loading = true;
+ currentStep: Step;
+
+ openTermsAndProcessingPrinciples = $localize`:@@openTermsAndProcessingPrinciples:Avaa käyttöehdot ja käsittelyperiaatteet`;
+
+ steps: Step[] = [
+ {
+ label: $localize`:@@serviceDeploymentCreateProfile:Kokoa profiili`,
+ icon: faHandshakeAlt,
+ },
+ {
+ label: $localize`:@@termsPersonalDataProcessing:Käyttöehdot ja henkilötietojen käsittely`,
+ icon: faFileAlt,
+ },
+ {
+ label: $localize`:@@serviceDeploymentAuthenticationSucceful:Tunnistautuminen onnistui`,
+ icon: faHandshakeAlt,
+ },
+ {
+ label: $localize`:@@serviceDeploymentOrcidLoginSuccesful:ORCID-kirjautuminen onnistui`,
+ icon: faDownload,
+ loading: true,
+ },
+ ];
+
+ IDPLinkSub: Subscription;
+ orcid: string;
+
+ constructor(
+ private utilityService: UtilityService,
+ private route: ActivatedRoute,
+ private appSettingsService: AppSettingsService,
+ private router: Router,
+ private profileService: ProfileService,
+ private oidcSecurityService: OidcSecurityService
+ ) {
+ this.locale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ // Initialize step
+ this.queryParamsSub = this.route.queryParams.subscribe((params) => {
+ this.step = Number(params.step) || 1;
+
+ const current = this.steps[this.step - 1];
+
+ this.utilityService.setMyDataTitle(`${current.label} | ${this.title}`);
+
+ this.currentStep = current;
+
+ // Initialize Identity Provider configuration and enable ORCID data fetch in step 4
+ if (this.step === 4) {
+ this.profileService
+ .accountlink().then(
+ (value) => {
+ this.IDPLinkSub = this.oidcSecurityService.forceRefreshSession()
+ .subscribe(() => {
+ this.oidcSecurityService.getPayloadFromIdToken().subscribe(data => {
+ this.orcid = data.orcid;
+ this.profileService.setUserData(data);
+ });
+ });
+ },
+ (reason) => {
+ console.error(reason);
+ },);
+ }
+ });
+
+ // Get page content from CMS data
+ this.textContent = this.route.snapshot.data.pages.find(
+ (page) => page.id === 'mydata_create_profile'
+ )['content' + this.locale];
+
+ this.userDataSub = this.profileService.userData.subscribe((userData) => {
+ this.userData = userData;
+ this.handleLoadingIndicator();
+ });
+ }
+
+ changeStep(step: number) {
+ this.step = step;
+ this.router.navigate([], { queryParams: { step: step } });
+ }
+
+ toggleCancel(): void {
+ this.cancel = !this.cancel;
+ }
+
+ /*
+ * There is a short lag in ORCID - OIDC communication when coming back from ORCID login.
+ * Prevent user from fetching ORCID data before configuration is initialized.
+ */
+ handleLoadingIndicator() {
+ if (this.currentStep.loading) {
+ this.currentStep.loading = !!!this.userData;
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.queryParamsSub?.unsubscribe();
+ this.userDataSub?.unsubscribe();
+ this.IDPLinkSub?.unsubscribe();
+ }
+}
diff --git a/src/app/mydata/components/service-deployment/service-terms/service-terms.component.ts b/src/app/mydata/components/service-deployment/service-terms/service-terms.component.ts
index 363d3f32f..3b644cbec 100644
--- a/src/app/mydata/components/service-deployment/service-terms/service-terms.component.ts
+++ b/src/app/mydata/components/service-deployment/service-terms/service-terms.component.ts
@@ -1,38 +1,53 @@
-import { Component, OnInit, TemplateRef } from '@angular/core';
-import { CommonStrings } from '@mydata/constants/strings';
+import { Component, OnInit, TemplateRef } from '@angular/core';
+import { CommonStrings } from '@mydata/constants/strings';
import { OidcSecurityService } from 'angular-auth-oidc-client';
-
+import { DialogComponent } from '../../../../shared/components/dialog/dialog.component';
+import { NgIf } from '@angular/common';
+import { PrimaryActionButtonComponent } from '../../../../shared/components/buttons/primary-action-button/primary-action-button.component';
+import { MyDataTerms } from '../../mydata-terms/mydata-terms.component';
+import { FormsModule } from '@angular/forms';
+import { MatCheckbox } from '@angular/material/checkbox';
+
@Component({
- selector: 'app-service-terms',
- templateUrl: './service-terms.component.html',
- styleUrls: ['./service-terms.component.scss'],
-})
-export class ServiceTermsComponent implements OnInit {
- dialogTitle: string;
- termsApproved = false;
- personalDataHandlingApproved = false;
- continueWithSuomiFiLogin = $localize`:@@continueWithSuomiFiLogin:Jatka tunnistautumalla (Suomi.fi)`;
-
- showDialog: boolean;
- dialogTemplate: TemplateRef;
- dialogActions = [
- { label: $localize`:@@close:Sulje`, primary: true, method: 'close' },
- ];
-
- termsForTool = CommonStrings.termsForTool;
- processingOfPersonalData = CommonStrings.processingOfPersonalData;
-
- constructor(private oidcSecurityService: OidcSecurityService) {}
-
- ngOnInit(): void {}
-
- authenticate() {
- this.oidcSecurityService.authorize();
- }
-
- openDialog(title, template) {
- this.dialogTitle = title;
- this.showDialog = true;
- this.dialogTemplate = template;
- }
-}
+ selector: 'app-service-terms',
+ templateUrl: './service-terms.component.html',
+ styleUrls: ['./service-terms.component.scss'],
+ standalone: true,
+ imports: [
+ MatCheckbox,
+ FormsModule,
+ MyDataTerms,
+ PrimaryActionButtonComponent,
+ NgIf,
+ DialogComponent,
+ ],
+})
+export class ServiceTermsComponent implements OnInit {
+ dialogTitle: string;
+ termsApproved = false;
+ personalDataHandlingApproved = false;
+ continueWithSuomiFiLogin = $localize`:@@continueWithSuomiFiLogin:Jatka tunnistautumalla (Suomi.fi)`;
+
+ showDialog: boolean;
+ dialogTemplate: TemplateRef;
+ dialogActions = [
+ { label: $localize`:@@close:Sulje`, primary: true, method: 'close' },
+ ];
+
+ termsForTool = CommonStrings.termsForTool;
+ processingOfPersonalData = CommonStrings.processingOfPersonalData;
+
+ constructor(private oidcSecurityService: OidcSecurityService) {}
+
+ ngOnInit(): void {}
+
+ authenticate() {
+ this.oidcSecurityService.authorize();
+ }
+
+ openDialog(title, template) {
+ this.dialogTitle = title;
+ this.showDialog = true;
+ this.dialogTemplate = template;
+ }
+}
diff --git a/src/app/mydata/components/welcome-stepper/welcome-stepper.component.ts b/src/app/mydata/components/welcome-stepper/welcome-stepper.component.ts
index 5a94cb721..0cb1f2e60 100644
--- a/src/app/mydata/components/welcome-stepper/welcome-stepper.component.ts
+++ b/src/app/mydata/components/welcome-stepper/welcome-stepper.component.ts
@@ -1,76 +1,86 @@
-import { Component, EventEmitter, OnInit, Output, ViewEncapsulation } from '@angular/core';
-import { MatStepperModule } from '@angular/material/stepper'
-import { UntypedFormBuilder, Validators } from '@angular/forms';
-import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
-import { ActivatedRoute, NavigationEnd, Router, RouterEvent } from '@angular/router';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { Location } from "@angular/common";
-import { DialogEventsService } from '@shared/services/dialog-events.service';
-import { DialogAction } from '../../../../types';
+import { Component, EventEmitter, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import { MatStepperModule, MatStepper, MatStep, MatStepLabel, MatStepContent } from '@angular/material/stepper'
+import { UntypedFormBuilder, Validators } from '@angular/forms';
+import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
+import { ActivatedRoute, NavigationEnd, Router, RouterEvent } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Location, AsyncPipe } from "@angular/common";
+import { DialogEventsService } from '@shared/services/dialog-events.service';
+import { DialogAction } from '../../../../types';
import { OidcSecurityService } from 'angular-auth-oidc-client';
-
+import { DialogComponent } from '../../../shared/components/dialog/dialog.component';
+
@Component({
- selector: 'app-welcome-stepper',
- templateUrl: './welcome-stepper.component.html',
- styleUrls: ['./welcome-stepper.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-
-export class WelcomeStepperComponent implements OnInit {
- firstFormGroup = this._formBuilder.group({
- firstCtrl: ['', Validators.required],
- });
-
- localizedTitle = $localize`:@@welcomeStepperHowItWorksCaption:Miten Tutkijan tiedot -työkalu toimii?`;
-
- isAuthenticated$ = this.oidcSecurityService.isAuthenticated$.pipe(map((authResult) => authResult.isAuthenticated));
-
- localizedDialogActions$ = this.isAuthenticated$.pipe(map(isAuthenticated => {
- if (isAuthenticated) {
- return [
- { label: $localize`:@@closeInstructions:Sulje ohjeet`, primary: false, method: 'close' }
- ];
- } else {
- return [
- { label: $localize`:@@closeInstructions:Sulje ohjeet`, primary: false, method: 'close' },
- { label: $localize`:@@createProfile:Luo profiili`, primary: true, method: 'createProfile' }
- ];
- }
- }));
-
- localizedStepCaptions = [$localize`:@@welcomeStepperStep1Caption:Aloita työkalun käyttö vahvalla Suomi.fi-tunnistautumisella sekä kirjautumalla ORCID-tunnuksillasi.`,
- $localize`:@@welcomeStepperStep2Caption:Kokoa julkisessa profiilissasi näytettävät tiedot.`,
- $localize`:@@welcomeStepperStep3Caption:Kun päivität tietojasi ORCID-palvelussa tai kotiorganisaatiossasi, myös profiiliisi valitsemasi tiedot päivittyvät automaattisesti.`,
- $localize`:@@welcomeStepperStep4Caption:Esikatsele julkiseen profiiliisi lisäämiäsi tietoja ennen niiden julkaisemista.`,
- $localize`:@@welcomeStepperStep5Caption:Jaa halutessasi profiilisi tietoja myös muille tutkimustoimijoille.`,
- $localize`:@@welcomeStepperStep6Caption:Valmista!`,
- ];
-
- localizedStepContent = [$localize`:@@welcomeStepperStep1Caption:Suomi.fi-tunnistautumisen avulla vahvistamme henkilöllisyytesi. ORCID-tunnisteen avulla voit koota profiiliisi tiedot eri lähteistä.`,
- $localize`:@@welcomeStepperStep2Content1:Kun olet kirjautunut, voit valita, mitkä ORCID-tunnisteeseesi yhdistetyt tiedot haluat asettaa julkiseksi profiilissasi. Voit liittää profiiliin tietoja ORCID-palvelusta löytyvien tietojen lisäksi myös oman kotiorganisaatiosi tiedoista. Sinun tarvitsee vain valita julkiseksi asetettavat tiedot. Työkaluun ei ole mahdollista syöttää tietoja itse.`,
- $localize`:@@welcomeStepperStep2Content2:Jos et löydä tämänhetkisestä kotiorganisaatiostasi peräisin olevia tietoja, johtuu se siitä, että organisaatiosi ei ole vielä tehnyt tarvittavia tiedonsiirtoja.`,
- $localize`:@@welcomeStepperStep3Content1:Jos haluat muokata alkuperäisiä tietojasi, tee se tiedon alkuperäisessä lähteessä (kotiorganisaation järjestelmä, ORCID-palvelu). Tiedot päivittyvät profiiliisi automaattisesti.`,
- $localize`:@@welcomeStepperStep4Content:Kun olet valinnut haluamasi tiedot, voit esikatsella profiiliasi muokkausnäkymässä. Vasta profiilin julkaisemisen jälkeen profiiliin tiedot näkyvät Tiedejatutkimus.fi-portaalissa.`,
- $localize`:@@welcomeStepperStep5Content:Vuoden 2023 aikana kehitämme toiminnallisuutta profiilitietojesi jakamiseen halutessasi sellaisille tutkimusrahoittajille, kotiorganisaatiollesi ja muille yhteistyökumppaneille, joilla on valmius tietojen hyödyntämiseen omassa järjestelmässään. Tämä ei ole vielä mahdollista nykyisessä versiossa.`,
- $localize`:@@welcomeStepperStep6Content:Profiilisi on nyt löydettävissä Tiedejatutkimus.fi-sivustolla, josta mm. tiedotusvälineet, rahoittajat, tutkimusyhteistyöstä kiinnostuneet sekä muut tutkimustiedon etsijät voivat löytää profiilisi!`,
- ];
-
- constructor(
- private _formBuilder: UntypedFormBuilder,
- private dialogEvents: DialogEventsService,
- private oidcSecurityService: OidcSecurityService,
- private router: Router,
- ) {}
-
- ngOnInit(): void {
- }
-
- doDialogAction(action: string) {
- if (action === 'createProfile') {
- this.router.navigate(['mydata', 'service-deployment']);
- }
-
- this.dialogEvents.setQuickstartState(false);
- }
-}
+ selector: 'app-welcome-stepper',
+ templateUrl: './welcome-stepper.component.html',
+ styleUrls: ['./welcome-stepper.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ MatStepper,
+ MatStep,
+ MatStepLabel,
+ MatStepContent,
+ DialogComponent,
+ AsyncPipe,
+ ],
+})
+
+export class WelcomeStepperComponent implements OnInit {
+ firstFormGroup = this._formBuilder.group({
+ firstCtrl: ['', Validators.required],
+ });
+
+ localizedTitle = $localize`:@@welcomeStepperHowItWorksCaption:Miten Tutkijan tiedot -työkalu toimii?`;
+
+ isAuthenticated$ = this.oidcSecurityService.isAuthenticated$.pipe(map((authResult) => authResult.isAuthenticated));
+
+ localizedDialogActions$ = this.isAuthenticated$.pipe(map(isAuthenticated => {
+ if (isAuthenticated) {
+ return [
+ { label: $localize`:@@closeInstructions:Sulje ohjeet`, primary: false, method: 'close' }
+ ];
+ } else {
+ return [
+ { label: $localize`:@@closeInstructions:Sulje ohjeet`, primary: false, method: 'close' },
+ { label: $localize`:@@createProfile:Luo profiili`, primary: true, method: 'createProfile' }
+ ];
+ }
+ }));
+
+ localizedStepCaptions = [$localize`:@@welcomeStepperStep1Caption:Aloita työkalun käyttö vahvalla Suomi.fi-tunnistautumisella sekä kirjautumalla ORCID-tunnuksillasi.`,
+ $localize`:@@welcomeStepperStep2Caption:Kokoa julkisessa profiilissasi näytettävät tiedot.`,
+ $localize`:@@welcomeStepperStep3Caption:Kun päivität tietojasi ORCID-palvelussa tai kotiorganisaatiossasi, myös profiiliisi valitsemasi tiedot päivittyvät automaattisesti.`,
+ $localize`:@@welcomeStepperStep4Caption:Esikatsele julkiseen profiiliisi lisäämiäsi tietoja ennen niiden julkaisemista.`,
+ $localize`:@@welcomeStepperStep5Caption:Jaa halutessasi profiilisi tietoja myös muille tutkimustoimijoille.`,
+ $localize`:@@welcomeStepperStep6Caption:Valmista!`,
+ ];
+
+ localizedStepContent = [$localize`:@@welcomeStepperStep1Caption:Suomi.fi-tunnistautumisen avulla vahvistamme henkilöllisyytesi. ORCID-tunnisteen avulla voit koota profiiliisi tiedot eri lähteistä.`,
+ $localize`:@@welcomeStepperStep2Content1:Kun olet kirjautunut, voit valita, mitkä ORCID-tunnisteeseesi yhdistetyt tiedot haluat asettaa julkiseksi profiilissasi. Voit liittää profiiliin tietoja ORCID-palvelusta löytyvien tietojen lisäksi myös oman kotiorganisaatiosi tiedoista. Sinun tarvitsee vain valita julkiseksi asetettavat tiedot. Työkaluun ei ole mahdollista syöttää tietoja itse.`,
+ $localize`:@@welcomeStepperStep2Content2:Jos et löydä tämänhetkisestä kotiorganisaatiostasi peräisin olevia tietoja, johtuu se siitä, että organisaatiosi ei ole vielä tehnyt tarvittavia tiedonsiirtoja.`,
+ $localize`:@@welcomeStepperStep3Content1:Jos haluat muokata alkuperäisiä tietojasi, tee se tiedon alkuperäisessä lähteessä (kotiorganisaation järjestelmä, ORCID-palvelu). Tiedot päivittyvät profiiliisi automaattisesti.`,
+ $localize`:@@welcomeStepperStep4Content:Kun olet valinnut haluamasi tiedot, voit esikatsella profiiliasi muokkausnäkymässä. Vasta profiilin julkaisemisen jälkeen profiiliin tiedot näkyvät Tiedejatutkimus.fi-portaalissa.`,
+ $localize`:@@welcomeStepperStep5Content:Vuoden 2023 aikana kehitämme toiminnallisuutta profiilitietojesi jakamiseen halutessasi sellaisille tutkimusrahoittajille, kotiorganisaatiollesi ja muille yhteistyökumppaneille, joilla on valmius tietojen hyödyntämiseen omassa järjestelmässään. Tämä ei ole vielä mahdollista nykyisessä versiossa.`,
+ $localize`:@@welcomeStepperStep6Content:Profiilisi on nyt löydettävissä Tiedejatutkimus.fi-sivustolla, josta mm. tiedotusvälineet, rahoittajat, tutkimusyhteistyöstä kiinnostuneet sekä muut tutkimustiedon etsijät voivat löytää profiilisi!`,
+ ];
+
+ constructor(
+ private _formBuilder: UntypedFormBuilder,
+ private dialogEvents: DialogEventsService,
+ private oidcSecurityService: OidcSecurityService,
+ private router: Router,
+ ) {}
+
+ ngOnInit(): void {
+ }
+
+ doDialogAction(action: string) {
+ if (action === 'createProfile') {
+ this.router.navigate(['mydata', 'service-deployment']);
+ }
+
+ this.dialogEvents.setQuickstartState(false);
+ }
+}
diff --git a/src/app/mydata/constants/index.ts b/src/app/mydata/constants/index.ts
index 4ecc21c95..a1224444a 100644
--- a/src/app/mydata/constants/index.ts
+++ b/src/app/mydata/constants/index.ts
@@ -107,13 +107,14 @@ export const PublicationColumns = [
id: 'year',
label: $localize`:@@year:Vuosi`,
field: 'publicationYear',
- width: '4rem;',
+ width: '1',
},
{
id: 'name',
ellipsis: true,
label: $localize`:@@name:Nimi`,
field: 'title',
+ width: '8',
additionalFields: [
{ field: 'authors', ellipsis: true },
{ field: 'parentPublicationName', hidden: true },
@@ -124,7 +125,7 @@ export const PublicationColumns = [
id: 'source',
label: $localize`:@@source:Lähde`,
field: 'source',
- width: '8rem',
+ width: '2',
},
];
@@ -133,13 +134,14 @@ export const DatasetColumns = [
id: 'year',
label: $localize`:@@year:Vuosi`,
field: 'year',
- width: '4rem;',
+ width: '1',
},
{
id: 'name',
ellipsis: true,
label: $localize`:@@name:Nimi`,
field: 'name',
+ width: '8',
additionalFields: [
{
field: 'authors',
@@ -163,7 +165,7 @@ export const DatasetColumns = [
id: 'source',
label: $localize`:@@source:Lähde`,
field: 'source',
- width: '8rem',
+ width: '2',
},
];
@@ -172,13 +174,14 @@ export const ActivityColumns = [
id: 'timing',
label: $localize`:@@timing:Ajoitus`,
field: 'timing',
- width: '6rem;',
+ width: '2',
},
{
id: 'roleNameType',
ellipsis: true,
label: $localize`:@@activity:Aktiviteetti`,
field: 'roleNameType',
+ width: '6',
additionalFields: [
{
field: 'type',
@@ -211,7 +214,7 @@ export const ActivityColumns = [
id: 'source',
label: $localize`:@@source:Lähde`,
field: 'source',
- width: '8rem',
+ width: '2',
},
];
@@ -220,13 +223,14 @@ export const FundingColumns = [
id: 'year',
label: $localize`:@@year:Vuosi`,
field: 'startYear',
- width: '4rem;',
+ width: '1',
},
{
id: 'name',
ellipsis: true,
label: $localize`:@@name:Nimi`,
field: 'name',
+ width: '8',
additionalFields: [
// { field: 'funderProjectNumber' },
// {
@@ -252,7 +256,7 @@ export const FundingColumns = [
id: 'source',
label: $localize`:@@source:Lähde`,
field: 'source',
- width: '8rem',
+ width: '2',
},
];
diff --git a/src/app/mydata/mydata-routing.module.ts b/src/app/mydata/mydata-routing.module.ts
index f9dd5f693..2a90e2590 100644
--- a/src/app/mydata/mydata-routing.module.ts
+++ b/src/app/mydata/mydata-routing.module.ts
@@ -1,115 +1,106 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-import { HomeComponent } from './components/home/home.component';
-import { LoginComponent } from './components/login/login.component';
-import { ServiceDeploymentComponent } from './components/service-deployment/service-deployment.component';
-import { CancelDeploymentComponent } from './components/service-deployment/cancel-deployment/cancel-deployment.component';
-import { RedirectComponent } from './components/redirect/redirect.component';
-import { ProfileComponent } from './components/profile/profile.component';
-import { DataSourcesComponent } from './components/profile/data-sources/data-sources.component';
-import { AuthGuard } from './services/auth-guard.service';
-import { PageResolverService } from '@shared/resolvers/page-resolver.service';
-import { OrcidProfileResolverService } from './resolvers/orcid-profile-resolver.service';
-import { MyDataProfileResolverService } from './resolvers/mydata-profile-resolver.service';
-import { MyDataTerms } from './components/mydata-terms/mydata-terms.component';
-import { AccountSettingsComponent } from '@mydata/components/account-settings/account-settings.component';
-
-const routes: Routes = [
- {
- path: '',
- pathMatch: 'full',
- component: HomeComponent,
- },
- {
- path: 'login',
- pathMatch: 'full',
- component: LoginComponent,
- resolve: {
- pages: PageResolverService,
- },
- },
- {
- path: 'service-deployment',
- pathMatch: 'full',
- component: ServiceDeploymentComponent,
- canActivate: [AuthGuard],
- resolve: {
- pages: PageResolverService,
- },
- },
- {
- path: 'cancel-deployment',
- pathMatch: 'full',
- component: CancelDeploymentComponent,
- },
- {
- path: 'profile',
- pathMatch: 'full',
- component: ProfileComponent,
- canActivate: [AuthGuard],
- resolve: {
- pages: PageResolverService,
- orcidProfile: OrcidProfileResolverService,
- myDataProfile: MyDataProfileResolverService,
- },
- },
- {
- path: 'data-sources',
- pathMatch: 'full',
- component: DataSourcesComponent,
- canActivate: [AuthGuard],
- resolve: {
- orcidProfile: OrcidProfileResolverService,
- myDataProfile: MyDataProfileResolverService,
- },
- },
- {
- path: 'account-settings',
- pathMatch: 'full',
- component: AccountSettingsComponent,
- canActivate: [AuthGuard],
- resolve: {
- orcidProfile: OrcidProfileResolverService,
- myDataProfile: MyDataProfileResolverService,
- },
- },
- {
- path: 'privacy',
- pathMatch: 'full',
- component: MyDataTerms,
- resolve: {
- pages: PageResolverService,
- },
- },
- {
- path: 'terms',
- pathMatch: 'full',
- component: MyDataTerms,
- resolve: {
- pages: PageResolverService,
- },
- },
- {
- path: 'redirect',
- pathMatch: 'full',
- component: RedirectComponent,
- },
- {
- path: '**',
- redirectTo: 'mydata',
- pathMatch: 'full',
- },
-];
-
-@NgModule({
- imports: [RouterModule.forChild(routes)],
- exports: [RouterModule],
-})
-export class MyDataRoutingModule {}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { HomeComponent } from './components/home/home.component';
+import { ServiceDeploymentComponent } from './components/service-deployment/service-deployment.component';
+import { CancelDeploymentComponent } from './components/service-deployment/cancel-deployment/cancel-deployment.component';
+import { RedirectComponent } from './components/redirect/redirect.component';
+import { ProfileComponent } from './components/profile/profile.component';
+import { DataSourcesComponent } from './components/profile/data-sources/data-sources.component';
+import { AuthGuard } from './services/auth-guard.service';
+import { PageResolverService } from '@shared/resolvers/page-resolver.service';
+import { OrcidProfileResolverService } from './resolvers/orcid-profile-resolver.service';
+import { MyDataProfileResolverService } from './resolvers/mydata-profile-resolver.service';
+import { MyDataTerms } from './components/mydata-terms/mydata-terms.component';
+import { AccountSettingsComponent } from '@mydata/components/account-settings/account-settings.component';
+
+const routes: Routes = [
+ {
+ path: '',
+ pathMatch: 'full',
+ component: HomeComponent,
+ },
+ {
+ path: 'service-deployment',
+ pathMatch: 'full',
+ component: ServiceDeploymentComponent,
+ canActivate: [AuthGuard],
+ resolve: {
+ pages: PageResolverService,
+ },
+ },
+ {
+ path: 'cancel-deployment',
+ pathMatch: 'full',
+ component: CancelDeploymentComponent,
+ },
+ {
+ path: 'profile',
+ pathMatch: 'full',
+ component: ProfileComponent,
+ canActivate: [AuthGuard],
+ resolve: {
+ pages: PageResolverService,
+ orcidProfile: OrcidProfileResolverService,
+ myDataProfile: MyDataProfileResolverService,
+ },
+ },
+ {
+ path: 'data-sources',
+ pathMatch: 'full',
+ component: DataSourcesComponent,
+ canActivate: [AuthGuard],
+ resolve: {
+ orcidProfile: OrcidProfileResolverService,
+ myDataProfile: MyDataProfileResolverService,
+ },
+ },
+ {
+ path: 'account-settings',
+ pathMatch: 'full',
+ component: AccountSettingsComponent,
+ canActivate: [AuthGuard],
+ resolve: {
+ orcidProfile: OrcidProfileResolverService,
+ myDataProfile: MyDataProfileResolverService,
+ },
+ },
+ {
+ path: 'privacy',
+ pathMatch: 'full',
+ component: MyDataTerms,
+ resolve: {
+ pages: PageResolverService,
+ },
+ },
+ {
+ path: 'terms',
+ pathMatch: 'full',
+ component: MyDataTerms,
+ resolve: {
+ pages: PageResolverService,
+ },
+ },
+ {
+ path: 'redirect',
+ pathMatch: 'full',
+ component: RedirectComponent,
+ },
+ {
+ path: '**',
+ redirectTo: 'mydata',
+ pathMatch: 'full',
+ },
+];
+
+@NgModule({
+ imports: [RouterModule.forChild(routes)],
+ exports: [RouterModule],
+})
+export class MyDataRoutingModule {}
diff --git a/src/app/mydata/mydata-shared-theme.scss b/src/app/mydata/mydata-shared-theme.scss
index c8c30ff1f..12bdfb353 100644
--- a/src/app/mydata/mydata-shared-theme.scss
+++ b/src/app/mydata/mydata-shared-theme.scss
@@ -1,43 +1,43 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-mydata-shared-theme($theme) {
- $primary: map-get($theme, primary);
- $warn: map-get($theme, warn);
-
- app-profile-summary,
- app-profile-panel {
- .mat-expansion-indicator::after {
- color: mat-color($primary);
- }
- }
-
- .mat-snack-bar-container.success {
- background: mat-color($primary, 700);
- color: mat-contrast($primary, 500);
-
- .mat-button {
- color: #fff;
- }
- }
-
- .custom-table {
- mat-header-row {
- background: mat-color($primary) !important;
-
- .mat-checkbox-inner-container {
- background: white;
- }
- }
-
- .mat-header-cell {
- color: white;
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-mydata-shared-theme($theme) {
+ $primary: map-get($theme, primary);
+ $warn: map-get($theme, warn);
+
+ app-profile-summary,
+ app-profile-panel {
+ .mat-expansion-indicator::after {
+ color: mat-color($primary);
+ }
+ }
+
+ .mat-mdc-snack-bar-container.success {
+ background: mat-color($primary, 700);
+ color: mat-contrast($primary, 500);
+
+ .mat-mdc-button {
+ color: #fff;
+ }
+ }
+
+ .custom-table {
+ mat-header-row {
+ background: mat-color($primary) !important;
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-checkbox-inner-container {
+ background: white;
+ }
+ }
+
+ .mat-mdc-header-cell {
+ color: white;
+ }
+ }
+}
diff --git a/src/app/mydata/mydata.module.ts b/src/app/mydata/mydata.module.ts
deleted file mode 100644
index e52780f07..000000000
--- a/src/app/mydata/mydata.module.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-
-import { MyDataRoutingModule } from './mydata-routing.module';
-
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
-
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatTabsModule } from '@angular/material/tabs';
-import {
- MatSnackBarModule,
- MatSnackBarConfig,
- MAT_SNACK_BAR_DEFAULT_OPTIONS,
-} from '@angular/material/snack-bar';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatTableModule } from '@angular/material/table';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatPaginatorIntl } from '@angular/material/paginator';
-import { MatSortModule } from '@angular/material/sort';
-import { MatButtonModule } from '@angular/material/button';
-import { MatRippleModule } from '@angular/material/core';
-import { MatMenuModule } from '@angular/material/menu';
-
-import { HomeComponent } from './components/home/home.component';
-import { NotFoundComponent } from './components/not-found/not-found.component';
-import { RedirectComponent } from './components/redirect/redirect.component';
-
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { LoginComponent } from './components/login/login.component';
-
-import { AuthGuard } from './services/auth-guard.service';
-
-import { SharedModule } from '../shared/shared.module';
-
-import { ProfilePanelComponent } from './components/profile/profile-panel/profile-panel.component';
-import { FilterPipe } from './pipes/filter.pipe';
-import { GetLocalizedValuesPipe } from './pipes/getLocalizedValues.pipe';
-import { EditorModalComponent } from './components/profile/editor-modal/editor-modal.component';
-import { ProfileComponent } from './components/profile/profile.component';
-import { PanelArrayItemComponent } from './components/profile/profile-panel/panel-array-item/panel-array-item.component';
-import { CheckFieldLocalePipe } from './pipes/check-field-locale.pipe';
-import { ParseDatePipe } from './pipes/parse-date.pipe';
-import { ActivityItemComponent } from './components/profile/profile-panel/activity-item/activity-item.component';
-import { GetPrimaryOptionsPipe } from './pipes/get-primary-options.pipe';
-import { PrimaryBadgeComponent } from './components/profile/profile-panel/primary-badge/primary-badge.component';
-import { SearchPortalComponent } from './components/profile/search-portal/search-portal.component';
-import { SearchPortalResultsComponent } from './components/profile/search-portal/search-portal-results/search-portal-results.component';
-import { CustomPaginatorIntlComponent } from './components/profile/search-portal/custom-paginator-intl/custom-paginator-intl.component';
-import { countFieldItemsPipe } from './pipes/count-field-items.pipe';
-import { MydataBetaInfoComponent } from './components/mydata-beta-info/mydata-beta-info.component';
-import { ProfileSummaryComponent } from './components/profile/profile-summary/profile-summary.component';
-import { JoinDataSourcesPipe } from './pipes/join-data-sources.pipe';
-import { FindSelectedItemPipe } from './pipes/find-selected-item.pipe';
-import { HandleFetchedPublicationsPipe } from './pipes/handle-fetched-publications.pipe';
-import { SortPublicationsPipe } from './pipes/sort-publications.pipe';
-import { MyDataTerms } from './components/mydata-terms/mydata-terms.component';
-import { DraftSummaryComponent } from './components/profile/draft-summary/draft-summary.component';
-import { ContactCardComponent } from './components/profile/cards/contact-card/contact-card.component';
-import { CollaborationCardComponent } from './components/profile/cards/collaboration-card/collaboration-card.component';
-import { JoinAllGroupItemsPipe } from './pipes/join-all-group-items.pipe';
-import { EmptyCardComponent } from './components/profile/cards/empty-card/empty-card.component';
-import { SummaryAffiliationsComponent } from './components/profile/profile-summary/summary-affiliations/summary-affiliation.component';
-import { SummaryDividerComponent } from './components/profile/profile-summary/summary-divider/summary-divider.component';
-import { GetItemsByPipe } from './pipes/get-items-by.pipe';
-import { SortByFieldTypePipe } from './pipes/sort-by-field-type.pipe';
-import { MatchItemPipe } from './pipes/match-item.pipe';
-import { ProfileEditorCardHeaderComponent } from './components/profile/cards/profile-editor-card-header/profile-editor-card-header.component';
-import { JoinValuesPipe } from './pipes/join-values.pipe';
-import { GetValuePipe } from './pipes/get-value.pipe';
-import { PortalModule } from '@portal/portal.module';
-import { HasFetchedItemPipe } from './pipes/has-fetched-item.pipe';
-import { HasSelectedItemsPipe } from './pipes/has-selected-items.pipe';
-import { SummaryPortalItemsComponent } from './components/profile/profile-summary/summary-portal-items/summary-portal-items.component';
-import { ServiceDeploymentComponent } from './components/service-deployment/service-deployment.component';
-import { ServiceTermsComponent } from './components/service-deployment/service-terms/service-terms.component';
-import { CancelDeploymentComponent } from './components/service-deployment/cancel-deployment/cancel-deployment.component';
-import { OrcidLoginComponent } from './components/service-deployment/orcid-login/orcid-login.component';
-import { OrcidDataFetchComponent } from './components/service-deployment/orcid-data-fetch/orcid-data-fetch.component';
-import { WelcomeDialogComponent } from './components/profile/welcome-dialog/welcome-dialog.component';
-import { DataSourcesComponent } from './components/profile/data-sources/data-sources.component';
-import { DataSourcesTableComponent } from './components/profile/data-sources/data-sources-table/data-sources-table.component';
-import { DataSourcesFiltersComponent } from './components/profile/data-sources/data-sources-filters/data-sources-filters.component';
-import { DataSourcesSelectionActionsComponent } from './components/profile/data-sources/data-sources-selection-actions/data-sources-selection-actions.component';
-import { FindByKeyValuePipe } from './pipes/find-by-key-value.pipe';
-import { AccountSettingsComponent } from './components/account-settings/account-settings.component';
-import { ProfileItemsTableComponent } from './components/profile/profile-items-table/profile-items-table.component';
-import { IsPortalItemPipe } from './pipes/is-portal-item.pipe';
-
-const matSnackbarDefaultConfig: MatSnackBarConfig = {
- verticalPosition: 'top',
- horizontalPosition: 'center',
- duration: 3000,
-};
-
-@NgModule({
- declarations: [
- HomeComponent,
- NotFoundComponent,
- RedirectComponent,
- LoginComponent,
- ProfilePanelComponent,
- FilterPipe,
- GetLocalizedValuesPipe,
- EditorModalComponent,
- ProfileComponent,
- PanelArrayItemComponent,
- CheckFieldLocalePipe,
- ParseDatePipe,
- ActivityItemComponent,
- GetPrimaryOptionsPipe,
- PrimaryBadgeComponent,
- SearchPortalComponent,
- SearchPortalResultsComponent,
- MydataBetaInfoComponent,
- ProfileSummaryComponent,
- JoinDataSourcesPipe,
- FindSelectedItemPipe,
- HandleFetchedPublicationsPipe,
- SortPublicationsPipe,
- MyDataTerms,
- DraftSummaryComponent,
- ContactCardComponent,
- CollaborationCardComponent,
- JoinAllGroupItemsPipe,
- EmptyCardComponent,
- SummaryAffiliationsComponent,
- SummaryDividerComponent,
- GetItemsByPipe,
- SortByFieldTypePipe,
- MatchItemPipe,
- ProfileEditorCardHeaderComponent,
- JoinValuesPipe,
- GetValuePipe,
- HasFetchedItemPipe,
- SummaryPortalItemsComponent,
- ServiceDeploymentComponent,
- ServiceTermsComponent,
- CancelDeploymentComponent,
- OrcidLoginComponent,
- OrcidDataFetchComponent,
- WelcomeDialogComponent,
- HasSelectedItemsPipe,
- countFieldItemsPipe,
- DataSourcesComponent,
- DataSourcesTableComponent,
- DataSourcesFiltersComponent,
- DataSourcesSelectionActionsComponent,
- FindByKeyValuePipe,
- AccountSettingsComponent,
- ProfileItemsTableComponent,
- IsPortalItemPipe,
- ],
- imports: [
- CommonModule,
- FormsModule,
- MyDataRoutingModule,
- SharedModule,
- FontAwesomeModule,
- TooltipModule.forRoot(),
- MatProgressSpinnerModule,
- MatCheckboxModule,
- MatRadioModule,
- MatExpansionModule,
- MatFormFieldModule,
- MatSelectModule,
- MatButtonToggleModule,
- MatSlideToggleModule,
- MatTabsModule,
- MatSnackBarModule,
- MatDialogModule,
- MatDividerModule,
- MatTableModule,
- MatPaginatorModule,
- MatSortModule,
- MatButtonModule,
- MatRippleModule,
- MatMenuModule,
- PortalModule,
- ],
- providers: [
- AuthGuard,
- { provide: MatPaginatorIntl, useClass: CustomPaginatorIntlComponent },
- {
- provide: MAT_SNACK_BAR_DEFAULT_OPTIONS,
- useValue: matSnackbarDefaultConfig,
- },
- ],
-})
-export class MyDataModule {}
diff --git a/src/app/mydata/pipes/check-field-locale.pipe.ts b/src/app/mydata/pipes/check-field-locale.pipe.ts
index 01a745bf4..1c955bd6f 100644
--- a/src/app/mydata/pipes/check-field-locale.pipe.ts
+++ b/src/app/mydata/pipes/check-field-locale.pipe.ts
@@ -1,28 +1,29 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'checkFieldLocale',
-})
-export class CheckFieldLocalePipe implements PipeTransform {
- transform(item: any, locale: string, fieldName: string) {
- if (item[fieldName + locale]) return item[fieldName + locale];
-
- switch (locale) {
- case 'Fi': {
- return item[fieldName + 'En']
- ? item[fieldName + 'En']
- : item[fieldName + 'Sv'];
- }
- case 'Sv': {
- return item[fieldName + 'En']
- ? item[fieldName + 'En']
- : item[fieldName + 'Fi'];
- }
- case 'En': {
- return item[fieldName + 'Fi']
- ? item[fieldName + 'Fi']
- : item[fieldName + 'Sv'];
- }
- }
- }
-}
+ name: 'checkFieldLocale',
+ standalone: true,
+})
+export class CheckFieldLocalePipe implements PipeTransform {
+ transform(item: any, locale: string, fieldName: string) {
+ if (item[fieldName + locale]) return item[fieldName + locale];
+
+ switch (locale) {
+ case 'Fi': {
+ return item[fieldName + 'En']
+ ? item[fieldName + 'En']
+ : item[fieldName + 'Sv'];
+ }
+ case 'Sv': {
+ return item[fieldName + 'En']
+ ? item[fieldName + 'En']
+ : item[fieldName + 'Fi'];
+ }
+ case 'En': {
+ return item[fieldName + 'Fi']
+ ? item[fieldName + 'Fi']
+ : item[fieldName + 'Sv'];
+ }
+ }
+ }
+}
diff --git a/src/app/mydata/pipes/count-field-items.pipe.ts b/src/app/mydata/pipes/count-field-items.pipe.ts
index 1019f7faf..63ec4c898 100644
--- a/src/app/mydata/pipes/count-field-items.pipe.ts
+++ b/src/app/mydata/pipes/count-field-items.pipe.ts
@@ -1,77 +1,78 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'countFieldItems',
- pure: false,
-})
-
-/*
- * Count items in groups. Some items, Eg. single selections and joined items need to be handled differently.
- */
-export class countFieldItemsPipe implements PipeTransform {
- transform(
- group: any,
- extras: { filterSelected: boolean; patchItems: any[]; onlyCount: boolean }
- ) {
- let combinedItems = [];
-
- if (group.length) {
- group.forEach((subgroup) => {
- if (subgroup.joined) {
- subgroup.items.map((item) => (item.joined = true));
- }
- extras?.filterSelected
- ? combinedItems.push(subgroup.items)
- : combinedItems.push(
- subgroup.items
- ?.filter((item) => item.itemMeta.show)
- .map((visibleItem) => {
- return visibleItem.itemMeta;
- })
- );
- });
- }
-
- let ret = [];
- combinedItems[0] && extras?.filterSelected
- ? combinedItems.filter((item) =>
- extras.patchItems
- ? extras.patchItems.find((patchItem) => {
- item.forEach((subItem) => {
- patchItem.id === subItem.itemMeta.id &&
- patchItem.type === subItem.itemMeta.type;
- if (
- patchItem.id === subItem.itemMeta.id &&
- patchItem.type === subItem.itemMeta.type
- ) {
- ret.push(subItem);
- }
- });
- })
- : item.show
- )
- : combinedItems;
-
- // Called 'only count' since crops out information. Used only for counting number of changed items.
- // E.g. count keywords from one source as one item
- if (extras.onlyCount) {
- if (ret.length > 1) {
- let prevItem = ret[0];
- ret.forEach((item) => {
- if (item.joined && prevItem?.itemMeta?.type === item.itemMeta.type) {
- prevItem = item;
- ret.shift();
- }
- });
- }
- }
- return ret;
- }
-}
+ name: 'countFieldItems',
+ pure: false,
+ standalone: true,
+})
+
+/*
+ * Count items in groups. Some items, Eg. single selections and joined items need to be handled differently.
+ */
+export class countFieldItemsPipe implements PipeTransform {
+ transform(
+ group: any,
+ extras: { filterSelected: boolean; patchItems: any[]; onlyCount: boolean }
+ ) {
+ let combinedItems = [];
+
+ if (group.length) {
+ group.forEach((subgroup) => {
+ if (subgroup.joined) {
+ subgroup.items.map((item) => (item.joined = true));
+ }
+ extras?.filterSelected
+ ? combinedItems.push(subgroup.items)
+ : combinedItems.push(
+ subgroup.items
+ ?.filter((item) => item.itemMeta.show)
+ .map((visibleItem) => {
+ return visibleItem.itemMeta;
+ })
+ );
+ });
+ }
+
+ let ret = [];
+ combinedItems[0] && extras?.filterSelected
+ ? combinedItems.filter((item) =>
+ extras.patchItems
+ ? extras.patchItems.find((patchItem) => {
+ item.forEach((subItem) => {
+ patchItem.id === subItem.itemMeta.id &&
+ patchItem.type === subItem.itemMeta.type;
+ if (
+ patchItem.id === subItem.itemMeta.id &&
+ patchItem.type === subItem.itemMeta.type
+ ) {
+ ret.push(subItem);
+ }
+ });
+ })
+ : item.show
+ )
+ : combinedItems;
+
+ // Called 'only count' since crops out information. Used only for counting number of changed items.
+ // E.g. count keywords from one source as one item
+ if (extras.onlyCount) {
+ if (ret.length > 1) {
+ let prevItem = ret[0];
+ ret.forEach((item) => {
+ if (item.joined && prevItem?.itemMeta?.type === item.itemMeta.type) {
+ prevItem = item;
+ ret.shift();
+ }
+ });
+ }
+ }
+ return ret;
+ }
+}
diff --git a/src/app/mydata/pipes/filter.pipe.ts b/src/app/mydata/pipes/filter.pipe.ts
index 50d67064a..3ed81409e 100644
--- a/src/app/mydata/pipes/filter.pipe.ts
+++ b/src/app/mydata/pipes/filter.pipe.ts
@@ -1,44 +1,45 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
- name: 'filter',
-})
-
-/*
- * Usage:
- * {{ item | filter: callback }}
- * Declare callback function in component
- */
-export class FilterPipe implements PipeTransform {
- transform(
- value: any,
- callback: any,
- extras: { type: string; patchItems: any[]; arg: string }
- ) {
- // Case for checking if group items match patch item array
- if (extras?.patchItems) {
- return value.filter(() => callback(value, extras.patchItems)) || [];
- }
-
- // E.g. data sources selection dialog where selection is filtered by status
- if (extras?.arg) {
- return callback(value, extras.arg);
- }
-
- switch (extras?.type) {
- case 'boolean': {
- return !!(value.filter(callback).length > 0);
- }
- default: {
- return value.filter(callback);
- }
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'filter',
+ standalone: true,
+})
+
+/*
+ * Usage:
+ * {{ item | filter: callback }}
+ * Declare callback function in component
+ */
+export class FilterPipe implements PipeTransform {
+ transform(
+ value: any,
+ callback: any,
+ extras?: { type?: string; patchItems?: any[]; arg?: string }
+ ) {
+ // Case for checking if group items match patch item array
+ if (extras?.patchItems) {
+ return value.filter(() => callback(value, extras.patchItems)) || [];
+ }
+
+ // E.g. data sources selection dialog where selection is filtered by status
+ if (extras?.arg) {
+ return callback(value, extras.arg);
+ }
+
+ switch (extras?.type) {
+ case 'boolean': {
+ return !!(value.filter(callback).length > 0);
+ }
+ default: {
+ return value.filter(callback);
+ }
+ }
+ }
+}
diff --git a/src/app/mydata/pipes/find-by-key-value.pipe.ts b/src/app/mydata/pipes/find-by-key-value.pipe.ts
index 4a7eb956a..02c2b3e60 100644
--- a/src/app/mydata/pipes/find-by-key-value.pipe.ts
+++ b/src/app/mydata/pipes/find-by-key-value.pipe.ts
@@ -1,24 +1,25 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'findByKeyValue',
-})
-
-/*
- * Usage:
- * {{ array | 'key': value }}
- *
- * E.g. in draft-summary-component where item is matched to items in patch payload
- */
-export class FindByKeyValuePipe implements PipeTransform {
- transform(array: any[], key: string, value: string) {
- return array.find((item) => item[key] === value);
- }
-}
+ name: 'findByKeyValue',
+ standalone: true,
+})
+
+/*
+ * Usage:
+ * {{ array | 'key': value }}
+ *
+ * E.g. in draft-summary-component where item is matched to items in patch payload
+ */
+export class FindByKeyValuePipe implements PipeTransform {
+ transform(array: any[], key: string, value: string) {
+ return array.find((item) => item[key] === value);
+ }
+}
diff --git a/src/app/mydata/pipes/find-selected-item.pipe.ts b/src/app/mydata/pipes/find-selected-item.pipe.ts
index 8a0531571..f04a22693 100644
--- a/src/app/mydata/pipes/find-selected-item.pipe.ts
+++ b/src/app/mydata/pipes/find-selected-item.pipe.ts
@@ -1,17 +1,18 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'findSelectedItem',
-})
-export class FindSelectedItemPipe implements PipeTransform {
- transform(items: any[]) {
- return !!items.map((item) => item.itemMeta).find((item) => item.show);
- }
-}
+ name: 'findSelectedItem',
+ standalone: true,
+})
+export class FindSelectedItemPipe implements PipeTransform {
+ transform(items: any[]) {
+ return !!items.map((item) => item.itemMeta).find((item) => item.show);
+ }
+}
diff --git a/src/app/mydata/pipes/get-items-by.pipe.ts b/src/app/mydata/pipes/get-items-by.pipe.ts
index 25ca9c671..a0dde6cee 100644
--- a/src/app/mydata/pipes/get-items-by.pipe.ts
+++ b/src/app/mydata/pipes/get-items-by.pipe.ts
@@ -1,17 +1,18 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'getItemsBy',
-})
-export class GetItemsByPipe implements PipeTransform {
- transform(items: any, property: string) {
- return items.filter((item) => item.itemMeta[property]);
- }
-}
+ name: 'getItemsBy',
+ standalone: true,
+})
+export class GetItemsByPipe implements PipeTransform {
+ transform(items: any, property: string) {
+ return items.filter((item) => item.itemMeta[property]);
+ }
+}
diff --git a/src/app/mydata/pipes/get-primary-options.pipe.ts b/src/app/mydata/pipes/get-primary-options.pipe.ts
index 814044adb..afb9c4fe8 100644
--- a/src/app/mydata/pipes/get-primary-options.pipe.ts
+++ b/src/app/mydata/pipes/get-primary-options.pipe.ts
@@ -1,36 +1,37 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-import { CheckFieldLocalePipe } from './check-field-locale.pipe';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { CheckFieldLocalePipe } from './check-field-locale.pipe';
+
@Pipe({
- name: 'getPrimaryOptions',
-})
-export class GetPrimaryOptionsPipe implements PipeTransform {
- transform(
- items: unknown,
- index: number,
- locale: string,
- fieldName: string
- ): unknown {
- const checkFieldLocale = new CheckFieldLocalePipe();
- const mappedItems = [];
- const options = [];
-
- items[index].items.forEach((item) => mappedItems.push(item));
-
- mappedItems.map((item) =>
- options.push({
- id: item.itemMeta.id,
- value: checkFieldLocale.transform(item, locale, fieldName),
- })
- );
-
- return options;
- }
-}
+ name: 'getPrimaryOptions',
+ standalone: true,
+})
+export class GetPrimaryOptionsPipe implements PipeTransform {
+ transform(
+ items: unknown,
+ index: number,
+ locale: string,
+ fieldName: string
+ ): unknown {
+ const checkFieldLocale = new CheckFieldLocalePipe();
+ const mappedItems = [];
+ const options = [];
+
+ items[index].items.forEach((item) => mappedItems.push(item));
+
+ mappedItems.map((item) =>
+ options.push({
+ id: item.itemMeta.id,
+ value: checkFieldLocale.transform(item, locale, fieldName),
+ })
+ );
+
+ return options;
+ }
+}
diff --git a/src/app/mydata/pipes/get-value.pipe.ts b/src/app/mydata/pipes/get-value.pipe.ts
index 4cec75232..735c9e80f 100644
--- a/src/app/mydata/pipes/get-value.pipe.ts
+++ b/src/app/mydata/pipes/get-value.pipe.ts
@@ -1,15 +1,16 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { get } from 'lodash-es';
-
+import { Pipe, PipeTransform } from '@angular/core';
+import { get } from 'lodash-es';
+
@Pipe({
- name: 'getValue',
-})
-
-/*
- * Get object value with Lodasg get() method. Used eg. when collecting values with dot notation.
- */
-export class GetValuePipe implements PipeTransform {
- transform(values: any, path: string): string {
- return get(values, path);
- }
-}
+ name: 'getValue',
+ standalone: true,
+})
+
+/*
+ * Get object value with Lodasg get() method. Used eg. when collecting values with dot notation.
+ */
+export class GetValuePipe implements PipeTransform {
+ transform(values: any, path: string): string {
+ return get(values, path);
+ }
+}
diff --git a/src/app/mydata/pipes/getLocalizedValues.pipe.ts b/src/app/mydata/pipes/getLocalizedValues.pipe.ts
index 9d98c9994..de344f770 100644
--- a/src/app/mydata/pipes/getLocalizedValues.pipe.ts
+++ b/src/app/mydata/pipes/getLocalizedValues.pipe.ts
@@ -1,34 +1,35 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-import { CapitalizedLocales } from '@shared/constants';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { CapitalizedLocales } from '@shared/constants';
+
@Pipe({
- name: 'getLocalizedValues',
-})
-
-/*
- * Return values mapped with locale.
- * E.g. in editor modal for description data
- */
-export class GetLocalizedValuesPipe implements PipeTransform {
- transform(value: any) {
- const res = [];
-
- const localizedValues = Object.keys(value).filter(
- (item) => CapitalizedLocales.indexOf(item.slice(item.length - 2)) > -1
- );
-
- localizedValues.forEach((item) => {
- if (value[item])
- res.push({ value: value[item], locale: item.slice(item.length - 2) });
- });
-
- return res;
- }
-}
+ name: 'getLocalizedValues',
+ standalone: true,
+})
+
+/*
+ * Return values mapped with locale.
+ * E.g. in editor modal for description data
+ */
+export class GetLocalizedValuesPipe implements PipeTransform {
+ transform(value: any) {
+ const res = [];
+
+ const localizedValues = Object.keys(value).filter(
+ (item) => CapitalizedLocales.indexOf(item.slice(item.length - 2)) > -1
+ );
+
+ localizedValues.forEach((item) => {
+ if (value[item])
+ res.push({ value: value[item], locale: item.slice(item.length - 2) });
+ });
+
+ return res;
+ }
+}
diff --git a/src/app/mydata/pipes/handle-fetched-publications.pipe.ts b/src/app/mydata/pipes/handle-fetched-publications.pipe.ts
index 6cc06f2ea..afd1ff350 100644
--- a/src/app/mydata/pipes/handle-fetched-publications.pipe.ts
+++ b/src/app/mydata/pipes/handle-fetched-publications.pipe.ts
@@ -1,38 +1,39 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
-import { cloneDeep } from 'lodash-es';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { cloneDeep } from 'lodash-es';
+
@Pipe({
- name: 'handleFetchedPublications',
-})
-
-/*
- * Fetched publications have primaryValue as true. Publications from profile have their dedicated list.
- * update -parameter enables change detection
- */
-export class HandleFetchedPublicationsPipe implements PipeTransform {
- fieldTypes = FieldTypes;
-
- transform(items: any, update) {
- const publicationType = this.fieldTypes.activityPublication;
-
- if (items.length && items[0].groupMeta.type === publicationType) {
- const groupItemsClone = cloneDeep(items);
- for (const group of groupItemsClone) {
- group.items = group.items.filter(
- (item) => item.itemMeta.primaryValue === true
- );
- }
- return groupItemsClone;
- }
-
- return items;
- }
-}
+ name: 'handleFetchedPublications',
+ standalone: true,
+})
+
+/*
+ * Fetched publications have primaryValue as true. Publications from profile have their dedicated list.
+ * update -parameter enables change detection
+ */
+export class HandleFetchedPublicationsPipe implements PipeTransform {
+ fieldTypes = FieldTypes;
+
+ transform(items: any, update) {
+ const publicationType = this.fieldTypes.activityPublication;
+
+ if (items.length && items[0].groupMeta.type === publicationType) {
+ const groupItemsClone = cloneDeep(items);
+ for (const group of groupItemsClone) {
+ group.items = group.items.filter(
+ (item) => item.itemMeta.primaryValue === true
+ );
+ }
+ return groupItemsClone;
+ }
+
+ return items;
+ }
+}
diff --git a/src/app/mydata/pipes/has-fetched-item.pipe.ts b/src/app/mydata/pipes/has-fetched-item.pipe.ts
index 457ec827a..246c33185 100644
--- a/src/app/mydata/pipes/has-fetched-item.pipe.ts
+++ b/src/app/mydata/pipes/has-fetched-item.pipe.ts
@@ -1,12 +1,13 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'hasFetchedItem',
-})
-export class HasFetchedItemPipe implements PipeTransform {
- transform(items: any[]): boolean {
- return !!items.find(
- (item: { itemMeta: { primaryValue: any } }) => item.itemMeta.primaryValue
- );
- }
-}
+ name: 'hasFetchedItem',
+ standalone: true,
+})
+export class HasFetchedItemPipe implements PipeTransform {
+ transform(items: any[]): boolean {
+ return !!items.find(
+ (item: { itemMeta: { primaryValue: any } }) => item.itemMeta.primaryValue
+ );
+ }
+}
diff --git a/src/app/mydata/pipes/has-selected-items.pipe.ts b/src/app/mydata/pipes/has-selected-items.pipe.ts
index d8e1e0b82..b7ae7969c 100644
--- a/src/app/mydata/pipes/has-selected-items.pipe.ts
+++ b/src/app/mydata/pipes/has-selected-items.pipe.ts
@@ -1,21 +1,22 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'hasSelectedItems',
-})
-export class HasSelectedItemsPipe implements PipeTransform {
- transform(data: any): boolean {
- if (data?.length) {
- return data.some((group) => group.items.find((el) => el.itemMeta.show));
- } else if (data?.items) {
- return data.items.some((item) => item.itemMeta.show);
- } else return false;
- }
-}
+ name: 'hasSelectedItems',
+ standalone: true,
+})
+export class HasSelectedItemsPipe implements PipeTransform {
+ transform(data: any): boolean {
+ if (data?.length) {
+ return data.some((group) => group.items.find((el) => el.itemMeta.show));
+ } else if (data?.items) {
+ return data.items.some((item) => item.itemMeta.show);
+ } else return false;
+ }
+}
diff --git a/src/app/mydata/pipes/is-portal-item.pipe.ts b/src/app/mydata/pipes/is-portal-item.pipe.ts
index b985f02a3..cf50498b7 100644
--- a/src/app/mydata/pipes/is-portal-item.pipe.ts
+++ b/src/app/mydata/pipes/is-portal-item.pipe.ts
@@ -1,34 +1,35 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-import { FieldTypes } from '@mydata/constants/fieldTypes';
-import { ItemMeta } from 'src/types';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { FieldTypes } from '@mydata/constants/fieldTypes';
+import { ItemMeta } from 'src/types';
+
@Pipe({
- name: 'isPortalItem',
-})
-
-// Usage (item.itemMeta | isPortalItem)
-// E.g. in profile items table to determine when delete row button is displayed
-export class IsPortalItemPipe implements PipeTransform {
- transform(item: { itemMeta: ItemMeta; dataSources: any[] }) {
- const portalTypes = [
- FieldTypes.activityPublication,
- FieldTypes.activityDataset,
- FieldTypes.activityFunding,
- FieldTypes.activityActivitiesAndRewards,
- ];
-
- return (
- !!(portalTypes.indexOf(item.itemMeta.type) > -1) &&
- item.dataSources?.find(
- (dataSource) => dataSource.registeredDataSource === 'TTV'
- )
- );
- }
-}
+ name: 'isPortalItem',
+ standalone: true,
+})
+
+// Usage (item.itemMeta | isPortalItem)
+// E.g. in profile items table to determine when delete row button is displayed
+export class IsPortalItemPipe implements PipeTransform {
+ transform(item: { itemMeta: ItemMeta; dataSources: any[] }) {
+ const portalTypes = [
+ FieldTypes.activityPublication,
+ FieldTypes.activityDataset,
+ FieldTypes.activityFunding,
+ FieldTypes.activityActivitiesAndRewards,
+ ];
+
+ return (
+ !!(portalTypes.indexOf(item.itemMeta.type) > -1) &&
+ item.dataSources?.find(
+ (dataSource) => dataSource.registeredDataSource === 'TTV'
+ )
+ );
+ }
+}
diff --git a/src/app/mydata/pipes/join-all-group-items.pipe.ts b/src/app/mydata/pipes/join-all-group-items.pipe.ts
index 4c8a58a0e..8168152c6 100644
--- a/src/app/mydata/pipes/join-all-group-items.pipe.ts
+++ b/src/app/mydata/pipes/join-all-group-items.pipe.ts
@@ -1,20 +1,21 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'joinAllGroupItems',
-})
-export class JoinAllGroupItemsPipe implements PipeTransform {
- transform(items: any) {
- return items
- .filter((item) => item.itemMeta.show)
- .flatMap((item) => item.fullName)
- .join(', ');
- }
-}
+ name: 'joinAllGroupItems',
+ standalone: true,
+})
+export class JoinAllGroupItemsPipe implements PipeTransform {
+ transform(items: any) {
+ return items
+ .filter((item) => item.itemMeta.show)
+ .flatMap((item) => item.fullName)
+ .join(', ');
+ }
+}
diff --git a/src/app/mydata/pipes/join-data-sources.pipe.ts b/src/app/mydata/pipes/join-data-sources.pipe.ts
index 072045251..18c9a2b4a 100644
--- a/src/app/mydata/pipes/join-data-sources.pipe.ts
+++ b/src/app/mydata/pipes/join-data-sources.pipe.ts
@@ -1,25 +1,26 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'joinDataSources',
-})
-export class JoinDataSourcesPipe implements PipeTransform {
- transform(items: any, locale: string) {
- let combined = [];
- items.forEach((item) => {
- item.dataSources.forEach((ds) => {
- if (!combined.includes(ds.organization['name' + locale])) {
- combined.push(ds.organization['name' + locale]);
- }
- });
- });
- return combined.join(', ');
- }
-}
+ name: 'joinDataSources',
+ standalone: true,
+})
+export class JoinDataSourcesPipe implements PipeTransform {
+ transform(items: any, locale: string) {
+ let combined = [];
+ items.forEach((item) => {
+ item.dataSources.forEach((ds) => {
+ if (!combined.includes(ds.organization['name' + locale])) {
+ combined.push(ds.organization['name' + locale]);
+ }
+ });
+ });
+ return combined.join(', ');
+ }
+}
diff --git a/src/app/mydata/pipes/join-values.pipe.ts b/src/app/mydata/pipes/join-values.pipe.ts
index 4860ac0cf..b869931eb 100644
--- a/src/app/mydata/pipes/join-values.pipe.ts
+++ b/src/app/mydata/pipes/join-values.pipe.ts
@@ -1,28 +1,29 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'joinValues',
-})
-
-/*
- * Find match for values and return joined string
- */
-export class JoinValuesPipe implements PipeTransform {
- transform(items: any, fields: string[], locale?: string) {
- const arr = [];
-
- fields.forEach((field) => {
- const fieldWithLocale = locale ? field + locale : field;
- items[fieldWithLocale] && arr.push(items[fieldWithLocale]);
- });
-
- return arr.join(', ');
- }
-}
+ name: 'joinValues',
+ standalone: true,
+})
+
+/*
+ * Find match for values and return joined string
+ */
+export class JoinValuesPipe implements PipeTransform {
+ transform(items: any, fields: string[], locale?: string) {
+ const arr = [];
+
+ fields.forEach((field) => {
+ const fieldWithLocale = locale ? field + locale : field;
+ items[fieldWithLocale] && arr.push(items[fieldWithLocale]);
+ });
+
+ return arr.join(', ');
+ }
+}
diff --git a/src/app/mydata/pipes/match-item.pipe.ts b/src/app/mydata/pipes/match-item.pipe.ts
index 03928ec15..28d88872a 100644
--- a/src/app/mydata/pipes/match-item.pipe.ts
+++ b/src/app/mydata/pipes/match-item.pipe.ts
@@ -1,22 +1,23 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'matchItem',
-})
-/*
- * Find match between patch items and item in profile data
- */
-export class MatchItemPipe implements PipeTransform {
- transform(patchItems: any[], itemMeta: { id: string; type: number }) {
- return !!patchItems.find(
- (item) => item.id === itemMeta.id && item.type === itemMeta.type
- );
- }
-}
+ name: 'matchItem',
+ standalone: true,
+})
+/*
+ * Find match between patch items and item in profile data
+ */
+export class MatchItemPipe implements PipeTransform {
+ transform(patchItems: any[], itemMeta: { id: string; type: number }) {
+ return !!patchItems.find(
+ (item) => item.id === itemMeta.id && item.type === itemMeta.type
+ );
+ }
+}
diff --git a/src/app/mydata/pipes/parse-date.pipe.ts b/src/app/mydata/pipes/parse-date.pipe.ts
index 813da3572..4fdcb201f 100644
--- a/src/app/mydata/pipes/parse-date.pipe.ts
+++ b/src/app/mydata/pipes/parse-date.pipe.ts
@@ -1,17 +1,18 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'parseDate',
-})
-export class ParseDatePipe implements PipeTransform {
- transform(object: any): unknown {
- const date = `${object.day}.${object.month}.${object.year}`;
-
- // TODO: Better check for date
- if (Object.values(object).includes(0)) {
- return object.year > 0 ? object.year : '';
- } else {
- return date;
- }
- }
-}
+ name: 'parseDate',
+ standalone: true,
+})
+export class ParseDatePipe implements PipeTransform {
+ transform(object: any): unknown {
+ const date = `${object.day}.${object.month}.${object.year}`;
+
+ // TODO: Better check for date
+ if (Object.values(object).includes(0)) {
+ return object.year > 0 ? object.year : '';
+ } else {
+ return date;
+ }
+ }
+}
diff --git a/src/app/mydata/pipes/sort-by-field-type.pipe.ts b/src/app/mydata/pipes/sort-by-field-type.pipe.ts
index 103dbc370..f224450e1 100644
--- a/src/app/mydata/pipes/sort-by-field-type.pipe.ts
+++ b/src/app/mydata/pipes/sort-by-field-type.pipe.ts
@@ -1,29 +1,30 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Pipe, PipeTransform } from '@angular/core';
-import { GroupTypes } from '@mydata/constants/groupTypes';
-import { get } from 'lodash-es';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { GroupTypes } from '@mydata/constants/groupTypes';
+import { get } from 'lodash-es';
+
@Pipe({
- name: 'sortByFieldType',
-})
-export class SortByFieldTypePipe implements PipeTransform {
- transform(items: any[], fieldType: string): any[] {
- const groupTypes = GroupTypes;
-
- const sortBy = (path) => items.sort((a, b) => get(b, path) - get(a, path));
-
- switch (fieldType) {
- case groupTypes.affiliation: {
- return sortBy('itemMeta.primaryValue');
- }
- default:
- return items;
- }
- }
-}
+ name: 'sortByFieldType',
+ standalone: true,
+})
+export class SortByFieldTypePipe implements PipeTransform {
+ transform(items: any[], fieldType: string): any[] {
+ const groupTypes = GroupTypes;
+
+ const sortBy = (path) => items.sort((a, b) => get(b, path) - get(a, path));
+
+ switch (fieldType) {
+ case groupTypes.affiliation: {
+ return sortBy('itemMeta.primaryValue');
+ }
+ default:
+ return items;
+ }
+ }
+}
diff --git a/src/app/mydata/pipes/sort-publications.pipe.ts b/src/app/mydata/pipes/sort-publications.pipe.ts
index 87af46a0e..c5b0ac678 100644
--- a/src/app/mydata/pipes/sort-publications.pipe.ts
+++ b/src/app/mydata/pipes/sort-publications.pipe.ts
@@ -1,10 +1,11 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
+import { Pipe, PipeTransform } from '@angular/core';
+
@Pipe({
- name: 'sortPublications',
-})
-export class SortPublicationsPipe implements PipeTransform {
- transform(publications: any[]) {
- return publications.sort((a, b) => b.publicationYear - a.publicationYear);
- }
-}
+ name: 'sortPublications',
+ standalone: true,
+})
+export class SortPublicationsPipe implements PipeTransform {
+ transform(publications: any[]) {
+ return publications.sort((a, b) => b.publicationYear - a.publicationYear);
+ }
+}
diff --git a/src/app/mydata/resolvers/mydata-profile-resolver.service.ts b/src/app/mydata/resolvers/mydata-profile-resolver.service.ts
index c3e42b7e2..c79c357f9 100644
--- a/src/app/mydata/resolvers/mydata-profile-resolver.service.ts
+++ b/src/app/mydata/resolvers/mydata-profile-resolver.service.ts
@@ -1,69 +1,65 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Injectable, OnDestroy } from '@angular/core';
-import {
- Resolve,
- ActivatedRouteSnapshot,
- RouterStateSnapshot,
-} from '@angular/router';
-import { ProfileService } from '@mydata/services/profile.service';
-import { Subject, takeUntil } from 'rxjs';
-import { getName } from '@mydata/utils';
-import { cloneDeep } from 'lodash-es';
-
-@Injectable({
- providedIn: 'root',
-})
-export class MyDataProfileResolverService implements Resolve, OnDestroy {
- unsubscribeOnDestroy = new Subject();
-
- constructor(private profileService: ProfileService) {}
-
- async resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
-
- // await this.profileService.getProfileData().then((value) => {});
-
- /*
- * Get MyData profile data before rendering route.
- * Data is stored in profile service.
- */
- const storedProfileData = this.profileService.currentProfileData;
-
- if (!storedProfileData) {
- return new Promise((resolve) => {
- this.profileService
- .getProfileData()
- .then(
- (value) => {
- if (value) {
- this.profileService.setCurrentProfileData(
- cloneDeep(value.profileData)
- );
- resolve({
- name: getName(value.profileData),
- profileData: value.profileData,
- });
- }
- },
- (reason) => {
- console.error('error', reason);
- },);
- });
- } else {
- return {
- name: getName(storedProfileData),
- profileData: cloneDeep(storedProfileData),
- };
- }
- }
-
- ngOnDestroy(): void {
- this.unsubscribeOnDestroy.next(null);
- this.unsubscribeOnDestroy.complete();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Injectable, OnDestroy } from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ProfileService } from '@mydata/services/profile.service';
+import { Subject, takeUntil } from 'rxjs';
+import { getName } from '@mydata/utils';
+import { cloneDeep } from 'lodash-es';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class MyDataProfileResolverService implements OnDestroy {
+ unsubscribeOnDestroy = new Subject();
+
+ constructor(private profileService: ProfileService) {}
+
+ async resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+
+ // await this.profileService.getProfileData().then((value) => {});
+
+ /*
+ * Get MyData profile data before rendering route.
+ * Data is stored in profile service.
+ */
+ const storedProfileData = this.profileService.currentProfileData;
+
+ if (!storedProfileData) {
+ return new Promise((resolve) => {
+ this.profileService
+ .getProfileData()
+ .then(
+ (value) => {
+ if (value) {
+ this.profileService.setCurrentProfileData(
+ cloneDeep(value.profileData)
+ );
+ resolve({
+ name: getName(value.profileData),
+ profileData: value.profileData,
+ });
+ }
+ },
+ (reason) => {
+ console.error('error', reason);
+ },);
+ });
+ } else {
+ return {
+ name: getName(storedProfileData),
+ profileData: cloneDeep(storedProfileData),
+ };
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.unsubscribeOnDestroy.next(null);
+ this.unsubscribeOnDestroy.complete();
+ }
+}
diff --git a/src/app/mydata/resolvers/orcid-profile-resolver.service.ts b/src/app/mydata/resolvers/orcid-profile-resolver.service.ts
index b950a06a0..e22c9b3fa 100644
--- a/src/app/mydata/resolvers/orcid-profile-resolver.service.ts
+++ b/src/app/mydata/resolvers/orcid-profile-resolver.service.ts
@@ -1,70 +1,66 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Injectable, OnDestroy } from '@angular/core';
-import {
- Resolve,
- ActivatedRouteSnapshot,
- RouterStateSnapshot,
-} from '@angular/router';
-import { ProfileService } from '@mydata/services/profile.service';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
-import {firstValueFrom, Subject, takeUntil} from 'rxjs';
-
-@Injectable({
- providedIn: 'root',
-})
-export class OrcidProfileResolverService implements Resolve, OnDestroy {
- unsubscribeOnDestroy = new Subject();
-
- constructor(
- private oidcSecurityService: OidcSecurityService,
- private profileService: ProfileService,
- private appSettingsService: AppSettingsService
- ) {}
-
- resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
- /*
- * Get orcid profile data before rendering route.
- * Data is stored in profile service
- *
- * Orcid ID is stored in ID token payload
- */
- const orcidUserProfile = this.profileService.orcidUserProfile;
-
- if (!orcidUserProfile) {
- return new Promise((resolve) => {
- this.oidcSecurityService.userData$
- .pipe(takeUntil(this.unsubscribeOnDestroy))
- .subscribe(async (data) => {
- if (data.userData) {
- const idTokenPayload =
- await firstValueFrom(this.oidcSecurityService.getPayloadFromIdToken());
- // Create object that holds necessary ORCID profile items
- const userData = {
- ...data.userData,
- orcid: idTokenPayload.orcid,
- };
- this.profileService.setOrcidUserProfile(userData);
- this.appSettingsService.setOrcid(userData.orcid);
- resolve(userData);
- } else {
- return false;
- }
- });
- });
- } else {
- return orcidUserProfile;
- }
- }
-
- ngOnDestroy(): void {
- this.unsubscribeOnDestroy.next(null);
- this.unsubscribeOnDestroy.complete();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Injectable, OnDestroy } from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { ProfileService } from '@mydata/services/profile.service';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import {firstValueFrom, Subject, takeUntil} from 'rxjs';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class OrcidProfileResolverService implements OnDestroy {
+ unsubscribeOnDestroy = new Subject();
+
+ constructor(
+ private oidcSecurityService: OidcSecurityService,
+ private profileService: ProfileService,
+ private appSettingsService: AppSettingsService
+ ) {}
+
+ resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+ /*
+ * Get orcid profile data before rendering route.
+ * Data is stored in profile service
+ *
+ * Orcid ID is stored in ID token payload
+ */
+ const orcidUserProfile = this.profileService.orcidUserProfile;
+
+ if (!orcidUserProfile) {
+ return new Promise((resolve) => {
+ this.oidcSecurityService.userData$
+ .pipe(takeUntil(this.unsubscribeOnDestroy))
+ .subscribe(async (data) => {
+ if (data.userData) {
+ const idTokenPayload =
+ await firstValueFrom(this.oidcSecurityService.getPayloadFromIdToken());
+ // Create object that holds necessary ORCID profile items
+ const userData = {
+ ...data.userData,
+ orcid: idTokenPayload.orcid,
+ };
+ this.profileService.setOrcidUserProfile(userData);
+ this.appSettingsService.setOrcid(userData.orcid);
+ resolve(userData);
+ } else {
+ return false;
+ }
+ });
+ });
+ } else {
+ return orcidUserProfile;
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.unsubscribeOnDestroy.next(null);
+ this.unsubscribeOnDestroy.complete();
+ }
+}
diff --git a/src/app/mydata/services/auth-guard.service.ts b/src/app/mydata/services/auth-guard.service.ts
index f1223790f..1f9cc0496 100644
--- a/src/app/mydata/services/auth-guard.service.ts
+++ b/src/app/mydata/services/auth-guard.service.ts
@@ -1,65 +1,62 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Injectable } from '@angular/core';
-import {
- CanActivate,
- ActivatedRouteSnapshot,
- RouterStateSnapshot,
- Router,
-} from '@angular/router';
-import { of, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { OidcSecurityService } from 'angular-auth-oidc-client';
-
-// Remove in production
-import { AppSettingsService } from '@shared/services/app-settings.service';
-
-// https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/guards.md
-@Injectable()
-export class AuthGuard implements CanActivate {
- constructor(
- private readonly oidcSecurityService: OidcSecurityService,
- private router: Router,
- private appSettingsService: AppSettingsService
- ) {}
-
- canActivate(
- route: ActivatedRouteSnapshot,
- state: RouterStateSnapshot
- ): Observable {
- // if (this.appSettingsService.myDataSettings.develop) return of(true);
- const handleUnauthorized = () => {
- this.router.navigate(['/mydata']);
- return false;
- };
-
- return this.oidcSecurityService.isAuthenticated().pipe(
- map((isAuthenticated) => {
-
- // Handling for service deployment.
- // Service deployment is divided into steps, current step number is in route query parameter 'step'.
- if (route.routeConfig.path === 'service-deployment') {
- const step = Number(route.queryParams.step);
- if (step > 2 && !isAuthenticated) {
- // Step 3 and onwards require authentication.
- handleUnauthorized();
- }
- else {
- // Steps until 2 should be accessible without authentication.
- return true;
- }
- } else if (!isAuthenticated) {
- // In all other cases authentication is required.
- handleUnauthorized();
- }
-
- return true;
- })
- );
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+import { of, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+
+// Remove in production
+import { AppSettingsService } from '@shared/services/app-settings.service';
+
+// https://github.com/damienbod/angular-auth-oidc-client/blob/main/docs/guards.md
+@Injectable({
+ providedIn: 'root'
+})
+export class AuthGuard {
+ constructor(
+ private readonly oidcSecurityService: OidcSecurityService,
+ private router: Router,
+ private appSettingsService: AppSettingsService
+ ) {}
+
+ canActivate(
+ route: ActivatedRouteSnapshot,
+ state: RouterStateSnapshot
+ ): Observable {
+ // if (this.appSettingsService.myDataSettings.develop) return of(true);
+ const handleUnauthorized = () => {
+ this.router.navigate(['/mydata']);
+ return false;
+ };
+
+ return this.oidcSecurityService.isAuthenticated().pipe(
+ map((isAuthenticated) => {
+
+ // Handling for service deployment.
+ // Service deployment is divided into steps, current step number is in route query parameter 'step'.
+ if (route.routeConfig.path === 'service-deployment') {
+ const step = Number(route.queryParams.step);
+ if (step > 2 && !isAuthenticated) {
+ // Step 3 and onwards require authentication.
+ handleUnauthorized();
+ }
+ else {
+ // Steps until 2 should be accessible without authentication.
+ return true;
+ }
+ } else if (!isAuthenticated) {
+ // In all other cases authentication is required.
+ handleUnauthorized();
+ }
+
+ return true;
+ })
+ );
+ }
+}
diff --git a/src/app/mydata/services/snackbar.service.ts b/src/app/mydata/services/snackbar.service.ts
index 3cdf7a764..ee1740021 100644
--- a/src/app/mydata/services/snackbar.service.ts
+++ b/src/app/mydata/services/snackbar.service.ts
@@ -1,48 +1,48 @@
-import { Injectable, NgZone } from '@angular/core';
-import { MatSnackBar } from '@angular/material/snack-bar';
-
-// Just add the new required types here and TypeScript will require the public consumer to pass a valid type
-export type SnackBarType = 'error' | 'success' | 'warning';
-
-@Injectable({
- providedIn: 'root',
-})
-export class SnackbarService {
- constructor(private snackbar: MatSnackBar, private zone: NgZone) {}
-
- show(message: string, type: SnackBarType): void {
- this.zone.run(() => {
- this.snackbar.open(message, $localize`:@@close:Sulje`, {
- panelClass: ['snackbar-container', type],
- });
- });
- }
-
- showPatchMessage(type: 'success' | 'error') {
- if (type === 'success') {
- this.show(
- $localize`:@@profilePublishedToast:Profiili julkaistu. Tiedot näkyvät muutaman minuutin kuluttua tiedejatutkimus.fi -palvelussa.`,
- 'success'
- );
- } else {
- this.show(
- $localize`:@@dataSavingError:Virhe tiedon tallennuksessa`,
- 'error'
- );
- }
- }
-
- showHideProfileMessage(type: 'success' | 'error') {
- if (type === 'success') {
- this.show(
- $localize`:@@profileHiddenToast:Profiilin piilottaminen onnistui. Profiilisi piilotetaan Tiedejatutkimus.fi -palvelusta muutaman minuutin kuluttua.`,
- 'success'
- );
- } else {
- this.show(
- $localize`:@@dataSavingError:Virhe tiedon tallennuksessa`,
- 'error'
- );
- }
- }
-}
+import { Injectable, NgZone } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+// Just add the new required types here and TypeScript will require the public consumer to pass a valid type
+export type SnackBarType = 'error' | 'success' | 'warning';
+
+@Injectable({
+ providedIn: 'root',
+})
+export class SnackbarService {
+ constructor(private snackbar: MatSnackBar, private zone: NgZone) {}
+
+ show(message: string, type: SnackBarType): void {
+ this.zone.run(() => {
+ this.snackbar.open(message, $localize`:@@close:Sulje`, {
+ panelClass: ['snackbar-container', type],
+ });
+ });
+ }
+
+ showPatchMessage(type: 'success' | 'error') {
+ if (type === 'success') {
+ this.show(
+ $localize`:@@profilePublishedToast:Profiili julkaistu. Tiedot näkyvät muutaman minuutin kuluttua tiedejatutkimus.fi -palvelussa.`,
+ 'success'
+ );
+ } else {
+ this.show(
+ $localize`:@@dataSavingError:Virhe tiedon tallennuksessa`,
+ 'error'
+ );
+ }
+ }
+
+ showHideProfileMessage(type: 'success' | 'error') {
+ if (type === 'success') {
+ this.show(
+ $localize`:@@profileHiddenToast:Profiilin piilottaminen onnistui. Profiilisi piilotetaan Tiedejatutkimus.fi -palvelusta muutaman minuutin kuluttua.`,
+ 'success'
+ );
+ } else {
+ this.show(
+ $localize`:@@dataSavingError:Virhe tiedon tallennuksessa`,
+ 'error'
+ );
+ }
+ }
+}
diff --git a/src/app/portal/components/accessibility/accessibility.component.ts b/src/app/portal/components/accessibility/accessibility.component.ts
index a550ccadb..0e8908150 100644
--- a/src/app/portal/components/accessibility/accessibility.component.ts
+++ b/src/app/portal/components/accessibility/accessibility.component.ts
@@ -1,133 +1,147 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- Inject,
- LOCALE_ID,
- AfterViewInit,
- OnDestroy,
- ViewChild,
- ElementRef,
- PLATFORM_ID,
-} from '@angular/core';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { Subscription } from 'rxjs';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { ActivatedRoute } from '@angular/router';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ Inject,
+ LOCALE_ID,
+ AfterViewInit,
+ OnDestroy,
+ ViewChild,
+ ElementRef,
+ PLATFORM_ID,
+} from '@angular/core';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { Subscription } from 'rxjs';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { ActivatedRoute } from '@angular/router';
+import { DOCUMENT, isPlatformBrowser, NgIf } from '@angular/common';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { SanitizeHtmlPipe } from '../../../shared/pipes/sanitize-html.pipe';
+import { DialogComponent } from '../../../shared/components/dialog/dialog.component';
+import { ReviewComponent } from '../../../shared/components/review/review.component';
+import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
+import { BannerDividerComponent } from '../../../shared/components/banner-divider/banner-divider.component';
+
@Component({
- selector: 'app-accessibility',
- templateUrl: './accessibility.component.html',
- styleUrls: ['./accessibility.component.scss'],
-})
-export class AccessibilityComponent
- implements OnInit, AfterViewInit, OnDestroy
-{
- focusSub: Subscription;
- @ViewChild('mainFocus') mainFocus: ElementRef;
- @ViewChild('contentContainer', { static: false })
- contentContainer: ElementRef;
- title: string;
- showDialog: boolean;
- currentLocale: string;
- loading = true;
-
- private metaTags = MetaTags.accessibility;
- private commonTags = MetaTags.common;
- content: any[];
-
- constructor(
- @Inject(LOCALE_ID) protected localeId: string,
- private tabChangeService: TabChangeService,
- private utilityService: UtilityService,
- private route: ActivatedRoute,
- @Inject(DOCUMENT) private document: any,
- @Inject(PLATFORM_ID) private platformId: object,
- private appSettingsService: AppSettingsService
- ) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- // Get page data. Data is passed with resolver in router
- this.content = this.route.snapshot.data.pages.find(
- (e: { id: string }) => e.id === 'accessibility'
- );
-
- // Add meta tags and title
- this.utilityService.addMeta(
- this.metaTags['title' + this.currentLocale],
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
- switch (this.localeId) {
- case 'fi': {
- this.setTitle('Saavutettavuusseloste - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle('Accessibility - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle('Tillgänglighetsredogörelse - Forskning.fi');
- break;
- }
- }
- // Hide skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(false);
-
- this.title = this.getTitle();
- this.loading = false;
- }
-
- setTitle(title: string) {
- this.utilityService.setTitle(title);
- }
-
- getTitle() {
- return this.utilityService.getTitle().split('-').shift().trim();
- }
-
- ngAfterViewInit() {
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.mainFocus.nativeElement.focus();
- }
- }
- );
-
- // Add review toggle onclick functionality to corresponding link
- if (isPlatformBrowser(this.platformId)) {
- const reviewLink = this.document.getElementById('toggle-review');
- if (reviewLink) {
- reviewLink.setAttribute('href', 'javascript:void(0)');
- reviewLink.addEventListener('click', (evt: Event) =>
- this.toggleReview()
- );
- }
- }
- }
-
- toggleReview() {
- this.showDialog = !this.showDialog;
- }
-
- ngOnDestroy() {
- // Reset skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(true);
- this.tabChangeService.targetFocus('');
-
- this.focusSub?.unsubscribe();
- }
-}
+ selector: 'app-accessibility',
+ templateUrl: './accessibility.component.html',
+ styleUrls: ['./accessibility.component.scss'],
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ BreadcrumbComponent,
+ ReviewComponent,
+ NgIf,
+ DialogComponent,
+ SanitizeHtmlPipe,
+ ],
+})
+export class AccessibilityComponent
+ implements OnInit, AfterViewInit, OnDestroy
+{
+ focusSub: Subscription;
+ @ViewChild('mainFocus') mainFocus: ElementRef;
+ @ViewChild('contentContainer', { static: false })
+ contentContainer: ElementRef;
+ title: string;
+ showDialog: boolean;
+ currentLocale: string;
+ loading = true;
+
+ private metaTags = MetaTags.accessibility;
+ private commonTags = MetaTags.common;
+ content: any[];
+
+ constructor(
+ @Inject(LOCALE_ID) protected localeId: string,
+ private tabChangeService: TabChangeService,
+ private utilityService: UtilityService,
+ private route: ActivatedRoute,
+ @Inject(DOCUMENT) private document: any,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ // Get page data. Data is passed with resolver in router
+ this.content = this.route.snapshot.data.pages.find(
+ (e: { id: string }) => e.id === 'accessibility'
+ );
+
+ // Add meta tags and title
+ this.utilityService.addMeta(
+ this.metaTags['title' + this.currentLocale],
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle('Saavutettavuusseloste - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle('Accessibility - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle('Tillgänglighetsredogörelse - Forskning.fi');
+ break;
+ }
+ }
+ // Hide skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(false);
+
+ this.title = this.getTitle();
+ this.loading = false;
+ }
+
+ setTitle(title: string) {
+ this.utilityService.setTitle(title);
+ }
+
+ getTitle() {
+ return this.utilityService.getTitle().split('-').shift().trim();
+ }
+
+ ngAfterViewInit() {
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.mainFocus.nativeElement.focus();
+ }
+ }
+ );
+
+ // Add review toggle onclick functionality to corresponding link
+ if (isPlatformBrowser(this.platformId)) {
+ const reviewLink = this.document.getElementById('toggle-review');
+ if (reviewLink) {
+ reviewLink.setAttribute('href', 'javascript:void(0)');
+ reviewLink.addEventListener('click', (evt: Event) =>
+ this.toggleReview()
+ );
+ }
+ }
+ }
+
+ toggleReview() {
+ this.showDialog = !this.showDialog;
+ }
+
+ ngOnDestroy() {
+ // Reset skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(true);
+ this.tabChangeService.targetFocus('');
+
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/breadcrumb/breadcrumb.component.scss-theme.scss b/src/app/portal/components/breadcrumb/breadcrumb.component.scss-theme.scss
index c55216958..c269987ba 100644
--- a/src/app/portal/components/breadcrumb/breadcrumb.component.scss-theme.scss
+++ b/src/app/portal/components/breadcrumb/breadcrumb.component.scss-theme.scss
@@ -1,72 +1,72 @@
-@import '@angular/material/theming';
-
-@mixin app-breadcrumb-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-breadcrumb {
- .breadcrumb {
- background-color: mat-color($primary, default-contrast);
- }
-
- .breadcrumb-item a,
- .breadcrumb-item.active {
- color: mat-color($primary, 900);
- }
-
- .breadcrumb-item span,
- .breadcrumb-item a:not([href]):hover {
- color: mat-color($primary, 900);
- cursor: default;
- }
-
- .arrow_box {
- background: mat-color($primary, 50);
- }
-
- .arrow_box:after {
- border-color: transparent;
- }
-
- .arrow_box:before {
- border-color: transparent;
- border-left-color: mat-color($primary, default-contrast);
- }
-
- // First
- li.breadcrumb-item.arrow_box.first {
- border-right: none;
- }
-
- .first.arrow_box:after {
- border-left-color: mat-color($primary, 50);
- }
-
- // Middle
- li.breadcrumb-item.arrow_box.middle {
- background: mat-color($primary, 100);
- }
-
- .middle.arrow_box:after {
- border-left-color: mat-color($primary, 100);
- }
-
- // Last
- li.breadcrumb-item.arrow_box.active.arrow_box {
- background: mat-color($primary, 200);
- border: 1px solid mat-color($primary, 200);
- }
-
- li.breadcrumb-item.arrow_box.last.arrow_box {
- background: mat-color($primary, 200);
- }
-
- .last.arrow_box:after {
- border-color: transparent;
- border-left-color: mat-color($primary, 200);
- }
-
- .last.arrow_box:before {
- border-left-color: mat-color($primary, 200);
- }
- }
-}
+@use 'migration' as *;
+
+@mixin app-breadcrumb-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-breadcrumb {
+ .breadcrumb {
+ background-color: mat-color($primary, default-contrast);
+ }
+
+ .breadcrumb-item a,
+ .breadcrumb-item.active {
+ color: mat-color($primary, 900);
+ }
+
+ .breadcrumb-item span,
+ .breadcrumb-item a:not([href]):hover {
+ color: mat-color($primary, 900);
+ cursor: default;
+ }
+
+ .arrow_box {
+ background: mat-color($primary, 50);
+ }
+
+ .arrow_box:after {
+ border-color: transparent;
+ }
+
+ .arrow_box:before {
+ border-color: transparent;
+ border-left-color: mat-color($primary, default-contrast);
+ }
+
+ // First
+ li.breadcrumb-item.arrow_box.first {
+ border-right: none;
+ }
+
+ .first.arrow_box:after {
+ border-left-color: mat-color($primary, 50);
+ }
+
+ // Middle
+ li.breadcrumb-item.arrow_box.middle {
+ background: mat-color($primary, 100);
+ }
+
+ .middle.arrow_box:after {
+ border-left-color: mat-color($primary, 100);
+ }
+
+ // Last
+ li.breadcrumb-item.arrow_box.active.arrow_box {
+ background: mat-color($primary, 200);
+ border: 1px solid mat-color($primary, 200);
+ }
+
+ li.breadcrumb-item.arrow_box.last.arrow_box {
+ background: mat-color($primary, 200);
+ }
+
+ .last.arrow_box:after {
+ border-color: transparent;
+ border-left-color: mat-color($primary, 200);
+ }
+
+ .last.arrow_box:before {
+ border-left-color: mat-color($primary, 200);
+ }
+ }
+}
diff --git a/src/app/portal/components/breadcrumb/breadcrumb.component.ts b/src/app/portal/components/breadcrumb/breadcrumb.component.ts
index 84fe25cc3..c2f5222c9 100644
--- a/src/app/portal/components/breadcrumb/breadcrumb.component.ts
+++ b/src/app/portal/components/breadcrumb/breadcrumb.component.ts
@@ -1,42 +1,50 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit, Input, Inject, LOCALE_ID } from '@angular/core';
-import { AppSettingsService } from '@shared/services/app-settings.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnInit, Input, Inject, LOCALE_ID } from '@angular/core';
+import { AppSettingsService } from '@shared/services/app-settings.service';
import { SearchService } from '../../services/search.service';
-
+import { RouterLink } from '@angular/router';
+import { NgIf, NgFor } from '@angular/common';
+
@Component({
- selector: 'app-breadcrumb',
- templateUrl: './breadcrumb.component.html',
- styleUrls: ['./breadcrumb.component.scss'],
-})
-export class BreadcrumbComponent implements OnInit {
- @Input() responseData: any;
- @Input() tab: any;
- @Input() tabName: any;
- @Input() resultNameField: any;
- @Input() type: any;
- @Input() queryParams: any;
- @Input() title: string;
- resultType: string;
- searchTerm: any;
- pageNumber: number;
- currentLocale: string;
-
- constructor(
- private searchService: SearchService,
- @Inject(LOCALE_ID) protected localeId: string,
- private appSettingsService: AppSettingsService
- ) {
- this.searchTerm = this.searchService.searchTerm;
- this.pageNumber = this.searchService.pageNumber || 1;
-
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit() {}
-}
+ selector: 'app-breadcrumb',
+ templateUrl: './breadcrumb.component.html',
+ styleUrls: ['./breadcrumb.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ RouterLink,
+ NgFor,
+ ],
+})
+export class BreadcrumbComponent implements OnInit {
+ @Input() responseData: any;
+ @Input() tab: any;
+ @Input() tabName: any;
+ @Input() resultNameField: any;
+ @Input() type: any;
+ @Input() queryParams: any;
+ @Input() title: string;
+ resultType: string;
+ searchTerm: any;
+ pageNumber: number;
+ currentLocale: string;
+
+ constructor(
+ private searchService: SearchService,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.searchTerm = this.searchService.searchTerm;
+ this.pageNumber = this.searchService.pageNumber || 1;
+
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit() {}
+}
diff --git a/src/app/portal/components/home-page/home-page.component.html b/src/app/portal/components/home-page/home-page.component.html
index 55389e77f..386690904 100644
--- a/src/app/portal/components/home-page/home-page.component.html
+++ b/src/app/portal/components/home-page/home-page.component.html
@@ -60,11 +60,13 @@
+
+
-
-
-
-
-
-
- - Peruutetaanko palvelun käyttöönotto? -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ + Peruutetaanko palvelun käyttöönotto? +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- {{ title }}
-
-
- {{ currentStep.label }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ userData.name }}
-
-
+
+
+
+
+ {{ title }}
+
+
+ {{ currentStep.label }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ userData.name }}
+
+ ;
- @ViewChild('main') mainContent: ElementRef;
- basicStyle = {
- border: '0px',
- background: 'white',
- margin: '6px 0 6px',
- minWidth: '180px',
- };
- maxHeight: number;
-
- resizeSub: Subscription;
- newsSub: Subscription;
- fundingCallsSub: Subscription;
- allResultCountSub: Subscription;
-
- private metaTags = MetaTags.homepage;
- private commonTags = MetaTags.common;
-
- newsImage = {
- link: '/news',
- alt: ' ',
- imgPath: 'assets/img/home/news.jpeg',
- };
-
- focusSub: any;
- currentLocale: string;
- showDialog: boolean;
- shortcutData: Shortcut[] = [];
-
- constructor(
- private searchService: SearchService,
- private sortService: SortService,
- @Inject(DOCUMENT) private document: any,
- private cdr: ChangeDetectorRef,
- @Inject(LOCALE_ID) public localeId: string,
- private tabChangeService: TabChangeService,
- private resizeService: ResizeService,
- public utilityService: UtilityService,
- private route: ActivatedRoute,
- private appSettingsService: AppSettingsService,
- private router: Router,
- ) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit() {
- this.utilityService.addMeta(
- this.metaTags['title' + this.currentLocale],
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
- // Reset search term
- this.searchService.updateInput('');
-
- // Get data for count-ups
- this.getAllData();
-
- // Get news data
- this.newsSub = this.searchService.getNews(10).subscribe((data) => {
- this.news = data;
- });
-
- // Get funding calls data
- this.fundingCallsSub = this.searchService
- .getHomepageFundingCalls(10)
- .subscribe((data) => {
- this.resultData = data;
- });
-
- // Reset sort
- this.sortService.updateSort('');
-
- // Set title
- switch (this.localeId) {
- case 'fi': {
- this.setTitle('Etusivu - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle('Home - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle('Ingångssida - Forskning.fi');
- break;
- }
- }
- this.srHeader.nativeElement.innerHTML = this.document.title.split(' - ', 1);
-
- this.resizeSub = this.resizeService.onResize$.subscribe((_) =>
- this.onResize()
- );
-
- // Get shortcuts from Resolver
- this.shortcutData = this.route.snapshot.data.shortcuts;
- this.shortcutData.map(item => {
- item.isExternalLink = item.link.startsWith('http');
- });
- }
-
- onResize() {
- // Timeout needs to be added because shortcutItem list doesn't keep up with resize
- setTimeout((x) => {
- this.getHeight();
- }, 200);
- }
-
- ngAfterViewInit() {
- this.getHeight();
- // Focus first element when clicked with skip-link
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.mainContent?.nativeElement.focus();
- this.tabChangeService.targetFocus(null);
- }
- }
- );
- // if (isPlatformBrowser(this.platformId)) {
- // (this.window as any).twttr?.widgets?.load();
- // }
- }
-
- // Get height of div with most height
- getHeight() {
- const heightArr = [];
- this.shortcutItem.forEach((item) => {
- heightArr.push(item.nativeElement.firstElementChild.offsetHeight);
- });
- this.maxHeight = Math.max(...heightArr) + 30;
-
- this.cdr.detectChanges();
- }
-
- getAllData() {
- this.allResultCountSub = this.searchService
- .getAllResultCount()
- .pipe(map((allData) => [allData]))
- .subscribe({
- next: (allData) => (this.allData = allData),
- error: (error) => (this.errorMessage = error as any),
- });
- }
-
- toggleReview() {
- this.showDialog = !this.showDialog;
- }
-
- ngOnDestroy() {
- this.resizeSub?.unsubscribe();
- this.newsSub?.unsubscribe();
- this.fundingCallsSub?.unsubscribe();
- this.allResultCountSub?.unsubscribe();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ ViewChild,
+ ViewChildren,
+ ElementRef,
+ Inject,
+ QueryList,
+ AfterViewInit,
+ ChangeDetectorRef,
+ LOCALE_ID,
+ OnDestroy,
+} from '@angular/core';
+import { DOCUMENT, NgFor, NgIf, NgStyle } from '@angular/common';
+import { SearchService } from '../../services/search.service';
+import { SortService } from '../../services/sort.service';
+import { map } from 'rxjs/operators';
+import { SearchBarComponent } from '../search-bar/search-bar.component';
+import { TabChangeService } from '@portal/services/tab-change.service';
+import { ResizeService } from '@shared/services/resize.service';
+import { Subscription } from 'rxjs';
+import { News } from '@portal/models/news.model';
+import { Shortcut } from '@portal/models/shortcut.model';
+import { UtilityService } from '@shared/services/utility.service';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { Search } from '@portal/models/search.model';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { SafeUrlPipe } from '../../pipes/safe-url.pipe';
+import { DialogComponent } from '../../../shared/components/dialog/dialog.component';
+import { ReviewComponent } from '../../../shared/components/review/review.component';
+import { DividerComponent } from '../../../shared/components/divider/divider.component';
+import { NewsCardComponent } from '../news/news-card/news-card.component';
+import { TabNavigationComponent } from '../tab-navigation/tab-navigation.component';
+
+@Component({
+ providers: [SearchBarComponent],
+ selector: 'app-home-page',
+ templateUrl: './home-page.component.html',
+ styleUrls: ['./home-page.component.scss'],
+ standalone: true,
+ imports: [
+ SearchBarComponent,
+ TabNavigationComponent,
+ NgFor,
+ NgIf,
+ RouterLink,
+ NewsCardComponent,
+ DividerComponent,
+ NgStyle,
+ ReviewComponent,
+ DialogComponent,
+ SafeUrlPipe,
+ ],
+})
+export class HomePageComponent implements OnInit, AfterViewInit, OnDestroy {
+ allData: any[];
+ errorMessage = [];
+ status = false;
+ news: News[] = [];
+ resultData: Search;
+ @ViewChild('srHeader', { static: true }) srHeader: ElementRef;
+ @ViewChildren('shortcutItem') shortcutItem: QueryList;
+ @ViewChild('main') mainContent: ElementRef;
+ basicStyle = {
+ border: '0px',
+ background: 'white',
+ margin: '6px 0 6px',
+ minWidth: '180px',
+ };
+ maxHeight: number;
+
+ resizeSub: Subscription;
+ newsSub: Subscription;
+ fundingCallsSub: Subscription;
+ allResultCountSub: Subscription;
+
+ private metaTags = MetaTags.homepage;
+ private commonTags = MetaTags.common;
+
+ newsImage = {
+ link: '/news',
+ alt: ' ',
+ imgPath: 'assets/img/home/news.jpeg',
+ };
+
+ focusSub: any;
+ currentLocale: string;
+ showDialog: boolean;
+ shortcutData: Shortcut[] = [];
+
+ constructor(
+ private searchService: SearchService,
+ private sortService: SortService,
+ @Inject(DOCUMENT) private document: any,
+ private cdr: ChangeDetectorRef,
+ @Inject(LOCALE_ID) public localeId: string,
+ private tabChangeService: TabChangeService,
+ private resizeService: ResizeService,
+ public utilityService: UtilityService,
+ private route: ActivatedRoute,
+ private appSettingsService: AppSettingsService,
+ private router: Router,
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit() {
+ this.utilityService.addMeta(
+ this.metaTags['title' + this.currentLocale],
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+ // Reset search term
+ this.searchService.updateInput('');
+
+ // Get data for count-ups
+ this.getAllData();
+
+ // Get news data
+ this.newsSub = this.searchService.getNews(10).subscribe((data) => {
+ this.news = data;
+ });
+
+ // Get funding calls data
+ this.fundingCallsSub = this.searchService
+ .getHomepageFundingCalls(10)
+ .subscribe((data) => {
+ this.resultData = data;
+ });
+
+ // Reset sort
+ this.sortService.updateSort('');
+
+ // Set title
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle('Etusivu - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle('Home - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle('Ingångssida - Forskning.fi');
+ break;
+ }
+ }
+ this.srHeader.nativeElement.innerHTML = this.document.title.split(' - ', 1);
+
+ this.resizeSub = this.resizeService.onResize$.subscribe((_) =>
+ this.onResize()
+ );
+
+ // Get shortcuts from Resolver
+ this.shortcutData = this.route.snapshot.data.shortcuts;
+ this.shortcutData.map(item => {
+ item.isExternalLink = item.link.startsWith('http');
+ });
+ }
+
+ onResize() {
+ // Timeout needs to be added because shortcutItem list doesn't keep up with resize
+ setTimeout(() => {
+ this.getHeight();
+ }, 200);
+ }
+
+ ngAfterViewInit() {
+ this.getHeight();
+ // Focus first element when clicked with skip-link
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.mainContent?.nativeElement.focus();
+ this.tabChangeService.targetFocus(null);
+ }
+ }
+ );
+ // if (isPlatformBrowser(this.platformId)) {
+ // (this.window as any).twttr?.widgets?.load();
+ // }
+ }
+
+ // Get height of div with most height
+ getHeight() {
+ const heightArr = [];
+ this.shortcutItem.forEach((item) => {
+ heightArr.push(item.nativeElement.firstElementChild.offsetHeight);
+ });
+ this.maxHeight = Math.max(...heightArr) + 30;
+
+ this.cdr.detectChanges();
+ }
+
+ getAllData() {
+ this.allResultCountSub = this.searchService
+ .getAllResultCount()
+ .pipe(map((allData) => [allData]))
+ .subscribe({
+ next: (allData) => (this.allData = allData),
+ error: (error) => (this.errorMessage = error as any),
+ });
+ }
+
+ toggleReview() {
+ this.showDialog = !this.showDialog;
+ }
+
+ ngOnDestroy() {
+ this.resizeSub?.unsubscribe();
+ this.newsSub?.unsubscribe();
+ this.fundingCallsSub?.unsubscribe();
+ this.allResultCountSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/news/latest-news/latest-news.component.ts b/src/app/portal/components/news/latest-news/latest-news.component.ts
index 65c983375..f7d99428a 100644
--- a/src/app/portal/components/news/latest-news/latest-news.component.ts
+++ b/src/app/portal/components/news/latest-news/latest-news.component.ts
@@ -1,59 +1,71 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { SearchService } from '@portal/services/search.service';
-import { Subscription } from 'rxjs';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { SearchService } from '@portal/services/search.service';
+import { Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
-
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NewsCardComponent } from '../news-card/news-card.component';
+import { NgIf, NgFor } from '@angular/common';
+
@Component({
- selector: 'app-latest-news',
- templateUrl: './latest-news.component.html',
-})
-export class LatestNewsComponent implements OnInit, OnDestroy {
- data: any = [];
- errorMessage: any;
- currentPageSize: number = 20;
- @Input() mobile: any;
- @Input() visible: boolean;
- loading: boolean = false;
- latestNewsSub: Subscription;
- startIndex = 0;
-
- constructor(public searchService: SearchService) {}
-
- ngOnInit(): void {
- this.getLatestNews(this.currentPageSize, this.startIndex, false);
- }
-
- getLatestNews(size: number, from: number, loadMore = false) {
- this.loading = true;
- this.latestNewsSub = this.searchService
- .getNews(size, from)
- .pipe(take(1))
- .subscribe({
- next: (data) => {
- if (loadMore) {
- this.data = this.data.concat(data);
- } else {
- this.data = data;
- }
- this.loading = false;
- },
- error: (error) => (this.errorMessage = error as any),
- });
- }
-
- loadMoreNews() {
- this.startIndex += this.currentPageSize;
- this.getLatestNews(this.currentPageSize, this.startIndex, true);
- }
-
- ngOnDestroy() {
- this.latestNewsSub?.unsubscribe();
- }
-}
+ selector: 'app-latest-news',
+ templateUrl: './latest-news.component.html',
+ standalone: true,
+ imports: [
+ NgIf,
+ NgFor,
+ NewsCardComponent,
+ MatProgressSpinner,
+ SecondaryButtonComponent,
+ ],
+})
+export class LatestNewsComponent implements OnInit, OnDestroy {
+ data: any = [];
+ errorMessage: any;
+ currentPageSize: number = 20;
+ @Input() mobile: any;
+ @Input() visible: boolean;
+ loading: boolean = false;
+ latestNewsSub: Subscription;
+ startIndex = 0;
+
+ constructor(public searchService: SearchService) {}
+
+ ngOnInit(): void {
+ this.getLatestNews(this.currentPageSize, this.startIndex, false);
+ }
+
+ getLatestNews(size: number, from: number, loadMore = false) {
+ this.loading = true;
+ this.latestNewsSub = this.searchService
+ .getNews(size, from)
+ .pipe(take(1))
+ .subscribe({
+ next: (data) => {
+ if (loadMore) {
+ this.data = this.data.concat(data);
+ } else {
+ this.data = data;
+ }
+ this.loading = false;
+ },
+ error: (error) => (this.errorMessage = error as any),
+ });
+ }
+
+ loadMoreNews() {
+ this.startIndex += this.currentPageSize;
+ this.getLatestNews(this.currentPageSize, this.startIndex, true);
+ }
+
+ ngOnDestroy() {
+ this.latestNewsSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/news/news-card/news-card.component.html b/src/app/portal/components/news/news-card/news-card.component.html
index d73c71949..595d7997d 100644
--- a/src/app/portal/components/news/news-card/news-card.component.html
+++ b/src/app/portal/components/news/news-card/news-card.component.html
@@ -1,143 +1,121 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
class="pt-lg-3"
>
-
-
-
-
-
-
-
- {{
- item.headline
- }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{
- _fundingCall.name
- }}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{ item.timestamp | date: 'dd.MM.yyyy' }}
- {{ item.author }}
-
-
-
-
- ![]()
-
-
- Hakuaika päättyy
-
-
-
-
-
-
-
-
+-
+
+
+
+
+
+
+
+
+
+ {{ item.headline }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ _fundingCall.name }}
+
+
+
+
+
+
+
+
+
+ {{ item.timestamp | date: 'dd.MM.yyyy' }}
+
+
+ {{ item.author }}
+
+
+
+
+
+
+
+ ![]()
+
+
+
+ Hakuaika päättyy
+
+
+
+
+
+
+
+
+
diff --git a/src/app/portal/components/news/news-card/news-card.component.scss b/src/app/portal/components/news/news-card/news-card.component.scss
index 9f64b6cc0..199f00699 100644
--- a/src/app/portal/components/news/news-card/news-card.component.scss
+++ b/src/app/portal/components/news/news-card/news-card.component.scss
@@ -1,155 +1,161 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-app-news-card {
- .news-card-divider {
- margin-bottom: 30px;
- background: transparent;
- }
-
- &.organizations-page {
- .news-card-divider {
- margin-top: -10px;
- margin-bottom: 15px;
- }
- .news-img {
- display: none;
- }
- }
- &.latest-news-page {
- .news-card-divider {
- margin-bottom: 0px;
- }
- }
-
- margin-bottom: -15px;
- &.static-height-version {
- mat-card {
- min-height: 162px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- }
-
- h2 {
- font-size: 20px;
- }
-
- h3 {
- overflow-x: hidden;
- }
-
- .icon {
- font-size: 1rem;
- }
-
- .link a.org-link {
- // position: absolute;
- bottom: 0;
- }
-
- a:focus {
- text-decoration: underline;
- }
-
- .news-img {
- width: 100%;
- max-width: 100px;
- max-height: 100px;
- padding: 15px;
- margin-top: 8px;
- }
-
- .date-line {
- display: flex;
- font-size: 0.95rem;
- color: #000000c7;
-
- &.accented-line {
- //margin-left: -15px;
-
- .inline-date {
- display: inline-flex;
- margin-left: 10px;
- font-weight: bold;
- }
-
- &:before {
- width: 8px;
- height: 22px;
- background: #4546b9;
- content: '';
- display: inline-flex;
- position: relative;
- margin-right: 15px;
- }
- }
- }
-
- .author-line {
- font-size: 0.9rem;
- }
-
- .mat-card-header-text {
- margin: 0 !important;
- }
-
- .mat-card-header-text {
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
-
- .mat-card-subtitle {
- margin-bottom: 12px;
- }
-
- mat-card-content {
- // &.low-content {
- // //height: 3rem;
- // }
- &.preview {
- // IE
- display: block;
- line-height: 1.5em;
-
- p {
- margin-bottom: 0;
- }
- }
- p:last-child {
- margin-bottom: 0.25rem;
- }
- }
-
- .mat-card-footer {
- margin: -22px -15px;
- }
-
- // Side news
- .dense {
- h3 {
- font-size: 1rem;
- }
-
- .icon {
- display: inline-block;
- }
- }
-
- @media screen and (max-width: 991px) {
- .mat-card-header-text {
- margin: 0 !important;
- }
- }
- @media screen and (max-width: 515px) {
- .news-img {
- padding: 0px;
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+app-news-card {
+ .news-card-divider {
+ margin-bottom: 30px;
+ background: transparent;
+ }
+
+ &.organizations-page {
+ .news-card-divider {
+ margin-top: -10px;
+ margin-bottom: 15px;
+ }
+ .news-img {
+ display: none;
+ }
+ }
+ &.latest-news-page {
+ .news-card-divider {
+ margin-bottom: 0px;
+ }
+ }
+
+ margin-bottom: -15px;
+ &.static-height-version {
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ mat-card {
+ min-height: 162px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+ }
+
+ h2 {
+ font-size: 20px;
+ }
+
+ h3 {
+ overflow-x: hidden;
+ }
+
+ .icon {
+ font-size: 1rem;
+ }
+
+ .link a.org-link {
+ // position: absolute;
+ bottom: 0;
+ }
+
+ a:focus {
+ text-decoration: underline;
+ }
+
+ .news-img {
+ width: 100%;
+ max-width: 100px;
+ max-height: 100px;
+ padding: 15px;
+ margin-top: 8px;
+ }
+
+ .date-line {
+ display: flex;
+ font-size: 0.95rem;
+ color: #000000c7;
+
+ &.accented-line {
+ //margin-left: -15px;
+
+ .inline-date {
+ display: inline-flex;
+ margin-left: 10px;
+ font-weight: bold;
+ }
+
+ &:before {
+ width: 8px;
+ height: 22px;
+ background: #4546b9;
+ content: '';
+ display: inline-flex;
+ position: relative;
+ margin-right: 15px;
+ }
+ }
+ }
+
+ .author-line {
+ font-size: 0.9rem;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ .mat-card-header-text {
+ margin: 0 !important;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ .mat-card-header-text {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ }
+
+ .mat-mdc-card-subtitle {
+ margin-bottom: 12px;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ mat-card-content {
+ // &.low-content {
+ // //height: 3rem;
+ // }
+ &.preview {
+ // IE
+ display: block;
+ line-height: 1.5em;
+
+ p {
+ margin-bottom: 0;
+ }
+ }
+ p:last-child {
+ margin-bottom: 0.25rem;
+ }
+ }
+
+ .mat-mdc-card-footer {
+ margin: -22px -15px;
+ }
+
+ // Side news
+ .dense {
+ h3 {
+ font-size: 1rem;
+ }
+
+ .icon {
+ display: inline-block;
+ }
+ }
+
+ @media screen and (max-width: 991px) {
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ .mat-card-header-text {
+ margin: 0 !important;
+ }
+ }
+ @media screen and (max-width: 515px) {
+ .news-img {
+ padding: 0px;
+ }
+ }
+}
+
+.mat-mdc-card-header-text {
+ width: 100%;
+}
diff --git a/src/app/portal/components/news/news-card/news-card.component.scss-theme.scss b/src/app/portal/components/news/news-card/news-card.component.scss-theme.scss
index a2a594000..c0ed111c6 100644
--- a/src/app/portal/components/news/news-card/news-card.component.scss-theme.scss
+++ b/src/app/portal/components/news/news-card/news-card.component.scss-theme.scss
@@ -1,67 +1,71 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@mixin app-news-card-theme($theme) {
- $primary: map-get($theme, primary);
-
- .tint-background {
- background: mat-color($primary, 50);
- }
-
- .news-divider {
- border-bottom: mat-color($primary) solid 2px;
- }
-
- .news-card-divider {
- background: mat-color($primary, 50);
- hr {
- background: mat-color($primary) !important;
- height: 2px;
- margin: 0px 15px 15px 15px;
- opacity: 1;
- }
- }
-
- app-news-card {
- mat-card {
- margin-top: 15px;
- padding: 10px;
- &.mat-card {
- background-color: #fff;
- }
-
- &.mat-card.limit-width {
- max-width: 760px;
- }
-
- .mat-card-header-text {
- width: 100%;
- }
-
- .mat-card-title {
- //border-bottom: mat-color($primary) solid 2px;
- }
-
- mat-card-content {
- margin: 0 16px;
- }
-
- mat-card-actions {
- font-size: 14px;
- margin: 0 16px !important;
- }
-
- mat-card-subtitle {
- margin-bottom: 0px;
- }
-
- .icon {
- color: mat-color($primary);
- }
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-news-card-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ .tint-background {
+ background: mat-color($primary, 50);
+ }
+
+ .news-divider {
+ border-bottom: mat-color($primary) solid 2px;
+ }
+
+ .news-card-divider {
+ background: mat-color($primary, 50);
+ hr {
+ background: mat-color($primary) !important;
+ height: 2px;
+ margin: 0px 15px 15px 15px;
+ opacity: 1;
+ }
+ }
+
+ app-news-card {
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ mat-card {
+ margin-top: 15px;
+ padding: 10px;
+ &.mat-mdc-card {
+ background-color: #fff;
+ }
+
+ &.mat-mdc-card.limit-width {
+ max-width: 760px;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ .mat-card-header-text {
+ width: 100%;
+ }
+
+ .mat-mdc-card-title {
+ //border-bottom: mat-color($primary) solid 2px;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ mat-card-content {
+ margin: 0 16px;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ mat-card-actions {
+ font-size: 14px;
+ margin: 0 16px !important;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
+ mat-card-subtitle {
+ margin-bottom: 0px;
+ }
+
+ .icon {
+ color: mat-color($primary);
+ }
+ }
+ }
+}
diff --git a/src/app/portal/components/news/news-card/news-card.component.ts b/src/app/portal/components/news/news-card/news-card.component.ts
index 734d3e4ed..a7c1c114e 100644
--- a/src/app/portal/components/news/news-card/news-card.component.ts
+++ b/src/app/portal/components/news/news-card/news-card.component.ts
@@ -1,12 +1,40 @@
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { News } from 'src/app/portal/models/news.model';
import { FundingCall } from '@portal/models/funding-call.model';
+import { SafeUrlPipe } from '../../../pipes/safe-url.pipe';
+import { HighlightSearchPipe } from '../../../pipes/highlight.pipe';
+import { CutContentPipe } from '../../../../shared/pipes/cut-content.pipe';
+import { RouterLink } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault, NgClass, DatePipe } from '@angular/common';
+import { MatCard, MatCardHeader, MatCardTitle, MatCardSubtitle, MatCardContent, MatCardActions, MatCardFooter } from '@angular/material/card';
@Component({
- selector: 'app-news-card',
- templateUrl: './news-card.component.html',
- styleUrls: ['./news-card.component.scss'],
- encapsulation: ViewEncapsulation.None,
+ selector: 'app-news-card',
+ templateUrl: './news-card.component.html',
+ styleUrls: ['./news-card.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ MatCard,
+ MatCardHeader,
+ MatCardTitle,
+ NgIf,
+ NgSwitch,
+ NgSwitchCase,
+ NgSwitchDefault,
+ FontAwesomeModule,
+ RouterLink,
+ MatCardSubtitle,
+ MatCardContent,
+ NgClass,
+ MatCardActions,
+ MatCardFooter,
+ DatePipe,
+ CutContentPipe,
+ HighlightSearchPipe,
+ SafeUrlPipe,
+ ],
})
export class NewsCardComponent implements OnInit {
@Input() itemTypeFundingCalls = false;
diff --git a/src/app/portal/components/news/news-pagination/news-pagination.component.ts b/src/app/portal/components/news/news-pagination/news-pagination.component.ts
index 04cbdabb7..0da910cea 100644
--- a/src/app/portal/components/news/news-pagination/news-pagination.component.ts
+++ b/src/app/portal/components/news/news-pagination/news-pagination.component.ts
@@ -1,132 +1,140 @@
-import {
- Component,
- OnInit,
- Input,
- Inject,
- OnChanges,
- ChangeDetectorRef,
- OnDestroy,
-} from '@angular/core';
-import { Search } from 'src/app/portal/models/search.model';
-import { Subscription } from 'rxjs';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { ActivatedRoute, Router } from '@angular/router';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { WINDOW } from 'src/app/shared/services/window.service';
+import {
+ Component,
+ OnInit,
+ Input,
+ Inject,
+ OnChanges,
+ ChangeDetectorRef,
+ OnDestroy,
+} from '@angular/core';
+import { Search } from 'src/app/portal/models/search.model';
+import { Subscription } from 'rxjs';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { WINDOW } from 'src/app/shared/services/window.service';
import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { NgFor, NgIf } from '@angular/common';
+
@Component({
- selector: 'app-news-pagination',
- templateUrl: './news-pagination.component.html',
- styleUrls: ['./news-pagination.component.scss'],
-})
-export class NewsPaginationComponent implements OnInit, OnChanges, OnDestroy {
- page: number;
- fromPage: number; // Used for HTML rendering
- pages: number[];
- maxPage: number;
- @Input() responseData: Search;
- @Input() tab: string;
- total: any;
- resizeSub: Subscription;
- desktop = this.window.innerWidth >= 1200;
- navSmall = this.window.innerWidth >= 992;
- order = this.window.innerWidth >= 768;
- pageSize = 5;
-
- previous = $localize`:@@previous:Edellinen`;
- next = $localize`:@@next:Seuraava`;
- paramSub: Subscription;
-
- constructor(
- private searchService: SearchService,
- private route: ActivatedRoute,
- private router: Router,
- private resizeService: ResizeService,
- @Inject(WINDOW) private window: Window,
- private tabChangeService: TabChangeService
- ) {}
-
- ngOnInit(): void {
- // Initialize fromPage
- this.fromPage = (this.page - 1) * this.pageSize;
-
- // Get updates for window resize
- this.resizeSub = this.resizeService.onResize$.subscribe((size) =>
- this.onResize(size)
- );
- }
-
- ngOnChanges() {
- // Reset pagination
- this.page = this.searchService.newsPageNumber;
- this.pages = this.generatePages(this.page, this.pageSize);
- }
-
- ngOnDestroy(): void {
- this.resizeSub?.unsubscribe();
- }
-
- generatePages(currentPage: number, length: number = this.pageSize) {
- // Get the highest page number for the query
- this.maxPage = this.getHighestPage(this.responseData[0]?.total);
- // Init array to correct length, make it odd and squish if not enough pages
- // Number of pages should be odd to make centering current page easy
- // tslint:disable-next-line: curly
- if (!(length % 2)) length++;
- length = Math.min(length, this.maxPage);
- const res = Array(length);
- // If page is at end, count from top
- // tslint:disable-next-line: no-bitwise
- if (this.page > this.maxPage - ((length / 2) | 0)) {
- res[length - 1] = this.maxPage;
- for (let i = length - 2; i >= 0; i--) {
- res[i] = res[i + 1] - 1;
- }
- // Otherwise count from bottom
- } else {
- // tslint:disable-next-line: no-bitwise
- res[0] = Math.max(1, currentPage - ((length / 2) | 0));
- for (let i = 1; i < length; i++) {
- res[i] = res[i - 1] + 1;
- }
- }
- return res;
- }
-
- getHighestPage(results: number, interval: number = this.pageSize) {
- // tslint:disable-next-line: no-bitwise
- return ((results - 1) / interval + 1) | 0;
- }
-
- goToPage(n: number) {
- this.page = n;
- this.fromPage = (this.page - 1) * this.pageSize;
- this.searchService.updateNewsPageNumber(this.page);
- this.pages = this.generatePages(this.page, this.pageSize);
- this.tabChangeService.focus = 'olderNews';
- this.navigate();
- }
-
- onResize(size) {
- const w = size.width;
- // Change if swap to or from desktop
- const changePages =
- (this.desktop && w < 1200) || (!this.desktop && w >= 1200);
- this.desktop = w >= 1200;
- this.navSmall = w >= 992;
- this.order = w >= 768;
- // Generate 5 pages and 4 more if desktop (9 total for desktop so it's odd)
- if (changePages) {
- this.pages = this.generatePages(this.page, this.pageSize);
- }
- }
-
- navigate() {
- this.router.navigate([], {
- relativeTo: this.route,
- queryParams: { page: this.page },
- queryParamsHandling: 'merge',
- });
- }
-}
+ selector: 'app-news-pagination',
+ templateUrl: './news-pagination.component.html',
+ styleUrls: ['./news-pagination.component.scss'],
+ standalone: true,
+ imports: [
+ NgFor,
+ NgIf,
+ SecondaryButtonComponent,
+ ],
+})
+export class NewsPaginationComponent implements OnInit, OnChanges, OnDestroy {
+ page: number;
+ fromPage: number; // Used for HTML rendering
+ pages: number[];
+ maxPage: number;
+ @Input() responseData: Search;
+ @Input() tab: string;
+ total: any;
+ resizeSub: Subscription;
+ desktop = this.window.innerWidth >= 1200;
+ navSmall = this.window.innerWidth >= 992;
+ order = this.window.innerWidth >= 768;
+ pageSize = 5;
+
+ previous = $localize`:@@previous:Edellinen`;
+ next = $localize`:@@next:Seuraava`;
+ paramSub: Subscription;
+
+ constructor(
+ private searchService: SearchService,
+ private route: ActivatedRoute,
+ private router: Router,
+ private resizeService: ResizeService,
+ @Inject(WINDOW) private window: Window,
+ private tabChangeService: TabChangeService
+ ) {}
+
+ ngOnInit(): void {
+ // Initialize fromPage
+ this.fromPage = (this.page - 1) * this.pageSize;
+
+ // Get updates for window resize
+ this.resizeSub = this.resizeService.onResize$.subscribe((size) =>
+ this.onResize(size)
+ );
+ }
+
+ ngOnChanges() {
+ // Reset pagination
+ this.page = this.searchService.newsPageNumber;
+ this.pages = this.generatePages(this.page, this.pageSize);
+ }
+
+ ngOnDestroy(): void {
+ this.resizeSub?.unsubscribe();
+ }
+
+ generatePages(currentPage: number, length: number = this.pageSize) {
+ // Get the highest page number for the query
+ this.maxPage = this.getHighestPage(this.responseData[0]?.total);
+ // Init array to correct length, make it odd and squish if not enough pages
+ // Number of pages should be odd to make centering current page easy
+ // tslint:disable-next-line: curly
+ if (!(length % 2)) length++;
+ length = Math.min(length, this.maxPage);
+ const res = Array(length);
+ // If page is at end, count from top
+ // tslint:disable-next-line: no-bitwise
+ if (this.page > this.maxPage - ((length / 2) | 0)) {
+ res[length - 1] = this.maxPage;
+ for (let i = length - 2; i >= 0; i--) {
+ res[i] = res[i + 1] - 1;
+ }
+ // Otherwise count from bottom
+ } else {
+ // tslint:disable-next-line: no-bitwise
+ res[0] = Math.max(1, currentPage - ((length / 2) | 0));
+ for (let i = 1; i < length; i++) {
+ res[i] = res[i - 1] + 1;
+ }
+ }
+ return res;
+ }
+
+ getHighestPage(results: number, interval: number = this.pageSize) {
+ // tslint:disable-next-line: no-bitwise
+ return ((results - 1) / interval + 1) | 0;
+ }
+
+ goToPage(n: number) {
+ this.page = n;
+ this.fromPage = (this.page - 1) * this.pageSize;
+ this.searchService.updateNewsPageNumber(this.page);
+ this.pages = this.generatePages(this.page, this.pageSize);
+ this.tabChangeService.focus = 'olderNews';
+ this.navigate();
+ }
+
+ onResize(size) {
+ const w = size.width;
+ // Change if swap to or from desktop
+ const changePages =
+ (this.desktop && w < 1200) || (!this.desktop && w >= 1200);
+ this.desktop = w >= 1200;
+ this.navSmall = w >= 992;
+ this.order = w >= 768;
+ // Generate 5 pages and 4 more if desktop (9 total for desktop so it's odd)
+ if (changePages) {
+ this.pages = this.generatePages(this.page, this.pageSize);
+ }
+ }
+
+ navigate() {
+ this.router.navigate([], {
+ relativeTo: this.route,
+ queryParams: { page: this.page },
+ queryParamsHandling: 'merge',
+ });
+ }
+}
diff --git a/src/app/portal/components/news/news-results/news-results.component.ts b/src/app/portal/components/news/news-results/news-results.component.ts
index a47c8f195..e98ec128f 100644
--- a/src/app/portal/components/news/news-results/news-results.component.ts
+++ b/src/app/portal/components/news/news-results/news-results.component.ts
@@ -1,197 +1,217 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- Inject,
- LOCALE_ID,
- ViewChild,
- ElementRef,
- AfterViewInit,
- OnDestroy,
- PLATFORM_ID,
- ViewEncapsulation,
- Input,
- OnChanges,
-} from '@angular/core';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { isPlatformBrowser } from '@angular/common';
-import { DataService } from 'src/app/portal/services/data.service';
-import { ActivatedRoute, Router } from '@angular/router';
-import { FilterService } from 'src/app/portal/services/filters/filter.service';
-import { SortService } from 'src/app/portal/services/sort.service';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { Subscription } from 'rxjs';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ Inject,
+ LOCALE_ID,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ OnDestroy,
+ PLATFORM_ID,
+ ViewEncapsulation,
+ Input,
+ OnChanges,
+} from '@angular/core';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { isPlatformBrowser, NgIf, NgFor, AsyncPipe } from '@angular/common';
+import { DataService } from 'src/app/portal/services/data.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FilterService } from 'src/app/portal/services/filters/filter.service';
+import { SortService } from 'src/app/portal/services/sort.service';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
-
+import { ThousandSeparatorPipe } from '../../../../shared/pipes/thousand-separator.pipe';
+import { NewsPaginationComponent } from '../news-pagination/news-pagination.component';
+import { NewsCardComponent } from '../news-card/news-card.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { ActiveFiltersComponent } from '../../results/active-filters/active-filters.component';
+import { SearchComponent } from '../../../../shared/components/search/search.component';
+import { FiltersComponent } from '../../results/filters/filters.component';
+
@Component({
- selector: 'app-news-results',
- templateUrl: './news-results.component.html',
- encapsulation: ViewEncapsulation.None,
-})
-export class NewsResultsComponent
- implements OnInit, AfterViewInit, OnDestroy, OnChanges
-{
- @Input() mobile: any;
- @Input() tab: any;
-
- data: any = [];
-
- errorMessage: any;
-
- @ViewChild('searchInput') searchInput: ElementRef;
-
- filterValues: unknown;
- filters: any;
-
- currentTerm: string;
- queryParams: any;
-
- routeSub: Subscription;
- inputSub: Subscription;
- focusSub: Subscription;
- olderNewsSub: Subscription;
- newsFiltersSub: Subscription;
-
- loading: boolean = false;
-
- constructor(
- public searchService: SearchService,
- @Inject(LOCALE_ID) protected localeId: string,
- private tabChangeService: TabChangeService,
- @Inject(PLATFORM_ID) private platformId: object,
- private dataService: DataService,
- private route: ActivatedRoute,
- private filterService: FilterService,
- private sortService: SortService,
- public utilityService: UtilityService,
- private router: Router
- ) {}
-
- ngOnInit() {
- this.routeSub = this.route.queryParams.subscribe((queryParams) => {
- this.queryParams = queryParams;
-
- if (queryParams.search) {
- this.searchService.updateInput(queryParams.search);
- } else {
- this.searchService.updateInput('');
- }
-
- // Update sort
- this.sortService.updateTab('news');
-
- this.searchService.updateNewsPageNumber(parseInt(queryParams.page));
-
- // Check for Angular Univeral SSR, get filters if browser
- if (isPlatformBrowser(this.platformId)) {
- this.filters = this.filterService.filterList(queryParams);
- this.filterService.updateFilters(this.filters);
- }
-
- // Get data
- if (this.tab === 1) {
- this.getData();
- }
- });
-
- // Search input handler
- this.inputSub = this.searchService.currentInput.subscribe(
- (input) => (this.currentTerm = input)
- );
- }
-
- ngOnChanges() {
- // Get data when tab changes first time
- if (!this.data.length && this.tab === 1 && this.queryParams) {
- this.getData();
- }
- }
-
- ngAfterViewInit() {
- // Focus with skip-links
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'search-input') {
- this.searchInput.nativeElement.focus();
- }
- }
- );
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- getData() {
- this.loading = true;
- this.getFilterNews();
- this.getFilterData();
- }
-
- getFilterNews(size: number = 5) {
- this.olderNewsSub = this.searchService
- .getOlderNews(size)
- .pipe(take(1))
- .subscribe({
- next: (data) => {
- this.data = data;
- this.loading = false;
- },
- error: (error) => (this.errorMessage = error as any),
- });
- }
-
- getFilterData() {
- // Check for Angular Univeral SSR, get filter data if browser
- if (isPlatformBrowser(this.platformId)) {
- this.newsFiltersSub = this.searchService.getNewsFilters().subscribe({
- next: (filterValues) => {
- this.filterValues = filterValues;
- // Send response to data service
- this.dataService.changeResponse(this.filterValues);
- },
- error: (error) => (this.errorMessage = error as any),
- });
- }
- }
-
- searchNews(term) {
- this.searchService.updateInput(term);
- const params = Object.assign({}, this.queryParams);
- params.search = term;
- this.router.navigate([], { queryParams: params });
- this.getFilterNews();
- this.getFilterData();
- }
-
- resetSearch() {
- this.currentTerm = '';
- this.searchService.updateInput('');
- const params = Object.assign({}, this.queryParams);
- params.search = null;
- this.router.navigate([], { queryParams: params });
- }
-
- ngOnDestroy() {
- this.tabChangeService.targetFocus('');
- this.inputSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- this.olderNewsSub?.unsubscribe();
- this.newsFiltersSub?.unsubscribe();
- this.searchService.updateNewsPageNumber(1);
- this.tabChangeService.focus = undefined;
- this.searchService.updateInput('');
- if (this.filters) {
- this.filters.organization = [];
- this.filterService.updateFilters(this.filters);
- }
- this.routeSub?.unsubscribe();
- }
-}
+ selector: 'app-news-results',
+ templateUrl: './news-results.component.html',
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgIf,
+ FiltersComponent,
+ SearchComponent,
+ ActiveFiltersComponent,
+ MatProgressSpinner,
+ NgFor,
+ NewsCardComponent,
+ NewsPaginationComponent,
+ AsyncPipe,
+ ThousandSeparatorPipe,
+ ],
+})
+export class NewsResultsComponent
+ implements OnInit, AfterViewInit, OnDestroy, OnChanges
+{
+ @Input() mobile: any;
+ @Input() tab: any;
+
+ data: any = [];
+
+ errorMessage: any;
+
+ @ViewChild('searchInput') searchInput: ElementRef;
+
+ filterValues: unknown;
+ filters: any;
+
+ currentTerm: string;
+ queryParams: any;
+
+ routeSub: Subscription;
+ inputSub: Subscription;
+ focusSub: Subscription;
+ olderNewsSub: Subscription;
+ newsFiltersSub: Subscription;
+
+ loading: boolean = false;
+
+ constructor(
+ public searchService: SearchService,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private tabChangeService: TabChangeService,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private dataService: DataService,
+ private route: ActivatedRoute,
+ private filterService: FilterService,
+ private sortService: SortService,
+ public utilityService: UtilityService,
+ private router: Router
+ ) {}
+
+ ngOnInit() {
+ this.routeSub = this.route.queryParams.subscribe((queryParams) => {
+ this.queryParams = queryParams;
+
+ if (queryParams.search) {
+ this.searchService.updateInput(queryParams.search);
+ } else {
+ this.searchService.updateInput('');
+ }
+
+ // Update sort
+ this.sortService.updateTab('news');
+
+ this.searchService.updateNewsPageNumber(parseInt(queryParams.page));
+
+ // Check for Angular Univeral SSR, get filters if browser
+ if (isPlatformBrowser(this.platformId)) {
+ this.filters = this.filterService.filterList(queryParams);
+ this.filterService.updateFilters(this.filters);
+ }
+
+ // Get data
+ if (this.tab === 1) {
+ this.getData();
+ }
+ });
+
+ // Search input handler
+ this.inputSub = this.searchService.currentInput.subscribe(
+ (input) => (this.currentTerm = input)
+ );
+ }
+
+ ngOnChanges() {
+ // Get data when tab changes first time
+ if (!this.data.length && this.tab === 1 && this.queryParams) {
+ this.getData();
+ }
+ }
+
+ ngAfterViewInit() {
+ // Focus with skip-links
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'search-input') {
+ this.searchInput.nativeElement.focus();
+ }
+ }
+ );
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ getData() {
+ this.loading = true;
+ this.getFilterNews();
+ this.getFilterData();
+ }
+
+ getFilterNews(size: number = 5) {
+ this.olderNewsSub = this.searchService
+ .getOlderNews(size)
+ .pipe(take(1))
+ .subscribe({
+ next: (data) => {
+ this.data = data;
+ this.loading = false;
+ },
+ error: (error) => (this.errorMessage = error as any),
+ });
+ }
+
+ getFilterData() {
+ // Check for Angular Univeral SSR, get filter data if browser
+ if (isPlatformBrowser(this.platformId)) {
+ this.newsFiltersSub = this.searchService.getNewsFilters().subscribe({
+ next: (filterValues) => {
+ this.filterValues = filterValues;
+ // Send response to data service
+ this.dataService.changeResponse(this.filterValues);
+ },
+ error: (error) => (this.errorMessage = error as any),
+ });
+ }
+ }
+
+ searchNews(term) {
+ this.searchService.updateInput(term);
+ const params = Object.assign({}, this.queryParams);
+ params.search = term;
+ this.router.navigate([], { queryParams: params });
+ this.getFilterNews();
+ this.getFilterData();
+ }
+
+ resetSearch() {
+ this.currentTerm = '';
+ this.searchService.updateInput('');
+ const params = Object.assign({}, this.queryParams);
+ params.search = null;
+ this.router.navigate([], { queryParams: params });
+ }
+
+ ngOnDestroy() {
+ this.tabChangeService.targetFocus('');
+ this.inputSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ this.olderNewsSub?.unsubscribe();
+ this.newsFiltersSub?.unsubscribe();
+ this.searchService.updateNewsPageNumber(1);
+ this.tabChangeService.focus = undefined;
+ this.searchService.updateInput('');
+ if (this.filters) {
+ this.filters.organization = [];
+ this.filterService.updateFilters(this.filters);
+ }
+ this.routeSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/news/news/news.component.html b/src/app/portal/components/news/news/news.component.html
index c6b111d19..49420e03a 100644
--- a/src/app/portal/components/news/news/news.component.html
+++ b/src/app/portal/components/news/news/news.component.html
@@ -43,6 +43,8 @@
class="pt-lg-3"
>
+
+
Uusimmat
{
- let newsComponent: NewsComponent;
- let fixture: ComponentFixture;
-
- beforeEach(() => {
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { NewsComponent } from './news.component';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { WINDOW_PROVIDERS } from 'src/app/shared/services/window.service';
+import { ActivatedRouteStub } from 'src/testing/activated-route-stub';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { AppConfigService } from 'src/app/shared/services/app-config-service.service';
+import { AppConfigServiceMock } from 'src/app/portal/services/search.service.spec';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { MatDialogModule } from '@angular/material/dialog';
+
+describe('NewsComponent', () => {
+ let newsComponent: NewsComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [NewsComponent],
- providers: [
+ providers: [
SearchService,
{ provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
{ provide: AppConfigService, useClass: AppConfigServiceMock },
WINDOW_PROVIDERS,
- ],
- imports: [
+ ],
+ imports: [
HttpClientTestingModule,
RouterTestingModule,
- MatDialogModule
- ],
- schemas: [NO_ERRORS_SCHEMA],
- });
-
- fixture = TestBed.createComponent(NewsComponent);
- newsComponent = fixture.componentInstance;
- });
-
- it('should be created', () => {
- expect(newsComponent).toBeDefined();
- });
-});
+ MatDialogModule,
+ NewsComponent
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+});
+
+ fixture = TestBed.createComponent(NewsComponent);
+ newsComponent = fixture.componentInstance;
+ });
+
+ it('should be created', () => {
+ expect(newsComponent).toBeDefined();
+ });
+});
diff --git a/src/app/portal/components/news/news/news.component.ts b/src/app/portal/components/news/news/news.component.ts
index 6648ca7f4..e63d64c41 100644
--- a/src/app/portal/components/news/news/news.component.ts
+++ b/src/app/portal/components/news/news/news.component.ts
@@ -1,184 +1,198 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- Inject,
- LOCALE_ID,
- ViewChild,
- ElementRef,
- AfterViewInit,
- OnDestroy,
- PLATFORM_ID,
- ViewEncapsulation,
-} from '@angular/core';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { isPlatformBrowser } from '@angular/common';
-import { ActivatedRoute, Router } from '@angular/router';
-import { WINDOW } from 'src/app/shared/services/window.service';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { Subscription } from 'rxjs';
-import { take } from 'rxjs/operators';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-
-@Component({
- selector: 'app-news',
- templateUrl: './news.component.html',
- styleUrls: ['./news.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class NewsComponent implements OnInit, AfterViewInit, OnDestroy {
- @ViewChild('serviceInfoLink') serviceInfoLink: ElementRef;
- width = this.window.innerWidth;
- mobile = this.width < 992;
-
- private currentLocale: string;
- private metaTags = MetaTags.news;
- private commonTags = MetaTags.common;
-
- queryParams: any;
- selectedIndex: any;
-
- focusSub: Subscription;
- resizeSub: Subscription;
- routeSub: Subscription;
- queryParamSub: Subscription;
-
- isBrowser: boolean;
- dataFetched: any;
- dataFetched2: any;
-
- constructor(
- public searchService: SearchService,
- @Inject(LOCALE_ID) protected localeId: string,
- private tabChangeService: TabChangeService,
- @Inject(PLATFORM_ID) private platformId: object,
- private route: ActivatedRoute,
- @Inject(WINDOW) private window: Window,
- private resizeService: ResizeService,
- public utilityService: UtilityService,
- private router: Router,
- public appSettingsService: AppSettingsService
- ) {
- this.isBrowser = isPlatformBrowser(this.platformId);
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit() {
- // Tab change is needed for data fetch
- this.tabChangeService.tab = 'news';
-
- this.searchService.updateInput('');
-
- // Open tab
- this.routeSub = this.route.params.pipe(take(1)).subscribe((param) => {
- this.selectedIndex = parseInt(param.tab) || 0;
-
- // Hide skip to input on first tab
- this.tabChangeService.toggleSkipToInput(
- this.selectedIndex === 0 ? false : true
- );
- });
-
- this.queryParamSub = this.route.queryParams.subscribe((queryParams) => {
- // Set query params only on filtering tab
- if (this.selectedIndex === 1) this.queryParams = queryParams;
- });
-
- // Set title
- switch (this.localeId) {
- case 'fi': {
- this.setTitle('Tiede- ja tutkimusuutiset - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle('Science and research news - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle(
- 'De senaste vetenskaps- och forskningsnyheterna - Forskning.fi'
- );
- break;
- }
- }
-
- this.utilityService.addMeta(
- this.metaTags['title' + this.currentLocale],
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
-
- this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
- this.onResize(dims)
- );
- }
-
- getQueryParams(event) {
- if (this.selectedIndex === 1) this.queryParams = event;
- }
-
- ngAfterViewInit() {
- // Focus with skip-links
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.serviceInfoLink.nativeElement.focus();
- }
-
- if (this.selectedIndex === 0 && target === 'search-input') {
- this.selectedIndex = 1;
- }
- }
- );
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnDestroy() {
- this.tabChangeService.targetFocus('');
- if (isPlatformBrowser(this.platformId)) {
- this.resizeSub?.unsubscribe();
- }
- this.tabChangeService.focus = undefined;
- this.routeSub?.unsubscribe;
- this.queryParamSub?.unsubscribe;
- }
-
- navigate(event) {
- this.selectedIndex = event.index;
- // Hide skip to input on first tab
- this.tabChangeService.toggleSkipToInput(event.index === 0 ? false : true);
-
- switch (event.index) {
- case 1: {
- this.router.navigate(['news', event.index], {
- queryParams: { ...this.queryParams },
- });
- break;
- }
- default: {
- this.router.navigate(['news', event.index]);
- }
- }
- }
-
- onResize(event) {
- this.width = event.width;
- if (this.width >= 992) {
- this.mobile = false;
- } else {
- this.mobile = true;
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ Inject,
+ LOCALE_ID,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ OnDestroy,
+ PLATFORM_ID,
+ ViewEncapsulation,
+} from '@angular/core';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { isPlatformBrowser, AsyncPipe } from '@angular/common';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { WINDOW } from 'src/app/shared/services/window.service';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { Subscription } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { NewsResultsComponent } from '../news-results/news-results.component';
+import { LatestNewsComponent } from '../latest-news/latest-news.component';
+import { MatTabGroup, MatTab } from '@angular/material/tabs';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-news',
+ templateUrl: './news.component.html',
+ styleUrls: ['./news.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ RouterLink,
+ MatTabGroup,
+ MatTab,
+ LatestNewsComponent,
+ NewsResultsComponent,
+ AsyncPipe,
+ ],
+})
+export class NewsComponent implements OnInit, AfterViewInit, OnDestroy {
+ @ViewChild('serviceInfoLink') serviceInfoLink: ElementRef;
+ width = this.window.innerWidth;
+ mobile = this.width < 992;
+
+ private currentLocale: string;
+ private metaTags = MetaTags.news;
+ private commonTags = MetaTags.common;
+
+ queryParams: any;
+ selectedIndex: any;
+
+ focusSub: Subscription;
+ resizeSub: Subscription;
+ routeSub: Subscription;
+ queryParamSub: Subscription;
+
+ isBrowser: boolean;
+ dataFetched: any;
+ dataFetched2: any;
+
+ constructor(
+ public searchService: SearchService,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private tabChangeService: TabChangeService,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private route: ActivatedRoute,
+ @Inject(WINDOW) private window: Window,
+ private resizeService: ResizeService,
+ public utilityService: UtilityService,
+ private router: Router,
+ public appSettingsService: AppSettingsService
+ ) {
+ this.isBrowser = isPlatformBrowser(this.platformId);
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit() {
+ // Tab change is needed for data fetch
+ this.tabChangeService.tab = 'news';
+
+ this.searchService.updateInput('');
+
+ // Open tab
+ this.routeSub = this.route.params.pipe(take(1)).subscribe((param) => {
+ this.selectedIndex = parseInt(param.tab) || 0;
+
+ // Hide skip to input on first tab
+ this.tabChangeService.toggleSkipToInput(
+ this.selectedIndex === 0 ? false : true
+ );
+ });
+
+ this.queryParamSub = this.route.queryParams.subscribe((queryParams) => {
+ // Set query params only on filtering tab
+ if (this.selectedIndex === 1) this.queryParams = queryParams;
+ });
+
+ // Set title
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle('Tiede- ja tutkimusuutiset - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle('Science and research news - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle(
+ 'De senaste vetenskaps- och forskningsnyheterna - Forskning.fi'
+ );
+ break;
+ }
+ }
+
+ this.utilityService.addMeta(
+ this.metaTags['title' + this.currentLocale],
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+
+ this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
+ this.onResize(dims)
+ );
+ }
+
+ getQueryParams(event) {
+ if (this.selectedIndex === 1) this.queryParams = event;
+ }
+
+ ngAfterViewInit() {
+ // Focus with skip-links
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.serviceInfoLink.nativeElement.focus();
+ }
+
+ if (this.selectedIndex === 0 && target === 'search-input') {
+ this.selectedIndex = 1;
+ }
+ }
+ );
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnDestroy() {
+ this.tabChangeService.targetFocus('');
+ if (isPlatformBrowser(this.platformId)) {
+ this.resizeSub?.unsubscribe();
+ }
+ this.tabChangeService.focus = undefined;
+ this.routeSub?.unsubscribe;
+ this.queryParamSub?.unsubscribe;
+ }
+
+ navigate(event) {
+ this.selectedIndex = event.index;
+ // Hide skip to input on first tab
+ this.tabChangeService.toggleSkipToInput(event.index === 0 ? false : true);
+
+ switch (event.index) {
+ case 1: {
+ this.router.navigate(['news', event.index], {
+ queryParams: { ...this.queryParams },
+ });
+ break;
+ }
+ default: {
+ this.router.navigate(['news', event.index]);
+ }
+ }
+ }
+
+ onResize(event) {
+ this.width = event.width;
+ if (this.width >= 992) {
+ this.mobile = false;
+ } else {
+ this.mobile = true;
+ }
+ }
+}
diff --git a/src/app/portal/components/privacy/privacy.component.scss b/src/app/portal/components/privacy/privacy.component.scss
index 192b646fc..369aa3611 100644
--- a/src/app/portal/components/privacy/privacy.component.scss
+++ b/src/app/portal/components/privacy/privacy.component.scss
@@ -1,46 +1,47 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-h2 {
- margin-bottom: 32px;
-}
-
-h3 {
- font-size: 1.2rem;
-}
-
-h4 {
- font-size: 1rem;
-}
-
-ol {
- font-weight: bold;
-}
-
-ul {
- list-style: outside;
- padding-left: 1.5rem;
- padding-bottom: 1rem;
-}
-
-li {
- font-weight: normal;
-}
-
-img {
- width: 100%;
- height: auto;
- max-width: 800px;
- display: block;
-}
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+h2 {
+ margin-bottom: 32px;
+}
+
+h3 {
+ font-size: 1.2rem;
+}
+
+h4 {
+ font-size: 1rem;
+}
+
+ol {
+ font-weight: bold;
+}
+
+ul {
+ list-style: outside;
+ padding-left: 1.5rem;
+ padding-bottom: 1rem;
+}
+
+li {
+ font-weight: normal;
+}
+
+img {
+ width: 100%;
+ height: auto;
+ max-width: 800px;
+ display: block;
+}
+
@media (max-width: 575px) {
- mat-tab-group {
- max-width: 80vw;
- word-wrap: break-word;
- }
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
+ mat-tab-group {
+ max-width: 80vw;
+ word-wrap: break-word;
+ }
+}
diff --git a/src/app/portal/components/privacy/privacy.component.ts b/src/app/portal/components/privacy/privacy.component.ts
index 8c4e4bdc2..da4571ba6 100644
--- a/src/app/portal/components/privacy/privacy.component.ts
+++ b/src/app/portal/components/privacy/privacy.component.ts
@@ -1,215 +1,230 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- Inject,
- LOCALE_ID,
- AfterViewInit,
- OnDestroy,
- ViewChild,
- ElementRef,
- PLATFORM_ID,
-} from '@angular/core';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { Subscription } from 'rxjs';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
-import { PrivacyService } from 'src/app/portal/services/privacy.service';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { WINDOW } from 'src/app/shared/services/window.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ Inject,
+ LOCALE_ID,
+ AfterViewInit,
+ OnDestroy,
+ ViewChild,
+ ElementRef,
+ PLATFORM_ID,
+} from '@angular/core';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { Subscription } from 'rxjs';
+import { DOCUMENT, isPlatformBrowser, NgIf } from '@angular/common';
+import { PrivacyService } from 'src/app/portal/services/privacy.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute, Router } from '@angular/router';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { WINDOW } from 'src/app/shared/services/window.service';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { SanitizeHtmlPipe } from '../../../shared/pipes/sanitize-html.pipe';
+import { MatButton } from '@angular/material/button';
+import { MatTabGroup, MatTab } from '@angular/material/tabs';
+import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
+import { BannerDividerComponent } from '../../../shared/components/banner-divider/banner-divider.component';
+
@Component({
- selector: 'app-privacy',
- templateUrl: './privacy.component.html',
- styleUrls: ['./privacy.component.scss'],
-})
-export class PrivacyComponent implements OnInit, AfterViewInit, OnDestroy {
- focusSub: Subscription;
- @ViewChild('mainFocus') mainFocus: ElementRef;
- title: string;
- locale: string;
- matomoUrl: string;
- consentStatus: string;
- consentStatusSub: any;
- routeSub: Subscription;
- selectedIndex: any;
- currentLocale: string;
-
- private metaTags = MetaTags.privacy;
- private commonTags = MetaTags.common;
-
- privacyPolicyContent: any[];
- cookiePolicyContent: any[];
- userStatisticsContent: any[];
-
- constructor(
- @Inject(LOCALE_ID) protected localeId: string,
- private tabChangeService: TabChangeService,
- @Inject(DOCUMENT) private document: any,
- @Inject(PLATFORM_ID) private platformId: object,
- private privacyService: PrivacyService,
- private snackBar: MatSnackBar,
- private route: ActivatedRoute,
- private router: Router,
- private utilityService: UtilityService,
- @Inject(WINDOW) private window: Window,
- private appSettingsService: AppSettingsService
- ) {
- this.locale = localeId;
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- this.matomoUrl =
- 'https://rihmatomo-analytics.csc.fi/index.php?module=CoreAdminHome&action=optOut&language=' +
- this.locale +
- '&backgroundColor=&fontColor=&fontSize=&fontFamily=Roboto, sans-serif';
- }
-
- ngOnInit(): void {
- // Get page data. Data is passed with resolver in router
- const pageData = this.route.snapshot.data.pages;
- this.privacyPolicyContent = pageData.find(
- (el) => el.id === 'privacy-statement'
- );
- this.cookiePolicyContent = pageData.find((el) => el.id === 'cookie-policy');
-
- this.userStatisticsContent = pageData.find(
- (el) => el.id === 'user-statistics'
- );
-
- // Open tab
- this.routeSub = this.route.params.subscribe((param) => {
- this.selectedIndex = param.tab || 0;
- });
-
- this.utilityService.addMeta(
- this.metaTags['title' + this.currentLocale],
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
-
- switch (this.localeId) {
- case 'fi': {
- this.setTitle('Tietosuoja - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle('Privacy - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle(
- 'Dataskydd och behandling av personuppgifter - Forskning.fi'
- );
- break;
- }
- }
- // Hide skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(false);
-
- this.title = this.getTitle();
-
- // Get consent status
- if (isPlatformBrowser(this.platformId)) {
- this.consentStatusSub =
- this.privacyService.currentConsentStatus.subscribe((status) => {
- this.consentStatus = localStorage.getItem('cookieConsent')
- ? localStorage.getItem('cookieConsent')
- : status;
- });
- }
- }
-
- changeConsent(status) {
- switch (status) {
- case 'declined': {
- this.decline();
- break;
- }
- default: {
- this.approve();
- }
- }
- this.privacyService.hideConsentBar(true);
- this.privacyService.changeConsentStatus(status);
- }
-
- // Add params. Enables linking to tab
- navigate(event) {
- this.router.navigate(['privacy', event.index]);
- }
-
- decline() {
- if (isPlatformBrowser(this.platformId)) {
- localStorage.setItem('cookieConsent', 'declined');
- const node = this.document.createElement('script');
- node.type = 'text/javascript';
- node.innerHTML = `var _paq = window._paq || [];
- _paq.push(['optUserOut']);
- `;
- this.document.getElementsByTagName('head')[0].appendChild(node);
- this.document.getElementById('twitter-cookie')?.remove();
- this.window.location.reload();
- }
- this.snackBar.open($localize`:@@cookiesDenied:Evästeet hylätty`);
- }
-
- approve() {
- if (isPlatformBrowser(this.platformId)) {
- localStorage.setItem('cookieConsent', 'approved');
- const node = this.document.createElement('script');
- node.id = 'matomo-consent';
- node.type = 'text/javascript';
- node.innerHTML = `var _paq = window._paq || [];
- _paq.push(['forgetUserOptOut']);
- `;
- this.document.getElementsByTagName('head')[0].appendChild(node);
- this.window.location.reload();
- }
- this.snackBar.open($localize`:@@cookiesApproved:Evästeet hyväksytty`);
- }
-
- // Not in use, will leave if needed in future
- setTwitterCookie() {
- const node = this.document.createElement('script');
- node.id = 'twitter-cookie';
- node.async = true;
- node.src = 'https://platform.twitter.com/widgets.js';
- node.charset = 'utf-8';
- this.document.getElementsByTagName('head')[0].appendChild(node);
- }
-
- setTitle(title: string) {
- this.utilityService.setTitle(title);
- }
-
- getTitle() {
- return this.utilityService.getTitle().split('-').shift().trim();
- }
-
- ngAfterViewInit() {
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.mainFocus.nativeElement.focus();
- }
- }
- );
- }
-
- ngOnDestroy() {
- // Reset skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(true);
- this.tabChangeService.targetFocus('');
- this.consentStatusSub?.unsubscribe();
- this.routeSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- }
-}
+ selector: 'app-privacy',
+ templateUrl: './privacy.component.html',
+ styleUrls: ['./privacy.component.scss'],
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ BreadcrumbComponent,
+ MatTabGroup,
+ MatTab,
+ NgIf,
+ MatButton,
+ SanitizeHtmlPipe,
+ ],
+})
+export class PrivacyComponent implements OnInit, AfterViewInit, OnDestroy {
+ focusSub: Subscription;
+ @ViewChild('mainFocus') mainFocus: ElementRef;
+ title: string;
+ locale: string;
+ matomoUrl: string;
+ consentStatus: string;
+ consentStatusSub: any;
+ routeSub: Subscription;
+ selectedIndex: any;
+ currentLocale: string;
+
+ private metaTags = MetaTags.privacy;
+ private commonTags = MetaTags.common;
+
+ privacyPolicyContent: any[];
+ cookiePolicyContent: any[];
+ userStatisticsContent: any[];
+
+ constructor(
+ @Inject(LOCALE_ID) protected localeId: string,
+ private tabChangeService: TabChangeService,
+ @Inject(DOCUMENT) private document: any,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private privacyService: PrivacyService,
+ private snackBar: MatSnackBar,
+ private route: ActivatedRoute,
+ private router: Router,
+ private utilityService: UtilityService,
+ @Inject(WINDOW) private window: Window,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.locale = localeId;
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ this.matomoUrl =
+ 'https://rihmatomo-analytics.csc.fi/index.php?module=CoreAdminHome&action=optOut&language=' +
+ this.locale +
+ '&backgroundColor=&fontColor=&fontSize=&fontFamily=Roboto, sans-serif';
+ }
+
+ ngOnInit(): void {
+ // Get page data. Data is passed with resolver in router
+ const pageData = this.route.snapshot.data.pages;
+ this.privacyPolicyContent = pageData.find(
+ (el) => el.id === 'privacy-statement'
+ );
+ this.cookiePolicyContent = pageData.find((el) => el.id === 'cookie-policy');
+
+ this.userStatisticsContent = pageData.find(
+ (el) => el.id === 'user-statistics'
+ );
+
+ // Open tab
+ this.routeSub = this.route.params.subscribe((param) => {
+ this.selectedIndex = param.tab || 0;
+ });
+
+ this.utilityService.addMeta(
+ this.metaTags['title' + this.currentLocale],
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle('Tietosuoja - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle('Privacy - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle(
+ 'Dataskydd och behandling av personuppgifter - Forskning.fi'
+ );
+ break;
+ }
+ }
+ // Hide skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(false);
+
+ this.title = this.getTitle();
+
+ // Get consent status
+ if (isPlatformBrowser(this.platformId)) {
+ this.consentStatusSub =
+ this.privacyService.currentConsentStatus.subscribe((status) => {
+ this.consentStatus = localStorage.getItem('cookieConsent')
+ ? localStorage.getItem('cookieConsent')
+ : status;
+ });
+ }
+ }
+
+ changeConsent(status) {
+ switch (status) {
+ case 'declined': {
+ this.decline();
+ break;
+ }
+ default: {
+ this.approve();
+ }
+ }
+ this.privacyService.hideConsentBar(true);
+ this.privacyService.changeConsentStatus(status);
+ }
+
+ // Add params. Enables linking to tab
+ navigate(event) {
+ this.router.navigate(['privacy', event.index]);
+ }
+
+ decline() {
+ if (isPlatformBrowser(this.platformId)) {
+ localStorage.setItem('cookieConsent', 'declined');
+ const node = this.document.createElement('script');
+ node.type = 'text/javascript';
+ node.innerHTML = `var _paq = window._paq || [];
+ _paq.push(['optUserOut']);
+ `;
+ this.document.getElementsByTagName('head')[0].appendChild(node);
+ this.document.getElementById('twitter-cookie')?.remove();
+ this.window.location.reload();
+ }
+ this.snackBar.open($localize`:@@cookiesDenied:Evästeet hylätty`);
+ }
+
+ approve() {
+ if (isPlatformBrowser(this.platformId)) {
+ localStorage.setItem('cookieConsent', 'approved');
+ const node = this.document.createElement('script');
+ node.id = 'matomo-consent';
+ node.type = 'text/javascript';
+ node.innerHTML = `var _paq = window._paq || [];
+ _paq.push(['forgetUserOptOut']);
+ `;
+ this.document.getElementsByTagName('head')[0].appendChild(node);
+ this.window.location.reload();
+ }
+ this.snackBar.open($localize`:@@cookiesApproved:Evästeet hyväksytty`);
+ }
+
+ // Not in use, will leave if needed in future
+ setTwitterCookie() {
+ const node = this.document.createElement('script');
+ node.id = 'twitter-cookie';
+ node.async = true;
+ node.src = 'https://platform.twitter.com/widgets.js';
+ node.charset = 'utf-8';
+ this.document.getElementsByTagName('head')[0].appendChild(node);
+ }
+
+ setTitle(title: string) {
+ this.utilityService.setTitle(title);
+ }
+
+ getTitle() {
+ return this.utilityService.getTitle().split('-').shift().trim();
+ }
+
+ ngAfterViewInit() {
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.mainFocus.nativeElement.focus();
+ }
+ }
+ );
+ }
+
+ ngOnDestroy() {
+ // Reset skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(true);
+ this.tabChangeService.targetFocus('');
+ this.consentStatusSub?.unsubscribe();
+ this.routeSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/result-tab/result-tab.component.scss b/src/app/portal/components/result-tab/result-tab.component.scss
index 9d24ab9e8..32db86eaa 100644
--- a/src/app/portal/components/result-tab/result-tab.component.scss
+++ b/src/app/portal/components/result-tab/result-tab.component.scss
@@ -29,7 +29,7 @@ app-result-tab {
.numeric-box {
font-size: 1.5em;
}
-
+ /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
.mat-tab-body-wrapper {
display: none;
}
diff --git a/src/app/portal/components/result-tab/result-tab.component.scss-theme.scss b/src/app/portal/components/result-tab/result-tab.component.scss-theme.scss
index adaf74da0..0eb0cc117 100644
--- a/src/app/portal/components/result-tab/result-tab.component.scss-theme.scss
+++ b/src/app/portal/components/result-tab/result-tab.component.scss-theme.scss
@@ -1,82 +1,82 @@
-@import '@angular/material/theming';
-
-@mixin app-result-tab-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-result-tab {
- a:hover {
- text-decoration: none;
- }
-
- .scroll {
- background: mat-contrast($primary, 800);
- }
-
- .tab-icon {
- // background-color: mat-color($primary);
- color: mat-color($primary);
- }
-
- .tab-icon:after {
- color: mat-color($primary);
- }
-
- .bundler.active {
- // background: mat-color($primary, A100);
- // border-bottom: 6px solid mat-color($primary);
- border-top: 1px solid mat-color($primary);
- border-right: 1px solid mat-color($primary);
- border-left: 1px solid mat-color($primary);
- box-shadow: 13px 0 22px -13px rgba(0, 0, 0, 0.2),
- -13px 0 22px -13px rgba(0, 0, 0, 0.2);
- }
-
- .bundler {
- background: mat-color($primary, 100);
- border-bottom: 1px solid mat-color($primary);
- }
-
- .bundler:not(.active):hover {
- background: mat-color($primary, 200) !important;
- }
-
- .bundler.disabled:hover {
- background: unset !important;
- }
-
- .numeric-box {
- color: mat-color($primary, 600);
- }
- .text-center {
- color: mat-color($primary, 800);
- }
-
- .nav-arrow {
- background: mat-color($primary);
- color: mat-contrast($primary, 500);
- }
-
- .item-wrapper.homepage {
- background-color: mat-contrast($primary, 500) !important;
- box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
- }
-
- // .arrow::after {
- // color: mat-contrast($primary, 500);
- // }
-
- @media (max-width: 575px) {
- .bundler.active {
- border-bottom: 0px;
- }
-
- .active .text-center {
- color: mat-color($primary);
- }
-
- .text-center {
- color: mat-color($primary);
- }
- }
- }
-}
+@use 'migration' as *;
+
+@mixin app-result-tab-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-result-tab {
+ a:hover {
+ text-decoration: none;
+ }
+
+ .scroll {
+ background: mat-contrast($primary, 800);
+ }
+
+ .tab-icon {
+ // background-color: mat-color($primary);
+ color: mat-color($primary);
+ }
+
+ .tab-icon:after {
+ color: mat-color($primary);
+ }
+
+ .bundler.active {
+ // background: mat-color($primary, A100);
+ // border-bottom: 6px solid mat-color($primary);
+ border-top: 1px solid mat-color($primary);
+ border-right: 1px solid mat-color($primary);
+ border-left: 1px solid mat-color($primary);
+ box-shadow: 13px 0 22px -13px rgba(0, 0, 0, 0.2),
+ -13px 0 22px -13px rgba(0, 0, 0, 0.2);
+ }
+
+ .bundler {
+ background: mat-color($primary, 100);
+ border-bottom: 1px solid mat-color($primary);
+ }
+
+ .bundler:not(.active):hover {
+ background: mat-color($primary, 200) !important;
+ }
+
+ .bundler.disabled:hover {
+ background: unset !important;
+ }
+
+ .numeric-box {
+ color: mat-color($primary, 600);
+ }
+ .text-center {
+ color: mat-color($primary, 800);
+ }
+
+ .nav-arrow {
+ background: mat-color($primary);
+ color: mat-contrast($primary, 500);
+ }
+
+ .item-wrapper.homepage {
+ background-color: mat-contrast($primary, 500) !important;
+ box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.3);
+ }
+
+ // .arrow::after {
+ // color: mat-contrast($primary, 500);
+ // }
+
+ @media (max-width: 575px) {
+ .bundler.active {
+ border-bottom: 0px;
+ }
+
+ .active .text-center {
+ color: mat-color($primary);
+ }
+
+ .text-center {
+ color: mat-color($primary);
+ }
+ }
+ }
+}
diff --git a/src/app/portal/components/result-tab/result-tab.component.ts b/src/app/portal/components/result-tab/result-tab.component.ts
index b24f52f17..93172d82f 100644
--- a/src/app/portal/components/result-tab/result-tab.component.ts
+++ b/src/app/portal/components/result-tab/result-tab.component.ts
@@ -24,15 +24,27 @@ import {
faAngleDown,
faAngleUp,
} from '@fortawesome/free-solid-svg-icons';
-import { isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser, NgIf, NgFor, NgStyle } from '@angular/common';
import { WINDOW } from 'src/app/shared/services/window.service';
-import { DataService } from 'src/app/portal/services/data.service';
-
-@Component({
- selector: ' app-result-tab',
- templateUrl: './result-tab.component.html',
- styleUrls: ['./result-tab.component.scss'],
- encapsulation: ViewEncapsulation.None,
+import { DataService } from 'src/app/portal/services/data.service';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { TabItemComponent } from './tab-item/tab-item.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+
+@Component({
+ selector: ' app-result-tab',
+ templateUrl: './result-tab.component.html',
+ styleUrls: ['./result-tab.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgIf,
+ NgFor,
+ NgStyle,
+ FontAwesomeModule,
+ TabItemComponent,
+ MatProgressSpinner,
+ ],
})
export class ResultTabComponent implements OnInit, OnDestroy, OnChanges {
@ViewChildren('scroll') ref: QueryList;
diff --git a/src/app/portal/components/result-tab/tab-item/tab-item.component.ts b/src/app/portal/components/result-tab/tab-item/tab-item.component.ts
index 8378adfc7..c141a6b36 100644
--- a/src/app/portal/components/result-tab/tab-item/tab-item.component.ts
+++ b/src/app/portal/components/result-tab/tab-item/tab-item.component.ts
@@ -1,76 +1,88 @@
-import {
- Component,
- OnInit,
- Input,
- ViewChild,
- QueryList,
- AfterViewInit,
- ElementRef,
- OnChanges,
- OnDestroy,
-} from '@angular/core';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { SettingsService } from 'src/app/portal/services/settings.service';
-import { DataService } from 'src/app/portal/services/data.service';
+import {
+ Component,
+ OnInit,
+ Input,
+ ViewChild,
+ QueryList,
+ AfterViewInit,
+ ElementRef,
+ OnChanges,
+ OnDestroy,
+} from '@angular/core';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { SettingsService } from 'src/app/portal/services/settings.service';
+import { DataService } from 'src/app/portal/services/data.service';
import { UtilityService } from 'src/app/shared/services/utility.service';
-
+import { CountUpModule } from 'ngx-countup';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { NgIf, AsyncPipe } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
@Component({
- selector: 'app-tab-item',
- templateUrl: './tab-item.component.html',
- styleUrls: ['./tab-item.component.scss'],
-})
-export class TabItemComponent
- implements OnInit, AfterViewInit, OnChanges, OnDestroy
-{
- @Input() tab: any;
- @Input() isHomepage = false;
- @Input() selectedTab: string;
- @Input() queryParams: any;
- @Input() counted: any;
- @Input() locale: string;
- @Input() tooltipClass: string;
- @Input() count = false;
- targetQueryParams: any;
-
- // CountUp animation options
- countOps = {
- duration: 0,
- separator: ' ',
- };
-
- @ViewChild('tabList') tabElem: ElementRef;
- searchTermSub: any;
-
- constructor(
- public searchService: SearchService,
- private dataService: DataService,
- private settingsService: SettingsService,
- public utilityService: UtilityService
- ) {}
-
- ngOnInit(): void {
- // Subscribe to search term, animate tab count if search term changes
- this.searchTermSub = this.searchService.currentInput.subscribe(() => {
- this.countOps.duration = 0.5;
- });
- }
-
- ngOnChanges(): void {
- // Set target to params
- this.targetQueryParams = {
- ...this.queryParams[this.tab.link],
- target: this.settingsService.target,
- size: this.searchService.pageSize,
- };
- }
-
- ngAfterViewInit(): void {
- if (this.tabElem) {
- this.dataService.resultTabList.push(this.tabElem);
- }
- }
-
- ngOnDestroy(): void {
- this.searchTermSub?.unsubscribe();
- }
-}
+ selector: 'app-tab-item',
+ templateUrl: './tab-item.component.html',
+ styleUrls: ['./tab-item.component.scss'],
+ standalone: true,
+ imports: [
+ RouterLink,
+ NgIf,
+ FontAwesomeModule,
+ CountUpModule,
+ AsyncPipe,
+ ],
+})
+export class TabItemComponent
+ implements OnInit, AfterViewInit, OnChanges, OnDestroy
+{
+ @Input() tab: any;
+ @Input() isHomepage = false;
+ @Input() selectedTab: string;
+ @Input() queryParams: any;
+ @Input() counted: any;
+ @Input() locale: string;
+ @Input() tooltipClass: string;
+ @Input() count = false;
+ targetQueryParams: any;
+
+ // CountUp animation options
+ countOps = {
+ duration: 0,
+ separator: ' ',
+ };
+
+ @ViewChild('tabList') tabElem: ElementRef;
+ searchTermSub: any;
+
+ constructor(
+ public searchService: SearchService,
+ private dataService: DataService,
+ private settingsService: SettingsService,
+ public utilityService: UtilityService
+ ) {}
+
+ ngOnInit(): void {
+ // Subscribe to search term, animate tab count if search term changes
+ this.searchTermSub = this.searchService.currentInput.subscribe(() => {
+ this.countOps.duration = 0.5;
+ });
+ }
+
+ ngOnChanges(): void {
+ // Set target to params
+ this.targetQueryParams = {
+ ...this.queryParams[this.tab.link],
+ target: this.settingsService.target,
+ size: this.searchService.pageSize,
+ };
+ }
+
+ ngAfterViewInit(): void {
+ if (this.tabElem) {
+ this.dataService.resultTabList.push(this.tabElem);
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.searchTermSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/results/active-filters/active-filters.component.ts b/src/app/portal/components/results/active-filters/active-filters.component.ts
index 62c4f272b..568885d1d 100644
--- a/src/app/portal/components/results/active-filters/active-filters.component.ts
+++ b/src/app/portal/components/results/active-filters/active-filters.component.ts
@@ -33,14 +33,17 @@ import { OrganizationFilterService } from '@portal/services/filters/organization
import { SettingsService } from '@portal/services/settings.service';
import { NewsFilterService } from '@portal/services/filters/news-filter.service';
import { SearchService } from '@portal/services/search.service';
-import { isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser, NgIf } from '@angular/common';
import { FundingCallFilterService } from '@portal/services/filters/funding-call-filter.service';
import { StaticDataService } from '@portal/services/static-data.service';
import { FilterConfigType } from 'src/types';
+import { ActiveFiltersListComponent } from '../../../../shared/components/active-filters-list/active-filters-list.component';
@Component({
- selector: 'app-active-filters',
- templateUrl: './active-filters.component.html',
+ selector: 'app-active-filters',
+ templateUrl: './active-filters.component.html',
+ standalone: true,
+ imports: [NgIf, ActiveFiltersListComponent],
})
export class ActiveFiltersComponent
implements OnInit, OnDestroy, AfterContentInit
diff --git a/src/app/portal/components/results/datasets/datasets.component-theme.scss b/src/app/portal/components/results/datasets/datasets.component-theme.scss
index 79f9d21e7..bc9ea49a7 100644
--- a/src/app/portal/components/results/datasets/datasets.component-theme.scss
+++ b/src/app/portal/components/results/datasets/datasets.component-theme.scss
@@ -1,18 +1,18 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-datasets-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-datasets {
- .version {
- border: 2px solid mat-color($primary);
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-datasets-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-datasets {
+ .version {
+ border: 2px solid mat-color($primary);
+ }
+ }
+}
diff --git a/src/app/portal/components/results/datasets/datasets.component.ts b/src/app/portal/components/results/datasets/datasets.component.ts
index 4c898ed5c..377609ede 100644
--- a/src/app/portal/components/results/datasets/datasets.component.ts
+++ b/src/app/portal/components/results/datasets/datasets.component.ts
@@ -1,153 +1,171 @@
-import { DOCUMENT } from '@angular/common';
-import {
- ChangeDetectorRef,
- Component,
- ElementRef,
- Inject,
- Input,
- OnInit,
- QueryList,
- TemplateRef,
- ViewChild,
- ViewChildren,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
-import { Search } from 'src/app/portal/models/search.model';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { SortService } from 'src/app/portal/services/sort.service';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { TableColumn, TableRow } from 'src/types';
-
-@Component({
- selector: 'app-datasets',
- templateUrl: './datasets.component.html',
- styleUrls: ['./datasets.component.scss'],
-})
-export class DatasetsComponent implements OnInit {
- @Input() resultData: Search;
- expandStatus: Array = [];
- sortColumn: string;
- sortDirection: boolean;
- @ViewChild('main') mainContent: ElementRef;
-
- faIcon = this.tabChangeService.tabData
- .filter((t) => t.data === 'datasets')
- .map((t) => t.icon)
- .pop();
- documentLang: any;
- input: string;
- inputSub: any;
- focusSub: any;
- marginTop = 0;
- heightSub: any;
-
- tableColumns: TableColumn[];
- tableRows: Record[];
-
- @ViewChildren('datasetNameColumn', { read: TemplateRef })
- datasetNameColumns: QueryList;
-
- @ViewChildren('datasetTagsColumn', { read: TemplateRef })
- datasetTagsColumns: QueryList;
-
- dataMapped: boolean;
- iconTitleDatasets = $localize`:@@iconDatasets: Tutkimusaineistojen tiedon ikoni`;
-
- constructor(
- private route: ActivatedRoute,
- private sortService: SortService,
- @Inject(DOCUMENT) private document: any,
- private tabChangeService: TabChangeService,
- private searchService: SearchService,
- private cdr: ChangeDetectorRef,
- public utilityService: UtilityService,
- private highlightPipe: HighlightSearch
- ) {
- this.documentLang = this.document.documentElement.lang;
- }
-
- ngOnInit() {
- // Check url for sorting, default to empty
- this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
- this.sortColumn = this.sortService.sortColumn;
- this.sortDirection = this.sortService.sortDirection;
- }
-
- ngAfterViewInit() {
- // Focus first element when clicked with skip-link
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main') {
- this.mainContent?.nativeElement.focus();
- }
- }
- );
-
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- this.mapData();
- this.cdr.detectChanges();
- });
- }
-
- mapData() {
- const nameColumnArray = this.datasetNameColumns.toArray();
- const tagColumnArray = this.datasetTagsColumns.toArray();
-
- // Map data to table
- // Use highlight pipe for higlighting search term
- this.tableColumns = [
- {
- key: 'name',
- label: $localize`:@@datasetName:Tutkimusaineiston nimi`,
- class: 'col-8 col-lg-5 col-xl-4',
- mobile: true,
- },
- {
- key: 'creators',
- label: $localize`:@@datasetCreators:Tutkimusaineiston tekijät / organisaatio`,
- class: 'col-lg-5 col-xl-3 d-none d-lg-block',
- mobile: false,
- },
- {
- key: 'year',
- label: $localize`:@@year:Vuosi`,
- class: 'col-lg-1',
- mobile: true,
- },
- {
- key: 'tags',
- class: 'col-lg-3 d-none d-xl-block',
- mobile: false,
- sortDisabled: true,
- overflowEnabled: true,
- },
- ];
-
- this.tableRows = this.resultData.datasets.map((dataset, index) => ({
- name: {
- template: nameColumnArray[index],
- link: `/results/dataset/${dataset.id}`,
- },
- creators: {
- label: this.highlightPipe.transform(dataset.creators, this.input),
- },
- year: {
- label: this.highlightPipe.transform(dataset.year, this.input),
- },
- tags: {
- template: tagColumnArray[index],
- },
- }));
-
- this.dataMapped = true;
- }
-
- ngOnDestroy() {
- this.tabChangeService.targetFocus('');
- this.inputSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- }
-}
+import { DOCUMENT, NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import {
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ Inject,
+ Input,
+ OnInit,
+ QueryList,
+ TemplateRef,
+ ViewChild,
+ ViewChildren,
+} from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+import { Search } from 'src/app/portal/models/search.model';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { SortService } from 'src/app/portal/services/sort.service';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { TableColumn, TableRow } from 'src/types';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+
+@Component({
+ selector: 'app-datasets',
+ templateUrl: './datasets.component.html',
+ styleUrls: ['./datasets.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ NgFor,
+ RouterLink,
+ FontAwesomeModule,
+ NgTemplateOutlet,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ HighlightSearchPipe,
+ ],
+})
+export class DatasetsComponent implements OnInit {
+ @Input() resultData: Search;
+ expandStatus: Array = [];
+ sortColumn: string;
+ sortDirection: boolean;
+ @ViewChild('main') mainContent: ElementRef;
+
+ faIcon: any = this.tabChangeService.tabData
+ .filter((t) => t.data === 'datasets')
+ .map((t) => t.icon)
+ .pop();
+ documentLang: any;
+ input: string;
+ inputSub: any;
+ focusSub: any;
+ marginTop = 0;
+ heightSub: any;
+
+ tableColumns: TableColumn[];
+ tableRows: Record[];
+
+ @ViewChildren('datasetNameColumn', { read: TemplateRef })
+ datasetNameColumns: QueryList;
+
+ @ViewChildren('datasetTagsColumn', { read: TemplateRef })
+ datasetTagsColumns: QueryList;
+
+ dataMapped: boolean;
+ iconTitleDatasets = $localize`:@@iconDatasets: Tutkimusaineistojen tiedon ikoni`;
+
+ constructor(
+ private route: ActivatedRoute,
+ private sortService: SortService,
+ @Inject(DOCUMENT) private document: any,
+ private tabChangeService: TabChangeService,
+ private searchService: SearchService,
+ private cdr: ChangeDetectorRef,
+ public utilityService: UtilityService,
+ private highlightPipe: HighlightSearchPipe
+ ) {
+ this.documentLang = this.document.documentElement.lang;
+ }
+
+ ngOnInit() {
+ // Check url for sorting, default to empty
+ this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
+ this.sortColumn = this.sortService.sortColumn;
+ this.sortDirection = this.sortService.sortDirection;
+ }
+
+ ngAfterViewInit() {
+ // Focus first element when clicked with skip-link
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main') {
+ this.mainContent?.nativeElement.focus();
+ }
+ }
+ );
+
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ this.mapData();
+ this.cdr.detectChanges();
+ });
+ }
+
+ mapData() {
+ const nameColumnArray = this.datasetNameColumns.toArray();
+ const tagColumnArray = this.datasetTagsColumns.toArray();
+
+ // Map data to table
+ // Use highlight pipe for higlighting search term
+ this.tableColumns = [
+ {
+ key: 'name',
+ label: $localize`:@@datasetName:Tutkimusaineiston nimi`,
+ class: 'col-8 col-lg-5 col-xl-4',
+ mobile: true,
+ },
+ {
+ key: 'creators',
+ label: $localize`:@@datasetCreators:Tutkimusaineiston tekijät / organisaatio`,
+ class: 'col-lg-5 col-xl-3 d-none d-lg-block',
+ mobile: false,
+ },
+ {
+ key: 'year',
+ label: $localize`:@@year:Vuosi`,
+ class: 'col-lg-1',
+ mobile: true,
+ },
+ {
+ key: 'tags',
+ class: 'col-lg-3 d-none d-xl-block',
+ mobile: false,
+ sortDisabled: true,
+ overflowEnabled: true,
+ },
+ ];
+
+ this.tableRows = this.resultData.datasets.map((dataset, index) => ({
+ name: {
+ template: nameColumnArray[index],
+ link: `/results/dataset/${dataset.id}`,
+ },
+ creators: {
+ label: this.highlightPipe.transform(dataset.creators, this.input),
+ },
+ year: {
+ label: this.highlightPipe.transform(dataset.year, this.input),
+ },
+ tags: {
+ template: tagColumnArray[index],
+ },
+ }));
+
+ this.dataMapped = true;
+ }
+
+ ngOnDestroy() {
+ this.tabChangeService.targetFocus('');
+ this.inputSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/results/filters/filters-shared.scss b/src/app/portal/components/results/filters/filters-shared.scss
index f4df48921..e36219532 100644
--- a/src/app/portal/components/results/filters/filters-shared.scss
+++ b/src/app/portal/components/results/filters/filters-shared.scss
@@ -1,400 +1,401 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@mixin app-filters-shared {
- app-filters,
- .filters-dialog {
- .col {
- position: unset;
- }
-
- .mobile {
- max-width: 95%;
- }
-
- .filter-sidebar {
- display: block;
- padding: 1rem;
- padding-top: 0;
- }
-
- .filter-sidebar h3 {
- padding: 1rem 0 !important;
- }
-
- // Material expansion panel & accordion
- .mat-expansion-panel {
- margin: 0 0 1rem;
- position: unset;
- }
-
- .mat-expansion-panel-body {
- padding: 0;
- }
-
- .cdk-focused .mat-expansion-panel-header-title {
- text-decoration: underline;
- }
-
- .mat-expansion-panel.mat-expanded {
- overflow: inherit !important;
- }
-
- mat-expansion-panel.mat-expansion-panel.mat-expanded.mat-expansion-panel-spacing {
- margin-top: 0;
- }
-
- .mat-radio-button {
- display: block;
- }
-
- .mat-expansion-panel.parent:not([class*='mat-elevation-z']) {
- border-radius: 4px;
- }
-
- .mat-expansion-panel:not([class*='mat-elevation-z']) {
- box-shadow: none;
- }
-
- .mat-accordion .mat-expansion-panel:not(.mat-expanded),
- .mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
- border-radius: 4px;
- }
-
- // Header
- .mat-expansion-panel-header {
- position: unset;
- }
-
- .mat-expansion-panel-header:not([aria-disabled='true']) {
- cursor: pointer;
- padding: 0 5px;
- padding-right: 1.1rem;
- }
-
- .mat-expansion-indicator::after {
- margin-top: -0.5rem;
- padding: 5px;
- }
-
- .mat-expansion-panel-header-title {
- display: block;
- }
-
- .mat-expansion-panel-header-title .row .col {
- padding: 0;
- }
-
- .mat-expansion-panel-header-title .row .col.amount,
- span.amount {
- font-weight: normal;
- font-size: 1rem;
- }
-
- .mat-expanded mat-expansion-panel-header.mat-expanded {
- z-index: 39;
- }
-
- .mat-list-base .mat-list-item,
- .mat-list-base .mat-list-option {
- height: auto;
- display: flex;
- vertical-align: middle;
- }
-
- // Preserve space for parent header
- .subFields .mat-expanded mat-expansion-panel-header.mat-expanded {
- z-index: 38;
- }
-
- // Hide chevron for parents
- mat-expansion-panel-header.has-children span.mat-expansion-indicator {
- display: none;
- }
-
- mat-expansion-panel-header.has-children {
- padding-right: 5px !important;
- }
-
- mat-expansion-panel-header.has-children .mat-expansion-panel-header-title {
- margin-right: 0 !important;
- }
-
- .mat-expansion-panel-header-title {
- padding: 1rem 11px;
- font-weight: bolder;
- }
-
- .panel-title,
- .mat-expansion-panel-header-title {
- font-size: 1.1rem;
- }
-
- button.show-options {
- font-size: 1rem;
- background: none;
- padding: 0;
- box-shadow: none;
- border: 0;
- }
-
- // Year filter select
- mat-form-field,
- .mat-form-field-infix {
- max-width: 100%;
- }
-
- mat-form-field .mat-form-field-wrapper {
- width: 100%;
- }
-
- // Search
- input.filter-search {
- margin: 0 1rem;
- }
-
- .empty-filter-search {
- margin: 0.5rem 1rem 1rem;
- }
-
- // Typography & icons
- .filter-icon {
- padding-right: 1rem;
- }
-
- h3.header {
- padding: 0.3rem 0;
- }
-
- h3 {
- margin: 0;
- font-size: 1.3rem;
- }
-
- .info-icon {
- font-size: 1.1rem;
- }
-
- // Select all
- .row.select-all {
- cursor: pointer;
- padding: 0 1rem;
- }
-
- span.label {
- font-size: 1.1rem;
- text-overflow: ellipsis;
- overflow: hidden;
- display: block;
- }
-
- label.mat-checkbox-layout {
- margin-bottom: 0;
- }
-
- .count {
- text-align: right;
- padding: 0;
- }
-
- span.amount {
- font-size: 14px;
- white-space: nowrap;
- }
-
- .show-more {
- padding: 0.5rem 1rem;
- font-weight: 500;
- }
-
- // Segments
- .mat-list-base {
- padding: 0;
- }
-
- .mat-list-base .mat-list-item .mat-list-text,
- .mat-list-base .mat-list-option .mat-list-text {
- flex-direction: row !important;
- display: block !important;
- }
-
- .mat-list-base .mat-list-option .mat-list-item-content {
- width: 100%;
- padding: 12px 1rem;
- }
-
- .mat-list-base
- .mat-list-option.mat-list-option
- .mat-list-item-content
- .mat-list-text {
- padding-right: 0;
- padding-left: 0;
- overflow: visible;
- }
-
- mat-selection-list.limit {
- overflow: hidden;
- }
-
- ul {
- list-style: none;
- padding: 0px;
- }
-
- .scrollable {
- margin-top: -22px;
- max-height: 344px;
- overflow-y: auto;
- }
-
- .separator {
- height: 1px;
- }
-
- // Single slider filters
- .row.single {
- border-radius: 4px;
- padding: 1rem;
- span.label {
- cursor: pointer;
- }
- }
-
- .row.slider {
- padding-top: 0.5rem;
- }
-
- .single-checkbox {
- font-weight: bold;
- font-size: 15px;
- padding-bottom: 1rem;
- }
-
- .mat-checkbox-inner-container {
- margin-right: 15px;
- }
-
- .single-checkbox .mat-checkbox {
- display: flex;
- align-items: center;
- height: 100%;
- }
-
- .single-checkbox label.mat-checkbox-layout {
- margin: 0;
- }
-
- .mat-checkbox-layout {
- white-space: pre-wrap;
- }
-
- .single .col {
- padding: 0;
- }
-
- // Hide fields
- .hidden {
- display: none;
- }
-
- .navbar-toggler {
- padding: 8px 0;
- }
-
- // Filter button
- .navbar-toggler ul {
- list-style: none;
- }
-
- .navbar-toggler li {
- display: inline-flex;
- }
-
- .navbar-toggler:focus {
- outline: -webkit-focus-ring-color auto 1px;
- }
-
- // Responsive
- @media (max-width: 991px) {
- .filter-wrapper {
- max-height: unset;
- }
-
- .modal-body {
- // "Sticky header"
- max-height: 80vh;
- overflow-y: auto;
- }
-
- .mat-list-base .mat-list-item,
- .mat-list-base .mat-list-option {
- min-height: 48px;
- }
-
- span.label,
- .mat-expansion-panel-header-title,
- .single-checkbox {
- font-size: 18px !important;
- }
-
- .mat-pseudo-checkbox,
- .mat-checkbox-inner-container {
- width: 22px;
- height: 22px;
- }
-
- .mat-pseudo-checkbox-checked::after {
- top: 5.6px;
- left: 3px;
- width: 10px;
- height: 3px;
- }
-
- mat-expansion-panel.mat-expansion-panel {
- max-width: auto;
- }
-
- .mat-expanded mat-expansion-panel-header.mat-expanded {
- top: 0;
- }
-
- h3 {
- font-size: 1.4rem;
- padding: 9px 0px;
- }
-
- h3.open::before {
- font-family: 'FontAwesome';
- content: '\f077';
- font-size: 0.8em;
- padding-right: 10px;
- }
- }
-
- // @media (min-width: 1199px) {
- // .mobile {
- // display: none;
- // }
- // }
-
- @media (max-width: 400px) {
- .secondary-button fa-icon.before {
- padding: 0 8px 0 14px !important;
- }
-
- .ttv-button {
- padding: 0 12px;
- }
- }
-
- @media print {
- .mobile {
- display: none;
- }
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@mixin app-filters-shared {
+ app-filters,
+ .filters-dialog {
+ .col {
+ position: unset;
+ }
+
+ .mobile {
+ max-width: 95%;
+ }
+
+ .filter-sidebar {
+ display: block;
+ padding: 1rem;
+ padding-top: 0;
+ }
+
+ .filter-sidebar h3 {
+ padding: 1rem 0 !important;
+ }
+
+ // Material expansion panel & accordion
+ .mat-expansion-panel {
+ margin: 0 0 1rem;
+ position: unset;
+ }
+
+ .mat-expansion-panel-body {
+ padding: 0;
+ }
+
+ .cdk-focused .mat-expansion-panel-header-title {
+ text-decoration: underline;
+ }
+
+ .mat-expansion-panel.mat-expanded {
+ overflow: inherit !important;
+ }
+
+ mat-expansion-panel.mat-expansion-panel.mat-expanded.mat-expansion-panel-spacing {
+ margin-top: 0;
+ }
+
+ .mat-mdc-radio-button {
+ display: block;
+ }
+
+ .mat-expansion-panel.parent:not([class*='mat-elevation-z']) {
+ border-radius: 4px;
+ }
+
+ .mat-expansion-panel:not([class*='mat-elevation-z']) {
+ box-shadow: none;
+ }
+
+ .mat-accordion .mat-expansion-panel:not(.mat-expanded),
+ .mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
+ border-radius: 4px;
+ }
+
+ // Header
+ .mat-expansion-panel-header {
+ position: unset;
+ }
+
+ .mat-expansion-panel-header:not([aria-disabled='true']) {
+ cursor: pointer;
+ padding: 0 5px;
+ padding-right: 1.1rem;
+ }
+
+ .mat-expansion-indicator::after {
+ margin-top: -0.5rem;
+ padding: 5px;
+ }
+
+ .mat-expansion-panel-header-title {
+ display: block;
+ }
+
+ .mat-expansion-panel-header-title .row .col {
+ padding: 0;
+ }
+
+ .mat-expansion-panel-header-title .row .col.amount,
+ span.amount {
+ font-weight: normal;
+ font-size: 1rem;
+ }
+
+ .mat-expanded mat-expansion-panel-header.mat-expanded {
+ z-index: 39;
+ }
+
+ .mat-mdc-list-base .mat-mdc-list-item,
+ .mat-list-base .mat-list-option {
+ height: auto;
+ display: flex;
+ vertical-align: middle;
+ }
+
+ // Preserve space for parent header
+ .subFields .mat-expanded mat-expansion-panel-header.mat-expanded {
+ z-index: 38;
+ }
+
+ // Hide chevron for parents
+ mat-expansion-panel-header.has-children span.mat-expansion-indicator {
+ display: none;
+ }
+
+ mat-expansion-panel-header.has-children {
+ padding-right: 5px !important;
+ }
+
+ mat-expansion-panel-header.has-children .mat-expansion-panel-header-title {
+ margin-right: 0 !important;
+ }
+
+ .mat-expansion-panel-header-title {
+ padding: 1rem 11px;
+ font-weight: bolder;
+ }
+
+ .panel-title,
+ .mat-expansion-panel-header-title {
+ font-size: 1.1rem;
+ }
+
+ button.show-options {
+ font-size: 1rem;
+ background: none;
+ padding: 0;
+ box-shadow: none;
+ border: 0;
+ }
+
+ // Year filter select
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field,
+ .mat-form-field-infix {
+ max-width: 100%;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field .mat-form-field-wrapper {
+ width: 100%;
+ }
+
+ // Search
+ input.filter-search {
+ margin: 0 1rem;
+ }
+
+ .empty-filter-search {
+ margin: 0.5rem 1rem 1rem;
+ }
+
+ // Typography & icons
+ .filter-icon {
+ padding-right: 1rem;
+ }
+
+ h3.header {
+ padding: 0.3rem 0;
+ }
+
+ h3 {
+ margin: 0;
+ font-size: 1.3rem;
+ }
+
+ .info-icon {
+ font-size: 1.1rem;
+ }
+
+ // Select all
+ .row.select-all {
+ cursor: pointer;
+ padding: 0 1rem;
+ }
+
+ span.label {
+ font-size: 1.1rem;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ display: block;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ label.mat-checkbox-layout {
+ margin-bottom: 0;
+ }
+
+ .count {
+ text-align: right;
+ padding: 0;
+ }
+
+ span.amount {
+ font-size: 14px;
+ white-space: nowrap;
+ }
+
+ .show-more {
+ padding: 0.5rem 1rem;
+ font-weight: 500;
+ }
+
+ // Segments
+ .mat-mdc-list-base {
+ padding: 0;
+ }
+
+ .mat-mdc-list-base .mat-mdc-list-item .mat-list-text,
+ .mat-list-base .mat-list-option .mat-list-text {
+ flex-direction: row !important;
+ display: block !important;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
+ .mat-mdc-list-base .mat-list-option .mat-list-item-content {
+ width: 100%;
+ padding: 12px 1rem;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of list that may no longer apply for the MDC version.*/
+ .mat-mdc-list-base
+ .mat-list-option.mat-list-option
+ .mat-list-item-content
+ .mat-list-text {
+ padding-right: 0;
+ padding-left: 0;
+ overflow: visible;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ mat-selection-list.limit {
+ overflow: hidden;
+ }
+
+ ul {
+ list-style: none;
+ padding: 0px;
+ }
+
+ .scrollable {
+ margin-top: -22px;
+ max-height: 344px;
+ overflow-y: auto;
+ }
+
+ .separator {
+ height: 1px;
+ }
+
+ // Single slider filters
+ .row.single {
+ border-radius: 4px;
+ padding: 1rem;
+ span.label {
+ cursor: pointer;
+ }
+ }
+
+ .row.slider {
+ padding-top: 0.5rem;
+ }
+
+ .single-checkbox {
+ font-weight: bold;
+ font-size: 15px;
+ padding-bottom: 1rem;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-checkbox-inner-container {
+ margin-right: 15px;
+ }
+
+ .single-checkbox .mat-mdc-checkbox {
+ display: flex;
+ align-items: center;
+ height: 100%;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .single-checkbox label.mat-checkbox-layout {
+ margin: 0;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-checkbox-layout {
+ white-space: pre-wrap;
+ }
+
+ .single .col {
+ padding: 0;
+ }
+
+ // Hide fields
+ .hidden {
+ display: none;
+ }
+
+ .navbar-toggler {
+ padding: 8px 0;
+ }
+
+ // Filter button
+ .navbar-toggler ul {
+ list-style: none;
+ }
+
+ .navbar-toggler li {
+ display: inline-flex;
+ }
+
+ .navbar-toggler:focus {
+ outline: -webkit-focus-ring-color auto 1px;
+ }
+
+ // Responsive
+ @media (max-width: 991px) {
+ .filter-wrapper {
+ max-height: unset;
+ }
+
+ .modal-body {
+ // "Sticky header"
+ max-height: 80vh;
+ overflow-y: auto;
+ }
+
+ .mat-mdc-list-base .mat-mdc-list-item,
+ .mat-list-base .mat-list-option {
+ min-height: 48px;
+ }
+
+ span.label,
+ .mat-expansion-panel-header-title,
+ .single-checkbox {
+ font-size: 18px !important;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-pseudo-checkbox,
+ .mat-checkbox-inner-container {
+ width: 22px;
+ height: 22px;
+ }
+
+ .mat-pseudo-checkbox-checked::after {
+ top: 5.6px;
+ left: 3px;
+ width: 10px;
+ height: 3px;
+ }
+
+ mat-expansion-panel.mat-expansion-panel {
+ max-width: auto;
+ }
+
+ .mat-expanded mat-expansion-panel-header.mat-expanded {
+ top: 0;
+ }
+
+ h3 {
+ font-size: 1.4rem;
+ padding: 9px 0px;
+ }
+
+ h3.open::before {
+ font-family: 'FontAwesome';
+ content: '\f077';
+ font-size: 0.8em;
+ padding-right: 10px;
+ }
+ }
+
+ // @media (min-width: 1199px) {
+ // .mobile {
+ // display: none;
+ // }
+ // }
+
+ @media (max-width: 400px) {
+ .secondary-button fa-icon.before {
+ padding: 0 8px 0 14px !important;
+ }
+
+ .ttv-button {
+ padding: 0 12px;
+ }
+ }
+
+ @media print {
+ .mobile {
+ display: none;
+ }
+ }
+ }
+}
diff --git a/src/app/portal/components/results/filters/filters.component.html b/src/app/portal/components/results/filters/filters.component.html
index bf5cc2b58..c3b95bb6e 100644
--- a/src/app/portal/components/results/filters/filters.component.html
+++ b/src/app/portal/components/results/filters/filters.component.html
@@ -261,8 +261,9 @@
Uusimmat
+
+
@@ -309,7 +311,7 @@
[min]="getActiveDate('start')"
#endDate
/>
-
-
Haku alkaa aikaisintaan
[max]="getActiveDate('end')"
#startDate
/>
-
>x
-
+
[min]="getActiveDate('start')"
#endDate
/>
-
>x
-
"
>
-
activeFilters[filter.field].indexOf(item.key) > -1
"
>
-
+
+
{{
item.label ? item.label : item.key
}}
-
+
@@ -374,7 +377,8 @@
-
+
+
"
[id]="filter.field + field.key | replaceSpace"
>
-
+
+
{{ field.label }}
diff --git a/src/app/portal/components/results/filters/filters.component.scss b/src/app/portal/components/results/filters/filters.component.scss
index 7e3e88940..d855bef41 100644
--- a/src/app/portal/components/results/filters/filters.component.scss
+++ b/src/app/portal/components/results/filters/filters.component.scss
@@ -1,33 +1,35 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import './filters-shared.scss';
-
-app-funding-call-category-filters .mat-standard-chip {
- border-radius: 10px;
-}
-
-app-funding-call-category-filters .mat-chip-list-stacked .mat-chip-list-wrapper .mat-standard-chip {
- width: auto !important;
-}
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@import './filters-shared.scss';
+
+app-funding-call-category-filters .mat-mdc-standard-chip {
+ border-radius: 10px;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+app-funding-call-category-filters .mat-chip-list-stacked .mat-chip-list-wrapper .mat-mdc-standard-chip {
+ width: auto !important;
+}
+
app-funding-call-category-filters {
- .mat-chip-list-wrapper {
- flex-direction: row !important;
- margin-top: 10px;
- margin-bottom: 15px;
- }
- .mat-chip {
- cursor: pointer;
- border-radius: 4px;
- }
-}
-
-.about-link {
- margin-left: 20px;
- margin-right: 15px;
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+ .mat-chip-list-wrapper {
+ flex-direction: row !important;
+ margin-top: 10px;
+ margin-bottom: 15px;
+ }
+ .mat-mdc-chip {
+ cursor: pointer;
+ border-radius: 4px;
+ }
+}
+
+.about-link {
+ margin-left: 20px;
+ margin-right: 15px;
+}
diff --git a/src/app/portal/components/results/filters/filters.component.spec.ts b/src/app/portal/components/results/filters/filters.component.spec.ts
index c8ebe9e17..953d65bff 100644
--- a/src/app/portal/components/results/filters/filters.component.spec.ts
+++ b/src/app/portal/components/results/filters/filters.component.spec.ts
@@ -1,129 +1,128 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FiltersComponent } from './filters.component';
-import { Router, ActivatedRoute } from '@angular/router';
-import { WINDOW_PROVIDERS } from '@shared/services/window.service';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
-import AggResponse from 'src/testdata/aggregationresponse.json';
-import AggPublicationResponse from 'src/testdata/aggpublicationresponse.json';
-import { of } from 'rxjs/internal/observable/of';
-import { PublicationFilterService } from '@portal/services/filters/publication-filter.service';
-import { MatDialogModule } from '@angular/material/dialog';
-
-describe('FiltersComponent', () => {
- let component: FiltersComponent;
- let fixture: ComponentFixture;
-
- const routerSpy = {
- navigate: jasmine.createSpy('navigate'),
- };
-
- const mockActivatedRoute = {
- queryParams: of({ param: 'testParam' }),
- params: of({ input: 'test input' }),
- };
-
- beforeEach((() => {
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FiltersComponent } from './filters.component';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WINDOW_PROVIDERS } from '@shared/services/window.service';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import AggResponse from 'src/testdata/aggregationresponse.json';
+import AggPublicationResponse from 'src/testdata/aggpublicationresponse.json';
+import { of } from 'rxjs/internal/observable/of';
+import { PublicationFilterService } from '@portal/services/filters/publication-filter.service';
+import { MatDialogModule } from '@angular/material/dialog';
+
+describe('FiltersComponent', () => {
+ let component: FiltersComponent;
+ let fixture: ComponentFixture;
+
+ const routerSpy = {
+ navigate: jasmine.createSpy('navigate'),
+ };
+
+ const mockActivatedRoute = {
+ queryParams: of({ param: 'testParam' }),
+ params: of({ input: 'test input' }),
+ };
+
+ beforeEach((() => {
TestBed.configureTestingModule({
- declarations: [FiltersComponent],
- providers: [
+ providers: [
{ provide: Router, useValue: routerSpy },
{ provide: ActivatedRoute, useValue: mockActivatedRoute },
WINDOW_PROVIDERS,
PublicationFilterService,
- ],
- imports: [MatDialogModule],
- schemas: [NO_ERRORS_SCHEMA],
- }).compileComponents();
-
- fixture = TestBed.createComponent(FiltersComponent);
- component = fixture.componentInstance;
- component.responseData = AggResponse;
- component.activeFilters = {};
- component.width = 1000;
- component.mobile = false;
- component.showButton = false;
- }));
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-
- it('should add parameters to preselected filter category', () => {
- component.activeFilters = Object.assign({}, { year: ['2020', '2019'] });
-
- component.selectionChange('year', '2021');
-
- expect(routerSpy.navigate).toHaveBeenCalledWith([], {
- queryParams: {
- year: ['2020', '2019', '2021'],
- sort: undefined,
- page: 1,
- },
- queryParamsHandling: 'merge',
- });
- });
-
- it('should change year range accordingly', () => {
- // Set from year to 2020 and expect query parameters to be in asceding order from chosen value to latest
- const res = Object.assign({}, { value: 2020 });
-
- component.range(res, 'from');
-
- expect(routerSpy.navigate).toHaveBeenCalledWith([], {
- queryParams: {
- year: ['2021', '2020'],
- sort: undefined,
- page: 1,
- },
- queryParamsHandling: 'merge',
- });
- });
-
- it('should select all from parent', () => {
- component.responseData.aggregations.year.subData =
- AggResponse.aggregations.year.buckets;
- const subFilter = component.responseData.aggregations.year;
-
- component.selectAll('year', subFilter);
-
- // Note: Year params are not in order because of preselection test
- expect(routerSpy.navigate).toHaveBeenCalledWith([], {
- queryParams: {
- year: ['2021', '2020', '2019'],
- sort: undefined,
- page: 1,
- },
- queryParamsHandling: 'merge',
- });
- });
-
- it('should filter with term', () => {
- const event = Object.assign({}, { target: { value: 'test' } });
- // Buckets need to be moved up one level until shapeData method is called
- component.responseData.aggregations.testField.buckets =
- AggResponse.aggregations.testField.testFields.buckets;
- component.filterInput(event, 'testField');
-
- expect(component.showMoreCount.testField).toBeDefined();
- });
-
- it('should render corresponding filter header', () => {
- component.responseData = AggPublicationResponse;
- component.currentFilter = [{ field: 'testField', label: 'Test header' }];
- component.ngOnChanges();
-
- fixture.detectChanges();
-
- const span = fixture.nativeElement.querySelector('span');
- expect(span.textContent).toBe('Test header');
- });
-});
+ ],
+ imports: [MatDialogModule, FiltersComponent],
+ schemas: [NO_ERRORS_SCHEMA],
+}).compileComponents();
+
+ fixture = TestBed.createComponent(FiltersComponent);
+ component = fixture.componentInstance;
+ component.responseData = AggResponse;
+ component.activeFilters = {};
+ component.width = 1000;
+ component.mobile = false;
+ component.showButton = false;
+ }));
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should add parameters to preselected filter category', () => {
+ component.activeFilters = Object.assign({}, { year: ['2020', '2019'] });
+
+ component.selectionChange('year', '2021');
+
+ expect(routerSpy.navigate).toHaveBeenCalledWith([], {
+ queryParams: {
+ year: ['2020', '2019', '2021'],
+ sort: undefined,
+ page: 1,
+ },
+ queryParamsHandling: 'merge',
+ });
+ });
+
+ it('should change year range accordingly', () => {
+ // Set from year to 2020 and expect query parameters to be in asceding order from chosen value to latest
+ const res = Object.assign({}, { value: 2020 });
+
+ component.range(res, 'from');
+
+ expect(routerSpy.navigate).toHaveBeenCalledWith([], {
+ queryParams: {
+ year: ['2021', '2020'],
+ sort: undefined,
+ page: 1,
+ },
+ queryParamsHandling: 'merge',
+ });
+ });
+
+ it('should select all from parent', () => {
+ component.responseData.aggregations.year.subData =
+ AggResponse.aggregations.year.buckets;
+ const subFilter = component.responseData.aggregations.year;
+
+ component.selectAll('year', subFilter);
+
+ // Note: Year params are not in order because of preselection test
+ expect(routerSpy.navigate).toHaveBeenCalledWith([], {
+ queryParams: {
+ year: ['2021', '2020', '2019'],
+ sort: undefined,
+ page: 1,
+ },
+ queryParamsHandling: 'merge',
+ });
+ });
+
+ it('should filter with term', () => {
+ const event = Object.assign({}, { target: { value: 'test' } });
+ // Buckets need to be moved up one level until shapeData method is called
+ component.responseData.aggregations.testField.buckets =
+ AggResponse.aggregations.testField.testFields.buckets;
+ component.filterInput(event, 'testField');
+
+ expect(component.showMoreCount.testField).toBeDefined();
+ });
+
+ it('should render corresponding filter header', () => {
+ component.responseData = AggPublicationResponse;
+ component.currentFilter = [{ field: 'testField', label: 'Test header' }];
+ component.ngOnChanges();
+
+ fixture.detectChanges();
+
+ const span = fixture.nativeElement.querySelector('span');
+ expect(span.textContent).toBe('Test header');
+ });
+});
diff --git a/src/app/portal/components/results/filters/filters.component.ts b/src/app/portal/components/results/filters/filters.component.ts
index c430b799c..5883ce9da 100644
--- a/src/app/portal/components/results/filters/filters.component.ts
+++ b/src/app/portal/components/results/filters/filters.component.ts
@@ -20,8 +20,8 @@ import {
ViewEncapsulation,
ViewChild,
} from '@angular/core';
-import { MatSelectionList } from '@angular/material/list';
-import { Router, ActivatedRoute } from '@angular/router';
+import { MatSelectionList, MatListOption } from '@angular/material/list';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
import { SortService } from '../../../services/sort.service';
import { Subscription } from 'rxjs';
import { WINDOW } from 'src/app/shared/services/window.service';
@@ -35,17 +35,70 @@ import { InfrastructureFilterService } from 'src/app/portal/services/filters/inf
import { OrganizationFilterService } from 'src/app/portal/services/filters/organization-filter.service';
import { NewsFilterService } from 'src/app/portal/services/filters/news-filter.service';
import { faSlidersH, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
-import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { isPlatformBrowser, DOCUMENT, NgTemplateOutlet, NgIf, NgFor, NgClass } from '@angular/common';
import { DataService } from 'src/app/portal/services/data.service';
import { FundingCallFilterService } from '@portal/services/filters/funding-call-filter.service';
import { AppSettingsService } from '@shared/services/app-settings.service';
import { FilterConfigType } from 'src/types';
+import { ConvertToArrayPipe } from '../../../pipes/convert-to-array.pipe';
+import { ReplaceSpacePipe } from '../../../pipes/replace-space';
+import { FilterItemPipe } from '../../../pipes/filter-item.pipe';
+import { ThousandSeparatorPipe } from '../../../../shared/pipes/thousand-separator.pipe';
+import { DialogComponent } from '../../../../shared/components/dialog/dialog.component';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDatepicker } from '@angular/material/datepicker';
+import { MatInput } from '@angular/material/input';
+import { MatOption } from '@angular/material/core';
+import { MatSelect } from '@angular/material/select';
+import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
@Component({
- selector: 'app-filters',
- templateUrl: './filters.component.html',
- styleUrls: ['./filters.component.scss'],
- encapsulation: ViewEncapsulation.None,
+ selector: 'app-filters',
+ templateUrl: './filters.component.html',
+ styleUrls: ['./filters.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ SecondaryButtonComponent,
+ NgTemplateOutlet,
+ NgIf,
+ MatProgressSpinner,
+ FontAwesomeModule,
+ NgFor,
+ MatExpansionPanel,
+ MatExpansionPanelHeader,
+ NgClass,
+ MatExpansionPanelTitle,
+ TooltipModule,
+ MatSlideToggle,
+ MatFormField,
+ MatLabel,
+ MatSelect,
+ MatOption,
+ MatInput,
+ MatDatepickerInput,
+ MatDatepickerToggle,
+ MatSuffix,
+ MatIcon,
+ MatDatepickerToggleIcon,
+ MatDatepicker,
+ MatSelectionList,
+ MatListOption,
+ MatButton,
+ RouterLink,
+ DialogComponent,
+ ThousandSeparatorPipe,
+ FilterItemPipe,
+ ReplaceSpacePipe,
+ ConvertToArrayPipe,
+ ],
})
export class FiltersComponent implements OnInit, OnDestroy, OnChanges {
@Input() responseData: any;
@@ -79,7 +132,7 @@ export class FiltersComponent implements OnInit, OnDestroy, OnChanges {
visualFilterSub: Subscription;
subFilters: MatSelectionList[];
totalCount = 0;
- faSlidersH = faSlidersH;
+ faSlidersH: any = faSlidersH;
faPlus = faPlus;
faMinus = faMinus;
panelHeight = 'auto';
diff --git a/src/app/portal/components/results/filters/filters.theme-shared.scss b/src/app/portal/components/results/filters/filters.theme-shared.scss
index 5c655c77c..b048cc41d 100644
--- a/src/app/portal/components/results/filters/filters.theme-shared.scss
+++ b/src/app/portal/components/results/filters/filters.theme-shared.scss
@@ -1,144 +1,158 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-filters-theme-shared($theme) {
- $primary: map-get($theme, primary);
-
-
- app-funding-call-category-filters {
- .mat-chip {
- border: 2px solid mat-color($primary, 500);
- color: mat-color($primary, 500);
-
- &.mat-standard-chip {
- background-color: mat-contrast($primary, 500);
- background: mat-contrast($primary, 500);
- &:hover::after, &:focus::after {
- opacity: 0;
- }
- &:hover {
- background: mat-color($primary, 100) !important;
- }
- &.mat-chip-selected {
- background-color: mat-color($primary, 500) !important;
- }
- }
- }
- }
-
- app-filters,
- .filters-dialog {
- .filter-sidebar {
- background: mat-color($primary, 100);
- }
-
- .filter-icon {
- color: mat-color($primary);
- }
-
- .error-color {
- color: red !important;
- }
-
- h3 {
- color: mat-color($primary);
- }
-
- .filter-sidebar h3 {
- background: mat-color($primary, 100);
- }
-
- span.mat-checkbox-label,
- span.label {
- color: mat-contrast($primary, 200);
- }
-
- .mat-checkbox .mat-checkbox-frame {
- background: mat-contrast($primary, 500);
- }
-
- span.amount {
- color: mat-contrast($primary, 400);
- }
-
- // .mat-expansion-panel:not([class*=mat-elevation-z]):not(:last-child) {
- // border-bottom: 1px solid mat-color($primary, 400);
- // }
-
- // .mat-expansion-panel {
- // background: unset!important;
- // }
-
- mat-expansion-panel.mat-expansion-panel.mat-expanded {
- background: mat-color($primary, 50);
- }
-
- .mat-expansion-panel-header,
- .row.single {
- background: mat-color($primary, 50);
- }
-
- .mat-expansion-indicator:after {
- color: mat-color($primary) !important;
- }
-
- button.show-options {
- color: mat-color($primary);
- }
-
- .navbar-toggler {
- background: mat-color($primary, 50);
- border: 1px solid mat-color($primary);
- }
-
- // Select all
- .row.select-all:hover {
- background: rgba(0, 0, 0, 0.04);
- }
-
- // Single checkbox items
- .mat-checkbox:hover {
- background: none !important;
- }
-
- .separator {
- border: 0.5px solid mat-color($primary);
- }
-
- .show-more {
- color: mat-color($primary);
- }
-
- .modal-close {
- background: mat-color($primary, 500);
- color: mat-contrast($primary, 500);
- }
-
- .shared {
- tr:nth-child(odd) {
- background-color: mat-color($primary, 50);
- }
-
- th,
- td {
- color: mat-color($primary);
- }
-
- td {
- p:first-child {
- color: mat-contrast($primary, 50);
- }
- }
-
- a {
- color: mat-color($primary);
- }
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-filters-theme-shared($theme) {
+ $primary: map-get($theme, primary);
+
+
+ app-funding-call-category-filters {
+ margin-bottom: 10px;
+ .mat-mdc-chip {
+ border: 2px solid mat-color($primary, 500);
+ color: mat-color($primary, 500);
+
+ &.cdk-focused .mat-mdc-chip-focus-overlay {
+ //background-color: transparent;
+ &:hover{
+ background-color: mat-contrast($primary, 500);
+ }
+ }
+
+ &.mat-mdc-standard-chip {
+ &:not(.mdc-evolution-chip--disabled) {
+ background: transparent;
+ }
+ &.mdc-evolution-chip--selected {
+ background: mat-color($primary, 500) !important;
+ }
+
+ &:hover::after, &:focus::after {
+ opacity: 0;
+ }
+ &:hover {
+ background: mat-color($primary, 100);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+ &.mat-chip-selected {
+ background-color: mat-color($primary, 500) !important;
+ }
+ }
+ }
+ }
+
+ app-filters,
+ .filters-dialog {
+ .filter-sidebar {
+ background: mat-color($primary, 100);
+ }
+
+ .filter-icon {
+ color: mat-color($primary);
+ }
+
+ .error-color {
+ color: red !important;
+ }
+
+ h3 {
+ color: mat-color($primary);
+ }
+
+ .filter-sidebar h3 {
+ background: mat-color($primary, 100);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ span.mat-checkbox-label,
+ span.label {
+ color: mat-contrast($primary, 200);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-mdc-checkbox .mat-checkbox-frame {
+ background: mat-contrast($primary, 500);
+ }
+
+ span.amount {
+ color: mat-contrast($primary, 400);
+ }
+
+ // .mat-expansion-panel:not([class*=mat-elevation-z]):not(:last-child) {
+ // border-bottom: 1px solid mat-color($primary, 400);
+ // }
+
+ // .mat-expansion-panel {
+ // background: unset!important;
+ // }
+
+ mat-expansion-panel.mat-expansion-panel.mat-expanded {
+ background: mat-color($primary, 50);
+ }
+
+ .mat-expansion-panel-header,
+ .row.single {
+ background: mat-color($primary, 50);
+ }
+
+ .mat-expansion-indicator:after {
+ color: mat-color($primary) !important;
+ }
+
+ button.show-options {
+ color: mat-color($primary);
+ }
+
+ .navbar-toggler {
+ background: mat-color($primary, 50);
+ border: 1px solid mat-color($primary);
+ }
+
+ // Select all
+ .row.select-all:hover {
+ background: rgba(0, 0, 0, 0.04);
+ }
+
+ // Single checkbox items
+ .mat-mdc-checkbox:hover {
+ background: none !important;
+ }
+
+ .separator {
+ border: 0.5px solid mat-color($primary);
+ }
+
+ .show-more {
+ color: mat-color($primary);
+ }
+
+ .modal-close {
+ background: mat-color($primary, 500);
+ color: mat-contrast($primary, 500);
+ }
+
+ .shared {
+ tr:nth-child(odd) {
+ background-color: mat-color($primary, 50);
+ }
+
+ th,
+ td {
+ color: mat-color($primary);
+ }
+
+ td {
+ p:first-child {
+ color: mat-contrast($primary, 50);
+ }
+ }
+
+ a {
+ color: mat-color($primary);
+ }
+ }
+ }
+}
diff --git a/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.html b/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.html
index cc26e10b4..9769c17e7 100644
--- a/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.html
+++ b/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.html
@@ -1,18 +1,18 @@
-
-
-
- {{chip.key}}
-
-
-
-
-
-
+
+
+
+ {{chip.key}}
+
+
+
+
+
+
diff --git a/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.ts b/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.ts
index 28101841f..1755949af 100644
--- a/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.ts
+++ b/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.ts
@@ -1,151 +1,159 @@
-import {
- Component,
- OnInit,
- Output,
- EventEmitter,
- Input,
- SimpleChanges,
- OnDestroy,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import {
+ Component,
+ OnInit,
+ Output,
+ EventEmitter,
+ Input,
+ SimpleChanges,
+ OnDestroy,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
-
+import { NgFor } from '@angular/common';
+import { MatChipListbox, MatChipOption } from '@angular/material/chips';
+
@Component({
- selector: 'app-funding-call-category-filters',
- templateUrl: './funding-call-category-filters.component.html',
- styleUrls: ['./funding-call-category-filters.component.scss'],
-})
-export class FundingCallCategoryFiltersComponent implements OnInit, OnDestroy {
- constructor(private route: ActivatedRoute) {}
-
- majorFieldsOfScienceAurora = [];
- topLevelFilterSelections = new Set();
- bottomLevelFilterOptions = [];
- filterValuesToEmit = [];
- queryParamSub: Subscription;
- _responseData: any;
- queryParams: any;
- topLevelCategoriesInitialized = false;
-
- @Input() responseData: any;
-
- @Input() resetFundingCallCategoryFilters;
-
- @Output() filterChangeOutput = new EventEmitter();
-
- ngOnInit(): void {
- this.queryParamSub = this.route.queryParams.subscribe((params) => {
- this.queryParams = params;
-
- this.bottomLevelFilterOptions =
- this.responseData?.aggregations?.field?.buckets;
-
- if (!this.topLevelCategoriesInitialized) {
- this.initTopLevelCategories();
- }
- this.updateViewChipSelections(params);
- });
- }
-
- ngOnChanges(changes: SimpleChanges) {
- if (changes.resetFundingCallCategoryFilters) {
- this.resetAllFilters();
- }
- }
-
- clickChip(id: number) {
- this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map((u) =>
- u.id === id ? { id: u.id, key: u.key, checked: !u.checked } : u
- );
-
- this.topLevelFilterSelections.clear();
-
- this.majorFieldsOfScienceAurora.forEach((item) => {
- item.checked
- ? this.topLevelFilterSelections.add(item.id.toString())
- : null;
- });
-
- // Add all possible categories to selections
- this.bottomLevelFilterOptions =
- this.responseData?.aggregations?.field?.buckets;
- this.bottomLevelFilterOptions = this.bottomLevelFilterOptions.filter(
- (item) => {
- return this.topLevelFilterSelections.has(
- item.parentFieldId.buckets[0].key
- );
- }
- );
- this.emitBottomLevelFilters();
- }
-
- private initTopLevelCategories() {
- this.responseData?.aggregations?.mainCategory?.mainCategoryId?.buckets.forEach(
- (itm) => {
- this.majorFieldsOfScienceAurora.push({
- id: itm.key,
- key: itm.mainCategoryName.buckets[0].key,
- checked: false,
- });
- }
- );
- this.majorFieldsOfScienceAurora.sort((a, b) =>
- a.key > b.key ? 1 : b.key > a.key ? -1 : 0
- );
- this.topLevelCategoriesInitialized = true;
- }
-
- private updateViewChipSelections(params) {
- if (this.bottomLevelFilterOptions) {
- Array.isArray(params?.field)
- ? (this.bottomLevelFilterOptions =
- this.bottomLevelFilterOptions.filter((item) => {
- return params.field.some((itm) => {
- return itm === item.key;
- });
- }))
- : (this.bottomLevelFilterOptions =
- this.bottomLevelFilterOptions.filter((item) => {
- return params?.field === item.key;
- }));
-
- this.resetAllFilters();
- this.bottomLevelFilterOptions.forEach((bottomItem) => {
- const key = bottomItem?.parentFieldId.buckets[0].key.toString();
- if (key) {
- this.topLevelFilterSelections.add(key);
- }
- // This updates visible chips
- this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map(
- (u) =>
- u.id.toString() === key.toString()
- ? { id: u.id, key: u.key, checked: true }
- : u
- );
- });
- }
- }
-
- private emitBottomLevelFilters() {
- // Only emit when clicked a button
- this.filterValuesToEmit = [];
-
- this.bottomLevelFilterOptions.forEach((item) => {
- this.filterValuesToEmit.push(item.key);
- });
- this.filterValuesToEmit.length > 0
- ? this.filterChangeOutput.emit({ keys: this.filterValuesToEmit })
- : this.filterChangeOutput.emit({ keys: '' });
- }
-
- private resetAllFilters() {
- this.topLevelFilterSelections.clear();
- this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map(
- ({ id, key }) => ({ id, key, checked: false })
- );
- }
-
- ngOnDestroy(): void {
- this.queryParamSub?.unsubscribe();
- }
-}
+ selector: 'app-funding-call-category-filters',
+ templateUrl: './funding-call-category-filters.component.html',
+ styleUrls: ['./funding-call-category-filters.component.scss'],
+ standalone: true,
+ imports: [
+ MatChipListbox,
+ NgFor,
+ MatChipOption,
+ ],
+})
+export class FundingCallCategoryFiltersComponent implements OnInit, OnDestroy {
+ constructor(private route: ActivatedRoute) {}
+
+ majorFieldsOfScienceAurora = [];
+ topLevelFilterSelections = new Set();
+ bottomLevelFilterOptions = [];
+ filterValuesToEmit = [];
+ queryParamSub: Subscription;
+ _responseData: any;
+ queryParams: any;
+ topLevelCategoriesInitialized = false;
+
+ @Input() responseData: any;
+
+ @Input() resetFundingCallCategoryFilters;
+
+ @Output() filterChangeOutput = new EventEmitter();
+
+ ngOnInit(): void {
+ this.queryParamSub = this.route.queryParams.subscribe((params) => {
+ this.queryParams = params;
+
+ this.bottomLevelFilterOptions =
+ this.responseData?.aggregations?.field?.buckets;
+
+ if (!this.topLevelCategoriesInitialized) {
+ this.initTopLevelCategories();
+ }
+ this.updateViewChipSelections(params);
+ });
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes.resetFundingCallCategoryFilters) {
+ this.resetAllFilters();
+ }
+ }
+
+ clickChip(id: number) {
+ this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map((u) =>
+ u.id === id ? { id: u.id, key: u.key, checked: !u.checked } : u
+ );
+
+ this.topLevelFilterSelections.clear();
+
+ this.majorFieldsOfScienceAurora.forEach((item) => {
+ item.checked
+ ? this.topLevelFilterSelections.add(item.id.toString())
+ : null;
+ });
+
+ // Add all possible categories to selections
+ this.bottomLevelFilterOptions =
+ this.responseData?.aggregations?.field?.buckets;
+ this.bottomLevelFilterOptions = this.bottomLevelFilterOptions.filter(
+ (item) => {
+ return this.topLevelFilterSelections.has(
+ item.parentFieldId.buckets[0].key
+ );
+ }
+ );
+ this.emitBottomLevelFilters();
+ }
+
+ private initTopLevelCategories() {
+ this.responseData?.aggregations?.mainCategory?.mainCategoryId?.buckets.forEach(
+ (itm) => {
+ this.majorFieldsOfScienceAurora.push({
+ id: itm.key,
+ key: itm.mainCategoryName.buckets[0].key,
+ checked: false,
+ });
+ }
+ );
+ this.majorFieldsOfScienceAurora.sort((a, b) =>
+ a.key > b.key ? 1 : b.key > a.key ? -1 : 0
+ );
+ this.topLevelCategoriesInitialized = true;
+ }
+
+ private updateViewChipSelections(params) {
+ if (this.bottomLevelFilterOptions) {
+ Array.isArray(params?.field)
+ ? (this.bottomLevelFilterOptions =
+ this.bottomLevelFilterOptions.filter((item) => {
+ return params.field.some((itm) => {
+ return itm === item.key;
+ });
+ }))
+ : (this.bottomLevelFilterOptions =
+ this.bottomLevelFilterOptions.filter((item) => {
+ return params?.field === item.key;
+ }));
+
+ this.resetAllFilters();
+ this.bottomLevelFilterOptions.forEach((bottomItem) => {
+ const key = bottomItem?.parentFieldId.buckets[0].key.toString();
+ if (key) {
+ this.topLevelFilterSelections.add(key);
+ }
+ // This updates visible chips
+ this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map(
+ (u) =>
+ u.id.toString() === key.toString()
+ ? { id: u.id, key: u.key, checked: true }
+ : u
+ );
+ });
+ }
+ }
+
+ private emitBottomLevelFilters() {
+ // Only emit when clicked a button
+ this.filterValuesToEmit = [];
+
+ this.bottomLevelFilterOptions.forEach((item) => {
+ this.filterValuesToEmit.push(item.key);
+ });
+ this.filterValuesToEmit.length > 0
+ ? this.filterChangeOutput.emit({ keys: this.filterValuesToEmit })
+ : this.filterChangeOutput.emit({ keys: '' });
+ }
+
+ private resetAllFilters() {
+ this.topLevelFilterSelections.clear();
+ this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map(
+ ({ id, key }) => ({ id, key, checked: false })
+ );
+ }
+
+ ngOnDestroy(): void {
+ this.queryParamSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/results/funding-call-results/funding-call-results.component.scss-theme.scss b/src/app/portal/components/results/funding-call-results/funding-call-results.component.scss-theme.scss
index 1bd6334de..46e01ff79 100644
--- a/src/app/portal/components/results/funding-call-results/funding-call-results.component.scss-theme.scss
+++ b/src/app/portal/components/results/funding-call-results/funding-call-results.component.scss-theme.scss
@@ -1,12 +1,12 @@
-@import '@angular/material/theming';
-
-@mixin app-funding-call-results-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-funding-call-results {
- .tags .category {
- color: mat-color($primary);
- border: 2px solid mat-color($primary);
- }
- }
-}
\ No newline at end of file
+@use 'migration' as *;
+
+@mixin app-funding-call-results-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-funding-call-results {
+ .tags .category {
+ color: mat-color($primary);
+ border: 2px solid mat-color($primary);
+ }
+ }
+}
diff --git a/src/app/portal/components/results/funding-call-results/funding-call-results.component.ts b/src/app/portal/components/results/funding-call-results/funding-call-results.component.ts
index 5da51fead..0643285a3 100644
--- a/src/app/portal/components/results/funding-call-results/funding-call-results.component.ts
+++ b/src/app/portal/components/results/funding-call-results/funding-call-results.component.ts
@@ -15,18 +15,31 @@ import {
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Search } from '@portal/models/search.model';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
import { SearchService } from '@portal/services/search.service';
import { SortService } from '@portal/services/sort.service';
import { TabChangeService } from '@portal/services/tab-change.service';
import { UtilityService } from '@shared/services/utility.service';
import { Subscription } from 'rxjs';
import { TableColumn, TableRow } from 'src/types';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf } from '@angular/common';
@Component({
- selector: 'app-funding-call-results',
- templateUrl: './funding-call-results.component.html',
- styleUrls: ['./funding-call-results.component.scss'],
+ selector: 'app-funding-call-results',
+ templateUrl: './funding-call-results.component.html',
+ styleUrls: ['./funding-call-results.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ ],
})
export class FundingCallResultsComponent
implements OnInit, OnDestroy, AfterViewInit
@@ -38,7 +51,7 @@ export class FundingCallResultsComponent
expandStatus: Array = [];
@ViewChild('main') mainContent: ElementRef;
- faIcon = this.tabChangeService.tabData
+ faIcon: any = this.tabChangeService.tabData
.filter((t) => t.data === 'fundingCalls')
.map((t) => t.icon)
.pop();
@@ -71,7 +84,7 @@ export class FundingCallResultsComponent
private searchService: SearchService,
private cdr: ChangeDetectorRef,
public utilityService: UtilityService,
- private highlightPipe: HighlightSearch
+ private highlightPipe: HighlightSearchPipe
) {
this.currentLocale =
this.localeId.charAt(0).toUpperCase() + this.localeId.slice(1);
diff --git a/src/app/portal/components/results/fundings/fundings.component.scss-theme.scss b/src/app/portal/components/results/fundings/fundings.component.scss-theme.scss
index 7772746c5..e1852c225 100644
--- a/src/app/portal/components/results/fundings/fundings.component.scss-theme.scss
+++ b/src/app/portal/components/results/fundings/fundings.component.scss-theme.scss
@@ -1,8 +1,8 @@
-@import '@angular/material/theming';
-
-@mixin app-fundings-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-fundings {
- }
-}
+@use 'migration' as *;
+
+@mixin app-fundings-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-fundings {
+ }
+}
diff --git a/src/app/portal/components/results/fundings/fundings.component.ts b/src/app/portal/components/results/fundings/fundings.component.ts
index ce18785a9..e9fc2d4cc 100644
--- a/src/app/portal/components/results/fundings/fundings.component.ts
+++ b/src/app/portal/components/results/fundings/fundings.component.ts
@@ -22,12 +22,25 @@ import { TabChangeService } from 'src/app/portal/services/tab-change.service';
import { Search } from 'src/app/portal/models/search.model';
import { UtilityService } from 'src/app/shared/services/utility.service';
import { TableColumn, TableRow } from 'src/types';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf } from '@angular/common';
@Component({
- selector: 'app-fundings',
- templateUrl: './fundings.component.html',
- styleUrls: ['./fundings.component.scss'],
+ selector: 'app-fundings',
+ templateUrl: './fundings.component.html',
+ styleUrls: ['./fundings.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ ],
})
export class FundingsComponent implements OnInit, OnDestroy, AfterViewInit {
@Input() resultData: Search;
@@ -35,7 +48,7 @@ export class FundingsComponent implements OnInit, OnDestroy, AfterViewInit {
expandStatus: Array = [];
sortColumn: string;
sortDirection: boolean;
- faIcon = this.tabChangeService.tabData
+ faIcon: any = this.tabChangeService.tabData
.filter((t) => t.data === 'fundings')
.map((t) => t.icon)
.pop();
@@ -56,7 +69,7 @@ export class FundingsComponent implements OnInit, OnDestroy, AfterViewInit {
private searchService: SearchService,
private cdr: ChangeDetectorRef,
public utilityService: UtilityService,
- private highlightPipe: HighlightSearch
+ private highlightPipe: HighlightSearchPipe
) {}
ngOnInit() {
diff --git a/src/app/portal/components/results/infrastructures/infrastructures.component.scss-theme.scss b/src/app/portal/components/results/infrastructures/infrastructures.component.scss-theme.scss
index 1c8fb9e67..21a3f89d2 100644
--- a/src/app/portal/components/results/infrastructures/infrastructures.component.scss-theme.scss
+++ b/src/app/portal/components/results/infrastructures/infrastructures.component.scss-theme.scss
@@ -1,15 +1,15 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-infrastructures-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-infrastructures {
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-infrastructures-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-infrastructures {
+ }
+}
diff --git a/src/app/portal/components/results/infrastructures/infrastructures.component.ts b/src/app/portal/components/results/infrastructures/infrastructures.component.ts
index 09fba99f3..11cf3f0a9 100644
--- a/src/app/portal/components/results/infrastructures/infrastructures.component.ts
+++ b/src/app/portal/components/results/infrastructures/infrastructures.component.ts
@@ -1,153 +1,175 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- Input,
- OnInit,
- OnDestroy,
- ChangeDetectorRef,
- ViewChild,
- ElementRef,
- AfterViewInit,
- TemplateRef,
- ViewChildren,
- QueryList,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { SortService } from 'src/app/portal/services/sort.service';
-import { Search } from 'src/app/portal/models/search.model';
-import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { TableColumn, TableRow } from 'src/types';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
-
-@Component({
- selector: 'app-infrastructures',
- templateUrl: './infrastructures.component.html',
- styleUrls: ['./infrastructures.component.scss'],
-})
-export class InfrastructuresComponent
- implements OnInit, OnDestroy, AfterViewInit
-{
- @Input() resultData: Search;
- @ViewChild('main') mainContent: ElementRef;
- expandStatus: Array = [];
- sortColumn: string;
- sortDirection: boolean;
- faIcon = this.tabChangeService.tabData
- .filter((t) => t.data === 'infrastructures')
- .map((t) => t.icon)
- .pop();
- inputSub: any;
- input: string;
- focusSub: any;
- faCheckCircle = faCheckCircle;
-
- tableColumns: TableColumn[];
- tableRows: Record[];
-
- @ViewChildren('infrastructureNameColumns', { read: TemplateRef })
- infrastructureNameColumns: QueryList;
-
- dataMapped: boolean;
- iconTitleInfrastructures = $localize`:@@iconInfrastructures: Infrastruktuurien tiedon ikoni`;
-
- constructor(
- private route: ActivatedRoute,
- private tabChangeService: TabChangeService,
- private searchService: SearchService,
- private sortService: SortService,
- private cdr: ChangeDetectorRef,
- public utilityService: UtilityService,
- private highlightPipe: HighlightSearch
- ) {}
-
- ngOnInit() {
- this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
- this.sortColumn = this.sortService.sortColumn;
- this.sortDirection = this.sortService.sortDirection;
- }
-
- ngAfterViewInit() {
- // Focus first element when clicked with skip-link
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main') {
- this.mainContent?.nativeElement.focus();
- }
- }
- );
-
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- this.mapData();
- this.cdr.detectChanges();
- });
- }
-
- mapData() {
- // Get cell data from template
- const nameColumnArray = this.infrastructureNameColumns.toArray();
-
- // Map data to table
- // Use highlight pipe for higlighting search term
- this.tableColumns = [
- {
- key: 'acronym',
- label: $localize`:@@infraAcronym:Lyhenne`,
- tooltip: $localize`:@@acronymTooltip:Tutkimusinfrastruktuurin lyhenne. Infrastruktuureille on tyypillistä, että ne tunnetaan lyhenteellään.`,
- class: 'col-3 col-xl-2 d-none d-lg-block',
- mobile: false,
- },
- {
- key: 'name',
- label: $localize`:@@infraName:Nimi`,
- class: 'col-lg-4 col-xl-4',
- mobile: true,
- },
- {
- key: 'organization',
- label: $localize`:@@infraOrganization:Organisaatio`,
- tooltip: $localize`:@@infraOrganizationTooltip:Tutkimusinfrastruktuurin vastuuorganisaatio. Etenkin suurilla infrastruktuureilla voi olla useita palveluita, joista vastaa joku muu organisaatio. Muut organisaatiot näkee infrastruktuurin tietosivulta.`,
- class: 'col-lg-4 col-xl-4',
- mobile: true,
- },
- ];
- this.tableRows = this.resultData.infrastructures.map(
- (infrastructure, index) => ({
- acronym: {
- label: this.highlightPipe.transform(
- infrastructure.acronym,
- this.input
- ),
- },
- name: {
- label: this.highlightPipe.transform(infrastructure.name, this.input),
- template: nameColumnArray[index],
- link: `/results/infrastructure/${infrastructure.id}`,
- },
- organization: {
- label: this.highlightPipe.transform(
- infrastructure.responsibleOrganization,
- this.input
- ),
- },
- })
- );
-
- this.dataMapped = true;
- }
-
- ngOnDestroy() {
- this.inputSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- this.tabChangeService.targetFocus('');
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ Input,
+ OnInit,
+ OnDestroy,
+ ChangeDetectorRef,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ TemplateRef,
+ ViewChildren,
+ QueryList,
+} from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { SortService } from 'src/app/portal/services/sort.service';
+import { Search } from 'src/app/portal/models/search.model';
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { TableColumn, TableRow } from 'src/types';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+import { HandleInfrastructureLinkPipe } from '../../../pipes/handle-infrastructure-link.pipe';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf, NgFor } from '@angular/common';
+
+@Component({
+ selector: 'app-infrastructures',
+ templateUrl: './infrastructures.component.html',
+ styleUrls: ['./infrastructures.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ NgFor,
+ RouterLink,
+ TooltipModule,
+ FontAwesomeModule,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ HighlightSearchPipe,
+ HandleInfrastructureLinkPipe,
+ ],
+})
+export class InfrastructuresComponent
+ implements OnInit, OnDestroy, AfterViewInit
+{
+ @Input() resultData: Search;
+ @ViewChild('main') mainContent: ElementRef;
+ expandStatus: Array = [];
+ sortColumn: string;
+ sortDirection: boolean;
+ faIcon: any = this.tabChangeService.tabData
+ .filter((t) => t.data === 'infrastructures')
+ .map((t) => t.icon)
+ .pop();
+ inputSub: any;
+ input: string;
+ focusSub: any;
+ faCheckCircle = faCheckCircle;
+
+ tableColumns: TableColumn[];
+ tableRows: Record[];
+
+ @ViewChildren('infrastructureNameColumns', { read: TemplateRef })
+ infrastructureNameColumns: QueryList;
+
+ dataMapped: boolean;
+ iconTitleInfrastructures = $localize`:@@iconInfrastructures: Infrastruktuurien tiedon ikoni`;
+
+ constructor(
+ private route: ActivatedRoute,
+ private tabChangeService: TabChangeService,
+ private searchService: SearchService,
+ private sortService: SortService,
+ private cdr: ChangeDetectorRef,
+ public utilityService: UtilityService,
+ private highlightPipe: HighlightSearchPipe
+ ) {}
+
+ ngOnInit() {
+ this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
+ this.sortColumn = this.sortService.sortColumn;
+ this.sortDirection = this.sortService.sortDirection;
+ }
+
+ ngAfterViewInit() {
+ // Focus first element when clicked with skip-link
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main') {
+ this.mainContent?.nativeElement.focus();
+ }
+ }
+ );
+
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ this.mapData();
+ this.cdr.detectChanges();
+ });
+ }
+
+ mapData() {
+ // Get cell data from template
+ const nameColumnArray = this.infrastructureNameColumns.toArray();
+
+ // Map data to table
+ // Use highlight pipe for higlighting search term
+ this.tableColumns = [
+ {
+ key: 'acronym',
+ label: $localize`:@@infraAcronym:Lyhenne`,
+ tooltip: $localize`:@@acronymTooltip:Tutkimusinfrastruktuurin lyhenne. Infrastruktuureille on tyypillistä, että ne tunnetaan lyhenteellään.`,
+ class: 'col-3 col-xl-2 d-none d-lg-block',
+ mobile: false,
+ },
+ {
+ key: 'name',
+ label: $localize`:@@infraName:Nimi`,
+ class: 'col-lg-4 col-xl-4',
+ mobile: true,
+ },
+ {
+ key: 'organization',
+ label: $localize`:@@infraOrganization:Organisaatio`,
+ tooltip: $localize`:@@infraOrganizationTooltip:Tutkimusinfrastruktuurin vastuuorganisaatio. Etenkin suurilla infrastruktuureilla voi olla useita palveluita, joista vastaa joku muu organisaatio. Muut organisaatiot näkee infrastruktuurin tietosivulta.`,
+ class: 'col-lg-4 col-xl-4',
+ mobile: true,
+ },
+ ];
+ this.tableRows = this.resultData.infrastructures.map(
+ (infrastructure, index) => ({
+ acronym: {
+ label: this.highlightPipe.transform(
+ infrastructure.acronym,
+ this.input
+ ),
+ },
+ name: {
+ label: this.highlightPipe.transform(infrastructure.name, this.input),
+ template: nameColumnArray[index],
+ link: `/results/infrastructure/${infrastructure.id}`,
+ },
+ organization: {
+ label: this.highlightPipe.transform(
+ infrastructure.responsibleOrganization,
+ this.input
+ ),
+ },
+ })
+ );
+
+ this.dataMapped = true;
+ }
+
+ ngOnDestroy() {
+ this.inputSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ this.tabChangeService.targetFocus('');
+ }
+}
diff --git a/src/app/portal/components/results/no-results/no-results.component.ts b/src/app/portal/components/results/no-results/no-results.component.ts
index bf73d65b8..382fd384b 100644
--- a/src/app/portal/components/results/no-results/no-results.component.ts
+++ b/src/app/portal/components/results/no-results/no-results.component.ts
@@ -1,13 +1,16 @@
import { Component, Input, OnInit } from '@angular/core';
-
+import { RouterLink } from '@angular/router';
+
@Component({
- selector: 'app-no-results',
- templateUrl: './no-results.component.html',
-})
-export class NoResultsComponent implements OnInit {
- @Input() heading: string;
-
- constructor() {}
-
- ngOnInit(): void {}
-}
+ selector: 'app-no-results',
+ templateUrl: './no-results.component.html',
+ standalone: true,
+ imports: [RouterLink],
+})
+export class NoResultsComponent implements OnInit {
+ @Input() heading: string;
+
+ constructor() {}
+
+ ngOnInit(): void {}
+}
diff --git a/src/app/portal/components/results/organizations/organizations.component.scss-theme.scss b/src/app/portal/components/results/organizations/organizations.component.scss-theme.scss
index 2dd34ccd0..7281e7517 100644
--- a/src/app/portal/components/results/organizations/organizations.component.scss-theme.scss
+++ b/src/app/portal/components/results/organizations/organizations.component.scss-theme.scss
@@ -1,8 +1,8 @@
-@import '@angular/material/theming';
-
-@mixin app-organizations-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-organizations {
- }
-}
+@use 'migration' as *;
+
+@mixin app-organizations-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-organizations {
+ }
+}
diff --git a/src/app/portal/components/results/organizations/organizations.component.ts b/src/app/portal/components/results/organizations/organizations.component.ts
index 271275043..52744ad20 100644
--- a/src/app/portal/components/results/organizations/organizations.component.ts
+++ b/src/app/portal/components/results/organizations/organizations.component.ts
@@ -1,126 +1,139 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- Input,
- OnInit,
- OnDestroy,
- ViewChild,
- ElementRef,
- AfterViewInit,
- ChangeDetectorRef,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { SortService } from 'src/app/portal/services/sort.service';
-import { Search } from 'src/app/portal/models/search.model';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
-import { TableColumn, TableRow } from 'src/types';
-
-@Component({
- selector: 'app-organizations',
- templateUrl: './organizations.component.html',
- styleUrls: ['./organizations.component.scss'],
-})
-export class OrganizationsComponent
- implements OnInit, OnDestroy, AfterViewInit
-{
- _resd: Search;
- get resultData(): Search {
- return this._resd;
- }
-
- @Input() set resultData(resD: Search) {
- this._resd = resD;
- }
- @ViewChild('main') mainContent: ElementRef;
- expandStatus: Array = [];
- sortColumn: string;
- sortDirection: boolean;
- faIcon = this.tabChangeService.tabData
- .filter((t) => t.data === 'organizations')
- .map((t) => t.icon)
- .pop();
- inputSub: any;
- input: string;
- focusSub: any;
- tableColumns: TableColumn[];
- tableRows: Record[];
- iconTitleOrganizations = $localize`:@@iconOrganizations: Organisaatioiden tiedon ikoni`;
-
- constructor(
- private route: ActivatedRoute,
- private tabChangeService: TabChangeService,
- private searchService: SearchService,
- private sortService: SortService,
- private cdr: ChangeDetectorRef,
- public utilityService: UtilityService,
- private highlightPipe: HighlightSearch
- ) {}
-
- ngOnInit() {
- this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
- this.sortColumn = this.sortService.sortColumn;
- this.sortDirection = this.sortService.sortDirection;
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- this.mapData();
- this.cdr.detectChanges();
- });
- }
-
- mapData() {
- // Map data to table
- // Use highlight pipe for higlighting search term
- this.tableColumns = [
- {
- key: 'name',
- label: $localize`:@@name:Nimi`,
- class: 'col-7',
- mobile: true,
- },
- {
- key: 'sector',
- label: $localize`:@@orgOrganization:Organisaatio`,
- class: 'col-4',
- mobile: true,
- },
- ];
- this.tableRows = this.resultData.organizations.map((organization) => ({
- name: {
- label: this.highlightPipe.transform(organization.name, this.input),
- link: `/results/organization/${organization.id}`,
- },
- sector: {
- label: this.highlightPipe.transform(
- organization.sectorName,
- this.input
- ),
- },
- }));
- }
-
- ngAfterViewInit() {
- // Focus first element when clicked with skip-link
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main') {
- this.mainContent?.nativeElement.focus();
- }
- }
- );
- }
-
- ngOnDestroy() {
- this.inputSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- this.tabChangeService.targetFocus('');
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ Input,
+ OnInit,
+ OnDestroy,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ ChangeDetectorRef,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { SortService } from 'src/app/portal/services/sort.service';
+import { Search } from 'src/app/portal/models/search.model';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+import { TableColumn, TableRow } from 'src/types';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf } from '@angular/common';
+
+@Component({
+ selector: 'app-organizations',
+ templateUrl: './organizations.component.html',
+ styleUrls: ['./organizations.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ ],
+})
+export class OrganizationsComponent
+ implements OnInit, OnDestroy, AfterViewInit
+{
+ _resd: Search;
+ get resultData(): Search {
+ return this._resd;
+ }
+
+ @Input() set resultData(resD: Search) {
+ this._resd = resD;
+ }
+ @ViewChild('main') mainContent: ElementRef;
+ expandStatus: Array = [];
+ sortColumn: string;
+ sortDirection: boolean;
+ faIcon: any = this.tabChangeService.tabData
+ .filter((t) => t.data === 'organizations')
+ .map((t) => t.icon)
+ .pop();
+ inputSub: any;
+ input: string;
+ focusSub: any;
+ tableColumns: TableColumn[];
+ tableRows: Record[];
+ iconTitleOrganizations = $localize`:@@iconOrganizations: Organisaatioiden tiedon ikoni`;
+
+ constructor(
+ private route: ActivatedRoute,
+ private tabChangeService: TabChangeService,
+ private searchService: SearchService,
+ private sortService: SortService,
+ private cdr: ChangeDetectorRef,
+ public utilityService: UtilityService,
+ private highlightPipe: HighlightSearchPipe
+ ) {}
+
+ ngOnInit() {
+ this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
+ this.sortColumn = this.sortService.sortColumn;
+ this.sortDirection = this.sortService.sortDirection;
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ this.mapData();
+ this.cdr.detectChanges();
+ });
+ }
+
+ mapData() {
+ // Map data to table
+ // Use highlight pipe for higlighting search term
+ this.tableColumns = [
+ {
+ key: 'name',
+ label: $localize`:@@name:Nimi`,
+ class: 'col-7',
+ mobile: true,
+ },
+ {
+ key: 'sector',
+ label: $localize`:@@orgOrganization:Organisaatio`,
+ class: 'col-4',
+ mobile: true,
+ },
+ ];
+ this.tableRows = this.resultData.organizations.map((organization) => ({
+ name: {
+ label: this.highlightPipe.transform(organization.name, this.input),
+ link: `/results/organization/${organization.id}`,
+ },
+ sector: {
+ label: this.highlightPipe.transform(
+ organization.sectorName,
+ this.input
+ ),
+ },
+ }));
+ }
+
+ ngAfterViewInit() {
+ // Focus first element when clicked with skip-link
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main') {
+ this.mainContent?.nativeElement.focus();
+ }
+ }
+ );
+ }
+
+ ngOnDestroy() {
+ this.inputSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ this.tabChangeService.targetFocus('');
+ }
+}
diff --git a/src/app/portal/components/results/persons/persons.component.ts b/src/app/portal/components/results/persons/persons.component.ts
index 0dd260e6f..37f7c883b 100644
--- a/src/app/portal/components/results/persons/persons.component.ts
+++ b/src/app/portal/components/results/persons/persons.component.ts
@@ -1,163 +1,180 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- AfterViewInit,
- ChangeDetectorRef,
- Component,
- ElementRef,
- Input,
- OnInit,
- QueryList,
- TemplateRef,
- ViewChild,
- ViewChildren,
- ViewEncapsulation,
-} from '@angular/core';
-import { faUser } from '@fortawesome/free-solid-svg-icons';
-import { Search } from '@portal/models/search.model';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
-import { SearchService } from '@portal/services/search.service';
-import { SortService } from '@portal/services/sort.service';
-import { TabChangeService } from '@portal/services/tab-change.service';
-import { Subscription } from 'rxjs';
-import { TableColumn, TableRow } from 'src/types';
-import { UtilityService } from '@shared/services/utility.service';
-
-@Component({
- selector: 'app-persons',
- templateUrl: '../persons/persons.component.html',
- styleUrls: ['./persons.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class PersonsComponent implements OnInit, AfterViewInit {
- @Input() resultData: Search;
- expandStatus: Array = [];
-
- inputSub: Subscription;
- input: string;
- focusSub: any;
- tableColumns: TableColumn[];
- tableRows: Record[];
- rowIcon = faUser;
- iconTitle: 'Tutkijoiden tiedon ikoni';
- dataMapped: boolean;
-
- @ViewChild('main') mainContent: ElementRef;
-
- @ViewChildren('personNameColumn', { read: TemplateRef })
- personNameColumns: QueryList;
-
- constructor(
- private searchService: SearchService,
- private cdr: ChangeDetectorRef,
- private highlightPipe: HighlightSearch,
- private tabChangeService: TabChangeService,
- public sortService: SortService,
- public utilityService: UtilityService
- ) {}
-
- ngOnInit(): void {}
-
- ngAfterViewInit() {
- // Focus first element when clicked with skip-link
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main') {
- this.mainContent?.nativeElement.focus();
- }
- }
- );
-
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- this.mapData();
- this.cdr.detectChanges();
- });
- }
-
- mapData() {
- // Get cell data from template
- const nameColumnArray = this.personNameColumns.toArray();
-
- // Map data to table
- // Use highlight pipe for higlighting search term
- this.tableColumns = [
- {
- key: 'name',
- label: $localize`:@@name:Nimi`,
- class: 'col-3',
- mobile: true,
- },
- {
- key: 'organization',
- label: $localize`:@@organization:Organisaatio`,
- class: 'col-3',
- mobile: true,
- },
- {
- key: 'positionName',
- label: 'Nimike',
- class: 'col-3',
- mobile: true,
- },
- {
- key: 'keywords',
- label: $localize`:@@keywords:Avainsanat`,
- class: 'col-2',
- mobile: true,
- },
- ];
-
- const getUnique = (items: string[]) => [...new Set(items)];
-
- this.tableRows = this.resultData.persons.map((person, index) => ({
- name: {
- template: nameColumnArray[index],
- link: `/results/person/${person.id}`,
- },
- organization: {
- label: this.highlightPipe.transform(
- getUnique(this.mapAffiliations(person)
- ).join(', '),
- this.input
- ),
- },
- positionName: {
- label: this.highlightPipe.transform(
- getUnique(
- person.affiliations.organizations
- .flatMap((organanization) => organanization.items)
- .filter((item) => item.positionName.trim().length > 0)
- .map((item) => item.positionName)
- ).join(', '),
- this.input
- ),
- },
- keywords: {
- label: this.highlightPipe.transform(person.keywords, this.input),
- },
- }));
-
- this.dataMapped = true;
- }
-
- mapAffiliations(person): string[] {
- // If no primary affiliations set, show all affiliations
- if (person.affiliations.primary.length > 0) {
- return person.affiliations.primary.map((item) => item.organizationName);
- } else {
- return person.affiliations.organizations.map((item) => item.name);
- }
- }
-
- ngOnDestroy() {
- this.inputSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- this.tabChangeService.targetFocus('');
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ AfterViewInit,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ Input,
+ OnInit,
+ QueryList,
+ TemplateRef,
+ ViewChild,
+ ViewChildren,
+ ViewEncapsulation,
+} from '@angular/core';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { Search } from '@portal/models/search.model';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+import { SearchService } from '@portal/services/search.service';
+import { SortService } from '@portal/services/sort.service';
+import { TabChangeService } from '@portal/services/tab-change.service';
+import { Subscription } from 'rxjs';
+import { TableColumn, TableRow } from 'src/types';
+import { UtilityService } from '@shared/services/utility.service';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { RouterLink } from '@angular/router';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf, NgFor } from '@angular/common';
+
+@Component({
+ selector: 'app-persons',
+ templateUrl: '../persons/persons.component.html',
+ styleUrls: ['./persons.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ NgFor,
+ RouterLink,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ HighlightSearchPipe,
+ ],
+})
+export class PersonsComponent implements OnInit, AfterViewInit {
+ @Input() resultData: Search;
+ expandStatus: Array = [];
+
+ inputSub: Subscription;
+ input: string;
+ focusSub: any;
+ tableColumns: TableColumn[];
+ tableRows: Record[];
+ rowIcon: any = faUser;
+ iconTitle: 'Tutkijoiden tiedon ikoni';
+ dataMapped: boolean;
+
+ @ViewChild('main') mainContent: ElementRef;
+
+ @ViewChildren('personNameColumn', { read: TemplateRef })
+ personNameColumns: QueryList;
+
+ constructor(
+ private searchService: SearchService,
+ private cdr: ChangeDetectorRef,
+ private highlightPipe: HighlightSearchPipe,
+ private tabChangeService: TabChangeService,
+ public sortService: SortService,
+ public utilityService: UtilityService
+ ) {}
+
+ ngOnInit(): void {}
+
+ ngAfterViewInit() {
+ // Focus first element when clicked with skip-link
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main') {
+ this.mainContent?.nativeElement.focus();
+ }
+ }
+ );
+
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ this.mapData();
+ this.cdr.detectChanges();
+ });
+ }
+
+ mapData() {
+ // Get cell data from template
+ const nameColumnArray = this.personNameColumns.toArray();
+
+ // Map data to table
+ // Use highlight pipe for higlighting search term
+ this.tableColumns = [
+ {
+ key: 'name',
+ label: $localize`:@@name:Nimi`,
+ class: 'col-3',
+ mobile: true,
+ },
+ {
+ key: 'organization',
+ label: $localize`:@@organization:Organisaatio`,
+ class: 'col-3',
+ mobile: true,
+ },
+ {
+ key: 'positionName',
+ label: 'Nimike',
+ class: 'col-3',
+ mobile: true,
+ },
+ {
+ key: 'keywords',
+ label: $localize`:@@keywords:Avainsanat`,
+ class: 'col-2',
+ mobile: true,
+ },
+ ];
+
+ const getUnique = (items: string[]) => [...new Set(items)];
+
+ this.tableRows = this.resultData.persons.map((person, index) => ({
+ name: {
+ template: nameColumnArray[index],
+ link: `/results/person/${person.id}`,
+ },
+ organization: {
+ label: this.highlightPipe.transform(
+ getUnique(this.mapAffiliations(person)
+ ).join(', '),
+ this.input
+ ),
+ },
+ positionName: {
+ label: this.highlightPipe.transform(
+ getUnique(
+ person.affiliations.organizations
+ .flatMap((organanization) => organanization.items)
+ .filter((item) => item.positionName.trim().length > 0)
+ .map((item) => item.positionName)
+ ).join(', '),
+ this.input
+ ),
+ },
+ keywords: {
+ label: this.highlightPipe.transform(person.keywords, this.input),
+ },
+ }));
+
+ this.dataMapped = true;
+ }
+
+ mapAffiliations(person): string[] {
+ // If no primary affiliations set, show all affiliations
+ if (person.affiliations.primary.length > 0) {
+ return person.affiliations.primary.map((item) => item.organizationName);
+ } else {
+ return person.affiliations.organizations.map((item) => item.name);
+ }
+ }
+
+ ngOnDestroy() {
+ this.inputSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ this.tabChangeService.targetFocus('');
+ }
+}
diff --git a/src/app/portal/components/results/publications/publications.component.html b/src/app/portal/components/results/publications/publications.component.html
index 6942785e0..1cae6f2b4 100644
--- a/src/app/portal/components/results/publications/publications.component.html
+++ b/src/app/portal/components/results/publications/publications.component.html
@@ -1,85 +1,85 @@
-
-
-
-
-
+
+
+
+
+
diff --git a/src/app/portal/components/results/publications/publications.component.ts b/src/app/portal/components/results/publications/publications.component.ts
index 04199540e..627700178 100644
--- a/src/app/portal/components/results/publications/publications.component.ts
+++ b/src/app/portal/components/results/publications/publications.component.ts
@@ -1,174 +1,198 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- Input,
- OnInit,
- Inject,
- OnDestroy,
- ChangeDetectorRef,
- ViewChild,
- ElementRef,
- AfterViewInit,
- ViewChildren,
- TemplateRef,
- QueryList,
-} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { ActivatedRoute } from '@angular/router';
-import { SortService } from '../../../services/sort.service';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { Search } from 'src/app/portal/models/search.model';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { TableColumn, TableRow } from 'src/types';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
-import { CutContentPipe } from '../../../../shared/pipes/cut-content.pipe';
-
-@Component({
- selector: 'app-publications',
- templateUrl: './publications.component.html',
- styleUrls: ['./publications.component.scss'],
-})
-export class PublicationsComponent implements OnInit, OnDestroy, AfterViewInit {
- @Input() resultData: Search;
- expandStatus: Array = [];
- sortColumn: string;
- sortDirection: boolean;
- @ViewChild('main') mainContent: ElementRef;
-
- faIcon = this.tabChangeService.tabData
- .filter((t) => t.data === 'publications')
- .map((t) => t.icon)
- .pop();
- documentLang: any;
- input: string;
- inputSub: any;
- focusSub: any;
- marginTop = 0;
- heightSub: any;
-
- tableColumns: TableColumn[];
- tableRows: Record[];
-
- @ViewChildren('publicationNameColumn', { read: TemplateRef })
- publicationNameColumns: QueryList;
-
- @ViewChildren('publicationChannelColumn', { read: TemplateRef })
- publicationChannelColumns: QueryList;
-
- dataMapped: boolean;
- iconTitlePublications = $localize`:@@iconPublications: Julkaisujen tiedon ikoni`;
-
- constructor(
- private route: ActivatedRoute,
- private sortService: SortService,
- @Inject(DOCUMENT) private document: any,
- private tabChangeService: TabChangeService,
- private searchService: SearchService,
- private cdr: ChangeDetectorRef,
- public utilityService: UtilityService,
- private highlightPipe: HighlightSearch,
- private cutContentPipe: CutContentPipe
- ) {
- this.documentLang = this.document.documentElement.lang;
- }
-
- ngOnInit() {
- // Check url for sorting, default to empty
- this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
- this.sortColumn = this.sortService.sortColumn;
- this.sortDirection = this.sortService.sortDirection;
- }
-
- ngAfterViewInit() {
- // Focus first element when clicked with skip-link
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main') {
- this.mainContent?.nativeElement.focus();
- }
- }
- );
-
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- this.mapData();
- this.cdr.detectChanges();
- });
- }
-
- mapData() {
- // Get cell data from template
- const nameColumnArray = this.publicationNameColumns.toArray();
- const channelColumnArray = this.publicationChannelColumns.toArray();
-
- // Map data to table
- // Use highlight pipe for higlighting search term
- this.tableColumns = [
- {
- key: 'name',
- label: $localize`:@@publicationName:Julkaisun nimi`,
- class: 'col-8 col-lg-5 col-xl-4',
- mobile: true,
- },
- {
- key: 'author',
- label: $localize`:@@publicationAuthors:Tekijät`,
- class: 'col-lg-5 col-xl-3 d-none d-lg-block',
- mobile: false,
- },
- {
- key: 'medium',
- label: $localize`:@@publicationMedium:Julkaisukanava`,
- tooltip: $localize`:@@publicationMediumTooltip:Lehti, kustantaja tai sarja, jossa julkaisu on ilmestynyt.`,
- class: 'col-xl-3 d-none d-xl-block',
- mobile: false,
- },
- {
- key: 'year',
- label: $localize`:@@year:Vuosi`,
- class: 'col-lg-1',
- mobile: true,
- },
- ];
- this.tableRows = this.resultData.publications.map((publication, index) => ({
- name: {
- template: nameColumnArray[index],
- link: `/results/publication/${publication.id}`, // For icon link
- },
- author: {
- label: this.highlightPipe.transform(this.cutContentPipe.transform(publication.authors, 100) , this.input),
- },
- medium: {
- template: channelColumnArray[index],
- },
- year: {
- label: this.highlightPipe.transform(
- publication.publicationYear,
- this.input
- ),
- },
- }));
-
- this.dataMapped = true;
- }
-
- isReviewed(type: string) {
- if (!type) {
- return false;
- }
- return type[0] === 'A' || type[0] === 'C';
- }
-
- ngOnDestroy() {
- this.tabChangeService.targetFocus('');
- this.inputSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ Input,
+ OnInit,
+ Inject,
+ OnDestroy,
+ ChangeDetectorRef,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ ViewChildren,
+ TemplateRef,
+ QueryList,
+} from '@angular/core';
+import { DOCUMENT, NgIf, NgFor } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { SortService } from '../../../services/sort.service';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { Search } from 'src/app/portal/models/search.model';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { TableColumn, TableRow } from 'src/types';
+import { LinksPipe } from '../../../pipes/links.pipe';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { TagDoiComponent } from '../../../../shared/components/tags/tag-doi/tag-doi.component';
+import { TagOpenAccessComponent } from '../../../../shared/components/tags/tag-open-access/tag-open-access.component';
+import { TagPeerReviewedComponent } from '../../../../shared/components/tags/tag-peer-reviewed/tag-peer-reviewed.component';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { CutContentPipe } from '@shared/pipes/cut-content.pipe';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+
+@Component({
+ selector: 'app-publications',
+ templateUrl: './publications.component.html',
+ styleUrls: ['./publications.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ NgFor,
+ RouterLink,
+ TagPeerReviewedComponent,
+ TagOpenAccessComponent,
+ TagDoiComponent,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ LinksPipe,
+ CutContentPipe,
+ HighlightSearchPipe
+ ]
+})
+export class PublicationsComponent implements OnInit, OnDestroy, AfterViewInit {
+ @Input() resultData: Search;
+ expandStatus: Array = [];
+ sortColumn: string;
+ sortDirection: boolean;
+ @ViewChild('main') mainContent: ElementRef;
+
+ faIcon: any = this.tabChangeService.tabData
+ .filter((t) => t.data === 'publications')
+ .map((t) => t.icon)
+ .pop();
+ documentLang: any;
+ input: string;
+ inputSub: any;
+ focusSub: any;
+ marginTop = 0;
+ heightSub: any;
+
+ tableColumns: TableColumn[];
+ tableRows: Record[];
+
+ @ViewChildren('publicationNameColumn', { read: TemplateRef })
+ publicationNameColumns: QueryList;
+
+ @ViewChildren('publicationChannelColumn', { read: TemplateRef })
+ publicationChannelColumns: QueryList;
+
+ dataMapped: boolean;
+ iconTitlePublications = $localize`:@@iconPublications: Julkaisujen tiedon ikoni`;
+
+ constructor(
+ private route: ActivatedRoute,
+ private sortService: SortService,
+ @Inject(DOCUMENT) private document: any,
+ private tabChangeService: TabChangeService,
+ private searchService: SearchService,
+ private cdr: ChangeDetectorRef,
+ public utilityService: UtilityService,
+ private highlightPipe: HighlightSearchPipe,
+ private cutContentPipe: CutContentPipe
+ ) {
+ this.documentLang = this.document.documentElement.lang;
+ }
+
+ ngOnInit() {
+ // Check url for sorting, default to empty
+ this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
+ this.sortColumn = this.sortService.sortColumn;
+ this.sortDirection = this.sortService.sortDirection;
+ }
+
+ ngAfterViewInit() {
+ // Focus first element when clicked with skip-link
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main') {
+ this.mainContent?.nativeElement.focus();
+ }
+ }
+ );
+
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ this.mapData();
+ this.cdr.detectChanges();
+ });
+ }
+
+ mapData() {
+ // Get cell data from template
+ const nameColumnArray = this.publicationNameColumns.toArray();
+ const channelColumnArray = this.publicationChannelColumns.toArray();
+
+ // Map data to table
+ // Use highlight pipe for higlighting search term
+ this.tableColumns = [
+ {
+ key: 'name',
+ label: $localize`:@@publicationName:Julkaisun nimi`,
+ class: 'col-8 col-lg-5 col-xl-4',
+ mobile: true,
+ },
+ {
+ key: 'author',
+ label: $localize`:@@publicationAuthors:Tekijät`,
+ class: 'col-lg-5 col-xl-3 d-none d-lg-block',
+ mobile: false,
+ },
+ {
+ key: 'medium',
+ label: $localize`:@@publicationMedium:Julkaisukanava`,
+ tooltip: $localize`:@@publicationMediumTooltip:Lehti, kustantaja tai sarja, jossa julkaisu on ilmestynyt.`,
+ class: 'col-xl-3 d-none d-xl-block',
+ mobile: false,
+ },
+ {
+ key: 'year',
+ label: $localize`:@@year:Vuosi`,
+ class: 'col-lg-1',
+ mobile: true,
+ },
+ ];
+ this.tableRows = this.resultData.publications.map((publication, index) => ({
+ name: {
+ template: nameColumnArray[index],
+ link: `/results/publication/${publication.id}`, // For icon link
+ },
+ author: {
+ label: this.highlightPipe.transform(this.cutContentPipe.transform(publication.authors, 100) , this.input),
+ },
+ medium: {
+ template: channelColumnArray[index],
+ },
+ year: {
+ label: this.highlightPipe.transform(
+ publication.publicationYear,
+ this.input
+ ),
+ },
+ }));
+
+ this.dataMapped = true;
+ }
+
+ isReviewed(type: string) {
+ if (!type) {
+ return false;
+ }
+ return type[0] === 'A' || type[0] === 'C';
+ }
+
+ ngOnDestroy() {
+ this.tabChangeService.targetFocus('');
+ this.inputSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/results/publications2/publications2.component.ts b/src/app/portal/components/results/publications2/publications2.component.ts
index b7a75006a..6aa4cf9ff 100644
--- a/src/app/portal/components/results/publications2/publications2.component.ts
+++ b/src/app/portal/components/results/publications2/publications2.component.ts
@@ -24,7 +24,7 @@ import {
Publication2Service, SearchParams
} from '@portal/services/publication2.service';
import { filter, map, take, tap } from 'rxjs/operators';
-import { SharedModule } from '@shared/shared.module';
+// import { SharedModule } from '@shared/shared.module';
import { SearchBar2Component } from '@portal/search-bar2/search-bar2.component';
import { NgArrayPipesModule, NgMathPipesModule } from 'ngx-pipes';
import { OrganizationFilterComponent } from '@portal/components/organization-filter/organization-filter.component';
@@ -40,17 +40,25 @@ import { ColumnSorterComponent } from '@shared/components/column-sorter/column-s
import { faChartBar, faSlidersH } from '@fortawesome/free-solid-svg-icons';
import { Dialog, DialogRef } from '@angular/cdk/dialog';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { PaginationComponent } from '@shared/components/pagination/pagination.component';
+import {
+ PrimaryActionButtonComponent
+} from '@shared/components/buttons/primary-action-button/primary-action-button.component';
+import { SecondaryButtonComponent } from '@shared/components/buttons/secondary-button/secondary-button.component';
+import { TagPeerReviewedComponent } from '@shared/components/tags/tag-peer-reviewed/tag-peer-reviewed.component';
+import { TagOpenAccessComponent } from '@shared/components/tags/tag-open-access/tag-open-access.component';
+import { TagDoiComponent } from '@shared/components/tags/tag-doi/tag-doi.component';
@Component({
selector: 'app-publications2',
templateUrl: './publications2.component.html',
styleUrls: ['./publications2.component.scss'],
imports: [CdkTableModule, FormsModule, AsyncPipe, JsonPipe, NgForOf, NgIf, LimitPipe, NgArrayPipesModule,
- SharedModule, //TODO do not depend on shared module
+ // SharedModule, //TODO do not depend on shared module
FormsModule,
RouterModule,
SearchBar2Component, OrganizationFilterComponent, FilterOptionComponent, CollapsibleComponent, MatButtonModule, NgStyle, FilterLimitButtonComponent, FirstDigitPipe, FirstLetterPipe, RouterLink,
- LayoutModule, ColumnSorterComponent, NgTemplateOutlet, FontAwesomeModule, NgMathPipesModule
+ LayoutModule, ColumnSorterComponent, NgTemplateOutlet, FontAwesomeModule, NgMathPipesModule, PaginationComponent, PrimaryActionButtonComponent, SecondaryButtonComponent, TagPeerReviewedComponent, TagOpenAccessComponent, TagDoiComponent
],
standalone: true
})
diff --git a/src/app/portal/components/results/related-results/related-results.component.ts b/src/app/portal/components/results/related-results/related-results.component.ts
index b91b695b2..b386019aa 100644
--- a/src/app/portal/components/results/related-results/related-results.component.ts
+++ b/src/app/portal/components/results/related-results/related-results.component.ts
@@ -1,12 +1,15 @@
import { Component, OnInit } from '@angular/core';
-
+import { RouterLink } from '@angular/router';
+
@Component({
- selector: 'app-related-results',
- templateUrl: './related-results.component.html',
- styleUrls: ['./related-results.component.scss'],
-})
-export class RelatedResultsComponent implements OnInit {
- constructor() {}
-
- ngOnInit() {}
-}
+ selector: 'app-related-results',
+ templateUrl: './related-results.component.html',
+ styleUrls: ['./related-results.component.scss'],
+ standalone: true,
+ imports: [RouterLink],
+})
+export class RelatedResultsComponent implements OnInit {
+ constructor() {}
+
+ ngOnInit() {}
+}
diff --git a/src/app/portal/components/results/results-pagination/results-pagination.component.ts b/src/app/portal/components/results/results-pagination/results-pagination.component.ts
index 1de4701e7..5c29bc446 100644
--- a/src/app/portal/components/results/results-pagination/results-pagination.component.ts
+++ b/src/app/portal/components/results/results-pagination/results-pagination.component.ts
@@ -1,21 +1,24 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, OnInit } from '@angular/core';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, OnInit } from '@angular/core';
import { SearchService } from '@portal/services/search.service';
-
+import { PaginationComponent } from '../../../../shared/components/pagination/pagination.component';
+
@Component({
- selector: 'app-results-pagination',
- templateUrl: './results-pagination.component.html',
-})
-export class ResultsPaginationComponent implements OnInit {
- @Input() data: any;
-
- constructor(public searchService: SearchService) {}
-
- ngOnInit(): void {}
-}
+ selector: 'app-results-pagination',
+ templateUrl: './results-pagination.component.html',
+ standalone: true,
+ imports: [PaginationComponent],
+})
+export class ResultsPaginationComponent implements OnInit {
+ @Input() data: any;
+
+ constructor(public searchService: SearchService) {}
+
+ ngOnInit(): void {}
+}
diff --git a/src/app/portal/components/results/results.component.html b/src/app/portal/components/results/results.component.html
index d7ea1eda2..b15e4a406 100644
--- a/src/app/portal/components/results/results.component.html
+++ b/src/app/portal/components/results/results.component.html
@@ -432,7 +432,9 @@ Tuloksia näytetään enintään 10 000
+
Tuloksia näytetään enintään 10 000
extraClass="visual-dialog"
[headerInfoTemplate]="dialogHeaderInfo"
>
+
',
+ selector: 'app-search-results',
+ template: '',
+ standalone: true,
})
export class SearchResultsComponent implements OnInit, OnChanges, OnDestroy {
portalHost: DomPortalOutlet;
@@ -57,7 +62,8 @@ export class SearchResultsComponent implements OnInit, OnChanges, OnDestroy {
constructor(
private injector: Injector,
- private searchService: SearchService
+ private searchService: SearchService,
+ private sanitizer: DomSanitizer
) {}
ngOnInit() {
@@ -140,7 +146,16 @@ export class SearchResultsComponent implements OnInit, OnChanges, OnDestroy {
break;
}
- const myPortal = new ComponentPortal(child);
+ const portalInjector = Injector.create({
+ providers: [
+ { provide: HighlightSearchPipe, useValue: new HighlightSearchPipe(this.sanitizer) },
+ { provide: CutContentPipe, useValue: new CutContentPipe()},
+ { provide: MatDatepickerModule, useValue: new MatDatepickerModule()}
+ ],
+ parent: this.injector
+ });
+
+ const myPortal = new ComponentPortal(child, null, portalInjector);
this.portalHost.detach();
this.componentRef = this.portalHost.attach(myPortal);
this.componentRef.instance.resultData = this.responseData;
@@ -148,8 +163,9 @@ export class SearchResultsComponent implements OnInit, OnChanges, OnDestroy {
}
@Component({
- selector: 'app-empty-result',
- template: 'Component not implemented yet',
+ selector: 'app-empty-result',
+ template: 'Component not implemented yet',
+ standalone: true,
})
export class EmptyResultComponent {
@Input() resultData;
diff --git a/src/app/portal/components/results/search-results/utils.ts b/src/app/portal/components/results/search-results/utils.ts
index f56921a5f..d720479c7 100644
--- a/src/app/portal/components/results/search-results/utils.ts
+++ b/src/app/portal/components/results/search-results/utils.ts
@@ -1,23 +1,22 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- ElementRef,
- ComponentFactoryResolver,
- ApplicationRef,
- Injector,
-} from '@angular/core';
-import { DomPortalOutlet } from '@angular/cdk/portal';
-
-export function createDomPortalOutlet(elRef: ElementRef, injector: Injector) {
- return new DomPortalOutlet(
- elRef.nativeElement,
- injector.get(ComponentFactoryResolver as any),
- injector.get(ApplicationRef as any),
- injector
- );
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ ElementRef,
+ ApplicationRef,
+ Injector, ComponentFactoryResolver
+} from '@angular/core';
+import { DomPortalOutlet } from '@angular/cdk/portal';
+
+export function createDomPortalOutlet(elRef: ElementRef, injector: Injector) {
+ return new DomPortalOutlet(
+ elRef.nativeElement,
+ injector.get(ComponentFactoryResolver as any), // NO LONGER NEEDED
+ injector.get(ApplicationRef as any),
+ injector
+ );
+}
diff --git a/src/app/portal/components/results/sort/sort.component.scss b/src/app/portal/components/results/sort/sort.component.scss
index 4775ca03a..865d42713 100644
--- a/src/app/portal/components/results/sort/sort.component.scss
+++ b/src/app/portal/components/results/sort/sort.component.scss
@@ -1,122 +1,126 @@
-// # This file is part of the research.fi API service
-// #
-// # Copyright 2019 Ministry of Education and Culture, Finland
-// #
-// # :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// # :license: MIT
-
-app-sort {
- .sort {
- text-align: center;
- max-width: 340px;
- margin-left: auto;
- margin-right: 0;
- margin-bottom: 20px;
- }
-
- span.align-left.hide-mobile {
- margin-right: 25px;
- text-transform: uppercase;
- font-weight: bold;
- }
-
- mat-form-field.sort-button .mat-select {
- font-family: inherit !important;
- }
-
- mat-form-field .mat-select-value-text {
- font-size: 1rem;
- font-weight: normal;
- }
-
- .mat-select-trigger {
- padding: 12px 0;
- padding-left: 5px;
- }
-
- .hide-mobile {
- display: none;
- }
-
- .sort {
- text-align: center;
- min-width: 152px;
- max-width: 95%;
- margin-right: auto;
- margin-left: auto;
- margin-bottom: 0;
- }
-
- // mat-form-field.sort-button .mat-select-value {
- // font-size: 1.4rem!important;
- // }
-
+// # This file is part of the research.fi API service
+// #
+// # Copyright 2019 Ministry of Education and Culture, Finland
+// #
+// # :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// # :license: MIT
+
+app-sort {
+ .sort {
+ text-align: center;
+ max-width: 340px;
+ margin-left: auto;
+ margin-right: 0;
+ margin-bottom: 20px;
+ }
+
+ span.align-left.hide-mobile {
+ margin-right: 25px;
+ text-transform: uppercase;
+ font-weight: bold;
+ }
+
+ mat-form-field.sort-button .mat-mdc-select {
+ font-family: inherit !important;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ mat-form-field .mat-select-value-text {
+ font-size: 1rem;
+ font-weight: normal;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ .mat-select-trigger {
+ padding: 12px 0;
+ padding-left: 5px;
+ }
+
+ .hide-mobile {
+ display: none;
+ }
+
+ .sort {
+ text-align: center;
+ min-width: 152px;
+ max-width: 95%;
+ margin-right: auto;
+ margin-left: auto;
+ margin-bottom: 0;
+ }
+
+ // mat-form-field.sort-button .mat-select-value {
+ // font-size: 1.4rem!important;
+ // }
+
// Chevron
- mat-form-field.sort-button .mat-select-value-text:after {
- content: '';
- }
-
- mat-form-field.sort-button .mat-select-value-text::after {
- font-family: 'FontAwesome';
- content: '\f078';
- font-size: 1rem;
- padding-left: 0.5rem;
- }
-
- mat-form-field.sort-button .mat-form-field-label-wrapper {
- top: 0;
- padding-top: 0;
- }
-
- mat-form-field.mat-focused {
- outline: -webkit-focus-ring-color auto 1px;
- }
-
- mat-form-field.mat-form-field {
- width: 100%;
- border-radius: 6px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- mat-form-field.sort-button .mat-select-arrow {
- border: 0 !important;
- }
-
- mat-form-field.sort-button .mat-form-field-wrapper {
- padding-bottom: 0 !important;
- width: 100%;
- }
-
- mat-form-field.sort-button .mat-form-field-infix {
- border: 0 !important;
- padding: 0 !important;
- // width: 168px !important;
- }
-
- mat-form-field.sort-button mat-select {
- // font-size: 24px;
- text-align: center;
- }
- mat-form-field.sort-button .mat-form-field-underline {
- display: none !important;
- }
-
- mat-form-field.sort-button .mat-select-panel {
- max-height: 100% !important;
- font-size: 20px !important;
- }
-
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-select-value-text:after {
+ content: '';
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-select-value-text::after {
+ font-family: 'FontAwesome';
+ content: '\f078';
+ font-size: 1rem;
+ padding-left: 0.5rem;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-label-wrapper {
+ top: 0;
+ padding-top: 0;
+ }
+
+ mat-form-field.mat-focused {
+ outline: -webkit-focus-ring-color auto 1px;
+ }
+
+ mat-form-field.mat-mdc-form-field {
+ width: 100%;
+ border-radius: 6px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-select-arrow {
+ border: 0 !important;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-wrapper {
+ padding-bottom: 0 !important;
+ width: 100%;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-infix {
+ border: 0 !important;
+ padding: 0 !important;
+ // width: 168px !important;
+ }
+
+ mat-form-field.sort-button mat-select {
+ // font-size: 24px;
+ text-align: center;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-underline {
+ display: none !important;
+ }
+
+ mat-form-field.sort-button .mat-mdc-select-panel {
+ max-height: 100% !important;
+ font-size: 20px !important;
+ }
+
@media (max-width: 576px) {
- mat-form-field.sort-button .mat-form-field-infix {
- width: 150px !important;
- }
- }
-
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-infix {
+ width: 150px !important;
+ }
+ }
+
@media (max-width: 350px) {
- mat-form-field.sort-button .mat-form-field-infix {
- width: 135px !important;
- }
- }
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-infix {
+ width: 135px !important;
+ }
+ }
+}
diff --git a/src/app/portal/components/results/sort/sort.component.scss-theme.scss b/src/app/portal/components/results/sort/sort.component.scss-theme.scss
index b840b6b2d..611977763 100644
--- a/src/app/portal/components/results/sort/sort.component.scss-theme.scss
+++ b/src/app/portal/components/results/sort/sort.component.scss-theme.scss
@@ -1,31 +1,33 @@
-@import '@angular/material/theming';
-
-@mixin app-sort-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-sort {
- .sort-button.mat-focused:active {
- box-shadow: 0 0 0 4px mat-color($primary);
- outline: 0;
- }
-
- .sort-button:hover {
- background-color: mat-color($primary, 100);
- }
-
- mat-form-field .mat-select-value-text {
- color: mat-color($primary);
- }
-
- mat-form-field.mat-form-field {
- border: 2px solid mat-color($primary);
- }
- .mat-select-value {
- color: mat-contrast($primary, 200);
- font-weight: 500;
- }
- .mat-form-field-flex::after {
- color: mat-color($primary, 900);
- }
- }
-}
+@use 'migration' as *;
+
+@mixin app-sort-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-sort {
+ .sort-button.mat-focused:active {
+ box-shadow: 0 0 0 4px mat-color($primary);
+ outline: 0;
+ }
+
+ .sort-button:hover {
+ background-color: mat-color($primary, 100);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+ mat-form-field .mat-select-value-text {
+ color: mat-color($primary);
+ }
+
+ mat-form-field.mat-mdc-form-field {
+ border: 2px solid mat-color($primary);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+ .mat-select-value {
+ color: mat-contrast($primary, 200);
+ font-weight: 500;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+ .mat-form-field-flex::after {
+ color: mat-color($primary, 900);
+ }
+ }
+}
diff --git a/src/app/portal/components/results/sort/sort.component.ts b/src/app/portal/components/results/sort/sort.component.ts
index a99559d17..518ae3dcb 100644
--- a/src/app/portal/components/results/sort/sort.component.ts
+++ b/src/app/portal/components/results/sort/sort.component.ts
@@ -1,140 +1,151 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { SortService } from '@portal/services/sort.service';
-import { TabChangeService } from '@portal/services/tab-change.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { SortService } from '@portal/services/sort.service';
+import { TabChangeService } from '@portal/services/tab-change.service';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
-
-type SortOption = { label: string; value: string };
+import { NgFor } from '@angular/common';
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
+
+type SortOption = { label: string; value: string };
@Component({
- selector: 'app-sort',
- templateUrl: './sort.component.html',
- styleUrls: ['./sort.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class SortComponent implements OnInit, OnDestroy {
- tabLink: string;
- tabFields: any;
- currentSort: SortOption;
- tabSub: any;
- sortByRelevance = {
- label: $localize`:@@sortByRelevance:Osuvin tulos ensin`,
- value: 'reset',
- };
- faChevronDown = faChevronDown;
-
- // Assign values to dropdown list by current tab
- publicationFields: SortOption[] = [
- { label: $localize`:@@sortNewest:Uusin ensin`, value: 'yearDesc' },
- { label: $localize`:@@sortOldest:Vanhin ensin`, value: 'year' },
- { label: $localize`:@@sortPublicationAsc:Nimike (A-Ö)`, value: 'name' },
- {
- label: $localize`:@@sortAuthorAsc:Ensimmäinen tekijä (A-Ö)`,
- value: 'author',
- },
- ];
- fundingFields = [
- { label: $localize`:@@sortNewest:Uusin ensin`, value: 'yearDesc' },
- { label: $localize`:@@sortOldest:Vanhin ensin`, value: 'year' },
- { label: $localize`:@@sortProjectNameAsc:Hanke (A-Ö)`, value: 'name' },
- {
- label: $localize`:@@sortFunderNameAsc:Rahoittaja (A-Ö)`,
- value: 'funder',
- },
- ];
- infraFields = [
- { label: $localize`:@@sortAcronymAsc:Lyhenne (A-Ö)`, value: 'acronym' },
- {
- label: $localize`:@@sortInfraNameAsc:Infrastruktuuri (A-Ö)`,
- value: 'name',
- },
- {
- label: $localize`:@@sortOrgNameAsc:Organisaatio (A-Ö)`,
- value: 'organization',
- },
- ];
- organizationFields = [
- { label: $localize`:@@sortOrgNameAsc:Organisaatio (A-Ö)`, value: 'name' },
- { label: $localize`:@@sortSectorNameAsc:Sektori (A-Ö)`, value: 'sector' },
- ];
- mobileStatusSub: any;
- mobile: boolean;
-
- constructor(
- private route: ActivatedRoute,
- private router: Router,
- private sortService: SortService,
- private tabChangeService: TabChangeService,
- private appSettingsService: AppSettingsService
- ) {}
-
- ngOnInit() {
- // Subscribe to current tab parameter
- this.tabSub = this.tabChangeService.currentTab.subscribe((tab) => {
- switch (tab.link) {
- case 'publications': {
- this.tabFields = this.publicationFields;
- break;
- }
- case 'fundings': {
- this.tabFields = this.fundingFields;
- break;
- }
- case 'infrastructures': {
- this.tabFields = this.infraFields;
- break;
- }
- case 'organizations': {
- this.tabFields = this.organizationFields;
- break;
- }
- default: {
- this.tabFields = [];
- }
- }
- // Get sort from url and reset sort on tab change
- if (!this.currentSort ? this.currentSort : this.sortByRelevance) {
- }
-
- // Set value from query parameters on initialization
- this.currentSort =
- this.tabFields.find(
- (item) => item.value === this.route.snapshot.queryParams.sort
- ) || this.sortByRelevance;
- });
-
- // Handle mobile status
- this.mobileStatusSub = this.appSettingsService.mobileStatus.subscribe(
- (status: boolean) => {
- this.mobile = status;
- }
- );
- }
-
- // Send value to service and rewrite url
- orderBy(option: SortOption): void {
- this.currentSort = option;
- this.sortService.updateSort(option.value);
- this.navigate();
- }
-
- navigate() {
- this.router.navigate([], {
- relativeTo: this.route,
- queryParams: { sort: this.currentSort.value },
- queryParamsHandling: 'merge',
- });
- }
-
- ngOnDestroy() {
- this.tabSub?.unsubscribe();
- this.mobileStatusSub?.unsubscribe();
- }
-}
+ selector: 'app-sort',
+ templateUrl: './sort.component.html',
+ styleUrls: ['./sort.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ SecondaryButtonComponent,
+ MatMenuTrigger,
+ MatMenu,
+ MatMenuItem,
+ NgFor,
+ ],
+})
+export class SortComponent implements OnInit, OnDestroy {
+ tabLink: string;
+ tabFields: any;
+ currentSort: SortOption;
+ tabSub: any;
+ sortByRelevance = {
+ label: $localize`:@@sortByRelevance:Osuvin tulos ensin`,
+ value: 'reset',
+ };
+ faChevronDown = faChevronDown;
+
+ // Assign values to dropdown list by current tab
+ publicationFields: SortOption[] = [
+ { label: $localize`:@@sortNewest:Uusin ensin`, value: 'yearDesc' },
+ { label: $localize`:@@sortOldest:Vanhin ensin`, value: 'year' },
+ { label: $localize`:@@sortPublicationAsc:Nimike (A-Ö)`, value: 'name' },
+ {
+ label: $localize`:@@sortAuthorAsc:Ensimmäinen tekijä (A-Ö)`,
+ value: 'author',
+ },
+ ];
+ fundingFields = [
+ { label: $localize`:@@sortNewest:Uusin ensin`, value: 'yearDesc' },
+ { label: $localize`:@@sortOldest:Vanhin ensin`, value: 'year' },
+ { label: $localize`:@@sortProjectNameAsc:Hanke (A-Ö)`, value: 'name' },
+ {
+ label: $localize`:@@sortFunderNameAsc:Rahoittaja (A-Ö)`,
+ value: 'funder',
+ },
+ ];
+ infraFields = [
+ { label: $localize`:@@sortAcronymAsc:Lyhenne (A-Ö)`, value: 'acronym' },
+ {
+ label: $localize`:@@sortInfraNameAsc:Infrastruktuuri (A-Ö)`,
+ value: 'name',
+ },
+ {
+ label: $localize`:@@sortOrgNameAsc:Organisaatio (A-Ö)`,
+ value: 'organization',
+ },
+ ];
+ organizationFields = [
+ { label: $localize`:@@sortOrgNameAsc:Organisaatio (A-Ö)`, value: 'name' },
+ { label: $localize`:@@sortSectorNameAsc:Sektori (A-Ö)`, value: 'sector' },
+ ];
+ mobileStatusSub: any;
+ mobile: boolean;
+
+ constructor(
+ private route: ActivatedRoute,
+ private router: Router,
+ private sortService: SortService,
+ private tabChangeService: TabChangeService,
+ private appSettingsService: AppSettingsService
+ ) {}
+
+ ngOnInit() {
+ // Subscribe to current tab parameter
+ this.tabSub = this.tabChangeService.currentTab.subscribe((tab) => {
+ switch (tab.link) {
+ case 'publications': {
+ this.tabFields = this.publicationFields;
+ break;
+ }
+ case 'fundings': {
+ this.tabFields = this.fundingFields;
+ break;
+ }
+ case 'infrastructures': {
+ this.tabFields = this.infraFields;
+ break;
+ }
+ case 'organizations': {
+ this.tabFields = this.organizationFields;
+ break;
+ }
+ default: {
+ this.tabFields = [];
+ }
+ }
+ // Get sort from url and reset sort on tab change
+ if (!this.currentSort ? this.currentSort : this.sortByRelevance) {
+ }
+
+ // Set value from query parameters on initialization
+ this.currentSort =
+ this.tabFields.find(
+ (item) => item.value === this.route.snapshot.queryParams.sort
+ ) || this.sortByRelevance;
+ });
+
+ // Handle mobile status
+ this.mobileStatusSub = this.appSettingsService.mobileStatus.subscribe(
+ (status: boolean) => {
+ this.mobile = status;
+ }
+ );
+ }
+
+ // Send value to service and rewrite url
+ orderBy(option: SortOption): void {
+ this.currentSort = option;
+ this.sortService.updateSort(option.value);
+ this.navigate();
+ }
+
+ navigate() {
+ this.router.navigate([], {
+ relativeTo: this.route,
+ queryParams: { sort: this.currentSort.value },
+ queryParamsHandling: 'merge',
+ });
+ }
+
+ ngOnDestroy() {
+ this.tabSub?.unsubscribe();
+ this.mobileStatusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/results/suggest/suggest.component.ts b/src/app/portal/components/results/suggest/suggest.component.ts
index d305484a2..1315169f2 100644
--- a/src/app/portal/components/results/suggest/suggest.component.ts
+++ b/src/app/portal/components/results/suggest/suggest.component.ts
@@ -1,119 +1,121 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- OnDestroy,
- Inject,
- LOCALE_ID,
- PLATFORM_ID,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { SearchService } from '../../../services/search.service';
-import { TabChangeService } from '../../../services/tab-change.service';
-import { map } from 'rxjs/operators';
-import { Router } from '@angular/router';
-import { UtilityService } from '@shared/services/utility.service';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ OnDestroy,
+ Inject,
+ LOCALE_ID,
+ PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser, NgIf, NgFor } from '@angular/common';
+import { SearchService } from '../../../services/search.service';
+import { TabChangeService } from '../../../services/tab-change.service';
+import { map } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { UtilityService } from '@shared/services/utility.service';
+
@Component({
- selector: 'app-suggest',
- templateUrl: './suggest.component.html',
- styleUrls: ['./suggest.component.scss'],
-})
-export class SuggestComponent implements OnInit, OnDestroy {
- suggests: any;
- responseData: any;
- errorMessage: any;
- currentTab: { data: string; label: string; link: string; icon: string };
- tabSub: any;
- inputSub: any;
- dataSub: any;
- currentInput: any;
- tabValueSub: any;
-
- constructor(
- private searchService: SearchService,
- public router: Router,
- private tabChangeService: TabChangeService,
- @Inject(LOCALE_ID) protected localeId: string,
- private utilityService: UtilityService,
- @Inject(PLATFORM_ID) private platformId: object
- ) {}
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit() {
- // Subscribe to input change and get data
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.currentInput = input;
- this.tabSub = this.tabChangeService.currentTab.subscribe((tab) => {
- this.currentTab = tab;
- });
- this.getResultData();
- });
- }
-
- getResultData() {
- // Get data
- this.dataSub = this.searchService
- .getData()
- .pipe(map((responseData) => [responseData]))
- .subscribe((responseData) => {
- // ToDo: Remove outer if statement when all indices have been mapped to suggests
- if (this.currentTab.data === 'publications') {
- (this.responseData = responseData),
- // path to suggestions
- (this.suggests = this.responseData[0].suggest.mySuggestions[0]);
- // Update total & title if no hits
- if (this.responseData[0].hits.total === 0) {
- // Update total count, fixes issue where old count is visible when no results
- this.searchService.updateTotal(0);
- // Update title, same fix as above
- this.updateTitle(this.currentTab);
- }
- }
- });
- }
-
- updateTitle(tab) {
- // Set title by locale
- switch (this.localeId) {
- case 'fi': {
- this.setTitle(
- tab.labelFi + ' - Ei tuloksia - Haku - Tutkimustietovaranto'
- );
- break;
- }
- case 'en': {
- this.setTitle(tab.labelEn + ' - No results - Search - Research portal');
- break;
- }
- }
- }
-
- navigate(term) {
- this.searchService.updateInput(term);
- this.tabValueSub = this.searchService
- .getTabValues()
- .subscribe((data: any) => {
- this.searchService.tabValues = data;
- this.searchService.redirecting = true;
- this.router.navigate(['results/', this.currentTab.data, term]);
- });
- }
-
- ngOnDestroy() {
- if (isPlatformBrowser(this.platformId)) {
- this.tabSub?.unsubscribe();
- this.inputSub?.unsubscribe();
- this.dataSub?.unsubscribe();
- this.tabValueSub?.unsubscribe();
- }
- }
-}
+ selector: 'app-suggest',
+ templateUrl: './suggest.component.html',
+ styleUrls: ['./suggest.component.scss'],
+ standalone: true,
+ imports: [NgIf, NgFor],
+})
+export class SuggestComponent implements OnInit, OnDestroy {
+ suggests: any;
+ responseData: any;
+ errorMessage: any;
+ currentTab: { data: string; label: string; link: string; icon: string };
+ tabSub: any;
+ inputSub: any;
+ dataSub: any;
+ currentInput: any;
+ tabValueSub: any;
+
+ constructor(
+ private searchService: SearchService,
+ public router: Router,
+ private tabChangeService: TabChangeService,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private utilityService: UtilityService,
+ @Inject(PLATFORM_ID) private platformId: object
+ ) {}
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit() {
+ // Subscribe to input change and get data
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.currentInput = input;
+ this.tabSub = this.tabChangeService.currentTab.subscribe((tab) => {
+ this.currentTab = tab;
+ });
+ this.getResultData();
+ });
+ }
+
+ getResultData() {
+ // Get data
+ this.dataSub = this.searchService
+ .getData()
+ .pipe(map((responseData) => [responseData]))
+ .subscribe((responseData) => {
+ // ToDo: Remove outer if statement when all indices have been mapped to suggests
+ if (this.currentTab.data === 'publications') {
+ (this.responseData = responseData),
+ // path to suggestions
+ (this.suggests = this.responseData[0].suggest.mySuggestions[0]);
+ // Update total & title if no hits
+ if (this.responseData[0].hits.total === 0) {
+ // Update total count, fixes issue where old count is visible when no results
+ this.searchService.updateTotal(0);
+ // Update title, same fix as above
+ this.updateTitle(this.currentTab);
+ }
+ }
+ });
+ }
+
+ updateTitle(tab) {
+ // Set title by locale
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle(
+ tab.labelFi + ' - Ei tuloksia - Haku - Tutkimustietovaranto'
+ );
+ break;
+ }
+ case 'en': {
+ this.setTitle(tab.labelEn + ' - No results - Search - Research portal');
+ break;
+ }
+ }
+ }
+
+ navigate(term) {
+ this.searchService.updateInput(term);
+ this.tabValueSub = this.searchService
+ .getTabValues()
+ .subscribe((data: any) => {
+ this.searchService.tabValues = data;
+ this.searchService.redirecting = true;
+ this.router.navigate(['results/', this.currentTab.data, term]);
+ });
+ }
+
+ ngOnDestroy() {
+ if (isPlatformBrowser(this.platformId)) {
+ this.tabSub?.unsubscribe();
+ this.inputSub?.unsubscribe();
+ this.dataSub?.unsubscribe();
+ this.tabValueSub?.unsubscribe();
+ }
+ }
+}
diff --git a/src/app/portal/components/results/tooltip/tooltip.component.ts b/src/app/portal/components/results/tooltip/tooltip.component.ts
index f60344c38..ed40a1f5c 100644
--- a/src/app/portal/components/results/tooltip/tooltip.component.ts
+++ b/src/app/portal/components/results/tooltip/tooltip.component.ts
@@ -1,86 +1,96 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, Inject, OnInit, OnDestroy } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { SearchService } from 'src/app/portal/services/search.service';
-
-@Component({
- selector: 'app-tooltip',
- templateUrl: './tooltip.component.html',
-})
-export class TooltipComponent implements OnInit, OnDestroy {
- @Input() title: string;
- @Input() description: string;
- @Input() id: string;
- @Input() index: number;
- hoverIndex: any;
- tooltipMargin: string;
- tooltipUpMargin: string;
- colStyle = {
- padding: '12px 0 12px 0',
- 'margin-bottom': '-12px',
- 'margin-top': '-12px',
- position: 'unset',
- };
- arrowPosition: string;
- hasDescription: boolean;
- inputSub: any;
- input: string;
-
- constructor(
- @Inject(DOCUMENT) private document: Document,
- private searchService: SearchService
- ) {}
-
- // Show description box
- enter(index) {
- this.hoverIndex = index;
- }
-
- // Get div position and place description box where cursor fires hover
- getCoords(event, index, description) {
- description = description ? description : ' ';
- this.hasDescription = description.length > 10 ? true : false;
- // Calculate vertical cursor position and place tooltip above or below title depending on position
- const headerHeight = this.document.getElementById('header-' + index)
- .offsetHeight;
- if (event.clientY > 535) {
- // Calculate tooltip height, 41 is character count that goes to one row
- const toolTipHeight = description.length > 41 ? 176 : 78;
- this.tooltipUpMargin = 0 - (headerHeight + toolTipHeight) + 'px';
- this.arrowPosition = 'down';
- } else {
- this.tooltipUpMargin = 0 + 'px';
- this.arrowPosition = 'up';
- }
- const divPosition = this.document
- .getElementById('title')
- .getBoundingClientRect();
- // Calculate margin, prevent tooltip to get past 150px from column start
- const x =
- event.clientX - 52 - divPosition.left < 150
- ? event.clientX - 52 - divPosition.left
- : 150;
- this.tooltipMargin = x + 'px';
- }
-
- // Close description
- leave(index) {
- this.hoverIndex = null;
- }
-
- ngOnInit() {
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- });
- }
-
- ngOnDestroy() {
- this.inputSub?.unsubscribe();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, Inject, OnInit, OnDestroy } from '@angular/core';
+import { DOCUMENT, NgStyle, NgIf, NgClass } from '@angular/common';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { HighlightSearchPipe } from '../../../pipes/highlight.pipe';
+import { RouterLink } from '@angular/router';
+
+@Component({
+ selector: 'app-tooltip',
+ templateUrl: './tooltip.component.html',
+ standalone: true,
+ imports: [
+ NgStyle,
+ RouterLink,
+ NgIf,
+ NgClass,
+ HighlightSearchPipe,
+ ],
+})
+export class TooltipComponent implements OnInit, OnDestroy {
+ @Input() title: string;
+ @Input() description: string;
+ @Input() id: string;
+ @Input() index: number;
+ hoverIndex: any;
+ tooltipMargin: string;
+ tooltipUpMargin: string;
+ colStyle = {
+ padding: '12px 0 12px 0',
+ 'margin-bottom': '-12px',
+ 'margin-top': '-12px',
+ position: 'unset',
+ };
+ arrowPosition: string;
+ hasDescription: boolean;
+ inputSub: any;
+ input: string;
+
+ constructor(
+ @Inject(DOCUMENT) private document: Document,
+ private searchService: SearchService
+ ) {}
+
+ // Show description box
+ enter(index) {
+ this.hoverIndex = index;
+ }
+
+ // Get div position and place description box where cursor fires hover
+ getCoords(event, index, description) {
+ description = description ? description : ' ';
+ this.hasDescription = description.length > 10 ? true : false;
+ // Calculate vertical cursor position and place tooltip above or below title depending on position
+ const headerHeight = this.document.getElementById('header-' + index)
+ .offsetHeight;
+ if (event.clientY > 535) {
+ // Calculate tooltip height, 41 is character count that goes to one row
+ const toolTipHeight = description.length > 41 ? 176 : 78;
+ this.tooltipUpMargin = 0 - (headerHeight + toolTipHeight) + 'px';
+ this.arrowPosition = 'down';
+ } else {
+ this.tooltipUpMargin = 0 + 'px';
+ this.arrowPosition = 'up';
+ }
+ const divPosition = this.document
+ .getElementById('title')
+ .getBoundingClientRect();
+ // Calculate margin, prevent tooltip to get past 150px from column start
+ const x =
+ event.clientX - 52 - divPosition.left < 150
+ ? event.clientX - 52 - divPosition.left
+ : 150;
+ this.tooltipMargin = x + 'px';
+ }
+
+ // Close description
+ leave(index) {
+ this.hoverIndex = null;
+ }
+
+ ngOnInit() {
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ });
+ }
+
+ ngOnDestroy() {
+ this.inputSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/science-politics/external-links/external-links.component.ts b/src/app/portal/components/science-politics/external-links/external-links.component.ts
index e608e1dc5..c3b0b9c15 100644
--- a/src/app/portal/components/science-politics/external-links/external-links.component.ts
+++ b/src/app/portal/components/science-politics/external-links/external-links.component.ts
@@ -1,85 +1,97 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- Inject,
- ViewChild,
- LOCALE_ID,
- AfterViewInit,
- OnDestroy,
- ElementRef,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { TabChangeService } from '@portal/services/tab-change.service';
-import { Subscription } from 'rxjs';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ Inject,
+ ViewChild,
+ LOCALE_ID,
+ AfterViewInit,
+ OnDestroy,
+ ElementRef,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TabChangeService } from '@portal/services/tab-change.service';
+import { Subscription } from 'rxjs';
import { UtilityService } from '@shared/services/utility.service';
-
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { DividerComponent } from '../../../../shared/components/divider/divider.component';
+import { NgFor, NgClass } from '@angular/common';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
@Component({
- selector: 'app-external-links',
- templateUrl: './external-links.component.html',
- styleUrls: ['./external-links.component.scss'],
-})
-export class ExternalLinksComponent
- implements OnInit, AfterViewInit, OnDestroy
-{
- @ViewChild('mainFocus') mainFocus: ElementRef;
- focusSub: Subscription;
- data: any;
-
- constructor(
- @Inject(LOCALE_ID) protected localeId: string,
- private utilityService: UtilityService,
- private tabChangeService: TabChangeService,
- private route: ActivatedRoute
- ) {}
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit(): void {
- // Get data
- this.data = this.route.snapshot.data.links;
- // Set title
- switch (this.localeId) {
- case 'fi': {
- this.setTitle(
- 'Tieteestä ja tutkimuksesta muualla - Tiedejatutkimus.fi'
- );
- break;
- }
- case 'en': {
- this.setTitle('Science and research elsewhere - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle('Vetenskap och forskning annanstans - Forskning.fi');
- break;
- }
- }
-
- // Hide skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(false);
- }
-
- ngAfterViewInit() {
- // Focus with skip-links
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.mainFocus?.nativeElement.focus();
- }
- }
- );
- }
-
- ngOnDestroy() {
- this.focusSub?.unsubscribe();
- }
-}
+ selector: 'app-external-links',
+ templateUrl: './external-links.component.html',
+ styleUrls: ['./external-links.component.scss'],
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ NgFor,
+ DividerComponent,
+ NgClass,
+ FontAwesomeModule,
+ ],
+})
+export class ExternalLinksComponent
+ implements OnInit, AfterViewInit, OnDestroy
+{
+ @ViewChild('mainFocus') mainFocus: ElementRef;
+ focusSub: Subscription;
+ data: any;
+
+ constructor(
+ @Inject(LOCALE_ID) protected localeId: string,
+ private utilityService: UtilityService,
+ private tabChangeService: TabChangeService,
+ private route: ActivatedRoute
+ ) {}
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit(): void {
+ // Get data
+ this.data = this.route.snapshot.data.links;
+ // Set title
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle(
+ 'Tieteestä ja tutkimuksesta muualla - Tiedejatutkimus.fi'
+ );
+ break;
+ }
+ case 'en': {
+ this.setTitle('Science and research elsewhere - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle('Vetenskap och forskning annanstans - Forskning.fi');
+ break;
+ }
+ }
+
+ // Hide skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(false);
+ }
+
+ ngAfterViewInit() {
+ // Focus with skip-links
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.mainFocus?.nativeElement.focus();
+ }
+ }
+ );
+ }
+
+ ngOnDestroy() {
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/carousel/carousel.component.scss-theme.scss b/src/app/portal/components/science-politics/figures/carousel/carousel.component.scss-theme.scss
index 0e7025364..6fb9a5df7 100644
--- a/src/app/portal/components/science-politics/figures/carousel/carousel.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/figures/carousel/carousel.component.scss-theme.scss
@@ -1,32 +1,32 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-carousel-theme($theme) {
- $primary: map-get($theme, primary);
-
- .active {
- border: 2px solid mat-color($primary);
- }
-
- .item-title {
- background-color: mat-color($primary);
- color: mat-contrast($primary, 500);
- }
-
- .item-description {
- background-color: mat-color($primary, 200);
- color: mat-contrast($primary, 200);
- }
-
- .mat-stroked-button:not([disabled]) {
- border: 2px solid;
- border-color: mat-color($primary);
- color: mat-color($primary);
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-carousel-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ .active {
+ border: 2px solid mat-color($primary);
+ }
+
+ .item-title {
+ background-color: mat-color($primary);
+ color: mat-contrast($primary, 500);
+ }
+
+ .item-description {
+ background-color: mat-color($primary, 200);
+ color: mat-contrast($primary, 200);
+ }
+
+ .mat-mdc-outlined-button:not([disabled]) {
+ border: 2px solid;
+ border-color: mat-color($primary);
+ color: mat-color($primary);
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/carousel/carousel.component.ts b/src/app/portal/components/science-politics/figures/carousel/carousel.component.ts
index 1e976086f..c01daccde 100644
--- a/src/app/portal/components/science-politics/figures/carousel/carousel.component.ts
+++ b/src/app/portal/components/science-politics/figures/carousel/carousel.component.ts
@@ -1,61 +1,73 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import {
- faAngleDoubleRight,
- faAngleDoubleLeft,
-} from '@fortawesome/free-solid-svg-icons';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import {
+ faAngleDoubleRight,
+ faAngleDoubleLeft,
+} from '@fortawesome/free-solid-svg-icons';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { CutContentPipe } from '../../../../../shared/pipes/cut-content.pipe';
+import { RouterLink } from '@angular/router';
+import { SecondaryButtonComponent } from '../../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { NgIf, NgFor } from '@angular/common';
+
@Component({
- selector: 'app-carousel',
- templateUrl: './carousel.component.html',
- styleUrls: ['./carousel.component.scss'],
-})
-export class CarouselComponent implements OnInit, OnChanges {
- @Input() data: any[];
- @Input() id: string;
- @Input() queryParams: any[];
-
- slicedData: any[];
- idx: number;
- maxIdx: number;
- currentLocale: string;
- faAngleDoubleRight = faAngleDoubleRight;
- faAngleDoubleLeft = faAngleDoubleLeft;
-
- next = $localize`:@@next:Seuraava`;
- previous = $localize`:@@previous:Edellinen`;
-
- constructor(private appSettingsService: AppSettingsService) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {}
-
- ngOnChanges() {
- this.maxIdx = this.data.length - 1;
- // Default to first item if no matching ID when filtering
- this.idx = this.data.find((x) => x.id === this.id)
- ? this.data.findIndex((x) => x.id === this.id)
- : 0;
- this.slicedData = this.sliceAround(this.idx, this.maxIdx, this.data);
- }
-
- sliceAround(idx: number, maxIdx: number, arr: any[]) {
- let res = [];
- if (idx > 0 && idx < maxIdx) {
- res = arr.slice(idx - 1, idx + 2);
- } else if (idx === 0) {
- res = arr.slice(0, 3);
- } else if (idx === maxIdx) {
- res = arr.slice(idx - 2);
- }
- return res;
- }
-}
+ selector: 'app-carousel',
+ templateUrl: './carousel.component.html',
+ styleUrls: ['./carousel.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ SecondaryButtonComponent,
+ RouterLink,
+ NgFor,
+ CutContentPipe,
+ ],
+})
+export class CarouselComponent implements OnInit, OnChanges {
+ @Input() data: any[];
+ @Input() id: string;
+ @Input() queryParams: any[];
+
+ slicedData: any[];
+ idx: number;
+ maxIdx: number;
+ currentLocale: string;
+ faAngleDoubleRight = faAngleDoubleRight;
+ faAngleDoubleLeft = faAngleDoubleLeft;
+
+ next = $localize`:@@next:Seuraava`;
+ previous = $localize`:@@previous:Edellinen`;
+
+ constructor(private appSettingsService: AppSettingsService) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {}
+
+ ngOnChanges() {
+ this.maxIdx = this.data.length - 1;
+ // Default to first item if no matching ID when filtering
+ this.idx = this.data.find((x) => x.id === this.id)
+ ? this.data.findIndex((x) => x.id === this.id)
+ : 0;
+ this.slicedData = this.sliceAround(this.idx, this.maxIdx, this.data);
+ }
+
+ sliceAround(idx: number, maxIdx: number, arr: any[]) {
+ let res = [];
+ if (idx > 0 && idx < maxIdx) {
+ res = arr.slice(idx - 1, idx + 2);
+ } else if (idx === 0) {
+ res = arr.slice(0, 3);
+ } else if (idx === maxIdx) {
+ res = arr.slice(idx - 2);
+ }
+ return res;
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.html b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.html
index bc2e5caf9..89ef0598a 100644
--- a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.html
+++ b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.html
@@ -1,36 +1,36 @@
-
-
-
-
-
-
-
-
- {{ item.label }}
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+
+
diff --git a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.scss b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.scss
index 90cb9cd92..11c6bc6ad 100644
--- a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.scss
+++ b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.scss
@@ -1,47 +1,48 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
app-figure-filters {
- .mat-chip-list-wrapper {
- flex-direction: row !important;
+ /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+ .mat-chip-list-wrapper {
+ flex-direction: row !important;
}
-
- mat-chip {
- cursor: pointer;
- max-width: fit-content;
- }
-
- .mat-standard-chip {
- display: inline-table;
- }
-
- .narrow {
- max-width: 286px;
- }
-
- @media (max-width: 1440px) {
- .narrow {
- max-width: 200px;
- }
- }
-
- @media (max-width: 1107px) {
- .narrow {
- max-width: 170px;
- }
- }
-
- @media (max-width: 991px) {
- .narrow {
- max-width: unset;
- }
-
- .info-button {
- display: none;
- }
- }
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+ mat-chip {
+ cursor: pointer;
+ max-width: fit-content;
+ }
+
+ .mat-mdc-standard-chip {
+ display: inline-table;
+ }
+
+ .narrow {
+ max-width: 286px;
+ }
+
+ @media (max-width: 1440px) {
+ .narrow {
+ max-width: 200px;
+ }
+ }
+
+ @media (max-width: 1107px) {
+ .narrow {
+ max-width: 170px;
+ }
+ }
+
+ @media (max-width: 991px) {
+ .narrow {
+ max-width: unset;
+ }
+
+ .info-button {
+ display: none;
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.spec.ts b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.spec.ts
index f30c66b53..b28da30bb 100644
--- a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.spec.ts
+++ b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.spec.ts
@@ -1,37 +1,36 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatChipsModule } from '@angular/material/chips';
-import { Router } from '@angular/router';
-import { FigureFiltersComponent } from './figure-filters.component';
-
-describe('FigureFiltersComponent', () => {
- let component: FigureFiltersComponent;
- let fixture: ComponentFixture;
- const routerSpy = { navigate: jasmine.createSpy('navigate') };
-
- beforeEach(async(() => {
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatChipsModule } from '@angular/material/chips';
+import { Router } from '@angular/router';
+import { FigureFiltersComponent } from './figure-filters.component';
+
+describe('FigureFiltersComponent', () => {
+ let component: FigureFiltersComponent;
+ let fixture: ComponentFixture;
+ const routerSpy = { navigate: jasmine.createSpy('navigate') };
+
+ beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [FigureFiltersComponent],
- providers: [{ provide: Router, useValue: routerSpy }],
- imports: [MatChipsModule],
- }).compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(FigureFiltersComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-
- it('should navigate with params', () => {
- component.navigate('test');
- expect(routerSpy.navigate).toHaveBeenCalledWith([], {
- queryParams: {
- filter: 'test',
- },
- });
- });
-});
+ providers: [{ provide: Router, useValue: routerSpy }],
+ imports: [MatChipsModule, FigureFiltersComponent],
+}).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FigureFiltersComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should navigate with params', () => {
+ component.navigate('test');
+ expect(routerSpy.navigate).toHaveBeenCalledWith([], {
+ queryParams: {
+ filter: 'test',
+ },
+ });
+ });
+});
diff --git a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.ts b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.ts
index 52f3c2cba..b7bb6e99f 100644
--- a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.ts
+++ b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.ts
@@ -1,62 +1,73 @@
-import {
- ChangeDetectorRef,
- Component,
- EventEmitter,
- Input,
- OnChanges,
- OnInit,
- Output,
- ViewEncapsulation,
-} from '@angular/core';
-import { Router } from '@angular/router';
+import {
+ ChangeDetectorRef,
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ OnInit,
+ Output,
+ ViewEncapsulation,
+} from '@angular/core';
+import { Router } from '@angular/router';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { FiguresInfoComponent } from '../figures-info/figures-info.component';
+import { MatChipListbox, MatChipOption } from '@angular/material/chips';
+import { NgFor, NgIf } from '@angular/common';
+
@Component({
- selector: 'app-figure-filters',
- templateUrl: './figure-filters.component.html',
- styleUrls: ['./figure-filters.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class FigureFiltersComponent implements OnInit, OnChanges {
- @Output() clicked = new EventEmitter();
- @Input() filter: any;
- @Input() narrow: boolean;
- filterHasBeenClicked: boolean;
-
- // Angular i18n xliff doesn't do well with html tags and therefore info content is translated in component by locale
- filters = [
- { label: $localize`:@@showAll:Näytä kaikki`, filter: 'all' },
- {
- label: $localize`:@@showOnlyTKIfilter:Näytä vain TKI-tiekartan seurantamittarit`,
- filter: 'roadmap',
- infoFi:
- 'Keväällä 2020 julkaistussa Valtioneuvoston TKI-tiekartassa määritellyt tki-toiminnan seurantaindikaattorit.',
- infoEn:
- 'RDI activities’ follow up indicators defined in the Government’s RDI roadmap , published in spring 2020.',
- infoSv:
- 'Uppföljningsmätare för FUI-verksamhet definierat i Statsrådets FUI-färdplan , publicerad våren 2020.',
- },
- ];
- currentLocale: string;
-
- constructor(
- private router: Router,
- private cdr: ChangeDetectorRef,
- private appSettingsService: AppSettingsService
- ) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {}
-
- ngOnChanges(): void {
- this.cdr.detectChanges();
- }
-
- // Navigate with params
- navigate(target) {
- this.filterHasBeenClicked = true;
- this.clicked.emit(true);
- this.router.navigate([], { queryParams: { filter: target } });
- }
-}
+ selector: 'app-figure-filters',
+ templateUrl: './figure-filters.component.html',
+ styleUrls: ['./figure-filters.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgFor,
+ MatChipListbox,
+ MatChipOption,
+ NgIf,
+ FiguresInfoComponent,
+ ],
+})
+export class FigureFiltersComponent implements OnInit, OnChanges {
+ @Output() clicked = new EventEmitter();
+ @Input() filter: any;
+ @Input() narrow: boolean;
+ filterHasBeenClicked: boolean;
+
+ // Angular i18n xliff doesn't do well with html tags and therefore info content is translated in component by locale
+ filters = [
+ { label: $localize`:@@showAll:Näytä kaikki`, filter: 'all' },
+ {
+ label: $localize`:@@showOnlyTKIfilter:Näytä vain TKI-tiekartan seurantamittarit`,
+ filter: 'roadmap',
+ infoFi:
+ 'Keväällä 2020 julkaistussa Valtioneuvoston TKI-tiekartassa määritellyt tki-toiminnan seurantaindikaattorit.',
+ infoEn:
+ 'RDI activities’ follow up indicators defined in the Government’s RDI roadmap , published in spring 2020.',
+ infoSv:
+ 'Uppföljningsmätare för FUI-verksamhet definierat i Statsrådets FUI-färdplan , publicerad våren 2020.',
+ },
+ ];
+ currentLocale: string;
+
+ constructor(
+ private router: Router,
+ private cdr: ChangeDetectorRef,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {}
+
+ ngOnChanges(): void {
+ this.cdr.detectChanges();
+ }
+
+ // Navigate with params
+ navigate(target) {
+ this.filterHasBeenClicked = true;
+ this.clicked.emit(true);
+ this.router.navigate([], { queryParams: { filter: target } });
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.scss-theme.scss b/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.scss-theme.scss
index 854253e94..238ad8b9d 100644
--- a/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.scss-theme.scss
@@ -1,50 +1,50 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-figures-info-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-figures-info {
- a {
- color: #3366cc !important;
- }
-
- .info {
- background: white;
- border: 1px solid;
- box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
- }
-
- .info.left:after,
- .info.left:before {
- border: solid transparent;
- }
-
- .info.left:after {
- border-left-color: #fff;
- }
- .info.left:before {
- border-color: rgba(0, 0, 0, 0);
- border-left-color: #000;
- }
-
- .info.right:after,
- .info.right:before {
- border: solid transparent;
- }
-
- .info.right:after {
- border-right-color: #fff;
- }
- .info.right:before {
- border-color: rgba(0, 0, 0, 0);
- border-right-color: #000;
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-figures-info-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-figures-info {
+ a {
+ color: #3366cc !important;
+ }
+
+ .info {
+ background: white;
+ border: 1px solid;
+ box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
+ }
+
+ .info.left:after,
+ .info.left:before {
+ border: solid transparent;
+ }
+
+ .info.left:after {
+ border-left-color: #fff;
+ }
+ .info.left:before {
+ border-color: rgba(0, 0, 0, 0);
+ border-left-color: #000;
+ }
+
+ .info.right:after,
+ .info.right:before {
+ border: solid transparent;
+ }
+
+ .info.right:after {
+ border-right-color: #fff;
+ }
+ .info.right:before {
+ border-color: rgba(0, 0, 0, 0);
+ border-right-color: #000;
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.ts b/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.ts
index 6d737d84d..167e4daa0 100644
--- a/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.ts
+++ b/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.ts
@@ -1,56 +1,66 @@
-import {
- Component,
- Inject,
- Input,
- OnDestroy,
- OnInit,
- ViewEncapsulation,
-} from '@angular/core';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { WINDOW } from 'src/app/shared/services/window.service';
-
-@Component({
- selector: 'app-figures-info',
- templateUrl: './figures-info.component.html',
- styleUrls: ['./figures-info.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class FiguresInfoComponent implements OnInit, OnDestroy {
- @Input() labelText: string;
- @Input() content: any;
- @Input() position: string;
- showInfo = false;
- mobile = this.window.innerWidth < 992;
- height = this.window.innerHeight;
- width = this.window.innerWidth;
- resizeSub: any;
-
- constructor(
- @Inject(WINDOW) private window: Window,
- private resizeService: ResizeService
- ) {}
-
- ngOnInit(): void {
- this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
- this.onResize(dims)
- );
- }
-
- onClickedOutside(event) {
- this.showInfo = false;
- }
-
- onResize(dims) {
- this.height = dims.height;
- this.width = dims.width;
- if (!this.position && this.width >= 992) {
- this.mobile = false;
- } else {
- this.mobile = true;
- }
- }
-
- ngOnDestroy() {
- this.resizeSub?.unsubscribe();
- }
-}
+import {
+ Component,
+ Inject,
+ Input,
+ OnDestroy,
+ OnInit,
+ ViewEncapsulation,
+} from '@angular/core';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { WINDOW } from 'src/app/shared/services/window.service';
+import { NgIf, NgClass } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ClickOutsideDirective } from '../../../../../shared/directives/click-outside.directive';
+
+@Component({
+ selector: 'app-figures-info',
+ templateUrl: './figures-info.component.html',
+ styleUrls: ['./figures-info.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ ClickOutsideDirective,
+ FontAwesomeModule,
+ NgIf,
+ NgClass,
+ ],
+})
+export class FiguresInfoComponent implements OnInit, OnDestroy {
+ @Input() labelText: string;
+ @Input() content: any;
+ @Input() position: string;
+ showInfo = false;
+ mobile = this.window.innerWidth < 992;
+ height = this.window.innerHeight;
+ width = this.window.innerWidth;
+ resizeSub: any;
+
+ constructor(
+ @Inject(WINDOW) private window: Window,
+ private resizeService: ResizeService
+ ) {}
+
+ ngOnInit(): void {
+ this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
+ this.onResize(dims)
+ );
+ }
+
+ onClickedOutside(event) {
+ this.showInfo = false;
+ }
+
+ onResize(dims) {
+ this.height = dims.height;
+ this.width = dims.width;
+ if (!this.position && this.width >= 992) {
+ this.mobile = false;
+ } else {
+ this.mobile = true;
+ }
+ }
+
+ ngOnDestroy() {
+ this.resizeSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figures.component.scss b/src/app/portal/components/science-politics/figures/figures.component.scss
index f63ee7f85..11c0901d5 100644
--- a/src/app/portal/components/science-politics/figures/figures.component.scss
+++ b/src/app/portal/components/science-politics/figures/figures.component.scss
@@ -1,159 +1,159 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-.bg-bubble {
- position: absolute;
- border-radius: 50%;
- width: 500px;
- height: 500px;
- right: 1%;
- margin-top: -42px;
- z-index: -1;
-}
-
-// Sidenav
-.nav {
- font-weight: 500;
- display: initial;
-}
-
-.icon {
- font-size: 1.5rem;
- line-height: 1;
-}
-
-.nav nav {
- list-style: none;
- padding: 0;
- position: sticky;
- top: 0;
- z-index: 1;
-}
-
-.nav ul li {
- padding: 1rem 0;
-}
-
-.active {
- border-radius: 4px;
-}
-
-.search {
- position: relative;
- display: inline-block;
- width: 100%;
-}
-
-.search input {
- height: 2rem;
- border-radius: 5px;
-}
-
-.search input {
- text-indent: 0.8rem;
-}
-.search .search-icon {
- position: absolute;
- top: 0.25rem;
- left: auto;
- right: 1rem;
- z-index: 1;
-}
-
-// Content
-.segment {
- padding-bottom: 3rem;
-}
-
-h2 {
- font-size: 1.5rem;
-}
-
-.segment h2,
-.segment h3 {
- padding-bottom: 0.5rem;
-}
-
-ul.disc {
- list-style: disc;
- padding-inline-start: 1rem;
-}
-
-.segment .content {
- padding: 0.5rem 1rem;
-}
-
-.circle-small {
- border-radius: 50%;
- width: 50px;
- height: 50px;
- margin: 1rem auto;
-}
-
-.card.list {
- padding: 1rem 0.5rem;
-}
-
-.card.list:not(:last-child) {
- margin-bottom: 2rem;
-}
-
-.card span.title {
- font-weight: 500;
-}
-
-.card.list span.title {
- font-weight: bold;
-}
-
-.description {
- padding: 0.5rem 0;
-}
-
-img {
- max-width: 100%;
-}
-
-.disabled {
- pointer-events: none;
-}
-
-//Responsive
-.row.mobile-header {
- padding: 0 0 1rem;
-}
-
-.mobile-header h2 {
- font-size: 1.5rem;
-}
-
-.dropdown-icon {
- padding: 0 0.5rem;
-}
-
-@media (max-width: 991px) {
- .nav ul {
- width: 100%;
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+.bg-bubble {
+ position: absolute;
+ border-radius: 50%;
+ width: 500px;
+ height: 500px;
+ right: 1%;
+ margin-top: -42px;
+ z-index: -1;
+}
+
+// Sidenav
+.nav {
+ font-weight: 500;
+ display: initial;
+}
+
+.icon {
+ font-size: 1.5rem;
+ line-height: 1;
+}
+
+.nav nav {
+ list-style: none;
+ padding: 0;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+}
+
+.nav ul li {
+ padding: 1rem 0;
+}
+
+.active {
+ border-radius: 4px;
+}
+
+.search {
+ position: relative;
+ display: inline-block;
+ width: 100%;
+}
+
+.search input {
+ height: 2rem;
+ border-radius: 5px;
+}
+
+.search input {
+ text-indent: 0.8rem;
+}
+.search .search-icon {
+ position: absolute;
+ top: 0.25rem;
+ left: auto;
+ right: 1rem;
+ z-index: 1;
+}
+
+// Content
+.segment {
+ padding-bottom: 3rem;
+}
+
+h2 {
+ font-size: 1.5rem;
+}
+
+.segment h2,
+.segment h3 {
+ padding-bottom: 0.5rem;
+}
+
+ul.disc {
+ list-style: disc;
+ padding-inline-start: 1rem;
+}
+
+.segment .content {
+ padding: 0.5rem 1rem;
+}
+
+.circle-small {
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ margin: 1rem auto;
+}
+
+.card.list {
+ padding: 1rem 0.5rem;
+}
+
+.card.list:not(:last-child) {
+ margin-bottom: 2rem;
+}
+
+.card span.title {
+ font-weight: 500;
+}
+
+.card.list span.title {
+ font-weight: bold;
+}
+
+.description {
+ padding: 0.5rem 0;
+}
+
+img {
+ max-width: 100%;
+}
+
+.disabled {
+ pointer-events: none;
+}
+
+//Responsive
+.row.mobile-header {
+ padding: 0 0 1rem;
+}
+
+.mobile-header h2 {
+ font-size: 1.5rem;
+}
+
+.dropdown-icon {
+ padding: 0 0.5rem;
+}
+
+@media (max-width: 991px) {
+ .nav ul {
+ width: 100%;
+ }
+
+ .mat-mdc-button {
+ // padding: 0;
+ margin-left: -1rem;
+ padding-top: 0.5rem;
}
-
- .mat-button {
- // padding: 0;
- margin-left: -1rem;
- padding-top: 0.5rem;
- }
-
- ::ng-deep .dropdown .mat-button-wrapper {
- display: flex;
- }
-}
-
-@media (max-width: 614px) {
- .segment .figure {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
- }
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+ ::ng-deep .dropdown .mat-button-wrapper {
+ display: flex;
+ }
+}
+
+@media (max-width: 614px) {
+ .segment .figure {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figures.component.scss-theme.scss b/src/app/portal/components/science-politics/figures/figures.component.scss-theme.scss
index 2b6c85be3..3429e2aef 100644
--- a/src/app/portal/components/science-politics/figures/figures.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/figures/figures.component.scss-theme.scss
@@ -1,49 +1,49 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-figures-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-figures {
- .bg-bubble,
- .circle-small {
- background: mat-color($primary, 200);
- }
-
- .nav a,
- .content:not(.intro) a {
- color: mat-contrast($primary, 300);
- }
-
- .active {
- background: #dc1ddf0f;
- }
-
- .active .icon,
- .active a {
- color: mat-color($primary);
- }
-
- .search input {
- border: 1px solid mat-contrast($primary, 400);
- }
-
- .search-icon {
- color: mat-contrast($primary, 400);
- }
-
- .card {
- color: mat-contrast($primary, 300);
- border: 0;
- -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-figures-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-figures {
+ .bg-bubble,
+ .circle-small {
+ background: mat-color($primary, 200);
+ }
+
+ .nav a,
+ .content:not(.intro) a {
+ color: mat-contrast($primary, 300);
+ }
+
+ .active {
+ background: #dc1ddf0f;
+ }
+
+ .active .icon,
+ .active a {
+ color: mat-color($primary);
+ }
+
+ .search input {
+ border: 1px solid mat-contrast($primary, 400);
+ }
+
+ .search-icon {
+ color: mat-contrast($primary, 400);
+ }
+
+ .card {
+ color: mat-contrast($primary, 300);
+ border: 0;
+ -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figures.component.ts b/src/app/portal/components/science-politics/figures/figures.component.ts
index 8c36245b6..976633448 100644
--- a/src/app/portal/components/science-politics/figures/figures.component.ts
+++ b/src/app/portal/components/science-politics/figures/figures.component.ts
@@ -1,316 +1,342 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- Inject,
- ViewChild,
- ElementRef,
- AfterViewInit,
- ChangeDetectorRef,
- OnDestroy,
- LOCALE_ID,
- ViewChildren,
- QueryList,
- PLATFORM_ID,
-} from '@angular/core';
-import {
- faInfoCircle,
- faSearch,
- faChevronDown,
- faChevronUp,
-} from '@fortawesome/free-solid-svg-icons';
-import { faChartBar } from '@fortawesome/free-regular-svg-icons';
-import { isPlatformBrowser, ViewportScroller } from '@angular/common';
-import { UntypedFormControl } from '@angular/forms';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { Subscription } from 'rxjs';
-import { ScrollService } from 'src/app/portal/services/scroll.service';
-import { DataService } from 'src/app/portal/services/data.service';
-import { WINDOW } from 'src/app/shared/services/window.service';
-import { ActivatedRoute, Router } from '@angular/router';
-import { HistoryService } from 'src/app/portal/services/history.service';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { cloneDeep } from 'lodash-es';
-import { CMSContentService } from '@shared/services/cms-content.service';
-import { Figure } from 'src/app/portal/models/figure/figure.model';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-
-@Component({
- selector: 'app-figures',
- templateUrl: './figures.component.html',
- styleUrls: ['./figures.component.scss'],
-})
-export class FiguresComponent implements OnInit, AfterViewInit, OnDestroy {
- faIconCircle = faInfoCircle;
- faSearch = faSearch;
- faChartBar = faChartBar;
- faChevronDown = faChevronDown;
- faChevronUp = faChevronUp;
-
- currentSection: any;
- queryField: UntypedFormControl = new UntypedFormControl();
- figureData: Figure[] = [];
- filteredData: any[];
- queryResults: any[];
- combinedData: any;
- hasResults: boolean;
- queryTerm: any;
- @ViewChild('mainContent') mainContent: ElementRef;
- @ViewChild('mainFocus') mainFocus: ElementRef;
- @ViewChild('searchInput') searchInput: ElementRef;
- @ViewChildren('segments') segments: QueryList;
- @ViewChildren('sections') sections: QueryList;
- querySub: Subscription;
- resizeSub: Subscription;
- scrollSub: Subscription;
- mobile: boolean;
- showIntro: boolean;
- focusSub: any;
- currentLocale: string;
- private metaTags = MetaTags.figures;
- private commonTags = MetaTags.common;
- roadmapFilter: string;
- filtered: any[];
- filteredQuery: any[];
- routeSub: Subscription;
- queryParamSub: Subscription;
- filterHasBeenClicked: boolean;
- queryParams: any;
- currentFilter = null;
- loading = true;
- content: any[];
- contentSub: Subscription;
- figuresSub: Subscription;
-
- constructor(
- private cdr: ChangeDetectorRef,
- @Inject(WINDOW) private window: Window,
- @Inject(LOCALE_ID) protected localeId: string,
- private tabChangeService: TabChangeService,
- private resizeService: ResizeService,
- private scrollService: ScrollService,
- private dataService: DataService,
- private historyService: HistoryService,
- private utilityService: UtilityService,
- private route: ActivatedRoute,
- private router: Router,
- private cmsContentService: CMSContentService,
- @Inject(PLATFORM_ID) private platformId: object,
- private appSettingsService: AppSettingsService,
- private scroller: ViewportScroller,
- ) {
- // Default to first segment
- this.currentSection = 's0';
- this.queryResults = [];
- this.queryTerm = '';
- this.hasResults = true;
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit(): void {
- if (isPlatformBrowser(this.platformId)) {
- // Get first segment content from content data service
- this.contentSub = this.cmsContentService.pageData.subscribe((data) => {
- this.content = data.find((el) => el.id === 'figures-intro');
- this.loading = false;
- });
-
- // Get data from API and set into sessionStorage to be reusable in single figure view.
- if (!sessionStorage.getItem('figureData')) {
- this.figuresSub = this.cmsContentService
- .getFigures()
- .subscribe((data) => {
- this.figureData = data;
- sessionStorage.setItem('figureData', JSON.stringify(data));
- });
- } else {
- this.figureData = JSON.parse(sessionStorage.getItem('figureData'));
- }
- }
-
- this.routeSub = this.route.fragment.subscribe((fragment: string) => {
- this.scrollToId(fragment);
- });
-
- this.queryParamSub = this.route.queryParams.subscribe((params) => {
- this.currentFilter = params.filter || null;
- this.filter(this.currentFilter);
- this.queryParams = params;
- });
-
- switch (this.localeId) {
- case 'fi': {
- this.setTitle('Lukuja tieteestä ja tutkimuksesta - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle('Figures on science and research - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle('Siffror om vetenskap och forskning - Forskning.fi');
- break;
- }
- }
-
- this.utilityService.addMeta(
- this.metaTags['title' + this.currentLocale],
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
-
- this.resizeSub = this.resizeService.onResize$.subscribe((_) =>
- this.onResize()
- );
- this.scrollSub = this.scrollService.onScroll
- .pipe(debounceTime(300))
- .subscribe((e) => this.onScroll(e.y));
-
- this.search();
- }
-
- search() {
- // Subscribe to input changes
- this.querySub = this.queryField.valueChanges
- .pipe(distinctUntilChanged())
- .subscribe((term) => {
- // Get data from assets
- const combined = [];
- // Combine all items
- this.figureData.forEach((segment) => combined.push(segment.figures));
- this.combinedData = combined.flat();
- this.queryTerm = term;
- this.queryResults =
- term.length > 0
- ? this.combinedData.filter(
- (item) =>
- item['title' + this.currentLocale]
- .toLowerCase()
- .includes(term.toLowerCase()) ||
- item['description' + this.currentLocale]
- .toLowerCase()
- .includes(term.toLowerCase())
- )
- : [];
- // Set results flag, used to show right template
- this.hasResults =
- this.queryResults.length === 0 && term.length > 0 ? false : true;
- // Highlight side nav item
- this.currentSection = this.queryResults.length > 0 ? '' : 's0';
- });
- }
-
- // Filtering with cloned content. Filter both figureData and query results
- filter(filter: string) {
- const data = cloneDeep(this.figureData);
- filter = filter === 'all' ? null : filter;
-
- const filtered = data.map((s) => {
- s.figures = s.figures.filter((item) => (filter ? item[filter] : item));
- return s;
- });
-
- this.filteredData = filter ? filtered : this.figureData;
-
- // Set link disabled if no items
- for (const navItem of this.figureData) {
- Object.assign(
- this.figureData.find((item) => item.id === navItem.id),
- {
- disabled:
- this.filteredData.find((item) => item.id === navItem.id).figures
- .length > 0
- ? false
- : true,
- }
- );
- }
-
- // Set search results data
- this.queryResults = this.combinedData?.filter((item) =>
- filter ? item.roadmap : item
- );
- }
-
- scrollTo(event: any) {
- this.segments.first?.nativeElement.scrollIntoView();
- }
-
- ngAfterViewInit() {
- // Count content width and set mobile true / false
- this.mobile = this.window.innerWidth > 991 ? false : true;
- // Show side menu on desktop
- this.showIntro = this.mobile ? false : true;
- this.cdr.detectChanges();
-
- // Focus with skip-links
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'search-input') {
- this.searchInput.nativeElement.focus();
- }
- if (target === 'main-link') {
- this.mainFocus.nativeElement.focus();
- }
- }
- );
- }
-
- ngOnDestroy() {
- this.contentSub?.unsubscribe();
- this.figuresSub?.unsubscribe();
- this.querySub?.unsubscribe();
- this.resizeSub?.unsubscribe();
- this.scrollSub?.unsubscribe();
- this.tabChangeService.targetFocus('');
- this.queryParamSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- this.routeSub?.unsubscribe();
- }
-
- onSectionChange(sectionId: string) {
- this.currentSection = sectionId ? sectionId : 's0';
- }
-
- onResize() {
- this.mobile = this.window.innerWidth > 991 ? false : true;
- this.showIntro = this.mobile ? false : true;
- }
-
- onScroll(y: number) {
- this.dataService.updateResearchScroll(y);
- }
-
- // Navigate to section from sidebar.
- // Reset fragment before navigation.
- // This enables side navigation linking to previously navigated item
- navigateToSection(sectionId: string) {
- this.router
- .navigate([], { fragment: null, queryParams: this.queryParams })
- .then(() =>
- this.router.navigate([], {
- fragment: sectionId,
- queryParams: this.queryParams,
- })
- );
- }
-
- scrollToId(id: string) {
- setTimeout(() => {
- this.scroller.scrollToAnchor(id);
- }, 10);
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ Inject,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ ChangeDetectorRef,
+ OnDestroy,
+ LOCALE_ID,
+ ViewChildren,
+ QueryList,
+ PLATFORM_ID,
+} from '@angular/core';
+import {
+ faInfoCircle,
+ faSearch,
+ faChevronDown,
+ faChevronUp,
+} from '@fortawesome/free-solid-svg-icons';
+import { faChartBar } from '@fortawesome/free-regular-svg-icons';
+import { isPlatformBrowser, ViewportScroller, NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common';
+import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { Subscription } from 'rxjs';
+import { ScrollService } from 'src/app/portal/services/scroll.service';
+import { DataService } from 'src/app/portal/services/data.service';
+import { WINDOW } from 'src/app/shared/services/window.service';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { HistoryService } from 'src/app/portal/services/history.service';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { cloneDeep } from 'lodash-es';
+import { CMSContentService } from '@shared/services/cms-content.service';
+import { Figure } from 'src/app/portal/models/figure/figure.model';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { CutContentPipe } from '../../../../shared/pipes/cut-content.pipe';
+import { MatChip } from '@angular/material/chips';
+import { MatButton } from '@angular/material/button';
+import { ScrollSpyDirective } from '../../../directives/scroll-spy.directive';
+import { FigureFiltersComponent } from './figure-filters/figure-filters.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-figures',
+ templateUrl: './figures.component.html',
+ styleUrls: ['./figures.component.scss'],
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ NgIf,
+ NgClass,
+ FontAwesomeModule,
+ MatProgressSpinner,
+ NgFor,
+ FormsModule,
+ ReactiveFormsModule,
+ FigureFiltersComponent,
+ ScrollSpyDirective,
+ MatButton,
+ NgTemplateOutlet,
+ RouterLink,
+ MatChip,
+ CutContentPipe,
+ ],
+})
+export class FiguresComponent implements OnInit, AfterViewInit, OnDestroy {
+ faIconCircle = faInfoCircle;
+ faSearch = faSearch;
+ faChartBar = faChartBar;
+ faChevronDown = faChevronDown;
+ faChevronUp = faChevronUp;
+
+ currentSection: any;
+ queryField: UntypedFormControl = new UntypedFormControl();
+ figureData: Figure[] = [];
+ filteredData: any[];
+ queryResults: any[];
+ combinedData: any;
+ hasResults: boolean;
+ queryTerm: any;
+ @ViewChild('mainContent') mainContent: ElementRef;
+ @ViewChild('mainFocus') mainFocus: ElementRef;
+ @ViewChild('searchInput') searchInput: ElementRef;
+ @ViewChildren('segments') segments: QueryList;
+ @ViewChildren('sections') sections: QueryList;
+ querySub: Subscription;
+ resizeSub: Subscription;
+ scrollSub: Subscription;
+ mobile: boolean;
+ showIntro: boolean;
+ focusSub: any;
+ currentLocale: string;
+ private metaTags = MetaTags.figures;
+ private commonTags = MetaTags.common;
+ roadmapFilter: string;
+ filtered: any[];
+ filteredQuery: any[];
+ routeSub: Subscription;
+ queryParamSub: Subscription;
+ filterHasBeenClicked: boolean;
+ queryParams: any;
+ currentFilter = null;
+ loading = true;
+ content: any[];
+ contentSub: Subscription;
+ figuresSub: Subscription;
+
+ constructor(
+ private cdr: ChangeDetectorRef,
+ @Inject(WINDOW) private window: Window,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private tabChangeService: TabChangeService,
+ private resizeService: ResizeService,
+ private scrollService: ScrollService,
+ private dataService: DataService,
+ private historyService: HistoryService,
+ private utilityService: UtilityService,
+ private route: ActivatedRoute,
+ private router: Router,
+ private cmsContentService: CMSContentService,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private appSettingsService: AppSettingsService,
+ private scroller: ViewportScroller,
+ ) {
+ // Default to first segment
+ this.currentSection = 's0';
+ this.queryResults = [];
+ this.queryTerm = '';
+ this.hasResults = true;
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit(): void {
+ if (isPlatformBrowser(this.platformId)) {
+ // Get first segment content from content data service
+ this.contentSub = this.cmsContentService.pageData.subscribe((data) => {
+ this.content = data.find((el) => el.id === 'figures-intro');
+ this.loading = false;
+ });
+
+ // Get data from API and set into sessionStorage to be reusable in single figure view.
+ if (!sessionStorage.getItem('figureData')) {
+ this.figuresSub = this.cmsContentService
+ .getFigures()
+ .subscribe((data) => {
+ this.figureData = data;
+ sessionStorage.setItem('figureData', JSON.stringify(data));
+ });
+ } else {
+ this.figureData = JSON.parse(sessionStorage.getItem('figureData'));
+ }
+ }
+
+ this.routeSub = this.route.fragment.subscribe((fragment: string) => {
+ this.scrollToId(fragment);
+ });
+
+ this.queryParamSub = this.route.queryParams.subscribe((params) => {
+ this.currentFilter = params.filter || null;
+ this.filter(this.currentFilter);
+ this.queryParams = params;
+ });
+
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle('Lukuja tieteestä ja tutkimuksesta - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle('Figures on science and research - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle('Siffror om vetenskap och forskning - Forskning.fi');
+ break;
+ }
+ }
+
+ this.utilityService.addMeta(
+ this.metaTags['title' + this.currentLocale],
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+
+ this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
+ this.onResize(dims)
+ );
+ this.scrollSub = this.scrollService.onScroll
+ .pipe(debounceTime(300))
+ .subscribe((e) => this.onScroll(e.y));
+
+ this.search();
+ }
+
+ search() {
+ // Subscribe to input changes
+ this.querySub = this.queryField.valueChanges
+ .pipe(distinctUntilChanged())
+ .subscribe((term) => {
+ // Get data from assets
+ const combined = [];
+ // Combine all items
+ this.figureData.forEach((segment) => combined.push(segment.figures));
+ this.combinedData = combined.flat();
+ this.queryTerm = term;
+ this.queryResults =
+ term.length > 0
+ ? this.combinedData.filter(
+ (item) =>
+ item['title' + this.currentLocale]
+ .toLowerCase()
+ .includes(term.toLowerCase()) ||
+ item['description' + this.currentLocale]
+ .toLowerCase()
+ .includes(term.toLowerCase())
+ )
+ : [];
+ // Set results flag, used to show right template
+ this.hasResults =
+ this.queryResults.length === 0 && term.length > 0 ? false : true;
+ // Highlight side nav item
+ this.currentSection = this.queryResults.length > 0 ? '' : 's0';
+ });
+ }
+
+ // Filtering with cloned content. Filter both figureData and query results
+ filter(filter: string) {
+ const data = cloneDeep(this.figureData);
+ filter = filter === 'all' ? null : filter;
+
+ const filtered = data.map((s) => {
+ s.figures = s.figures.filter((item) => (filter ? item[filter] : item));
+ return s;
+ });
+
+ this.filteredData = filter ? filtered : this.figureData;
+
+ // Set link disabled if no items
+ for (const navItem of this.figureData) {
+ Object.assign(
+ this.figureData.find((item) => item.id === navItem.id),
+ {
+ disabled:
+ this.filteredData.find((item) => item.id === navItem.id).figures
+ .length > 0
+ ? false
+ : true,
+ }
+ );
+ }
+
+ // Set search results data
+ this.queryResults = this.combinedData?.filter((item) =>
+ filter ? item.roadmap : item
+ );
+ }
+
+ scrollTo(event: any) {
+ this.segments.first?.nativeElement.scrollIntoView();
+ }
+
+ ngAfterViewInit() {
+ // Count content width and set mobile true / false
+ this.mobile = this.window.innerWidth > 991 ? false : true;
+ // Show side menu on desktop
+ this.showIntro = this.mobile ? false : true;
+ this.cdr.detectChanges();
+
+ // Focus with skip-links
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'search-input') {
+ this.searchInput.nativeElement.focus();
+ }
+ if (target === 'main-link') {
+ this.mainFocus.nativeElement.focus();
+ }
+ }
+ );
+ }
+
+ ngOnDestroy() {
+ this.contentSub?.unsubscribe();
+ this.figuresSub?.unsubscribe();
+ this.querySub?.unsubscribe();
+ this.resizeSub?.unsubscribe();
+ this.scrollSub?.unsubscribe();
+ this.tabChangeService.targetFocus('');
+ this.queryParamSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ this.routeSub?.unsubscribe();
+ }
+
+ onSectionChange(sectionId: string) {
+ this.currentSection = sectionId ? sectionId : 's0';
+ }
+
+ onResize(dims: any) {
+ this.mobile = dims.width > 991 ? false : true;
+ this.showIntro = this.mobile ? false : true;
+ }
+
+ onScroll(y: number) {
+ this.dataService.updateResearchScroll(y);
+ }
+
+ // Navigate to section from sidebar.
+ // Reset fragment before navigation.
+ // This enables side navigation linking to previously navigated item
+ navigateToSection(sectionId: string) {
+ this.router
+ .navigate([], { fragment: null, queryParams: this.queryParams })
+ .then(() =>
+ this.router.navigate([], {
+ fragment: sectionId,
+ queryParams: this.queryParams,
+ })
+ );
+ }
+
+ scrollToId(id: string) {
+ setTimeout(() => {
+ this.scroller.scrollToAnchor(id);
+ }, 10);
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.scss-theme.scss b/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.scss-theme.scss
index 98165e563..6d3c05b50 100644
--- a/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.scss-theme.scss
@@ -1,53 +1,53 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-single-figure-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-single-figure {
- .help,
- .info {
- background: white;
- border: 1px solid;
- box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
- }
-
- .info.left:after,
- .info.left:before {
- border: solid transparent;
- }
-
- .info.left:after {
- border-left-color: #fff;
- }
- .info.left:before {
- border-color: rgba(0, 0, 0, 0);
- border-left-color: #000;
- }
-
- .info.right:after,
- .info.right:before {
- border: solid transparent;
- }
-
- .info.right:after {
- border-right-color: #fff;
- }
- .info.right:before {
- border-color: rgba(0, 0, 0, 0);
- border-right-color: #000;
- }
-
- @media (max-width: 991px) {
- .content {
- border: 0;
- }
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-single-figure-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-single-figure {
+ .help,
+ .info {
+ background: white;
+ border: 1px solid;
+ box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
+ }
+
+ .info.left:after,
+ .info.left:before {
+ border: solid transparent;
+ }
+
+ .info.left:after {
+ border-left-color: #fff;
+ }
+ .info.left:before {
+ border-color: rgba(0, 0, 0, 0);
+ border-left-color: #000;
+ }
+
+ .info.right:after,
+ .info.right:before {
+ border: solid transparent;
+ }
+
+ .info.right:after {
+ border-right-color: #fff;
+ }
+ .info.right:before {
+ border-color: rgba(0, 0, 0, 0);
+ border-right-color: #000;
+ }
+
+ @media (max-width: 991px) {
+ .content {
+ border: 0;
+ }
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.ts b/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.ts
index 792dcca6c..d41ab60ba 100644
--- a/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.ts
+++ b/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.ts
@@ -1,238 +1,267 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- ElementRef,
- AfterViewInit,
- ChangeDetectorRef,
- Inject,
- LOCALE_ID,
- OnDestroy,
- ViewChildren,
- QueryList,
- HostListener,
- ViewEncapsulation,
- ViewChild,
- PLATFORM_ID,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { Subscription, combineLatest } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { ActivatedRoute } from '@angular/router';
-import { WINDOW } from 'src/app/shared/services/window.service';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { cloneDeep } from 'lodash-es';
-import { CMSContentService } from '@shared/services/cms-content.service';
-import { Figure } from 'src/app/portal/models/figure/figure.model';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-
-@Component({
- selector: 'app-single-figure',
- templateUrl: './single-figure.component.html',
- styleUrls: ['./single-figure.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class SingleFigureComponent implements OnInit, OnDestroy, AfterViewInit {
- @ViewChildren('content') content: QueryList;
- @ViewChild('keyboardHelp') keyboardHelp: ElementRef;
-
- figureData: Figure[] = [];
- flatData: any[] = [];
- colWidth: number;
- faQuestion = faQuestionCircle;
- resizeSub: Subscription;
- dataSub: any;
- allContent: any;
- combinedData: any;
- routeSub: Subscription;
- currentParent: any;
- currentItem: any;
- result: any;
- contentSub: Subscription;
- figuresSub: Subscription;
- focusSub: Subscription;
- title: any;
- mobile = this.window.innerWidth < 992;
- height = this.window.innerHeight;
- width = this.window.innerWidth;
- showInfo = false;
- showHelp = false;
- currentLocale: string;
- private metaTags = MetaTags.singleFigure;
- private commonTags = MetaTags.common;
- queryParamSub: Subscription;
- queryParams: any;
- filter: any;
- loading = true;
-
- constructor(
- private cdr: ChangeDetectorRef,
- @Inject(LOCALE_ID) protected localeId: string,
- private resizeService: ResizeService,
- private route: ActivatedRoute,
- private cmsContentService: CMSContentService,
- @Inject(WINDOW) private window: Window,
- private tabChangeService: TabChangeService,
- private utilityService: UtilityService,
- @Inject(PLATFORM_ID) private platformId: object,
- private appSettingsService: AppSettingsService
- ) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit(): void {
- this.routeSub = combineLatest([this.route.params, this.route.queryParams])
- .pipe(map((res) => ({ params: res[0], queryParams: res[1] })))
- .subscribe((res) => {
- this.currentParent = res.params.id.slice(0, 2);
- this.currentItem = res.params.id;
-
- // Call API only if no data in session storage
- if (isPlatformBrowser(this.platformId)) {
- if (!sessionStorage.getItem('figureData')) {
- this.figuresSub = this.cmsContentService
- .getFigures()
- .subscribe((data) => {
- this.figureData = data;
- sessionStorage.setItem('figureData', JSON.stringify(data));
- this.setContent(res);
- });
- } else {
- this.figureData = JSON.parse(sessionStorage.getItem('figureData'));
- this.setContent(res);
- }
- }
- });
-
- this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
- this.onResize(dims)
- );
- }
-
- setContent(res) {
- this.loading = false;
- this.queryParams = res.queryParams;
- this.filter =
- res.queryParams.filter === 'all' ? null : res.queryParams.filter;
-
- const parent = this.figureData.find(
- (item) => item.id === this.currentParent
- );
- this.result = [parent.figures.find((item) => item.id === this.currentItem)];
-
- // Get all visualisations into a flat array
- const dataCopy = cloneDeep(this.figureData);
- this.flatData = [];
- dataCopy.forEach((segment) => {
- // Hack to get segment header into item (Assign new key / value pair)
- segment.figures.forEach((item) => {
- // item.segment = segment['header' + this.currentLocale];
- Object.assign(item, { segment: segment['title' + this.currentLocale] });
- });
- this.flatData.push(segment.figures);
- });
- this.flatData = this.flatData.flat();
-
- // Filter data if filtering is enabled
- this.flatData = this.filter
- ? this.flatData.filter((item) => item[this.filter])
- : this.flatData;
-
- // Set title
- this.title = this.result[0]['title' + this.currentLocale];
- switch (this.localeId) {
- case 'fi': {
- this.setTitle(this.title + ' - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle(this.title + ' - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle(this.title + ' - Forskning.fi');
- break;
- }
- }
-
- const titleString = this.utilityService.getTitle();
- this.utilityService.addMeta(
- titleString,
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
- }
-
- ngAfterViewInit() {
- // Sometimes content can't be rendered fast enough so we use changes subsciption as fallback
- if (this.content && this.content.first) {
- this.colWidth = this.content.first.nativeElement.offsetWidth - 15;
- this.cdr.detectChanges();
- } else {
- // It takes some time to load data so we need to subscribe to content ref changes to get first width
- this.contentSub = this.content.changes.subscribe((item) => {
- this.colWidth = item.first.nativeElement.offsetWidth - 15;
- this.cdr.detectChanges();
- });
- }
- // Focus to skip-to results link when clicked from header skip-links
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.keyboardHelp.nativeElement.focus();
- }
- }
- );
- }
-
- onResize(dims) {
- this.height = dims.height;
- this.width = dims.width;
- if (this.width >= 992) {
- this.mobile = false;
- } else {
- this.mobile = true;
- }
- this.colWidth = this.content.first.nativeElement.offsetWidth - 15;
- }
-
- trackByFn(index, item) {
- return index;
- }
-
- @HostListener('document:keydown.escape', ['$event']) onKeydownHandler() {
- this.showInfo = false;
- this.showHelp = false;
- }
-
- onClickedOutside(event) {
- this.showInfo = false;
- }
-
- onClickedOutsideHelp(event) {
- this.showHelp = false;
- }
-
- ngOnDestroy() {
- this.resizeSub?.unsubscribe();
- this.figuresSub?.unsubscribe();
- this.routeSub?.unsubscribe();
- this.contentSub?.unsubscribe();
- this.queryParamSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ ElementRef,
+ AfterViewInit,
+ ChangeDetectorRef,
+ Inject,
+ LOCALE_ID,
+ OnDestroy,
+ ViewChildren,
+ QueryList,
+ HostListener,
+ ViewEncapsulation,
+ ViewChild,
+ PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser, NgIf, NgFor } from '@angular/common';
+import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { Subscription, combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { WINDOW } from 'src/app/shared/services/window.service';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { cloneDeep } from 'lodash-es';
+import { CMSContentService } from '@shared/services/cms-content.service';
+import { Figure } from 'src/app/portal/models/figure/figure.model';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { SafeUrlPipe } from '../../../../pipes/safe-url.pipe';
+import { CarouselComponent } from '../carousel/carousel.component';
+import { FigureFiltersComponent } from '../figure-filters/figure-filters.component';
+import { SecondaryButtonComponent } from '../../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { ShareComponent } from '../../../single/share/share.component';
+import { FiguresInfoComponent } from '../figures-info/figures-info.component';
+import { MatChip } from '@angular/material/chips';
+import { ClickOutsideDirective } from '../../../../../shared/directives/click-outside.directive';
+import { BreadcrumbComponent } from '../../../breadcrumb/breadcrumb.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { BannerDividerComponent } from '../../../../../shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-single-figure',
+ templateUrl: './single-figure.component.html',
+ styleUrls: ['./single-figure.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ NgIf,
+ MatProgressSpinner,
+ RouterLink,
+ BreadcrumbComponent,
+ NgFor,
+ ClickOutsideDirective,
+ MatChip,
+ FiguresInfoComponent,
+ ShareComponent,
+ SecondaryButtonComponent,
+ FigureFiltersComponent,
+ CarouselComponent,
+ SafeUrlPipe,
+ ],
+})
+export class SingleFigureComponent implements OnInit, OnDestroy, AfterViewInit {
+ @ViewChildren('content') content: QueryList;
+ @ViewChild('keyboardHelp') keyboardHelp: ElementRef;
+
+ figureData: Figure[] = [];
+ flatData: any[] = [];
+ colWidth: number;
+ faQuestion = faQuestionCircle;
+ resizeSub: Subscription;
+ dataSub: any;
+ allContent: any;
+ combinedData: any;
+ routeSub: Subscription;
+ screenWidthSubscription: Subscription;
+ currentParent: any;
+ currentItem: any;
+ result: any;
+ contentSub: Subscription;
+ figuresSub: Subscription;
+ focusSub: Subscription;
+ title: any;
+ mobile = this.window.innerWidth < 992;
+ height = this.window.innerHeight;
+ width = this.window.innerWidth;
+ showInfo = false;
+ showHelp = false;
+ currentLocale: string;
+ private metaTags = MetaTags.singleFigure;
+ private commonTags = MetaTags.common;
+ queryParamSub: Subscription;
+ queryParams: any;
+ filter: any;
+ loading = true;
+
+ constructor(
+ private cdr: ChangeDetectorRef,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private resizeService: ResizeService,
+ private route: ActivatedRoute,
+ private cmsContentService: CMSContentService,
+ @Inject(WINDOW) private window: Window,
+ private tabChangeService: TabChangeService,
+ private utilityService: UtilityService,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit(): void {
+ this.routeSub = combineLatest([this.route.params, this.route.queryParams])
+ .pipe(map((res) => ({ params: res[0], queryParams: res[1] })))
+ .subscribe((res) => {
+ this.currentParent = res.params.id.slice(0, 2);
+ this.currentItem = res.params.id;
+
+ // Call API only if no data in session storage
+ if (isPlatformBrowser(this.platformId)) {
+ if (!sessionStorage.getItem('figureData')) {
+ this.figuresSub = this.cmsContentService
+ .getFigures()
+ .subscribe((data) => {
+ this.figureData = data;
+ sessionStorage.setItem('figureData', JSON.stringify(data));
+ this.setContent(res);
+ });
+ } else {
+ this.figureData = JSON.parse(sessionStorage.getItem('figureData'));
+ this.setContent(res);
+ }
+ }
+ });
+
+ this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
+ this.onResize(dims)
+ );
+ }
+
+ setContent(res) {
+ this.loading = false;
+ this.queryParams = res.queryParams;
+ this.filter =
+ res.queryParams.filter === 'all' ? null : res.queryParams.filter;
+
+ const parent = this.figureData.find(
+ (item) => item.id === this.currentParent
+ );
+ this.result = [parent.figures.find((item) => item.id === this.currentItem)];
+
+ // Get all visualisations into a flat array
+ const dataCopy = cloneDeep(this.figureData);
+ this.flatData = [];
+ dataCopy.forEach((segment) => {
+ // Hack to get segment header into item (Assign new key / value pair)
+ segment.figures.forEach((item) => {
+ // item.segment = segment['header' + this.currentLocale];
+ Object.assign(item, { segment: segment['title' + this.currentLocale] });
+ });
+ this.flatData.push(segment.figures);
+ });
+ this.flatData = this.flatData.flat();
+
+ // Filter data if filtering is enabled
+ this.flatData = this.filter
+ ? this.flatData.filter((item) => item[this.filter])
+ : this.flatData;
+
+ // Set title
+ this.title = this.result[0]['title' + this.currentLocale];
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle(this.title + ' - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle(this.title + ' - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle(this.title + ' - Forskning.fi');
+ break;
+ }
+ }
+
+ const titleString = this.utilityService.getTitle();
+ this.utilityService.addMeta(
+ titleString,
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+ }
+
+ ngAfterViewInit() {
+ // Sometimes content can't be rendered fast enough so we use changes subsciption as fallback
+ if (this.content && this.content.first) {
+ this.colWidth = this.content.first.nativeElement.offsetWidth - 15;
+ this.cdr.detectChanges();
+ } else {
+ // It takes some time to load data so we need to subscribe to content ref changes to get first width
+ this.contentSub = this.content.changes.subscribe((item) => {
+ this.colWidth = item.first.nativeElement.offsetWidth - 15;
+ this.cdr.detectChanges();
+ });
+ }
+ // Focus to skip-to results link when clicked from header skip-links
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.keyboardHelp.nativeElement.focus();
+ }
+ }
+ );
+ }
+
+ onResize(dims) {
+ this.height = dims.height;
+ this.width = dims.width;
+ if (this.width >= 992) {
+ this.mobile = false;
+ } else {
+ this.mobile = true;
+ }
+ this.colWidth = this.content.first.nativeElement.offsetWidth - 15;
+ }
+
+ trackByFn(index, item) {
+ return index;
+ }
+
+ @HostListener('document:keydown.escape', ['$event']) onKeydownHandler() {
+ this.showInfo = false;
+ this.showHelp = false;
+ }
+
+ onClickedOutside(event) {
+ this.showInfo = false;
+ }
+
+ onClickedOutsideHelp(event) {
+ this.showHelp = false;
+ }
+
+ ngOnDestroy() {
+ this.resizeSub?.unsubscribe();
+ this.figuresSub?.unsubscribe();
+ this.routeSub?.unsubscribe();
+ this.contentSub?.unsubscribe();
+ this.queryParamSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss
index ab46668e2..8954bd30c 100644
--- a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss
+++ b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss
@@ -1,192 +1,192 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-.main-content-wrap {
- .inner-html-wrap {
- h1 {
- display: none;
- overflow: hidden;
- text-overflow: ellipsis;
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+.main-content-wrap {
+ .inner-html-wrap {
+ h1 {
+ display: none;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .header-wrap {
+ margin-bottom: 75px;
+ }
+
+ .placeholder-header-wrap {
+ margin-bottom: 25px;
+ }
+
+ .indicator-thumbnail-wrapper {
+ display: flex;
+ justify-content: center;
+ img {
+ align-self: flex-start;
+ }
+ }
+
+ .thumbnail-bread-text {
+ h1, h2, h3 {
+ display: none;
+ }
+ }
+
+ .bg-bubble {
+ position: absolute;
+ border-radius: 50%;
+ width: 500px;
+ height: 500px;
+ right: 1%;
+ margin-top: -42px;
+ z-index: -1;
+ }
+
+ // Sidenav
+ .nav {
+ font-weight: 500;
+ display: initial;
+ }
+
+ .icon {
+ font-size: 1.5rem;
+ line-height: 1;
+ }
+
+ .nav nav {
+ list-style: none;
+ padding: 0;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ }
+
+ .nav ul li {
+ padding: 1rem 0;
+ }
+
+ .active {
+ border-radius: 4px;
+ }
+
+ .search {
+ position: relative;
+ display: inline-block;
+ width: 100%;
+ }
+
+ .search input {
+ height: 2rem;
+ border-radius: 5px;
+ }
+
+ .search input {
+ text-indent: 0.8rem;
+ }
+
+ .search .search-icon {
+ position: absolute;
+ top: 0.25rem;
+ left: auto;
+ right: 1rem;
+ z-index: 1;
+ }
+
+ // Content
+ .segment {
+ padding-bottom: 3rem;
+ }
+
+ h2 {
+ font-size: 1.2rem;
+ margin-bottom: 1rem;
+ }
+
+ .segment h2,
+ .segment h3 {
+ padding-bottom: 0.5rem;
+ }
+
+ ul.disc {
+ list-style: disc;
+ padding-inline-start: 1rem;
+ }
+
+ .segment .content {
+ padding: 0.5rem 1rem;
+ }
+
+ .circle-small {
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ margin: 1rem auto;
+ }
+
+ .card.list {
+ padding: 1rem 0.5rem;
+ }
+
+ .card.list:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+
+ .card span.title {
+ font-weight: 500;
+ }
+
+ .card.list span.title {
+ font-weight: bold;
+ }
+
+ .description {
+ padding: 0.5rem 0;
+ }
+
+ img {
+ max-width: 100%;
+ }
+
+ .disabled {
+ pointer-events: none;
+ }
+
+ //Responsive
+ .row.mobile-header {
+ padding: 0 0 1rem;
+ }
+
+ .mobile-header h2 {
+ font-size: 1.5rem;
+ }
+
+ .dropdown-icon {
+ padding: 0 0.5rem;
+ }
+
+ @media (max-width: 991px) {
+ .nav ul {
+ width: 100%;
+ }
+
+ .mat-mdc-button {
+ // padding: 0;
+ margin-left: -1rem;
+ padding-top: 0.5rem;
}
- }
-
- .header-wrap {
- margin-bottom: 75px;
- }
-
- .placeholder-header-wrap {
- margin-bottom: 25px;
- }
-
- .indicator-thumbnail-wrapper {
- display: flex;
- justify-content: center;
- img {
- align-self: flex-start;
- }
- }
-
- .thumbnail-bread-text {
- h1, h2, h3 {
- display: none;
- }
- }
-
- .bg-bubble {
- position: absolute;
- border-radius: 50%;
- width: 500px;
- height: 500px;
- right: 1%;
- margin-top: -42px;
- z-index: -1;
- }
-
- // Sidenav
- .nav {
- font-weight: 500;
- display: initial;
- }
-
- .icon {
- font-size: 1.5rem;
- line-height: 1;
- }
-
- .nav nav {
- list-style: none;
- padding: 0;
- position: sticky;
- top: 0;
- z-index: 1;
- }
-
- .nav ul li {
- padding: 1rem 0;
- }
-
- .active {
- border-radius: 4px;
- }
-
- .search {
- position: relative;
- display: inline-block;
- width: 100%;
- }
-
- .search input {
- height: 2rem;
- border-radius: 5px;
- }
-
- .search input {
- text-indent: 0.8rem;
- }
-
- .search .search-icon {
- position: absolute;
- top: 0.25rem;
- left: auto;
- right: 1rem;
- z-index: 1;
- }
-
- // Content
- .segment {
- padding-bottom: 3rem;
- }
-
- h2 {
- font-size: 1.2rem;
- margin-bottom: 1rem;
- }
-
- .segment h2,
- .segment h3 {
- padding-bottom: 0.5rem;
- }
-
- ul.disc {
- list-style: disc;
- padding-inline-start: 1rem;
- }
-
- .segment .content {
- padding: 0.5rem 1rem;
- }
-
- .circle-small {
- border-radius: 50%;
- width: 50px;
- height: 50px;
- margin: 1rem auto;
- }
-
- .card.list {
- padding: 1rem 0.5rem;
- }
-
- .card.list:not(:last-child) {
- margin-bottom: 2rem;
- }
-
- .card span.title {
- font-weight: 500;
- }
-
- .card.list span.title {
- font-weight: bold;
- }
-
- .description {
- padding: 0.5rem 0;
- }
-
- img {
- max-width: 100%;
- }
-
- .disabled {
- pointer-events: none;
- }
-
- //Responsive
- .row.mobile-header {
- padding: 0 0 1rem;
- }
-
- .mobile-header h2 {
- font-size: 1.5rem;
- }
-
- .dropdown-icon {
- padding: 0 0.5rem;
- }
-
- @media (max-width: 991px) {
- .nav ul {
- width: 100%;
- }
-
- .mat-button {
- // padding: 0;
- margin-left: -1rem;
- padding-top: 0.5rem;
- }
-
- ::ng-deep .dropdown .mat-button-wrapper {
- display: flex;
- }
- }
-
- @media (max-width: 614px) {
- .segment .figure {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
- }
- }
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+ ::ng-deep .dropdown .mat-button-wrapper {
+ display: flex;
+ }
+ }
+
+ @media (max-width: 614px) {
+ .segment .figure {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss-theme.scss b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss-theme.scss
index c26f4f526..43b90b83b 100644
--- a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss-theme.scss
@@ -1,49 +1,49 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-open-science-and-research-indicators-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-open-science-and-research-indicators {
- .bg-bubble,
- .circle-small {
- background: mat-color($primary, 200);
- }
-
- .nav a,
- .content:not(.intro) a {
- color: mat-contrast($primary, 300);
- }
-
- .active {
- background: #dc1ddf0f;
- }
-
- .active .icon,
- .active a {
- color: mat-color($primary);
- }
-
- .search input {
- border: 1px solid mat-contrast($primary, 400);
- }
-
- .search-icon {
- color: mat-contrast($primary, 400);
- }
-
- .card {
- color: mat-contrast($primary, 300);
- border: 0;
- -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-open-science-and-research-indicators-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-open-science-and-research-indicators {
+ .bg-bubble,
+ .circle-small {
+ background: mat-color($primary, 200);
+ }
+
+ .nav a,
+ .content:not(.intro) a {
+ color: mat-contrast($primary, 300);
+ }
+
+ .active {
+ background: #dc1ddf0f;
+ }
+
+ .active .icon,
+ .active a {
+ color: mat-color($primary);
+ }
+
+ .search input {
+ border: 1px solid mat-contrast($primary, 400);
+ }
+
+ .search-icon {
+ color: mat-contrast($primary, 400);
+ }
+
+ .card {
+ color: mat-contrast($primary, 300);
+ border: 0;
+ -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.ts b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.ts
index 1c1b21221..e996e91b3 100644
--- a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.ts
+++ b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.ts
@@ -1,42 +1,53 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { ActivatedRoute } from '@angular/router';
-import { UtilityService } from '@shared/services/utility.service';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+import { UtilityService } from '@shared/services/utility.service';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { SafeUrlPipe } from '../../../pipes/safe-url.pipe';
+import { CutContentPipe } from '../../../../shared/pipes/cut-content.pipe';
+import { NgFor } from '@angular/common';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
@Component({
- selector: 'app-open-science-and-research-indicators',
- templateUrl: './open-science-and-research-indicators.component.html',
- styleUrls: ['./open-science-and-research-indicators.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class OpenScienceAndResearchIndicatorsComponent implements OnInit {
- currentLocale = '';
- routeSub: Subscription;
-
- currentPageUrl = '/science-innovation-policy/open-science-and-research-indicators/';
-
- indicatorContent = [];
- subPageLinks: any;
- indicatorsActive = false;
-
- constructor(private route: ActivatedRoute, private utilityService: UtilityService, private appSettingsService: AppSettingsService) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- this.mapFetchedDataToContent();
- }
-
- mapFetchedDataToContent() {
- this.indicatorContent = this.route.snapshot.data.pages.filter(
- (el) => el.id.startsWith('indicators_general')
- );
- this.subPageLinks = this.route.snapshot.data.pages.filter(
- (el) => el.id.startsWith('indicators_content')
- );
- this.subPageLinks.map(link => (
- link.image = 'assets/img/indicators/indicators_thumbnail_' + link.id.substring(19, link.id.length) + '.png'
- ));
- }
-}
+ selector: 'app-open-science-and-research-indicators',
+ templateUrl: './open-science-and-research-indicators.component.html',
+ styleUrls: ['./open-science-and-research-indicators.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ NgFor,
+ CutContentPipe,
+ SafeUrlPipe,
+ ],
+})
+export class OpenScienceAndResearchIndicatorsComponent implements OnInit {
+ currentLocale = '';
+ routeSub: Subscription;
+
+ currentPageUrl = '/science-innovation-policy/open-science-and-research-indicators/';
+
+ indicatorContent = [];
+ subPageLinks: any;
+ indicatorsActive = false;
+
+ constructor(private route: ActivatedRoute, private utilityService: UtilityService, private appSettingsService: AppSettingsService) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ this.mapFetchedDataToContent();
+ }
+
+ mapFetchedDataToContent() {
+ this.indicatorContent = this.route.snapshot.data.pages.filter(
+ (el) => el.id.startsWith('indicators_general')
+ );
+ this.subPageLinks = this.route.snapshot.data.pages.filter(
+ (el) => el.id.startsWith('indicators_content')
+ );
+ this.subPageLinks.map(link => (
+ link.image = 'assets/img/indicators/indicators_thumbnail_' + link.id.substring(19, link.id.length) + '.png'
+ ));
+ }
+}
diff --git a/src/app/portal/components/science-politics/open-science-and-research-indicators/single-indicator/single-indicator.component.ts b/src/app/portal/components/science-politics/open-science-and-research-indicators/single-indicator/single-indicator.component.ts
index 054e044b5..4cac746b2 100644
--- a/src/app/portal/components/science-politics/open-science-and-research-indicators/single-indicator/single-indicator.component.ts
+++ b/src/app/portal/components/science-politics/open-science-and-research-indicators/single-indicator/single-indicator.component.ts
@@ -1,116 +1,135 @@
-import {
- ChangeDetectorRef,
- Component,
- ElementRef,
- Inject,
- OnInit,
- ViewChild,
- ViewEncapsulation
-} from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { Subscription, combineLatest } from 'rxjs';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { WINDOW } from '@shared/services/window.service';
-
-@Component({
- selector: 'app-single-indicator',
- templateUrl: './single-indicator.component.html',
- styleUrls: ['./single-indicator.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class SingleIndicatorComponent implements OnInit {
-
- @ViewChild('iframe') iframe: ElementRef;
- resizeSub: Subscription;
- currentLocale = '';
- currentPageCaption = '';
- routeSub: Subscription;
- pageTextContent: any = '';
- visualizationUrl: any;
- dataSource: any;
- siblingPageLinks = [];
- currentPageId = '';
- colWidth = 0;
- showHelp = false;
- mobile = this.window.innerWidth < 992;
- height = this.window.innerHeight;
- width = this.window.innerWidth;
- item = {};
-
- currentPageUrl = '/science-innovation-policy/open-science-and-research-indicators/';
-
- constructor(private route: ActivatedRoute, private router: Router, private appSettingsService: AppSettingsService, private resizeService: ResizeService, @Inject(WINDOW) private window: Window, private cdRef : ChangeDetectorRef) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- this.processPageData();
- this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
- this.onResize(dims)
- );
- }
-
- ngAfterViewInit() {
- this.colWidth = this.iframe.nativeElement.offsetWidth;
- this.cdRef.detectChanges();
- }
-
- processPageData() {
- if (this.route.snapshot.params) {
- this.pageTextContent = this.route.snapshot.data.pages.find(
- (el) => el.id === this.route.snapshot.params.id
- );
- if (this.pageTextContent) {
- this.currentPageCaption = this.pageTextContent['title' + this.currentLocale];
- this.currentPageId = this.pageTextContent.id.substring(19, this.pageTextContent.id.length);
- this.siblingPageLinks = this.route.snapshot.data.pages.filter(
- (el) => el.id.startsWith('indicators_content')
- );
-
- this.visualizationUrl = this.route.snapshot.data.pages.find(
- (el) => el.id === ('indicators_link_' + this.currentPageId)
- );
- // Crop out html paragraph tags from start and end of the link from cms.
- this.visualizationUrl ? this.visualizationUrl =
- this.visualizationUrl['content' + this.currentLocale].substring(3, this.visualizationUrl['content' + this.currentLocale].length - 4) : '';
-
- this.siblingPageLinks.map(link => (
- link.image = 'assets/img/indicators/indicators_thumbnail_' + link.id.substring(19, link.id.length) + '.png'
- ));
-
- this.dataSource = this.route.snapshot.data.pages.find(
- (el) => el.id === ('indicators_datasource_' + this.currentPageId)
- );
- // Crop out html paragraph tags from start and end of the link from cms.
- this.dataSource ? this.dataSource =
- this.dataSource['content' + this.currentLocale].substring(3, this.dataSource['content' + this.currentLocale].length - 4) : '';
-
- this.siblingPageLinks.map(link => (
- link.selected = link.id.substring(19, link.id.length) === this.currentPageId
- ));
- }
- else {
- this.router.navigate([this.currentPageUrl]);
- }
- }
- else {
- this.router.navigate([this.currentPageUrl]);
- }
- }
-
- onResize(dims) {
- this.colWidth = this.iframe.nativeElement.offsetWidth - 15;
- this.cdRef.detectChanges();
- }
-
- onClickedOutsideHelp(event) {
- this.showHelp = false;
- }
-
- ngOnDestroy() {
- this.resizeSub?.unsubscribe();
- }
-}
-
-
+import {
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ Inject,
+ OnInit,
+ ViewChild,
+ ViewEncapsulation
+} from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { Subscription, combineLatest } from 'rxjs';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { WINDOW } from '@shared/services/window.service';
+import { SafeUrlPipe } from '../../../../pipes/safe-url.pipe';
+import { SecondaryButtonComponent } from '../../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { ShareComponent } from '../../../single/share/share.component';
+import { NgIf, NgFor } from '@angular/common';
+import { ClickOutsideDirective } from '../../../../../shared/directives/click-outside.directive';
+import { BreadcrumbComponent } from '../../../breadcrumb/breadcrumb.component';
+import { BannerDividerComponent } from '../../../../../shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-single-indicator',
+ templateUrl: './single-indicator.component.html',
+ styleUrls: ['./single-indicator.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ RouterLink,
+ BreadcrumbComponent,
+ ClickOutsideDirective,
+ NgIf,
+ ShareComponent,
+ SecondaryButtonComponent,
+ NgFor,
+ SafeUrlPipe,
+ ],
+})
+export class SingleIndicatorComponent implements OnInit {
+
+ @ViewChild('iframe') iframe: ElementRef;
+ resizeSub: Subscription;
+ currentLocale = '';
+ currentPageCaption = '';
+ routeSub: Subscription;
+ pageTextContent: any = '';
+ visualizationUrl: any;
+ dataSource: any;
+ siblingPageLinks = [];
+ currentPageId = '';
+ colWidth = 0;
+ showHelp = false;
+ mobile = this.window.innerWidth < 992;
+ height = this.window.innerHeight;
+ width = this.window.innerWidth;
+ item = {};
+
+ currentPageUrl = '/science-innovation-policy/open-science-and-research-indicators/';
+
+ constructor(private route: ActivatedRoute, private router: Router, private appSettingsService: AppSettingsService, private resizeService: ResizeService, @Inject(WINDOW) private window: Window, private cdRef : ChangeDetectorRef) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ this.processPageData();
+ this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
+ this.onResize(dims)
+ );
+ }
+
+ ngAfterViewInit() {
+ this.colWidth = this.iframe.nativeElement.offsetWidth;
+ this.cdRef.detectChanges();
+ }
+
+ processPageData() {
+ if (this.route.snapshot.params) {
+ this.pageTextContent = this.route.snapshot.data.pages.find(
+ (el) => el.id === this.route.snapshot.params.id
+ );
+ if (this.pageTextContent) {
+ this.currentPageCaption = this.pageTextContent['title' + this.currentLocale];
+ this.currentPageId = this.pageTextContent.id.substring(19, this.pageTextContent.id.length);
+ this.siblingPageLinks = this.route.snapshot.data.pages.filter(
+ (el) => el.id.startsWith('indicators_content')
+ );
+
+ this.visualizationUrl = this.route.snapshot.data.pages.find(
+ (el) => el.id === ('indicators_link_' + this.currentPageId)
+ );
+ // Crop out html paragraph tags from start and end of the link from cms.
+ this.visualizationUrl ? this.visualizationUrl =
+ this.visualizationUrl['content' + this.currentLocale].substring(3, this.visualizationUrl['content' + this.currentLocale].length - 4) : '';
+
+ this.siblingPageLinks.map(link => (
+ link.image = 'assets/img/indicators/indicators_thumbnail_' + link.id.substring(19, link.id.length) + '.png'
+ ));
+
+ this.dataSource = this.route.snapshot.data.pages.find(
+ (el) => el.id === ('indicators_datasource_' + this.currentPageId)
+ );
+ // Crop out html paragraph tags from start and end of the link from cms.
+ this.dataSource ? this.dataSource =
+ this.dataSource['content' + this.currentLocale].substring(3, this.dataSource['content' + this.currentLocale].length - 4) : '';
+
+ this.siblingPageLinks.map(link => (
+ link.selected = link.id.substring(19, link.id.length) === this.currentPageId
+ ));
+ }
+ else {
+ this.router.navigate([this.currentPageUrl]);
+ }
+ }
+ else {
+ this.router.navigate([this.currentPageUrl]);
+ }
+ }
+
+ onResize(dims) {
+ this.colWidth = this?.iframe?.nativeElement?.offsetWidth ?? 0;
+ this.cdRef.detectChanges();
+ }
+
+ onClickedOutsideHelp(event) {
+ this.showHelp = false;
+ }
+
+ ngOnDestroy() {
+ this.resizeSub?.unsubscribe();
+ }
+}
+
+
diff --git a/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.scss-theme.scss b/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.scss-theme.scss
index 928fab24f..6d722eb4e 100644
--- a/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.scss-theme.scss
@@ -1,19 +1,19 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-research-innovation-system-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-research-innovation-system {
- .mat-expansion-panel-content .org-links a {
- color: mat-contrast($primary, 50);
- text-decoration: underline;
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-research-innovation-system-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-research-innovation-system {
+ .mat-expansion-panel-content .org-links a {
+ color: mat-contrast($primary, 50);
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.ts b/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.ts
index 11b72b81d..96cffa34f 100644
--- a/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.ts
+++ b/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.ts
@@ -1,147 +1,164 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- ViewChild,
- ElementRef,
- LOCALE_ID,
- Inject,
- AfterViewInit,
- OnDestroy,
- ChangeDetectorRef,
-} from '@angular/core';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { DomSanitizer } from '@angular/platform-browser';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { Subscription } from 'rxjs';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { ActivatedRoute } from '@angular/router';
-import { Sector } from 'src/app/portal/models/research-innovation-system/sector.model';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-
-@Component({
- selector: 'app-research-innovation-system',
- templateUrl: './research-innovation-system.component.html',
- styleUrls: ['./research-innovation-system.component.scss'],
-})
-export class ResearchInnovationSystemComponent
- implements OnInit, AfterViewInit, OnDestroy
-{
- faTimes = faTimes;
- openedIdx = -1;
-
- private metaTags = MetaTags.researchInnovation;
- private commonTags = MetaTags.common;
-
- colWidth = 0;
-
- introText: any;
-
- selectedSector: any;
- rearrangedList: any[];
- @ViewChild('openSector') openSector: ElementRef;
- @ViewChild('mainFocus') mainFocus: ElementRef;
- @ViewChild('iframe') iframe: ElementRef;
- focusSub: Subscription;
- resizeSub: Subscription;
- currentLocale: string;
- sectorData: Sector[] = [];
-
- constructor(
- @Inject(LOCALE_ID) protected localeId: string,
- public sanitizer: DomSanitizer,
- private tabChangeService: TabChangeService,
- private cdr: ChangeDetectorRef,
- private resizeService: ResizeService,
- private utilityService: UtilityService,
- private route: ActivatedRoute,
- private appSettingsService: AppSettingsService
- ) {
- this.selectedSector = null;
-
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit(): void {
- // Get data. Data is passed with resolver in router
- const pageData = this.route.snapshot.data.pages;
- this.introText = pageData.find(
- (el) => el.id === 'science-innovation-system'
- );
-
- this.sectorData = this.route.snapshot.data.sectorData;
-
- // Set title and meta tags
- switch (this.localeId) {
- case 'fi': {
- this.setTitle(
- 'Tutkimus- ja innovaatiojärjestelmä - Tiedejatutkimus.fi'
- );
- break;
- }
- case 'en': {
- this.setTitle('Research and innovation system - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle(
- 'Finländskt forsknings- och innovationssystem - Forskning.fi'
- );
- break;
- }
- }
-
- this.utilityService.addMeta(
- this.metaTags['title' + this.currentLocale],
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
-
- // Hide skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(false);
- this.resizeSub = this.resizeService.onResize$.subscribe((_) =>
- this.onResize()
- );
- }
-
- ngAfterViewInit() {
- // Focus with skip-links
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.mainFocus.nativeElement.focus();
- }
- }
- );
- this.colWidth = this.iframe.nativeElement.offsetWidth;
- this.cdr.detectChanges();
- }
-
- onResize() {
- this.colWidth = this.iframe.nativeElement.offsetWidth;
- }
-
- trackByFn(index) {
- return index;
- }
-
- ngOnDestroy() {
- // Reset skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(true);
- this.tabChangeService.targetFocus('');
- this.resizeSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ ViewChild,
+ ElementRef,
+ LOCALE_ID,
+ Inject,
+ AfterViewInit,
+ OnDestroy,
+ ChangeDetectorRef,
+} from '@angular/core';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { DomSanitizer } from '@angular/platform-browser';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { Subscription } from 'rxjs';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { Sector } from 'src/app/portal/models/research-innovation-system/sector.model';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { SafeUrlPipe } from '../../../pipes/safe-url.pipe';
+import { NgFor, NgClass, NgIf } from '@angular/common';
+import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-research-innovation-system',
+ templateUrl: './research-innovation-system.component.html',
+ styleUrls: ['./research-innovation-system.component.scss'],
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ MatAccordion,
+ NgFor,
+ MatExpansionPanel,
+ MatExpansionPanelHeader,
+ MatExpansionPanelTitle,
+ NgClass,
+ NgIf,
+ RouterLink,
+ SafeUrlPipe,
+ ],
+})
+export class ResearchInnovationSystemComponent
+ implements OnInit, AfterViewInit, OnDestroy
+{
+ faTimes = faTimes;
+ openedIdx = -1;
+
+ private metaTags = MetaTags.researchInnovation;
+ private commonTags = MetaTags.common;
+
+ colWidth = 0;
+
+ introText: any;
+
+ selectedSector: any;
+ rearrangedList: any[];
+ @ViewChild('openSector') openSector: ElementRef;
+ @ViewChild('mainFocus') mainFocus: ElementRef;
+ @ViewChild('iframe') iframe: ElementRef;
+ focusSub: Subscription;
+ resizeSub: Subscription;
+ currentLocale: string;
+ sectorData: Sector[] = [];
+
+ constructor(
+ @Inject(LOCALE_ID) protected localeId: string,
+ public sanitizer: DomSanitizer,
+ private tabChangeService: TabChangeService,
+ private cdr: ChangeDetectorRef,
+ private resizeService: ResizeService,
+ private utilityService: UtilityService,
+ private route: ActivatedRoute,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.selectedSector = null;
+
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit(): void {
+ // Get data. Data is passed with resolver in router
+ const pageData = this.route.snapshot.data.pages;
+ this.introText = pageData.find(
+ (el) => el.id === 'science-innovation-system'
+ );
+
+ this.sectorData = this.route.snapshot.data.sectorData;
+
+ // Set title and meta tags
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle(
+ 'Tutkimus- ja innovaatiojärjestelmä - Tiedejatutkimus.fi'
+ );
+ break;
+ }
+ case 'en': {
+ this.setTitle('Research and innovation system - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle(
+ 'Finländskt forsknings- och innovationssystem - Forskning.fi'
+ );
+ break;
+ }
+ }
+
+ this.utilityService.addMeta(
+ this.metaTags['title' + this.currentLocale],
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+
+ // Hide skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(false);
+ this.resizeSub = this.resizeService.onResize$.subscribe((_) =>
+ this.onResize()
+ );
+ }
+
+ ngAfterViewInit() {
+ // Focus with skip-links
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.mainFocus.nativeElement.focus();
+ }
+ }
+ );
+ this.colWidth = this.iframe.nativeElement.offsetWidth;
+ this.cdr.detectChanges();
+ }
+
+ onResize() {
+ this.colWidth = this.iframe.nativeElement.offsetWidth;
+ }
+
+ trackByFn(index) {
+ return index;
+ }
+
+ ngOnDestroy() {
+ // Reset skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(true);
+ this.tabChangeService.targetFocus('');
+ this.resizeSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/science-politics/science-politics.scss-theme-shared.scss b/src/app/portal/components/science-politics/science-politics.scss-theme-shared.scss
index dd4ae63de..9fe73b5b9 100644
--- a/src/app/portal/components/science-politics/science-politics.scss-theme-shared.scss
+++ b/src/app/portal/components/science-politics/science-politics.scss-theme-shared.scss
@@ -1,18 +1,18 @@
-@import '@angular/material/theming';
-
-@mixin app-science-politics-theme-shared($theme) {
- $primary: map-get($theme, primary);
-
- app-figures,
- app-research-innovation-system,
- app-single-figure,
- app-service-info {
- .base {
- background: rgba(255, 255, 255, 0.5);
- }
-
- .content {
- border-left: 0.5rem solid mat-color($primary, 200);
- }
- }
-}
+@use 'migration' as *;
+
+@mixin app-science-politics-theme-shared($theme) {
+ $primary: map-get($theme, primary);
+
+ app-figures,
+ app-research-innovation-system,
+ app-single-figure,
+ app-service-info {
+ .base {
+ background: rgba(255, 255, 255, 0.5);
+ }
+
+ .content {
+ border-left: 0.5rem solid mat-color($primary, 200);
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/tki-reports/tki-reports.component.scss b/src/app/portal/components/science-politics/tki-reports/tki-reports.component.scss
index d2590b71b..169bcde75 100644
--- a/src/app/portal/components/science-politics/tki-reports/tki-reports.component.scss
+++ b/src/app/portal/components/science-politics/tki-reports/tki-reports.component.scss
@@ -1,206 +1,206 @@
-.tki-reports {
- h2 {
- color: #4d4d4d;
- font-size: 0.9rem;
- line-height: 1.5rem;
- margin-left: 16px;
- margin-top: 10px;
- }
-
- .search-field {
- justify-content: space-between;
- height: 40px;
- z-index: 105;
- max-width: 470px;
- }
-
- .input {
- box-shadow: #4546b9 0px 0px 0px 2px;
- border-radius: 4px;
- border: none;
- }
-
- .search-and-modal-wrapper {
- display: flex;
- flex-direction: column;
- justify-content: left;
- }
-
- .search-inputs-wrap {
- display: flex;
- justify-content: center;
-
- input:focus-visible {
- box-shadow: none !important;
- }
- }
-
- .tki-search-inputs-row {
- max-width: 600px;
- width: 100%;
-
- .search-button {
- margin-top: -2px;
- margin-left: 10px;
- z-index: 105;
- }
-
- .reset-search {
- margin: 9px 0px 8px -24px;
- z-index: 105;
- cursor: pointer;
- }
-
- button {
- min-width: 121px;
- }
- }
-
-
- .tki-search-results-modal {
- h2 {
- margin-top: 1.2rem;
- margin-left: 20px;
- }
-
- background: #fff scroll;
- box-shadow: rgb(69, 70, 185) 0px 0px 0px 2px;
- border-radius: 4px;
- margin: 8px;
- width: 100%;
- min-width: 250px;
- max-width: 600px;
- z-index: 104;
- position: absolute;
-
- mark {
- font-weight: 900;
- background-color: initial;
- }
-
- ul {
- padding-inline-start: 0px;
- list-style: none;
-
- li {
- cursor: pointer;
- padding: 15px;
- margin: 0px -0px 0px -15px;
-
- &:hover {
- background: #e2e2f2;
- }
- }
- }
-
- .no-results-wrap {
- width: 600px;
- }
-
- p {
- margin-left: 16px;
- margin-top: 10px;
- }
-
- app-list-item {
- border: none;
- cursor: pointer;
-
- &:hover {
- background: #e2e2f2;
- }
-
- &.active {
- background: #4546b9;
- }
-
- p {
- margin: 0px;
- }
- }
-
- .list-group-item.active {
- margin-top: 0px;
- }
-
- hr:last-of-type {
- display: none !important;
- }
- }
-
-
- .all-publications-link {
- color: rgb(51, 102, 204);
- font-weight: 700;
- }
-
- .tki-search-inputs-row {
- .search-input {
- margin-top: -1px;
- }
-
- button {
- display: flex;
- margin-top: -1px;
- line-height: 39px;
- }
- }
-
- .tki-search-results-desktop {
- th.mat-header-cell:first-of-type {
- padding-left: 0px;
- }
-
- .mat-header-cell {
- font-weight: bold;
- font-size: 0.9rem;
- color: #4d4d4d;
- }
-
- .mat-sort-header {
- min-width: 100px;
- }
-
- .mat-cell {
- font-size: 0.95rem;
- padding: 10px 20px 10px 0px;
-
- a {
- color: #4546b9;
- font-weight: 500;
- }
- }
- }
-
- .tki-search-results-mobile {
- p {
- margin-left: 16px;
- margin-top: 10px;
- }
-
- hr {
- margin-top: 35px;
- margin-bottom: 20px;
- }
-
- a {
- color: #4546b9;
- font-weight: 500;
- }
-
- mark {
- font-weight: 900;
- background-color: initial;
- }
- }
-}
-
-.modal-overlay {
- position: absolute;
- z-index: 103;
- left: 0;
- top: 88px;
- background: rgba(0, 0, 0, 0.5);
- width: 100%;
- height: 100vh;
-}
+.tki-reports {
+ h2 {
+ color: #4d4d4d;
+ font-size: 0.9rem;
+ line-height: 1.5rem;
+ margin-left: 16px;
+ margin-top: 10px;
+ }
+
+ .search-field {
+ justify-content: space-between;
+ height: 40px;
+ z-index: 105;
+ max-width: 470px;
+ }
+
+ .input {
+ box-shadow: #4546b9 0px 0px 0px 2px;
+ border-radius: 4px;
+ border: none;
+ }
+
+ .search-and-modal-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: left;
+ }
+
+ .search-inputs-wrap {
+ display: flex;
+ justify-content: center;
+
+ input:focus-visible {
+ box-shadow: none !important;
+ }
+ }
+
+ .tki-search-inputs-row {
+ max-width: 600px;
+ width: 100%;
+
+ .search-button {
+ margin-top: -2px;
+ margin-left: 10px;
+ z-index: 105;
+ }
+
+ .reset-search {
+ margin: 9px 0px 8px -24px;
+ z-index: 105;
+ cursor: pointer;
+ }
+
+ button {
+ min-width: 121px;
+ }
+ }
+
+
+ .tki-search-results-modal {
+ h2 {
+ margin-top: 1.2rem;
+ margin-left: 20px;
+ }
+
+ background: #fff scroll;
+ box-shadow: rgb(69, 70, 185) 0px 0px 0px 2px;
+ border-radius: 4px;
+ margin: 8px;
+ width: 100%;
+ min-width: 250px;
+ max-width: 600px;
+ z-index: 104;
+ position: absolute;
+
+ mark {
+ font-weight: 900;
+ background-color: initial;
+ }
+
+ ul {
+ padding-inline-start: 0px;
+ list-style: none;
+
+ li {
+ cursor: pointer;
+ padding: 15px;
+ margin: 0px -0px 0px -15px;
+
+ &:hover {
+ background: #e2e2f2;
+ }
+ }
+ }
+
+ .no-results-wrap {
+ width: 600px;
+ }
+
+ p {
+ margin-left: 16px;
+ margin-top: 10px;
+ }
+
+ app-list-item {
+ border: none;
+ cursor: pointer;
+
+ &:hover {
+ background: #e2e2f2;
+ }
+
+ &.active {
+ background: #4546b9;
+ }
+
+ p {
+ margin: 0px;
+ }
+ }
+
+ .list-group-item.active {
+ margin-top: 0px;
+ }
+
+ hr:last-of-type {
+ display: none !important;
+ }
+ }
+
+
+ .all-publications-link {
+ color: rgb(51, 102, 204);
+ font-weight: 700;
+ }
+
+ .tki-search-inputs-row {
+ .search-input {
+ margin-top: -1px;
+ }
+
+ button {
+ display: flex;
+ margin-top: -1px;
+ line-height: 39px;
+ }
+ }
+
+ .tki-search-results-desktop {
+ th.mat-mdc-header-cell:first-of-type {
+ padding-left: 0px;
+ }
+
+ .mat-mdc-header-cell {
+ font-weight: bold;
+ font-size: 0.9rem;
+ color: #4d4d4d;
+ }
+
+ .mat-sort-header {
+ min-width: 100px;
+ }
+
+ .mat-mdc-cell {
+ font-size: 0.95rem;
+ padding: 10px 20px 10px 0px;
+
+ a {
+ color: #4546b9;
+ font-weight: 500;
+ }
+ }
+ }
+
+ .tki-search-results-mobile {
+ p {
+ margin-left: 16px;
+ margin-top: 10px;
+ }
+
+ hr {
+ margin-top: 35px;
+ margin-bottom: 20px;
+ }
+
+ a {
+ color: #4546b9;
+ font-weight: 500;
+ }
+
+ mark {
+ font-weight: 900;
+ background-color: initial;
+ }
+ }
+}
+
+.modal-overlay {
+ position: absolute;
+ z-index: 103;
+ left: 0;
+ top: 88px;
+ background: rgba(0, 0, 0, 0.5);
+ width: 100%;
+ height: 100vh;
+}
diff --git a/src/app/portal/components/science-politics/tki-reports/tki-reports.component.ts b/src/app/portal/components/science-politics/tki-reports/tki-reports.component.ts
index cf78b9d52..d4362a167 100644
--- a/src/app/portal/components/science-politics/tki-reports/tki-reports.component.ts
+++ b/src/app/portal/components/science-politics/tki-reports/tki-reports.component.ts
@@ -1,249 +1,258 @@
-import {
- AfterViewInit,
- Component,
- ElementRef,
- HostListener,
- Inject,
- LOCALE_ID,
- OnDestroy,
- OnInit,
- QueryList,
- ViewChild,
- ViewChildren,
-} from '@angular/core';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
-import dummyData from 'src/app/portal/components/science-politics/tki-reports/tki-dummydata.json';
-import { DOCUMENT } from '@angular/common';
-import { UtilityService } from '@shared/services/utility.service';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { Subscription } from 'rxjs';
-import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { ListItemComponent } from '@portal/components/search-bar/list-item/list-item.component';
-
-export interface Report {
- id: number;
- authors: string[];
- name: string[];
- link: string;
- year: string;
- keywords: string[];
-}
-
-@Component({
- selector: 'app-tki-reports',
- templateUrl: './tki-reports.component.html',
- styleUrls: ['./tki-reports.component.scss']
-})
-export class TkiReportsComponent implements OnInit, AfterViewInit, OnDestroy {
-
- @ViewChild('searchInput') search: ElementRef;
- @ViewChildren(ListItemComponent) items: QueryList;
-
- public utilityService: UtilityService;
- private isMobileSubscription: Subscription;
- private keyManager: ActiveDescendantKeyManager;
-
- filteredSourceData: Report[] = this.replaceEmptyKeywordsWithDash(dummyData);
- resultDataMobile: Report[] = this.replaceEmptyKeywordsWithDash(dummyData);
- formattedTableData = new MatTableDataSource(this.replaceEmptyKeywordsWithDash(this.filteredSourceData));
-
- locAuthors = $localize`:@@tkiAuthors:Tekijät`;
- locName = $localize`:@@tkiName:Nimi`;
- locYear = $localize`:@@yearOfPublication:Julkaisuvuosi`;
- locKeywords = $localize`:@@tkiKeywords:Asiasanat`;
-
- displayedColumns = ['name', 'year', 'authors', 'keywords'];
- value = '';
- noSearchesDone = true;
- modalOverlayVisible = false;
- modalOverlayHeight: number;
- HEADER_HEIGHT = 88;
- isMobile = false;
-
- matchedAuthors = new Set();
- matchedNames = new Set();
- matchedKeywords = new Set();
- matchedYears = new Set();
- filteredArticleIds = new Set();
- faSearch = faSearch;
-
- constructor(
- @Inject(DOCUMENT) private document: Document,
- @Inject(LOCALE_ID) protected localeId,
- private appSettingsService: AppSettingsService,
- ) {}
-
- ngOnInit() {
- this.isMobileSubscription = this.appSettingsService.mobileStatus.subscribe((status) => {
- this.isMobile = status;
- });
- switch (this.localeId) {
- case 'fi': {
- this.setTitle('Selvityksiä ja raportteja - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle('Studies and reports - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle('Utredningar och rapporter - Forskning.fi');
- break;
- }
- }
- //TODO: fetch data from back end here
- }
-
- @ViewChild(MatSort) sort: MatSort;
-
- ngAfterViewInit() {
- this.formattedTableData.sort = this.sort;
- this.keyManager = new ActiveDescendantKeyManager(this.items).withWrap().withTypeAhead();
- this.keyManager.setFirstItemActive();
- }
-
- @HostListener('document:keyup', ['$event'])
- handleKeyboardEvents(event: KeyboardEvent) {
- if (event.key === 'Escape') {
- this.closeModal();
- }
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- doFiltering(keepModalOpen: boolean) {
- this.noSearchesDone = false;
- const regEx = new RegExp(this.value, 'i');
- let ind = 0;
- this.matchedAuthors.clear();
- this.matchedKeywords.clear();
- this.matchedNames.clear();
- this.matchedYears.clear();
- this.filteredArticleIds.clear();
- this.filteredSourceData = [...dummyData];
-
- dummyData.forEach((entry: any) => {
- entry.authors.forEach((author) => {
- if (author.match(regEx)) {
- this.matchedAuthors.add([author, dummyData[ind].id]);
- this.filteredArticleIds.add(dummyData[ind].id);
- }
- });
-
- entry.name.forEach((name) => {
- if (name.match(regEx)) {
- this.matchedNames.add([name, dummyData[ind].id]);
- this.filteredArticleIds.add(dummyData[ind].id);
- }
- });
-
- entry.keywords.forEach((kword) => {
- if (kword.match(regEx) && this.value !== '-') {
- this.matchedKeywords.add([kword, dummyData[ind].id]);
- this.filteredArticleIds.add(dummyData[ind].id);
- }
- });
-
- if (entry.year.match(regEx)) {
- this.matchedYears.add([entry.year, dummyData[ind].id]);
- this.filteredArticleIds.add(dummyData[ind].id);
- }
-
- ind += 1;
- });
- this.filteredSourceData = this.filteredSourceData.filter((item) => {
- return this.filteredArticleIds.has(item.id);
- });
-
- // This is called when search button is pressed. Table data is filtered only after modal is closed.
- if (!keepModalOpen) {
- this.closeModal();
- this.formattedTableData.data = [...this.filteredSourceData];
- this.resultDataMobile = [...this.filteredSourceData];
- this.search.nativeElement.blur();
- }
- }
-
- replaceEmptyKeywordsWithDash(sourceData: Report[]) {
- sourceData = sourceData.map(report => {
- report.keywords = report.keywords.map(keyword => {
- if (keyword === '') {
- keyword = '-';
- }
- return keyword;
- });
- return report;
- });
- return sourceData;
- }
-
- modalSearchRowClick(atricleId: number) {
- this.filteredSourceData = [...dummyData];
- this.filteredSourceData = this.filteredSourceData.filter((item) => {
- return item.id === atricleId;
- });
- this.resultDataMobile = [...this.replaceEmptyKeywordsWithDash(this.filteredSourceData)];
- this.formattedTableData.data = [...this.replaceEmptyKeywordsWithDash(this.filteredSourceData)];
- this.closeModal();
- this.search.nativeElement.blur();
- }
-
- onFocus() {
- this.modalOverlayVisible = true;
- if (this.noSearchesDone) {
- this.value = '';
- }
- this.modalOverlayHeight = this.document.body.scrollHeight - this.HEADER_HEIGHT;
- }
-
- closeModal() {
- this.modalOverlayVisible = false;
- this.keyManager.setActiveItem(-1);
- }
-
- modalOverlayClick() {
- this.closeModal();
- }
-
- resetSearch() {
- this.value = '';
- this.doFiltering(false);
- }
-
- // Keycodes
- onKeyup(event) {
- // Handle arrows
- if (event.keyCode === 38) {
- } else if (event.keyCode === 40) {
- } else if (event.keyCode === 13 && this.keyManager.activeItem) {
- // Do search with enter when an item is selected
- this.modalSearchRowClick(this.keyManager.activeItem.id);
- } else if (event.keyCode === 13 && !this.keyManager.activeItem) {
- /// Do default search with enter when no items are selected
- this.doFiltering(false);
- } else {
- this.doFiltering(true);
- }
- // Hide auto-suggest with esc key
- if (event.keyCode === 27) {
- this.modalOverlayVisible = false;
- } else if (event.keyCode !== 78) {
- this.keyManager.onKeydown(event);
- }
- }
-
- // Disable up & down arrows on input. Normally moves caret on start or end of input
- disableKeys(event) {
- if (event.keyCode === 40 || event.keyCode === 38) {
- return false;
- }
- }
-
- ngOnDestroy(): void {
- this.isMobileSubscription.unsubscribe();
- }
-}
+import {
+ AfterViewInit,
+ Component,
+ ElementRef,
+ HostListener,
+ Inject,
+ LOCALE_ID,
+ OnDestroy,
+ OnInit,
+ QueryList,
+ ViewChild,
+ ViewChildren,
+} from '@angular/core';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import dummyData from 'src/app/portal/components/science-politics/tki-reports/tki-dummydata.json';
+import { DOCUMENT, NgIf, NgStyle, NgFor } from '@angular/common';
+import { UtilityService } from '@shared/services/utility.service';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
+import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { Subscription } from 'rxjs';
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { ListItemComponent } from '@portal/components/search-bar/list-item/list-item.component';
+import { HighlightSearchPipe } from '../../../pipes/highlight.pipe';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ListItemComponent as ListItemComponent_1 } from '../../search-bar/list-item/list-item.component';
+import { PrimaryActionButtonComponent } from '../../../../shared/components/buttons/primary-action-button/primary-action-button.component';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
+export interface Report {
+ id: number;
+ authors: string[];
+ name: string[];
+ link: string;
+ year: string;
+ keywords: string[];
+}
+
+@Component({
+ selector: 'app-tki-reports',
+ templateUrl: './tki-reports.component.html',
+ styleUrls: ['./tki-reports.component.scss'],
+ standalone: true,
+ imports: [BannerDividerComponent, NgIf, NgStyle, MatInput, FormsModule, PrimaryActionButtonComponent, NgFor, ListItemComponent_1, FontAwesomeModule, MatTable, MatSort, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatSortHeader, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, HighlightSearchPipe]
+})
+export class TkiReportsComponent implements OnInit, AfterViewInit, OnDestroy {
+
+ @ViewChild('searchInput') search: ElementRef;
+ @ViewChildren(ListItemComponent) items: QueryList;
+
+ public utilityService: UtilityService;
+ private isMobileSubscription: Subscription;
+ private keyManager: ActiveDescendantKeyManager;
+
+ filteredSourceData: Report[] = this.replaceEmptyKeywordsWithDash(dummyData);
+ resultDataMobile: Report[] = this.replaceEmptyKeywordsWithDash(dummyData);
+ formattedTableData = new MatTableDataSource(this.replaceEmptyKeywordsWithDash(this.filteredSourceData));
+
+ locAuthors = $localize`:@@tkiAuthors:Tekijät`;
+ locName = $localize`:@@tkiName:Nimi`;
+ locYear = $localize`:@@yearOfPublication:Julkaisuvuosi`;
+ locKeywords = $localize`:@@tkiKeywords:Asiasanat`;
+
+ displayedColumns = ['name', 'year', 'authors', 'keywords'];
+ value = '';
+ noSearchesDone = true;
+ modalOverlayVisible = false;
+ modalOverlayHeight: number;
+ HEADER_HEIGHT = 88;
+ isMobile = false;
+
+ matchedAuthors = new Set();
+ matchedNames = new Set();
+ matchedKeywords = new Set();
+ matchedYears = new Set();
+ filteredArticleIds = new Set();
+ faSearch = faSearch;
+
+ constructor(
+ @Inject(DOCUMENT) private document: Document,
+ @Inject(LOCALE_ID) protected localeId,
+ private appSettingsService: AppSettingsService,
+ ) {}
+
+ ngOnInit() {
+ this.isMobileSubscription = this.appSettingsService.mobileStatus.subscribe((status) => {
+ this.isMobile = status;
+ });
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle('Selvityksiä ja raportteja - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle('Studies and reports - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle('Utredningar och rapporter - Forskning.fi');
+ break;
+ }
+ }
+ //TODO: fetch data from back end here
+ }
+
+ @ViewChild(MatSort) sort: MatSort;
+
+ ngAfterViewInit() {
+ this.formattedTableData.sort = this.sort;
+ this.keyManager = new ActiveDescendantKeyManager(this.items).withWrap().withTypeAhead();
+ this.keyManager.setFirstItemActive();
+ }
+
+ @HostListener('document:keyup', ['$event'])
+ handleKeyboardEvents(event: KeyboardEvent) {
+ if (event.key === 'Escape') {
+ this.closeModal();
+ }
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ doFiltering(keepModalOpen: boolean) {
+ this.noSearchesDone = false;
+ const regEx = new RegExp(this.value, 'i');
+ let ind = 0;
+ this.matchedAuthors.clear();
+ this.matchedKeywords.clear();
+ this.matchedNames.clear();
+ this.matchedYears.clear();
+ this.filteredArticleIds.clear();
+ this.filteredSourceData = [...dummyData];
+
+ dummyData.forEach((entry: any) => {
+ entry.authors.forEach((author) => {
+ if (author.match(regEx)) {
+ this.matchedAuthors.add([author, dummyData[ind].id]);
+ this.filteredArticleIds.add(dummyData[ind].id);
+ }
+ });
+
+ entry.name.forEach((name) => {
+ if (name.match(regEx)) {
+ this.matchedNames.add([name, dummyData[ind].id]);
+ this.filteredArticleIds.add(dummyData[ind].id);
+ }
+ });
+
+ entry.keywords.forEach((kword) => {
+ if (kword.match(regEx) && this.value !== '-') {
+ this.matchedKeywords.add([kword, dummyData[ind].id]);
+ this.filteredArticleIds.add(dummyData[ind].id);
+ }
+ });
+
+ if (entry.year.match(regEx)) {
+ this.matchedYears.add([entry.year, dummyData[ind].id]);
+ this.filteredArticleIds.add(dummyData[ind].id);
+ }
+
+ ind += 1;
+ });
+ this.filteredSourceData = this.filteredSourceData.filter((item) => {
+ return this.filteredArticleIds.has(item.id);
+ });
+
+ // This is called when search button is pressed. Table data is filtered only after modal is closed.
+ if (!keepModalOpen) {
+ this.closeModal();
+ this.formattedTableData.data = [...this.filteredSourceData];
+ this.resultDataMobile = [...this.filteredSourceData];
+ this.search.nativeElement.blur();
+ }
+ }
+
+ replaceEmptyKeywordsWithDash(sourceData: Report[]) {
+ sourceData = sourceData.map(report => {
+ report.keywords = report.keywords.map(keyword => {
+ if (keyword === '') {
+ keyword = '-';
+ }
+ return keyword;
+ });
+ return report;
+ });
+ return sourceData;
+ }
+
+ modalSearchRowClick(atricleId: number) {
+ this.filteredSourceData = [...dummyData];
+ this.filteredSourceData = this.filteredSourceData.filter((item) => {
+ return item.id === atricleId;
+ });
+ this.resultDataMobile = [...this.replaceEmptyKeywordsWithDash(this.filteredSourceData)];
+ this.formattedTableData.data = [...this.replaceEmptyKeywordsWithDash(this.filteredSourceData)];
+ this.closeModal();
+ this.search.nativeElement.blur();
+ }
+
+ onFocus() {
+ this.modalOverlayVisible = true;
+ if (this.noSearchesDone) {
+ this.value = '';
+ }
+ this.modalOverlayHeight = this.document.body.scrollHeight - this.HEADER_HEIGHT;
+ }
+
+ closeModal() {
+ this.modalOverlayVisible = false;
+ this.keyManager.setActiveItem(-1);
+ }
+
+ modalOverlayClick() {
+ this.closeModal();
+ }
+
+ resetSearch() {
+ this.value = '';
+ this.doFiltering(false);
+ }
+
+ // Keycodes
+ onKeyup(event) {
+ // Handle arrows
+ if (event.keyCode === 38) {
+ } else if (event.keyCode === 40) {
+ } else if (event.keyCode === 13 && this.keyManager.activeItem) {
+ // Do search with enter when an item is selected
+ this.modalSearchRowClick(this.keyManager.activeItem.id);
+ } else if (event.keyCode === 13 && !this.keyManager.activeItem) {
+ /// Do default search with enter when no items are selected
+ this.doFiltering(false);
+ } else {
+ this.doFiltering(true);
+ }
+ // Hide auto-suggest with esc key
+ if (event.keyCode === 27) {
+ this.modalOverlayVisible = false;
+ } else if (event.keyCode !== 78) {
+ this.keyManager.onKeydown(event);
+ }
+ }
+
+ // Disable up & down arrows on input. Normally moves caret on start or end of input
+ disableKeys(event) {
+ if (event.keyCode === 40 || event.keyCode === 38) {
+ return false;
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.isMobileSubscription.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/search-bar/list-item/list-item.component.ts b/src/app/portal/components/search-bar/list-item/list-item.component.ts
index 746f951d9..45b7e0223 100644
--- a/src/app/portal/components/search-bar/list-item/list-item.component.ts
+++ b/src/app/portal/components/search-bar/list-item/list-item.component.ts
@@ -2,10 +2,11 @@ import { Component, HostBinding, Input } from '@angular/core';
import { Highlightable } from '@angular/cdk/a11y';
@Component({
- selector: 'app-list-item',
- template: `
+ selector: 'app-list-item',
+ template: `
;
- let autoSuggestService: AutosuggestService;
- let searchService: SearchService;
- let activatedRouteStub: ActivatedRoute;
-
- beforeEach(() => {
+import {
+ TestBed,
+ ComponentFixture,
+ fakeAsync,
+ tick,
+} from '@angular/core/testing';
+import { SearchService } from '@portal/services/search.service';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { WINDOW_PROVIDERS } from '@shared/services/window.service';
+import { ActivatedRouteStub } from 'src/testing/activated-route-stub';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { AppConfigService } from '@shared/services/app-config-service.service';
+import { AppConfigServiceMock } from '@portal/services/search.service.spec';
+import { MatMenuModule } from '@angular/material/menu';
+import { NO_ERRORS_SCHEMA, QueryList } from '@angular/core';
+import { SearchBarComponent } from './search-bar.component';
+import { AutosuggestService } from '@portal/services/autosuggest.service';
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+import response from 'src/testdata/autosuggest-response.json'
+import { MatDialogModule } from '@angular/material/dialog';
+
+describe('SearchBarComponent', () => {
+ const aggregations = response.aggregations
+ const hits = response.hits
+ const suggest = response.suggest
+
+ let searchBarComponent: SearchBarComponent;
+ let fixture: ComponentFixture;
+ let autoSuggestService: AutosuggestService;
+ let searchService: SearchService;
+ let activatedRouteStub: ActivatedRoute;
+
+ beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [SearchBarComponent],
- providers: [
+ providers: [
SearchService,
AutosuggestService,
{ provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
{ provide: AppConfigService, useClass: AppConfigServiceMock },
WINDOW_PROVIDERS,
- ],
- imports: [
+ ],
+ imports: [
HttpClientTestingModule,
RouterTestingModule,
MatMenuModule,
- MatDialogModule
- ],
- schemas: [NO_ERRORS_SCHEMA],
- });
-
- fixture = TestBed.createComponent(SearchBarComponent);
- searchBarComponent = fixture.componentInstance;
- autoSuggestService = TestBed.inject(AutosuggestService);
- activatedRouteStub = TestBed.inject(ActivatedRoute);
- searchService = TestBed.inject(SearchService);
- });
-
- it('should be created', () => {
- expect(searchBarComponent).toBeDefined();
- });
-
- it('should change search target', () => {
- searchBarComponent.changeTarget({ value: 'name' });
- expect(searchBarComponent.selectedTarget).toBe('name');
-
- searchBarComponent.changeTarget({ value: 'all' });
- expect(searchBarComponent.selectedTarget).toBe(null);
-
- searchBarComponent.changeTarget({ value: 'title' });
- expect(searchBarComponent.selectedTarget).toBe('title');
- });
-
- it('should reset search', () => {
- searchBarComponent.searchInput.nativeElement.value = 'test';
- searchBarComponent.selectedTarget = 'test';
- expect(searchBarComponent.searchInput.nativeElement.value).toBe('test');
-
- // Needed for term length check
- searchBarComponent.searchService.searchTerm = 'test';
-
- searchBarComponent.resetSearch();
- expect(searchBarComponent.selectedTarget).toBeFalsy();
- expect(searchBarComponent.searchInput.nativeElement.value).toBeFalsy();
- });
-
- it('autosuggest response should be valid', fakeAsync(() => {
- // Spy for autosuggest service search to return mock response
- spyOn(autoSuggestService, 'search').and.returnValue(
- of({ aggregations, hits, suggest }).pipe(delay(1))
- );
-
- // ngOnInit
- fixture.detectChanges();
- tick(1);
-
- // subscription
- fixture.detectChanges();
- tick(1);
-
- // Init values
- searchBarComponent.queryField.setValue('');
- searchBarComponent.fireAutoSuggest();
- searchBarComponent.queryField.setValue('tes');
-
- // Tick over the debounce time of 1000
- tick(1001);
-
- // Example check
- expect(
- searchBarComponent.autoSuggestResponse[0].hits.hits[0]._source
- .publicationName
- ).toBe('Eksaktit testit testissä:Fisher, Barnard ja Boschloo');
-
- // Check completion
- expect(searchBarComponent.completion).toBe('tesla');
- }));
-
- // Check completion
- it('should return correct completion', () => {
- // Test case
- searchBarComponent.autoSuggestResponse = [
- {
- suggest: {
- mySuggestions: [{ options: [{ text: '3-legged-person' }] }],
- },
- },
- ];
-
- searchBarComponent.searchInput.nativeElement.value = 'legge';
- searchBarComponent.getCompletion();
-
- expect(searchBarComponent.completion).toBe('d-person');
- });
-
- // Check keydown after completion
- it('should empty completion and add it to searchInput', () => {
- searchBarComponent.completion = 'test-case';
- searchBarComponent.searchInput.nativeElement.value = 'complete ';
-
- // Init keyManager required for onKeydown
- searchBarComponent.items = new QueryList();
- searchBarComponent.ngAfterViewInit();
-
- searchBarComponent.onKeydown({ keyCode: 39 });
-
- // Expect completion to be moved to search input
- expect(searchBarComponent.searchInput.nativeElement.value).toBe(
- 'complete test-case'
- );
- expect(searchBarComponent.completion).toBe('');
- });
-
- // Check new input
- it('newInput should update search service input', () => {
- // Init values
- let term;
- const newTerm = 'test-term';
- searchBarComponent.searchInput.nativeElement.value = newTerm;
-
- // Check that term is initially empty
- searchService.currentInput.subscribe((val) => (term = val));
- expect(term).toBeFalsy();
-
- // Call new input
- searchBarComponent.newInput(undefined, undefined);
- // Get search service input
- searchService.currentInput.subscribe((val) => (term = val));
-
- // Check that input matches
- expect(term).toBe(newTerm);
- });
-});
+ MatDialogModule,
+ SearchBarComponent
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+});
+
+ fixture = TestBed.createComponent(SearchBarComponent);
+ searchBarComponent = fixture.componentInstance;
+ autoSuggestService = TestBed.inject(AutosuggestService);
+ activatedRouteStub = TestBed.inject(ActivatedRoute);
+ searchService = TestBed.inject(SearchService);
+ });
+
+ it('should be created', () => {
+ expect(searchBarComponent).toBeDefined();
+ });
+
+ it('should change search target', () => {
+ searchBarComponent.changeTarget({ value: 'name' });
+ expect(searchBarComponent.selectedTarget).toBe('name');
+
+ searchBarComponent.changeTarget({ value: 'all' });
+ expect(searchBarComponent.selectedTarget).toBe(null);
+
+ searchBarComponent.changeTarget({ value: 'title' });
+ expect(searchBarComponent.selectedTarget).toBe('title');
+ });
+
+ it('should reset search', () => {
+ searchBarComponent.searchInput.nativeElement.value = 'test';
+ searchBarComponent.selectedTarget = 'test';
+ expect(searchBarComponent.searchInput.nativeElement.value).toBe('test');
+
+ // Needed for term length check
+ searchBarComponent.searchService.searchTerm = 'test';
+
+ searchBarComponent.resetSearch();
+ expect(searchBarComponent.selectedTarget).toBeFalsy();
+ expect(searchBarComponent.searchInput.nativeElement.value).toBeFalsy();
+ });
+
+ it('autosuggest response should be valid', fakeAsync(() => {
+ // Spy for autosuggest service search to return mock response
+ spyOn(autoSuggestService, 'search').and.returnValue(
+ of({ aggregations, hits, suggest }).pipe(delay(1))
+ );
+
+ // ngOnInit
+ fixture.detectChanges();
+ tick(1);
+
+ // subscription
+ fixture.detectChanges();
+ tick(1);
+
+ // Init values
+ searchBarComponent.queryField.setValue('');
+ searchBarComponent.fireAutoSuggest();
+ searchBarComponent.queryField.setValue('tes');
+
+ // Tick over the debounce time of 1000
+ tick(1001);
+
+ // Example check
+ expect(
+ searchBarComponent.autoSuggestResponse[0].hits.hits[0]._source
+ .publicationName
+ ).toBe('Eksaktit testit testissä:Fisher, Barnard ja Boschloo');
+
+ // Check completion
+ expect(searchBarComponent.completion).toBe('tesla');
+ }));
+
+ // Check completion
+ it('should return correct completion', () => {
+ // Test case
+ searchBarComponent.autoSuggestResponse = [
+ {
+ suggest: {
+ mySuggestions: [{ options: [{ text: '3-legged-person' }] }],
+ },
+ },
+ ];
+
+ searchBarComponent.searchInput.nativeElement.value = 'legge';
+ searchBarComponent.getCompletion();
+
+ expect(searchBarComponent.completion).toBe('d-person');
+ });
+
+ // Check keydown after completion
+ it('should empty completion and add it to searchInput', () => {
+ searchBarComponent.completion = 'test-case';
+ searchBarComponent.searchInput.nativeElement.value = 'complete ';
+
+ // Init keyManager required for onKeydown
+ searchBarComponent.items = new QueryList();
+ searchBarComponent.ngAfterViewInit();
+
+ searchBarComponent.onKeydown({ keyCode: 39 });
+
+ // Expect completion to be moved to search input
+ expect(searchBarComponent.searchInput.nativeElement.value).toBe(
+ 'complete test-case'
+ );
+ expect(searchBarComponent.completion).toBe('');
+ });
+
+ // Check new input
+ it('newInput should update search service input', () => {
+ // Init values
+ let term;
+ const newTerm = 'test-term';
+ searchBarComponent.searchInput.nativeElement.value = newTerm;
+
+ // Check that term is initially empty
+ searchService.currentInput.subscribe((val) => (term = val));
+ expect(term).toBeFalsy();
+
+ // Call new input
+ searchBarComponent.newInput(undefined, undefined);
+ // Get search service input
+ searchService.currentInput.subscribe((val) => (term = val));
+
+ // Check that input matches
+ expect(term).toBe(newTerm);
+ });
+});
diff --git a/src/app/portal/components/search-bar/search-bar.component.ts b/src/app/portal/components/search-bar/search-bar.component.ts
index 7fd5ac400..c54de7d33 100644
--- a/src/app/portal/components/search-bar/search-bar.component.ts
+++ b/src/app/portal/components/search-bar/search-bar.component.ts
@@ -20,13 +20,13 @@ import {
LOCALE_ID,
OnDestroy,
} from '@angular/core';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, NgIf, NgFor, NgStyle, NgClass, AsyncPipe } from '@angular/common';
import { SearchService } from '@portal/services/search.service';
import { SortService } from '@portal/services/sort.service';
import { AutosuggestService } from '@portal/services/autosuggest.service';
import { TabChangeService } from '@portal/services/tab-change.service';
-import { UntypedFormControl } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
import { Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { SingleItemService } from '@portal/services/single-item.service';
@@ -38,13 +38,38 @@ import { FilterService } from '@portal/services/filters/filter.service';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { StaticDataService } from '@portal/services/static-data.service';
import { AppSettingsService } from '@shared/services/app-settings.service';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { HighlightSearchPipe } from '../../pipes/highlight.pipe';
+import { NotificationBannerComponent } from '../../../shared/components/notification-banner/notification-banner.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { ClickOutsideDirective } from '../../../shared/directives/click-outside.directive';
+import { MatButton } from '@angular/material/button';
@Component({
- selector: 'app-search-bar',
- templateUrl: './search-bar.component.html',
- styleUrls: ['./search-bar.component.scss'],
- encapsulation: ViewEncapsulation.None,
+ selector: 'app-search-bar',
+ templateUrl: './search-bar.component.html',
+ styleUrls: ['./search-bar.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ FormsModule,
+ MatButton,
+ MatMenuTrigger,
+ NgIf,
+ MatMenu,
+ NgFor,
+ MatMenuItem,
+ ReactiveFormsModule,
+ NgStyle,
+ ClickOutsideDirective,
+ NgClass,
+ MatProgressSpinner,
+ ListItemComponent,
+ RouterLink,
+ NotificationBannerComponent,
+ AsyncPipe,
+ HighlightSearchPipe,
+ ],
})
export class SearchBarComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('searchTargetMenuTrigger') searchTargetMenuTrigger: MatMenuTrigger;
diff --git a/src/app/portal/components/service-info/service-info.component.scss-theme.scss b/src/app/portal/components/service-info/service-info.component.scss-theme.scss
index 1d56e9b52..040d810ad 100644
--- a/src/app/portal/components/service-info/service-info.component.scss-theme.scss
+++ b/src/app/portal/components/service-info/service-info.component.scss-theme.scss
@@ -1,8 +1,8 @@
-@import '@angular/material/theming';
-
-@mixin app-service-info-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-service-info {
- }
-}
+@use 'migration' as *;
+
+@mixin app-service-info-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-service-info {
+ }
+}
diff --git a/src/app/portal/components/service-info/service-info.component.ts b/src/app/portal/components/service-info/service-info.component.ts
index dc29026b0..0956c8429 100644
--- a/src/app/portal/components/service-info/service-info.component.ts
+++ b/src/app/portal/components/service-info/service-info.component.ts
@@ -1,170 +1,192 @@
-import {
- Component,
- OnInit,
- Inject,
- LOCALE_ID,
- AfterViewInit,
- ViewChild,
- ElementRef,
- OnDestroy,
- PLATFORM_ID,
- ViewEncapsulation,
- ChangeDetectorRef,
- TemplateRef
-} from '@angular/core';
-import { faInfo } from '@fortawesome/free-solid-svg-icons';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { DOCUMENT, isPlatformBrowser, Location, ViewportScroller } from '@angular/common';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { ActivatedRoute} from '@angular/router';
-import { AppSettingsService } from '@shared/services/app-settings.service';
+import {
+ Component,
+ OnInit,
+ Inject,
+ LOCALE_ID,
+ AfterViewInit,
+ ViewChild,
+ ElementRef,
+ OnDestroy,
+ PLATFORM_ID,
+ ViewEncapsulation,
+ ChangeDetectorRef,
+ TemplateRef
+} from '@angular/core';
+import { faInfo } from '@fortawesome/free-solid-svg-icons';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { DOCUMENT, isPlatformBrowser, Location, ViewportScroller, NgFor, NgIf } from '@angular/common';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { ActivatedRoute} from '@angular/router';
+import { AppSettingsService } from '@shared/services/app-settings.service';
import { Subscription } from 'rxjs';
-
+import { SanitizeHtmlPipe } from '../../../shared/pipes/sanitize-html.pipe';
+import { DialogComponent } from '../../../shared/components/dialog/dialog.component';
+import { ReviewComponent } from '../../../shared/components/review/review.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
+import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
+import { BannerDividerComponent } from '../../../shared/components/banner-divider/banner-divider.component';
+
@Component({
- selector: 'app-service-info',
- templateUrl: './service-info.component.html',
- styleUrls: ['./service-info.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class ServiceInfoComponent implements OnInit, AfterViewInit, OnDestroy {
- faInfo = faInfo;
-
- @ViewChild('mainFocus') mainFocus: ElementRef;
- @ViewChild('reviewDialog') reviewDialog: TemplateRef;
- focusSub: Subscription;
- title: string;
- openedIdx: any;
- currentLocale: string;
- routeSub: Subscription;
-
- private metaTags = MetaTags.serviceInfo;
- private commonTags = MetaTags.common;
- content: any[];
- showDialog: boolean;
-
- sections = [
- { header: $localize`:@@serviceInfoHeader:Tietoa palvelusta`, items: [] },
- { header: $localize`:@@faq:Usein kysytyt kysymykset`, items: [] },
- ];
-
- constructor(
- private scroller: ViewportScroller,
- @Inject(LOCALE_ID) protected localeId: string,
- private tabChangeService: TabChangeService,
- private location: Location,
- private utilityService: UtilityService,
- private route: ActivatedRoute,
- @Inject(DOCUMENT) private document: any,
- @Inject(PLATFORM_ID) private platformId: object,
- private cdr: ChangeDetectorRef,
- private appSettingsService: AppSettingsService
- ) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- this.routeSub = this.route.fragment.subscribe((fragment: string) => {
- this.openedIdx = fragment;
- this.scrollToId(fragment);
- });
-
- // Get page data. Data is passed with resolver in router
- const pageData = this.route.snapshot.data.pages;
-
- // Set Service info content
- this.sections[0].items = pageData.filter((el) =>
- el.id.includes('service-info')
- );
-
- // Set FAQ content
- this.sections[1].items = pageData.filter((el) => el.id.includes('faq'));
-
- this.utilityService.addMeta(
- this.metaTags['title' + this.currentLocale],
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
-
- switch (this.localeId) {
- case 'fi': {
- this.setTitle('Tietoa palvelusta - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle('Service info - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle('Information om tjänsten - Forskning.fi');
- break;
- }
- }
- // Hide skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(false);
-
- this.title = this.getTitle();
- //this.openedIdx = this.location.path(true).split('#')[1];
- }
-
- setTitle(title: string) {
- this.utilityService.setTitle(title);
- }
-
- getTitle() {
- return this.utilityService.getTitle().split('-').shift().trim();
- }
-
- ngAfterViewInit() {
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.mainFocus.nativeElement.focus();
- }
- }
- );
-
- // Add review toggle onclick functionality to corresponding link
- if (isPlatformBrowser(this.platformId)) {
- const reviewLink = this.document.getElementById('toggle-review');
- if (reviewLink) {
- reviewLink.setAttribute('href', 'javascript:void(0)');
- reviewLink.addEventListener('click', (evt: Event) =>
- this.toggleReview()
- );
- }
- }
- }
-
- scrollToId(id: string) {
- setTimeout(() => {
- this.scroller.scrollToAnchor(id);
- }, 10);
- }
-
- toggleReview() {
- this.showDialog = !this.showDialog;
- }
-
- open(id: string) {
- this.openedIdx = id;
- // Timeout because by default open() is executed before close()
- setTimeout(() => {
- this.location.replaceState(this.location.path() + '#' + id);
- }, 1);
- }
-
- close(id: string) {
- if (this.openedIdx === id) this.openedIdx = '';
- this.location.replaceState(this.location.path());
- this.cdr.detectChanges();
- }
-
- ngOnDestroy() {
- // Reset skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(true);
- this.tabChangeService.targetFocus('');
- this.focusSub?.unsubscribe();
- this.routeSub?.unsubscribe();
- }
-}
+ selector: 'app-service-info',
+ templateUrl: './service-info.component.html',
+ styleUrls: ['./service-info.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ BreadcrumbComponent,
+ MatAccordion,
+ NgFor,
+ MatExpansionPanel,
+ MatExpansionPanelHeader,
+ MatExpansionPanelTitle,
+ FontAwesomeModule,
+ NgIf,
+ ReviewComponent,
+ DialogComponent,
+ SanitizeHtmlPipe,
+ ],
+})
+export class ServiceInfoComponent implements OnInit, AfterViewInit, OnDestroy {
+ faInfo = faInfo;
+
+ @ViewChild('mainFocus') mainFocus: ElementRef;
+ @ViewChild('reviewDialog') reviewDialog: TemplateRef;
+ focusSub: Subscription;
+ title: string;
+ openedIdx: any;
+ currentLocale: string;
+ routeSub: Subscription;
+
+ private metaTags = MetaTags.serviceInfo;
+ private commonTags = MetaTags.common;
+ content: any[];
+ showDialog: boolean;
+
+ sections = [
+ { header: $localize`:@@serviceInfoHeader:Tietoa palvelusta`, items: [] },
+ { header: $localize`:@@faq:Usein kysytyt kysymykset`, items: [] },
+ ];
+
+ constructor(
+ private scroller: ViewportScroller,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private tabChangeService: TabChangeService,
+ private location: Location,
+ private utilityService: UtilityService,
+ private route: ActivatedRoute,
+ @Inject(DOCUMENT) private document: any,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private cdr: ChangeDetectorRef,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ this.routeSub = this.route.fragment.subscribe((fragment: string) => {
+ this.openedIdx = fragment;
+ this.scrollToId(fragment);
+ });
+
+ // Get page data. Data is passed with resolver in router
+ const pageData = this.route.snapshot.data.pages;
+
+ // Set Service info content
+ this.sections[0].items = pageData.filter((el) =>
+ el.id.includes('service-info')
+ );
+
+ // Set FAQ content
+ this.sections[1].items = pageData.filter((el) => el.id.includes('faq'));
+
+ this.utilityService.addMeta(
+ this.metaTags['title' + this.currentLocale],
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle('Tietoa palvelusta - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle('Service info - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle('Information om tjänsten - Forskning.fi');
+ break;
+ }
+ }
+ // Hide skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(false);
+
+ this.title = this.getTitle();
+ //this.openedIdx = this.location.path(true).split('#')[1];
+ }
+
+ setTitle(title: string) {
+ this.utilityService.setTitle(title);
+ }
+
+ getTitle() {
+ return this.utilityService.getTitle().split('-').shift().trim();
+ }
+
+ ngAfterViewInit() {
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.mainFocus.nativeElement.focus();
+ }
+ }
+ );
+
+ // Add review toggle onclick functionality to corresponding link
+ if (isPlatformBrowser(this.platformId)) {
+ const reviewLink = this.document.getElementById('toggle-review');
+ if (reviewLink) {
+ reviewLink.setAttribute('href', 'javascript:void(0)');
+ reviewLink.addEventListener('click', (evt: Event) =>
+ this.toggleReview()
+ );
+ }
+ }
+ }
+
+ scrollToId(id: string) {
+ setTimeout(() => {
+ this.scroller.scrollToAnchor(id);
+ }, 10);
+ }
+
+ toggleReview() {
+ this.showDialog = !this.showDialog;
+ }
+
+ open(id: string) {
+ this.openedIdx = id;
+ // Timeout because by default open() is executed before close()
+ setTimeout(() => {
+ this.location.replaceState(this.location.path() + '#' + id);
+ }, 1);
+ }
+
+ close(id: string) {
+ if (this.openedIdx === id) this.openedIdx = '';
+ this.location.replaceState(this.location.path());
+ this.cdr.detectChanges();
+ }
+
+ ngOnDestroy() {
+ // Reset skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(true);
+ this.tabChangeService.targetFocus('');
+ this.focusSub?.unsubscribe();
+ this.routeSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/single/related-links/related-links.component.ts b/src/app/portal/components/single/related-links/related-links.component.ts
index 227ce0ab6..1d601efd1 100644
--- a/src/app/portal/components/single/related-links/related-links.component.ts
+++ b/src/app/portal/components/single/related-links/related-links.component.ts
@@ -1,144 +1,144 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import { SingleItemService } from '../../../services/single-item.service';
-import {
- ActivatedRoute,
- Router,
- UrlTree,
- UrlSegmentGroup,
- PRIMARY_OUTLET,
- UrlSegment,
-} from '@angular/router';
-import { AppSettingsService } from '@shared/services/app-settings.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { SingleItemService } from '../../../services/single-item.service';
+import { ActivatedRoute, Router, UrlTree, UrlSegmentGroup, PRIMARY_OUTLET, UrlSegment, RouterLink } from '@angular/router';
+import { AppSettingsService } from '@shared/services/app-settings.service';
import { Subscription } from 'rxjs';
-
+import { NgFor, NgIf } from '@angular/common';
+
@Component({
- selector: 'app-related-links',
- templateUrl: './related-links.component.html',
- styleUrls: ['./related-links.component.scss'],
-})
-export class RelatedLinksComponent implements OnInit, OnDestroy {
- @Input() id: any;
- @Input() filter: string;
- @Input() relatedData: any;
-
- relatedList = [
- {
- label: $localize`:@@publications:Julkaisut`,
- tab: 'publications',
- disabled: true,
- },
- { label: $localize`:@@authors:Tutkijat`, tab: 'persons', disabled: true },
- { label: $localize`:@@fundings:Hankkeet`, tab: 'fundings', disabled: true },
- {
- label: $localize`:@@datasets:Aineistot`,
- tab: 'datasets',
- disabled: true,
- },
- {
- label: $localize`:@@infrastructures:Infrastruktuurit`,
- tab: 'infrastructures',
- disabled: true,
- },
- {
- label: $localize`:@@otherResearchActivities:Muut tutkimusaktiviteetit`,
- tab: '',
- disabled: true,
- },
- {
- label: $localize`:@@organizations:Organisaatiot`,
- tab: 'organizations',
- disabled: true,
- },
- ];
-
- docCountData: any;
- currentParent: string;
- routeSub: Subscription;
- dataSub: Subscription;
- currentLocale: string;
- queryParams: any;
-
- constructor(
- private singleService: SingleItemService,
- private route: ActivatedRoute,
- private router: Router,
- private appSettingsService: AppSettingsService
- ) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- this.docCountData = [];
- }
-
- ngOnInit(): void {
- // Subscribe to route params, get current parent from current url
- this.routeSub = this.route.params.subscribe(() => {
- const currentUrl = this.router.url;
- const tree: UrlTree = this.router.parseUrl(currentUrl);
- const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
- const s: UrlSegment[] = g.segments;
- this.currentParent = s[1].path + 's';
- this.relatedList = this.relatedList.filter(
- (item) => item.tab !== this.currentParent
- );
- });
-
- // Uncomment setRelated method call when developing
- if (this.relatedData) {
- // this.setRelated();
- } else {
- if (this.id) {
- this.getDocCounts(this.id);
- }
- }
- }
-
- setRelated() {
- this.queryParams = {};
- if (this.relatedData?.organizations) {
- this.docCountData.organizations = {
- doc_count: this.relatedData.organizations.length,
- };
- this.relatedList.map(
- (item) =>
- (item.disabled =
- this.docCountData[item.tab]?.doc_count > 0 ? false : true)
- );
-
- // Set query params
- Object.assign(this.queryParams, {
- organization: this.relatedData.organizations,
- });
- }
- }
-
- // Get doc counts with single service getCount method, assign to to docCountData and show in appropriate counts in template
- getDocCounts(id: string) {
- this.queryParams = { [this.filter]: this.id };
- this.dataSub = this.singleService
- .getCount(this.currentParent, id, this.relatedData)
- .subscribe((data) => {
- // TODO: Remove check for currentParent
- this.docCountData = this.currentParent === 'organizations' ? data : [];
- if (this.docCountData.aggregations) {
- this.docCountData = this.docCountData?.aggregations?._index.buckets;
- // Set related list item to disabled to false if matching item has docs
- this.relatedList.map(
- (item) =>
- (item.disabled =
- this.docCountData[item.tab]?.doc_count > 0 ? false : true)
- );
- }
- });
- }
-
- ngOnDestroy() {
- this.routeSub?.unsubscribe();
- this.dataSub?.unsubscribe();
- }
-}
+ selector: 'app-related-links',
+ templateUrl: './related-links.component.html',
+ styleUrls: ['./related-links.component.scss'],
+ standalone: true,
+ imports: [
+ NgFor,
+ NgIf,
+ RouterLink,
+ ],
+})
+export class RelatedLinksComponent implements OnInit, OnDestroy {
+ @Input() id: any;
+ @Input() filter: string;
+ @Input() relatedData: any;
+
+ relatedList = [
+ {
+ label: $localize`:@@publications:Julkaisut`,
+ tab: 'publications',
+ disabled: true,
+ },
+ { label: $localize`:@@authors:Tutkijat`, tab: 'persons', disabled: true },
+ { label: $localize`:@@fundings:Hankkeet`, tab: 'fundings', disabled: true },
+ {
+ label: $localize`:@@datasets:Aineistot`,
+ tab: 'datasets',
+ disabled: true,
+ },
+ {
+ label: $localize`:@@infrastructures:Infrastruktuurit`,
+ tab: 'infrastructures',
+ disabled: true,
+ },
+ {
+ label: $localize`:@@otherResearchActivities:Muut tutkimusaktiviteetit`,
+ tab: '',
+ disabled: true,
+ },
+ {
+ label: $localize`:@@organizations:Organisaatiot`,
+ tab: 'organizations',
+ disabled: true,
+ },
+ ];
+
+ docCountData: any;
+ currentParent: string;
+ routeSub: Subscription;
+ dataSub: Subscription;
+ currentLocale: string;
+ queryParams: any;
+
+ constructor(
+ private singleService: SingleItemService,
+ private route: ActivatedRoute,
+ private router: Router,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ this.docCountData = [];
+ }
+
+ ngOnInit(): void {
+ // Subscribe to route params, get current parent from current url
+ this.routeSub = this.route.params.subscribe(() => {
+ const currentUrl = this.router.url;
+ const tree: UrlTree = this.router.parseUrl(currentUrl);
+ const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
+ const s: UrlSegment[] = g.segments;
+ this.currentParent = s[1].path + 's';
+ this.relatedList = this.relatedList.filter(
+ (item) => item.tab !== this.currentParent
+ );
+ });
+
+ // Uncomment setRelated method call when developing
+ if (this.relatedData) {
+ // this.setRelated();
+ } else {
+ if (this.id) {
+ this.getDocCounts(this.id);
+ }
+ }
+ }
+
+ setRelated() {
+ this.queryParams = {};
+ if (this.relatedData?.organizations) {
+ this.docCountData.organizations = {
+ doc_count: this.relatedData.organizations.length,
+ };
+ this.relatedList.map(
+ (item) =>
+ (item.disabled =
+ this.docCountData[item.tab]?.doc_count > 0 ? false : true)
+ );
+
+ // Set query params
+ Object.assign(this.queryParams, {
+ organization: this.relatedData.organizations,
+ });
+ }
+ }
+
+ // Get doc counts with single service getCount method, assign to to docCountData and show in appropriate counts in template
+ getDocCounts(id: string) {
+ this.queryParams = { [this.filter]: this.id };
+ this.dataSub = this.singleService
+ .getCount(this.currentParent, id, this.relatedData)
+ .subscribe((data) => {
+ // TODO: Remove check for currentParent
+ this.docCountData = this.currentParent === 'organizations' ? data : [];
+ if (this.docCountData.aggregations) {
+ this.docCountData = this.docCountData?.aggregations?._index.buckets;
+ // Set related list item to disabled to false if matching item has docs
+ this.relatedList.map(
+ (item) =>
+ (item.disabled =
+ this.docCountData[item.tab]?.doc_count > 0 ? false : true)
+ );
+ }
+ });
+ }
+
+ ngOnDestroy() {
+ this.routeSub?.unsubscribe();
+ this.dataSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/single/share/share.component.ts b/src/app/portal/components/single/share/share.component.ts
index f86e2abd6..291045e67 100644
--- a/src/app/portal/components/single/share/share.component.ts
+++ b/src/app/portal/components/single/share/share.component.ts
@@ -1,57 +1,61 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit, Inject, LOCALE_ID, Input, OnChanges } from '@angular/core';
-import { faCopy } from '@fortawesome/free-solid-svg-icons';
-import { MatSnackBar } from '@angular/material/snack-bar';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnInit, Inject, LOCALE_ID, Input, OnChanges } from '@angular/core';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
+import { MatSnackBar } from '@angular/material/snack-bar';
import { DOCUMENT } from '@angular/common';
-
+import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
+
@Component({
- selector: 'app-share',
- templateUrl: './share.component.html',
- styleUrls: ['./share.component.scss'],
-})
-export class ShareComponent implements OnInit, OnChanges {
- @Input() big = true;
- @Input() id: string;
-
- faCopy = faCopy;
- currentUrl: string;
- message: string;
-
- copyLink = $localize`:@@copyLink:Kopioi linkki`;
-
- constructor(
- private snackBar: MatSnackBar,
- @Inject(DOCUMENT) private document: Document,
- @Inject(LOCALE_ID) protected localeId: string
- ) {}
-
- ngOnInit() {
- switch (this.localeId) {
- case 'en': {
- this.message = 'Link copied to clipboard';
- break;
- }
- case 'sv': {
- this.message = 'Länk kopierad till urklipp';
- break;
- }
- default: {
- this.message = 'Linkki kopioitu leikepöydälle';
- }
- }
- }
-
- ngOnChanges() {
- this.currentUrl = this.document.location.href;
- }
-
- openSnackBar() {
- this.snackBar.open(this.message);
- }
-}
+ selector: 'app-share',
+ templateUrl: './share.component.html',
+ styleUrls: ['./share.component.scss'],
+ standalone: true,
+ imports: [SecondaryButtonComponent, CdkCopyToClipboard],
+})
+export class ShareComponent implements OnInit, OnChanges {
+ @Input() big = true;
+ @Input() id: string;
+
+ faCopy = faCopy;
+ currentUrl: string;
+ message: string;
+
+ copyLink = $localize`:@@copyLink:Kopioi linkki`;
+
+ constructor(
+ private snackBar: MatSnackBar,
+ @Inject(DOCUMENT) private document: Document,
+ @Inject(LOCALE_ID) protected localeId: string
+ ) {}
+
+ ngOnInit() {
+ switch (this.localeId) {
+ case 'en': {
+ this.message = 'Link copied to clipboard';
+ break;
+ }
+ case 'sv': {
+ this.message = 'Länk kopierad till urklipp';
+ break;
+ }
+ default: {
+ this.message = 'Linkki kopioitu leikepöydälle';
+ }
+ }
+ }
+
+ ngOnChanges() {
+ this.currentUrl = this.document.location.href;
+ }
+
+ openSnackBar() {
+ this.snackBar.open(this.message);
+ }
+}
diff --git a/src/app/portal/components/single/single-dataset/dataset-author/dataset-author.component.ts b/src/app/portal/components/single/single-dataset/dataset-author/dataset-author.component.ts
index 897805b8a..e95e554c0 100644
--- a/src/app/portal/components/single/single-dataset/dataset-author/dataset-author.component.ts
+++ b/src/app/portal/components/single/single-dataset/dataset-author/dataset-author.component.ts
@@ -1,22 +1,30 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
import { Component, Input, OnInit } from '@angular/core';
-
+import { OrcidComponent } from '../../../../../shared/components/orcid/orcid.component';
+import { NgIf, NgFor } from '@angular/common';
+
@Component({
- selector: 'app-dataset-author',
- templateUrl: './dataset-author.component.html',
- styleUrls: ['./dataset-author.component.scss'],
-})
-export class DatasetAuthorComponent implements OnInit {
- @Input() org: any;
- @Input() noLinks: boolean;
-
- constructor() {}
-
- ngOnInit(): void {}
-}
+ selector: 'app-dataset-author',
+ templateUrl: './dataset-author.component.html',
+ styleUrls: ['./dataset-author.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgFor,
+ OrcidComponent,
+ ],
+})
+export class DatasetAuthorComponent implements OnInit {
+ @Input() org: any;
+ @Input() noLinks: boolean;
+
+ constructor() {}
+
+ ngOnInit(): void {}
+}
diff --git a/src/app/portal/components/single/single-dataset/single-dataset.component.html b/src/app/portal/components/single/single-dataset/single-dataset.component.html
index ae4021108..26dc3c283 100644
--- a/src/app/portal/components/single/single-dataset/single-dataset.component.html
+++ b/src/app/portal/components/single/single-dataset/single-dataset.component.html
@@ -337,7 +337,7 @@
+
+
{{
item.label ? item.label : item.key
}}
-
+
@@ -374,7 +377,8 @@
-
+
+
"
[id]="filter.field + field.key | replaceSpace"
>
-
+
+
;
-
- const routerSpy = {
- navigate: jasmine.createSpy('navigate'),
- };
-
- const mockActivatedRoute = {
- queryParams: of({ param: 'testParam' }),
- params: of({ input: 'test input' }),
- };
-
- beforeEach((() => {
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FiltersComponent } from './filters.component';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WINDOW_PROVIDERS } from '@shared/services/window.service';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import AggResponse from 'src/testdata/aggregationresponse.json';
+import AggPublicationResponse from 'src/testdata/aggpublicationresponse.json';
+import { of } from 'rxjs/internal/observable/of';
+import { PublicationFilterService } from '@portal/services/filters/publication-filter.service';
+import { MatDialogModule } from '@angular/material/dialog';
+
+describe('FiltersComponent', () => {
+ let component: FiltersComponent;
+ let fixture: ComponentFixture;
+
+ const routerSpy = {
+ navigate: jasmine.createSpy('navigate'),
+ };
+
+ const mockActivatedRoute = {
+ queryParams: of({ param: 'testParam' }),
+ params: of({ input: 'test input' }),
+ };
+
+ beforeEach((() => {
TestBed.configureTestingModule({
- declarations: [FiltersComponent],
- providers: [
+ providers: [
{ provide: Router, useValue: routerSpy },
{ provide: ActivatedRoute, useValue: mockActivatedRoute },
WINDOW_PROVIDERS,
PublicationFilterService,
- ],
- imports: [MatDialogModule],
- schemas: [NO_ERRORS_SCHEMA],
- }).compileComponents();
-
- fixture = TestBed.createComponent(FiltersComponent);
- component = fixture.componentInstance;
- component.responseData = AggResponse;
- component.activeFilters = {};
- component.width = 1000;
- component.mobile = false;
- component.showButton = false;
- }));
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-
- it('should add parameters to preselected filter category', () => {
- component.activeFilters = Object.assign({}, { year: ['2020', '2019'] });
-
- component.selectionChange('year', '2021');
-
- expect(routerSpy.navigate).toHaveBeenCalledWith([], {
- queryParams: {
- year: ['2020', '2019', '2021'],
- sort: undefined,
- page: 1,
- },
- queryParamsHandling: 'merge',
- });
- });
-
- it('should change year range accordingly', () => {
- // Set from year to 2020 and expect query parameters to be in asceding order from chosen value to latest
- const res = Object.assign({}, { value: 2020 });
-
- component.range(res, 'from');
-
- expect(routerSpy.navigate).toHaveBeenCalledWith([], {
- queryParams: {
- year: ['2021', '2020'],
- sort: undefined,
- page: 1,
- },
- queryParamsHandling: 'merge',
- });
- });
-
- it('should select all from parent', () => {
- component.responseData.aggregations.year.subData =
- AggResponse.aggregations.year.buckets;
- const subFilter = component.responseData.aggregations.year;
-
- component.selectAll('year', subFilter);
-
- // Note: Year params are not in order because of preselection test
- expect(routerSpy.navigate).toHaveBeenCalledWith([], {
- queryParams: {
- year: ['2021', '2020', '2019'],
- sort: undefined,
- page: 1,
- },
- queryParamsHandling: 'merge',
- });
- });
-
- it('should filter with term', () => {
- const event = Object.assign({}, { target: { value: 'test' } });
- // Buckets need to be moved up one level until shapeData method is called
- component.responseData.aggregations.testField.buckets =
- AggResponse.aggregations.testField.testFields.buckets;
- component.filterInput(event, 'testField');
-
- expect(component.showMoreCount.testField).toBeDefined();
- });
-
- it('should render corresponding filter header', () => {
- component.responseData = AggPublicationResponse;
- component.currentFilter = [{ field: 'testField', label: 'Test header' }];
- component.ngOnChanges();
-
- fixture.detectChanges();
-
- const span = fixture.nativeElement.querySelector('span');
- expect(span.textContent).toBe('Test header');
- });
-});
+ ],
+ imports: [MatDialogModule, FiltersComponent],
+ schemas: [NO_ERRORS_SCHEMA],
+}).compileComponents();
+
+ fixture = TestBed.createComponent(FiltersComponent);
+ component = fixture.componentInstance;
+ component.responseData = AggResponse;
+ component.activeFilters = {};
+ component.width = 1000;
+ component.mobile = false;
+ component.showButton = false;
+ }));
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should add parameters to preselected filter category', () => {
+ component.activeFilters = Object.assign({}, { year: ['2020', '2019'] });
+
+ component.selectionChange('year', '2021');
+
+ expect(routerSpy.navigate).toHaveBeenCalledWith([], {
+ queryParams: {
+ year: ['2020', '2019', '2021'],
+ sort: undefined,
+ page: 1,
+ },
+ queryParamsHandling: 'merge',
+ });
+ });
+
+ it('should change year range accordingly', () => {
+ // Set from year to 2020 and expect query parameters to be in asceding order from chosen value to latest
+ const res = Object.assign({}, { value: 2020 });
+
+ component.range(res, 'from');
+
+ expect(routerSpy.navigate).toHaveBeenCalledWith([], {
+ queryParams: {
+ year: ['2021', '2020'],
+ sort: undefined,
+ page: 1,
+ },
+ queryParamsHandling: 'merge',
+ });
+ });
+
+ it('should select all from parent', () => {
+ component.responseData.aggregations.year.subData =
+ AggResponse.aggregations.year.buckets;
+ const subFilter = component.responseData.aggregations.year;
+
+ component.selectAll('year', subFilter);
+
+ // Note: Year params are not in order because of preselection test
+ expect(routerSpy.navigate).toHaveBeenCalledWith([], {
+ queryParams: {
+ year: ['2021', '2020', '2019'],
+ sort: undefined,
+ page: 1,
+ },
+ queryParamsHandling: 'merge',
+ });
+ });
+
+ it('should filter with term', () => {
+ const event = Object.assign({}, { target: { value: 'test' } });
+ // Buckets need to be moved up one level until shapeData method is called
+ component.responseData.aggregations.testField.buckets =
+ AggResponse.aggregations.testField.testFields.buckets;
+ component.filterInput(event, 'testField');
+
+ expect(component.showMoreCount.testField).toBeDefined();
+ });
+
+ it('should render corresponding filter header', () => {
+ component.responseData = AggPublicationResponse;
+ component.currentFilter = [{ field: 'testField', label: 'Test header' }];
+ component.ngOnChanges();
+
+ fixture.detectChanges();
+
+ const span = fixture.nativeElement.querySelector('span');
+ expect(span.textContent).toBe('Test header');
+ });
+});
diff --git a/src/app/portal/components/results/filters/filters.component.ts b/src/app/portal/components/results/filters/filters.component.ts
index c430b799c..5883ce9da 100644
--- a/src/app/portal/components/results/filters/filters.component.ts
+++ b/src/app/portal/components/results/filters/filters.component.ts
@@ -20,8 +20,8 @@ import {
ViewEncapsulation,
ViewChild,
} from '@angular/core';
-import { MatSelectionList } from '@angular/material/list';
-import { Router, ActivatedRoute } from '@angular/router';
+import { MatSelectionList, MatListOption } from '@angular/material/list';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
import { SortService } from '../../../services/sort.service';
import { Subscription } from 'rxjs';
import { WINDOW } from 'src/app/shared/services/window.service';
@@ -35,17 +35,70 @@ import { InfrastructureFilterService } from 'src/app/portal/services/filters/inf
import { OrganizationFilterService } from 'src/app/portal/services/filters/organization-filter.service';
import { NewsFilterService } from 'src/app/portal/services/filters/news-filter.service';
import { faSlidersH, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
-import { isPlatformBrowser, DOCUMENT } from '@angular/common';
+import { isPlatformBrowser, DOCUMENT, NgTemplateOutlet, NgIf, NgFor, NgClass } from '@angular/common';
import { DataService } from 'src/app/portal/services/data.service';
import { FundingCallFilterService } from '@portal/services/filters/funding-call-filter.service';
import { AppSettingsService } from '@shared/services/app-settings.service';
import { FilterConfigType } from 'src/types';
+import { ConvertToArrayPipe } from '../../../pipes/convert-to-array.pipe';
+import { ReplaceSpacePipe } from '../../../pipes/replace-space';
+import { FilterItemPipe } from '../../../pipes/filter-item.pipe';
+import { ThousandSeparatorPipe } from '../../../../shared/pipes/thousand-separator.pipe';
+import { DialogComponent } from '../../../../shared/components/dialog/dialog.component';
+import { MatButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDatepicker } from '@angular/material/datepicker';
+import { MatInput } from '@angular/material/input';
+import { MatOption } from '@angular/material/core';
+import { MatSelect } from '@angular/material/select';
+import { MatFormField, MatLabel, MatSuffix } from '@angular/material/form-field';
+import { MatSlideToggle } from '@angular/material/slide-toggle';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
@Component({
- selector: 'app-filters',
- templateUrl: './filters.component.html',
- styleUrls: ['./filters.component.scss'],
- encapsulation: ViewEncapsulation.None,
+ selector: 'app-filters',
+ templateUrl: './filters.component.html',
+ styleUrls: ['./filters.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ SecondaryButtonComponent,
+ NgTemplateOutlet,
+ NgIf,
+ MatProgressSpinner,
+ FontAwesomeModule,
+ NgFor,
+ MatExpansionPanel,
+ MatExpansionPanelHeader,
+ NgClass,
+ MatExpansionPanelTitle,
+ TooltipModule,
+ MatSlideToggle,
+ MatFormField,
+ MatLabel,
+ MatSelect,
+ MatOption,
+ MatInput,
+ MatDatepickerInput,
+ MatDatepickerToggle,
+ MatSuffix,
+ MatIcon,
+ MatDatepickerToggleIcon,
+ MatDatepicker,
+ MatSelectionList,
+ MatListOption,
+ MatButton,
+ RouterLink,
+ DialogComponent,
+ ThousandSeparatorPipe,
+ FilterItemPipe,
+ ReplaceSpacePipe,
+ ConvertToArrayPipe,
+ ],
})
export class FiltersComponent implements OnInit, OnDestroy, OnChanges {
@Input() responseData: any;
@@ -79,7 +132,7 @@ export class FiltersComponent implements OnInit, OnDestroy, OnChanges {
visualFilterSub: Subscription;
subFilters: MatSelectionList[];
totalCount = 0;
- faSlidersH = faSlidersH;
+ faSlidersH: any = faSlidersH;
faPlus = faPlus;
faMinus = faMinus;
panelHeight = 'auto';
diff --git a/src/app/portal/components/results/filters/filters.theme-shared.scss b/src/app/portal/components/results/filters/filters.theme-shared.scss
index 5c655c77c..b048cc41d 100644
--- a/src/app/portal/components/results/filters/filters.theme-shared.scss
+++ b/src/app/portal/components/results/filters/filters.theme-shared.scss
@@ -1,144 +1,158 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-filters-theme-shared($theme) {
- $primary: map-get($theme, primary);
-
-
- app-funding-call-category-filters {
- .mat-chip {
- border: 2px solid mat-color($primary, 500);
- color: mat-color($primary, 500);
-
- &.mat-standard-chip {
- background-color: mat-contrast($primary, 500);
- background: mat-contrast($primary, 500);
- &:hover::after, &:focus::after {
- opacity: 0;
- }
- &:hover {
- background: mat-color($primary, 100) !important;
- }
- &.mat-chip-selected {
- background-color: mat-color($primary, 500) !important;
- }
- }
- }
- }
-
- app-filters,
- .filters-dialog {
- .filter-sidebar {
- background: mat-color($primary, 100);
- }
-
- .filter-icon {
- color: mat-color($primary);
- }
-
- .error-color {
- color: red !important;
- }
-
- h3 {
- color: mat-color($primary);
- }
-
- .filter-sidebar h3 {
- background: mat-color($primary, 100);
- }
-
- span.mat-checkbox-label,
- span.label {
- color: mat-contrast($primary, 200);
- }
-
- .mat-checkbox .mat-checkbox-frame {
- background: mat-contrast($primary, 500);
- }
-
- span.amount {
- color: mat-contrast($primary, 400);
- }
-
- // .mat-expansion-panel:not([class*=mat-elevation-z]):not(:last-child) {
- // border-bottom: 1px solid mat-color($primary, 400);
- // }
-
- // .mat-expansion-panel {
- // background: unset!important;
- // }
-
- mat-expansion-panel.mat-expansion-panel.mat-expanded {
- background: mat-color($primary, 50);
- }
-
- .mat-expansion-panel-header,
- .row.single {
- background: mat-color($primary, 50);
- }
-
- .mat-expansion-indicator:after {
- color: mat-color($primary) !important;
- }
-
- button.show-options {
- color: mat-color($primary);
- }
-
- .navbar-toggler {
- background: mat-color($primary, 50);
- border: 1px solid mat-color($primary);
- }
-
- // Select all
- .row.select-all:hover {
- background: rgba(0, 0, 0, 0.04);
- }
-
- // Single checkbox items
- .mat-checkbox:hover {
- background: none !important;
- }
-
- .separator {
- border: 0.5px solid mat-color($primary);
- }
-
- .show-more {
- color: mat-color($primary);
- }
-
- .modal-close {
- background: mat-color($primary, 500);
- color: mat-contrast($primary, 500);
- }
-
- .shared {
- tr:nth-child(odd) {
- background-color: mat-color($primary, 50);
- }
-
- th,
- td {
- color: mat-color($primary);
- }
-
- td {
- p:first-child {
- color: mat-contrast($primary, 50);
- }
- }
-
- a {
- color: mat-color($primary);
- }
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-filters-theme-shared($theme) {
+ $primary: map-get($theme, primary);
+
+
+ app-funding-call-category-filters {
+ margin-bottom: 10px;
+ .mat-mdc-chip {
+ border: 2px solid mat-color($primary, 500);
+ color: mat-color($primary, 500);
+
+ &.cdk-focused .mat-mdc-chip-focus-overlay {
+ //background-color: transparent;
+ &:hover{
+ background-color: mat-contrast($primary, 500);
+ }
+ }
+
+ &.mat-mdc-standard-chip {
+ &:not(.mdc-evolution-chip--disabled) {
+ background: transparent;
+ }
+ &.mdc-evolution-chip--selected {
+ background: mat-color($primary, 500) !important;
+ }
+
+ &:hover::after, &:focus::after {
+ opacity: 0;
+ }
+ &:hover {
+ background: mat-color($primary, 100);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+ &.mat-chip-selected {
+ background-color: mat-color($primary, 500) !important;
+ }
+ }
+ }
+ }
+
+ app-filters,
+ .filters-dialog {
+ .filter-sidebar {
+ background: mat-color($primary, 100);
+ }
+
+ .filter-icon {
+ color: mat-color($primary);
+ }
+
+ .error-color {
+ color: red !important;
+ }
+
+ h3 {
+ color: mat-color($primary);
+ }
+
+ .filter-sidebar h3 {
+ background: mat-color($primary, 100);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ span.mat-checkbox-label,
+ span.label {
+ color: mat-contrast($primary, 200);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+ .mat-mdc-checkbox .mat-checkbox-frame {
+ background: mat-contrast($primary, 500);
+ }
+
+ span.amount {
+ color: mat-contrast($primary, 400);
+ }
+
+ // .mat-expansion-panel:not([class*=mat-elevation-z]):not(:last-child) {
+ // border-bottom: 1px solid mat-color($primary, 400);
+ // }
+
+ // .mat-expansion-panel {
+ // background: unset!important;
+ // }
+
+ mat-expansion-panel.mat-expansion-panel.mat-expanded {
+ background: mat-color($primary, 50);
+ }
+
+ .mat-expansion-panel-header,
+ .row.single {
+ background: mat-color($primary, 50);
+ }
+
+ .mat-expansion-indicator:after {
+ color: mat-color($primary) !important;
+ }
+
+ button.show-options {
+ color: mat-color($primary);
+ }
+
+ .navbar-toggler {
+ background: mat-color($primary, 50);
+ border: 1px solid mat-color($primary);
+ }
+
+ // Select all
+ .row.select-all:hover {
+ background: rgba(0, 0, 0, 0.04);
+ }
+
+ // Single checkbox items
+ .mat-mdc-checkbox:hover {
+ background: none !important;
+ }
+
+ .separator {
+ border: 0.5px solid mat-color($primary);
+ }
+
+ .show-more {
+ color: mat-color($primary);
+ }
+
+ .modal-close {
+ background: mat-color($primary, 500);
+ color: mat-contrast($primary, 500);
+ }
+
+ .shared {
+ tr:nth-child(odd) {
+ background-color: mat-color($primary, 50);
+ }
+
+ th,
+ td {
+ color: mat-color($primary);
+ }
+
+ td {
+ p:first-child {
+ color: mat-contrast($primary, 50);
+ }
+ }
+
+ a {
+ color: mat-color($primary);
+ }
+ }
+ }
+}
diff --git a/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.html b/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.html
index cc26e10b4..9769c17e7 100644
--- a/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.html
+++ b/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.html
@@ -1,18 +1,18 @@
-();
-
- ngOnInit(): void {
- this.queryParamSub = this.route.queryParams.subscribe((params) => {
- this.queryParams = params;
-
- this.bottomLevelFilterOptions =
- this.responseData?.aggregations?.field?.buckets;
-
- if (!this.topLevelCategoriesInitialized) {
- this.initTopLevelCategories();
- }
- this.updateViewChipSelections(params);
- });
- }
-
- ngOnChanges(changes: SimpleChanges) {
- if (changes.resetFundingCallCategoryFilters) {
- this.resetAllFilters();
- }
- }
-
- clickChip(id: number) {
- this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map((u) =>
- u.id === id ? { id: u.id, key: u.key, checked: !u.checked } : u
- );
-
- this.topLevelFilterSelections.clear();
-
- this.majorFieldsOfScienceAurora.forEach((item) => {
- item.checked
- ? this.topLevelFilterSelections.add(item.id.toString())
- : null;
- });
-
- // Add all possible categories to selections
- this.bottomLevelFilterOptions =
- this.responseData?.aggregations?.field?.buckets;
- this.bottomLevelFilterOptions = this.bottomLevelFilterOptions.filter(
- (item) => {
- return this.topLevelFilterSelections.has(
- item.parentFieldId.buckets[0].key
- );
- }
- );
- this.emitBottomLevelFilters();
- }
-
- private initTopLevelCategories() {
- this.responseData?.aggregations?.mainCategory?.mainCategoryId?.buckets.forEach(
- (itm) => {
- this.majorFieldsOfScienceAurora.push({
- id: itm.key,
- key: itm.mainCategoryName.buckets[0].key,
- checked: false,
- });
- }
- );
- this.majorFieldsOfScienceAurora.sort((a, b) =>
- a.key > b.key ? 1 : b.key > a.key ? -1 : 0
- );
- this.topLevelCategoriesInitialized = true;
- }
-
- private updateViewChipSelections(params) {
- if (this.bottomLevelFilterOptions) {
- Array.isArray(params?.field)
- ? (this.bottomLevelFilterOptions =
- this.bottomLevelFilterOptions.filter((item) => {
- return params.field.some((itm) => {
- return itm === item.key;
- });
- }))
- : (this.bottomLevelFilterOptions =
- this.bottomLevelFilterOptions.filter((item) => {
- return params?.field === item.key;
- }));
-
- this.resetAllFilters();
- this.bottomLevelFilterOptions.forEach((bottomItem) => {
- const key = bottomItem?.parentFieldId.buckets[0].key.toString();
- if (key) {
- this.topLevelFilterSelections.add(key);
- }
- // This updates visible chips
- this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map(
- (u) =>
- u.id.toString() === key.toString()
- ? { id: u.id, key: u.key, checked: true }
- : u
- );
- });
- }
- }
-
- private emitBottomLevelFilters() {
- // Only emit when clicked a button
- this.filterValuesToEmit = [];
-
- this.bottomLevelFilterOptions.forEach((item) => {
- this.filterValuesToEmit.push(item.key);
- });
- this.filterValuesToEmit.length > 0
- ? this.filterChangeOutput.emit({ keys: this.filterValuesToEmit })
- : this.filterChangeOutput.emit({ keys: '' });
- }
-
- private resetAllFilters() {
- this.topLevelFilterSelections.clear();
- this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map(
- ({ id, key }) => ({ id, key, checked: false })
- );
- }
-
- ngOnDestroy(): void {
- this.queryParamSub?.unsubscribe();
- }
-}
+ selector: 'app-funding-call-category-filters',
+ templateUrl: './funding-call-category-filters.component.html',
+ styleUrls: ['./funding-call-category-filters.component.scss'],
+ standalone: true,
+ imports: [
+ MatChipListbox,
+ NgFor,
+ MatChipOption,
+ ],
+})
+export class FundingCallCategoryFiltersComponent implements OnInit, OnDestroy {
+ constructor(private route: ActivatedRoute) {}
+
+ majorFieldsOfScienceAurora = [];
+ topLevelFilterSelections = new Set();
+ bottomLevelFilterOptions = [];
+ filterValuesToEmit = [];
+ queryParamSub: Subscription;
+ _responseData: any;
+ queryParams: any;
+ topLevelCategoriesInitialized = false;
+
+ @Input() responseData: any;
+
+ @Input() resetFundingCallCategoryFilters;
+
+ @Output() filterChangeOutput = new EventEmitter();
+
+ ngOnInit(): void {
+ this.queryParamSub = this.route.queryParams.subscribe((params) => {
+ this.queryParams = params;
+
+ this.bottomLevelFilterOptions =
+ this.responseData?.aggregations?.field?.buckets;
+
+ if (!this.topLevelCategoriesInitialized) {
+ this.initTopLevelCategories();
+ }
+ this.updateViewChipSelections(params);
+ });
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes.resetFundingCallCategoryFilters) {
+ this.resetAllFilters();
+ }
+ }
+
+ clickChip(id: number) {
+ this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map((u) =>
+ u.id === id ? { id: u.id, key: u.key, checked: !u.checked } : u
+ );
+
+ this.topLevelFilterSelections.clear();
+
+ this.majorFieldsOfScienceAurora.forEach((item) => {
+ item.checked
+ ? this.topLevelFilterSelections.add(item.id.toString())
+ : null;
+ });
+
+ // Add all possible categories to selections
+ this.bottomLevelFilterOptions =
+ this.responseData?.aggregations?.field?.buckets;
+ this.bottomLevelFilterOptions = this.bottomLevelFilterOptions.filter(
+ (item) => {
+ return this.topLevelFilterSelections.has(
+ item.parentFieldId.buckets[0].key
+ );
+ }
+ );
+ this.emitBottomLevelFilters();
+ }
+
+ private initTopLevelCategories() {
+ this.responseData?.aggregations?.mainCategory?.mainCategoryId?.buckets.forEach(
+ (itm) => {
+ this.majorFieldsOfScienceAurora.push({
+ id: itm.key,
+ key: itm.mainCategoryName.buckets[0].key,
+ checked: false,
+ });
+ }
+ );
+ this.majorFieldsOfScienceAurora.sort((a, b) =>
+ a.key > b.key ? 1 : b.key > a.key ? -1 : 0
+ );
+ this.topLevelCategoriesInitialized = true;
+ }
+
+ private updateViewChipSelections(params) {
+ if (this.bottomLevelFilterOptions) {
+ Array.isArray(params?.field)
+ ? (this.bottomLevelFilterOptions =
+ this.bottomLevelFilterOptions.filter((item) => {
+ return params.field.some((itm) => {
+ return itm === item.key;
+ });
+ }))
+ : (this.bottomLevelFilterOptions =
+ this.bottomLevelFilterOptions.filter((item) => {
+ return params?.field === item.key;
+ }));
+
+ this.resetAllFilters();
+ this.bottomLevelFilterOptions.forEach((bottomItem) => {
+ const key = bottomItem?.parentFieldId.buckets[0].key.toString();
+ if (key) {
+ this.topLevelFilterSelections.add(key);
+ }
+ // This updates visible chips
+ this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map(
+ (u) =>
+ u.id.toString() === key.toString()
+ ? { id: u.id, key: u.key, checked: true }
+ : u
+ );
+ });
+ }
+ }
+
+ private emitBottomLevelFilters() {
+ // Only emit when clicked a button
+ this.filterValuesToEmit = [];
+
+ this.bottomLevelFilterOptions.forEach((item) => {
+ this.filterValuesToEmit.push(item.key);
+ });
+ this.filterValuesToEmit.length > 0
+ ? this.filterChangeOutput.emit({ keys: this.filterValuesToEmit })
+ : this.filterChangeOutput.emit({ keys: '' });
+ }
+
+ private resetAllFilters() {
+ this.topLevelFilterSelections.clear();
+ this.majorFieldsOfScienceAurora = this.majorFieldsOfScienceAurora.map(
+ ({ id, key }) => ({ id, key, checked: false })
+ );
+ }
+
+ ngOnDestroy(): void {
+ this.queryParamSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/results/funding-call-results/funding-call-results.component.scss-theme.scss b/src/app/portal/components/results/funding-call-results/funding-call-results.component.scss-theme.scss
index 1bd6334de..46e01ff79 100644
--- a/src/app/portal/components/results/funding-call-results/funding-call-results.component.scss-theme.scss
+++ b/src/app/portal/components/results/funding-call-results/funding-call-results.component.scss-theme.scss
@@ -1,12 +1,12 @@
-@import '@angular/material/theming';
-
-@mixin app-funding-call-results-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-funding-call-results {
- .tags .category {
- color: mat-color($primary);
- border: 2px solid mat-color($primary);
- }
- }
-}
\ No newline at end of file
+@use 'migration' as *;
+
+@mixin app-funding-call-results-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-funding-call-results {
+ .tags .category {
+ color: mat-color($primary);
+ border: 2px solid mat-color($primary);
+ }
+ }
+}
diff --git a/src/app/portal/components/results/funding-call-results/funding-call-results.component.ts b/src/app/portal/components/results/funding-call-results/funding-call-results.component.ts
index 5da51fead..0643285a3 100644
--- a/src/app/portal/components/results/funding-call-results/funding-call-results.component.ts
+++ b/src/app/portal/components/results/funding-call-results/funding-call-results.component.ts
@@ -15,18 +15,31 @@ import {
} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Search } from '@portal/models/search.model';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
import { SearchService } from '@portal/services/search.service';
import { SortService } from '@portal/services/sort.service';
import { TabChangeService } from '@portal/services/tab-change.service';
import { UtilityService } from '@shared/services/utility.service';
import { Subscription } from 'rxjs';
import { TableColumn, TableRow } from 'src/types';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf } from '@angular/common';
@Component({
- selector: 'app-funding-call-results',
- templateUrl: './funding-call-results.component.html',
- styleUrls: ['./funding-call-results.component.scss'],
+ selector: 'app-funding-call-results',
+ templateUrl: './funding-call-results.component.html',
+ styleUrls: ['./funding-call-results.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ ],
})
export class FundingCallResultsComponent
implements OnInit, OnDestroy, AfterViewInit
@@ -38,7 +51,7 @@ export class FundingCallResultsComponent
expandStatus: Array = [];
@ViewChild('main') mainContent: ElementRef;
- faIcon = this.tabChangeService.tabData
+ faIcon: any = this.tabChangeService.tabData
.filter((t) => t.data === 'fundingCalls')
.map((t) => t.icon)
.pop();
@@ -71,7 +84,7 @@ export class FundingCallResultsComponent
private searchService: SearchService,
private cdr: ChangeDetectorRef,
public utilityService: UtilityService,
- private highlightPipe: HighlightSearch
+ private highlightPipe: HighlightSearchPipe
) {
this.currentLocale =
this.localeId.charAt(0).toUpperCase() + this.localeId.slice(1);
diff --git a/src/app/portal/components/results/fundings/fundings.component.scss-theme.scss b/src/app/portal/components/results/fundings/fundings.component.scss-theme.scss
index 7772746c5..e1852c225 100644
--- a/src/app/portal/components/results/fundings/fundings.component.scss-theme.scss
+++ b/src/app/portal/components/results/fundings/fundings.component.scss-theme.scss
@@ -1,8 +1,8 @@
-@import '@angular/material/theming';
-
-@mixin app-fundings-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-fundings {
- }
-}
+@use 'migration' as *;
+
+@mixin app-fundings-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-fundings {
+ }
+}
diff --git a/src/app/portal/components/results/fundings/fundings.component.ts b/src/app/portal/components/results/fundings/fundings.component.ts
index ce18785a9..e9fc2d4cc 100644
--- a/src/app/portal/components/results/fundings/fundings.component.ts
+++ b/src/app/portal/components/results/fundings/fundings.component.ts
@@ -22,12 +22,25 @@ import { TabChangeService } from 'src/app/portal/services/tab-change.service';
import { Search } from 'src/app/portal/models/search.model';
import { UtilityService } from 'src/app/shared/services/utility.service';
import { TableColumn, TableRow } from 'src/types';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf } from '@angular/common';
@Component({
- selector: 'app-fundings',
- templateUrl: './fundings.component.html',
- styleUrls: ['./fundings.component.scss'],
+ selector: 'app-fundings',
+ templateUrl: './fundings.component.html',
+ styleUrls: ['./fundings.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ ],
})
export class FundingsComponent implements OnInit, OnDestroy, AfterViewInit {
@Input() resultData: Search;
@@ -35,7 +48,7 @@ export class FundingsComponent implements OnInit, OnDestroy, AfterViewInit {
expandStatus: Array = [];
sortColumn: string;
sortDirection: boolean;
- faIcon = this.tabChangeService.tabData
+ faIcon: any = this.tabChangeService.tabData
.filter((t) => t.data === 'fundings')
.map((t) => t.icon)
.pop();
@@ -56,7 +69,7 @@ export class FundingsComponent implements OnInit, OnDestroy, AfterViewInit {
private searchService: SearchService,
private cdr: ChangeDetectorRef,
public utilityService: UtilityService,
- private highlightPipe: HighlightSearch
+ private highlightPipe: HighlightSearchPipe
) {}
ngOnInit() {
diff --git a/src/app/portal/components/results/infrastructures/infrastructures.component.scss-theme.scss b/src/app/portal/components/results/infrastructures/infrastructures.component.scss-theme.scss
index 1c8fb9e67..21a3f89d2 100644
--- a/src/app/portal/components/results/infrastructures/infrastructures.component.scss-theme.scss
+++ b/src/app/portal/components/results/infrastructures/infrastructures.component.scss-theme.scss
@@ -1,15 +1,15 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-infrastructures-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-infrastructures {
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-infrastructures-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-infrastructures {
+ }
+}
diff --git a/src/app/portal/components/results/infrastructures/infrastructures.component.ts b/src/app/portal/components/results/infrastructures/infrastructures.component.ts
index 09fba99f3..11cf3f0a9 100644
--- a/src/app/portal/components/results/infrastructures/infrastructures.component.ts
+++ b/src/app/portal/components/results/infrastructures/infrastructures.component.ts
@@ -1,153 +1,175 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- Input,
- OnInit,
- OnDestroy,
- ChangeDetectorRef,
- ViewChild,
- ElementRef,
- AfterViewInit,
- TemplateRef,
- ViewChildren,
- QueryList,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { SortService } from 'src/app/portal/services/sort.service';
-import { Search } from 'src/app/portal/models/search.model';
-import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { TableColumn, TableRow } from 'src/types';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
-
-@Component({
- selector: 'app-infrastructures',
- templateUrl: './infrastructures.component.html',
- styleUrls: ['./infrastructures.component.scss'],
-})
-export class InfrastructuresComponent
- implements OnInit, OnDestroy, AfterViewInit
-{
- @Input() resultData: Search;
- @ViewChild('main') mainContent: ElementRef;
- expandStatus: Array = [];
- sortColumn: string;
- sortDirection: boolean;
- faIcon = this.tabChangeService.tabData
- .filter((t) => t.data === 'infrastructures')
- .map((t) => t.icon)
- .pop();
- inputSub: any;
- input: string;
- focusSub: any;
- faCheckCircle = faCheckCircle;
-
- tableColumns: TableColumn[];
- tableRows: Record[];
-
- @ViewChildren('infrastructureNameColumns', { read: TemplateRef })
- infrastructureNameColumns: QueryList;
-
- dataMapped: boolean;
- iconTitleInfrastructures = $localize`:@@iconInfrastructures: Infrastruktuurien tiedon ikoni`;
-
- constructor(
- private route: ActivatedRoute,
- private tabChangeService: TabChangeService,
- private searchService: SearchService,
- private sortService: SortService,
- private cdr: ChangeDetectorRef,
- public utilityService: UtilityService,
- private highlightPipe: HighlightSearch
- ) {}
-
- ngOnInit() {
- this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
- this.sortColumn = this.sortService.sortColumn;
- this.sortDirection = this.sortService.sortDirection;
- }
-
- ngAfterViewInit() {
- // Focus first element when clicked with skip-link
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main') {
- this.mainContent?.nativeElement.focus();
- }
- }
- );
-
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- this.mapData();
- this.cdr.detectChanges();
- });
- }
-
- mapData() {
- // Get cell data from template
- const nameColumnArray = this.infrastructureNameColumns.toArray();
-
- // Map data to table
- // Use highlight pipe for higlighting search term
- this.tableColumns = [
- {
- key: 'acronym',
- label: $localize`:@@infraAcronym:Lyhenne`,
- tooltip: $localize`:@@acronymTooltip:Tutkimusinfrastruktuurin lyhenne. Infrastruktuureille on tyypillistä, että ne tunnetaan lyhenteellään.`,
- class: 'col-3 col-xl-2 d-none d-lg-block',
- mobile: false,
- },
- {
- key: 'name',
- label: $localize`:@@infraName:Nimi`,
- class: 'col-lg-4 col-xl-4',
- mobile: true,
- },
- {
- key: 'organization',
- label: $localize`:@@infraOrganization:Organisaatio`,
- tooltip: $localize`:@@infraOrganizationTooltip:Tutkimusinfrastruktuurin vastuuorganisaatio. Etenkin suurilla infrastruktuureilla voi olla useita palveluita, joista vastaa joku muu organisaatio. Muut organisaatiot näkee infrastruktuurin tietosivulta.`,
- class: 'col-lg-4 col-xl-4',
- mobile: true,
- },
- ];
- this.tableRows = this.resultData.infrastructures.map(
- (infrastructure, index) => ({
- acronym: {
- label: this.highlightPipe.transform(
- infrastructure.acronym,
- this.input
- ),
- },
- name: {
- label: this.highlightPipe.transform(infrastructure.name, this.input),
- template: nameColumnArray[index],
- link: `/results/infrastructure/${infrastructure.id}`,
- },
- organization: {
- label: this.highlightPipe.transform(
- infrastructure.responsibleOrganization,
- this.input
- ),
- },
- })
- );
-
- this.dataMapped = true;
- }
-
- ngOnDestroy() {
- this.inputSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- this.tabChangeService.targetFocus('');
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ Input,
+ OnInit,
+ OnDestroy,
+ ChangeDetectorRef,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ TemplateRef,
+ ViewChildren,
+ QueryList,
+} from '@angular/core';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { SortService } from 'src/app/portal/services/sort.service';
+import { Search } from 'src/app/portal/models/search.model';
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { TableColumn, TableRow } from 'src/types';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+import { HandleInfrastructureLinkPipe } from '../../../pipes/handle-infrastructure-link.pipe';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf, NgFor } from '@angular/common';
+
+@Component({
+ selector: 'app-infrastructures',
+ templateUrl: './infrastructures.component.html',
+ styleUrls: ['./infrastructures.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ NgFor,
+ RouterLink,
+ TooltipModule,
+ FontAwesomeModule,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ HighlightSearchPipe,
+ HandleInfrastructureLinkPipe,
+ ],
+})
+export class InfrastructuresComponent
+ implements OnInit, OnDestroy, AfterViewInit
+{
+ @Input() resultData: Search;
+ @ViewChild('main') mainContent: ElementRef;
+ expandStatus: Array = [];
+ sortColumn: string;
+ sortDirection: boolean;
+ faIcon: any = this.tabChangeService.tabData
+ .filter((t) => t.data === 'infrastructures')
+ .map((t) => t.icon)
+ .pop();
+ inputSub: any;
+ input: string;
+ focusSub: any;
+ faCheckCircle = faCheckCircle;
+
+ tableColumns: TableColumn[];
+ tableRows: Record[];
+
+ @ViewChildren('infrastructureNameColumns', { read: TemplateRef })
+ infrastructureNameColumns: QueryList;
+
+ dataMapped: boolean;
+ iconTitleInfrastructures = $localize`:@@iconInfrastructures: Infrastruktuurien tiedon ikoni`;
+
+ constructor(
+ private route: ActivatedRoute,
+ private tabChangeService: TabChangeService,
+ private searchService: SearchService,
+ private sortService: SortService,
+ private cdr: ChangeDetectorRef,
+ public utilityService: UtilityService,
+ private highlightPipe: HighlightSearchPipe
+ ) {}
+
+ ngOnInit() {
+ this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
+ this.sortColumn = this.sortService.sortColumn;
+ this.sortDirection = this.sortService.sortDirection;
+ }
+
+ ngAfterViewInit() {
+ // Focus first element when clicked with skip-link
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main') {
+ this.mainContent?.nativeElement.focus();
+ }
+ }
+ );
+
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ this.mapData();
+ this.cdr.detectChanges();
+ });
+ }
+
+ mapData() {
+ // Get cell data from template
+ const nameColumnArray = this.infrastructureNameColumns.toArray();
+
+ // Map data to table
+ // Use highlight pipe for higlighting search term
+ this.tableColumns = [
+ {
+ key: 'acronym',
+ label: $localize`:@@infraAcronym:Lyhenne`,
+ tooltip: $localize`:@@acronymTooltip:Tutkimusinfrastruktuurin lyhenne. Infrastruktuureille on tyypillistä, että ne tunnetaan lyhenteellään.`,
+ class: 'col-3 col-xl-2 d-none d-lg-block',
+ mobile: false,
+ },
+ {
+ key: 'name',
+ label: $localize`:@@infraName:Nimi`,
+ class: 'col-lg-4 col-xl-4',
+ mobile: true,
+ },
+ {
+ key: 'organization',
+ label: $localize`:@@infraOrganization:Organisaatio`,
+ tooltip: $localize`:@@infraOrganizationTooltip:Tutkimusinfrastruktuurin vastuuorganisaatio. Etenkin suurilla infrastruktuureilla voi olla useita palveluita, joista vastaa joku muu organisaatio. Muut organisaatiot näkee infrastruktuurin tietosivulta.`,
+ class: 'col-lg-4 col-xl-4',
+ mobile: true,
+ },
+ ];
+ this.tableRows = this.resultData.infrastructures.map(
+ (infrastructure, index) => ({
+ acronym: {
+ label: this.highlightPipe.transform(
+ infrastructure.acronym,
+ this.input
+ ),
+ },
+ name: {
+ label: this.highlightPipe.transform(infrastructure.name, this.input),
+ template: nameColumnArray[index],
+ link: `/results/infrastructure/${infrastructure.id}`,
+ },
+ organization: {
+ label: this.highlightPipe.transform(
+ infrastructure.responsibleOrganization,
+ this.input
+ ),
+ },
+ })
+ );
+
+ this.dataMapped = true;
+ }
+
+ ngOnDestroy() {
+ this.inputSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ this.tabChangeService.targetFocus('');
+ }
+}
diff --git a/src/app/portal/components/results/no-results/no-results.component.ts b/src/app/portal/components/results/no-results/no-results.component.ts
index bf73d65b8..382fd384b 100644
--- a/src/app/portal/components/results/no-results/no-results.component.ts
+++ b/src/app/portal/components/results/no-results/no-results.component.ts
@@ -1,13 +1,16 @@
import { Component, Input, OnInit } from '@angular/core';
-
+import { RouterLink } from '@angular/router';
+
@Component({
- selector: 'app-no-results',
- templateUrl: './no-results.component.html',
-})
-export class NoResultsComponent implements OnInit {
- @Input() heading: string;
-
- constructor() {}
-
- ngOnInit(): void {}
-}
+ selector: 'app-no-results',
+ templateUrl: './no-results.component.html',
+ standalone: true,
+ imports: [RouterLink],
+})
+export class NoResultsComponent implements OnInit {
+ @Input() heading: string;
+
+ constructor() {}
+
+ ngOnInit(): void {}
+}
diff --git a/src/app/portal/components/results/organizations/organizations.component.scss-theme.scss b/src/app/portal/components/results/organizations/organizations.component.scss-theme.scss
index 2dd34ccd0..7281e7517 100644
--- a/src/app/portal/components/results/organizations/organizations.component.scss-theme.scss
+++ b/src/app/portal/components/results/organizations/organizations.component.scss-theme.scss
@@ -1,8 +1,8 @@
-@import '@angular/material/theming';
-
-@mixin app-organizations-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-organizations {
- }
-}
+@use 'migration' as *;
+
+@mixin app-organizations-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-organizations {
+ }
+}
diff --git a/src/app/portal/components/results/organizations/organizations.component.ts b/src/app/portal/components/results/organizations/organizations.component.ts
index 271275043..52744ad20 100644
--- a/src/app/portal/components/results/organizations/organizations.component.ts
+++ b/src/app/portal/components/results/organizations/organizations.component.ts
@@ -1,126 +1,139 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- Input,
- OnInit,
- OnDestroy,
- ViewChild,
- ElementRef,
- AfterViewInit,
- ChangeDetectorRef,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { SortService } from 'src/app/portal/services/sort.service';
-import { Search } from 'src/app/portal/models/search.model';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
-import { TableColumn, TableRow } from 'src/types';
-
-@Component({
- selector: 'app-organizations',
- templateUrl: './organizations.component.html',
- styleUrls: ['./organizations.component.scss'],
-})
-export class OrganizationsComponent
- implements OnInit, OnDestroy, AfterViewInit
-{
- _resd: Search;
- get resultData(): Search {
- return this._resd;
- }
-
- @Input() set resultData(resD: Search) {
- this._resd = resD;
- }
- @ViewChild('main') mainContent: ElementRef;
- expandStatus: Array = [];
- sortColumn: string;
- sortDirection: boolean;
- faIcon = this.tabChangeService.tabData
- .filter((t) => t.data === 'organizations')
- .map((t) => t.icon)
- .pop();
- inputSub: any;
- input: string;
- focusSub: any;
- tableColumns: TableColumn[];
- tableRows: Record[];
- iconTitleOrganizations = $localize`:@@iconOrganizations: Organisaatioiden tiedon ikoni`;
-
- constructor(
- private route: ActivatedRoute,
- private tabChangeService: TabChangeService,
- private searchService: SearchService,
- private sortService: SortService,
- private cdr: ChangeDetectorRef,
- public utilityService: UtilityService,
- private highlightPipe: HighlightSearch
- ) {}
-
- ngOnInit() {
- this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
- this.sortColumn = this.sortService.sortColumn;
- this.sortDirection = this.sortService.sortDirection;
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- this.mapData();
- this.cdr.detectChanges();
- });
- }
-
- mapData() {
- // Map data to table
- // Use highlight pipe for higlighting search term
- this.tableColumns = [
- {
- key: 'name',
- label: $localize`:@@name:Nimi`,
- class: 'col-7',
- mobile: true,
- },
- {
- key: 'sector',
- label: $localize`:@@orgOrganization:Organisaatio`,
- class: 'col-4',
- mobile: true,
- },
- ];
- this.tableRows = this.resultData.organizations.map((organization) => ({
- name: {
- label: this.highlightPipe.transform(organization.name, this.input),
- link: `/results/organization/${organization.id}`,
- },
- sector: {
- label: this.highlightPipe.transform(
- organization.sectorName,
- this.input
- ),
- },
- }));
- }
-
- ngAfterViewInit() {
- // Focus first element when clicked with skip-link
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main') {
- this.mainContent?.nativeElement.focus();
- }
- }
- );
- }
-
- ngOnDestroy() {
- this.inputSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- this.tabChangeService.targetFocus('');
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ Input,
+ OnInit,
+ OnDestroy,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ ChangeDetectorRef,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { SortService } from 'src/app/portal/services/sort.service';
+import { Search } from 'src/app/portal/models/search.model';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+import { TableColumn, TableRow } from 'src/types';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf } from '@angular/common';
+
+@Component({
+ selector: 'app-organizations',
+ templateUrl: './organizations.component.html',
+ styleUrls: ['./organizations.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ ],
+})
+export class OrganizationsComponent
+ implements OnInit, OnDestroy, AfterViewInit
+{
+ _resd: Search;
+ get resultData(): Search {
+ return this._resd;
+ }
+
+ @Input() set resultData(resD: Search) {
+ this._resd = resD;
+ }
+ @ViewChild('main') mainContent: ElementRef;
+ expandStatus: Array = [];
+ sortColumn: string;
+ sortDirection: boolean;
+ faIcon: any = this.tabChangeService.tabData
+ .filter((t) => t.data === 'organizations')
+ .map((t) => t.icon)
+ .pop();
+ inputSub: any;
+ input: string;
+ focusSub: any;
+ tableColumns: TableColumn[];
+ tableRows: Record[];
+ iconTitleOrganizations = $localize`:@@iconOrganizations: Organisaatioiden tiedon ikoni`;
+
+ constructor(
+ private route: ActivatedRoute,
+ private tabChangeService: TabChangeService,
+ private searchService: SearchService,
+ private sortService: SortService,
+ private cdr: ChangeDetectorRef,
+ public utilityService: UtilityService,
+ private highlightPipe: HighlightSearchPipe
+ ) {}
+
+ ngOnInit() {
+ this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
+ this.sortColumn = this.sortService.sortColumn;
+ this.sortDirection = this.sortService.sortDirection;
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ this.mapData();
+ this.cdr.detectChanges();
+ });
+ }
+
+ mapData() {
+ // Map data to table
+ // Use highlight pipe for higlighting search term
+ this.tableColumns = [
+ {
+ key: 'name',
+ label: $localize`:@@name:Nimi`,
+ class: 'col-7',
+ mobile: true,
+ },
+ {
+ key: 'sector',
+ label: $localize`:@@orgOrganization:Organisaatio`,
+ class: 'col-4',
+ mobile: true,
+ },
+ ];
+ this.tableRows = this.resultData.organizations.map((organization) => ({
+ name: {
+ label: this.highlightPipe.transform(organization.name, this.input),
+ link: `/results/organization/${organization.id}`,
+ },
+ sector: {
+ label: this.highlightPipe.transform(
+ organization.sectorName,
+ this.input
+ ),
+ },
+ }));
+ }
+
+ ngAfterViewInit() {
+ // Focus first element when clicked with skip-link
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main') {
+ this.mainContent?.nativeElement.focus();
+ }
+ }
+ );
+ }
+
+ ngOnDestroy() {
+ this.inputSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ this.tabChangeService.targetFocus('');
+ }
+}
diff --git a/src/app/portal/components/results/persons/persons.component.ts b/src/app/portal/components/results/persons/persons.component.ts
index 0dd260e6f..37f7c883b 100644
--- a/src/app/portal/components/results/persons/persons.component.ts
+++ b/src/app/portal/components/results/persons/persons.component.ts
@@ -1,163 +1,180 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- AfterViewInit,
- ChangeDetectorRef,
- Component,
- ElementRef,
- Input,
- OnInit,
- QueryList,
- TemplateRef,
- ViewChild,
- ViewChildren,
- ViewEncapsulation,
-} from '@angular/core';
-import { faUser } from '@fortawesome/free-solid-svg-icons';
-import { Search } from '@portal/models/search.model';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
-import { SearchService } from '@portal/services/search.service';
-import { SortService } from '@portal/services/sort.service';
-import { TabChangeService } from '@portal/services/tab-change.service';
-import { Subscription } from 'rxjs';
-import { TableColumn, TableRow } from 'src/types';
-import { UtilityService } from '@shared/services/utility.service';
-
-@Component({
- selector: 'app-persons',
- templateUrl: '../persons/persons.component.html',
- styleUrls: ['./persons.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class PersonsComponent implements OnInit, AfterViewInit {
- @Input() resultData: Search;
- expandStatus: Array = [];
-
- inputSub: Subscription;
- input: string;
- focusSub: any;
- tableColumns: TableColumn[];
- tableRows: Record[];
- rowIcon = faUser;
- iconTitle: 'Tutkijoiden tiedon ikoni';
- dataMapped: boolean;
-
- @ViewChild('main') mainContent: ElementRef;
-
- @ViewChildren('personNameColumn', { read: TemplateRef })
- personNameColumns: QueryList;
-
- constructor(
- private searchService: SearchService,
- private cdr: ChangeDetectorRef,
- private highlightPipe: HighlightSearch,
- private tabChangeService: TabChangeService,
- public sortService: SortService,
- public utilityService: UtilityService
- ) {}
-
- ngOnInit(): void {}
-
- ngAfterViewInit() {
- // Focus first element when clicked with skip-link
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main') {
- this.mainContent?.nativeElement.focus();
- }
- }
- );
-
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- this.mapData();
- this.cdr.detectChanges();
- });
- }
-
- mapData() {
- // Get cell data from template
- const nameColumnArray = this.personNameColumns.toArray();
-
- // Map data to table
- // Use highlight pipe for higlighting search term
- this.tableColumns = [
- {
- key: 'name',
- label: $localize`:@@name:Nimi`,
- class: 'col-3',
- mobile: true,
- },
- {
- key: 'organization',
- label: $localize`:@@organization:Organisaatio`,
- class: 'col-3',
- mobile: true,
- },
- {
- key: 'positionName',
- label: 'Nimike',
- class: 'col-3',
- mobile: true,
- },
- {
- key: 'keywords',
- label: $localize`:@@keywords:Avainsanat`,
- class: 'col-2',
- mobile: true,
- },
- ];
-
- const getUnique = (items: string[]) => [...new Set(items)];
-
- this.tableRows = this.resultData.persons.map((person, index) => ({
- name: {
- template: nameColumnArray[index],
- link: `/results/person/${person.id}`,
- },
- organization: {
- label: this.highlightPipe.transform(
- getUnique(this.mapAffiliations(person)
- ).join(', '),
- this.input
- ),
- },
- positionName: {
- label: this.highlightPipe.transform(
- getUnique(
- person.affiliations.organizations
- .flatMap((organanization) => organanization.items)
- .filter((item) => item.positionName.trim().length > 0)
- .map((item) => item.positionName)
- ).join(', '),
- this.input
- ),
- },
- keywords: {
- label: this.highlightPipe.transform(person.keywords, this.input),
- },
- }));
-
- this.dataMapped = true;
- }
-
- mapAffiliations(person): string[] {
- // If no primary affiliations set, show all affiliations
- if (person.affiliations.primary.length > 0) {
- return person.affiliations.primary.map((item) => item.organizationName);
- } else {
- return person.affiliations.organizations.map((item) => item.name);
- }
- }
-
- ngOnDestroy() {
- this.inputSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- this.tabChangeService.targetFocus('');
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ AfterViewInit,
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ Input,
+ OnInit,
+ QueryList,
+ TemplateRef,
+ ViewChild,
+ ViewChildren,
+ ViewEncapsulation,
+} from '@angular/core';
+import { faUser } from '@fortawesome/free-solid-svg-icons';
+import { Search } from '@portal/models/search.model';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+import { SearchService } from '@portal/services/search.service';
+import { SortService } from '@portal/services/sort.service';
+import { TabChangeService } from '@portal/services/tab-change.service';
+import { Subscription } from 'rxjs';
+import { TableColumn, TableRow } from 'src/types';
+import { UtilityService } from '@shared/services/utility.service';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { RouterLink } from '@angular/router';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { NgIf, NgFor } from '@angular/common';
+
+@Component({
+ selector: 'app-persons',
+ templateUrl: '../persons/persons.component.html',
+ styleUrls: ['./persons.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ NgFor,
+ RouterLink,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ HighlightSearchPipe,
+ ],
+})
+export class PersonsComponent implements OnInit, AfterViewInit {
+ @Input() resultData: Search;
+ expandStatus: Array = [];
+
+ inputSub: Subscription;
+ input: string;
+ focusSub: any;
+ tableColumns: TableColumn[];
+ tableRows: Record[];
+ rowIcon: any = faUser;
+ iconTitle: 'Tutkijoiden tiedon ikoni';
+ dataMapped: boolean;
+
+ @ViewChild('main') mainContent: ElementRef;
+
+ @ViewChildren('personNameColumn', { read: TemplateRef })
+ personNameColumns: QueryList;
+
+ constructor(
+ private searchService: SearchService,
+ private cdr: ChangeDetectorRef,
+ private highlightPipe: HighlightSearchPipe,
+ private tabChangeService: TabChangeService,
+ public sortService: SortService,
+ public utilityService: UtilityService
+ ) {}
+
+ ngOnInit(): void {}
+
+ ngAfterViewInit() {
+ // Focus first element when clicked with skip-link
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main') {
+ this.mainContent?.nativeElement.focus();
+ }
+ }
+ );
+
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ this.mapData();
+ this.cdr.detectChanges();
+ });
+ }
+
+ mapData() {
+ // Get cell data from template
+ const nameColumnArray = this.personNameColumns.toArray();
+
+ // Map data to table
+ // Use highlight pipe for higlighting search term
+ this.tableColumns = [
+ {
+ key: 'name',
+ label: $localize`:@@name:Nimi`,
+ class: 'col-3',
+ mobile: true,
+ },
+ {
+ key: 'organization',
+ label: $localize`:@@organization:Organisaatio`,
+ class: 'col-3',
+ mobile: true,
+ },
+ {
+ key: 'positionName',
+ label: 'Nimike',
+ class: 'col-3',
+ mobile: true,
+ },
+ {
+ key: 'keywords',
+ label: $localize`:@@keywords:Avainsanat`,
+ class: 'col-2',
+ mobile: true,
+ },
+ ];
+
+ const getUnique = (items: string[]) => [...new Set(items)];
+
+ this.tableRows = this.resultData.persons.map((person, index) => ({
+ name: {
+ template: nameColumnArray[index],
+ link: `/results/person/${person.id}`,
+ },
+ organization: {
+ label: this.highlightPipe.transform(
+ getUnique(this.mapAffiliations(person)
+ ).join(', '),
+ this.input
+ ),
+ },
+ positionName: {
+ label: this.highlightPipe.transform(
+ getUnique(
+ person.affiliations.organizations
+ .flatMap((organanization) => organanization.items)
+ .filter((item) => item.positionName.trim().length > 0)
+ .map((item) => item.positionName)
+ ).join(', '),
+ this.input
+ ),
+ },
+ keywords: {
+ label: this.highlightPipe.transform(person.keywords, this.input),
+ },
+ }));
+
+ this.dataMapped = true;
+ }
+
+ mapAffiliations(person): string[] {
+ // If no primary affiliations set, show all affiliations
+ if (person.affiliations.primary.length > 0) {
+ return person.affiliations.primary.map((item) => item.organizationName);
+ } else {
+ return person.affiliations.organizations.map((item) => item.name);
+ }
+ }
+
+ ngOnDestroy() {
+ this.inputSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ this.tabChangeService.targetFocus('');
+ }
+}
diff --git a/src/app/portal/components/results/publications/publications.component.html b/src/app/portal/components/results/publications/publications.component.html
index 6942785e0..1cae6f2b4 100644
--- a/src/app/portal/components/results/publications/publications.component.html
+++ b/src/app/portal/components/results/publications/publications.component.html
@@ -1,85 +1,85 @@
-
-
-
-
+
+
+
+
diff --git a/src/app/portal/components/results/publications/publications.component.ts b/src/app/portal/components/results/publications/publications.component.ts
index 04199540e..627700178 100644
--- a/src/app/portal/components/results/publications/publications.component.ts
+++ b/src/app/portal/components/results/publications/publications.component.ts
@@ -1,174 +1,198 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- Input,
- OnInit,
- Inject,
- OnDestroy,
- ChangeDetectorRef,
- ViewChild,
- ElementRef,
- AfterViewInit,
- ViewChildren,
- TemplateRef,
- QueryList,
-} from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { ActivatedRoute } from '@angular/router';
-import { SortService } from '../../../services/sort.service';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { SearchService } from 'src/app/portal/services/search.service';
-import { Search } from 'src/app/portal/models/search.model';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { TableColumn, TableRow } from 'src/types';
-import { HighlightSearch } from '@portal/pipes/highlight.pipe';
-import { CutContentPipe } from '../../../../shared/pipes/cut-content.pipe';
-
-@Component({
- selector: 'app-publications',
- templateUrl: './publications.component.html',
- styleUrls: ['./publications.component.scss'],
-})
-export class PublicationsComponent implements OnInit, OnDestroy, AfterViewInit {
- @Input() resultData: Search;
- expandStatus: Array = [];
- sortColumn: string;
- sortDirection: boolean;
- @ViewChild('main') mainContent: ElementRef;
-
- faIcon = this.tabChangeService.tabData
- .filter((t) => t.data === 'publications')
- .map((t) => t.icon)
- .pop();
- documentLang: any;
- input: string;
- inputSub: any;
- focusSub: any;
- marginTop = 0;
- heightSub: any;
-
- tableColumns: TableColumn[];
- tableRows: Record[];
-
- @ViewChildren('publicationNameColumn', { read: TemplateRef })
- publicationNameColumns: QueryList;
-
- @ViewChildren('publicationChannelColumn', { read: TemplateRef })
- publicationChannelColumns: QueryList;
-
- dataMapped: boolean;
- iconTitlePublications = $localize`:@@iconPublications: Julkaisujen tiedon ikoni`;
-
- constructor(
- private route: ActivatedRoute,
- private sortService: SortService,
- @Inject(DOCUMENT) private document: any,
- private tabChangeService: TabChangeService,
- private searchService: SearchService,
- private cdr: ChangeDetectorRef,
- public utilityService: UtilityService,
- private highlightPipe: HighlightSearch,
- private cutContentPipe: CutContentPipe
- ) {
- this.documentLang = this.document.documentElement.lang;
- }
-
- ngOnInit() {
- // Check url for sorting, default to empty
- this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
- this.sortColumn = this.sortService.sortColumn;
- this.sortDirection = this.sortService.sortDirection;
- }
-
- ngAfterViewInit() {
- // Focus first element when clicked with skip-link
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main') {
- this.mainContent?.nativeElement.focus();
- }
- }
- );
-
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- this.mapData();
- this.cdr.detectChanges();
- });
- }
-
- mapData() {
- // Get cell data from template
- const nameColumnArray = this.publicationNameColumns.toArray();
- const channelColumnArray = this.publicationChannelColumns.toArray();
-
- // Map data to table
- // Use highlight pipe for higlighting search term
- this.tableColumns = [
- {
- key: 'name',
- label: $localize`:@@publicationName:Julkaisun nimi`,
- class: 'col-8 col-lg-5 col-xl-4',
- mobile: true,
- },
- {
- key: 'author',
- label: $localize`:@@publicationAuthors:Tekijät`,
- class: 'col-lg-5 col-xl-3 d-none d-lg-block',
- mobile: false,
- },
- {
- key: 'medium',
- label: $localize`:@@publicationMedium:Julkaisukanava`,
- tooltip: $localize`:@@publicationMediumTooltip:Lehti, kustantaja tai sarja, jossa julkaisu on ilmestynyt.`,
- class: 'col-xl-3 d-none d-xl-block',
- mobile: false,
- },
- {
- key: 'year',
- label: $localize`:@@year:Vuosi`,
- class: 'col-lg-1',
- mobile: true,
- },
- ];
- this.tableRows = this.resultData.publications.map((publication, index) => ({
- name: {
- template: nameColumnArray[index],
- link: `/results/publication/${publication.id}`, // For icon link
- },
- author: {
- label: this.highlightPipe.transform(this.cutContentPipe.transform(publication.authors, 100) , this.input),
- },
- medium: {
- template: channelColumnArray[index],
- },
- year: {
- label: this.highlightPipe.transform(
- publication.publicationYear,
- this.input
- ),
- },
- }));
-
- this.dataMapped = true;
- }
-
- isReviewed(type: string) {
- if (!type) {
- return false;
- }
- return type[0] === 'A' || type[0] === 'C';
- }
-
- ngOnDestroy() {
- this.tabChangeService.targetFocus('');
- this.inputSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ Input,
+ OnInit,
+ Inject,
+ OnDestroy,
+ ChangeDetectorRef,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ ViewChildren,
+ TemplateRef,
+ QueryList,
+} from '@angular/core';
+import { DOCUMENT, NgIf, NgFor } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { SortService } from '../../../services/sort.service';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { Search } from 'src/app/portal/models/search.model';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { TableColumn, TableRow } from 'src/types';
+import { LinksPipe } from '../../../pipes/links.pipe';
+import { NoResultsComponent } from '../no-results/no-results.component';
+import { ResultsPaginationComponent } from '../results-pagination/results-pagination.component';
+import { TagDoiComponent } from '../../../../shared/components/tags/tag-doi/tag-doi.component';
+import { TagOpenAccessComponent } from '../../../../shared/components/tags/tag-open-access/tag-open-access.component';
+import { TagPeerReviewedComponent } from '../../../../shared/components/tags/tag-peer-reviewed/tag-peer-reviewed.component';
+import { TableComponent } from '../../../../shared/components/table/table.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { CutContentPipe } from '@shared/pipes/cut-content.pipe';
+import { HighlightSearchPipe } from '@portal/pipes/highlight.pipe';
+
+@Component({
+ selector: 'app-publications',
+ templateUrl: './publications.component.html',
+ styleUrls: ['./publications.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ MatProgressSpinner,
+ TableComponent,
+ NgFor,
+ RouterLink,
+ TagPeerReviewedComponent,
+ TagOpenAccessComponent,
+ TagDoiComponent,
+ ResultsPaginationComponent,
+ NoResultsComponent,
+ LinksPipe,
+ CutContentPipe,
+ HighlightSearchPipe
+ ]
+})
+export class PublicationsComponent implements OnInit, OnDestroy, AfterViewInit {
+ @Input() resultData: Search;
+ expandStatus: Array = [];
+ sortColumn: string;
+ sortDirection: boolean;
+ @ViewChild('main') mainContent: ElementRef;
+
+ faIcon: any = this.tabChangeService.tabData
+ .filter((t) => t.data === 'publications')
+ .map((t) => t.icon)
+ .pop();
+ documentLang: any;
+ input: string;
+ inputSub: any;
+ focusSub: any;
+ marginTop = 0;
+ heightSub: any;
+
+ tableColumns: TableColumn[];
+ tableRows: Record[];
+
+ @ViewChildren('publicationNameColumn', { read: TemplateRef })
+ publicationNameColumns: QueryList;
+
+ @ViewChildren('publicationChannelColumn', { read: TemplateRef })
+ publicationChannelColumns: QueryList;
+
+ dataMapped: boolean;
+ iconTitlePublications = $localize`:@@iconPublications: Julkaisujen tiedon ikoni`;
+
+ constructor(
+ private route: ActivatedRoute,
+ private sortService: SortService,
+ @Inject(DOCUMENT) private document: any,
+ private tabChangeService: TabChangeService,
+ private searchService: SearchService,
+ private cdr: ChangeDetectorRef,
+ public utilityService: UtilityService,
+ private highlightPipe: HighlightSearchPipe,
+ private cutContentPipe: CutContentPipe
+ ) {
+ this.documentLang = this.document.documentElement.lang;
+ }
+
+ ngOnInit() {
+ // Check url for sorting, default to empty
+ this.sortService.initSort(this.route.snapshot.queryParams.sort || '');
+ this.sortColumn = this.sortService.sortColumn;
+ this.sortDirection = this.sortService.sortDirection;
+ }
+
+ ngAfterViewInit() {
+ // Focus first element when clicked with skip-link
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main') {
+ this.mainContent?.nativeElement.focus();
+ }
+ }
+ );
+
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ this.mapData();
+ this.cdr.detectChanges();
+ });
+ }
+
+ mapData() {
+ // Get cell data from template
+ const nameColumnArray = this.publicationNameColumns.toArray();
+ const channelColumnArray = this.publicationChannelColumns.toArray();
+
+ // Map data to table
+ // Use highlight pipe for higlighting search term
+ this.tableColumns = [
+ {
+ key: 'name',
+ label: $localize`:@@publicationName:Julkaisun nimi`,
+ class: 'col-8 col-lg-5 col-xl-4',
+ mobile: true,
+ },
+ {
+ key: 'author',
+ label: $localize`:@@publicationAuthors:Tekijät`,
+ class: 'col-lg-5 col-xl-3 d-none d-lg-block',
+ mobile: false,
+ },
+ {
+ key: 'medium',
+ label: $localize`:@@publicationMedium:Julkaisukanava`,
+ tooltip: $localize`:@@publicationMediumTooltip:Lehti, kustantaja tai sarja, jossa julkaisu on ilmestynyt.`,
+ class: 'col-xl-3 d-none d-xl-block',
+ mobile: false,
+ },
+ {
+ key: 'year',
+ label: $localize`:@@year:Vuosi`,
+ class: 'col-lg-1',
+ mobile: true,
+ },
+ ];
+ this.tableRows = this.resultData.publications.map((publication, index) => ({
+ name: {
+ template: nameColumnArray[index],
+ link: `/results/publication/${publication.id}`, // For icon link
+ },
+ author: {
+ label: this.highlightPipe.transform(this.cutContentPipe.transform(publication.authors, 100) , this.input),
+ },
+ medium: {
+ template: channelColumnArray[index],
+ },
+ year: {
+ label: this.highlightPipe.transform(
+ publication.publicationYear,
+ this.input
+ ),
+ },
+ }));
+
+ this.dataMapped = true;
+ }
+
+ isReviewed(type: string) {
+ if (!type) {
+ return false;
+ }
+ return type[0] === 'A' || type[0] === 'C';
+ }
+
+ ngOnDestroy() {
+ this.tabChangeService.targetFocus('');
+ this.inputSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/results/publications2/publications2.component.ts b/src/app/portal/components/results/publications2/publications2.component.ts
index b7a75006a..6aa4cf9ff 100644
--- a/src/app/portal/components/results/publications2/publications2.component.ts
+++ b/src/app/portal/components/results/publications2/publications2.component.ts
@@ -24,7 +24,7 @@ import {
Publication2Service, SearchParams
} from '@portal/services/publication2.service';
import { filter, map, take, tap } from 'rxjs/operators';
-import { SharedModule } from '@shared/shared.module';
+// import { SharedModule } from '@shared/shared.module';
import { SearchBar2Component } from '@portal/search-bar2/search-bar2.component';
import { NgArrayPipesModule, NgMathPipesModule } from 'ngx-pipes';
import { OrganizationFilterComponent } from '@portal/components/organization-filter/organization-filter.component';
@@ -40,17 +40,25 @@ import { ColumnSorterComponent } from '@shared/components/column-sorter/column-s
import { faChartBar, faSlidersH } from '@fortawesome/free-solid-svg-icons';
import { Dialog, DialogRef } from '@angular/cdk/dialog';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { PaginationComponent } from '@shared/components/pagination/pagination.component';
+import {
+ PrimaryActionButtonComponent
+} from '@shared/components/buttons/primary-action-button/primary-action-button.component';
+import { SecondaryButtonComponent } from '@shared/components/buttons/secondary-button/secondary-button.component';
+import { TagPeerReviewedComponent } from '@shared/components/tags/tag-peer-reviewed/tag-peer-reviewed.component';
+import { TagOpenAccessComponent } from '@shared/components/tags/tag-open-access/tag-open-access.component';
+import { TagDoiComponent } from '@shared/components/tags/tag-doi/tag-doi.component';
@Component({
selector: 'app-publications2',
templateUrl: './publications2.component.html',
styleUrls: ['./publications2.component.scss'],
imports: [CdkTableModule, FormsModule, AsyncPipe, JsonPipe, NgForOf, NgIf, LimitPipe, NgArrayPipesModule,
- SharedModule, //TODO do not depend on shared module
+ // SharedModule, //TODO do not depend on shared module
FormsModule,
RouterModule,
SearchBar2Component, OrganizationFilterComponent, FilterOptionComponent, CollapsibleComponent, MatButtonModule, NgStyle, FilterLimitButtonComponent, FirstDigitPipe, FirstLetterPipe, RouterLink,
- LayoutModule, ColumnSorterComponent, NgTemplateOutlet, FontAwesomeModule, NgMathPipesModule
+ LayoutModule, ColumnSorterComponent, NgTemplateOutlet, FontAwesomeModule, NgMathPipesModule, PaginationComponent, PrimaryActionButtonComponent, SecondaryButtonComponent, TagPeerReviewedComponent, TagOpenAccessComponent, TagDoiComponent
],
standalone: true
})
diff --git a/src/app/portal/components/results/related-results/related-results.component.ts b/src/app/portal/components/results/related-results/related-results.component.ts
index b91b695b2..b386019aa 100644
--- a/src/app/portal/components/results/related-results/related-results.component.ts
+++ b/src/app/portal/components/results/related-results/related-results.component.ts
@@ -1,12 +1,15 @@
import { Component, OnInit } from '@angular/core';
-
+import { RouterLink } from '@angular/router';
+
@Component({
- selector: 'app-related-results',
- templateUrl: './related-results.component.html',
- styleUrls: ['./related-results.component.scss'],
-})
-export class RelatedResultsComponent implements OnInit {
- constructor() {}
-
- ngOnInit() {}
-}
+ selector: 'app-related-results',
+ templateUrl: './related-results.component.html',
+ styleUrls: ['./related-results.component.scss'],
+ standalone: true,
+ imports: [RouterLink],
+})
+export class RelatedResultsComponent implements OnInit {
+ constructor() {}
+
+ ngOnInit() {}
+}
diff --git a/src/app/portal/components/results/results-pagination/results-pagination.component.ts b/src/app/portal/components/results/results-pagination/results-pagination.component.ts
index 1de4701e7..5c29bc446 100644
--- a/src/app/portal/components/results/results-pagination/results-pagination.component.ts
+++ b/src/app/portal/components/results/results-pagination/results-pagination.component.ts
@@ -1,21 +1,24 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, OnInit } from '@angular/core';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, OnInit } from '@angular/core';
import { SearchService } from '@portal/services/search.service';
-
+import { PaginationComponent } from '../../../../shared/components/pagination/pagination.component';
+
@Component({
- selector: 'app-results-pagination',
- templateUrl: './results-pagination.component.html',
-})
-export class ResultsPaginationComponent implements OnInit {
- @Input() data: any;
-
- constructor(public searchService: SearchService) {}
-
- ngOnInit(): void {}
-}
+ selector: 'app-results-pagination',
+ templateUrl: './results-pagination.component.html',
+ standalone: true,
+ imports: [PaginationComponent],
+})
+export class ResultsPaginationComponent implements OnInit {
+ @Input() data: any;
+
+ constructor(public searchService: SearchService) {}
+
+ ngOnInit(): void {}
+}
diff --git a/src/app/portal/components/results/results.component.html b/src/app/portal/components/results/results.component.html
index d7ea1eda2..b15e4a406 100644
--- a/src/app/portal/components/results/results.component.html
+++ b/src/app/portal/components/results/results.component.html
@@ -432,7 +432,9 @@
Tuloksia näytetään enintään 10 000
extraClass="visual-dialog"
[headerInfoTemplate]="dialogHeaderInfo"
>
+
',
+ selector: 'app-search-results',
+ template: '',
+ standalone: true,
})
export class SearchResultsComponent implements OnInit, OnChanges, OnDestroy {
portalHost: DomPortalOutlet;
@@ -57,7 +62,8 @@ export class SearchResultsComponent implements OnInit, OnChanges, OnDestroy {
constructor(
private injector: Injector,
- private searchService: SearchService
+ private searchService: SearchService,
+ private sanitizer: DomSanitizer
) {}
ngOnInit() {
@@ -140,7 +146,16 @@ export class SearchResultsComponent implements OnInit, OnChanges, OnDestroy {
break;
}
- const myPortal = new ComponentPortal(child);
+ const portalInjector = Injector.create({
+ providers: [
+ { provide: HighlightSearchPipe, useValue: new HighlightSearchPipe(this.sanitizer) },
+ { provide: CutContentPipe, useValue: new CutContentPipe()},
+ { provide: MatDatepickerModule, useValue: new MatDatepickerModule()}
+ ],
+ parent: this.injector
+ });
+
+ const myPortal = new ComponentPortal(child, null, portalInjector);
this.portalHost.detach();
this.componentRef = this.portalHost.attach(myPortal);
this.componentRef.instance.resultData = this.responseData;
@@ -148,8 +163,9 @@ export class SearchResultsComponent implements OnInit, OnChanges, OnDestroy {
}
@Component({
- selector: 'app-empty-result',
- template: 'Component not implemented yet',
+ selector: 'app-empty-result',
+ template: 'Component not implemented yet',
+ standalone: true,
})
export class EmptyResultComponent {
@Input() resultData;
diff --git a/src/app/portal/components/results/search-results/utils.ts b/src/app/portal/components/results/search-results/utils.ts
index f56921a5f..d720479c7 100644
--- a/src/app/portal/components/results/search-results/utils.ts
+++ b/src/app/portal/components/results/search-results/utils.ts
@@ -1,23 +1,22 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- ElementRef,
- ComponentFactoryResolver,
- ApplicationRef,
- Injector,
-} from '@angular/core';
-import { DomPortalOutlet } from '@angular/cdk/portal';
-
-export function createDomPortalOutlet(elRef: ElementRef, injector: Injector) {
- return new DomPortalOutlet(
- elRef.nativeElement,
- injector.get(ComponentFactoryResolver as any),
- injector.get(ApplicationRef as any),
- injector
- );
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ ElementRef,
+ ApplicationRef,
+ Injector, ComponentFactoryResolver
+} from '@angular/core';
+import { DomPortalOutlet } from '@angular/cdk/portal';
+
+export function createDomPortalOutlet(elRef: ElementRef, injector: Injector) {
+ return new DomPortalOutlet(
+ elRef.nativeElement,
+ injector.get(ComponentFactoryResolver as any), // NO LONGER NEEDED
+ injector.get(ApplicationRef as any),
+ injector
+ );
+}
diff --git a/src/app/portal/components/results/sort/sort.component.scss b/src/app/portal/components/results/sort/sort.component.scss
index 4775ca03a..865d42713 100644
--- a/src/app/portal/components/results/sort/sort.component.scss
+++ b/src/app/portal/components/results/sort/sort.component.scss
@@ -1,122 +1,126 @@
-// # This file is part of the research.fi API service
-// #
-// # Copyright 2019 Ministry of Education and Culture, Finland
-// #
-// # :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// # :license: MIT
-
-app-sort {
- .sort {
- text-align: center;
- max-width: 340px;
- margin-left: auto;
- margin-right: 0;
- margin-bottom: 20px;
- }
-
- span.align-left.hide-mobile {
- margin-right: 25px;
- text-transform: uppercase;
- font-weight: bold;
- }
-
- mat-form-field.sort-button .mat-select {
- font-family: inherit !important;
- }
-
- mat-form-field .mat-select-value-text {
- font-size: 1rem;
- font-weight: normal;
- }
-
- .mat-select-trigger {
- padding: 12px 0;
- padding-left: 5px;
- }
-
- .hide-mobile {
- display: none;
- }
-
- .sort {
- text-align: center;
- min-width: 152px;
- max-width: 95%;
- margin-right: auto;
- margin-left: auto;
- margin-bottom: 0;
- }
-
- // mat-form-field.sort-button .mat-select-value {
- // font-size: 1.4rem!important;
- // }
-
+// # This file is part of the research.fi API service
+// #
+// # Copyright 2019 Ministry of Education and Culture, Finland
+// #
+// # :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// # :license: MIT
+
+app-sort {
+ .sort {
+ text-align: center;
+ max-width: 340px;
+ margin-left: auto;
+ margin-right: 0;
+ margin-bottom: 20px;
+ }
+
+ span.align-left.hide-mobile {
+ margin-right: 25px;
+ text-transform: uppercase;
+ font-weight: bold;
+ }
+
+ mat-form-field.sort-button .mat-mdc-select {
+ font-family: inherit !important;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ mat-form-field .mat-select-value-text {
+ font-size: 1rem;
+ font-weight: normal;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ .mat-select-trigger {
+ padding: 12px 0;
+ padding-left: 5px;
+ }
+
+ .hide-mobile {
+ display: none;
+ }
+
+ .sort {
+ text-align: center;
+ min-width: 152px;
+ max-width: 95%;
+ margin-right: auto;
+ margin-left: auto;
+ margin-bottom: 0;
+ }
+
+ // mat-form-field.sort-button .mat-select-value {
+ // font-size: 1.4rem!important;
+ // }
+
// Chevron
- mat-form-field.sort-button .mat-select-value-text:after {
- content: '';
- }
-
- mat-form-field.sort-button .mat-select-value-text::after {
- font-family: 'FontAwesome';
- content: '\f078';
- font-size: 1rem;
- padding-left: 0.5rem;
- }
-
- mat-form-field.sort-button .mat-form-field-label-wrapper {
- top: 0;
- padding-top: 0;
- }
-
- mat-form-field.mat-focused {
- outline: -webkit-focus-ring-color auto 1px;
- }
-
- mat-form-field.mat-form-field {
- width: 100%;
- border-radius: 6px;
- display: flex;
- justify-content: center;
- align-items: center;
- }
-
- mat-form-field.sort-button .mat-select-arrow {
- border: 0 !important;
- }
-
- mat-form-field.sort-button .mat-form-field-wrapper {
- padding-bottom: 0 !important;
- width: 100%;
- }
-
- mat-form-field.sort-button .mat-form-field-infix {
- border: 0 !important;
- padding: 0 !important;
- // width: 168px !important;
- }
-
- mat-form-field.sort-button mat-select {
- // font-size: 24px;
- text-align: center;
- }
- mat-form-field.sort-button .mat-form-field-underline {
- display: none !important;
- }
-
- mat-form-field.sort-button .mat-select-panel {
- max-height: 100% !important;
- font-size: 20px !important;
- }
-
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-select-value-text:after {
+ content: '';
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-select-value-text::after {
+ font-family: 'FontAwesome';
+ content: '\f078';
+ font-size: 1rem;
+ padding-left: 0.5rem;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-label-wrapper {
+ top: 0;
+ padding-top: 0;
+ }
+
+ mat-form-field.mat-focused {
+ outline: -webkit-focus-ring-color auto 1px;
+ }
+
+ mat-form-field.mat-mdc-form-field {
+ width: 100%;
+ border-radius: 6px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-select-arrow {
+ border: 0 !important;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-wrapper {
+ padding-bottom: 0 !important;
+ width: 100%;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-infix {
+ border: 0 !important;
+ padding: 0 !important;
+ // width: 168px !important;
+ }
+
+ mat-form-field.sort-button mat-select {
+ // font-size: 24px;
+ text-align: center;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-underline {
+ display: none !important;
+ }
+
+ mat-form-field.sort-button .mat-mdc-select-panel {
+ max-height: 100% !important;
+ font-size: 20px !important;
+ }
+
@media (max-width: 576px) {
- mat-form-field.sort-button .mat-form-field-infix {
- width: 150px !important;
- }
- }
-
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-infix {
+ width: 150px !important;
+ }
+ }
+
@media (max-width: 350px) {
- mat-form-field.sort-button .mat-form-field-infix {
- width: 135px !important;
- }
- }
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
+ mat-form-field.sort-button .mat-form-field-infix {
+ width: 135px !important;
+ }
+ }
+}
diff --git a/src/app/portal/components/results/sort/sort.component.scss-theme.scss b/src/app/portal/components/results/sort/sort.component.scss-theme.scss
index b840b6b2d..611977763 100644
--- a/src/app/portal/components/results/sort/sort.component.scss-theme.scss
+++ b/src/app/portal/components/results/sort/sort.component.scss-theme.scss
@@ -1,31 +1,33 @@
-@import '@angular/material/theming';
-
-@mixin app-sort-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-sort {
- .sort-button.mat-focused:active {
- box-shadow: 0 0 0 4px mat-color($primary);
- outline: 0;
- }
-
- .sort-button:hover {
- background-color: mat-color($primary, 100);
- }
-
- mat-form-field .mat-select-value-text {
- color: mat-color($primary);
- }
-
- mat-form-field.mat-form-field {
- border: 2px solid mat-color($primary);
- }
- .mat-select-value {
- color: mat-contrast($primary, 200);
- font-weight: 500;
- }
- .mat-form-field-flex::after {
- color: mat-color($primary, 900);
- }
- }
-}
+@use 'migration' as *;
+
+@mixin app-sort-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-sort {
+ .sort-button.mat-focused:active {
+ box-shadow: 0 0 0 4px mat-color($primary);
+ outline: 0;
+ }
+
+ .sort-button:hover {
+ background-color: mat-color($primary, 100);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+ mat-form-field .mat-select-value-text {
+ color: mat-color($primary);
+ }
+
+ mat-form-field.mat-mdc-form-field {
+ border: 2px solid mat-color($primary);
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+ .mat-select-value {
+ color: mat-contrast($primary, 200);
+ font-weight: 500;
+ }
+ /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
+ .mat-form-field-flex::after {
+ color: mat-color($primary, 900);
+ }
+ }
+}
diff --git a/src/app/portal/components/results/sort/sort.component.ts b/src/app/portal/components/results/sort/sort.component.ts
index a99559d17..518ae3dcb 100644
--- a/src/app/portal/components/results/sort/sort.component.ts
+++ b/src/app/portal/components/results/sort/sort.component.ts
@@ -1,140 +1,151 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { SortService } from '@portal/services/sort.service';
-import { TabChangeService } from '@portal/services/tab-change.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { SortService } from '@portal/services/sort.service';
+import { TabChangeService } from '@portal/services/tab-change.service';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
-
-type SortOption = { label: string; value: string };
+import { NgFor } from '@angular/common';
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
+
+type SortOption = { label: string; value: string };
@Component({
- selector: 'app-sort',
- templateUrl: './sort.component.html',
- styleUrls: ['./sort.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class SortComponent implements OnInit, OnDestroy {
- tabLink: string;
- tabFields: any;
- currentSort: SortOption;
- tabSub: any;
- sortByRelevance = {
- label: $localize`:@@sortByRelevance:Osuvin tulos ensin`,
- value: 'reset',
- };
- faChevronDown = faChevronDown;
-
- // Assign values to dropdown list by current tab
- publicationFields: SortOption[] = [
- { label: $localize`:@@sortNewest:Uusin ensin`, value: 'yearDesc' },
- { label: $localize`:@@sortOldest:Vanhin ensin`, value: 'year' },
- { label: $localize`:@@sortPublicationAsc:Nimike (A-Ö)`, value: 'name' },
- {
- label: $localize`:@@sortAuthorAsc:Ensimmäinen tekijä (A-Ö)`,
- value: 'author',
- },
- ];
- fundingFields = [
- { label: $localize`:@@sortNewest:Uusin ensin`, value: 'yearDesc' },
- { label: $localize`:@@sortOldest:Vanhin ensin`, value: 'year' },
- { label: $localize`:@@sortProjectNameAsc:Hanke (A-Ö)`, value: 'name' },
- {
- label: $localize`:@@sortFunderNameAsc:Rahoittaja (A-Ö)`,
- value: 'funder',
- },
- ];
- infraFields = [
- { label: $localize`:@@sortAcronymAsc:Lyhenne (A-Ö)`, value: 'acronym' },
- {
- label: $localize`:@@sortInfraNameAsc:Infrastruktuuri (A-Ö)`,
- value: 'name',
- },
- {
- label: $localize`:@@sortOrgNameAsc:Organisaatio (A-Ö)`,
- value: 'organization',
- },
- ];
- organizationFields = [
- { label: $localize`:@@sortOrgNameAsc:Organisaatio (A-Ö)`, value: 'name' },
- { label: $localize`:@@sortSectorNameAsc:Sektori (A-Ö)`, value: 'sector' },
- ];
- mobileStatusSub: any;
- mobile: boolean;
-
- constructor(
- private route: ActivatedRoute,
- private router: Router,
- private sortService: SortService,
- private tabChangeService: TabChangeService,
- private appSettingsService: AppSettingsService
- ) {}
-
- ngOnInit() {
- // Subscribe to current tab parameter
- this.tabSub = this.tabChangeService.currentTab.subscribe((tab) => {
- switch (tab.link) {
- case 'publications': {
- this.tabFields = this.publicationFields;
- break;
- }
- case 'fundings': {
- this.tabFields = this.fundingFields;
- break;
- }
- case 'infrastructures': {
- this.tabFields = this.infraFields;
- break;
- }
- case 'organizations': {
- this.tabFields = this.organizationFields;
- break;
- }
- default: {
- this.tabFields = [];
- }
- }
- // Get sort from url and reset sort on tab change
- if (!this.currentSort ? this.currentSort : this.sortByRelevance) {
- }
-
- // Set value from query parameters on initialization
- this.currentSort =
- this.tabFields.find(
- (item) => item.value === this.route.snapshot.queryParams.sort
- ) || this.sortByRelevance;
- });
-
- // Handle mobile status
- this.mobileStatusSub = this.appSettingsService.mobileStatus.subscribe(
- (status: boolean) => {
- this.mobile = status;
- }
- );
- }
-
- // Send value to service and rewrite url
- orderBy(option: SortOption): void {
- this.currentSort = option;
- this.sortService.updateSort(option.value);
- this.navigate();
- }
-
- navigate() {
- this.router.navigate([], {
- relativeTo: this.route,
- queryParams: { sort: this.currentSort.value },
- queryParamsHandling: 'merge',
- });
- }
-
- ngOnDestroy() {
- this.tabSub?.unsubscribe();
- this.mobileStatusSub?.unsubscribe();
- }
-}
+ selector: 'app-sort',
+ templateUrl: './sort.component.html',
+ styleUrls: ['./sort.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ SecondaryButtonComponent,
+ MatMenuTrigger,
+ MatMenu,
+ MatMenuItem,
+ NgFor,
+ ],
+})
+export class SortComponent implements OnInit, OnDestroy {
+ tabLink: string;
+ tabFields: any;
+ currentSort: SortOption;
+ tabSub: any;
+ sortByRelevance = {
+ label: $localize`:@@sortByRelevance:Osuvin tulos ensin`,
+ value: 'reset',
+ };
+ faChevronDown = faChevronDown;
+
+ // Assign values to dropdown list by current tab
+ publicationFields: SortOption[] = [
+ { label: $localize`:@@sortNewest:Uusin ensin`, value: 'yearDesc' },
+ { label: $localize`:@@sortOldest:Vanhin ensin`, value: 'year' },
+ { label: $localize`:@@sortPublicationAsc:Nimike (A-Ö)`, value: 'name' },
+ {
+ label: $localize`:@@sortAuthorAsc:Ensimmäinen tekijä (A-Ö)`,
+ value: 'author',
+ },
+ ];
+ fundingFields = [
+ { label: $localize`:@@sortNewest:Uusin ensin`, value: 'yearDesc' },
+ { label: $localize`:@@sortOldest:Vanhin ensin`, value: 'year' },
+ { label: $localize`:@@sortProjectNameAsc:Hanke (A-Ö)`, value: 'name' },
+ {
+ label: $localize`:@@sortFunderNameAsc:Rahoittaja (A-Ö)`,
+ value: 'funder',
+ },
+ ];
+ infraFields = [
+ { label: $localize`:@@sortAcronymAsc:Lyhenne (A-Ö)`, value: 'acronym' },
+ {
+ label: $localize`:@@sortInfraNameAsc:Infrastruktuuri (A-Ö)`,
+ value: 'name',
+ },
+ {
+ label: $localize`:@@sortOrgNameAsc:Organisaatio (A-Ö)`,
+ value: 'organization',
+ },
+ ];
+ organizationFields = [
+ { label: $localize`:@@sortOrgNameAsc:Organisaatio (A-Ö)`, value: 'name' },
+ { label: $localize`:@@sortSectorNameAsc:Sektori (A-Ö)`, value: 'sector' },
+ ];
+ mobileStatusSub: any;
+ mobile: boolean;
+
+ constructor(
+ private route: ActivatedRoute,
+ private router: Router,
+ private sortService: SortService,
+ private tabChangeService: TabChangeService,
+ private appSettingsService: AppSettingsService
+ ) {}
+
+ ngOnInit() {
+ // Subscribe to current tab parameter
+ this.tabSub = this.tabChangeService.currentTab.subscribe((tab) => {
+ switch (tab.link) {
+ case 'publications': {
+ this.tabFields = this.publicationFields;
+ break;
+ }
+ case 'fundings': {
+ this.tabFields = this.fundingFields;
+ break;
+ }
+ case 'infrastructures': {
+ this.tabFields = this.infraFields;
+ break;
+ }
+ case 'organizations': {
+ this.tabFields = this.organizationFields;
+ break;
+ }
+ default: {
+ this.tabFields = [];
+ }
+ }
+ // Get sort from url and reset sort on tab change
+ if (!this.currentSort ? this.currentSort : this.sortByRelevance) {
+ }
+
+ // Set value from query parameters on initialization
+ this.currentSort =
+ this.tabFields.find(
+ (item) => item.value === this.route.snapshot.queryParams.sort
+ ) || this.sortByRelevance;
+ });
+
+ // Handle mobile status
+ this.mobileStatusSub = this.appSettingsService.mobileStatus.subscribe(
+ (status: boolean) => {
+ this.mobile = status;
+ }
+ );
+ }
+
+ // Send value to service and rewrite url
+ orderBy(option: SortOption): void {
+ this.currentSort = option;
+ this.sortService.updateSort(option.value);
+ this.navigate();
+ }
+
+ navigate() {
+ this.router.navigate([], {
+ relativeTo: this.route,
+ queryParams: { sort: this.currentSort.value },
+ queryParamsHandling: 'merge',
+ });
+ }
+
+ ngOnDestroy() {
+ this.tabSub?.unsubscribe();
+ this.mobileStatusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/results/suggest/suggest.component.ts b/src/app/portal/components/results/suggest/suggest.component.ts
index d305484a2..1315169f2 100644
--- a/src/app/portal/components/results/suggest/suggest.component.ts
+++ b/src/app/portal/components/results/suggest/suggest.component.ts
@@ -1,119 +1,121 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- OnDestroy,
- Inject,
- LOCALE_ID,
- PLATFORM_ID,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { SearchService } from '../../../services/search.service';
-import { TabChangeService } from '../../../services/tab-change.service';
-import { map } from 'rxjs/operators';
-import { Router } from '@angular/router';
-import { UtilityService } from '@shared/services/utility.service';
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ OnDestroy,
+ Inject,
+ LOCALE_ID,
+ PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser, NgIf, NgFor } from '@angular/common';
+import { SearchService } from '../../../services/search.service';
+import { TabChangeService } from '../../../services/tab-change.service';
+import { map } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { UtilityService } from '@shared/services/utility.service';
+
@Component({
- selector: 'app-suggest',
- templateUrl: './suggest.component.html',
- styleUrls: ['./suggest.component.scss'],
-})
-export class SuggestComponent implements OnInit, OnDestroy {
- suggests: any;
- responseData: any;
- errorMessage: any;
- currentTab: { data: string; label: string; link: string; icon: string };
- tabSub: any;
- inputSub: any;
- dataSub: any;
- currentInput: any;
- tabValueSub: any;
-
- constructor(
- private searchService: SearchService,
- public router: Router,
- private tabChangeService: TabChangeService,
- @Inject(LOCALE_ID) protected localeId: string,
- private utilityService: UtilityService,
- @Inject(PLATFORM_ID) private platformId: object
- ) {}
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit() {
- // Subscribe to input change and get data
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.currentInput = input;
- this.tabSub = this.tabChangeService.currentTab.subscribe((tab) => {
- this.currentTab = tab;
- });
- this.getResultData();
- });
- }
-
- getResultData() {
- // Get data
- this.dataSub = this.searchService
- .getData()
- .pipe(map((responseData) => [responseData]))
- .subscribe((responseData) => {
- // ToDo: Remove outer if statement when all indices have been mapped to suggests
- if (this.currentTab.data === 'publications') {
- (this.responseData = responseData),
- // path to suggestions
- (this.suggests = this.responseData[0].suggest.mySuggestions[0]);
- // Update total & title if no hits
- if (this.responseData[0].hits.total === 0) {
- // Update total count, fixes issue where old count is visible when no results
- this.searchService.updateTotal(0);
- // Update title, same fix as above
- this.updateTitle(this.currentTab);
- }
- }
- });
- }
-
- updateTitle(tab) {
- // Set title by locale
- switch (this.localeId) {
- case 'fi': {
- this.setTitle(
- tab.labelFi + ' - Ei tuloksia - Haku - Tutkimustietovaranto'
- );
- break;
- }
- case 'en': {
- this.setTitle(tab.labelEn + ' - No results - Search - Research portal');
- break;
- }
- }
- }
-
- navigate(term) {
- this.searchService.updateInput(term);
- this.tabValueSub = this.searchService
- .getTabValues()
- .subscribe((data: any) => {
- this.searchService.tabValues = data;
- this.searchService.redirecting = true;
- this.router.navigate(['results/', this.currentTab.data, term]);
- });
- }
-
- ngOnDestroy() {
- if (isPlatformBrowser(this.platformId)) {
- this.tabSub?.unsubscribe();
- this.inputSub?.unsubscribe();
- this.dataSub?.unsubscribe();
- this.tabValueSub?.unsubscribe();
- }
- }
-}
+ selector: 'app-suggest',
+ templateUrl: './suggest.component.html',
+ styleUrls: ['./suggest.component.scss'],
+ standalone: true,
+ imports: [NgIf, NgFor],
+})
+export class SuggestComponent implements OnInit, OnDestroy {
+ suggests: any;
+ responseData: any;
+ errorMessage: any;
+ currentTab: { data: string; label: string; link: string; icon: string };
+ tabSub: any;
+ inputSub: any;
+ dataSub: any;
+ currentInput: any;
+ tabValueSub: any;
+
+ constructor(
+ private searchService: SearchService,
+ public router: Router,
+ private tabChangeService: TabChangeService,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private utilityService: UtilityService,
+ @Inject(PLATFORM_ID) private platformId: object
+ ) {}
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit() {
+ // Subscribe to input change and get data
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.currentInput = input;
+ this.tabSub = this.tabChangeService.currentTab.subscribe((tab) => {
+ this.currentTab = tab;
+ });
+ this.getResultData();
+ });
+ }
+
+ getResultData() {
+ // Get data
+ this.dataSub = this.searchService
+ .getData()
+ .pipe(map((responseData) => [responseData]))
+ .subscribe((responseData) => {
+ // ToDo: Remove outer if statement when all indices have been mapped to suggests
+ if (this.currentTab.data === 'publications') {
+ (this.responseData = responseData),
+ // path to suggestions
+ (this.suggests = this.responseData[0].suggest.mySuggestions[0]);
+ // Update total & title if no hits
+ if (this.responseData[0].hits.total === 0) {
+ // Update total count, fixes issue where old count is visible when no results
+ this.searchService.updateTotal(0);
+ // Update title, same fix as above
+ this.updateTitle(this.currentTab);
+ }
+ }
+ });
+ }
+
+ updateTitle(tab) {
+ // Set title by locale
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle(
+ tab.labelFi + ' - Ei tuloksia - Haku - Tutkimustietovaranto'
+ );
+ break;
+ }
+ case 'en': {
+ this.setTitle(tab.labelEn + ' - No results - Search - Research portal');
+ break;
+ }
+ }
+ }
+
+ navigate(term) {
+ this.searchService.updateInput(term);
+ this.tabValueSub = this.searchService
+ .getTabValues()
+ .subscribe((data: any) => {
+ this.searchService.tabValues = data;
+ this.searchService.redirecting = true;
+ this.router.navigate(['results/', this.currentTab.data, term]);
+ });
+ }
+
+ ngOnDestroy() {
+ if (isPlatformBrowser(this.platformId)) {
+ this.tabSub?.unsubscribe();
+ this.inputSub?.unsubscribe();
+ this.dataSub?.unsubscribe();
+ this.tabValueSub?.unsubscribe();
+ }
+ }
+}
diff --git a/src/app/portal/components/results/tooltip/tooltip.component.ts b/src/app/portal/components/results/tooltip/tooltip.component.ts
index f60344c38..ed40a1f5c 100644
--- a/src/app/portal/components/results/tooltip/tooltip.component.ts
+++ b/src/app/portal/components/results/tooltip/tooltip.component.ts
@@ -1,86 +1,96 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, Input, Inject, OnInit, OnDestroy } from '@angular/core';
-import { DOCUMENT } from '@angular/common';
-import { SearchService } from 'src/app/portal/services/search.service';
-
-@Component({
- selector: 'app-tooltip',
- templateUrl: './tooltip.component.html',
-})
-export class TooltipComponent implements OnInit, OnDestroy {
- @Input() title: string;
- @Input() description: string;
- @Input() id: string;
- @Input() index: number;
- hoverIndex: any;
- tooltipMargin: string;
- tooltipUpMargin: string;
- colStyle = {
- padding: '12px 0 12px 0',
- 'margin-bottom': '-12px',
- 'margin-top': '-12px',
- position: 'unset',
- };
- arrowPosition: string;
- hasDescription: boolean;
- inputSub: any;
- input: string;
-
- constructor(
- @Inject(DOCUMENT) private document: Document,
- private searchService: SearchService
- ) {}
-
- // Show description box
- enter(index) {
- this.hoverIndex = index;
- }
-
- // Get div position and place description box where cursor fires hover
- getCoords(event, index, description) {
- description = description ? description : ' ';
- this.hasDescription = description.length > 10 ? true : false;
- // Calculate vertical cursor position and place tooltip above or below title depending on position
- const headerHeight = this.document.getElementById('header-' + index)
- .offsetHeight;
- if (event.clientY > 535) {
- // Calculate tooltip height, 41 is character count that goes to one row
- const toolTipHeight = description.length > 41 ? 176 : 78;
- this.tooltipUpMargin = 0 - (headerHeight + toolTipHeight) + 'px';
- this.arrowPosition = 'down';
- } else {
- this.tooltipUpMargin = 0 + 'px';
- this.arrowPosition = 'up';
- }
- const divPosition = this.document
- .getElementById('title')
- .getBoundingClientRect();
- // Calculate margin, prevent tooltip to get past 150px from column start
- const x =
- event.clientX - 52 - divPosition.left < 150
- ? event.clientX - 52 - divPosition.left
- : 150;
- this.tooltipMargin = x + 'px';
- }
-
- // Close description
- leave(index) {
- this.hoverIndex = null;
- }
-
- ngOnInit() {
- this.inputSub = this.searchService.currentInput.subscribe((input) => {
- this.input = input;
- });
- }
-
- ngOnDestroy() {
- this.inputSub?.unsubscribe();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, Input, Inject, OnInit, OnDestroy } from '@angular/core';
+import { DOCUMENT, NgStyle, NgIf, NgClass } from '@angular/common';
+import { SearchService } from 'src/app/portal/services/search.service';
+import { HighlightSearchPipe } from '../../../pipes/highlight.pipe';
+import { RouterLink } from '@angular/router';
+
+@Component({
+ selector: 'app-tooltip',
+ templateUrl: './tooltip.component.html',
+ standalone: true,
+ imports: [
+ NgStyle,
+ RouterLink,
+ NgIf,
+ NgClass,
+ HighlightSearchPipe,
+ ],
+})
+export class TooltipComponent implements OnInit, OnDestroy {
+ @Input() title: string;
+ @Input() description: string;
+ @Input() id: string;
+ @Input() index: number;
+ hoverIndex: any;
+ tooltipMargin: string;
+ tooltipUpMargin: string;
+ colStyle = {
+ padding: '12px 0 12px 0',
+ 'margin-bottom': '-12px',
+ 'margin-top': '-12px',
+ position: 'unset',
+ };
+ arrowPosition: string;
+ hasDescription: boolean;
+ inputSub: any;
+ input: string;
+
+ constructor(
+ @Inject(DOCUMENT) private document: Document,
+ private searchService: SearchService
+ ) {}
+
+ // Show description box
+ enter(index) {
+ this.hoverIndex = index;
+ }
+
+ // Get div position and place description box where cursor fires hover
+ getCoords(event, index, description) {
+ description = description ? description : ' ';
+ this.hasDescription = description.length > 10 ? true : false;
+ // Calculate vertical cursor position and place tooltip above or below title depending on position
+ const headerHeight = this.document.getElementById('header-' + index)
+ .offsetHeight;
+ if (event.clientY > 535) {
+ // Calculate tooltip height, 41 is character count that goes to one row
+ const toolTipHeight = description.length > 41 ? 176 : 78;
+ this.tooltipUpMargin = 0 - (headerHeight + toolTipHeight) + 'px';
+ this.arrowPosition = 'down';
+ } else {
+ this.tooltipUpMargin = 0 + 'px';
+ this.arrowPosition = 'up';
+ }
+ const divPosition = this.document
+ .getElementById('title')
+ .getBoundingClientRect();
+ // Calculate margin, prevent tooltip to get past 150px from column start
+ const x =
+ event.clientX - 52 - divPosition.left < 150
+ ? event.clientX - 52 - divPosition.left
+ : 150;
+ this.tooltipMargin = x + 'px';
+ }
+
+ // Close description
+ leave(index) {
+ this.hoverIndex = null;
+ }
+
+ ngOnInit() {
+ this.inputSub = this.searchService.currentInput.subscribe((input) => {
+ this.input = input;
+ });
+ }
+
+ ngOnDestroy() {
+ this.inputSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/science-politics/external-links/external-links.component.ts b/src/app/portal/components/science-politics/external-links/external-links.component.ts
index e608e1dc5..c3b0b9c15 100644
--- a/src/app/portal/components/science-politics/external-links/external-links.component.ts
+++ b/src/app/portal/components/science-politics/external-links/external-links.component.ts
@@ -1,85 +1,97 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- Inject,
- ViewChild,
- LOCALE_ID,
- AfterViewInit,
- OnDestroy,
- ElementRef,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { TabChangeService } from '@portal/services/tab-change.service';
-import { Subscription } from 'rxjs';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ Inject,
+ ViewChild,
+ LOCALE_ID,
+ AfterViewInit,
+ OnDestroy,
+ ElementRef,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TabChangeService } from '@portal/services/tab-change.service';
+import { Subscription } from 'rxjs';
import { UtilityService } from '@shared/services/utility.service';
-
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { DividerComponent } from '../../../../shared/components/divider/divider.component';
+import { NgFor, NgClass } from '@angular/common';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
@Component({
- selector: 'app-external-links',
- templateUrl: './external-links.component.html',
- styleUrls: ['./external-links.component.scss'],
-})
-export class ExternalLinksComponent
- implements OnInit, AfterViewInit, OnDestroy
-{
- @ViewChild('mainFocus') mainFocus: ElementRef;
- focusSub: Subscription;
- data: any;
-
- constructor(
- @Inject(LOCALE_ID) protected localeId: string,
- private utilityService: UtilityService,
- private tabChangeService: TabChangeService,
- private route: ActivatedRoute
- ) {}
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit(): void {
- // Get data
- this.data = this.route.snapshot.data.links;
- // Set title
- switch (this.localeId) {
- case 'fi': {
- this.setTitle(
- 'Tieteestä ja tutkimuksesta muualla - Tiedejatutkimus.fi'
- );
- break;
- }
- case 'en': {
- this.setTitle('Science and research elsewhere - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle('Vetenskap och forskning annanstans - Forskning.fi');
- break;
- }
- }
-
- // Hide skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(false);
- }
-
- ngAfterViewInit() {
- // Focus with skip-links
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.mainFocus?.nativeElement.focus();
- }
- }
- );
- }
-
- ngOnDestroy() {
- this.focusSub?.unsubscribe();
- }
-}
+ selector: 'app-external-links',
+ templateUrl: './external-links.component.html',
+ styleUrls: ['./external-links.component.scss'],
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ NgFor,
+ DividerComponent,
+ NgClass,
+ FontAwesomeModule,
+ ],
+})
+export class ExternalLinksComponent
+ implements OnInit, AfterViewInit, OnDestroy
+{
+ @ViewChild('mainFocus') mainFocus: ElementRef;
+ focusSub: Subscription;
+ data: any;
+
+ constructor(
+ @Inject(LOCALE_ID) protected localeId: string,
+ private utilityService: UtilityService,
+ private tabChangeService: TabChangeService,
+ private route: ActivatedRoute
+ ) {}
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit(): void {
+ // Get data
+ this.data = this.route.snapshot.data.links;
+ // Set title
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle(
+ 'Tieteestä ja tutkimuksesta muualla - Tiedejatutkimus.fi'
+ );
+ break;
+ }
+ case 'en': {
+ this.setTitle('Science and research elsewhere - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle('Vetenskap och forskning annanstans - Forskning.fi');
+ break;
+ }
+ }
+
+ // Hide skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(false);
+ }
+
+ ngAfterViewInit() {
+ // Focus with skip-links
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.mainFocus?.nativeElement.focus();
+ }
+ }
+ );
+ }
+
+ ngOnDestroy() {
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/carousel/carousel.component.scss-theme.scss b/src/app/portal/components/science-politics/figures/carousel/carousel.component.scss-theme.scss
index 0e7025364..6fb9a5df7 100644
--- a/src/app/portal/components/science-politics/figures/carousel/carousel.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/figures/carousel/carousel.component.scss-theme.scss
@@ -1,32 +1,32 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-carousel-theme($theme) {
- $primary: map-get($theme, primary);
-
- .active {
- border: 2px solid mat-color($primary);
- }
-
- .item-title {
- background-color: mat-color($primary);
- color: mat-contrast($primary, 500);
- }
-
- .item-description {
- background-color: mat-color($primary, 200);
- color: mat-contrast($primary, 200);
- }
-
- .mat-stroked-button:not([disabled]) {
- border: 2px solid;
- border-color: mat-color($primary);
- color: mat-color($primary);
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-carousel-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ .active {
+ border: 2px solid mat-color($primary);
+ }
+
+ .item-title {
+ background-color: mat-color($primary);
+ color: mat-contrast($primary, 500);
+ }
+
+ .item-description {
+ background-color: mat-color($primary, 200);
+ color: mat-contrast($primary, 200);
+ }
+
+ .mat-mdc-outlined-button:not([disabled]) {
+ border: 2px solid;
+ border-color: mat-color($primary);
+ color: mat-color($primary);
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/carousel/carousel.component.ts b/src/app/portal/components/science-politics/figures/carousel/carousel.component.ts
index 1e976086f..c01daccde 100644
--- a/src/app/portal/components/science-politics/figures/carousel/carousel.component.ts
+++ b/src/app/portal/components/science-politics/figures/carousel/carousel.component.ts
@@ -1,61 +1,73 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit, Input, OnChanges } from '@angular/core';
-import {
- faAngleDoubleRight,
- faAngleDoubleLeft,
-} from '@fortawesome/free-solid-svg-icons';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnInit, Input, OnChanges } from '@angular/core';
+import {
+ faAngleDoubleRight,
+ faAngleDoubleLeft,
+} from '@fortawesome/free-solid-svg-icons';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { CutContentPipe } from '../../../../../shared/pipes/cut-content.pipe';
+import { RouterLink } from '@angular/router';
+import { SecondaryButtonComponent } from '../../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { NgIf, NgFor } from '@angular/common';
+
@Component({
- selector: 'app-carousel',
- templateUrl: './carousel.component.html',
- styleUrls: ['./carousel.component.scss'],
-})
-export class CarouselComponent implements OnInit, OnChanges {
- @Input() data: any[];
- @Input() id: string;
- @Input() queryParams: any[];
-
- slicedData: any[];
- idx: number;
- maxIdx: number;
- currentLocale: string;
- faAngleDoubleRight = faAngleDoubleRight;
- faAngleDoubleLeft = faAngleDoubleLeft;
-
- next = $localize`:@@next:Seuraava`;
- previous = $localize`:@@previous:Edellinen`;
-
- constructor(private appSettingsService: AppSettingsService) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {}
-
- ngOnChanges() {
- this.maxIdx = this.data.length - 1;
- // Default to first item if no matching ID when filtering
- this.idx = this.data.find((x) => x.id === this.id)
- ? this.data.findIndex((x) => x.id === this.id)
- : 0;
- this.slicedData = this.sliceAround(this.idx, this.maxIdx, this.data);
- }
-
- sliceAround(idx: number, maxIdx: number, arr: any[]) {
- let res = [];
- if (idx > 0 && idx < maxIdx) {
- res = arr.slice(idx - 1, idx + 2);
- } else if (idx === 0) {
- res = arr.slice(0, 3);
- } else if (idx === maxIdx) {
- res = arr.slice(idx - 2);
- }
- return res;
- }
-}
+ selector: 'app-carousel',
+ templateUrl: './carousel.component.html',
+ styleUrls: ['./carousel.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ SecondaryButtonComponent,
+ RouterLink,
+ NgFor,
+ CutContentPipe,
+ ],
+})
+export class CarouselComponent implements OnInit, OnChanges {
+ @Input() data: any[];
+ @Input() id: string;
+ @Input() queryParams: any[];
+
+ slicedData: any[];
+ idx: number;
+ maxIdx: number;
+ currentLocale: string;
+ faAngleDoubleRight = faAngleDoubleRight;
+ faAngleDoubleLeft = faAngleDoubleLeft;
+
+ next = $localize`:@@next:Seuraava`;
+ previous = $localize`:@@previous:Edellinen`;
+
+ constructor(private appSettingsService: AppSettingsService) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {}
+
+ ngOnChanges() {
+ this.maxIdx = this.data.length - 1;
+ // Default to first item if no matching ID when filtering
+ this.idx = this.data.find((x) => x.id === this.id)
+ ? this.data.findIndex((x) => x.id === this.id)
+ : 0;
+ this.slicedData = this.sliceAround(this.idx, this.maxIdx, this.data);
+ }
+
+ sliceAround(idx: number, maxIdx: number, arr: any[]) {
+ let res = [];
+ if (idx > 0 && idx < maxIdx) {
+ res = arr.slice(idx - 1, idx + 2);
+ } else if (idx === 0) {
+ res = arr.slice(0, 3);
+ } else if (idx === maxIdx) {
+ res = arr.slice(idx - 2);
+ }
+ return res;
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.html b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.html
index bc2e5caf9..89ef0598a 100644
--- a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.html
+++ b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.html
@@ -1,36 +1,36 @@
-
-
-;
- const routerSpy = { navigate: jasmine.createSpy('navigate') };
-
- beforeEach(async(() => {
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { MatChipsModule } from '@angular/material/chips';
+import { Router } from '@angular/router';
+import { FigureFiltersComponent } from './figure-filters.component';
+
+describe('FigureFiltersComponent', () => {
+ let component: FigureFiltersComponent;
+ let fixture: ComponentFixture;
+ const routerSpy = { navigate: jasmine.createSpy('navigate') };
+
+ beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [FigureFiltersComponent],
- providers: [{ provide: Router, useValue: routerSpy }],
- imports: [MatChipsModule],
- }).compileComponents();
- }));
-
- beforeEach(() => {
- fixture = TestBed.createComponent(FigureFiltersComponent);
- component = fixture.componentInstance;
- fixture.detectChanges();
- });
-
- it('should create', () => {
- expect(component).toBeTruthy();
- });
-
- it('should navigate with params', () => {
- component.navigate('test');
- expect(routerSpy.navigate).toHaveBeenCalledWith([], {
- queryParams: {
- filter: 'test',
- },
- });
- });
-});
+ providers: [{ provide: Router, useValue: routerSpy }],
+ imports: [MatChipsModule, FigureFiltersComponent],
+}).compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(FigureFiltersComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('should navigate with params', () => {
+ component.navigate('test');
+ expect(routerSpy.navigate).toHaveBeenCalledWith([], {
+ queryParams: {
+ filter: 'test',
+ },
+ });
+ });
+});
diff --git a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.ts b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.ts
index 52f3c2cba..b7bb6e99f 100644
--- a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.ts
+++ b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.ts
@@ -1,62 +1,73 @@
-import {
- ChangeDetectorRef,
- Component,
- EventEmitter,
- Input,
- OnChanges,
- OnInit,
- Output,
- ViewEncapsulation,
-} from '@angular/core';
-import { Router } from '@angular/router';
+import {
+ ChangeDetectorRef,
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ OnInit,
+ Output,
+ ViewEncapsulation,
+} from '@angular/core';
+import { Router } from '@angular/router';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { FiguresInfoComponent } from '../figures-info/figures-info.component';
+import { MatChipListbox, MatChipOption } from '@angular/material/chips';
+import { NgFor, NgIf } from '@angular/common';
+
@Component({
- selector: 'app-figure-filters',
- templateUrl: './figure-filters.component.html',
- styleUrls: ['./figure-filters.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class FigureFiltersComponent implements OnInit, OnChanges {
- @Output() clicked = new EventEmitter();
- @Input() filter: any;
- @Input() narrow: boolean;
- filterHasBeenClicked: boolean;
-
- // Angular i18n xliff doesn't do well with html tags and therefore info content is translated in component by locale
- filters = [
- { label: $localize`:@@showAll:Näytä kaikki`, filter: 'all' },
- {
- label: $localize`:@@showOnlyTKIfilter:Näytä vain TKI-tiekartan seurantamittarit`,
- filter: 'roadmap',
- infoFi:
- 'Keväällä 2020 julkaistussa Valtioneuvoston TKI-tiekartassa määritellyt tki-toiminnan seurantaindikaattorit.',
- infoEn:
- 'RDI activities’ follow up indicators defined in the Government’s RDI roadmap , published in spring 2020.',
- infoSv:
- 'Uppföljningsmätare för FUI-verksamhet definierat i Statsrådets FUI-färdplan , publicerad våren 2020.',
- },
- ];
- currentLocale: string;
-
- constructor(
- private router: Router,
- private cdr: ChangeDetectorRef,
- private appSettingsService: AppSettingsService
- ) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {}
-
- ngOnChanges(): void {
- this.cdr.detectChanges();
- }
-
- // Navigate with params
- navigate(target) {
- this.filterHasBeenClicked = true;
- this.clicked.emit(true);
- this.router.navigate([], { queryParams: { filter: target } });
- }
-}
+ selector: 'app-figure-filters',
+ templateUrl: './figure-filters.component.html',
+ styleUrls: ['./figure-filters.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ NgFor,
+ MatChipListbox,
+ MatChipOption,
+ NgIf,
+ FiguresInfoComponent,
+ ],
+})
+export class FigureFiltersComponent implements OnInit, OnChanges {
+ @Output() clicked = new EventEmitter();
+ @Input() filter: any;
+ @Input() narrow: boolean;
+ filterHasBeenClicked: boolean;
+
+ // Angular i18n xliff doesn't do well with html tags and therefore info content is translated in component by locale
+ filters = [
+ { label: $localize`:@@showAll:Näytä kaikki`, filter: 'all' },
+ {
+ label: $localize`:@@showOnlyTKIfilter:Näytä vain TKI-tiekartan seurantamittarit`,
+ filter: 'roadmap',
+ infoFi:
+ 'Keväällä 2020 julkaistussa Valtioneuvoston TKI-tiekartassa määritellyt tki-toiminnan seurantaindikaattorit.',
+ infoEn:
+ 'RDI activities’ follow up indicators defined in the Government’s RDI roadmap , published in spring 2020.',
+ infoSv:
+ 'Uppföljningsmätare för FUI-verksamhet definierat i Statsrådets FUI-färdplan , publicerad våren 2020.',
+ },
+ ];
+ currentLocale: string;
+
+ constructor(
+ private router: Router,
+ private cdr: ChangeDetectorRef,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {}
+
+ ngOnChanges(): void {
+ this.cdr.detectChanges();
+ }
+
+ // Navigate with params
+ navigate(target) {
+ this.filterHasBeenClicked = true;
+ this.clicked.emit(true);
+ this.router.navigate([], { queryParams: { filter: target } });
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.scss-theme.scss b/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.scss-theme.scss
index 854253e94..238ad8b9d 100644
--- a/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.scss-theme.scss
@@ -1,50 +1,50 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-figures-info-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-figures-info {
- a {
- color: #3366cc !important;
- }
-
- .info {
- background: white;
- border: 1px solid;
- box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
- }
-
- .info.left:after,
- .info.left:before {
- border: solid transparent;
- }
-
- .info.left:after {
- border-left-color: #fff;
- }
- .info.left:before {
- border-color: rgba(0, 0, 0, 0);
- border-left-color: #000;
- }
-
- .info.right:after,
- .info.right:before {
- border: solid transparent;
- }
-
- .info.right:after {
- border-right-color: #fff;
- }
- .info.right:before {
- border-color: rgba(0, 0, 0, 0);
- border-right-color: #000;
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-figures-info-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-figures-info {
+ a {
+ color: #3366cc !important;
+ }
+
+ .info {
+ background: white;
+ border: 1px solid;
+ box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
+ }
+
+ .info.left:after,
+ .info.left:before {
+ border: solid transparent;
+ }
+
+ .info.left:after {
+ border-left-color: #fff;
+ }
+ .info.left:before {
+ border-color: rgba(0, 0, 0, 0);
+ border-left-color: #000;
+ }
+
+ .info.right:after,
+ .info.right:before {
+ border: solid transparent;
+ }
+
+ .info.right:after {
+ border-right-color: #fff;
+ }
+ .info.right:before {
+ border-color: rgba(0, 0, 0, 0);
+ border-right-color: #000;
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.ts b/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.ts
index 6d737d84d..167e4daa0 100644
--- a/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.ts
+++ b/src/app/portal/components/science-politics/figures/figures-info/figures-info.component.ts
@@ -1,56 +1,66 @@
-import {
- Component,
- Inject,
- Input,
- OnDestroy,
- OnInit,
- ViewEncapsulation,
-} from '@angular/core';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { WINDOW } from 'src/app/shared/services/window.service';
-
-@Component({
- selector: 'app-figures-info',
- templateUrl: './figures-info.component.html',
- styleUrls: ['./figures-info.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class FiguresInfoComponent implements OnInit, OnDestroy {
- @Input() labelText: string;
- @Input() content: any;
- @Input() position: string;
- showInfo = false;
- mobile = this.window.innerWidth < 992;
- height = this.window.innerHeight;
- width = this.window.innerWidth;
- resizeSub: any;
-
- constructor(
- @Inject(WINDOW) private window: Window,
- private resizeService: ResizeService
- ) {}
-
- ngOnInit(): void {
- this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
- this.onResize(dims)
- );
- }
-
- onClickedOutside(event) {
- this.showInfo = false;
- }
-
- onResize(dims) {
- this.height = dims.height;
- this.width = dims.width;
- if (!this.position && this.width >= 992) {
- this.mobile = false;
- } else {
- this.mobile = true;
- }
- }
-
- ngOnDestroy() {
- this.resizeSub?.unsubscribe();
- }
-}
+import {
+ Component,
+ Inject,
+ Input,
+ OnDestroy,
+ OnInit,
+ ViewEncapsulation,
+} from '@angular/core';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { WINDOW } from 'src/app/shared/services/window.service';
+import { NgIf, NgClass } from '@angular/common';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ClickOutsideDirective } from '../../../../../shared/directives/click-outside.directive';
+
+@Component({
+ selector: 'app-figures-info',
+ templateUrl: './figures-info.component.html',
+ styleUrls: ['./figures-info.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ ClickOutsideDirective,
+ FontAwesomeModule,
+ NgIf,
+ NgClass,
+ ],
+})
+export class FiguresInfoComponent implements OnInit, OnDestroy {
+ @Input() labelText: string;
+ @Input() content: any;
+ @Input() position: string;
+ showInfo = false;
+ mobile = this.window.innerWidth < 992;
+ height = this.window.innerHeight;
+ width = this.window.innerWidth;
+ resizeSub: any;
+
+ constructor(
+ @Inject(WINDOW) private window: Window,
+ private resizeService: ResizeService
+ ) {}
+
+ ngOnInit(): void {
+ this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
+ this.onResize(dims)
+ );
+ }
+
+ onClickedOutside(event) {
+ this.showInfo = false;
+ }
+
+ onResize(dims) {
+ this.height = dims.height;
+ this.width = dims.width;
+ if (!this.position && this.width >= 992) {
+ this.mobile = false;
+ } else {
+ this.mobile = true;
+ }
+ }
+
+ ngOnDestroy() {
+ this.resizeSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figures.component.scss b/src/app/portal/components/science-politics/figures/figures.component.scss
index f63ee7f85..11c0901d5 100644
--- a/src/app/portal/components/science-politics/figures/figures.component.scss
+++ b/src/app/portal/components/science-politics/figures/figures.component.scss
@@ -1,159 +1,159 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-.bg-bubble {
- position: absolute;
- border-radius: 50%;
- width: 500px;
- height: 500px;
- right: 1%;
- margin-top: -42px;
- z-index: -1;
-}
-
-// Sidenav
-.nav {
- font-weight: 500;
- display: initial;
-}
-
-.icon {
- font-size: 1.5rem;
- line-height: 1;
-}
-
-.nav nav {
- list-style: none;
- padding: 0;
- position: sticky;
- top: 0;
- z-index: 1;
-}
-
-.nav ul li {
- padding: 1rem 0;
-}
-
-.active {
- border-radius: 4px;
-}
-
-.search {
- position: relative;
- display: inline-block;
- width: 100%;
-}
-
-.search input {
- height: 2rem;
- border-radius: 5px;
-}
-
-.search input {
- text-indent: 0.8rem;
-}
-.search .search-icon {
- position: absolute;
- top: 0.25rem;
- left: auto;
- right: 1rem;
- z-index: 1;
-}
-
-// Content
-.segment {
- padding-bottom: 3rem;
-}
-
-h2 {
- font-size: 1.5rem;
-}
-
-.segment h2,
-.segment h3 {
- padding-bottom: 0.5rem;
-}
-
-ul.disc {
- list-style: disc;
- padding-inline-start: 1rem;
-}
-
-.segment .content {
- padding: 0.5rem 1rem;
-}
-
-.circle-small {
- border-radius: 50%;
- width: 50px;
- height: 50px;
- margin: 1rem auto;
-}
-
-.card.list {
- padding: 1rem 0.5rem;
-}
-
-.card.list:not(:last-child) {
- margin-bottom: 2rem;
-}
-
-.card span.title {
- font-weight: 500;
-}
-
-.card.list span.title {
- font-weight: bold;
-}
-
-.description {
- padding: 0.5rem 0;
-}
-
-img {
- max-width: 100%;
-}
-
-.disabled {
- pointer-events: none;
-}
-
-//Responsive
-.row.mobile-header {
- padding: 0 0 1rem;
-}
-
-.mobile-header h2 {
- font-size: 1.5rem;
-}
-
-.dropdown-icon {
- padding: 0 0.5rem;
-}
-
-@media (max-width: 991px) {
- .nav ul {
- width: 100%;
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+.bg-bubble {
+ position: absolute;
+ border-radius: 50%;
+ width: 500px;
+ height: 500px;
+ right: 1%;
+ margin-top: -42px;
+ z-index: -1;
+}
+
+// Sidenav
+.nav {
+ font-weight: 500;
+ display: initial;
+}
+
+.icon {
+ font-size: 1.5rem;
+ line-height: 1;
+}
+
+.nav nav {
+ list-style: none;
+ padding: 0;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+}
+
+.nav ul li {
+ padding: 1rem 0;
+}
+
+.active {
+ border-radius: 4px;
+}
+
+.search {
+ position: relative;
+ display: inline-block;
+ width: 100%;
+}
+
+.search input {
+ height: 2rem;
+ border-radius: 5px;
+}
+
+.search input {
+ text-indent: 0.8rem;
+}
+.search .search-icon {
+ position: absolute;
+ top: 0.25rem;
+ left: auto;
+ right: 1rem;
+ z-index: 1;
+}
+
+// Content
+.segment {
+ padding-bottom: 3rem;
+}
+
+h2 {
+ font-size: 1.5rem;
+}
+
+.segment h2,
+.segment h3 {
+ padding-bottom: 0.5rem;
+}
+
+ul.disc {
+ list-style: disc;
+ padding-inline-start: 1rem;
+}
+
+.segment .content {
+ padding: 0.5rem 1rem;
+}
+
+.circle-small {
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ margin: 1rem auto;
+}
+
+.card.list {
+ padding: 1rem 0.5rem;
+}
+
+.card.list:not(:last-child) {
+ margin-bottom: 2rem;
+}
+
+.card span.title {
+ font-weight: 500;
+}
+
+.card.list span.title {
+ font-weight: bold;
+}
+
+.description {
+ padding: 0.5rem 0;
+}
+
+img {
+ max-width: 100%;
+}
+
+.disabled {
+ pointer-events: none;
+}
+
+//Responsive
+.row.mobile-header {
+ padding: 0 0 1rem;
+}
+
+.mobile-header h2 {
+ font-size: 1.5rem;
+}
+
+.dropdown-icon {
+ padding: 0 0.5rem;
+}
+
+@media (max-width: 991px) {
+ .nav ul {
+ width: 100%;
+ }
+
+ .mat-mdc-button {
+ // padding: 0;
+ margin-left: -1rem;
+ padding-top: 0.5rem;
}
-
- .mat-button {
- // padding: 0;
- margin-left: -1rem;
- padding-top: 0.5rem;
- }
-
- ::ng-deep .dropdown .mat-button-wrapper {
- display: flex;
- }
-}
-
-@media (max-width: 614px) {
- .segment .figure {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
- }
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+ ::ng-deep .dropdown .mat-button-wrapper {
+ display: flex;
+ }
+}
+
+@media (max-width: 614px) {
+ .segment .figure {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figures.component.scss-theme.scss b/src/app/portal/components/science-politics/figures/figures.component.scss-theme.scss
index 2b6c85be3..3429e2aef 100644
--- a/src/app/portal/components/science-politics/figures/figures.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/figures/figures.component.scss-theme.scss
@@ -1,49 +1,49 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-figures-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-figures {
- .bg-bubble,
- .circle-small {
- background: mat-color($primary, 200);
- }
-
- .nav a,
- .content:not(.intro) a {
- color: mat-contrast($primary, 300);
- }
-
- .active {
- background: #dc1ddf0f;
- }
-
- .active .icon,
- .active a {
- color: mat-color($primary);
- }
-
- .search input {
- border: 1px solid mat-contrast($primary, 400);
- }
-
- .search-icon {
- color: mat-contrast($primary, 400);
- }
-
- .card {
- color: mat-contrast($primary, 300);
- border: 0;
- -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-figures-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-figures {
+ .bg-bubble,
+ .circle-small {
+ background: mat-color($primary, 200);
+ }
+
+ .nav a,
+ .content:not(.intro) a {
+ color: mat-contrast($primary, 300);
+ }
+
+ .active {
+ background: #dc1ddf0f;
+ }
+
+ .active .icon,
+ .active a {
+ color: mat-color($primary);
+ }
+
+ .search input {
+ border: 1px solid mat-contrast($primary, 400);
+ }
+
+ .search-icon {
+ color: mat-contrast($primary, 400);
+ }
+
+ .card {
+ color: mat-contrast($primary, 300);
+ border: 0;
+ -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figures.component.ts b/src/app/portal/components/science-politics/figures/figures.component.ts
index 8c36245b6..976633448 100644
--- a/src/app/portal/components/science-politics/figures/figures.component.ts
+++ b/src/app/portal/components/science-politics/figures/figures.component.ts
@@ -1,316 +1,342 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- Inject,
- ViewChild,
- ElementRef,
- AfterViewInit,
- ChangeDetectorRef,
- OnDestroy,
- LOCALE_ID,
- ViewChildren,
- QueryList,
- PLATFORM_ID,
-} from '@angular/core';
-import {
- faInfoCircle,
- faSearch,
- faChevronDown,
- faChevronUp,
-} from '@fortawesome/free-solid-svg-icons';
-import { faChartBar } from '@fortawesome/free-regular-svg-icons';
-import { isPlatformBrowser, ViewportScroller } from '@angular/common';
-import { UntypedFormControl } from '@angular/forms';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { Subscription } from 'rxjs';
-import { ScrollService } from 'src/app/portal/services/scroll.service';
-import { DataService } from 'src/app/portal/services/data.service';
-import { WINDOW } from 'src/app/shared/services/window.service';
-import { ActivatedRoute, Router } from '@angular/router';
-import { HistoryService } from 'src/app/portal/services/history.service';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { cloneDeep } from 'lodash-es';
-import { CMSContentService } from '@shared/services/cms-content.service';
-import { Figure } from 'src/app/portal/models/figure/figure.model';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-
-@Component({
- selector: 'app-figures',
- templateUrl: './figures.component.html',
- styleUrls: ['./figures.component.scss'],
-})
-export class FiguresComponent implements OnInit, AfterViewInit, OnDestroy {
- faIconCircle = faInfoCircle;
- faSearch = faSearch;
- faChartBar = faChartBar;
- faChevronDown = faChevronDown;
- faChevronUp = faChevronUp;
-
- currentSection: any;
- queryField: UntypedFormControl = new UntypedFormControl();
- figureData: Figure[] = [];
- filteredData: any[];
- queryResults: any[];
- combinedData: any;
- hasResults: boolean;
- queryTerm: any;
- @ViewChild('mainContent') mainContent: ElementRef;
- @ViewChild('mainFocus') mainFocus: ElementRef;
- @ViewChild('searchInput') searchInput: ElementRef;
- @ViewChildren('segments') segments: QueryList;
- @ViewChildren('sections') sections: QueryList;
- querySub: Subscription;
- resizeSub: Subscription;
- scrollSub: Subscription;
- mobile: boolean;
- showIntro: boolean;
- focusSub: any;
- currentLocale: string;
- private metaTags = MetaTags.figures;
- private commonTags = MetaTags.common;
- roadmapFilter: string;
- filtered: any[];
- filteredQuery: any[];
- routeSub: Subscription;
- queryParamSub: Subscription;
- filterHasBeenClicked: boolean;
- queryParams: any;
- currentFilter = null;
- loading = true;
- content: any[];
- contentSub: Subscription;
- figuresSub: Subscription;
-
- constructor(
- private cdr: ChangeDetectorRef,
- @Inject(WINDOW) private window: Window,
- @Inject(LOCALE_ID) protected localeId: string,
- private tabChangeService: TabChangeService,
- private resizeService: ResizeService,
- private scrollService: ScrollService,
- private dataService: DataService,
- private historyService: HistoryService,
- private utilityService: UtilityService,
- private route: ActivatedRoute,
- private router: Router,
- private cmsContentService: CMSContentService,
- @Inject(PLATFORM_ID) private platformId: object,
- private appSettingsService: AppSettingsService,
- private scroller: ViewportScroller,
- ) {
- // Default to first segment
- this.currentSection = 's0';
- this.queryResults = [];
- this.queryTerm = '';
- this.hasResults = true;
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit(): void {
- if (isPlatformBrowser(this.platformId)) {
- // Get first segment content from content data service
- this.contentSub = this.cmsContentService.pageData.subscribe((data) => {
- this.content = data.find((el) => el.id === 'figures-intro');
- this.loading = false;
- });
-
- // Get data from API and set into sessionStorage to be reusable in single figure view.
- if (!sessionStorage.getItem('figureData')) {
- this.figuresSub = this.cmsContentService
- .getFigures()
- .subscribe((data) => {
- this.figureData = data;
- sessionStorage.setItem('figureData', JSON.stringify(data));
- });
- } else {
- this.figureData = JSON.parse(sessionStorage.getItem('figureData'));
- }
- }
-
- this.routeSub = this.route.fragment.subscribe((fragment: string) => {
- this.scrollToId(fragment);
- });
-
- this.queryParamSub = this.route.queryParams.subscribe((params) => {
- this.currentFilter = params.filter || null;
- this.filter(this.currentFilter);
- this.queryParams = params;
- });
-
- switch (this.localeId) {
- case 'fi': {
- this.setTitle('Lukuja tieteestä ja tutkimuksesta - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle('Figures on science and research - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle('Siffror om vetenskap och forskning - Forskning.fi');
- break;
- }
- }
-
- this.utilityService.addMeta(
- this.metaTags['title' + this.currentLocale],
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
-
- this.resizeSub = this.resizeService.onResize$.subscribe((_) =>
- this.onResize()
- );
- this.scrollSub = this.scrollService.onScroll
- .pipe(debounceTime(300))
- .subscribe((e) => this.onScroll(e.y));
-
- this.search();
- }
-
- search() {
- // Subscribe to input changes
- this.querySub = this.queryField.valueChanges
- .pipe(distinctUntilChanged())
- .subscribe((term) => {
- // Get data from assets
- const combined = [];
- // Combine all items
- this.figureData.forEach((segment) => combined.push(segment.figures));
- this.combinedData = combined.flat();
- this.queryTerm = term;
- this.queryResults =
- term.length > 0
- ? this.combinedData.filter(
- (item) =>
- item['title' + this.currentLocale]
- .toLowerCase()
- .includes(term.toLowerCase()) ||
- item['description' + this.currentLocale]
- .toLowerCase()
- .includes(term.toLowerCase())
- )
- : [];
- // Set results flag, used to show right template
- this.hasResults =
- this.queryResults.length === 0 && term.length > 0 ? false : true;
- // Highlight side nav item
- this.currentSection = this.queryResults.length > 0 ? '' : 's0';
- });
- }
-
- // Filtering with cloned content. Filter both figureData and query results
- filter(filter: string) {
- const data = cloneDeep(this.figureData);
- filter = filter === 'all' ? null : filter;
-
- const filtered = data.map((s) => {
- s.figures = s.figures.filter((item) => (filter ? item[filter] : item));
- return s;
- });
-
- this.filteredData = filter ? filtered : this.figureData;
-
- // Set link disabled if no items
- for (const navItem of this.figureData) {
- Object.assign(
- this.figureData.find((item) => item.id === navItem.id),
- {
- disabled:
- this.filteredData.find((item) => item.id === navItem.id).figures
- .length > 0
- ? false
- : true,
- }
- );
- }
-
- // Set search results data
- this.queryResults = this.combinedData?.filter((item) =>
- filter ? item.roadmap : item
- );
- }
-
- scrollTo(event: any) {
- this.segments.first?.nativeElement.scrollIntoView();
- }
-
- ngAfterViewInit() {
- // Count content width and set mobile true / false
- this.mobile = this.window.innerWidth > 991 ? false : true;
- // Show side menu on desktop
- this.showIntro = this.mobile ? false : true;
- this.cdr.detectChanges();
-
- // Focus with skip-links
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'search-input') {
- this.searchInput.nativeElement.focus();
- }
- if (target === 'main-link') {
- this.mainFocus.nativeElement.focus();
- }
- }
- );
- }
-
- ngOnDestroy() {
- this.contentSub?.unsubscribe();
- this.figuresSub?.unsubscribe();
- this.querySub?.unsubscribe();
- this.resizeSub?.unsubscribe();
- this.scrollSub?.unsubscribe();
- this.tabChangeService.targetFocus('');
- this.queryParamSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- this.routeSub?.unsubscribe();
- }
-
- onSectionChange(sectionId: string) {
- this.currentSection = sectionId ? sectionId : 's0';
- }
-
- onResize() {
- this.mobile = this.window.innerWidth > 991 ? false : true;
- this.showIntro = this.mobile ? false : true;
- }
-
- onScroll(y: number) {
- this.dataService.updateResearchScroll(y);
- }
-
- // Navigate to section from sidebar.
- // Reset fragment before navigation.
- // This enables side navigation linking to previously navigated item
- navigateToSection(sectionId: string) {
- this.router
- .navigate([], { fragment: null, queryParams: this.queryParams })
- .then(() =>
- this.router.navigate([], {
- fragment: sectionId,
- queryParams: this.queryParams,
- })
- );
- }
-
- scrollToId(id: string) {
- setTimeout(() => {
- this.scroller.scrollToAnchor(id);
- }, 10);
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ Inject,
+ ViewChild,
+ ElementRef,
+ AfterViewInit,
+ ChangeDetectorRef,
+ OnDestroy,
+ LOCALE_ID,
+ ViewChildren,
+ QueryList,
+ PLATFORM_ID,
+} from '@angular/core';
+import {
+ faInfoCircle,
+ faSearch,
+ faChevronDown,
+ faChevronUp,
+} from '@fortawesome/free-solid-svg-icons';
+import { faChartBar } from '@fortawesome/free-regular-svg-icons';
+import { isPlatformBrowser, ViewportScroller, NgIf, NgClass, NgFor, NgTemplateOutlet } from '@angular/common';
+import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { Subscription } from 'rxjs';
+import { ScrollService } from 'src/app/portal/services/scroll.service';
+import { DataService } from 'src/app/portal/services/data.service';
+import { WINDOW } from 'src/app/shared/services/window.service';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { HistoryService } from 'src/app/portal/services/history.service';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { cloneDeep } from 'lodash-es';
+import { CMSContentService } from '@shared/services/cms-content.service';
+import { Figure } from 'src/app/portal/models/figure/figure.model';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { CutContentPipe } from '../../../../shared/pipes/cut-content.pipe';
+import { MatChip } from '@angular/material/chips';
+import { MatButton } from '@angular/material/button';
+import { ScrollSpyDirective } from '../../../directives/scroll-spy.directive';
+import { FigureFiltersComponent } from './figure-filters/figure-filters.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-figures',
+ templateUrl: './figures.component.html',
+ styleUrls: ['./figures.component.scss'],
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ NgIf,
+ NgClass,
+ FontAwesomeModule,
+ MatProgressSpinner,
+ NgFor,
+ FormsModule,
+ ReactiveFormsModule,
+ FigureFiltersComponent,
+ ScrollSpyDirective,
+ MatButton,
+ NgTemplateOutlet,
+ RouterLink,
+ MatChip,
+ CutContentPipe,
+ ],
+})
+export class FiguresComponent implements OnInit, AfterViewInit, OnDestroy {
+ faIconCircle = faInfoCircle;
+ faSearch = faSearch;
+ faChartBar = faChartBar;
+ faChevronDown = faChevronDown;
+ faChevronUp = faChevronUp;
+
+ currentSection: any;
+ queryField: UntypedFormControl = new UntypedFormControl();
+ figureData: Figure[] = [];
+ filteredData: any[];
+ queryResults: any[];
+ combinedData: any;
+ hasResults: boolean;
+ queryTerm: any;
+ @ViewChild('mainContent') mainContent: ElementRef;
+ @ViewChild('mainFocus') mainFocus: ElementRef;
+ @ViewChild('searchInput') searchInput: ElementRef;
+ @ViewChildren('segments') segments: QueryList;
+ @ViewChildren('sections') sections: QueryList;
+ querySub: Subscription;
+ resizeSub: Subscription;
+ scrollSub: Subscription;
+ mobile: boolean;
+ showIntro: boolean;
+ focusSub: any;
+ currentLocale: string;
+ private metaTags = MetaTags.figures;
+ private commonTags = MetaTags.common;
+ roadmapFilter: string;
+ filtered: any[];
+ filteredQuery: any[];
+ routeSub: Subscription;
+ queryParamSub: Subscription;
+ filterHasBeenClicked: boolean;
+ queryParams: any;
+ currentFilter = null;
+ loading = true;
+ content: any[];
+ contentSub: Subscription;
+ figuresSub: Subscription;
+
+ constructor(
+ private cdr: ChangeDetectorRef,
+ @Inject(WINDOW) private window: Window,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private tabChangeService: TabChangeService,
+ private resizeService: ResizeService,
+ private scrollService: ScrollService,
+ private dataService: DataService,
+ private historyService: HistoryService,
+ private utilityService: UtilityService,
+ private route: ActivatedRoute,
+ private router: Router,
+ private cmsContentService: CMSContentService,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private appSettingsService: AppSettingsService,
+ private scroller: ViewportScroller,
+ ) {
+ // Default to first segment
+ this.currentSection = 's0';
+ this.queryResults = [];
+ this.queryTerm = '';
+ this.hasResults = true;
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit(): void {
+ if (isPlatformBrowser(this.platformId)) {
+ // Get first segment content from content data service
+ this.contentSub = this.cmsContentService.pageData.subscribe((data) => {
+ this.content = data.find((el) => el.id === 'figures-intro');
+ this.loading = false;
+ });
+
+ // Get data from API and set into sessionStorage to be reusable in single figure view.
+ if (!sessionStorage.getItem('figureData')) {
+ this.figuresSub = this.cmsContentService
+ .getFigures()
+ .subscribe((data) => {
+ this.figureData = data;
+ sessionStorage.setItem('figureData', JSON.stringify(data));
+ });
+ } else {
+ this.figureData = JSON.parse(sessionStorage.getItem('figureData'));
+ }
+ }
+
+ this.routeSub = this.route.fragment.subscribe((fragment: string) => {
+ this.scrollToId(fragment);
+ });
+
+ this.queryParamSub = this.route.queryParams.subscribe((params) => {
+ this.currentFilter = params.filter || null;
+ this.filter(this.currentFilter);
+ this.queryParams = params;
+ });
+
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle('Lukuja tieteestä ja tutkimuksesta - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle('Figures on science and research - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle('Siffror om vetenskap och forskning - Forskning.fi');
+ break;
+ }
+ }
+
+ this.utilityService.addMeta(
+ this.metaTags['title' + this.currentLocale],
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+
+ this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
+ this.onResize(dims)
+ );
+ this.scrollSub = this.scrollService.onScroll
+ .pipe(debounceTime(300))
+ .subscribe((e) => this.onScroll(e.y));
+
+ this.search();
+ }
+
+ search() {
+ // Subscribe to input changes
+ this.querySub = this.queryField.valueChanges
+ .pipe(distinctUntilChanged())
+ .subscribe((term) => {
+ // Get data from assets
+ const combined = [];
+ // Combine all items
+ this.figureData.forEach((segment) => combined.push(segment.figures));
+ this.combinedData = combined.flat();
+ this.queryTerm = term;
+ this.queryResults =
+ term.length > 0
+ ? this.combinedData.filter(
+ (item) =>
+ item['title' + this.currentLocale]
+ .toLowerCase()
+ .includes(term.toLowerCase()) ||
+ item['description' + this.currentLocale]
+ .toLowerCase()
+ .includes(term.toLowerCase())
+ )
+ : [];
+ // Set results flag, used to show right template
+ this.hasResults =
+ this.queryResults.length === 0 && term.length > 0 ? false : true;
+ // Highlight side nav item
+ this.currentSection = this.queryResults.length > 0 ? '' : 's0';
+ });
+ }
+
+ // Filtering with cloned content. Filter both figureData and query results
+ filter(filter: string) {
+ const data = cloneDeep(this.figureData);
+ filter = filter === 'all' ? null : filter;
+
+ const filtered = data.map((s) => {
+ s.figures = s.figures.filter((item) => (filter ? item[filter] : item));
+ return s;
+ });
+
+ this.filteredData = filter ? filtered : this.figureData;
+
+ // Set link disabled if no items
+ for (const navItem of this.figureData) {
+ Object.assign(
+ this.figureData.find((item) => item.id === navItem.id),
+ {
+ disabled:
+ this.filteredData.find((item) => item.id === navItem.id).figures
+ .length > 0
+ ? false
+ : true,
+ }
+ );
+ }
+
+ // Set search results data
+ this.queryResults = this.combinedData?.filter((item) =>
+ filter ? item.roadmap : item
+ );
+ }
+
+ scrollTo(event: any) {
+ this.segments.first?.nativeElement.scrollIntoView();
+ }
+
+ ngAfterViewInit() {
+ // Count content width and set mobile true / false
+ this.mobile = this.window.innerWidth > 991 ? false : true;
+ // Show side menu on desktop
+ this.showIntro = this.mobile ? false : true;
+ this.cdr.detectChanges();
+
+ // Focus with skip-links
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'search-input') {
+ this.searchInput.nativeElement.focus();
+ }
+ if (target === 'main-link') {
+ this.mainFocus.nativeElement.focus();
+ }
+ }
+ );
+ }
+
+ ngOnDestroy() {
+ this.contentSub?.unsubscribe();
+ this.figuresSub?.unsubscribe();
+ this.querySub?.unsubscribe();
+ this.resizeSub?.unsubscribe();
+ this.scrollSub?.unsubscribe();
+ this.tabChangeService.targetFocus('');
+ this.queryParamSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ this.routeSub?.unsubscribe();
+ }
+
+ onSectionChange(sectionId: string) {
+ this.currentSection = sectionId ? sectionId : 's0';
+ }
+
+ onResize(dims: any) {
+ this.mobile = dims.width > 991 ? false : true;
+ this.showIntro = this.mobile ? false : true;
+ }
+
+ onScroll(y: number) {
+ this.dataService.updateResearchScroll(y);
+ }
+
+ // Navigate to section from sidebar.
+ // Reset fragment before navigation.
+ // This enables side navigation linking to previously navigated item
+ navigateToSection(sectionId: string) {
+ this.router
+ .navigate([], { fragment: null, queryParams: this.queryParams })
+ .then(() =>
+ this.router.navigate([], {
+ fragment: sectionId,
+ queryParams: this.queryParams,
+ })
+ );
+ }
+
+ scrollToId(id: string) {
+ setTimeout(() => {
+ this.scroller.scrollToAnchor(id);
+ }, 10);
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.scss-theme.scss b/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.scss-theme.scss
index 98165e563..6d3c05b50 100644
--- a/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.scss-theme.scss
@@ -1,53 +1,53 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-single-figure-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-single-figure {
- .help,
- .info {
- background: white;
- border: 1px solid;
- box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
- }
-
- .info.left:after,
- .info.left:before {
- border: solid transparent;
- }
-
- .info.left:after {
- border-left-color: #fff;
- }
- .info.left:before {
- border-color: rgba(0, 0, 0, 0);
- border-left-color: #000;
- }
-
- .info.right:after,
- .info.right:before {
- border: solid transparent;
- }
-
- .info.right:after {
- border-right-color: #fff;
- }
- .info.right:before {
- border-color: rgba(0, 0, 0, 0);
- border-right-color: #000;
- }
-
- @media (max-width: 991px) {
- .content {
- border: 0;
- }
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-single-figure-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-single-figure {
+ .help,
+ .info {
+ background: white;
+ border: 1px solid;
+ box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.2);
+ }
+
+ .info.left:after,
+ .info.left:before {
+ border: solid transparent;
+ }
+
+ .info.left:after {
+ border-left-color: #fff;
+ }
+ .info.left:before {
+ border-color: rgba(0, 0, 0, 0);
+ border-left-color: #000;
+ }
+
+ .info.right:after,
+ .info.right:before {
+ border: solid transparent;
+ }
+
+ .info.right:after {
+ border-right-color: #fff;
+ }
+ .info.right:before {
+ border-color: rgba(0, 0, 0, 0);
+ border-right-color: #000;
+ }
+
+ @media (max-width: 991px) {
+ .content {
+ border: 0;
+ }
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.ts b/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.ts
index 792dcca6c..d41ab60ba 100644
--- a/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.ts
+++ b/src/app/portal/components/science-politics/figures/single-figure/single-figure.component.ts
@@ -1,238 +1,267 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- ElementRef,
- AfterViewInit,
- ChangeDetectorRef,
- Inject,
- LOCALE_ID,
- OnDestroy,
- ViewChildren,
- QueryList,
- HostListener,
- ViewEncapsulation,
- ViewChild,
- PLATFORM_ID,
-} from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { Subscription, combineLatest } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { ActivatedRoute } from '@angular/router';
-import { WINDOW } from 'src/app/shared/services/window.service';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { cloneDeep } from 'lodash-es';
-import { CMSContentService } from '@shared/services/cms-content.service';
-import { Figure } from 'src/app/portal/models/figure/figure.model';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-
-@Component({
- selector: 'app-single-figure',
- templateUrl: './single-figure.component.html',
- styleUrls: ['./single-figure.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class SingleFigureComponent implements OnInit, OnDestroy, AfterViewInit {
- @ViewChildren('content') content: QueryList;
- @ViewChild('keyboardHelp') keyboardHelp: ElementRef;
-
- figureData: Figure[] = [];
- flatData: any[] = [];
- colWidth: number;
- faQuestion = faQuestionCircle;
- resizeSub: Subscription;
- dataSub: any;
- allContent: any;
- combinedData: any;
- routeSub: Subscription;
- currentParent: any;
- currentItem: any;
- result: any;
- contentSub: Subscription;
- figuresSub: Subscription;
- focusSub: Subscription;
- title: any;
- mobile = this.window.innerWidth < 992;
- height = this.window.innerHeight;
- width = this.window.innerWidth;
- showInfo = false;
- showHelp = false;
- currentLocale: string;
- private metaTags = MetaTags.singleFigure;
- private commonTags = MetaTags.common;
- queryParamSub: Subscription;
- queryParams: any;
- filter: any;
- loading = true;
-
- constructor(
- private cdr: ChangeDetectorRef,
- @Inject(LOCALE_ID) protected localeId: string,
- private resizeService: ResizeService,
- private route: ActivatedRoute,
- private cmsContentService: CMSContentService,
- @Inject(WINDOW) private window: Window,
- private tabChangeService: TabChangeService,
- private utilityService: UtilityService,
- @Inject(PLATFORM_ID) private platformId: object,
- private appSettingsService: AppSettingsService
- ) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit(): void {
- this.routeSub = combineLatest([this.route.params, this.route.queryParams])
- .pipe(map((res) => ({ params: res[0], queryParams: res[1] })))
- .subscribe((res) => {
- this.currentParent = res.params.id.slice(0, 2);
- this.currentItem = res.params.id;
-
- // Call API only if no data in session storage
- if (isPlatformBrowser(this.platformId)) {
- if (!sessionStorage.getItem('figureData')) {
- this.figuresSub = this.cmsContentService
- .getFigures()
- .subscribe((data) => {
- this.figureData = data;
- sessionStorage.setItem('figureData', JSON.stringify(data));
- this.setContent(res);
- });
- } else {
- this.figureData = JSON.parse(sessionStorage.getItem('figureData'));
- this.setContent(res);
- }
- }
- });
-
- this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
- this.onResize(dims)
- );
- }
-
- setContent(res) {
- this.loading = false;
- this.queryParams = res.queryParams;
- this.filter =
- res.queryParams.filter === 'all' ? null : res.queryParams.filter;
-
- const parent = this.figureData.find(
- (item) => item.id === this.currentParent
- );
- this.result = [parent.figures.find((item) => item.id === this.currentItem)];
-
- // Get all visualisations into a flat array
- const dataCopy = cloneDeep(this.figureData);
- this.flatData = [];
- dataCopy.forEach((segment) => {
- // Hack to get segment header into item (Assign new key / value pair)
- segment.figures.forEach((item) => {
- // item.segment = segment['header' + this.currentLocale];
- Object.assign(item, { segment: segment['title' + this.currentLocale] });
- });
- this.flatData.push(segment.figures);
- });
- this.flatData = this.flatData.flat();
-
- // Filter data if filtering is enabled
- this.flatData = this.filter
- ? this.flatData.filter((item) => item[this.filter])
- : this.flatData;
-
- // Set title
- this.title = this.result[0]['title' + this.currentLocale];
- switch (this.localeId) {
- case 'fi': {
- this.setTitle(this.title + ' - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle(this.title + ' - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle(this.title + ' - Forskning.fi');
- break;
- }
- }
-
- const titleString = this.utilityService.getTitle();
- this.utilityService.addMeta(
- titleString,
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
- }
-
- ngAfterViewInit() {
- // Sometimes content can't be rendered fast enough so we use changes subsciption as fallback
- if (this.content && this.content.first) {
- this.colWidth = this.content.first.nativeElement.offsetWidth - 15;
- this.cdr.detectChanges();
- } else {
- // It takes some time to load data so we need to subscribe to content ref changes to get first width
- this.contentSub = this.content.changes.subscribe((item) => {
- this.colWidth = item.first.nativeElement.offsetWidth - 15;
- this.cdr.detectChanges();
- });
- }
- // Focus to skip-to results link when clicked from header skip-links
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.keyboardHelp.nativeElement.focus();
- }
- }
- );
- }
-
- onResize(dims) {
- this.height = dims.height;
- this.width = dims.width;
- if (this.width >= 992) {
- this.mobile = false;
- } else {
- this.mobile = true;
- }
- this.colWidth = this.content.first.nativeElement.offsetWidth - 15;
- }
-
- trackByFn(index, item) {
- return index;
- }
-
- @HostListener('document:keydown.escape', ['$event']) onKeydownHandler() {
- this.showInfo = false;
- this.showHelp = false;
- }
-
- onClickedOutside(event) {
- this.showInfo = false;
- }
-
- onClickedOutsideHelp(event) {
- this.showHelp = false;
- }
-
- ngOnDestroy() {
- this.resizeSub?.unsubscribe();
- this.figuresSub?.unsubscribe();
- this.routeSub?.unsubscribe();
- this.contentSub?.unsubscribe();
- this.queryParamSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ ElementRef,
+ AfterViewInit,
+ ChangeDetectorRef,
+ Inject,
+ LOCALE_ID,
+ OnDestroy,
+ ViewChildren,
+ QueryList,
+ HostListener,
+ ViewEncapsulation,
+ ViewChild,
+ PLATFORM_ID,
+} from '@angular/core';
+import { isPlatformBrowser, NgIf, NgFor } from '@angular/common';
+import { faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { Subscription, combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { WINDOW } from 'src/app/shared/services/window.service';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { cloneDeep } from 'lodash-es';
+import { CMSContentService } from '@shared/services/cms-content.service';
+import { Figure } from 'src/app/portal/models/figure/figure.model';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { SafeUrlPipe } from '../../../../pipes/safe-url.pipe';
+import { CarouselComponent } from '../carousel/carousel.component';
+import { FigureFiltersComponent } from '../figure-filters/figure-filters.component';
+import { SecondaryButtonComponent } from '../../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { ShareComponent } from '../../../single/share/share.component';
+import { FiguresInfoComponent } from '../figures-info/figures-info.component';
+import { MatChip } from '@angular/material/chips';
+import { ClickOutsideDirective } from '../../../../../shared/directives/click-outside.directive';
+import { BreadcrumbComponent } from '../../../breadcrumb/breadcrumb.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { BannerDividerComponent } from '../../../../../shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-single-figure',
+ templateUrl: './single-figure.component.html',
+ styleUrls: ['./single-figure.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ NgIf,
+ MatProgressSpinner,
+ RouterLink,
+ BreadcrumbComponent,
+ NgFor,
+ ClickOutsideDirective,
+ MatChip,
+ FiguresInfoComponent,
+ ShareComponent,
+ SecondaryButtonComponent,
+ FigureFiltersComponent,
+ CarouselComponent,
+ SafeUrlPipe,
+ ],
+})
+export class SingleFigureComponent implements OnInit, OnDestroy, AfterViewInit {
+ @ViewChildren('content') content: QueryList;
+ @ViewChild('keyboardHelp') keyboardHelp: ElementRef;
+
+ figureData: Figure[] = [];
+ flatData: any[] = [];
+ colWidth: number;
+ faQuestion = faQuestionCircle;
+ resizeSub: Subscription;
+ dataSub: any;
+ allContent: any;
+ combinedData: any;
+ routeSub: Subscription;
+ screenWidthSubscription: Subscription;
+ currentParent: any;
+ currentItem: any;
+ result: any;
+ contentSub: Subscription;
+ figuresSub: Subscription;
+ focusSub: Subscription;
+ title: any;
+ mobile = this.window.innerWidth < 992;
+ height = this.window.innerHeight;
+ width = this.window.innerWidth;
+ showInfo = false;
+ showHelp = false;
+ currentLocale: string;
+ private metaTags = MetaTags.singleFigure;
+ private commonTags = MetaTags.common;
+ queryParamSub: Subscription;
+ queryParams: any;
+ filter: any;
+ loading = true;
+
+ constructor(
+ private cdr: ChangeDetectorRef,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private resizeService: ResizeService,
+ private route: ActivatedRoute,
+ private cmsContentService: CMSContentService,
+ @Inject(WINDOW) private window: Window,
+ private tabChangeService: TabChangeService,
+ private utilityService: UtilityService,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit(): void {
+ this.routeSub = combineLatest([this.route.params, this.route.queryParams])
+ .pipe(map((res) => ({ params: res[0], queryParams: res[1] })))
+ .subscribe((res) => {
+ this.currentParent = res.params.id.slice(0, 2);
+ this.currentItem = res.params.id;
+
+ // Call API only if no data in session storage
+ if (isPlatformBrowser(this.platformId)) {
+ if (!sessionStorage.getItem('figureData')) {
+ this.figuresSub = this.cmsContentService
+ .getFigures()
+ .subscribe((data) => {
+ this.figureData = data;
+ sessionStorage.setItem('figureData', JSON.stringify(data));
+ this.setContent(res);
+ });
+ } else {
+ this.figureData = JSON.parse(sessionStorage.getItem('figureData'));
+ this.setContent(res);
+ }
+ }
+ });
+
+ this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
+ this.onResize(dims)
+ );
+ }
+
+ setContent(res) {
+ this.loading = false;
+ this.queryParams = res.queryParams;
+ this.filter =
+ res.queryParams.filter === 'all' ? null : res.queryParams.filter;
+
+ const parent = this.figureData.find(
+ (item) => item.id === this.currentParent
+ );
+ this.result = [parent.figures.find((item) => item.id === this.currentItem)];
+
+ // Get all visualisations into a flat array
+ const dataCopy = cloneDeep(this.figureData);
+ this.flatData = [];
+ dataCopy.forEach((segment) => {
+ // Hack to get segment header into item (Assign new key / value pair)
+ segment.figures.forEach((item) => {
+ // item.segment = segment['header' + this.currentLocale];
+ Object.assign(item, { segment: segment['title' + this.currentLocale] });
+ });
+ this.flatData.push(segment.figures);
+ });
+ this.flatData = this.flatData.flat();
+
+ // Filter data if filtering is enabled
+ this.flatData = this.filter
+ ? this.flatData.filter((item) => item[this.filter])
+ : this.flatData;
+
+ // Set title
+ this.title = this.result[0]['title' + this.currentLocale];
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle(this.title + ' - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle(this.title + ' - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle(this.title + ' - Forskning.fi');
+ break;
+ }
+ }
+
+ const titleString = this.utilityService.getTitle();
+ this.utilityService.addMeta(
+ titleString,
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+ }
+
+ ngAfterViewInit() {
+ // Sometimes content can't be rendered fast enough so we use changes subsciption as fallback
+ if (this.content && this.content.first) {
+ this.colWidth = this.content.first.nativeElement.offsetWidth - 15;
+ this.cdr.detectChanges();
+ } else {
+ // It takes some time to load data so we need to subscribe to content ref changes to get first width
+ this.contentSub = this.content.changes.subscribe((item) => {
+ this.colWidth = item.first.nativeElement.offsetWidth - 15;
+ this.cdr.detectChanges();
+ });
+ }
+ // Focus to skip-to results link when clicked from header skip-links
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.keyboardHelp.nativeElement.focus();
+ }
+ }
+ );
+ }
+
+ onResize(dims) {
+ this.height = dims.height;
+ this.width = dims.width;
+ if (this.width >= 992) {
+ this.mobile = false;
+ } else {
+ this.mobile = true;
+ }
+ this.colWidth = this.content.first.nativeElement.offsetWidth - 15;
+ }
+
+ trackByFn(index, item) {
+ return index;
+ }
+
+ @HostListener('document:keydown.escape', ['$event']) onKeydownHandler() {
+ this.showInfo = false;
+ this.showHelp = false;
+ }
+
+ onClickedOutside(event) {
+ this.showInfo = false;
+ }
+
+ onClickedOutsideHelp(event) {
+ this.showHelp = false;
+ }
+
+ ngOnDestroy() {
+ this.resizeSub?.unsubscribe();
+ this.figuresSub?.unsubscribe();
+ this.routeSub?.unsubscribe();
+ this.contentSub?.unsubscribe();
+ this.queryParamSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss
index ab46668e2..8954bd30c 100644
--- a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss
+++ b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss
@@ -1,192 +1,192 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-.main-content-wrap {
- .inner-html-wrap {
- h1 {
- display: none;
- overflow: hidden;
- text-overflow: ellipsis;
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+.main-content-wrap {
+ .inner-html-wrap {
+ h1 {
+ display: none;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .header-wrap {
+ margin-bottom: 75px;
+ }
+
+ .placeholder-header-wrap {
+ margin-bottom: 25px;
+ }
+
+ .indicator-thumbnail-wrapper {
+ display: flex;
+ justify-content: center;
+ img {
+ align-self: flex-start;
+ }
+ }
+
+ .thumbnail-bread-text {
+ h1, h2, h3 {
+ display: none;
+ }
+ }
+
+ .bg-bubble {
+ position: absolute;
+ border-radius: 50%;
+ width: 500px;
+ height: 500px;
+ right: 1%;
+ margin-top: -42px;
+ z-index: -1;
+ }
+
+ // Sidenav
+ .nav {
+ font-weight: 500;
+ display: initial;
+ }
+
+ .icon {
+ font-size: 1.5rem;
+ line-height: 1;
+ }
+
+ .nav nav {
+ list-style: none;
+ padding: 0;
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ }
+
+ .nav ul li {
+ padding: 1rem 0;
+ }
+
+ .active {
+ border-radius: 4px;
+ }
+
+ .search {
+ position: relative;
+ display: inline-block;
+ width: 100%;
+ }
+
+ .search input {
+ height: 2rem;
+ border-radius: 5px;
+ }
+
+ .search input {
+ text-indent: 0.8rem;
+ }
+
+ .search .search-icon {
+ position: absolute;
+ top: 0.25rem;
+ left: auto;
+ right: 1rem;
+ z-index: 1;
+ }
+
+ // Content
+ .segment {
+ padding-bottom: 3rem;
+ }
+
+ h2 {
+ font-size: 1.2rem;
+ margin-bottom: 1rem;
+ }
+
+ .segment h2,
+ .segment h3 {
+ padding-bottom: 0.5rem;
+ }
+
+ ul.disc {
+ list-style: disc;
+ padding-inline-start: 1rem;
+ }
+
+ .segment .content {
+ padding: 0.5rem 1rem;
+ }
+
+ .circle-small {
+ border-radius: 50%;
+ width: 50px;
+ height: 50px;
+ margin: 1rem auto;
+ }
+
+ .card.list {
+ padding: 1rem 0.5rem;
+ }
+
+ .card.list:not(:last-child) {
+ margin-bottom: 2rem;
+ }
+
+ .card span.title {
+ font-weight: 500;
+ }
+
+ .card.list span.title {
+ font-weight: bold;
+ }
+
+ .description {
+ padding: 0.5rem 0;
+ }
+
+ img {
+ max-width: 100%;
+ }
+
+ .disabled {
+ pointer-events: none;
+ }
+
+ //Responsive
+ .row.mobile-header {
+ padding: 0 0 1rem;
+ }
+
+ .mobile-header h2 {
+ font-size: 1.5rem;
+ }
+
+ .dropdown-icon {
+ padding: 0 0.5rem;
+ }
+
+ @media (max-width: 991px) {
+ .nav ul {
+ width: 100%;
+ }
+
+ .mat-mdc-button {
+ // padding: 0;
+ margin-left: -1rem;
+ padding-top: 0.5rem;
}
- }
-
- .header-wrap {
- margin-bottom: 75px;
- }
-
- .placeholder-header-wrap {
- margin-bottom: 25px;
- }
-
- .indicator-thumbnail-wrapper {
- display: flex;
- justify-content: center;
- img {
- align-self: flex-start;
- }
- }
-
- .thumbnail-bread-text {
- h1, h2, h3 {
- display: none;
- }
- }
-
- .bg-bubble {
- position: absolute;
- border-radius: 50%;
- width: 500px;
- height: 500px;
- right: 1%;
- margin-top: -42px;
- z-index: -1;
- }
-
- // Sidenav
- .nav {
- font-weight: 500;
- display: initial;
- }
-
- .icon {
- font-size: 1.5rem;
- line-height: 1;
- }
-
- .nav nav {
- list-style: none;
- padding: 0;
- position: sticky;
- top: 0;
- z-index: 1;
- }
-
- .nav ul li {
- padding: 1rem 0;
- }
-
- .active {
- border-radius: 4px;
- }
-
- .search {
- position: relative;
- display: inline-block;
- width: 100%;
- }
-
- .search input {
- height: 2rem;
- border-radius: 5px;
- }
-
- .search input {
- text-indent: 0.8rem;
- }
-
- .search .search-icon {
- position: absolute;
- top: 0.25rem;
- left: auto;
- right: 1rem;
- z-index: 1;
- }
-
- // Content
- .segment {
- padding-bottom: 3rem;
- }
-
- h2 {
- font-size: 1.2rem;
- margin-bottom: 1rem;
- }
-
- .segment h2,
- .segment h3 {
- padding-bottom: 0.5rem;
- }
-
- ul.disc {
- list-style: disc;
- padding-inline-start: 1rem;
- }
-
- .segment .content {
- padding: 0.5rem 1rem;
- }
-
- .circle-small {
- border-radius: 50%;
- width: 50px;
- height: 50px;
- margin: 1rem auto;
- }
-
- .card.list {
- padding: 1rem 0.5rem;
- }
-
- .card.list:not(:last-child) {
- margin-bottom: 2rem;
- }
-
- .card span.title {
- font-weight: 500;
- }
-
- .card.list span.title {
- font-weight: bold;
- }
-
- .description {
- padding: 0.5rem 0;
- }
-
- img {
- max-width: 100%;
- }
-
- .disabled {
- pointer-events: none;
- }
-
- //Responsive
- .row.mobile-header {
- padding: 0 0 1rem;
- }
-
- .mobile-header h2 {
- font-size: 1.5rem;
- }
-
- .dropdown-icon {
- padding: 0 0.5rem;
- }
-
- @media (max-width: 991px) {
- .nav ul {
- width: 100%;
- }
-
- .mat-button {
- // padding: 0;
- margin-left: -1rem;
- padding-top: 0.5rem;
- }
-
- ::ng-deep .dropdown .mat-button-wrapper {
- display: flex;
- }
- }
-
- @media (max-width: 614px) {
- .segment .figure {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
- }
- }
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+ ::ng-deep .dropdown .mat-button-wrapper {
+ display: flex;
+ }
+ }
+
+ @media (max-width: 614px) {
+ .segment .figure {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss-theme.scss b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss-theme.scss
index c26f4f526..43b90b83b 100644
--- a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.scss-theme.scss
@@ -1,49 +1,49 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-open-science-and-research-indicators-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-open-science-and-research-indicators {
- .bg-bubble,
- .circle-small {
- background: mat-color($primary, 200);
- }
-
- .nav a,
- .content:not(.intro) a {
- color: mat-contrast($primary, 300);
- }
-
- .active {
- background: #dc1ddf0f;
- }
-
- .active .icon,
- .active a {
- color: mat-color($primary);
- }
-
- .search input {
- border: 1px solid mat-contrast($primary, 400);
- }
-
- .search-icon {
- color: mat-contrast($primary, 400);
- }
-
- .card {
- color: mat-contrast($primary, 300);
- border: 0;
- -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-open-science-and-research-indicators-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-open-science-and-research-indicators {
+ .bg-bubble,
+ .circle-small {
+ background: mat-color($primary, 200);
+ }
+
+ .nav a,
+ .content:not(.intro) a {
+ color: mat-contrast($primary, 300);
+ }
+
+ .active {
+ background: #dc1ddf0f;
+ }
+
+ .active .icon,
+ .active a {
+ color: mat-color($primary);
+ }
+
+ .search input {
+ border: 1px solid mat-contrast($primary, 400);
+ }
+
+ .search-icon {
+ color: mat-contrast($primary, 400);
+ }
+
+ .card {
+ color: mat-contrast($primary, 300);
+ border: 0;
+ -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.ts b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.ts
index 1c1b21221..e996e91b3 100644
--- a/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.ts
+++ b/src/app/portal/components/science-politics/open-science-and-research-indicators/open-science-and-research-indicators.component.ts
@@ -1,42 +1,53 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { ActivatedRoute } from '@angular/router';
-import { UtilityService } from '@shared/services/utility.service';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+import { UtilityService } from '@shared/services/utility.service';
import { AppSettingsService } from '@shared/services/app-settings.service';
-
+import { SafeUrlPipe } from '../../../pipes/safe-url.pipe';
+import { CutContentPipe } from '../../../../shared/pipes/cut-content.pipe';
+import { NgFor } from '@angular/common';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
@Component({
- selector: 'app-open-science-and-research-indicators',
- templateUrl: './open-science-and-research-indicators.component.html',
- styleUrls: ['./open-science-and-research-indicators.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class OpenScienceAndResearchIndicatorsComponent implements OnInit {
- currentLocale = '';
- routeSub: Subscription;
-
- currentPageUrl = '/science-innovation-policy/open-science-and-research-indicators/';
-
- indicatorContent = [];
- subPageLinks: any;
- indicatorsActive = false;
-
- constructor(private route: ActivatedRoute, private utilityService: UtilityService, private appSettingsService: AppSettingsService) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- this.mapFetchedDataToContent();
- }
-
- mapFetchedDataToContent() {
- this.indicatorContent = this.route.snapshot.data.pages.filter(
- (el) => el.id.startsWith('indicators_general')
- );
- this.subPageLinks = this.route.snapshot.data.pages.filter(
- (el) => el.id.startsWith('indicators_content')
- );
- this.subPageLinks.map(link => (
- link.image = 'assets/img/indicators/indicators_thumbnail_' + link.id.substring(19, link.id.length) + '.png'
- ));
- }
-}
+ selector: 'app-open-science-and-research-indicators',
+ templateUrl: './open-science-and-research-indicators.component.html',
+ styleUrls: ['./open-science-and-research-indicators.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ NgFor,
+ CutContentPipe,
+ SafeUrlPipe,
+ ],
+})
+export class OpenScienceAndResearchIndicatorsComponent implements OnInit {
+ currentLocale = '';
+ routeSub: Subscription;
+
+ currentPageUrl = '/science-innovation-policy/open-science-and-research-indicators/';
+
+ indicatorContent = [];
+ subPageLinks: any;
+ indicatorsActive = false;
+
+ constructor(private route: ActivatedRoute, private utilityService: UtilityService, private appSettingsService: AppSettingsService) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ this.mapFetchedDataToContent();
+ }
+
+ mapFetchedDataToContent() {
+ this.indicatorContent = this.route.snapshot.data.pages.filter(
+ (el) => el.id.startsWith('indicators_general')
+ );
+ this.subPageLinks = this.route.snapshot.data.pages.filter(
+ (el) => el.id.startsWith('indicators_content')
+ );
+ this.subPageLinks.map(link => (
+ link.image = 'assets/img/indicators/indicators_thumbnail_' + link.id.substring(19, link.id.length) + '.png'
+ ));
+ }
+}
diff --git a/src/app/portal/components/science-politics/open-science-and-research-indicators/single-indicator/single-indicator.component.ts b/src/app/portal/components/science-politics/open-science-and-research-indicators/single-indicator/single-indicator.component.ts
index 054e044b5..4cac746b2 100644
--- a/src/app/portal/components/science-politics/open-science-and-research-indicators/single-indicator/single-indicator.component.ts
+++ b/src/app/portal/components/science-politics/open-science-and-research-indicators/single-indicator/single-indicator.component.ts
@@ -1,116 +1,135 @@
-import {
- ChangeDetectorRef,
- Component,
- ElementRef,
- Inject,
- OnInit,
- ViewChild,
- ViewEncapsulation
-} from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { Subscription, combineLatest } from 'rxjs';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { WINDOW } from '@shared/services/window.service';
-
-@Component({
- selector: 'app-single-indicator',
- templateUrl: './single-indicator.component.html',
- styleUrls: ['./single-indicator.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class SingleIndicatorComponent implements OnInit {
-
- @ViewChild('iframe') iframe: ElementRef;
- resizeSub: Subscription;
- currentLocale = '';
- currentPageCaption = '';
- routeSub: Subscription;
- pageTextContent: any = '';
- visualizationUrl: any;
- dataSource: any;
- siblingPageLinks = [];
- currentPageId = '';
- colWidth = 0;
- showHelp = false;
- mobile = this.window.innerWidth < 992;
- height = this.window.innerHeight;
- width = this.window.innerWidth;
- item = {};
-
- currentPageUrl = '/science-innovation-policy/open-science-and-research-indicators/';
-
- constructor(private route: ActivatedRoute, private router: Router, private appSettingsService: AppSettingsService, private resizeService: ResizeService, @Inject(WINDOW) private window: Window, private cdRef : ChangeDetectorRef) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- this.processPageData();
- this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
- this.onResize(dims)
- );
- }
-
- ngAfterViewInit() {
- this.colWidth = this.iframe.nativeElement.offsetWidth;
- this.cdRef.detectChanges();
- }
-
- processPageData() {
- if (this.route.snapshot.params) {
- this.pageTextContent = this.route.snapshot.data.pages.find(
- (el) => el.id === this.route.snapshot.params.id
- );
- if (this.pageTextContent) {
- this.currentPageCaption = this.pageTextContent['title' + this.currentLocale];
- this.currentPageId = this.pageTextContent.id.substring(19, this.pageTextContent.id.length);
- this.siblingPageLinks = this.route.snapshot.data.pages.filter(
- (el) => el.id.startsWith('indicators_content')
- );
-
- this.visualizationUrl = this.route.snapshot.data.pages.find(
- (el) => el.id === ('indicators_link_' + this.currentPageId)
- );
- // Crop out html paragraph tags from start and end of the link from cms.
- this.visualizationUrl ? this.visualizationUrl =
- this.visualizationUrl['content' + this.currentLocale].substring(3, this.visualizationUrl['content' + this.currentLocale].length - 4) : '';
-
- this.siblingPageLinks.map(link => (
- link.image = 'assets/img/indicators/indicators_thumbnail_' + link.id.substring(19, link.id.length) + '.png'
- ));
-
- this.dataSource = this.route.snapshot.data.pages.find(
- (el) => el.id === ('indicators_datasource_' + this.currentPageId)
- );
- // Crop out html paragraph tags from start and end of the link from cms.
- this.dataSource ? this.dataSource =
- this.dataSource['content' + this.currentLocale].substring(3, this.dataSource['content' + this.currentLocale].length - 4) : '';
-
- this.siblingPageLinks.map(link => (
- link.selected = link.id.substring(19, link.id.length) === this.currentPageId
- ));
- }
- else {
- this.router.navigate([this.currentPageUrl]);
- }
- }
- else {
- this.router.navigate([this.currentPageUrl]);
- }
- }
-
- onResize(dims) {
- this.colWidth = this.iframe.nativeElement.offsetWidth - 15;
- this.cdRef.detectChanges();
- }
-
- onClickedOutsideHelp(event) {
- this.showHelp = false;
- }
-
- ngOnDestroy() {
- this.resizeSub?.unsubscribe();
- }
-}
-
-
+import {
+ ChangeDetectorRef,
+ Component,
+ ElementRef,
+ Inject,
+ OnInit,
+ ViewChild,
+ ViewEncapsulation
+} from '@angular/core';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { Subscription, combineLatest } from 'rxjs';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { WINDOW } from '@shared/services/window.service';
+import { SafeUrlPipe } from '../../../../pipes/safe-url.pipe';
+import { SecondaryButtonComponent } from '../../../../../shared/components/buttons/secondary-button/secondary-button.component';
+import { ShareComponent } from '../../../single/share/share.component';
+import { NgIf, NgFor } from '@angular/common';
+import { ClickOutsideDirective } from '../../../../../shared/directives/click-outside.directive';
+import { BreadcrumbComponent } from '../../../breadcrumb/breadcrumb.component';
+import { BannerDividerComponent } from '../../../../../shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-single-indicator',
+ templateUrl: './single-indicator.component.html',
+ styleUrls: ['./single-indicator.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ RouterLink,
+ BreadcrumbComponent,
+ ClickOutsideDirective,
+ NgIf,
+ ShareComponent,
+ SecondaryButtonComponent,
+ NgFor,
+ SafeUrlPipe,
+ ],
+})
+export class SingleIndicatorComponent implements OnInit {
+
+ @ViewChild('iframe') iframe: ElementRef;
+ resizeSub: Subscription;
+ currentLocale = '';
+ currentPageCaption = '';
+ routeSub: Subscription;
+ pageTextContent: any = '';
+ visualizationUrl: any;
+ dataSource: any;
+ siblingPageLinks = [];
+ currentPageId = '';
+ colWidth = 0;
+ showHelp = false;
+ mobile = this.window.innerWidth < 992;
+ height = this.window.innerHeight;
+ width = this.window.innerWidth;
+ item = {};
+
+ currentPageUrl = '/science-innovation-policy/open-science-and-research-indicators/';
+
+ constructor(private route: ActivatedRoute, private router: Router, private appSettingsService: AppSettingsService, private resizeService: ResizeService, @Inject(WINDOW) private window: Window, private cdRef : ChangeDetectorRef) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ this.processPageData();
+ this.resizeSub = this.resizeService.onResize$.subscribe((dims) =>
+ this.onResize(dims)
+ );
+ }
+
+ ngAfterViewInit() {
+ this.colWidth = this.iframe.nativeElement.offsetWidth;
+ this.cdRef.detectChanges();
+ }
+
+ processPageData() {
+ if (this.route.snapshot.params) {
+ this.pageTextContent = this.route.snapshot.data.pages.find(
+ (el) => el.id === this.route.snapshot.params.id
+ );
+ if (this.pageTextContent) {
+ this.currentPageCaption = this.pageTextContent['title' + this.currentLocale];
+ this.currentPageId = this.pageTextContent.id.substring(19, this.pageTextContent.id.length);
+ this.siblingPageLinks = this.route.snapshot.data.pages.filter(
+ (el) => el.id.startsWith('indicators_content')
+ );
+
+ this.visualizationUrl = this.route.snapshot.data.pages.find(
+ (el) => el.id === ('indicators_link_' + this.currentPageId)
+ );
+ // Crop out html paragraph tags from start and end of the link from cms.
+ this.visualizationUrl ? this.visualizationUrl =
+ this.visualizationUrl['content' + this.currentLocale].substring(3, this.visualizationUrl['content' + this.currentLocale].length - 4) : '';
+
+ this.siblingPageLinks.map(link => (
+ link.image = 'assets/img/indicators/indicators_thumbnail_' + link.id.substring(19, link.id.length) + '.png'
+ ));
+
+ this.dataSource = this.route.snapshot.data.pages.find(
+ (el) => el.id === ('indicators_datasource_' + this.currentPageId)
+ );
+ // Crop out html paragraph tags from start and end of the link from cms.
+ this.dataSource ? this.dataSource =
+ this.dataSource['content' + this.currentLocale].substring(3, this.dataSource['content' + this.currentLocale].length - 4) : '';
+
+ this.siblingPageLinks.map(link => (
+ link.selected = link.id.substring(19, link.id.length) === this.currentPageId
+ ));
+ }
+ else {
+ this.router.navigate([this.currentPageUrl]);
+ }
+ }
+ else {
+ this.router.navigate([this.currentPageUrl]);
+ }
+ }
+
+ onResize(dims) {
+ this.colWidth = this?.iframe?.nativeElement?.offsetWidth ?? 0;
+ this.cdRef.detectChanges();
+ }
+
+ onClickedOutsideHelp(event) {
+ this.showHelp = false;
+ }
+
+ ngOnDestroy() {
+ this.resizeSub?.unsubscribe();
+ }
+}
+
+
diff --git a/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.scss-theme.scss b/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.scss-theme.scss
index 928fab24f..6d722eb4e 100644
--- a/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.scss-theme.scss
+++ b/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.scss-theme.scss
@@ -1,19 +1,19 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import '@angular/material/theming';
-
-@mixin app-research-innovation-system-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-research-innovation-system {
- .mat-expansion-panel-content .org-links a {
- color: mat-contrast($primary, 50);
- text-decoration: underline;
- }
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@use 'migration' as *;
+
+@mixin app-research-innovation-system-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-research-innovation-system {
+ .mat-expansion-panel-content .org-links a {
+ color: mat-contrast($primary, 50);
+ text-decoration: underline;
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.ts b/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.ts
index 11b72b81d..96cffa34f 100644
--- a/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.ts
+++ b/src/app/portal/components/science-politics/research-innovation-system/research-innovation-system.component.ts
@@ -1,147 +1,164 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {
- Component,
- OnInit,
- ViewChild,
- ElementRef,
- LOCALE_ID,
- Inject,
- AfterViewInit,
- OnDestroy,
- ChangeDetectorRef,
-} from '@angular/core';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
-import { DomSanitizer } from '@angular/platform-browser';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { ResizeService } from 'src/app/shared/services/resize.service';
-import { Subscription } from 'rxjs';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import { ActivatedRoute } from '@angular/router';
-import { Sector } from 'src/app/portal/models/research-innovation-system/sector.model';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-
-@Component({
- selector: 'app-research-innovation-system',
- templateUrl: './research-innovation-system.component.html',
- styleUrls: ['./research-innovation-system.component.scss'],
-})
-export class ResearchInnovationSystemComponent
- implements OnInit, AfterViewInit, OnDestroy
-{
- faTimes = faTimes;
- openedIdx = -1;
-
- private metaTags = MetaTags.researchInnovation;
- private commonTags = MetaTags.common;
-
- colWidth = 0;
-
- introText: any;
-
- selectedSector: any;
- rearrangedList: any[];
- @ViewChild('openSector') openSector: ElementRef;
- @ViewChild('mainFocus') mainFocus: ElementRef;
- @ViewChild('iframe') iframe: ElementRef;
- focusSub: Subscription;
- resizeSub: Subscription;
- currentLocale: string;
- sectorData: Sector[] = [];
-
- constructor(
- @Inject(LOCALE_ID) protected localeId: string,
- public sanitizer: DomSanitizer,
- private tabChangeService: TabChangeService,
- private cdr: ChangeDetectorRef,
- private resizeService: ResizeService,
- private utilityService: UtilityService,
- private route: ActivatedRoute,
- private appSettingsService: AppSettingsService
- ) {
- this.selectedSector = null;
-
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- ngOnInit(): void {
- // Get data. Data is passed with resolver in router
- const pageData = this.route.snapshot.data.pages;
- this.introText = pageData.find(
- (el) => el.id === 'science-innovation-system'
- );
-
- this.sectorData = this.route.snapshot.data.sectorData;
-
- // Set title and meta tags
- switch (this.localeId) {
- case 'fi': {
- this.setTitle(
- 'Tutkimus- ja innovaatiojärjestelmä - Tiedejatutkimus.fi'
- );
- break;
- }
- case 'en': {
- this.setTitle('Research and innovation system - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle(
- 'Finländskt forsknings- och innovationssystem - Forskning.fi'
- );
- break;
- }
- }
-
- this.utilityService.addMeta(
- this.metaTags['title' + this.currentLocale],
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
-
- // Hide skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(false);
- this.resizeSub = this.resizeService.onResize$.subscribe((_) =>
- this.onResize()
- );
- }
-
- ngAfterViewInit() {
- // Focus with skip-links
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.mainFocus.nativeElement.focus();
- }
- }
- );
- this.colWidth = this.iframe.nativeElement.offsetWidth;
- this.cdr.detectChanges();
- }
-
- onResize() {
- this.colWidth = this.iframe.nativeElement.offsetWidth;
- }
-
- trackByFn(index) {
- return index;
- }
-
- ngOnDestroy() {
- // Reset skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(true);
- this.tabChangeService.targetFocus('');
- this.resizeSub?.unsubscribe();
- this.focusSub?.unsubscribe();
- }
-}
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import {
+ Component,
+ OnInit,
+ ViewChild,
+ ElementRef,
+ LOCALE_ID,
+ Inject,
+ AfterViewInit,
+ OnDestroy,
+ ChangeDetectorRef,
+} from '@angular/core';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+import { DomSanitizer } from '@angular/platform-browser';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { ResizeService } from 'src/app/shared/services/resize.service';
+import { Subscription } from 'rxjs';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { Sector } from 'src/app/portal/models/research-innovation-system/sector.model';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { SafeUrlPipe } from '../../../pipes/safe-url.pipe';
+import { NgFor, NgClass, NgIf } from '@angular/common';
+import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
+@Component({
+ selector: 'app-research-innovation-system',
+ templateUrl: './research-innovation-system.component.html',
+ styleUrls: ['./research-innovation-system.component.scss'],
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ MatAccordion,
+ NgFor,
+ MatExpansionPanel,
+ MatExpansionPanelHeader,
+ MatExpansionPanelTitle,
+ NgClass,
+ NgIf,
+ RouterLink,
+ SafeUrlPipe,
+ ],
+})
+export class ResearchInnovationSystemComponent
+ implements OnInit, AfterViewInit, OnDestroy
+{
+ faTimes = faTimes;
+ openedIdx = -1;
+
+ private metaTags = MetaTags.researchInnovation;
+ private commonTags = MetaTags.common;
+
+ colWidth = 0;
+
+ introText: any;
+
+ selectedSector: any;
+ rearrangedList: any[];
+ @ViewChild('openSector') openSector: ElementRef;
+ @ViewChild('mainFocus') mainFocus: ElementRef;
+ @ViewChild('iframe') iframe: ElementRef;
+ focusSub: Subscription;
+ resizeSub: Subscription;
+ currentLocale: string;
+ sectorData: Sector[] = [];
+
+ constructor(
+ @Inject(LOCALE_ID) protected localeId: string,
+ public sanitizer: DomSanitizer,
+ private tabChangeService: TabChangeService,
+ private cdr: ChangeDetectorRef,
+ private resizeService: ResizeService,
+ private utilityService: UtilityService,
+ private route: ActivatedRoute,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.selectedSector = null;
+
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ ngOnInit(): void {
+ // Get data. Data is passed with resolver in router
+ const pageData = this.route.snapshot.data.pages;
+ this.introText = pageData.find(
+ (el) => el.id === 'science-innovation-system'
+ );
+
+ this.sectorData = this.route.snapshot.data.sectorData;
+
+ // Set title and meta tags
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle(
+ 'Tutkimus- ja innovaatiojärjestelmä - Tiedejatutkimus.fi'
+ );
+ break;
+ }
+ case 'en': {
+ this.setTitle('Research and innovation system - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle(
+ 'Finländskt forsknings- och innovationssystem - Forskning.fi'
+ );
+ break;
+ }
+ }
+
+ this.utilityService.addMeta(
+ this.metaTags['title' + this.currentLocale],
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+
+ // Hide skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(false);
+ this.resizeSub = this.resizeService.onResize$.subscribe((_) =>
+ this.onResize()
+ );
+ }
+
+ ngAfterViewInit() {
+ // Focus with skip-links
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.mainFocus.nativeElement.focus();
+ }
+ }
+ );
+ this.colWidth = this.iframe.nativeElement.offsetWidth;
+ this.cdr.detectChanges();
+ }
+
+ onResize() {
+ this.colWidth = this.iframe.nativeElement.offsetWidth;
+ }
+
+ trackByFn(index) {
+ return index;
+ }
+
+ ngOnDestroy() {
+ // Reset skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(true);
+ this.tabChangeService.targetFocus('');
+ this.resizeSub?.unsubscribe();
+ this.focusSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/science-politics/science-politics.scss-theme-shared.scss b/src/app/portal/components/science-politics/science-politics.scss-theme-shared.scss
index dd4ae63de..9fe73b5b9 100644
--- a/src/app/portal/components/science-politics/science-politics.scss-theme-shared.scss
+++ b/src/app/portal/components/science-politics/science-politics.scss-theme-shared.scss
@@ -1,18 +1,18 @@
-@import '@angular/material/theming';
-
-@mixin app-science-politics-theme-shared($theme) {
- $primary: map-get($theme, primary);
-
- app-figures,
- app-research-innovation-system,
- app-single-figure,
- app-service-info {
- .base {
- background: rgba(255, 255, 255, 0.5);
- }
-
- .content {
- border-left: 0.5rem solid mat-color($primary, 200);
- }
- }
-}
+@use 'migration' as *;
+
+@mixin app-science-politics-theme-shared($theme) {
+ $primary: map-get($theme, primary);
+
+ app-figures,
+ app-research-innovation-system,
+ app-single-figure,
+ app-service-info {
+ .base {
+ background: rgba(255, 255, 255, 0.5);
+ }
+
+ .content {
+ border-left: 0.5rem solid mat-color($primary, 200);
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/tki-reports/tki-reports.component.scss b/src/app/portal/components/science-politics/tki-reports/tki-reports.component.scss
index d2590b71b..169bcde75 100644
--- a/src/app/portal/components/science-politics/tki-reports/tki-reports.component.scss
+++ b/src/app/portal/components/science-politics/tki-reports/tki-reports.component.scss
@@ -1,206 +1,206 @@
-.tki-reports {
- h2 {
- color: #4d4d4d;
- font-size: 0.9rem;
- line-height: 1.5rem;
- margin-left: 16px;
- margin-top: 10px;
- }
-
- .search-field {
- justify-content: space-between;
- height: 40px;
- z-index: 105;
- max-width: 470px;
- }
-
- .input {
- box-shadow: #4546b9 0px 0px 0px 2px;
- border-radius: 4px;
- border: none;
- }
-
- .search-and-modal-wrapper {
- display: flex;
- flex-direction: column;
- justify-content: left;
- }
-
- .search-inputs-wrap {
- display: flex;
- justify-content: center;
-
- input:focus-visible {
- box-shadow: none !important;
- }
- }
-
- .tki-search-inputs-row {
- max-width: 600px;
- width: 100%;
-
- .search-button {
- margin-top: -2px;
- margin-left: 10px;
- z-index: 105;
- }
-
- .reset-search {
- margin: 9px 0px 8px -24px;
- z-index: 105;
- cursor: pointer;
- }
-
- button {
- min-width: 121px;
- }
- }
-
-
- .tki-search-results-modal {
- h2 {
- margin-top: 1.2rem;
- margin-left: 20px;
- }
-
- background: #fff scroll;
- box-shadow: rgb(69, 70, 185) 0px 0px 0px 2px;
- border-radius: 4px;
- margin: 8px;
- width: 100%;
- min-width: 250px;
- max-width: 600px;
- z-index: 104;
- position: absolute;
-
- mark {
- font-weight: 900;
- background-color: initial;
- }
-
- ul {
- padding-inline-start: 0px;
- list-style: none;
-
- li {
- cursor: pointer;
- padding: 15px;
- margin: 0px -0px 0px -15px;
-
- &:hover {
- background: #e2e2f2;
- }
- }
- }
-
- .no-results-wrap {
- width: 600px;
- }
-
- p {
- margin-left: 16px;
- margin-top: 10px;
- }
-
- app-list-item {
- border: none;
- cursor: pointer;
-
- &:hover {
- background: #e2e2f2;
- }
-
- &.active {
- background: #4546b9;
- }
-
- p {
- margin: 0px;
- }
- }
-
- .list-group-item.active {
- margin-top: 0px;
- }
-
- hr:last-of-type {
- display: none !important;
- }
- }
-
-
- .all-publications-link {
- color: rgb(51, 102, 204);
- font-weight: 700;
- }
-
- .tki-search-inputs-row {
- .search-input {
- margin-top: -1px;
- }
-
- button {
- display: flex;
- margin-top: -1px;
- line-height: 39px;
- }
- }
-
- .tki-search-results-desktop {
- th.mat-header-cell:first-of-type {
- padding-left: 0px;
- }
-
- .mat-header-cell {
- font-weight: bold;
- font-size: 0.9rem;
- color: #4d4d4d;
- }
-
- .mat-sort-header {
- min-width: 100px;
- }
-
- .mat-cell {
- font-size: 0.95rem;
- padding: 10px 20px 10px 0px;
-
- a {
- color: #4546b9;
- font-weight: 500;
- }
- }
- }
-
- .tki-search-results-mobile {
- p {
- margin-left: 16px;
- margin-top: 10px;
- }
-
- hr {
- margin-top: 35px;
- margin-bottom: 20px;
- }
-
- a {
- color: #4546b9;
- font-weight: 500;
- }
-
- mark {
- font-weight: 900;
- background-color: initial;
- }
- }
-}
-
-.modal-overlay {
- position: absolute;
- z-index: 103;
- left: 0;
- top: 88px;
- background: rgba(0, 0, 0, 0.5);
- width: 100%;
- height: 100vh;
-}
+.tki-reports {
+ h2 {
+ color: #4d4d4d;
+ font-size: 0.9rem;
+ line-height: 1.5rem;
+ margin-left: 16px;
+ margin-top: 10px;
+ }
+
+ .search-field {
+ justify-content: space-between;
+ height: 40px;
+ z-index: 105;
+ max-width: 470px;
+ }
+
+ .input {
+ box-shadow: #4546b9 0px 0px 0px 2px;
+ border-radius: 4px;
+ border: none;
+ }
+
+ .search-and-modal-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: left;
+ }
+
+ .search-inputs-wrap {
+ display: flex;
+ justify-content: center;
+
+ input:focus-visible {
+ box-shadow: none !important;
+ }
+ }
+
+ .tki-search-inputs-row {
+ max-width: 600px;
+ width: 100%;
+
+ .search-button {
+ margin-top: -2px;
+ margin-left: 10px;
+ z-index: 105;
+ }
+
+ .reset-search {
+ margin: 9px 0px 8px -24px;
+ z-index: 105;
+ cursor: pointer;
+ }
+
+ button {
+ min-width: 121px;
+ }
+ }
+
+
+ .tki-search-results-modal {
+ h2 {
+ margin-top: 1.2rem;
+ margin-left: 20px;
+ }
+
+ background: #fff scroll;
+ box-shadow: rgb(69, 70, 185) 0px 0px 0px 2px;
+ border-radius: 4px;
+ margin: 8px;
+ width: 100%;
+ min-width: 250px;
+ max-width: 600px;
+ z-index: 104;
+ position: absolute;
+
+ mark {
+ font-weight: 900;
+ background-color: initial;
+ }
+
+ ul {
+ padding-inline-start: 0px;
+ list-style: none;
+
+ li {
+ cursor: pointer;
+ padding: 15px;
+ margin: 0px -0px 0px -15px;
+
+ &:hover {
+ background: #e2e2f2;
+ }
+ }
+ }
+
+ .no-results-wrap {
+ width: 600px;
+ }
+
+ p {
+ margin-left: 16px;
+ margin-top: 10px;
+ }
+
+ app-list-item {
+ border: none;
+ cursor: pointer;
+
+ &:hover {
+ background: #e2e2f2;
+ }
+
+ &.active {
+ background: #4546b9;
+ }
+
+ p {
+ margin: 0px;
+ }
+ }
+
+ .list-group-item.active {
+ margin-top: 0px;
+ }
+
+ hr:last-of-type {
+ display: none !important;
+ }
+ }
+
+
+ .all-publications-link {
+ color: rgb(51, 102, 204);
+ font-weight: 700;
+ }
+
+ .tki-search-inputs-row {
+ .search-input {
+ margin-top: -1px;
+ }
+
+ button {
+ display: flex;
+ margin-top: -1px;
+ line-height: 39px;
+ }
+ }
+
+ .tki-search-results-desktop {
+ th.mat-mdc-header-cell:first-of-type {
+ padding-left: 0px;
+ }
+
+ .mat-mdc-header-cell {
+ font-weight: bold;
+ font-size: 0.9rem;
+ color: #4d4d4d;
+ }
+
+ .mat-sort-header {
+ min-width: 100px;
+ }
+
+ .mat-mdc-cell {
+ font-size: 0.95rem;
+ padding: 10px 20px 10px 0px;
+
+ a {
+ color: #4546b9;
+ font-weight: 500;
+ }
+ }
+ }
+
+ .tki-search-results-mobile {
+ p {
+ margin-left: 16px;
+ margin-top: 10px;
+ }
+
+ hr {
+ margin-top: 35px;
+ margin-bottom: 20px;
+ }
+
+ a {
+ color: #4546b9;
+ font-weight: 500;
+ }
+
+ mark {
+ font-weight: 900;
+ background-color: initial;
+ }
+ }
+}
+
+.modal-overlay {
+ position: absolute;
+ z-index: 103;
+ left: 0;
+ top: 88px;
+ background: rgba(0, 0, 0, 0.5);
+ width: 100%;
+ height: 100vh;
+}
diff --git a/src/app/portal/components/science-politics/tki-reports/tki-reports.component.ts b/src/app/portal/components/science-politics/tki-reports/tki-reports.component.ts
index cf78b9d52..d4362a167 100644
--- a/src/app/portal/components/science-politics/tki-reports/tki-reports.component.ts
+++ b/src/app/portal/components/science-politics/tki-reports/tki-reports.component.ts
@@ -1,249 +1,258 @@
-import {
- AfterViewInit,
- Component,
- ElementRef,
- HostListener,
- Inject,
- LOCALE_ID,
- OnDestroy,
- OnInit,
- QueryList,
- ViewChild,
- ViewChildren,
-} from '@angular/core';
-import { faSearch } from '@fortawesome/free-solid-svg-icons';
-import dummyData from 'src/app/portal/components/science-politics/tki-reports/tki-dummydata.json';
-import { DOCUMENT } from '@angular/common';
-import { UtilityService } from '@shared/services/utility.service';
-import { MatSort } from '@angular/material/sort';
-import { MatTableDataSource } from '@angular/material/table';
-import { AppSettingsService } from '@shared/services/app-settings.service';
-import { Subscription } from 'rxjs';
-import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
-import { ListItemComponent } from '@portal/components/search-bar/list-item/list-item.component';
-
-export interface Report {
- id: number;
- authors: string[];
- name: string[];
- link: string;
- year: string;
- keywords: string[];
-}
-
-@Component({
- selector: 'app-tki-reports',
- templateUrl: './tki-reports.component.html',
- styleUrls: ['./tki-reports.component.scss']
-})
-export class TkiReportsComponent implements OnInit, AfterViewInit, OnDestroy {
-
- @ViewChild('searchInput') search: ElementRef;
- @ViewChildren(ListItemComponent) items: QueryList;
-
- public utilityService: UtilityService;
- private isMobileSubscription: Subscription;
- private keyManager: ActiveDescendantKeyManager;
-
- filteredSourceData: Report[] = this.replaceEmptyKeywordsWithDash(dummyData);
- resultDataMobile: Report[] = this.replaceEmptyKeywordsWithDash(dummyData);
- formattedTableData = new MatTableDataSource(this.replaceEmptyKeywordsWithDash(this.filteredSourceData));
-
- locAuthors = $localize`:@@tkiAuthors:Tekijät`;
- locName = $localize`:@@tkiName:Nimi`;
- locYear = $localize`:@@yearOfPublication:Julkaisuvuosi`;
- locKeywords = $localize`:@@tkiKeywords:Asiasanat`;
-
- displayedColumns = ['name', 'year', 'authors', 'keywords'];
- value = '';
- noSearchesDone = true;
- modalOverlayVisible = false;
- modalOverlayHeight: number;
- HEADER_HEIGHT = 88;
- isMobile = false;
-
- matchedAuthors = new Set();
- matchedNames = new Set();
- matchedKeywords = new Set();
- matchedYears = new Set();
- filteredArticleIds = new Set();
- faSearch = faSearch;
-
- constructor(
- @Inject(DOCUMENT) private document: Document,
- @Inject(LOCALE_ID) protected localeId,
- private appSettingsService: AppSettingsService,
- ) {}
-
- ngOnInit() {
- this.isMobileSubscription = this.appSettingsService.mobileStatus.subscribe((status) => {
- this.isMobile = status;
- });
- switch (this.localeId) {
- case 'fi': {
- this.setTitle('Selvityksiä ja raportteja - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle('Studies and reports - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle('Utredningar och rapporter - Forskning.fi');
- break;
- }
- }
- //TODO: fetch data from back end here
- }
-
- @ViewChild(MatSort) sort: MatSort;
-
- ngAfterViewInit() {
- this.formattedTableData.sort = this.sort;
- this.keyManager = new ActiveDescendantKeyManager(this.items).withWrap().withTypeAhead();
- this.keyManager.setFirstItemActive();
- }
-
- @HostListener('document:keyup', ['$event'])
- handleKeyboardEvents(event: KeyboardEvent) {
- if (event.key === 'Escape') {
- this.closeModal();
- }
- }
-
- public setTitle(newTitle: string) {
- this.utilityService.setTitle(newTitle);
- }
-
- doFiltering(keepModalOpen: boolean) {
- this.noSearchesDone = false;
- const regEx = new RegExp(this.value, 'i');
- let ind = 0;
- this.matchedAuthors.clear();
- this.matchedKeywords.clear();
- this.matchedNames.clear();
- this.matchedYears.clear();
- this.filteredArticleIds.clear();
- this.filteredSourceData = [...dummyData];
-
- dummyData.forEach((entry: any) => {
- entry.authors.forEach((author) => {
- if (author.match(regEx)) {
- this.matchedAuthors.add([author, dummyData[ind].id]);
- this.filteredArticleIds.add(dummyData[ind].id);
- }
- });
-
- entry.name.forEach((name) => {
- if (name.match(regEx)) {
- this.matchedNames.add([name, dummyData[ind].id]);
- this.filteredArticleIds.add(dummyData[ind].id);
- }
- });
-
- entry.keywords.forEach((kword) => {
- if (kword.match(regEx) && this.value !== '-') {
- this.matchedKeywords.add([kword, dummyData[ind].id]);
- this.filteredArticleIds.add(dummyData[ind].id);
- }
- });
-
- if (entry.year.match(regEx)) {
- this.matchedYears.add([entry.year, dummyData[ind].id]);
- this.filteredArticleIds.add(dummyData[ind].id);
- }
-
- ind += 1;
- });
- this.filteredSourceData = this.filteredSourceData.filter((item) => {
- return this.filteredArticleIds.has(item.id);
- });
-
- // This is called when search button is pressed. Table data is filtered only after modal is closed.
- if (!keepModalOpen) {
- this.closeModal();
- this.formattedTableData.data = [...this.filteredSourceData];
- this.resultDataMobile = [...this.filteredSourceData];
- this.search.nativeElement.blur();
- }
- }
-
- replaceEmptyKeywordsWithDash(sourceData: Report[]) {
- sourceData = sourceData.map(report => {
- report.keywords = report.keywords.map(keyword => {
- if (keyword === '') {
- keyword = '-';
- }
- return keyword;
- });
- return report;
- });
- return sourceData;
- }
-
- modalSearchRowClick(atricleId: number) {
- this.filteredSourceData = [...dummyData];
- this.filteredSourceData = this.filteredSourceData.filter((item) => {
- return item.id === atricleId;
- });
- this.resultDataMobile = [...this.replaceEmptyKeywordsWithDash(this.filteredSourceData)];
- this.formattedTableData.data = [...this.replaceEmptyKeywordsWithDash(this.filteredSourceData)];
- this.closeModal();
- this.search.nativeElement.blur();
- }
-
- onFocus() {
- this.modalOverlayVisible = true;
- if (this.noSearchesDone) {
- this.value = '';
- }
- this.modalOverlayHeight = this.document.body.scrollHeight - this.HEADER_HEIGHT;
- }
-
- closeModal() {
- this.modalOverlayVisible = false;
- this.keyManager.setActiveItem(-1);
- }
-
- modalOverlayClick() {
- this.closeModal();
- }
-
- resetSearch() {
- this.value = '';
- this.doFiltering(false);
- }
-
- // Keycodes
- onKeyup(event) {
- // Handle arrows
- if (event.keyCode === 38) {
- } else if (event.keyCode === 40) {
- } else if (event.keyCode === 13 && this.keyManager.activeItem) {
- // Do search with enter when an item is selected
- this.modalSearchRowClick(this.keyManager.activeItem.id);
- } else if (event.keyCode === 13 && !this.keyManager.activeItem) {
- /// Do default search with enter when no items are selected
- this.doFiltering(false);
- } else {
- this.doFiltering(true);
- }
- // Hide auto-suggest with esc key
- if (event.keyCode === 27) {
- this.modalOverlayVisible = false;
- } else if (event.keyCode !== 78) {
- this.keyManager.onKeydown(event);
- }
- }
-
- // Disable up & down arrows on input. Normally moves caret on start or end of input
- disableKeys(event) {
- if (event.keyCode === 40 || event.keyCode === 38) {
- return false;
- }
- }
-
- ngOnDestroy(): void {
- this.isMobileSubscription.unsubscribe();
- }
-}
+import {
+ AfterViewInit,
+ Component,
+ ElementRef,
+ HostListener,
+ Inject,
+ LOCALE_ID,
+ OnDestroy,
+ OnInit,
+ QueryList,
+ ViewChild,
+ ViewChildren,
+} from '@angular/core';
+import { faSearch } from '@fortawesome/free-solid-svg-icons';
+import dummyData from 'src/app/portal/components/science-politics/tki-reports/tki-dummydata.json';
+import { DOCUMENT, NgIf, NgStyle, NgFor } from '@angular/common';
+import { UtilityService } from '@shared/services/utility.service';
+import { MatSort, MatSortHeader } from '@angular/material/sort';
+import { MatTableDataSource, MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow } from '@angular/material/table';
+import { AppSettingsService } from '@shared/services/app-settings.service';
+import { Subscription } from 'rxjs';
+import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
+import { ListItemComponent } from '@portal/components/search-bar/list-item/list-item.component';
+import { HighlightSearchPipe } from '../../../pipes/highlight.pipe';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { ListItemComponent as ListItemComponent_1 } from '../../search-bar/list-item/list-item.component';
+import { PrimaryActionButtonComponent } from '../../../../shared/components/buttons/primary-action-button/primary-action-button.component';
+import { FormsModule } from '@angular/forms';
+import { MatInput } from '@angular/material/input';
+import { BannerDividerComponent } from '../../../../shared/components/banner-divider/banner-divider.component';
+
+export interface Report {
+ id: number;
+ authors: string[];
+ name: string[];
+ link: string;
+ year: string;
+ keywords: string[];
+}
+
+@Component({
+ selector: 'app-tki-reports',
+ templateUrl: './tki-reports.component.html',
+ styleUrls: ['./tki-reports.component.scss'],
+ standalone: true,
+ imports: [BannerDividerComponent, NgIf, NgStyle, MatInput, FormsModule, PrimaryActionButtonComponent, NgFor, ListItemComponent_1, FontAwesomeModule, MatTable, MatSort, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatSortHeader, MatCellDef, MatCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, HighlightSearchPipe]
+})
+export class TkiReportsComponent implements OnInit, AfterViewInit, OnDestroy {
+
+ @ViewChild('searchInput') search: ElementRef;
+ @ViewChildren(ListItemComponent) items: QueryList;
+
+ public utilityService: UtilityService;
+ private isMobileSubscription: Subscription;
+ private keyManager: ActiveDescendantKeyManager;
+
+ filteredSourceData: Report[] = this.replaceEmptyKeywordsWithDash(dummyData);
+ resultDataMobile: Report[] = this.replaceEmptyKeywordsWithDash(dummyData);
+ formattedTableData = new MatTableDataSource(this.replaceEmptyKeywordsWithDash(this.filteredSourceData));
+
+ locAuthors = $localize`:@@tkiAuthors:Tekijät`;
+ locName = $localize`:@@tkiName:Nimi`;
+ locYear = $localize`:@@yearOfPublication:Julkaisuvuosi`;
+ locKeywords = $localize`:@@tkiKeywords:Asiasanat`;
+
+ displayedColumns = ['name', 'year', 'authors', 'keywords'];
+ value = '';
+ noSearchesDone = true;
+ modalOverlayVisible = false;
+ modalOverlayHeight: number;
+ HEADER_HEIGHT = 88;
+ isMobile = false;
+
+ matchedAuthors = new Set();
+ matchedNames = new Set();
+ matchedKeywords = new Set();
+ matchedYears = new Set();
+ filteredArticleIds = new Set();
+ faSearch = faSearch;
+
+ constructor(
+ @Inject(DOCUMENT) private document: Document,
+ @Inject(LOCALE_ID) protected localeId,
+ private appSettingsService: AppSettingsService,
+ ) {}
+
+ ngOnInit() {
+ this.isMobileSubscription = this.appSettingsService.mobileStatus.subscribe((status) => {
+ this.isMobile = status;
+ });
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle('Selvityksiä ja raportteja - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle('Studies and reports - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle('Utredningar och rapporter - Forskning.fi');
+ break;
+ }
+ }
+ //TODO: fetch data from back end here
+ }
+
+ @ViewChild(MatSort) sort: MatSort;
+
+ ngAfterViewInit() {
+ this.formattedTableData.sort = this.sort;
+ this.keyManager = new ActiveDescendantKeyManager(this.items).withWrap().withTypeAhead();
+ this.keyManager.setFirstItemActive();
+ }
+
+ @HostListener('document:keyup', ['$event'])
+ handleKeyboardEvents(event: KeyboardEvent) {
+ if (event.key === 'Escape') {
+ this.closeModal();
+ }
+ }
+
+ public setTitle(newTitle: string) {
+ this.utilityService.setTitle(newTitle);
+ }
+
+ doFiltering(keepModalOpen: boolean) {
+ this.noSearchesDone = false;
+ const regEx = new RegExp(this.value, 'i');
+ let ind = 0;
+ this.matchedAuthors.clear();
+ this.matchedKeywords.clear();
+ this.matchedNames.clear();
+ this.matchedYears.clear();
+ this.filteredArticleIds.clear();
+ this.filteredSourceData = [...dummyData];
+
+ dummyData.forEach((entry: any) => {
+ entry.authors.forEach((author) => {
+ if (author.match(regEx)) {
+ this.matchedAuthors.add([author, dummyData[ind].id]);
+ this.filteredArticleIds.add(dummyData[ind].id);
+ }
+ });
+
+ entry.name.forEach((name) => {
+ if (name.match(regEx)) {
+ this.matchedNames.add([name, dummyData[ind].id]);
+ this.filteredArticleIds.add(dummyData[ind].id);
+ }
+ });
+
+ entry.keywords.forEach((kword) => {
+ if (kword.match(regEx) && this.value !== '-') {
+ this.matchedKeywords.add([kword, dummyData[ind].id]);
+ this.filteredArticleIds.add(dummyData[ind].id);
+ }
+ });
+
+ if (entry.year.match(regEx)) {
+ this.matchedYears.add([entry.year, dummyData[ind].id]);
+ this.filteredArticleIds.add(dummyData[ind].id);
+ }
+
+ ind += 1;
+ });
+ this.filteredSourceData = this.filteredSourceData.filter((item) => {
+ return this.filteredArticleIds.has(item.id);
+ });
+
+ // This is called when search button is pressed. Table data is filtered only after modal is closed.
+ if (!keepModalOpen) {
+ this.closeModal();
+ this.formattedTableData.data = [...this.filteredSourceData];
+ this.resultDataMobile = [...this.filteredSourceData];
+ this.search.nativeElement.blur();
+ }
+ }
+
+ replaceEmptyKeywordsWithDash(sourceData: Report[]) {
+ sourceData = sourceData.map(report => {
+ report.keywords = report.keywords.map(keyword => {
+ if (keyword === '') {
+ keyword = '-';
+ }
+ return keyword;
+ });
+ return report;
+ });
+ return sourceData;
+ }
+
+ modalSearchRowClick(atricleId: number) {
+ this.filteredSourceData = [...dummyData];
+ this.filteredSourceData = this.filteredSourceData.filter((item) => {
+ return item.id === atricleId;
+ });
+ this.resultDataMobile = [...this.replaceEmptyKeywordsWithDash(this.filteredSourceData)];
+ this.formattedTableData.data = [...this.replaceEmptyKeywordsWithDash(this.filteredSourceData)];
+ this.closeModal();
+ this.search.nativeElement.blur();
+ }
+
+ onFocus() {
+ this.modalOverlayVisible = true;
+ if (this.noSearchesDone) {
+ this.value = '';
+ }
+ this.modalOverlayHeight = this.document.body.scrollHeight - this.HEADER_HEIGHT;
+ }
+
+ closeModal() {
+ this.modalOverlayVisible = false;
+ this.keyManager.setActiveItem(-1);
+ }
+
+ modalOverlayClick() {
+ this.closeModal();
+ }
+
+ resetSearch() {
+ this.value = '';
+ this.doFiltering(false);
+ }
+
+ // Keycodes
+ onKeyup(event) {
+ // Handle arrows
+ if (event.keyCode === 38) {
+ } else if (event.keyCode === 40) {
+ } else if (event.keyCode === 13 && this.keyManager.activeItem) {
+ // Do search with enter when an item is selected
+ this.modalSearchRowClick(this.keyManager.activeItem.id);
+ } else if (event.keyCode === 13 && !this.keyManager.activeItem) {
+ /// Do default search with enter when no items are selected
+ this.doFiltering(false);
+ } else {
+ this.doFiltering(true);
+ }
+ // Hide auto-suggest with esc key
+ if (event.keyCode === 27) {
+ this.modalOverlayVisible = false;
+ } else if (event.keyCode !== 78) {
+ this.keyManager.onKeydown(event);
+ }
+ }
+
+ // Disable up & down arrows on input. Normally moves caret on start or end of input
+ disableKeys(event) {
+ if (event.keyCode === 40 || event.keyCode === 38) {
+ return false;
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.isMobileSubscription.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/search-bar/list-item/list-item.component.ts b/src/app/portal/components/search-bar/list-item/list-item.component.ts
index 746f951d9..45b7e0223 100644
--- a/src/app/portal/components/search-bar/list-item/list-item.component.ts
+++ b/src/app/portal/components/search-bar/list-item/list-item.component.ts
@@ -2,10 +2,11 @@ import { Component, HostBinding, Input } from '@angular/core';
import { Highlightable } from '@angular/cdk/a11y';
@Component({
- selector: 'app-list-item',
- template: `
{{ field.label }}
diff --git a/src/app/portal/components/results/filters/filters.component.scss b/src/app/portal/components/results/filters/filters.component.scss
index 7e3e88940..d855bef41 100644
--- a/src/app/portal/components/results/filters/filters.component.scss
+++ b/src/app/portal/components/results/filters/filters.component.scss
@@ -1,33 +1,35 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-@import './filters-shared.scss';
-
-app-funding-call-category-filters .mat-standard-chip {
- border-radius: 10px;
-}
-
-app-funding-call-category-filters .mat-chip-list-stacked .mat-chip-list-wrapper .mat-standard-chip {
- width: auto !important;
-}
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+@import './filters-shared.scss';
+
+app-funding-call-category-filters .mat-mdc-standard-chip {
+ border-radius: 10px;
+}
+
+/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+app-funding-call-category-filters .mat-chip-list-stacked .mat-chip-list-wrapper .mat-mdc-standard-chip {
+ width: auto !important;
+}
+
app-funding-call-category-filters {
- .mat-chip-list-wrapper {
- flex-direction: row !important;
- margin-top: 10px;
- margin-bottom: 15px;
- }
- .mat-chip {
- cursor: pointer;
- border-radius: 4px;
- }
-}
-
-.about-link {
- margin-left: 20px;
- margin-right: 15px;
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+ .mat-chip-list-wrapper {
+ flex-direction: row !important;
+ margin-top: 10px;
+ margin-bottom: 15px;
+ }
+ .mat-mdc-chip {
+ cursor: pointer;
+ border-radius: 4px;
+ }
+}
+
+.about-link {
+ margin-left: 20px;
+ margin-right: 15px;
+}
diff --git a/src/app/portal/components/results/filters/filters.component.spec.ts b/src/app/portal/components/results/filters/filters.component.spec.ts
index c8ebe9e17..953d65bff 100644
--- a/src/app/portal/components/results/filters/filters.component.spec.ts
+++ b/src/app/portal/components/results/filters/filters.component.spec.ts
@@ -1,129 +1,128 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import {ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { FiltersComponent } from './filters.component';
-import { Router, ActivatedRoute } from '@angular/router';
-import { WINDOW_PROVIDERS } from '@shared/services/window.service';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-
-import AggResponse from 'src/testdata/aggregationresponse.json';
-import AggPublicationResponse from 'src/testdata/aggpublicationresponse.json';
-import { of } from 'rxjs/internal/observable/of';
-import { PublicationFilterService } from '@portal/services/filters/publication-filter.service';
-import { MatDialogModule } from '@angular/material/dialog';
-
-describe('FiltersComponent', () => {
- let component: FiltersComponent;
- let fixture: ComponentFixture
-
-
- {{chip.key}}
-
-
-
-
- -
+- -
+
+
+ {{chip.key}}
+
+
+
+
+ +
diff --git a/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.ts b/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.ts
index 28101841f..1755949af 100644
--- a/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.ts
+++ b/src/app/portal/components/results/funding-call-category-filters/funding-call-category-filters.component.ts
@@ -1,151 +1,159 @@
-import {
- Component,
- OnInit,
- Output,
- EventEmitter,
- Input,
- SimpleChanges,
- OnDestroy,
-} from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import {
+ Component,
+ OnInit,
+ Output,
+ EventEmitter,
+ Input,
+ SimpleChanges,
+ OnDestroy,
+} from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
-
+import { NgFor } from '@angular/common';
+import { MatChipListbox, MatChipOption } from '@angular/material/chips';
+
@Component({
- selector: 'app-funding-call-category-filters',
- templateUrl: './funding-call-category-filters.component.html',
- styleUrls: ['./funding-call-category-filters.component.scss'],
-})
-export class FundingCallCategoryFiltersComponent implements OnInit, OnDestroy {
- constructor(private route: ActivatedRoute) {}
-
- majorFieldsOfScienceAurora = [];
- topLevelFilterSelections = new Set();
- bottomLevelFilterOptions = [];
- filterValuesToEmit = [];
- queryParamSub: Subscription;
- _responseData: any;
- queryParams: any;
- topLevelCategoriesInitialized = false;
-
- @Input() responseData: any;
-
- @Input() resetFundingCallCategoryFilters;
-
- @Output() filterChangeOutput = new EventEmitter+ +
-
-
-
-
-
+
+
+
+
+Tuloksia näytetään enintään 10 000
+
-
+
+
+
-
-
-
-
-
-
- {{ item.label }}
-
-
-
-
-
+
diff --git a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.scss b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.scss
index 90cb9cd92..11c6bc6ad 100644
--- a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.scss
+++ b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.scss
@@ -1,47 +1,48 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
app-figure-filters {
- .mat-chip-list-wrapper {
- flex-direction: row !important;
+ /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+ .mat-chip-list-wrapper {
+ flex-direction: row !important;
}
-
- mat-chip {
- cursor: pointer;
- max-width: fit-content;
- }
-
- .mat-standard-chip {
- display: inline-table;
- }
-
- .narrow {
- max-width: 286px;
- }
-
- @media (max-width: 1440px) {
- .narrow {
- max-width: 200px;
- }
- }
-
- @media (max-width: 1107px) {
- .narrow {
- max-width: 170px;
- }
- }
-
- @media (max-width: 991px) {
- .narrow {
- max-width: unset;
- }
-
- .info-button {
- display: none;
- }
- }
-}
+ /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
+ mat-chip {
+ cursor: pointer;
+ max-width: fit-content;
+ }
+
+ .mat-mdc-standard-chip {
+ display: inline-table;
+ }
+
+ .narrow {
+ max-width: 286px;
+ }
+
+ @media (max-width: 1440px) {
+ .narrow {
+ max-width: 200px;
+ }
+ }
+
+ @media (max-width: 1107px) {
+ .narrow {
+ max-width: 170px;
+ }
+ }
+
+ @media (max-width: 991px) {
+ .narrow {
+ max-width: unset;
+ }
+
+ .info-button {
+ display: none;
+ }
+ }
+}
diff --git a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.spec.ts b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.spec.ts
index f30c66b53..b28da30bb 100644
--- a/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.spec.ts
+++ b/src/app/portal/components/science-politics/figures/figure-filters/figure-filters.component.spec.ts
@@ -1,37 +1,36 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatChipsModule } from '@angular/material/chips';
-import { Router } from '@angular/router';
-import { FigureFiltersComponent } from './figure-filters.component';
-
-describe('FigureFiltersComponent', () => {
- let component: FigureFiltersComponent;
- let fixture: ComponentFixture
+
+
+
+
+
+
+ {{ item.label }}
+
+
+
+
+
+ selector: 'app-list-item',
+ template: `
;
- let autoSuggestService: AutosuggestService;
- let searchService: SearchService;
- let activatedRouteStub: ActivatedRoute;
-
- beforeEach(() => {
+import {
+ TestBed,
+ ComponentFixture,
+ fakeAsync,
+ tick,
+} from '@angular/core/testing';
+import { SearchService } from '@portal/services/search.service';
+import { ActivatedRoute } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { WINDOW_PROVIDERS } from '@shared/services/window.service';
+import { ActivatedRouteStub } from 'src/testing/activated-route-stub';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { AppConfigService } from '@shared/services/app-config-service.service';
+import { AppConfigServiceMock } from '@portal/services/search.service.spec';
+import { MatMenuModule } from '@angular/material/menu';
+import { NO_ERRORS_SCHEMA, QueryList } from '@angular/core';
+import { SearchBarComponent } from './search-bar.component';
+import { AutosuggestService } from '@portal/services/autosuggest.service';
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+import response from 'src/testdata/autosuggest-response.json'
+import { MatDialogModule } from '@angular/material/dialog';
+
+describe('SearchBarComponent', () => {
+ const aggregations = response.aggregations
+ const hits = response.hits
+ const suggest = response.suggest
+
+ let searchBarComponent: SearchBarComponent;
+ let fixture: ComponentFixture;
+ let autoSuggestService: AutosuggestService;
+ let searchService: SearchService;
+ let activatedRouteStub: ActivatedRoute;
+
+ beforeEach(() => {
TestBed.configureTestingModule({
- declarations: [SearchBarComponent],
- providers: [
+ providers: [
SearchService,
AutosuggestService,
{ provide: ActivatedRoute, useValue: new ActivatedRouteStub() },
{ provide: AppConfigService, useClass: AppConfigServiceMock },
WINDOW_PROVIDERS,
- ],
- imports: [
+ ],
+ imports: [
HttpClientTestingModule,
RouterTestingModule,
MatMenuModule,
- MatDialogModule
- ],
- schemas: [NO_ERRORS_SCHEMA],
- });
-
- fixture = TestBed.createComponent(SearchBarComponent);
- searchBarComponent = fixture.componentInstance;
- autoSuggestService = TestBed.inject(AutosuggestService);
- activatedRouteStub = TestBed.inject(ActivatedRoute);
- searchService = TestBed.inject(SearchService);
- });
-
- it('should be created', () => {
- expect(searchBarComponent).toBeDefined();
- });
-
- it('should change search target', () => {
- searchBarComponent.changeTarget({ value: 'name' });
- expect(searchBarComponent.selectedTarget).toBe('name');
-
- searchBarComponent.changeTarget({ value: 'all' });
- expect(searchBarComponent.selectedTarget).toBe(null);
-
- searchBarComponent.changeTarget({ value: 'title' });
- expect(searchBarComponent.selectedTarget).toBe('title');
- });
-
- it('should reset search', () => {
- searchBarComponent.searchInput.nativeElement.value = 'test';
- searchBarComponent.selectedTarget = 'test';
- expect(searchBarComponent.searchInput.nativeElement.value).toBe('test');
-
- // Needed for term length check
- searchBarComponent.searchService.searchTerm = 'test';
-
- searchBarComponent.resetSearch();
- expect(searchBarComponent.selectedTarget).toBeFalsy();
- expect(searchBarComponent.searchInput.nativeElement.value).toBeFalsy();
- });
-
- it('autosuggest response should be valid', fakeAsync(() => {
- // Spy for autosuggest service search to return mock response
- spyOn(autoSuggestService, 'search').and.returnValue(
- of({ aggregations, hits, suggest }).pipe(delay(1))
- );
-
- // ngOnInit
- fixture.detectChanges();
- tick(1);
-
- // subscription
- fixture.detectChanges();
- tick(1);
-
- // Init values
- searchBarComponent.queryField.setValue('');
- searchBarComponent.fireAutoSuggest();
- searchBarComponent.queryField.setValue('tes');
-
- // Tick over the debounce time of 1000
- tick(1001);
-
- // Example check
- expect(
- searchBarComponent.autoSuggestResponse[0].hits.hits[0]._source
- .publicationName
- ).toBe('Eksaktit testit testissä:Fisher, Barnard ja Boschloo');
-
- // Check completion
- expect(searchBarComponent.completion).toBe('tesla');
- }));
-
- // Check completion
- it('should return correct completion', () => {
- // Test case
- searchBarComponent.autoSuggestResponse = [
- {
- suggest: {
- mySuggestions: [{ options: [{ text: '3-legged-person' }] }],
- },
- },
- ];
-
- searchBarComponent.searchInput.nativeElement.value = 'legge';
- searchBarComponent.getCompletion();
-
- expect(searchBarComponent.completion).toBe('d-person');
- });
-
- // Check keydown after completion
- it('should empty completion and add it to searchInput', () => {
- searchBarComponent.completion = 'test-case';
- searchBarComponent.searchInput.nativeElement.value = 'complete ';
-
- // Init keyManager required for onKeydown
- searchBarComponent.items = new QueryList();
- searchBarComponent.ngAfterViewInit();
-
- searchBarComponent.onKeydown({ keyCode: 39 });
-
- // Expect completion to be moved to search input
- expect(searchBarComponent.searchInput.nativeElement.value).toBe(
- 'complete test-case'
- );
- expect(searchBarComponent.completion).toBe('');
- });
-
- // Check new input
- it('newInput should update search service input', () => {
- // Init values
- let term;
- const newTerm = 'test-term';
- searchBarComponent.searchInput.nativeElement.value = newTerm;
-
- // Check that term is initially empty
- searchService.currentInput.subscribe((val) => (term = val));
- expect(term).toBeFalsy();
-
- // Call new input
- searchBarComponent.newInput(undefined, undefined);
- // Get search service input
- searchService.currentInput.subscribe((val) => (term = val));
-
- // Check that input matches
- expect(term).toBe(newTerm);
- });
-});
+ MatDialogModule,
+ SearchBarComponent
+ ],
+ schemas: [NO_ERRORS_SCHEMA],
+});
+
+ fixture = TestBed.createComponent(SearchBarComponent);
+ searchBarComponent = fixture.componentInstance;
+ autoSuggestService = TestBed.inject(AutosuggestService);
+ activatedRouteStub = TestBed.inject(ActivatedRoute);
+ searchService = TestBed.inject(SearchService);
+ });
+
+ it('should be created', () => {
+ expect(searchBarComponent).toBeDefined();
+ });
+
+ it('should change search target', () => {
+ searchBarComponent.changeTarget({ value: 'name' });
+ expect(searchBarComponent.selectedTarget).toBe('name');
+
+ searchBarComponent.changeTarget({ value: 'all' });
+ expect(searchBarComponent.selectedTarget).toBe(null);
+
+ searchBarComponent.changeTarget({ value: 'title' });
+ expect(searchBarComponent.selectedTarget).toBe('title');
+ });
+
+ it('should reset search', () => {
+ searchBarComponent.searchInput.nativeElement.value = 'test';
+ searchBarComponent.selectedTarget = 'test';
+ expect(searchBarComponent.searchInput.nativeElement.value).toBe('test');
+
+ // Needed for term length check
+ searchBarComponent.searchService.searchTerm = 'test';
+
+ searchBarComponent.resetSearch();
+ expect(searchBarComponent.selectedTarget).toBeFalsy();
+ expect(searchBarComponent.searchInput.nativeElement.value).toBeFalsy();
+ });
+
+ it('autosuggest response should be valid', fakeAsync(() => {
+ // Spy for autosuggest service search to return mock response
+ spyOn(autoSuggestService, 'search').and.returnValue(
+ of({ aggregations, hits, suggest }).pipe(delay(1))
+ );
+
+ // ngOnInit
+ fixture.detectChanges();
+ tick(1);
+
+ // subscription
+ fixture.detectChanges();
+ tick(1);
+
+ // Init values
+ searchBarComponent.queryField.setValue('');
+ searchBarComponent.fireAutoSuggest();
+ searchBarComponent.queryField.setValue('tes');
+
+ // Tick over the debounce time of 1000
+ tick(1001);
+
+ // Example check
+ expect(
+ searchBarComponent.autoSuggestResponse[0].hits.hits[0]._source
+ .publicationName
+ ).toBe('Eksaktit testit testissä:Fisher, Barnard ja Boschloo');
+
+ // Check completion
+ expect(searchBarComponent.completion).toBe('tesla');
+ }));
+
+ // Check completion
+ it('should return correct completion', () => {
+ // Test case
+ searchBarComponent.autoSuggestResponse = [
+ {
+ suggest: {
+ mySuggestions: [{ options: [{ text: '3-legged-person' }] }],
+ },
+ },
+ ];
+
+ searchBarComponent.searchInput.nativeElement.value = 'legge';
+ searchBarComponent.getCompletion();
+
+ expect(searchBarComponent.completion).toBe('d-person');
+ });
+
+ // Check keydown after completion
+ it('should empty completion and add it to searchInput', () => {
+ searchBarComponent.completion = 'test-case';
+ searchBarComponent.searchInput.nativeElement.value = 'complete ';
+
+ // Init keyManager required for onKeydown
+ searchBarComponent.items = new QueryList();
+ searchBarComponent.ngAfterViewInit();
+
+ searchBarComponent.onKeydown({ keyCode: 39 });
+
+ // Expect completion to be moved to search input
+ expect(searchBarComponent.searchInput.nativeElement.value).toBe(
+ 'complete test-case'
+ );
+ expect(searchBarComponent.completion).toBe('');
+ });
+
+ // Check new input
+ it('newInput should update search service input', () => {
+ // Init values
+ let term;
+ const newTerm = 'test-term';
+ searchBarComponent.searchInput.nativeElement.value = newTerm;
+
+ // Check that term is initially empty
+ searchService.currentInput.subscribe((val) => (term = val));
+ expect(term).toBeFalsy();
+
+ // Call new input
+ searchBarComponent.newInput(undefined, undefined);
+ // Get search service input
+ searchService.currentInput.subscribe((val) => (term = val));
+
+ // Check that input matches
+ expect(term).toBe(newTerm);
+ });
+});
diff --git a/src/app/portal/components/search-bar/search-bar.component.ts b/src/app/portal/components/search-bar/search-bar.component.ts
index 7fd5ac400..c54de7d33 100644
--- a/src/app/portal/components/search-bar/search-bar.component.ts
+++ b/src/app/portal/components/search-bar/search-bar.component.ts
@@ -20,13 +20,13 @@ import {
LOCALE_ID,
OnDestroy,
} from '@angular/core';
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT, isPlatformBrowser, NgIf, NgFor, NgStyle, NgClass, AsyncPipe } from '@angular/common';
import { SearchService } from '@portal/services/search.service';
import { SortService } from '@portal/services/sort.service';
import { AutosuggestService } from '@portal/services/autosuggest.service';
import { TabChangeService } from '@portal/services/tab-change.service';
-import { UntypedFormControl } from '@angular/forms';
-import { Router, ActivatedRoute } from '@angular/router';
+import { UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Router, ActivatedRoute, RouterLink } from '@angular/router';
import { Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { SingleItemService } from '@portal/services/single-item.service';
@@ -38,13 +38,38 @@ import { FilterService } from '@portal/services/filters/filter.service';
import { faTimes } from '@fortawesome/free-solid-svg-icons';
import { StaticDataService } from '@portal/services/static-data.service';
import { AppSettingsService } from '@shared/services/app-settings.service';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatMenuTrigger, MatMenu, MatMenuItem } from '@angular/material/menu';
+import { HighlightSearchPipe } from '../../pipes/highlight.pipe';
+import { NotificationBannerComponent } from '../../../shared/components/notification-banner/notification-banner.component';
+import { MatProgressSpinner } from '@angular/material/progress-spinner';
+import { ClickOutsideDirective } from '../../../shared/directives/click-outside.directive';
+import { MatButton } from '@angular/material/button';
@Component({
- selector: 'app-search-bar',
- templateUrl: './search-bar.component.html',
- styleUrls: ['./search-bar.component.scss'],
- encapsulation: ViewEncapsulation.None,
+ selector: 'app-search-bar',
+ templateUrl: './search-bar.component.html',
+ styleUrls: ['./search-bar.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ FormsModule,
+ MatButton,
+ MatMenuTrigger,
+ NgIf,
+ MatMenu,
+ NgFor,
+ MatMenuItem,
+ ReactiveFormsModule,
+ NgStyle,
+ ClickOutsideDirective,
+ NgClass,
+ MatProgressSpinner,
+ ListItemComponent,
+ RouterLink,
+ NotificationBannerComponent,
+ AsyncPipe,
+ HighlightSearchPipe,
+ ],
})
export class SearchBarComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('searchTargetMenuTrigger') searchTargetMenuTrigger: MatMenuTrigger;
diff --git a/src/app/portal/components/service-info/service-info.component.scss-theme.scss b/src/app/portal/components/service-info/service-info.component.scss-theme.scss
index 1d56e9b52..040d810ad 100644
--- a/src/app/portal/components/service-info/service-info.component.scss-theme.scss
+++ b/src/app/portal/components/service-info/service-info.component.scss-theme.scss
@@ -1,8 +1,8 @@
-@import '@angular/material/theming';
-
-@mixin app-service-info-theme($theme) {
- $primary: map-get($theme, primary);
-
- app-service-info {
- }
-}
+@use 'migration' as *;
+
+@mixin app-service-info-theme($theme) {
+ $primary: map-get($theme, primary);
+
+ app-service-info {
+ }
+}
diff --git a/src/app/portal/components/service-info/service-info.component.ts b/src/app/portal/components/service-info/service-info.component.ts
index dc29026b0..0956c8429 100644
--- a/src/app/portal/components/service-info/service-info.component.ts
+++ b/src/app/portal/components/service-info/service-info.component.ts
@@ -1,170 +1,192 @@
-import {
- Component,
- OnInit,
- Inject,
- LOCALE_ID,
- AfterViewInit,
- ViewChild,
- ElementRef,
- OnDestroy,
- PLATFORM_ID,
- ViewEncapsulation,
- ChangeDetectorRef,
- TemplateRef
-} from '@angular/core';
-import { faInfo } from '@fortawesome/free-solid-svg-icons';
-import { TabChangeService } from 'src/app/portal/services/tab-change.service';
-import { DOCUMENT, isPlatformBrowser, Location, ViewportScroller } from '@angular/common';
-import { UtilityService } from 'src/app/shared/services/utility.service';
-import MetaTags from 'src/assets/static-data/meta-tags.json';
-import { ActivatedRoute} from '@angular/router';
-import { AppSettingsService } from '@shared/services/app-settings.service';
+import {
+ Component,
+ OnInit,
+ Inject,
+ LOCALE_ID,
+ AfterViewInit,
+ ViewChild,
+ ElementRef,
+ OnDestroy,
+ PLATFORM_ID,
+ ViewEncapsulation,
+ ChangeDetectorRef,
+ TemplateRef
+} from '@angular/core';
+import { faInfo } from '@fortawesome/free-solid-svg-icons';
+import { TabChangeService } from 'src/app/portal/services/tab-change.service';
+import { DOCUMENT, isPlatformBrowser, Location, ViewportScroller, NgFor, NgIf } from '@angular/common';
+import { UtilityService } from 'src/app/shared/services/utility.service';
+import MetaTags from 'src/assets/static-data/meta-tags.json';
+import { ActivatedRoute} from '@angular/router';
+import { AppSettingsService } from '@shared/services/app-settings.service';
import { Subscription } from 'rxjs';
-
+import { SanitizeHtmlPipe } from '../../../shared/pipes/sanitize-html.pipe';
+import { DialogComponent } from '../../../shared/components/dialog/dialog.component';
+import { ReviewComponent } from '../../../shared/components/review/review.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } from '@angular/material/expansion';
+import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
+import { BannerDividerComponent } from '../../../shared/components/banner-divider/banner-divider.component';
+
@Component({
- selector: 'app-service-info',
- templateUrl: './service-info.component.html',
- styleUrls: ['./service-info.component.scss'],
- encapsulation: ViewEncapsulation.None,
-})
-export class ServiceInfoComponent implements OnInit, AfterViewInit, OnDestroy {
- faInfo = faInfo;
-
- @ViewChild('mainFocus') mainFocus: ElementRef;
- @ViewChild('reviewDialog') reviewDialog: TemplateRef;
- focusSub: Subscription;
- title: string;
- openedIdx: any;
- currentLocale: string;
- routeSub: Subscription;
-
- private metaTags = MetaTags.serviceInfo;
- private commonTags = MetaTags.common;
- content: any[];
- showDialog: boolean;
-
- sections = [
- { header: $localize`:@@serviceInfoHeader:Tietoa palvelusta`, items: [] },
- { header: $localize`:@@faq:Usein kysytyt kysymykset`, items: [] },
- ];
-
- constructor(
- private scroller: ViewportScroller,
- @Inject(LOCALE_ID) protected localeId: string,
- private tabChangeService: TabChangeService,
- private location: Location,
- private utilityService: UtilityService,
- private route: ActivatedRoute,
- @Inject(DOCUMENT) private document: any,
- @Inject(PLATFORM_ID) private platformId: object,
- private cdr: ChangeDetectorRef,
- private appSettingsService: AppSettingsService
- ) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- }
-
- ngOnInit(): void {
- this.routeSub = this.route.fragment.subscribe((fragment: string) => {
- this.openedIdx = fragment;
- this.scrollToId(fragment);
- });
-
- // Get page data. Data is passed with resolver in router
- const pageData = this.route.snapshot.data.pages;
-
- // Set Service info content
- this.sections[0].items = pageData.filter((el) =>
- el.id.includes('service-info')
- );
-
- // Set FAQ content
- this.sections[1].items = pageData.filter((el) => el.id.includes('faq'));
-
- this.utilityService.addMeta(
- this.metaTags['title' + this.currentLocale],
- this.metaTags['description' + this.currentLocale],
- this.commonTags['imgAlt' + this.currentLocale]
- );
-
- switch (this.localeId) {
- case 'fi': {
- this.setTitle('Tietoa palvelusta - Tiedejatutkimus.fi');
- break;
- }
- case 'en': {
- this.setTitle('Service info - Research.fi');
- break;
- }
- case 'sv': {
- this.setTitle('Information om tjänsten - Forskning.fi');
- break;
- }
- }
- // Hide skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(false);
-
- this.title = this.getTitle();
- //this.openedIdx = this.location.path(true).split('#')[1];
- }
-
- setTitle(title: string) {
- this.utilityService.setTitle(title);
- }
-
- getTitle() {
- return this.utilityService.getTitle().split('-').shift().trim();
- }
-
- ngAfterViewInit() {
- this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
- (target) => {
- if (target === 'main-link') {
- this.mainFocus.nativeElement.focus();
- }
- }
- );
-
- // Add review toggle onclick functionality to corresponding link
- if (isPlatformBrowser(this.platformId)) {
- const reviewLink = this.document.getElementById('toggle-review');
- if (reviewLink) {
- reviewLink.setAttribute('href', 'javascript:void(0)');
- reviewLink.addEventListener('click', (evt: Event) =>
- this.toggleReview()
- );
- }
- }
- }
-
- scrollToId(id: string) {
- setTimeout(() => {
- this.scroller.scrollToAnchor(id);
- }, 10);
- }
-
- toggleReview() {
- this.showDialog = !this.showDialog;
- }
-
- open(id: string) {
- this.openedIdx = id;
- // Timeout because by default open() is executed before close()
- setTimeout(() => {
- this.location.replaceState(this.location.path() + '#' + id);
- }, 1);
- }
-
- close(id: string) {
- if (this.openedIdx === id) this.openedIdx = '';
- this.location.replaceState(this.location.path());
- this.cdr.detectChanges();
- }
-
- ngOnDestroy() {
- // Reset skip to input - skip-link
- this.tabChangeService.toggleSkipToInput(true);
- this.tabChangeService.targetFocus('');
- this.focusSub?.unsubscribe();
- this.routeSub?.unsubscribe();
- }
-}
+ selector: 'app-service-info',
+ templateUrl: './service-info.component.html',
+ styleUrls: ['./service-info.component.scss'],
+ encapsulation: ViewEncapsulation.None,
+ standalone: true,
+ imports: [
+ BannerDividerComponent,
+ BreadcrumbComponent,
+ MatAccordion,
+ NgFor,
+ MatExpansionPanel,
+ MatExpansionPanelHeader,
+ MatExpansionPanelTitle,
+ FontAwesomeModule,
+ NgIf,
+ ReviewComponent,
+ DialogComponent,
+ SanitizeHtmlPipe,
+ ],
+})
+export class ServiceInfoComponent implements OnInit, AfterViewInit, OnDestroy {
+ faInfo = faInfo;
+
+ @ViewChild('mainFocus') mainFocus: ElementRef;
+ @ViewChild('reviewDialog') reviewDialog: TemplateRef;
+ focusSub: Subscription;
+ title: string;
+ openedIdx: any;
+ currentLocale: string;
+ routeSub: Subscription;
+
+ private metaTags = MetaTags.serviceInfo;
+ private commonTags = MetaTags.common;
+ content: any[];
+ showDialog: boolean;
+
+ sections = [
+ { header: $localize`:@@serviceInfoHeader:Tietoa palvelusta`, items: [] },
+ { header: $localize`:@@faq:Usein kysytyt kysymykset`, items: [] },
+ ];
+
+ constructor(
+ private scroller: ViewportScroller,
+ @Inject(LOCALE_ID) protected localeId: string,
+ private tabChangeService: TabChangeService,
+ private location: Location,
+ private utilityService: UtilityService,
+ private route: ActivatedRoute,
+ @Inject(DOCUMENT) private document: any,
+ @Inject(PLATFORM_ID) private platformId: object,
+ private cdr: ChangeDetectorRef,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ }
+
+ ngOnInit(): void {
+ this.routeSub = this.route.fragment.subscribe((fragment: string) => {
+ this.openedIdx = fragment;
+ this.scrollToId(fragment);
+ });
+
+ // Get page data. Data is passed with resolver in router
+ const pageData = this.route.snapshot.data.pages;
+
+ // Set Service info content
+ this.sections[0].items = pageData.filter((el) =>
+ el.id.includes('service-info')
+ );
+
+ // Set FAQ content
+ this.sections[1].items = pageData.filter((el) => el.id.includes('faq'));
+
+ this.utilityService.addMeta(
+ this.metaTags['title' + this.currentLocale],
+ this.metaTags['description' + this.currentLocale],
+ this.commonTags['imgAlt' + this.currentLocale]
+ );
+
+ switch (this.localeId) {
+ case 'fi': {
+ this.setTitle('Tietoa palvelusta - Tiedejatutkimus.fi');
+ break;
+ }
+ case 'en': {
+ this.setTitle('Service info - Research.fi');
+ break;
+ }
+ case 'sv': {
+ this.setTitle('Information om tjänsten - Forskning.fi');
+ break;
+ }
+ }
+ // Hide skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(false);
+
+ this.title = this.getTitle();
+ //this.openedIdx = this.location.path(true).split('#')[1];
+ }
+
+ setTitle(title: string) {
+ this.utilityService.setTitle(title);
+ }
+
+ getTitle() {
+ return this.utilityService.getTitle().split('-').shift().trim();
+ }
+
+ ngAfterViewInit() {
+ this.focusSub = this.tabChangeService.currentFocusTarget.subscribe(
+ (target) => {
+ if (target === 'main-link') {
+ this.mainFocus.nativeElement.focus();
+ }
+ }
+ );
+
+ // Add review toggle onclick functionality to corresponding link
+ if (isPlatformBrowser(this.platformId)) {
+ const reviewLink = this.document.getElementById('toggle-review');
+ if (reviewLink) {
+ reviewLink.setAttribute('href', 'javascript:void(0)');
+ reviewLink.addEventListener('click', (evt: Event) =>
+ this.toggleReview()
+ );
+ }
+ }
+ }
+
+ scrollToId(id: string) {
+ setTimeout(() => {
+ this.scroller.scrollToAnchor(id);
+ }, 10);
+ }
+
+ toggleReview() {
+ this.showDialog = !this.showDialog;
+ }
+
+ open(id: string) {
+ this.openedIdx = id;
+ // Timeout because by default open() is executed before close()
+ setTimeout(() => {
+ this.location.replaceState(this.location.path() + '#' + id);
+ }, 1);
+ }
+
+ close(id: string) {
+ if (this.openedIdx === id) this.openedIdx = '';
+ this.location.replaceState(this.location.path());
+ this.cdr.detectChanges();
+ }
+
+ ngOnDestroy() {
+ // Reset skip to input - skip-link
+ this.tabChangeService.toggleSkipToInput(true);
+ this.tabChangeService.targetFocus('');
+ this.focusSub?.unsubscribe();
+ this.routeSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/single/related-links/related-links.component.ts b/src/app/portal/components/single/related-links/related-links.component.ts
index 227ce0ab6..1d601efd1 100644
--- a/src/app/portal/components/single/related-links/related-links.component.ts
+++ b/src/app/portal/components/single/related-links/related-links.component.ts
@@ -1,144 +1,144 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import { SingleItemService } from '../../../services/single-item.service';
-import {
- ActivatedRoute,
- Router,
- UrlTree,
- UrlSegmentGroup,
- PRIMARY_OUTLET,
- UrlSegment,
-} from '@angular/router';
-import { AppSettingsService } from '@shared/services/app-settings.service';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnInit, Input, OnDestroy } from '@angular/core';
+import { SingleItemService } from '../../../services/single-item.service';
+import { ActivatedRoute, Router, UrlTree, UrlSegmentGroup, PRIMARY_OUTLET, UrlSegment, RouterLink } from '@angular/router';
+import { AppSettingsService } from '@shared/services/app-settings.service';
import { Subscription } from 'rxjs';
-
+import { NgFor, NgIf } from '@angular/common';
+
@Component({
- selector: 'app-related-links',
- templateUrl: './related-links.component.html',
- styleUrls: ['./related-links.component.scss'],
-})
-export class RelatedLinksComponent implements OnInit, OnDestroy {
- @Input() id: any;
- @Input() filter: string;
- @Input() relatedData: any;
-
- relatedList = [
- {
- label: $localize`:@@publications:Julkaisut`,
- tab: 'publications',
- disabled: true,
- },
- { label: $localize`:@@authors:Tutkijat`, tab: 'persons', disabled: true },
- { label: $localize`:@@fundings:Hankkeet`, tab: 'fundings', disabled: true },
- {
- label: $localize`:@@datasets:Aineistot`,
- tab: 'datasets',
- disabled: true,
- },
- {
- label: $localize`:@@infrastructures:Infrastruktuurit`,
- tab: 'infrastructures',
- disabled: true,
- },
- {
- label: $localize`:@@otherResearchActivities:Muut tutkimusaktiviteetit`,
- tab: '',
- disabled: true,
- },
- {
- label: $localize`:@@organizations:Organisaatiot`,
- tab: 'organizations',
- disabled: true,
- },
- ];
-
- docCountData: any;
- currentParent: string;
- routeSub: Subscription;
- dataSub: Subscription;
- currentLocale: string;
- queryParams: any;
-
- constructor(
- private singleService: SingleItemService,
- private route: ActivatedRoute,
- private router: Router,
- private appSettingsService: AppSettingsService
- ) {
- this.currentLocale = this.appSettingsService.capitalizedLocale;
- this.docCountData = [];
- }
-
- ngOnInit(): void {
- // Subscribe to route params, get current parent from current url
- this.routeSub = this.route.params.subscribe(() => {
- const currentUrl = this.router.url;
- const tree: UrlTree = this.router.parseUrl(currentUrl);
- const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
- const s: UrlSegment[] = g.segments;
- this.currentParent = s[1].path + 's';
- this.relatedList = this.relatedList.filter(
- (item) => item.tab !== this.currentParent
- );
- });
-
- // Uncomment setRelated method call when developing
- if (this.relatedData) {
- // this.setRelated();
- } else {
- if (this.id) {
- this.getDocCounts(this.id);
- }
- }
- }
-
- setRelated() {
- this.queryParams = {};
- if (this.relatedData?.organizations) {
- this.docCountData.organizations = {
- doc_count: this.relatedData.organizations.length,
- };
- this.relatedList.map(
- (item) =>
- (item.disabled =
- this.docCountData[item.tab]?.doc_count > 0 ? false : true)
- );
-
- // Set query params
- Object.assign(this.queryParams, {
- organization: this.relatedData.organizations,
- });
- }
- }
-
- // Get doc counts with single service getCount method, assign to to docCountData and show in appropriate counts in template
- getDocCounts(id: string) {
- this.queryParams = { [this.filter]: this.id };
- this.dataSub = this.singleService
- .getCount(this.currentParent, id, this.relatedData)
- .subscribe((data) => {
- // TODO: Remove check for currentParent
- this.docCountData = this.currentParent === 'organizations' ? data : [];
- if (this.docCountData.aggregations) {
- this.docCountData = this.docCountData?.aggregations?._index.buckets;
- // Set related list item to disabled to false if matching item has docs
- this.relatedList.map(
- (item) =>
- (item.disabled =
- this.docCountData[item.tab]?.doc_count > 0 ? false : true)
- );
- }
- });
- }
-
- ngOnDestroy() {
- this.routeSub?.unsubscribe();
- this.dataSub?.unsubscribe();
- }
-}
+ selector: 'app-related-links',
+ templateUrl: './related-links.component.html',
+ styleUrls: ['./related-links.component.scss'],
+ standalone: true,
+ imports: [
+ NgFor,
+ NgIf,
+ RouterLink,
+ ],
+})
+export class RelatedLinksComponent implements OnInit, OnDestroy {
+ @Input() id: any;
+ @Input() filter: string;
+ @Input() relatedData: any;
+
+ relatedList = [
+ {
+ label: $localize`:@@publications:Julkaisut`,
+ tab: 'publications',
+ disabled: true,
+ },
+ { label: $localize`:@@authors:Tutkijat`, tab: 'persons', disabled: true },
+ { label: $localize`:@@fundings:Hankkeet`, tab: 'fundings', disabled: true },
+ {
+ label: $localize`:@@datasets:Aineistot`,
+ tab: 'datasets',
+ disabled: true,
+ },
+ {
+ label: $localize`:@@infrastructures:Infrastruktuurit`,
+ tab: 'infrastructures',
+ disabled: true,
+ },
+ {
+ label: $localize`:@@otherResearchActivities:Muut tutkimusaktiviteetit`,
+ tab: '',
+ disabled: true,
+ },
+ {
+ label: $localize`:@@organizations:Organisaatiot`,
+ tab: 'organizations',
+ disabled: true,
+ },
+ ];
+
+ docCountData: any;
+ currentParent: string;
+ routeSub: Subscription;
+ dataSub: Subscription;
+ currentLocale: string;
+ queryParams: any;
+
+ constructor(
+ private singleService: SingleItemService,
+ private route: ActivatedRoute,
+ private router: Router,
+ private appSettingsService: AppSettingsService
+ ) {
+ this.currentLocale = this.appSettingsService.capitalizedLocale;
+ this.docCountData = [];
+ }
+
+ ngOnInit(): void {
+ // Subscribe to route params, get current parent from current url
+ this.routeSub = this.route.params.subscribe(() => {
+ const currentUrl = this.router.url;
+ const tree: UrlTree = this.router.parseUrl(currentUrl);
+ const g: UrlSegmentGroup = tree.root.children[PRIMARY_OUTLET];
+ const s: UrlSegment[] = g.segments;
+ this.currentParent = s[1].path + 's';
+ this.relatedList = this.relatedList.filter(
+ (item) => item.tab !== this.currentParent
+ );
+ });
+
+ // Uncomment setRelated method call when developing
+ if (this.relatedData) {
+ // this.setRelated();
+ } else {
+ if (this.id) {
+ this.getDocCounts(this.id);
+ }
+ }
+ }
+
+ setRelated() {
+ this.queryParams = {};
+ if (this.relatedData?.organizations) {
+ this.docCountData.organizations = {
+ doc_count: this.relatedData.organizations.length,
+ };
+ this.relatedList.map(
+ (item) =>
+ (item.disabled =
+ this.docCountData[item.tab]?.doc_count > 0 ? false : true)
+ );
+
+ // Set query params
+ Object.assign(this.queryParams, {
+ organization: this.relatedData.organizations,
+ });
+ }
+ }
+
+ // Get doc counts with single service getCount method, assign to to docCountData and show in appropriate counts in template
+ getDocCounts(id: string) {
+ this.queryParams = { [this.filter]: this.id };
+ this.dataSub = this.singleService
+ .getCount(this.currentParent, id, this.relatedData)
+ .subscribe((data) => {
+ // TODO: Remove check for currentParent
+ this.docCountData = this.currentParent === 'organizations' ? data : [];
+ if (this.docCountData.aggregations) {
+ this.docCountData = this.docCountData?.aggregations?._index.buckets;
+ // Set related list item to disabled to false if matching item has docs
+ this.relatedList.map(
+ (item) =>
+ (item.disabled =
+ this.docCountData[item.tab]?.doc_count > 0 ? false : true)
+ );
+ }
+ });
+ }
+
+ ngOnDestroy() {
+ this.routeSub?.unsubscribe();
+ this.dataSub?.unsubscribe();
+ }
+}
diff --git a/src/app/portal/components/single/share/share.component.ts b/src/app/portal/components/single/share/share.component.ts
index f86e2abd6..291045e67 100644
--- a/src/app/portal/components/single/share/share.component.ts
+++ b/src/app/portal/components/single/share/share.component.ts
@@ -1,57 +1,61 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
-import { Component, OnInit, Inject, LOCALE_ID, Input, OnChanges } from '@angular/core';
-import { faCopy } from '@fortawesome/free-solid-svg-icons';
-import { MatSnackBar } from '@angular/material/snack-bar';
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
+import { Component, OnInit, Inject, LOCALE_ID, Input, OnChanges } from '@angular/core';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
+import { MatSnackBar } from '@angular/material/snack-bar';
import { DOCUMENT } from '@angular/common';
-
+import { CdkCopyToClipboard } from '@angular/cdk/clipboard';
+import { SecondaryButtonComponent } from '../../../../shared/components/buttons/secondary-button/secondary-button.component';
+
@Component({
- selector: 'app-share',
- templateUrl: './share.component.html',
- styleUrls: ['./share.component.scss'],
-})
-export class ShareComponent implements OnInit, OnChanges {
- @Input() big = true;
- @Input() id: string;
-
- faCopy = faCopy;
- currentUrl: string;
- message: string;
-
- copyLink = $localize`:@@copyLink:Kopioi linkki`;
-
- constructor(
- private snackBar: MatSnackBar,
- @Inject(DOCUMENT) private document: Document,
- @Inject(LOCALE_ID) protected localeId: string
- ) {}
-
- ngOnInit() {
- switch (this.localeId) {
- case 'en': {
- this.message = 'Link copied to clipboard';
- break;
- }
- case 'sv': {
- this.message = 'Länk kopierad till urklipp';
- break;
- }
- default: {
- this.message = 'Linkki kopioitu leikepöydälle';
- }
- }
- }
-
- ngOnChanges() {
- this.currentUrl = this.document.location.href;
- }
-
- openSnackBar() {
- this.snackBar.open(this.message);
- }
-}
+ selector: 'app-share',
+ templateUrl: './share.component.html',
+ styleUrls: ['./share.component.scss'],
+ standalone: true,
+ imports: [SecondaryButtonComponent, CdkCopyToClipboard],
+})
+export class ShareComponent implements OnInit, OnChanges {
+ @Input() big = true;
+ @Input() id: string;
+
+ faCopy = faCopy;
+ currentUrl: string;
+ message: string;
+
+ copyLink = $localize`:@@copyLink:Kopioi linkki`;
+
+ constructor(
+ private snackBar: MatSnackBar,
+ @Inject(DOCUMENT) private document: Document,
+ @Inject(LOCALE_ID) protected localeId: string
+ ) {}
+
+ ngOnInit() {
+ switch (this.localeId) {
+ case 'en': {
+ this.message = 'Link copied to clipboard';
+ break;
+ }
+ case 'sv': {
+ this.message = 'Länk kopierad till urklipp';
+ break;
+ }
+ default: {
+ this.message = 'Linkki kopioitu leikepöydälle';
+ }
+ }
+ }
+
+ ngOnChanges() {
+ this.currentUrl = this.document.location.href;
+ }
+
+ openSnackBar() {
+ this.snackBar.open(this.message);
+ }
+}
diff --git a/src/app/portal/components/single/single-dataset/dataset-author/dataset-author.component.ts b/src/app/portal/components/single/single-dataset/dataset-author/dataset-author.component.ts
index 897805b8a..e95e554c0 100644
--- a/src/app/portal/components/single/single-dataset/dataset-author/dataset-author.component.ts
+++ b/src/app/portal/components/single/single-dataset/dataset-author/dataset-author.component.ts
@@ -1,22 +1,30 @@
-// This file is part of the research.fi API service
-//
-// Copyright 2019 Ministry of Education and Culture, Finland
-//
-// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
-// :license: MIT
-
+// This file is part of the research.fi API service
+//
+// Copyright 2019 Ministry of Education and Culture, Finland
+//
+// :author: CSC - IT Center for Science Ltd., Espoo Finland servicedesk@csc.fi
+// :license: MIT
+
import { Component, Input, OnInit } from '@angular/core';
-
+import { OrcidComponent } from '../../../../../shared/components/orcid/orcid.component';
+import { NgIf, NgFor } from '@angular/common';
+
@Component({
- selector: 'app-dataset-author',
- templateUrl: './dataset-author.component.html',
- styleUrls: ['./dataset-author.component.scss'],
-})
-export class DatasetAuthorComponent implements OnInit {
- @Input() org: any;
- @Input() noLinks: boolean;
-
- constructor() {}
-
- ngOnInit(): void {}
-}
+ selector: 'app-dataset-author',
+ templateUrl: './dataset-author.component.html',
+ styleUrls: ['./dataset-author.component.scss'],
+ standalone: true,
+ imports: [
+ NgIf,
+ NgFor,
+ OrcidComponent,
+ ],
+})
+export class DatasetAuthorComponent implements OnInit {
+ @Input() org: any;
+ @Input() noLinks: boolean;
+
+ constructor() {}
+
+ ngOnInit(): void {}
+}
diff --git a/src/app/portal/components/single/single-dataset/single-dataset.component.html b/src/app/portal/components/single/single-dataset/single-dataset.component.html
index ae4021108..26dc3c283 100644
--- a/src/app/portal/components/single/single-dataset/single-dataset.component.html
+++ b/src/app/portal/components/single/single-dataset/single-dataset.component.html
@@ -337,7 +337,7 @@