/ - Diff - D-Net - D-Net project tracking tool

« Previous | Next »

Revision 52373

Added by Argiro Kokogiannaki over 6 years ago

Metrics: add short version option
Dataprovider Landing: change tabs to accordion, changes dataProviderInfo and tabs info to work better with accordion view

                       [_dataproviderService]="_dataproviderService">
                 </tabs-->
                 <div *ngIf="showTabs">
                     <ul *ngIf="dataProviderInfo.tabs != undefined" class="uk-tab uk-visible@xl" uk-tab="connect: #tab-content">
                     <!--ul *ngIf="dataProviderInfo.tabs != undefined" class="uk-tab uk-visible@xl" uk-tab="connect: #tab-content">
                         <li *ngFor="let tab of dataProviderInfo.tabs; let i=index" id="{{dataProviderInfo.tabs[i].content}}"
                             [class]="activeTab==tab.name?'uk-active':''">
                             <a
-...
                                     </span>
                             </a>
                         </li>
                     </ul-->
                     <ul class="custom-accordion" uk-accordion *ngIf="dataProviderInfo.tabs2 != undefined">
                         <li *ngIf="dataProviderInfo.tabs2.indexOf('Publications') != -1" (click)="search('publicationsTab', 1, 10); activeTab='Publications'">
                             <a class="uk-accordion-title" href="#">Publications
                               <span class="uk-badge uk-badge-notification">
                                   {{fetchPublications.searchUtils.totalResults | number}}
                               </span>
                             </a>
                             <div class="uk-accordion-content">
                               <publicationsTab *ngIf="activeTab=='Publications'"
                                                [paramsForSearchLink]="paramsForSearchLink"
                                                [fetchPublications] = "fetchPublications" [(properties)]=properties>
                               </publicationsTab>
                             </div>
                         </li>
                         <li *ngIf="dataProviderInfo.tabs2.indexOf('Research Data') != -1" (click)="search('datasetsTab', 1, 10); activeTab='Research Data'">
                             <a class="uk-accordion-title" href="#">Research Data</a>
                             <div class="uk-accordion-content">
                               <p>
                                 <datasetsTab *ngIf="activeTab=='Research Data'"
                                 [paramsForSearchLink]="paramsForSearchLink"
                                 [fetchDatasets]="fetchDatasets" [(properties)]=properties>
                               </datasetsTab>
                               </p>
                             </div>
                         </li>
                         <li *ngIf="dataProviderInfo.tabs2.indexOf('Software') != -1" (click)="search('softwareTab', 1, 10); activeTab='Software'">
                             <a class="uk-accordion-title" href="#">Software</a>
                             <div class="uk-accordion-content">
                               <softwareTab *ngIf="activeTab=='Software'"
                                            [paramsForSearchLink]="paramsForSearchLink"
                                            [fetchSoftware]="fetchSoftware" [(properties)]=properties>
                               </softwareTab>
                             </div>
                         </li>
                         <li *ngIf="dataProviderInfo.tabs2.indexOf('Projects') != -1" (click)="search('projectsTab', 1, 10); activeTab='Projects'">
                             <a class="uk-accordion-title" href="#">Projects</a>
                             <div class="uk-accordion-content">
                               <projectsTab *ngIf="activeTab=='Projects'"
                                            [paramsForSearchLink]="paramsForSearchLink"
                                            [fetchProjects]="fetchProjects" [(properties)]=properties>
                               </projectsTab>
                             </div>
                         </li>
                         <li *ngIf="dataProviderInfo.tabs2.indexOf('Content Providers') != -1" (click)="search('datasourcesTab', 1, 10); activeTab='Content Providers'">
                             <a class="uk-accordion-title" href="#">Content Providers</a>
                             <div class="uk-accordion-content">
                               <datasourcesTab *ngIf="activeTab=='Content Providers'"
                                               [paramsForSearchLink]="paramsForSearchLink"
                                               [fetchDataproviders]="fetchDataproviders" [(properties)]=properties>
                               </datasourcesTab>
                             </div>
                         </li>
                         <li *ngIf="dataProviderInfo.tabs2.indexOf('Organizations') != -1" (click)="search('organizationsTab', 1, 10); activeTab='Organizations'">
                             <a class="uk-accordion-title" href="#">Organizations</a>
                             <div class="uk-accordion-content">
                               <organizationsTab *ngIf="activeTab=='Organizations'"
                                                 [organizations]="dataProviderInfo.organizations">
                               </organizationsTab>
                             </div>
                         </li>
                         <li *ngIf="dataProviderInfo.tabs2.indexOf('Related Content Providers') != -1" (click)="search('relatedDatasourcesTab', 1, 10); activeTab='Related Content Providers'">
                             <a class="uk-accordion-title" href="#">Related Content Providers</a>
                             <div class="uk-accordion-content">
                               <relatedDatasourcesTab *ngIf="activeTab=='Related Content Providers'"
                                   [dataproviderId]="datasourceId"
                                   [results]="dataProviderInfo.relatedDatasources"
                                   [loading]="loadingRelatedDatasources"
                                   [fetchPublications]="fetchAggregatorsPublications"
                                   [fetchDatasets]="fetchAggregatorsDatasets"  [(properties)]=properties>
                               </relatedDatasourcesTab>
                             </div>
                         </li>
                         <li *ngIf="dataProviderInfo.tabs2.indexOf('Statistics') != -1" (click)="search('statisticsTab', 1, 10); activeTab='Statistics'">
                             <a class="uk-accordion-title" href="#">Statistics</a>
                             <div class="uk-accordion-content">
                               <div *ngIf="activeTab=='Statistics' && statsClicked">
                                 <errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status]" [type]="'statistics'"></errorMessages>
                                 <div *ngIf="(fetchPublications.searchUtils.totalResults != 0 || fetchDatasets.searchUtils.totalResults != 0)">
                                   <p class="uk-text-bold">Latest Research Result Timeline</p>
                                   <i-frame  [url]=docsTimelineUrl width="800" height="350"></i-frame>
                                   <p class="uk-text-bold">Research Result Types</p>
                                   <i-frame [url]=docsTypesUrl width="800" height="350"></i-frame>
                                 </div>
                                   <div *ngIf="fetchPublications.searchUtils.totalResults > 0 || (fetchDatasets.searchUtils.totalResults > 0)">
                                         <p class="uk-text-bold">Funders in Research Results of content provider</p>
                                         <i-frame  [url]=docsFunderUrl width="800" height="350"></i-frame>
                                   </div>
                                   <div *ngIf="fetchPublications.searchUtils.totalResults > 0 ">
                                       <p class="uk-text-bold">Projects with most Publications</p>
                                       <i-frame [url]=pubsProjectsUrl width="800" height="350"></i-frame>
                                   </div>
                                   <div *ngIf="(fetchDatasets.searchUtils.totalResults > 0)">
                                         <div>
                                             <p class="uk-text-bold">Projects with most Research Data</p>
                                             <i-frame  [url]=dataProjectsUrl width="800" height="350"></i-frame>
                                         </div>
                                   </div>
                                 </div>
                             </div>
                         </li>
                         <li *ngIf="dataProviderInfo.tabs2.indexOf('Metrics') != -1" (click)="search('metricsTab', 1, 10); activeTab='Metrics'">
                             <a class="uk-accordion-title" href="#">Metrics</a>
                             <div class="uk-accordion-content">
                               <metrics *ngIf="activeTab=='Metrics'" [pageViews]="pageViews"
                                   [id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
                                   (metricsResults)="metricsResults($event)" [(properties)] = properties>
                               </metrics>
                               <i-frame *ngIf="activeTab=='Metrics' && metricsClicked && totalViews > 0"
                                   [url]=viewsFrameUrl width="100%" height="250">
                               </i-frame>
                               <i-frame *ngIf="activeTab=='Metrics' && metricsClicked && totalDownloads > 0"
                                   [url]=downloadsFrameUrl width="100%" height="250">
                               </i-frame>
                             </div>
                         </li>
                     </ul>
                     <!--div *ngIf="dataProviderInfo.tabs != undefined" class="uk-margin custom-tab-content">
                     <!--ul *ngIf="dataProviderInfo.tabs != undefined" id="tab-content" class="uk-switcher uk-margin custom-tab-content"-->
                     <div *ngIf="dataProviderInfo.tabs != undefined" class="uk-margin custom-tab-content">
                         <!--div class="uk-animation-fade" *ngFor="let tab of dataProviderInfo.tabs; let i=index"-->
                         <div class="uk-animation-fade">
                             <!--*ngIf="tab.content=='publicationsTab'"-->
                             <publicationsTab *ngIf="activeTab=='Publications'"
                                              [paramsForSearchLink]="paramsForSearchLink"
                                              [fetchPublications] = "fetchPublications" [(properties)]=properties>
                             </publicationsTab>
                             <!--*ngIf="tab.content=='datasetsTab'"-->
                             <datasetsTab *ngIf="activeTab=='Research Data'"
                                          [paramsForSearchLink]="paramsForSearchLink"
                                          [fetchDatasets]="fetchDatasets" [(properties)]=properties>
-...
                                          [paramsForSearchLink]="paramsForSearchLink"
                                          [fetchSoftware]="fetchSoftware" [(properties)]=properties>
                             </softwareTab>
                             <!--*ngIf="  tab.content=='projectsTab'"-->
                             <projectsTab *ngIf="activeTab=='Projects'"
                                          [paramsForSearchLink]="paramsForSearchLink"
                                          [fetchProjects]="fetchProjects" [(properties)]=properties>
                             </projectsTab>
                             <!--*ngIf="  tab.content=='datasourcesTab'"-->
                             <datasourcesTab *ngIf="activeTab=='Content Providers'"
                                             [paramsForSearchLink]="paramsForSearchLink"
                                             [fetchDataproviders]="fetchDataproviders" [(properties)]=properties>
                             </datasourcesTab>
                             <!--*ngIf="  tab.content=='organizationsTab'"-->
                             <organizationsTab *ngIf="activeTab=='Organizations'"
                                               [organizations]="dataProviderInfo.organizations">
                             </organizationsTab>
                             <!--*ngIf="  tab.content=='relatedDatasourcesTab'"-->
                             <relatedDatasourcesTab *ngIf="activeTab=='Related Content Providers'"
                                 [dataproviderId]="datasourceId"
                                 [results]="dataProviderInfo.relatedDatasources"
                                 [loading]="loadingRelatedDatasources"
                                 [fetchPublications]="fetchAggregatorsPublications"
                                 [fetchDatasets]="fetchAggregatorsDatasets"  [(properties)]=properties>
                                 <!--[type]="relatedDataprovidersResultsType"-->
                             </relatedDatasourcesTab>
                             <!-- *ngIf="  tab.content=='statisticsTab' && statsClicked"-->
                             <div *ngIf="activeTab=='Statistics' && statsClicked">
                               <!--div *ngIf="fetchPublications.searchUtils.totalResults == 0 && fetchDatasets.searchUtils.totalResults == 0" class = "uk-alert  uk-alert-primary">
                                   No statistics available
                               </div-->
                               <!--div *ngIf="fetchPublications.searchUtils.status == errorCodes.NONE && fetchDatasets.searchUtils.status == errorCodes.NONE"
                                     class="uk-alert uk-alert-primary uk-animation-fade" role="alert">No statistics available</div>
                               <div *ngIf="fetchPublications.searchUtils.status == errorCodes.ERROR || fetchDatasets.searchUtils.status == errorCodes.ERROR"
                                     class="uk-alert uk-alert-warning uk-animation-fade" role="alert">An Error Occured</div>
                               <div *ngIf="fetchPublications.searchUtils.status == errorCodes.NOT_AVAILABLE || fetchDatasets.searchUtils.status == errorCodes.NOT_AVAILABLE"
                                     class="uk-alert uk-alert-danger uk-animation-fade" role="alert">Service not available</div>
                               <div *ngIf="fetchPublications.searchUtils.status == errorCodes.LOADING || fetchDatasets.searchUtils.status == errorCodes.LOADING"
                                     class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img class="loading-gif  uk-align-center" ></div-->
                               <errorMessages [status]="[fetchPublications.searchUtils.status, fetchDatasets.searchUtils.status]" [type]="'statistics'"></errorMessages>
-...
                                       </div>
                                 </div>
                               </div>
                             </div>
                             <!--*ngIf="  tab.content=='metricsTab'"-->
                             <!--[name]="dataProviderInfo.title['name']"-->
                             <metrics *ngIf="activeTab=='Metrics'" [pageViews]="pageViews"
                                 [id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
                                 (metricsResults)="metricsResults($event)" [(properties)] = properties>
-...
                             <i-frame *ngIf="activeTab=='Metrics' && metricsClicked && totalDownloads > 0"
                                 [url]=downloadsFrameUrl width="100%" height="250">
                             </i-frame>
                         </div>
                     <!--/ul-->
                           </div>
                         </div-->
                     </div>
             </div>
-...
                 <div>
                   Share - Bookmark<addThis ></addThis>
                 </div>
                 <metrics  [pageViews]="pageViews" shortView=true
                 [id]="datasourceId" [entityType]="'datasources'" [entity]="'Content Provider'"
                 (metricsResults)="metricsResults($event)" [(properties)] = properties>
               </metrics>
               </div>
             </div>
           </div>
         </div>
       </div>
       </div>
     </div>

                 if(this.dataProviderInfo.tabs == undefined) {
                     this.dataProviderInfo.tabs = new Array<{"name": string, "content": string}>();
+                }
                 this.dataProviderInfo.tabs = [];
                 if(this.dataProviderInfo.tabsInTypes.publicationsTab.has(data[1].classid)) {
                     this.dataProviderInfo.tabs.push({"name": "Publications", "content": "publicationsTab"});
                     this.dataProviderInfo.tabs2.push("Publications");
+                }
                 if(this.dataProviderInfo.tabsInTypes.datasetsTab.has(data[1].classid)) {
                     this.dataProviderInfo.tabs.push({"name": "Research Data", "content": "datasetsTab"});
                     this.dataProviderInfo.tabs2.push("Research Data");
+                }
                 if(this.dataProviderInfo.tabsInTypes.projectsTab.has(data[1].classid)) {
                     this.dataProviderInfo.tabs.push({"name": "Projects", "content": "projectsTab"});
                     this.dataProviderInfo.tabs2.push("Projects");
+                }
                 if(this.dataProviderInfo.tabsInTypes.datasourcesTab.has(data[1].classid)) {
                     this.dataProviderInfo.tabs.push({"name": "Content Providers", "content": "datasourcesTab"});
                     this.dataProviderInfo.tabs2.push("Content Providers");
+                }
                 this.dataProviderInfo.tabs.push({"name": "Organizations", "content": "organizationsTab"});
                 this.dataProviderInfo.tabs2.push("Organizations");
                 if(this.dataProviderInfo.tabsInTypes.relatedDatasourcesTab.has(data[1].classid)) {
                     this.dataProviderInfo.tabs.push({"name": "Related Content Providers", "content": "relatedDatasourcesTab"});
                     this.dataProviderInfo.tabs2.push("Related Content Providers");
+                }
                 if(this.dataProviderInfo.tabsInTypes.statisticsTab.has(data[1].classid)) {
                     this.dataProviderInfo.tabs.push({"name": "Statistics", "content": "statisticsTab"});
                     this.dataProviderInfo.tabs2.push("Statistics");
+                }
                 if(this.dataProviderInfo.tabsInTypes.softwareTab.has(data[1].classid)) {
                     this.dataProviderInfo.tabs.push({"name": "Software", "content": "softwareTab"});
                     this.dataProviderInfo.tabs2.push("Software");
+                }
                 /*if(this.dataProviderInfo.tabsInTypes.otherTab.has(data[1].classid)) {
-...
                 }*/
                 this.dataProviderInfo.tabs.push({"name": "Metrics", "content": "metricsTab"});
                 this.dataProviderInfo.tabs2.push("Metrics");
                 if(this.dataProviderInfo.resultTypes.collectedFrom.has(data[1].classid)) {
                     this.dataProviderInfo.resultsBy = "collectedFrom";

     @Component({
         selector: 'metrics',
         template: `
         <div *ngIf="!shortView">
         <errorMessages [status]="[status]" [type]="'metrics'"></errorMessages>
         <div *ngIf="metrics != undefined" class="uk-child-width-1-3@m uk-grid-small uk-grid-match uk-grid" uk-grid="">
             <div *ngIf="entityType == 'projects'" class="uk-width-1-1 uk-text-center uk-text-meta uk-margin">Project metrics are derived from aggregating individual research results metrics.</div>
-...
                 </tr>
             </tbody>
         </table>
         </div>
         <div *ngIf="shortView">
           <dl *ngIf="metrics" class="uk-description-list-line">
             <dt class="title">Other Metrics</dt>
             <dd class="line" >
               {{metrics.pageViews | number}} views in OpenAIRE
             </dd>
             <dd class="line">
                {{metrics.totalViews | number}}
               <span *ngIf="metrics.totalViews > 0 && metrics.totalOpenaireViews > 0">
               ( {{metrics.totalOpenaireViews | number}} from OpenAIRE )
               </span>
               views in local repository
             </dd>
             <dd class="line">
               {{metrics.totalDownloads | number}}
               <span *ngIf="metrics.totalDownloads > 0 && metrics.totalOpenaireDownloads > 0">
               ( {{metrics.totalOpenaireDownloads | number}} from OpenAIRE )
               </span> downloads in local repository
             </dd>
           </dl>
         </div>
+        `
         })
-...
         //@Input() name: string = "";
         @Input() pageViews: number = 0;
         @Input() properties:EnvProperties;
         @Input() shortView:boolean = false;
         public metrics: Metrics;
         public errorCodes:ErrorCodes;
-...
              data => {
                  this.metrics = data;
                  this.status = this.errorCodes.DONE;
                  this.metricsResults.emit({
                      totalViews: this.metrics.totalViews,
                      totalDownloads: this.metrics.totalDownloads,

modules/uoa-services-library/trunk/ng-openaire-library/src/app/utils/entities/dataProviderInfo.ts
13	13	aggregationStatus: {"fundedContent": string, "indexRecords": string}; //collected from datasource api
14	14
15	15	tabs: {"name": string, "content": string}[];
	16	tabs2: string[] =[];
16	17	tabsInTypes = {
17	18	"publicationsTab": new Set<string>(
18	19	[ "aggregator::pubsrepository::institutional",

     text-overflow: ellipsis;
     /*min-width: 81px;*/
+    }
     .filterItem{
       margin-bottom: 5px !important;
+    }
     .browseFilters{
     overflow-y: auto;
-...
     .citation-accordion .uk-accordion-title {
       font-family: Raleway;
+    }
     .textOverflowEllipsis {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    }
     .custom-accordion .uk-accordion-title{
         text-align: left;
         background: #f8f8ff;
         padding: 4px;
         color: #3055ba !important;
         font-size: 14px;
         text-transform: initial !important;
         font-weight: inherit !important;
         /*border-top: gray solid 1px;*/
+    }
     .custom-accordion  .uk-accordion-title::after {
         float: none;;
         padding: 12px;
+    }
     .custom-accordion{
       /*border: gray solid 1px;*/
       border-top: 0px;
+    }
     .custom-accordion .uk-accordion-content{
       /*margin:12px;*/
       margin: 5px;
       border: gray 2px;
       border-style: dashed;
       padding: 12px;
+    }

Also available in: Unified diff

Project

General

Profile

D-Net

Revision 52373

Added by Argiro Kokogiannaki over 6 years ago