searchPage.component: clear All (for filters) became an <a> tag | searchFilter.component: accordion removed - filters always open | browseStatistic.component: modal fixed for View more options | search.component + publication.component: added responsiveness in tabs | claimsByToken.component: added metadata information (description + title -> to be changed) - datatables' paging and column width with slightly better appearance

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@47314 d315682c-612b-4755-9ff5-7f18f6832af3

portal-2/src/app/claims/claimsByToken/claimsByToken.component.ts

@@ -10,6 +10,8 @@ import {ModalLoading} from '../../utils/modal/loading.component';
 import {Session} from '../../login/utils/helper.class';
 
 import {RouterHelper} from '../../utils/routerHelper.class';
+import { Meta} from '../../../angular2-meta';
+//import {DataTable} from "angular2-datatable";
 
 @Component({
     selector: 'claims-project-manager',
@@ -84,20 +86,20 @@ import {RouterHelper} from '../../utils/routerHelper.class';
           <thead>
              <tr>
                 <th><mfDefaultSorter [by]="sortByTitle1">Research Result</mfDefaultSorter></th>
-                <th class="uk-text-center"><mfDefaultSorter by="claim1.userMail">Claimed By</mfDefaultSorter></th>
+                <th class="uk-text-center"><mfDefaultSorter by="userMail">Claimed By</mfDefaultSorter></th>
                 <th class="uk-text-center"><mfDefaultSorter [by]="sortByClaimDate1">Claimed Date</mfDefaultSorter></th>
                 <th class="uk-text-center">Approve</th>
              </tr>
           </thead>
           <tbody>
               <tr class="uk-table-middle" *ngFor="let claim1 of mf1.data">
-                <td  class="uk-width-2-6" *ngIf="claim1.targetType != 'project'"><claim-entity [entity]="claim1.target" [type]="claim1.targetType" > </claim-entity></td>
+                <td  class="uk-width-2-5" *ngIf="claim1.targetType != 'project'"><claim-entity [entity]="claim1.target" [type]="claim1.targetType" > </claim-entity></td>
-                <td class="uk-width-1-6 uk-text-center" *ngIf="claim1.sourceType != 'project'"><claim-entity [entity]="claim1.source" [type]="claim1.sourceType" > </claim-entity></td>
+                <td class="uk-width-2-5 uk-text-center" *ngIf="claim1.sourceType != 'project'"><claim-entity [entity]="claim1.source" [type]="claim1.sourceType" > </claim-entity></td>
-                <td class="uk-width-1-6 uk-text-center">{{claim1.userMail}}</td>
+                <td class="uk-width-1-5 uk-text-center">{{claim1.userMail}}</td>
-                <td class="uk-width-1-6 uk-text-center">{{claim1.date}}</td>
+                <td class="uk-width-1-5 uk-text-center">{{claim1.date}}</td>
-                <td class="uk-width-1-6 uk-text-center">
+                <td class="uk-width-1-5 uk-text-center">
 
-                 <label>
+                  <label>
                     Yes <input [id]="claim1.id" type="checkbox" (click)="selectApprove(claim1.id,$event)"  [ngModel]="isSelectedRight(claim1.id)"/>
                   </label>
                   <label>
@@ -106,12 +108,14 @@ import {RouterHelper} from '../../utils/routerHelper.class';
                 </td>
               </tr>
           </tbody>
-          <tfoot>
+          <!--paging-no-load [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage" ></paging-no-load-->
-           <div>
+
-                <paging-no-load [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage"  (pageChange)="refreshTable(mf1, $event)"></paging-no-load>
+          <tfoot class="uk-child-width-1-1">
-            </div>
+            <!--paging-no-load class="uk-width-1-1" [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage"  (pageChange)="refreshTable(mf1, $event)"></paging-no-load-->
           </tfoot>
         </table>
+        <paging-no-load class="uk-float-right" [currentPage]="1" [totalResults]="pending_claims.length" [size]="rowsOnPage" (pageChange)="refreshTable(table1, $event)"></paging-no-load>
+
          </div>
 
         <h2> Already Curated Claims</h2>
@@ -191,10 +195,10 @@ import {RouterHelper} from '../../utils/routerHelper.class';
                 <!--td><button class="uk-button" (click)="editable.add(i)">Edit</button></td-->
               </tr>
           </tbody>
-            <tfoot>
+            <!--tfoot>
               <tr>
                 <td>
-                  <!--mfBootstrapPaginator></mfBootstrapPaginator-->
+                  <mfBootstrapPaginator></mfBootstrapPaginator>
                 </td>
                 <td></td>
                 <td></td>
@@ -204,8 +208,10 @@ import {RouterHelper} from '../../utils/routerHelper.class';
                   <paging-no-load [currentPage]="1" [totalResults]="curated_claims.length" [size]="rowsOnPage"  (pageChange)="refreshTable(mf2, $event)"> </paging-no-load>
                 </td>
               </tr>
-            </tfoot>
+            </tfoot-->
         </table>
+        <paging-no-load class="uk-float-right" [currentPage]="1" [totalResults]="curated_claims.length" [size]="rowsOnPage"  (pageChange)="refreshTable(table2, $event)"> </paging-no-load>
+
 
         </div>
 
@@ -237,13 +243,16 @@ export class ClaimsByTokenComponent {
   public rowsOnPage = 5;
   public sortOrder = "asc";
 
+  @ViewChild('mf1') table1: any;//DataTable;
+  @ViewChild('mf2') table2: any;//DataTable;
+
 
   @ViewChild (ModalSelect) selectModal : ModalSelect;
   @ViewChild (ModalLoading) loading : ModalLoading ;
 
   public routerHelper:RouterHelper = new RouterHelper();
 
-  constructor ( private route: ActivatedRoute, private _router:Router, private claimsByTokenService: ClaimsByTokenService ) {
+  constructor ( private route: ActivatedRoute, private _router:Router, private claimsByTokenService: ClaimsByTokenService, private _meta: Meta) {
 
   }
   ngOnInit() {
@@ -256,13 +265,15 @@ export class ClaimsByTokenComponent {
         //this.setMessageSelect("Please select your identity:");
         //this.setOptionsSelect(this.contact_person);
         this.validateJWTandToken();
+        this.updateTitle("Claims By Token");
+        this.updateDescription("");
       }
     );
   }
 
-refreshTable(mf:any, $event:any) {
+refreshTable(table:any, $event:any) {
-  mf.mfActivePage=$event.value;
+  table.mfActivePage=$event.value;
-  mf.setPage(mf.mfActivePage, this.rowsOnPage);
+  table.setPage(table.mfActivePage, this.rowsOnPage);
 }
 
 public sortByClaimDate1 = (claim: any) => {
@@ -424,4 +435,15 @@ public sortByTitle2= (claim: any) => {
       this.selectModal.options = options;
     }
   }
+
+  updateDescription(description:string){
+    this._meta.updateMeta("description", description);
+    this._meta.updateMeta("og:description", description);
+  }
+  updateTitle(title:string){
+    var _suffix ="| OpenAIRE";
+    var _title = ((title.length> 50 ) ?title.substring(0,50):title) + _suffix;
+    this._meta.setTitle(_title );
+    this._meta.updateMeta("og:title",_title);
+  }
 }

portal-2/src/app/landingPages/publication/publication.component.html

@@ -64,8 +64,8 @@
               <a  class="uk-float-right uk-button  uk-button-default" [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[articleId,'publication','result'])"   routerLinkActive="router-link-active" routerLink="/participate/direct-claim" > <span uk-icon="icon: link"></span> Links to research Results</a>
             </div>
 
-            <ul class="uk-tab" data-uk-switcher="{connect: '#tab-content'}">
+            <ul class="uk-tab uk-visible@xl" uk-tab="connect: #tab-content">
-                <li class="uk-active">
+                <li (click)="activeTab='References'">
                     <a>
                         References
                         <span *ngIf="publicationInfo.references == undefined" class="uk-badge uk-badge-notification">0</span>
@@ -74,7 +74,7 @@
                         </span>
                     </a>
                 </li>
-                <li>
+                <li (click)="activeTab='Related Research Results'">
                     <a>
                         Related Research Results
                         <span class="uk-badge uk-badge-notification">
@@ -82,7 +82,7 @@
                         </span>
                     </a>
                 </li>
-                <li>
+                <li (click)="activeTab='Similar Research Results'">
                     <a>
                         Similar Research Results
                         <span *ngIf="publicationInfo.similarResearchResults == undefined" class="uk-badge uk-badge-notification">0</span>
@@ -91,7 +91,7 @@
                         </span>
                     </a>
                 </li>
-                <li>
+                <li (click)="activeTab='Related Organizations'">
                     <a>
                         Related Organizations
                         <span *ngIf="publicationInfo.organizations == undefined" class="uk-badge uk-badge-notification">0</span>
@@ -100,26 +100,86 @@
                         </span>
                     </a>
                 </li>
-                <li *ngIf="publicationInfo.bioentities != undefined">
+                <li *ngIf="publicationInfo.bioentities != undefined" (click)="activeTab='Bioentities'">
                     <a>
                         Bioentities
                         <span class="uk-badge uk-badge-notification">{{bioentitiesNum}}</span>
                     </a>
                 </li>
-                <li *ngIf="publicationInfo.software != undefined">
+                <li *ngIf="publicationInfo.software != undefined" (click)="activeTab='Software'">
                     <a>
                         Software
                         <span class="uk-badge uk-badge-notification">{{publicationInfo.software.length}}</span>
                     </a>
                 </li>
-                <li>
+                <li (click)="metricsClicked=true; activeTab='Metrics'">
-                    <a (click)="metricsClicked=true;">
+                    <a>
                         Metrics
                         <i class="uk-icon-line-chart"></i>
                     </a>
                 </li>
             </ul>
 
+            <!--span uk-icon="icon: menu"></span> {{activeTab}}<-->
+            <button class="uk-button uk-button-default uk-hidden@xl" type="button">
+              <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">{{activeTab}}</span>
+            </button>
+
+            <ul id="toggle-small-tabs" class="uk-subnav uk-subnav-pill uk-dropdown uk-hidden@xl" uk-switcher="{connect: #tab-content}" uk-dropdown="mode: click" uk-toggle="target: #toggle-small-tabs">
+                <li (click)="activeTab='References'">
+                  <a>
+                    References
+                    <span *ngIf="publicationInfo.references == undefined" class="uk-badge uk-badge-notification">0</span>
+                    <span *ngIf="publicationInfo.references != undefined" class="uk-badge uk-badge-notification">
+                        {{publicationInfo.references.length}}
+                    </span>
+                  </a>
+                </li>
+                <li (click)="activeTab='Related Research Results'">
+                  <a>
+                    Related Research Results
+                    <span class="uk-badge uk-badge-notification">
+                        {{relatedResearchResultsNum}}
+                    </span>
+                  </a>
+                </li>
+                <li (click)="activeTab='Similar Research Results'">
+                  <a>
+                    Similar Research Results
+                    <span *ngIf="publicationInfo.similarResearchResults == undefined" class="uk-badge uk-badge-notification">0</span>
+                    <span *ngIf="publicationInfo.similarResearchResults != undefined" class="uk-badge uk-badge-notification">
+                        {{publicationInfo.similarResearchResults.length}}
+                    </span>
+                  </a>
+                </li>
+                <li (click)="activeTab='Related Organizations'">
+                  <a>
+                    Related Organizations
+                    <span *ngIf="publicationInfo.organizations == undefined" class="uk-badge uk-badge-notification">0</span>
+                    <span *ngIf="publicationInfo.organizations != undefined" class="uk-badge uk-badge-notification">
+                        {{publicationInfo.organizations.length}}
+                    </span>
+                  </a>
+                </li>
+                <li *ngIf="publicationInfo.bioentities != undefined" (click)="activeTab='Bioentities'">
+                  <a>
+                    Bioentities
+                    <span class="uk-badge uk-badge-notification">{{bioentitiesNum}}</span>
+                  </a>
+                </li>
+                <li *ngIf="publicationInfo.software != undefined" (click)="activeTab='Software'">
+                  <a>
+                    Software
+                    <span class="uk-badge uk-badge-notification">{{publicationInfo.software.length}}</span>
+                  </a>
+                </li>
+                <li (click)="metricsClicked=true; activeTab='Metrics'">
+                  <a>
+                    Metrics<i class="uk-icon-line-chart"></i>
+                  </a>
+                </li>
+            </ul>
+
             <ul id="tab-content" class="uk-switcher uk-margin custom-tab-content">
                 <li class="uk-animation-fade">
                     <div *ngIf="publicationInfo.references == undefined" class = "uk-alert  uk-alert-primary" >

portal-2/src/app/landingPages/publication/publication.component.ts

@@ -49,6 +49,8 @@ export class PublicationComponent {
   public errorMessage = "";
   public routerHelper:RouterHelper = new RouterHelper();
 
+  public activeTab: string = "References";
+
   constructor ( private element: ElementRef,
                 private _publicationService: PublicationService,
                 private route: ActivatedRoute, private _meta: Meta) { }
@@ -214,4 +216,5 @@ export class PublicationComponent {
       this._meta.setTitle(_title );
       this._meta.updateMeta("og:title",_title);
     }
+
 }

portal-2/src/app/searchPages/find/search.component.ts

@@ -40,7 +40,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
         </div>
         <div  class="   uk-margin-top uk-width-1-1">
 
-            <ul class=" uk-tab " uk-tab="connect: #searchtabs; animation: uk-animation-fade">
+            <ul class=" uk-tab uk-visible@m" uk-tab="connect: #searchtabs; animation: uk-animation-fade">
                     <li (click)="searchPublications()"  >
                        <a>
                            Publications
@@ -88,6 +88,55 @@ import {RouterHelper} from '../../utils/routerHelper.class';
 
                 </ul>
 
+                <button class="uk-button uk-button-default uk-hidden@m" type="button">
+                  <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">{{activeTab}}</span>
+                </button>
+
+                <ul id="toggle-small-tabs" class="uk-subnav uk-subnav-pill uk-dropdown uk-hidden@m" uk-switcher="{connect: #searchtabs; animation: uk-animation-fade}" uk-dropdown="mode: click" uk-toggle="target: #toggle-small-tabs">
+                    <li (click)="searchPublications()"  >
+                       <a>
+                           Publications
+                           <span *ngIf = "fetchPublications.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
+                           <span *ngIf = "fetchPublications.searchUtils.status != errorCodes.LOADING && keyword.length > 0"  class="uk-badge uk-badge-notification">{{((keyword.length > 0)? fetchPublications.searchUtils.totalResults :'')}}</span>
+                       </a>
+                   </li>
+                   <li (click)="searchDatasets()">
+                       <a>
+                           Datasets
+                           <span *ngIf = "fetchDatasets.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
+                           <span *ngIf = "fetchDatasets.searchUtils.status != errorCodes.LOADING && keyword.length > 0"  class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchDatasets.searchUtils.totalResults :'')}}</span>
+                       </a>
+                   </li>
+                   <li (click)="searchProjects()"  >
+                       <a>
+                           Projects
+                           <span *ngIf = "fetchProjects.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
+                           <span *ngIf = "fetchProjects.searchUtils.status != errorCodes.LOADING  && keyword.length > 0"  class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchProjects.searchUtils.totalResults :'')}}</span>
+                       </a>
+                   </li>
+                   <li (click)="searchDataProviders()" >
+                       <a>
+                           Data Providers
+                           <span *ngIf = "fetchDataproviders.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
+                           <span *ngIf = "fetchDataproviders.searchUtils.status != errorCodes.LOADING && keyword.length > 0"  class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchDataproviders.searchUtils.totalResults :'')}}</span>
+                       </a>
+                   </li>
+                   <li (click)="searchOrganizations()" >
+                       <a>
+                           Organizations
+                           <span *ngIf = "fetchOrganizations.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
+                           <span *ngIf = "fetchOrganizations.searchUtils.status != errorCodes.LOADING && keyword.length > 0"  class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchOrganizations.searchUtils.totalResults :'')}}</span>
+                       </a>
+                   </li>
+                   <li (click)="searchPeople()" >
+                       <a>
+                           People
+                           <span *ngIf = "fetchPeople.searchUtils.status == errorCodes.LOADING && keyword.length > 0" class="uk-icon-spinner uk-icon-spin"></span>
+                           <span *ngIf = "fetchPeople.searchUtils.status != errorCodes.LOADING && keyword.length > 0"  class="uk-badge uk-badge-notification"> {{((keyword.length > 0)? fetchPeople.searchUtils.totalResults :'')}}</span>
+                       </a>
+                   </li>
+                </ul>
+
                 <ul id="searchtabs" class="uk-switcher  uk-width-1-1 uk-margin-top custom-tab-content-large">
                      <li>
                       <div *ngIf = "keyword.length > 0" class ="uk-animation-fade">

