argos/dmp-frontend/src/app/ui/dashboard/dashboard.component.html

212 lines
11 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="main-content dashboard-main-container h-100" [class.non-auth-main-container]="!this.isAuthenticated()">
<div *ngIf="this.isAuthenticated()" class="container-fluid">
<div *ngIf="dashboardStatisticsData?.totalDataManagementPlanCount === 0
&& dashboardStatisticsData?.totalDataSetCount === 0
&& dashboardStatisticsData?.totalGrantCount === 0
&& dashboardStatisticsData?.totalOrganisationCount === 0">
<div class="main-content">
<div class="col-md-8">
<div class="card" [style.display]="isVisible ? 'block' : 'none'">
<!-- <a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a> -->
<p class="card-title mb-0">What is a DMP in ARGOS</p>
<p class="card-content mb-0">A Data Management Plan (DMP) is a living document describing the datasets that are generated and/ or re-used
during and after a research lifetime. DMPs aim to provide researchers with essential information to re-produce,
re-distribute and re-purpose research results thus assuring for their validity and exploitation.</p>
<p class="card-content pt-3 mb-0">
New with DMPs? Visit <a><u>OpenAIREs Guide for Researchers</u></a> to learn more about how to create one!
</p>
<div class="d-flex">
<button type="button" class="col-auto align-self-center normal-btn">Start your first DMP</button>
<img class="col-auto ml-auto" src="../../assets/img/laptop.png" width="116" height="139">
</div>
</div>
</div>
<div class="col-md-4">
<div class="personal-usage">Personal usage</div>
<div class="counter-zero">0</div>
<a href="#" class="link">DMP's</a>
<div class="counter-zero">0</div>
<a href="#" class="link">Dataset Descriptions</a>
<div class="counter-zero">0</div>
<a href="#" class="link-disabled">Grants</a>
<div class="counter-zero">0</div>
<a href="#" class="link-disabled">Related organizations</a>
</div>
</div>
</div>
<div *ngIf="dashboardStatisticsData?.totalDataManagementPlanCount !== 0
|| dashboardStatisticsData?.totalDataSetCount !== 0
|| dashboardStatisticsData?.totalGrantCount !== 0
|| dashboardStatisticsData?.totalOrganisationCount !== 0">
<div class="main-content">
<div class="col">
<div class="card" [style.display]="isVisible ? 'block' : 'none'">
<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a>
<p class="card-content mb-0 pt-0">
{{'DASHBOARD.DMP-ABOUT-BEG' | translate}}
<b>{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</b>
{{'DASHBOARD.DMP-ABOUT-END' | translate}}</p>
<div class="d-flex pt-4 pb-4 mt-3 mb-3">
<button type="button" class="col-auto align-self-center yellow-btn">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button>
</div>
</div>
<div class="latest-activity-title">Latest activity</div>
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
<!-- +counter -->
<mat-tab label="All">
<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
<app-recent-edited-activity></app-recent-edited-activity>
<div class="d-flex justify-content-center">
<button type="button" class="btn-load-more">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DRAFTS' | translate}}">
<!-- <app-drafts></app-drafts> -->
</mat-tab>
<mat-tab label="{{'DASHBOARD.DMPS' | translate}}">
<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
<app-recent-edited-activity></app-recent-edited-activity>
<div class="d-flex justify-content-center">
<button type="button" class="btn-load-more">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</mat-tab>
<mat-tab label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}">
<div class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
<app-recent-edited-dataset-activity></app-recent-edited-dataset-activity>
<div class="d-flex justify-content-center">
<button type="button" class="btn-load-more">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
</mat-tab>
</mat-tab-group>
</div>
<div class="col-auto">
<div class="personal-usage">{{'DASHBOARD.PERSONAL-USAGE' | translate}}</div>
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataManagementPlanCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataManagementPlanCount == 0}">
{{dashboardStatisticsData?.totalDataManagementPlanCount}}</div>
<a [routerLink]="['/plans']" class="link">{{'DASHBOARD.DMPS' | translate}}</a>
<div [ngClass]="{'counter': dashboardStatisticsData?.totalDataSetCount != 0, 'counter-zero': dashboardStatisticsData?.totalDataSetCount == 0}">
{{dashboardStatisticsData?.totalDataSetCount}}</div>
<a [routerLink]="['/datasets']" class="link">{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</a>
<div [ngClass]="{'counter': dashboardStatisticsData?.totalGrantCount != 0, 'counter-zero': dashboardStatisticsData?.totalGrantCount == 0}">
{{dashboardStatisticsData?.totalGrantCount}}</div>
<a href="#" class="link-disabled">{{'DASHBOARD.GRANTS' | translate}}</a>
<div [ngClass]="{'counter': dashboardStatisticsData?.totalOrganisationCount != 0, 'counter-zero': dashboardStatisticsData?.totalOrganisationCount == 0}">
{{dashboardStatisticsData?.totalOrganisationCount}}</div>
<a href="#" class="link-disabled">{{'DASHBOARD.RELATED-ORGANISATIONS' | translate}}</a>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="header-image">
<div class="header-text-container">
<h3>{{ 'ABOUT.WELCOME' | translate }}</h3>
<h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4>
</div>
</div>
<div class="main-content dashboard-main-container" [class.non-auth-main-container]="!this.isAuthenticated()">
<div *ngIf="this.isAuthenticated()" class="container-fluid">
<div class="row" *ngIf="this.isAuthenticated()">
<div class="col-sm-6 col-md-6 col-lg-6">
<app-wizard title="{{'QUICKWIZARD.CREATE-ADD.CREATE.TITLE' | translate}}" subtitle="{{'QUICKWIZARD.CREATE-ADD.CREATE.SUBTITLE' | translate}}" routerLink="/quick-wizard" icon="play_circle_outline">
</app-wizard>
</div>
<div class="col-sm-6 col-md-6 col-lg-6">
<app-wizard title="{{'QUICKWIZARD.CREATE-ADD.ADD.TITLE' | translate}}" subtitle="{{'QUICKWIZARD.CREATE-ADD.ADD.SUBTITLE' | translate}}" routerLink="/datasetcreatewizard" icon="play_circle_outline"></app-wizard>
</div>
</div>
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.MY-DMPS'" [subtitle]="dashboardStatisticsData?.totalDataManagementPlanCount" routerLink='/plans' buttonRedirectLink="/plans/new" icon="view_agenda"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.MY-DATASETS'" [subtitle]="dashboardStatisticsData?.totalDataSetCount" routerLink='/datasets' buttonRedirectLink="/datasets/new" icon="library_books"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.MY-GRANTS'" [subtitle]="dashboardStatisticsData?.totalGrantCount" icon="work_outline"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.ORGANIZATIONS'" [subtitle]="dashboardStatisticsData?.totalOrganisationCount" icon="scatter_plot">
</app-info-counter>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12">
<app-recent-edited-activity></app-recent-edited-activity>
</div>
</div>
</div>
<div class="col-md-3">
<app-drafts></app-drafts>
</div>
</div>
</div>
<div *ngIf="!this.isAuthenticated()" class="container-fluid">
<div class="row non-auth-stats">
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.DMPS'" [subtitle]="dashboardStatisticsData?.totalDataManagementPlanCount" routerLink='/explore-plans' buttonRedirectLink="/plans/new" icon="view_agenda"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.DATASETS'" [subtitle]="dashboardStatisticsData?.totalDataSetCount" routerLink='/explore' buttonRedirectLink="/datasets/new" icon="library_books"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter [title]="'DASHBOARD.GRANTS'" [subtitle]="dashboardStatisticsData?.totalGrantCount" icon="work_outline"></app-info-counter>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<app-info-counter title="Related Organizations" [subtitle]="dashboardStatisticsData?.totalOrganisationCount" icon="scatter_plot"></app-info-counter>
</div>
</div>
<div class="d-flex flex-column align-items-center non-auth-title-container">
<h4>{{'DASHBOARD.TITLE' | translate}}</h4>
<p>{{'DASHBOARD.INFO-TEXT' | translate}}</p>
</div>
<div class="row">
<div class="col-lg-6 mt-4">
<div class="title">
<h4> {{'DASHBOARD.DATA-MANAGEMENT-PLANS' | translate}} </h4>
<div class="info">
<p class="subtitle">{{ dashboardStatisticsData?.totalDataManagementPlanCount }} {{'HOME.DMPS' | translate}}</p>
<a class="view-all" [routerLink]="['/explore-plans']">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</a>
</div>
</div>
<mat-divider></mat-divider>
<div *ngFor="let dmp of dmpListingItems">
<app-dmp-info-counter [dmp]="dmp" (onClick)="dmpClicked($event)"></app-dmp-info-counter>
</div>
</div>
<div class="col-lg-6 mt-4">
<div class="row">
<div class="col-12 title">
<h4> DATASETS </h4>
<div class="info">
<p class="subtitle">{{ dashboardStatisticsData?.totalDataSetCount }} {{'HOME.DATASETS' | translate}}</p>
<a class="view-all" [routerLink]="['/explore']">{{ 'GENERAL.ACTIONS.VIEW-ALL' | translate }}</a>
</div>
</div>
<mat-divider class="col-12"></mat-divider>
<div class="col-12">
<div class="row">
<div *ngFor="let dataset of datasetListingItems" class="col-md-6">
<app-dataset-info-counter [dataset]="dataset" (onClick)="datasetClicked($event)">
</app-dataset-info-counter>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->