2022-07-13 19:26:10 +02:00
< div page-content >
2023-03-09 15:30:13 +01:00
< div actions class = "uk-margin-top" >
2022-07-13 19:26:10 +02:00
< 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"
2023-03-09 15:30:13 +01:00
(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 >
2022-07-13 19:26:10 +02:00
< / button >
< / div >
2022-07-04 14:13:33 +02:00
< / div >
< / div >
2022-07-13 19:26:10 +02:00
< / div >
< div inner >
2022-07-04 14:13:33 +02:00
< div class = "uk-section uk-section-small uk-position-relative" style = "min-height: 60vh" >
< div * ngIf = "showLoading" class = "uk-position-center" >
< loading > < / loading >
2021-05-19 13:40:29 +02:00
< / div >
2022-07-04 14:13:33 +02:00
< div * ngIf = "!showLoading" >
2023-03-09 15:30:13 +01:00
<!-- TODO: Alter following if statement to match new functionality -->
2022-07-04 14:13:33 +02:00
< div * ngIf = "community.subjects.length == 0"
class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
2022-07-11 17:48:24 +02:00
< div > No subjects
< span * ngIf = "originalSubjects.length == 0; else: notFound" > for {{community.shortTitle}}< / span >
< ng-template # notFound > found< / ng-template >
< / div >
2022-07-04 14:13:33 +02:00
< / div >
< div * ngIf = "community.subjects.length > 0" >
2023-03-09 15:30:13 +01:00
< 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" >
< 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 >
< 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]="index == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
< a class = "uk-padding-remove" > {{item.group}}< / a >
< / li >
< / ul >
< / div >
<!-- View for 'All' -->
< div * ngIf = "index == 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;" >
< div >
< h6 > {{item.group}}< / h6 >
< div * ngFor = "let subItem of item.data.slice(0, subjectsLimit)" class = "uk-margin-small-bottom" >
2023-03-13 20:26:31 +01:00
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2023-03-09 15:30:13 +01:00
< / 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 = "index != 0 || groupedAllSubjects.length == 1" class = "uk-margin-large-top" >
< div >
< div >
< h6 > {{groupedAllSubjects[index].group}}< / h6 >
< ng-container * ngIf = "subjectsColumns?.length == 0; else elseBlock" >
< div * ngFor = "let subItem of groupedAllSubjects[index].data" class = "uk-margin-small-bottom" >
2023-03-13 20:26:31 +01:00
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2023-03-09 15:30:13 +01:00
< / 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" >
2023-03-13 20:26:31 +01:00
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2023-03-09 15:30:13 +01:00
< / div >
< / div >
< / div >
< / ng-template >
< / div >
< / div >
< / div >
< / ng-container >
< / li >
< li >
< 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]="index == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
< a class = "uk-padding-remove" > {{item.group}}< / a >
< / li >
< / ul >
< / div >
<!-- View for 'All' -->
< div * ngIf = "index == 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" >
2023-03-13 20:26:31 +01:00
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2023-03-09 15:30:13 +01:00
< / 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 = "index != 0 || groupedSubjects.length == 1" class = "uk-margin-large-top" >
< div >
< div >
< h6 > {{groupedSubjects[index].group}}< / h6 >
< ng-container * ngIf = "subjectsColumns?.length == 0; else elseBlock" >
< div * ngFor = "let subItem of groupedSubjects[index].data" class = "uk-margin-small-bottom" >
2023-03-13 20:26:31 +01:00
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2023-03-09 15:30:13 +01:00
< / 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" >
2023-03-13 20:26:31 +01:00
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2023-03-09 15:30:13 +01:00
< / div >
< / div >
< / div >
< / ng-template >
< / div >
< / div >
< / div >
< / ng-container >
< / li >
< li >
< 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]="index == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
< a class = "uk-padding-remove" > {{item.group}}< / a >
< / li >
< / ul >
< / div >
<!-- View for 'All' -->
< div * ngIf = "index == 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" >
2023-03-13 20:26:31 +01:00
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2023-03-09 15:30:13 +01:00
< / 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 = "index != 0 || groupedSdg.length == 1" class = "uk-margin-large-top" >
< div >
< div >
< h6 > {{groupedSdg[index].group}}< / h6 >
< ng-container * ngIf = "subjectsColumns?.length == 0; else elseBlock" >
< div * ngFor = "let subItem of groupedSdg[index].data" class = "uk-margin-small-bottom" >
2023-03-13 20:26:31 +01:00
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2023-03-09 15:30:13 +01:00
< / 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" >
2023-03-13 20:26:31 +01:00
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2023-03-09 15:30:13 +01:00
< / div >
< / div >
< / div >
< / ng-template >
< / div >
< / div >
< / div >
< / ng-container >
< / li >
< li >
< 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]="index == i ? 'uk-active':''" (click)="changeDisplayedSubjects(i, item)">
< a class = "uk-padding-remove" > {{item.group}}< / a >
< / li >
< / ul >
< / div >
<!-- View for 'All' -->
< div * ngIf = "index == 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 = "index != 0 || groupedFos.length == 1" class = "uk-margin-large-top" >
< div >
< div >
< h6 > {{groupedFos[index].group}}< / h6 >
< ng-container * ngIf = "subjectsColumns?.length == 0; else elseBlock" >
< div * ngFor = "let subItem of groupedFos[index].data" class = "uk-margin-small-bottom" >
2023-03-13 20:26:31 +01:00
< span [ attr . uk-tooltip ] = " subItem . length > maxCharacters ? 'cls: uk-active' : 'cls: uk-invisible'" [title]="subItem">
{{subItem.length > maxCharacters ? subItem.substring(0,maxCharacters)+'...' : subItem}}
< / span >
2023-03-09 15:30:13 +01:00
< / 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 *ngIf="community.subjects.length > 0">
2022-07-04 14:13:33 +02:00
< no-load-paging * ngIf = "community.subjects.length > 0" [ type ] = " ' Subjects ' "
[page]="page" [pageSize]="size" (pageChange)="updatePage($event)"
[totalResults]="community.subjects.length">
< / no-load-paging >
< div class = "uk-grid uk-grid-large uk-grid-match uk-child-width-1-1 uk-child-width-1-2@m uk-margin-top uk-margin-bottom" uk-grid >
< div * ngFor = 'let subject of currentPage; let i = index;' >
< div class = "uk-card uk-card-default" >
< div class = "uk-card-body" >
< h6 uk-tooltip = "title:All the research results associated to this subjects will be automatically linked to the community dashboard."
class="uk-display-inline-block">
{{subject}}
< / h6 >
< / div >
< div class = "uk-card-footer uk-padding-remove-vertical" >
< div class = "uk-grid uk-grid-small uk-flex-nowrap uk-grid-divider uk-flex-right" uk-grid >
< div >
< div class = "uk-padding-small uk-padding-remove-horizontal" >
< a ( click ) = " editSubject ( subject ) "
class="uk-button uk-button-link uk-flex uk-flex-middle">
< icon name = "edit" [ flex ] = " true " > < / icon >
< span class = "uk-margin-xsmall-left" > Edit< / span >
< / a >
< / div >
< / div >
< div >
< div class = "uk-padding-small uk-padding-remove-horizontal" >
< button class = "uk-button uk-button-link uk-flex uk-flex-middle"
(click)="removeModalOpen(subject, i)">
< icon name = "delete" [ flex ] = " true " > < / icon >
< span class = "uk-margin-xsmall-left" > Delete< / span >
< / button >
< / div >
< / div >
2018-10-30 16:31:16 +01:00
< / div >
2022-07-04 14:13:33 +02:00
< / div >
< / div >
< / div >
< / div >
2022-07-04 20:45:20 +02:00
< div class = "uk-margin-small-top" >
< paging-no-load [ currentPage ] = " page " [ totalResults ] = " community . subjects . length " [ size ] = " size "
2023-03-09 15:30:13 +01:00
(pageChange)="updatePage($event)" customClasses="uk-flex-right@m uk-flex-center">
2022-07-04 20:45:20 +02:00
< / paging-no-load >
< / div >
2023-03-09 15:30:13 +01:00
< / div > -->
2022-07-04 14:13:33 +02:00
< / div >
< / div >
2018-10-30 16:31:16 +01:00
< / div >
< / div >
2023-03-13 20:26:31 +01:00
<!-- <modal - alert #deleteModal (alertOutput)="saveSubjects()" [overflowBody]="false" classTitle="uk - background - primary uk - light"></modal - alert> -->
< fs-modal # fsModal classBody = "uk-container-large" ( okEmitter ) = " saveAllSubjects ( ) " [ okButtonDisabled ] = " ! hasChanges & & ! sdgSelection . hasChanges & & ! fosSelection . hasChanges " >
2023-03-09 15:30:13 +01:00
< div >
2023-03-13 20:26:31 +01:00
< 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-09 15:30:13 +01:00
< li class = "uk-active" >
< a > Free Text ({{displayedSubjects.length}})< / a >
< / li >
< li >
2023-03-13 20:26:31 +01:00
< a > SDGs ({{sdgSelection.getSelectedSubjects().length}})< / a >
2023-03-09 15:30:13 +01:00
< / li >
< li >
2023-03-13 20:26:31 +01:00
< a > Fields of Science ({{fosSelection.getSelectedSubjects().length}})< / a >
2023-03-09 15:30:13 +01:00
< / li >
< / ul >
< ul class = "uk-switcher" >
< li * ngIf = "subjectsForm" >
2023-03-13 20:26:31 +01:00
< div input [ type ] = " ' chips ' " [ formInput ] = " subjectsForm " [ inputClass ] = " ' flat small ' " [ extendEnter ] = " onEnter "
[separators]="[',', 'enter']" [visibleChips]="3" class="uk-width-1-1 uk-width-xlarge@m"
2023-03-09 15:30:13 +01:00
[placeholder]="{static: true, label: 'Type subjects as free text keywords'}">
2023-03-13 20:26:31 +01:00
< 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 >
2023-03-09 15:30:13 +01:00
< div note class = "uk-text-xsmall" > Separate subjects with commas< / div >
2022-07-04 14:13:33 +02:00
< / div >
2023-03-09 15:30:13 +01:00
<!-- <form *ngIf="myForm">
< div class = "uk-margin-top uk-flex-center uk-flex uk-margin-medium-bottom" >
< a * ngIf = "!isEditModal" ( click ) = " addSubjectInForm ( ) " >
< button class = "uk-button uk-button-primary uk-flex uk-flex-middle" >
< icon name = "add" [ flex ] = " true " > < / icon >
< span class = "uk-margin-xsmall-left" > Add Subject< / span >
< / button >
< / a >
< / div >
< div class = "uk-grid uk-child-width-1-1" uk-grid >
< div * ngFor = " let control of myForm.controls; index as i" class = "uk-flex uk-flex-middle" >
< div input [ formInput ] = " myForm . controls [ i ] " type = "text"
placeholder="Type subjects as free text keywords" class="uk-width-expand">< / div >
< div * ngIf = "!isEditModal" class = "uk-width-auto uk-flex uk-flex-center uk-margin-left" >
< button class = "uk-close uk-icon" [ class . uk-invisible ] = " myForm . length = == 1 "
(click)="removeSubjectInForm(i)">
< icon name = "close" [ flex ] = " true " [ ratio ] = " 1 . 5 " > < / icon >
< / button >
< / div >
< / div >
< / div >
< / form > -->
< 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 >
2023-03-13 20:26:31 +01:00
< fos-selection # fosSelection [ subjects ] = " displayedFos " [ inModal ] = " true " > < / fos-selection >
2023-03-09 15:30:13 +01:00
< / li >
< / ul >
< / div >
2022-07-04 14:13:33 +02:00
< / fs-modal >
2021-05-19 13:40:29 +02:00
<!-- <modal - alert #enablePageModal (alertOutput)="enablePage()">
< div class = "uk-padding uk-padding-remove-horizontal" >
This information will be visible in < span class = "uk-text-bold" > Subjects page< / span > of Research Community
Dashboard, which is < span class = "uk-text-bold" > disabled< / span > .
Do you want to < span class = "uk-text-bold" > enable< / span > it now?
< / div >
< / modal-alert > -->