portal-2/src/app/searchPages/searchUtils/browseStatistic.component.ts

@@ -24,7 +24,14 @@ import {RouterHelper} from '../../utils/routerHelper.class';
           <span class="filterName"><div title = "{{value.name}}">{{_formatName(value)}} </div></span> <span class="filterNumber" > ({{value.number}})</span></a>
         </li>
         <li *ngIf= " filter.values.length > 5  ">
-          <span  uk-toggle="target: #modal"><span class="uk-text-muted clickable">View more </span><a><span uk-icon="icon: triangle-right"></span></a></span>
+          <a href="#modal-{{filter.filterId}}" uk-toggle><span class="uk-text-muted">View more </span><span uk-icon="icon: triangle-right"></span></a>
+
+          <!--
+              uk-toggle="target: modal-"
+              uk-toggle='{"target": modal-}'>
+              uk-toggle target="modal-"
+          -->
+          <!--span uk-toggle='{"target": modal-}'><span class="uk-text-muted clickable">View more </span><a><span uk-icon="icon: triangle-right"></span></a></span-->
         </li>
       </ul>
       <ul *ngIf="filter.values.length > 0 && viewAll" class="uk-list uk-list-divider   browseFilters">
@@ -39,7 +46,7 @@ import {RouterHelper} from '../../utils/routerHelper.class';
 
 
       <!-- This is the modal -->
