argos/dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.co...

73 lines
2.5 KiB
HTML

<div class="listing-item">
<div class="col" (click)="itemClicked()">
<div class="row">
<div class="col-12 gray-container container-header">
{{dmp.projectAbbreviation}}
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon>lock</mat-icon>
<h4 class="title">{{dmp.label}}</h4>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="mt-1 mb-2">{{dmp.description}}</p>
</div>
</div>
<div class="row">
<div class="col-12 about-item">
<mat-icon class="gray-icon pt-2">settings</mat-icon>
<h4 class="mt-2 ml-1 mr-3 p-1">OWNER</h4>
<mat-icon class="gray-icon pt-2">storage</mat-icon>
<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
<mat-icon class="gray-icon pt-2">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
</div>
<p>Published {{dmp.creationTime | date: "shortDate"}}</p>
</div>
</div>
</div>
</div>
<!-- <div class="explore-dmp-listing-item row" (click)="itemClicked()">
<div class="col-auto">
<mat-icon>lock</mat-icon>
</div>
<div class="col">
<div class="row">
<h4 class="col-12 title">{{dmp.label}}</h4>
<h4 class="col-12 project-title">{{dmp.project}}</h4>
</div>
<div class="row d-flex align-items-center my-1">
<mat-icon class="col-auto gray-icon">storage</mat-icon>
<h4 class="col-auto m-2 p-1">{{dmp.associatedProfiles.length}}</h4>
<div class="row" *ngFor="let profile of dmp.associatedProfiles">
<div class="col-auto explore-dmp-chip ml-2">{{profile.label}}</div>
</div>
</div>
<div class="row d-flex align-items-center my-1">
<mat-icon class="col-auto gray-icon">settings</mat-icon>
<h4 class="col-auto m-0 p-0">OWNER</h4>
</div>
<div class="row d-flex align-items-center my-1">
<mat-icon class="col-auto gray-icon">group</mat-icon>
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
</div>
</div>
<div class="col-auto">
<mat-icon>more_horiz</mat-icon>
</div>
</div>
<mat-divider *ngIf="showDivider"></mat-divider> -->