add subjects as a new tab in resultLanding

This commit is contained in:
Alex Martzios 2023-04-06 12:46:50 +03:00
parent e1b5f4a46d
commit d6edc17fee
3 changed files with 46 additions and 21 deletions

View File

@ -26,7 +26,7 @@ import {properties} from "../../../../environments/environment";
</ng-container>
<ng-container *ngIf="!viewAllClassifiedSubjects && ((subjects && subjects.length > 0) || (otherSubjects && otherSubjects.size > 0))">
<div *ngIf="!viewAllSubjects" class="uk-text-meta uk-margin-small-bottom" [class.uk-margin-medium-top]="classifiedSubjects && classifiedSubjects.size > 0">
Subjects
Keywords
</div>
<ng-container *ngTemplateOutlet="subjects_template; context: {customClasses: (isMobile && viewAllSubjects) ? '' : 'multi-line-ellipsis lines-2', id: 'content'}"></ng-container>
<div *ngIf="isLarge && !viewAllSubjects" class="uk-text-right uk-margin-small-top">
@ -215,7 +215,7 @@ export class ShowSubjectsComponent {
if(this.isMobile) {
this.viewAllSubjects = true;
this.viewAllClicked.emit({
subtitle: 'Subjects',
subtitle: 'Keywords',
id: 'subjects'
});
} else {

View File

@ -286,6 +286,9 @@
<!-- <showTitle *ngIf="stickyHeader" [titleName]="resultLandingInfo.title" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>-->
<my-tabs (selectedActiveTab)="onSelectActiveTab($event)" [offsetForSticky]="offset" [(isSticky)]="stickyHeader">
<my-tab tabTitle="Summary" [tabId]="'summary'" [active]="true"></my-tab>
<my-tab *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects"
[tabTitle]="'Subjects'" [tabId]="'subjects'">
</my-tab>
<my-tab *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0"
[tabTitle]="'References'" [tabId]="'references'"
[tabNumber]="resultLandingInfo.references.length">
@ -312,6 +315,9 @@
<ng-container>
<ng-container *ngTemplateOutlet="summary_content"></ng-container>
</ng-container>
<ng-container *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects">
<ng-container *ngTemplateOutlet="subjects_content"></ng-container>
</ng-container>
<ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<ng-container *ngTemplateOutlet="references_content"></ng-container>
</ng-container>
@ -512,6 +518,13 @@
</div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(subjectsFsModal, 'Subjects'); onSelectActiveTab('subjects')">
<span>Subjects</span>
<icon name="chevron_right" [ratio]="1.5" [flex]="true"></icon>
</div>
<hr>
</ng-container>
<ng-container *ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<div class="clickable uk-flex uk-flex-middle uk-flex-between" (click)="openFsModal(referencesFsModal, 'References'); onSelectActiveTab('references')">
<span>References</span>
@ -660,6 +673,13 @@
<ng-container *ngTemplateOutlet="summary_content"></ng-container>
</fs-modal>
<fs-modal #subjectsFsModal classTitle="uk-tile-default uk-border-bottom" (cancelEmitter)="cancelSubjectsClicked()"
*ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects">
<ng-container *ngIf="activeTab == 'subjects'">
<ng-container *ngTemplateOutlet="subjects_content"></ng-container>
</ng-container>
</fs-modal>
<fs-modal #referencesFsModal classTitle="uk-tile-default uk-border-bottom"
*ngIf="resultLandingInfo.references && resultLandingInfo.references.length > 0">
<ng-container *ngTemplateOutlet="references_content"></ng-container>
@ -854,20 +874,6 @@
{{resultLandingInfo.countries.join(", ")}}
</div>
</div>
<div *ngIf="(resultLandingInfo.subjects || resultLandingInfo.otherSubjects || resultLandingInfo.classifiedSubjects)
&& (!viewAllMobile || viewAllMobile == 'subjects' || viewAllMobile == 'classifiedSubjects')
&& (!isMobile || tabMobile=='Summary')"
class="uk-margin-medium-bottom">
<showSubjects [subjects]="resultLandingInfo.subjects"
[otherSubjects]="resultLandingInfo.otherSubjects"
[classifiedSubjects]="resultLandingInfo.classifiedSubjects"
[eoscSubjects]="resultLandingInfo.eoscSubjects"
[isMobile]="isMobile">
[viewAllSubjects]="viewAllMobile=='subjects'"
[viewAllClassifiedSubjects]="viewAllMobile=='classifiedSubjects'"
(viewAllClicked)="viewAllSubjectsMobileClicked($event)">
</showSubjects>
</div>
<!-- Related Organizations-->
<div *ngIf="resultLandingInfo.organizations && resultLandingInfo.organizations.length > 0 && (!viewAllMobile || viewAllMobile == 'organizations')"
class="uk-margin-medium-bottom uk-width-2-3@m">
@ -890,6 +896,20 @@
</div>
</ng-template>
<ng-template #subjects_content>
<div id="subjects" class="landing-section landing-section-height-auto uk-padding uk-padding-remove-horizontal">
<showSubjects [subjects]="resultLandingInfo.subjects"
[otherSubjects]="resultLandingInfo.otherSubjects"
[classifiedSubjects]="resultLandingInfo.classifiedSubjects"
[eoscSubjects]="resultLandingInfo.eoscSubjects"
[isMobile]="isMobile"
[viewAllSubjects]="viewAllMobile=='subjects'"
[viewAllClassifiedSubjects]="viewAllMobile=='classifiedSubjects'"
(viewAllClicked)="viewAllSubjectsMobileClicked($event)">
</showSubjects>
</div>
</ng-template>
<ng-template #references_content>
<div id="references" class="landing-section uk-padding uk-padding-remove-horizontal">
<results-and-pages *ngIf="resultLandingInfo.references.length > pageSize" [type]="'references'"

View File

@ -156,6 +156,7 @@ export class ResultLandingComponent {
public isMobile: boolean = false;
// Full screen modals for small screens (mobile)
@ViewChild('summaryFsModal') summaryFsModal: FullScreenModalComponent;
@ViewChild('subjectsFsModal') subjectsFsModal: FullScreenModalComponent;
@ViewChild('referencesFsModal') referencesFsModal: FullScreenModalComponent;
@ViewChild('relatedResearchFsModal') relatedResearchFsModal: FullScreenModalComponent;
@ViewChild('bioentitiesFsModal') bioentitiesFsModal: FullScreenModalComponent;
@ -577,8 +578,6 @@ export class ResultLandingComponent {
public get hasPrimaryInfo(): boolean {
return !!this.resultLandingInfo && (
(!!this.resultLandingInfo.description && this.resultLandingInfo.description.length > 0)
|| !!this.resultLandingInfo.subjects
|| (this.resultLandingInfo.classifiedSubjects && this.resultLandingInfo.classifiedSubjects.size > 0)
|| (!!this.resultLandingInfo.organizations && this.resultLandingInfo.organizations.length > 0));
}
@ -927,9 +926,9 @@ export class ResultLandingComponent {
}
}
public viewAllSubjectsMobileClicked(event: string) {
this.summaryFsModal.title += " - "+event['subtitle'];
this.summaryFsModal.back = true;
public viewAllSubjectsMobileClicked(event) {
this.subjectsFsModal.title += " - "+event['subtitle'];
this.subjectsFsModal.back = true;
this.viewAllMobile = event['id'];
}
@ -947,6 +946,12 @@ export class ResultLandingComponent {
this.viewAllMobile = "";
}
public cancelSubjectsClicked() {
this.subjectsFsModal.title = "Subjects";
this.subjectsFsModal.back = false;
this.viewAllMobile = "";
}
public openOrganizationsModal() {
this.organizationsModal.cancelButton = false;
this.organizationsModal.okButton = false;