-      <div id="modal" uk-modal>
+      <div id="modal-{{filter.filterId}}" uk-modal>
         <div class="uk-modal-dialog uk-modal-body">
           <button class="uk-modal-close-default" type="button" uk-close></button>
 

portal-2/src/app/searchPages/searchUtils/searchFilter.component.ts

@@ -7,11 +7,11 @@ import {Open} from '../../utils/modal/open.component';
 @Component({
     selector: 'search-filter',
     template: `
-  <ul *ngIf= "filter.values.length >0" class = "uk-accordion uk-animation-fade"  uk-accordion="">
+  <ul *ngIf= "filter.values.length >0" class="uk-list">
     <li class="uk-open">
-        <h3  class="uk-accordion-title uk-margin-bottom-remove uk-margin-top">{{_formatTitle(filter.title,filter.values.length)}}
+        <h5  class="uk-margin-bottom-remove uk-margin-top">{{_formatTitle(filter.title,filter.values.length)}}
-        </h3>
+        </h5>
-        <div class="uk-accordion-content" data-wrapper="true" style="overflow:hidden;position:relative;" aria-expanded="false">
+        <div  aria-expanded="false">
           <div class="searchFilterBoxValues ">
             <div *ngFor = "let value of getSelectedValues(filter)"  class = "uk-animation-fade filterItem">
 

portal-2/src/app/searchPages/searchUtils/searchPage.component.ts

@@ -33,9 +33,12 @@ import {SearchFilterModalComponent} from './searchFilterModal.component';
                     </span>
                   </span>
                 </span>
-                <span>
+                <!--span>
                  Clear All
-                <a  (click)="clearFilters()"  class="uk-icon-button uk-text-right"><span uk-icon="icon: close"></span></a></span>
+                <a  (click)="clearFilters()"  class="uk-icon-button uk-text-right"><span uk-icon="icon: close"></span></a></span-->
+                <a (click)="clearFilters()">
+                 Clear All
+                </a>
               </div>
               <a *ngIf = "advancedSearchLink && advancedSearchLink.length > 0" routerLinkActive="router-link-active" class="uk-float-right" [routerLink]=advancedSearchLink >More search options <span uk-icon="icon: chevron-right"></span></a>
           </div>

portal-2/src/app/utils/properties/openaireProperties.ts

@@ -31,8 +31,10 @@ export class OpenaireProperties {
     private static metricsAPIURL = "https://beta.services.openaire.eu/usagestats/";
     private static framesAPIURL = "https://beta.openaire.eu/stats3/";
 
+    //private static loginAPIURL = "http://mpagasas.di.uoa.gr:8080/uoa-user-management-1.0.0-SNAPSHOT/api/users/authenticates";
     private static loginAPIURL = "http://scoobydoo.di.uoa.gr:8080/uoa-user-management-1.0.0-SNAPSHOT/api/users/authenticates";
 
+
     // public claimsAPIURL      = "http://rudie.di.uoa.gr:8080/dnet-openaire-connector-service-1.0.0-SNAPSHOT/rest/claimsService/"
     private static claimsAPIURL = "http://scoobydoo.di.uoa.gr:8080/dnet-openaire-connector-service-1.0.0-SNAPSHOT/rest/claimsService/";