2022-07-13 19:26:10 +02:00
< div page-content >
2023-03-15 10:56:28 +01:00
< div actions class = "uk-margin-top" >
< div class = "uk-section-xsmall" >
< div class = "uk-flex uk-flex-right@m uk-flex-center uk-flex-middle uk-grid uk-margin-top" uk-grid >
< div [ disabled ] = " showLoading " search-input class = "uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"
[searchControl]="filterForm" [expandable]="true" placeholder="Search Subjects" searchInputClass="outer">
< / div >
< div >
< button class = "uk-button uk-button-default uk-flex uk-flex-middle"
[disabled]="showLoading" [class.uk-disabled]="showLoading"
(click)="editAllSubjects()"
uk-tooltip="title:< div > < div class = 'uk-margin-small-bottom uk-text-bold' > Add or edit subjects< / div > All the research results associated to the subjects specified here will be automatically linked to the community dashboard in the next run of OpenAIRE workflows.< / div > ">
< span > Add/Edit Subjects< / span >
< / button >
< / div >
< / div >
< / div >
< / div >
2022-07-13 19:26:10 +02:00
< div inner >
2023-03-15 10:56:28 +01:00
< div class = "uk-section uk-section-small uk-position-relative" style = "min-height: 60vh" >
< div * ngIf = "showLoading" class = "uk-position-center" >
2022-07-04 14:13:33 +02:00
< loading > < / loading >
2021-05-19 13:40:29 +02:00
< / div >
2023-03-15 10:56:28 +01:00
< div * ngIf = "!showLoading" >
< div * ngIf = "displayedSubjects?.length == 0 && displayedSdg?.length == 0 && displayedFos?.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
< div > No subjects< / div >
< / div >
< div * ngIf = "displayedSubjects?.length > 0 || displayedSdg?.length > 0 || displayedFos?.length > 0" >
< ul uk-tab class = "uk-tab uk-margin-bottom uk-flex uk-flex-center uk-flex-left@m" >
< li class = "uk-active" * ngIf = "displayedAllSubjects?.length" ( click ) = " groupSubjects ( displayedAllSubjects , ' all ' ) " >
< a > All ({{displayedAllSubjects.length}})< / a >
< / li >
< li * ngIf = "displayedSubjects?.length" ( click ) = " groupSubjects ( displayedSubjects , ' freeText ' ) " >
< a > Free Text ({{displayedSubjects.length}})< / a >
< / li >
< li * ngIf = "displayedSdg?.length" ( click ) = " groupSubjects ( displayedSdg , ' sdg ' ) " >
< a > SDGs ({{displayedSdg.length}})< / a >
< / li >
< li * ngIf = "displayedFos?.length" ( click ) = " groupSubjects ( displayedFos , ' fos ' ) " >
< a > Fields of Science ({{displayedFos.length}})< / a >
< / li >
< / ul >
< ul class = "uk-switcher" >
< li * ngIf = "displayedAllSubjects?.length" >
< ng-container * ngIf = "groupedAllSubjects?.length" >
< div >
< ul class = "uk-nav uk-nav-default uk-flex uk-flex-wrap" >
< li * ngFor = "let item of groupedAllSubjects; let i = index;" class = "uk-margin-right" [ class . uk-margin-left ] = " i ! = 0 "
[class]="indexAll == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
< a class = "uk-padding-remove" > {{item.group}}< / a >
< / li >
< / ul >
< / div >
<!-- View for 'All' -->
< div * ngIf = "indexAll == 0 && groupedAllSubjects.length > 1" class = "uk-margin-large-top uk-grid uk-child-width-1-4@m" uk-grid >
< div * ngFor = "let item of groupedAllSubjects.slice(1); let i = index;" >
2022-07-04 14:13:33 +02:00
< div >
2023-03-15 10:56:28 +01:00
< h6 > {{item.group}}< / h6 >
< div * ngFor = "let subItem of item.data.slice(0, subjectsLimit)" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< div * ngIf = "item.data.length > subjectsLimit" >
< a ( click ) = " changeDisplayedSubjects ( i + 1 , item ) " class = "view-more-less-link" >
View all
2022-07-04 14:13:33 +02:00
< / a >
< / div >
< / div >
2023-03-15 10:56:28 +01:00
< / div >
< / div >
<!-- View for a single group -->
< div * ngIf = "indexAll != 0 || groupedAllSubjects.length == 1" class = "uk-margin-large-top" >
< div >
2022-07-04 14:13:33 +02:00
< div >
2023-03-15 10:56:28 +01:00
< h6 > {{groupedAllSubjects[indexAll].group}}< / h6 >
< ng-container * ngIf = "subjectsColumns?.length == 0; else elseBlock" >
< div * ngFor = "let subItem of groupedAllSubjects[indexAll].data" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< / ng-container >
< ng-template # elseBlock >
< div class = "uk-grid uk-child-width-1-4@m" uk-grid >
< div * ngFor = "let group of subjectsColumns" >
< div * ngFor = "let subItem of group" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< / div >
< / div >
< / ng-template >
< / div >
< / div >
< / div >
< / ng-container >
< / li >
< li * ngIf = "displayedSubjects?.length" >
< ng-container * ngIf = "groupedSubjects?.length" >
< div >
< ul class = "uk-nav uk-nav-default uk-flex uk-flex-wrap" >
< li * ngFor = "let item of groupedSubjects; let i = index;" class = "uk-margin-right" [ class . uk-margin-left ] = " i ! = 0 "
[class]="indexSubjects == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
< a class = "uk-padding-remove" > {{item.group}}< / a >
< / li >
< / ul >
< / div >
<!-- View for 'All' -->
< div * ngIf = "indexSubjects == 0 && groupedSubjects.length > 1" class = "uk-margin-large-top uk-grid uk-child-width-1-4@m" uk-grid >
< div * ngFor = "let item of groupedSubjects.slice(1); let i = index;" >
< div >
< h6 > {{item.group}}< / h6 >
< div * ngFor = "let subItem of item.data.slice(0, subjectsLimit)" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2022-07-04 14:13:33 +02:00
< / div >
2023-03-15 10:56:28 +01:00
< div * ngIf = "item.data.length > subjectsLimit" >
< a ( click ) = " changeDisplayedSubjects ( i + 1 , item ) " class = "view-more-less-link" >
View all
< / a >
< / div >
< / div >
< / div >
< / div >
<!-- View for a single group -->
< div * ngIf = "indexSubjects != 0 || groupedSubjects.length == 1" class = "uk-margin-large-top" >
< div >
< div >
< h6 > {{groupedSubjects[indexSubjects]?.group}}< / h6 >
< ng-container * ngIf = "subjectsColumns?.length == 0; else elseBlock" >
< div * ngFor = "let subItem of groupedSubjects[indexSubjects]?.data" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< / ng-container >
< ng-template # elseBlock >
< div class = "uk-grid uk-child-width-1-4@m" uk-grid >
< div * ngFor = "let group of subjectsColumns" >
< div * ngFor = "let subItem of group" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< / div >
< / div >
< / ng-template >
2022-07-04 14:13:33 +02:00
< / div >
2018-10-30 16:31:16 +01:00
< / div >
2023-03-15 10:56:28 +01:00
< / div >
< / ng-container >
< / li >
< li * ngIf = "displayedSdg?.length" >
< ng-container * ngIf = "groupedSdg?.length" >
< div >
< ul class = "uk-nav uk-nav-default uk-flex uk-flex-wrap" >
< li * ngFor = "let item of groupedSdg; let i = index;" class = "uk-margin-right" [ class . uk-margin-left ] = " i ! = 0 "
[class]="indexSdg == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
< a class = "uk-padding-remove" > {{item.group}}< / a >
< / li >
< / ul >
< / div >
<!-- View for 'All' -->
< div * ngIf = "indexSdg == 0 && groupedSdg.length > 1" class = "uk-margin-large-top uk-grid uk-child-width-1-4@m" uk-grid >
< div * ngFor = "let item of groupedSdg.slice(1); let i = index;" >
< div >
< h6 > {{item.group}}< / h6 >
< div * ngFor = "let subItem of item.data.slice(0, subjectsLimit)" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< div * ngIf = "item.data.length > subjectsLimit" >
< a ( click ) = " changeDisplayedSubjects ( i + 1 , item ) " class = "view-more-less-link" >
View all
< / a >
< / div >
< / div >
< / div >
< / div >
<!-- View for a single group -->
< div * ngIf = "indexSdg != 0 || groupedSdg.length == 1" class = "uk-margin-large-top" >
< div >
< div >
< h6 > {{groupedSdg[indexSdg].group}}< / h6 >
< ng-container * ngIf = "subjectsColumns?.length == 0; else elseBlock" >
< div * ngFor = "let subItem of groupedSdg[indexSdg].data" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< / ng-container >
< ng-template # elseBlock >
< div class = "uk-grid uk-child-width-1-4@m" uk-grid >
< div * ngFor = "let group of subjectsColumns" >
< div * ngFor = "let subItem of group" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< / div >
< / div >
< / ng-template >
< / div >
< / div >
< / div >
< / ng-container >
< / li >
< li * ngIf = "displayedFos?.length" >
< ng-container * ngIf = "groupedFos?.length" >
< div >
< ul class = "uk-nav uk-nav-default uk-flex uk-flex-wrap" >
< li * ngFor = "let item of groupedFos; let i = index;" class = "uk-margin-right" [ class . uk-margin-left ] = " i ! = 0 "
[class]="indexFos == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
< a class = "uk-padding-remove" > {{item.group}}< / a >
< / li >
< / ul >
< / div >
<!-- View for 'All' -->
< div * ngIf = "indexFos == 0 && groupedFos.length > 1" class = "uk-margin-large-top uk-grid uk-child-width-1-4@m" uk-grid >
< div * ngFor = "let item of groupedFos.slice(1); let i = index;" >
< div >
< h6 > {{item.group}}< / h6 >
< div * ngFor = "let subItem of item.data.slice(0, subjectsLimit)" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< div * ngIf = "item.data.length > subjectsLimit" >
< a ( click ) = " changeDisplayedSubjects ( i + 1 , item ) " class = "view-more-less-link" >
View all
< / a >
< / div >
< / div >
< / div >
< / div >
<!-- View for a single group -->
< div * ngIf = "indexFos != 0 || groupedFos.length == 1" class = "uk-margin-large-top" >
< div >
< div >
< h6 > {{groupedFos[indexFos].group}}< / h6 >
< ng-container * ngIf = "subjectsColumns?.length == 0; else elseBlock" >
< div * ngFor = "let subItem of groupedFos[indexFos].data" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< / ng-container >
< ng-template # elseBlock >
< div class = "uk-grid uk-child-width-1-4@m" uk-grid >
< div * ngFor = "let group of subjectsColumns" >
< div * ngFor = "let subItem of group" class = "uk-margin-small-bottom" >
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
< / div >
< / div >
< / div >
< / ng-template >
< / div >
< / div >
< / div >
< / ng-container >
< / li >
< / ul >
< / div >
< / div >
< / div >
2018-10-30 16:31:16 +01:00
< / div >
< / div >
2023-03-13 20:26:31 +01:00
< fs-modal # fsModal classBody = "uk-container-large" ( okEmitter ) = " saveAllSubjects ( ) " [ okButtonDisabled ] = " ! hasChanges & & ! sdgSelection . hasChanges & & ! fosSelection . hasChanges " >
2023-03-15 10:56:28 +01:00
< div >
< ul uk-tab # modalTabs class = "uk-tab uk-margin-top uk-margin-large-bottom uk-flex uk-flex-center uk-flex-left@m" >
2023-03-15 11:03:16 +01:00
< li class = "uk-active" >
< a > Free Text ({{displayedSubjects.length}})< / a >
2023-03-15 10:56:28 +01:00
< / li >
2023-03-15 11:03:16 +01:00
< li >
2023-03-15 10:56:28 +01:00
< a > SDGs ({{sdgSelection.getSelectedSubjects().length}})< span * ngIf = "sdgSelection.hasChanges" > *< / span > < / a >
< / li >
2023-03-15 11:03:16 +01:00
< li >
2023-03-15 10:56:28 +01:00
< a > Fields of Science ({{fosSelection.getSelectedSubjects().length}})< span * ngIf = "fosSelection.hasChanges" > *< / span > < / a >
< / li >
< / ul >
< ul class = "uk-switcher" >
< li * ngIf = "subjectsForm" >
< div input [ type ] = " ' chips ' " [ formInput ] = " subjectsForm " [ inputClass ] = " ' flat small ' " [ extendEnter ] = " onEnter "
[separators]="[',', 'enter']" [visibleChips]="3" class="uk-width-1-1 uk-width-xlarge@m"
[placeholder]="{static: true, label: 'Type subjects as free text keywords'}">
< div tools class = "uk-flex uk-flex-right" >
< button ( click ) = " addSubjectsIntoList ( ) " class = "uk-button uk-button-link uk-margin-xsmall-left uk-margin-right" > add< / button >
< / div >
< div note class = "uk-text-xsmall" > Separate subjects with commas< / div >
< / div >
< div class = "uk-margin-large-top" >
< span * ngFor = "let subject of displayedSubjects; let i = index;"
class="uk-label uk-label-primary uk-flex-inline uk-flex-middle uk-margin-right uk-margin-bottom">
< span class = "uk-margin-small-right uk-text-truncate" > {{subject}}< / span >
< button ( click ) = " removeSubjectFromList ( i ) " class = "uk-close uk-icon" >
< icon name = "close" flex = "true" ratio = "0.7" > < / icon >
< / button >
< / span >
< / div >
< / li >
< li >
< sdg-selection # sdgSelection [ subjects ] = " displayedSdg " [ isFeedback ] = " false " > < / sdg-selection >
< / li >
< li >
< fos-selection # fosSelection [ subjects ] = " displayedFos " [ inModal ] = " true " > < / fos-selection >
< / li >
< / ul >
2021-05-19 13:40:29 +02:00
< / div >
2023-03-15 10:56:28 +01:00
< / fs-modal >