MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Change links to anchors (Issue #198)

This commit is contained in:
apapachristou 2019-10-23 18:36:29 +03:00
parent a09abc2fbc
commit 66be5bdf9e
20 changed files with 308 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
View File

@ -19,8 +19,7 @@
</div>
<div class="col-12 col-sm-12 col-md-9 pt-4">
<div *ngFor="let item of listingItems; let i = index">
<app-dataset-listing-item-component [dataset]="item" [showDivider]="i != (listingItems.length - 1)" (onClick)="rowClicked($event)">
</app-dataset-listing-item-component>
<app-dataset-listing-item-component [dataset]="item" [showDivider]="i != (listingItems.length - 1)"></app-dataset-listing-item-component>
</div>
</div>
</div>

9
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts
View File

@ -1,5 +1,5 @@
import {of as observableOf, Observable } from 'rxjs';
import { of as observableOf, Observable } from 'rxjs';
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
@ -136,9 +136,6 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
this.refresh();
}
rowClicked(dataset: DatasetListingModel) {
this.router.navigate(['/datasets/edit/' + dataset.id]);
}
getDefaultCriteria(dmp: any = null): DatasetCriteria {
const defaultCriteria = new DatasetCriteria();
@ -159,4 +156,8 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
.pipe(takeUntil(this._destroyed))
.subscribe();
}
// rowClicked(dataset: DatasetListingModel) {
// this.router.navigate(['/datasets/edit/' + dataset.id]);
// }
}

126
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.html
View File

@ -1,74 +1,76 @@
<div class="listing-item" (click)="itemClicked()">
<div class="col">
<div class="row">
<div class="col-12 gray-container container-header">
<p (click)="$event.stopImmediatePropagation(); grantClicked(dataset)">{{ dataset.grantAbbreviation }}</p>
<!-- <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto"
(click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button> -->
<div class="listing-item">
<a [routerLink]="['/datasets/edit/' + dataset.id]">
<div class="col">
<div class="row">
<div class="col-12 gray-container container-header">
<p (click)="$event.stopImmediatePropagation(); grantClicked(dataset)">{{ dataset.grantAbbreviation }}</p>
<!-- <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto"
(click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button> -->
</div>
</div>
</div>
<div class="row">
<div class="col-12 title">
<mat-icon *ngIf="isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.DRAFT' | translate}}" class="draft-bookmark">
bookmark
</mat-icon>
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.FINALIZED' | translate}}" class="finalized-bookmark">
bookmark
</mat-icon>
<h4 *ngIf="isDraft">
<span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="mt-1 mb-2">{{dataset.description}}</p>
</div>
</div>
<div class="row">
<div class="col-auto about-item">
<div class="row">
<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">
storage
<div class="row">
<div class="col-12 title">
<mat-icon *ngIf="isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.DRAFT' | translate}}" class="draft-bookmark">
bookmark
</mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
</div>
</div>
<div class="col-auto about-item">
<div class="row">
<mat-icon (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">
work_outline
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-LISTING.TOOLTIP.DATASET-STATUS.FINALIZED' | translate}}" class="finalized-bookmark">
bookmark
</mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
<h4 *ngIf="isDraft">
<span>{{ 'TYPES.DATASET-STATUS.DRAFT' | translate }}:</span> {{ dataset.label }}</h4>
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
</div>
</div>
<div class="col-auto about-item">
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">
assignment
</mat-icon>
<div class="pt-1">
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
<div class="row">
<div class="col-12">
<p class="mt-1 mb-2">{{dataset.description}}</p>
</div>
</div>
<div class="row">
<div class="col-auto about-item">
<a class="row storage" [routerLink]="['/plans/edit/' + dataset.dmpId]">
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">
storage
</mat-icon>
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
</a>
</div>
<div class="col-12 about-item">
<p *ngIf="isDraft">{{'DATASET-LISTING.COLUMNS.LAST-EDITED' | translate}} {{ dataset.modified | date: "shortDate"}}</p>
<p *ngIf="!isDraft">{{'DATASET-LISTING.COLUMNS.FINALIZED' | translate}} {{ dataset.finalizedAt | date: "shortDate"}}</p>
<div class="col-auto about-item">
<div class="row">
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">
work_outline
</mat-icon>
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
</div>
</div>
<div class="col-auto about-item">
<mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">
assignment
</mat-icon>
<div class="pt-1">
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
</div>
</div>
<div class="col-12 about-item">
<p *ngIf="isDraft">{{'DATASET-LISTING.COLUMNS.LAST-EDITED' | translate}} {{ dataset.modified | date: "shortDate"}}</p>
<p *ngIf="!isDraft">{{'DATASET-LISTING.COLUMNS.FINALIZED' | translate}} {{ dataset.finalizedAt | date: "shortDate"}}</p>
</div>
</div>
<!-- <div class="info">
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.grant }}</p>
</div>
<div class="row" style="margin-left: 0px !important">
<div class="chip">
<p>{{ dataset.profile }}</p>
</div>
</div> -->
</div>
<!-- <div class="info">
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.grant }}</p>
</div>
<div class="row" style="margin-left: 0px !important">
<div class="chip">
<p>{{ dataset.profile }}</p>
</div>
</div> -->
</div>
</a>
</div>
<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->

9
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss
View File

@ -24,6 +24,7 @@
h4 {
display: inline;
padding-left: 1em;
color: #333333;
}
h4 > span {
@ -58,3 +59,11 @@ h4 > span {
padding-top: 7px;
color: #aaaaaa;
}
p {
color: #333333;
}
.storage :hover {
color: #00b29f;
}

20
dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.ts
View File

@ -23,17 +23,17 @@ export class DatasetListingItemComponent implements OnInit {
else { this.isDraft = false }
}
itemClicked() {
this.onClick.emit(this.dataset);
}
grantClicked(dataset: DatasetListingModel) {
// ----------- UNCOMMENT TO ADD AGAIN GRANTS --------
// this.router.navigate(['/grants/edit/' + dataset.grantId]);
}
// grantClicked(dataset: DatasetListingModel) {
// this.router.navigate(['/grants/edit/' + dataset.grantId]);
// }
datasetClicked(dataset: DatasetListingModel) {
this.router.navigate(['/plans/edit/' + dataset.dmpId])
}
// itemClicked() {
// this.onClick.emit(this.dataset);
// }
// datasetClicked(dataset: DatasetListingModel) {
// this.router.navigate(['/plans/edit/' + dataset.dmpId])
// }
}

2
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.html
View File

@ -24,7 +24,7 @@
<div class="col-12 col-sm-12 col-md-9 pt-4">
<!-- <mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)" class="top-paginator"></mat-paginator> -->
<div *ngFor="let item of listingItems; let i = index">
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item"></app-dmp-listing-item-component>
</div>
</div>
</div>

7
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.ts
View File

@ -151,10 +151,9 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
this.refresh();
}
rowClicked(dmp: DmpListingModel) {
this.router.navigate(['/plans/overview/' + dmp.id]);
// this.router.navigate(['/plans/edit/' + dmp.id]);
}
// rowClicked(dmp: DmpListingModel) {
// this.router.navigate(['/plans/overview/' + dmp.id]);
// }
addDataset(rowId: String) {
this.router.navigate(['/datasets/new/' + rowId]);

163
dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.html
View File

@ -1,93 +1,92 @@
<div class="listing-item">
<div class="col" (click)="itemClicked()">
<div class="row">
<div class="col-12 gray-container container-header">
<p (click)="$event.stopImmediatePropagation(); grantClicked(dmp.grantId)">
{{dmp.grantAbbreviation}}</p>
<button *ngIf="isDraft" mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto" (click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="editClicked(dmp.id)" class="menu-item">
<mat-icon>edit</mat-icon>{{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
<a [routerLink]="['/plans/overview/' + dmp.id]">
<div class="col">
<div class="row">
<div class="col-12 gray-container container-header">
<p>{{dmp.grantAbbreviation}}</p>
<button *ngIf="isDraft" mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto" (click)="$event.preventDefault(); $event.stopPropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button>
<button mat-menu-item (click)="openShareDialog(dmp.id,dmp.label)">
<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
</button>
<button mat-menu-item (click)="addDataset(dmp.id)">
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
</button>
<button mat-menu-item (click)="showDatasets(dmp.id, dmp.label)">
<mat-icon>list</mat-icon>{{'DMP-LISTING.ACTIONS.DATASETS' | translate}}
</button>
<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label)">
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
</button>
</mat-menu>
<mat-menu #actionsMenu="matMenu">
<button mat-menu-item (click)="editClicked(dmp.id)" class="menu-item">
<mat-icon>edit</mat-icon>{{ 'DMP-LISTING.ACTIONS.EDIT' | translate }}
</button>
<button mat-menu-item (click)="openShareDialog(dmp.id,dmp.label)">
<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
</button>
<button mat-menu-item (click)="addDataset(dmp.id)">
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
</button>
<button mat-menu-item (click)="showDatasets(dmp.id, dmp.label)">
<mat-icon>list</mat-icon>{{'DMP-LISTING.ACTIONS.DATASETS' | translate}}
</button>
<button mat-menu-item (click)="viewVersions(dmp.groupId, dmp.label)">
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
</button>
</mat-menu>
</div>
</div>
</div>
<div class="row d-flex flex-wrap">
<!-- <div class="col-12 d-flex flex-wrap"> -->
<div class="col-auto">
<mat-icon *ngIf="isDraft" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.DRAFT' | translate}}" class="draft-icon">
lock_open
</mat-icon>
<mat-icon *ngIf="isFinalized && !isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.FINALIZED' | translate}}">
lock
</mat-icon>
<mat-icon *ngIf="isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.PUBLISHED' | translate}}" class="published-icon">
radio_button_checked
</mat-icon>
</div>
<div class="col pl-0">
<h4 class="title pl-0" *ngIf="isDraft">
<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}
</h4>
<h4 class="title pl-0" *ngIf="!isDraft">{{dmp.label}}</h4>
</div>
<!-- </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-auto about-item">
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
settings
</mat-icon>
<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
</div>
<div class="col-auto about-item">
<div class="datasets-counter">
<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dmp.id)" class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
storage
<div class="row d-flex flex-wrap">
<!-- <div class="col-12 d-flex flex-wrap"> -->
<div class="col-auto">
<mat-icon *ngIf="isDraft" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.DRAFT' | translate}}" class="draft-icon">
lock_open
</mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dmp.id)" class="mt-1 ml-1 mr-3 p-1">
{{dmp.datasets.length}}</h4>
<mat-icon *ngIf="isFinalized && !isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.FINALIZED' | translate}}">
lock
</mat-icon>
<mat-icon *ngIf="isPublished" matTooltip="{{'DMP-LISTING.TOOLTIP.DMP-STATUS.PUBLISHED' | translate}}" class="published-icon">
radio_button_checked
</mat-icon>
</div>
<div class="col pl-0">
<h4 class="title pl-0" *ngIf="isDraft">
<span>{{ 'TYPES.DMP.DRAFT' | translate }}:</span> {{dmp.label}}
</h4>
<h4 class="title pl-0" *ngIf="!isDraft">{{dmp.label}}</h4>
</div>
<!-- </div> -->
</div>
<div class="row">
<div class="col-12">
<p class="mt-1 mb-2">{{dmp.description}}</p>
</div>
</div>
<div class="col-auto about-item pt-2">
<mat-icon class="gray-icon" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pb-1">
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
<div class="row">
<div class="col-auto about-item">
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.LEVEL-OF-ACCESS' | translate}}">
settings
</mat-icon>
<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
</div>
<div class="col-auto about-item">
<a class="datasets-counter" [routerLink]="['/plans/edit/' + dmp.id]" [queryParams]="{ tab: 'datasetDescriptions' }">
<mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
storage
</mat-icon>
<h4 class="mt-1 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
</a>
</div>
<div class="col-auto about-item pt-2">
<mat-icon class="gray-icon" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
<div *ngFor="let profile of dmp.associatedProfiles" class="pb-1">
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
</div>
</div>
<div class="col-12 about-item">
<p *ngIf="isDraft">{{'DMP-PROFILE-LISTING.COLUMNS.LAST-EDITED' | translate}} {{dmp.modifiedTime | date: "shortDate"}}</p>
<p *ngIf="isFinalized && !isPublished">{{'TYPES.DMP.FINALISED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
<p *ngIf="isPublished">{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.publishedAt | date: "shortDate"}}</p>
</div>
</div>
<div class="col-12 about-item">
<p *ngIf="isDraft">{{'DMP-PROFILE-LISTING.COLUMNS.LAST-EDITED' | translate}} {{dmp.modifiedTime | date: "shortDate"}}</p>
<p *ngIf="isFinalized && !isPublished">{{'TYPES.DMP.FINALISED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
<p *ngIf="isPublished">{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.publishedAt | date: "shortDate"}}</p>
</div>
<!-- <div class="row d-flex align-items-center my-1">
<mat-icon class="col-auto gray-icon">group</mat-icon>
<div class="row" *ngFor="let user of dmp.users">
<div class="col-auto squared-chip mr-2">{{user.name}}</div>
</div>
</div> -->
</div>
<!-- <div class="row d-flex align-items-center my-1">
<mat-icon class="col-auto gray-icon">group</mat-icon>
<div class="row" *ngFor="let user of dmp.users">
<div class="col-auto squared-chip mr-2">{{user.name}}</div>
</div>
</div> -->
</div>
</a>
</div>
<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->

13
dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.scss
View File

@ -24,6 +24,7 @@ h4 {
display: inline;
padding-left: 1em;
line-height: 1.7em;
color: #333333;
}
h4 > span {
@ -44,7 +45,7 @@ h4 > span {
}
.datasets-counter :hover {
color: #089dbb !important;
color: #00b29f !important;
}
.about-item .title {
@ -59,6 +60,10 @@ h4 > span {
color: #aaaaaa;
}
p {
color: #333333;
}
.draft-icon {
color: #aaaaaa;
}
@ -69,7 +74,7 @@ h4 > span {
}
.published-icon {
padding-top: 1px;
color: #08bd63;;
// color: #92d050;
padding-top: 1px;
color: #08bd63;
// color: #92d050;
}

28
dmp-frontend/src/app/ui/dmp/listing/listing-item/dmp-listing-item.component.ts
View File

@ -3,14 +3,7 @@ import { DmpListingModel } from '../../../../core/model/dmp/dmp-listing';
import { MatDialog } from '@angular/material/dialog';
import { DmpInvitationDialogComponent } from '../../invitation/dmp-invitation.component';
import { Router, ActivatedRoute } from '@angular/router';
import { GrantListingModel } from '../../../../core/model/grant/grant-listing';
import { RequestItem } from '../../../../core/query/request-item';
import { TagCriteria } from '../../../../core/query/tag/tag-criteria';
import { DmpCriteria } from '../../../../core/query/dmp/dmp-criteria';
import { DatasetCriteria } from '../../../../core/query/dataset/dataset-criteria';
import { DmpService } from '../../../../core/services/dmp/dmp.service';
import { DatasetService } from '../../../../core/services/dataset/dataset.service';
import { DataTableRequest } from '../../../../core/model/data-table/data-table-request';
import { AuthService } from '../../../../core/services/auth/auth.service';
import { Principal } from '../../../../core/model/auth/Principal';
import { TranslateService } from '@ngx-translate/core';
@ -34,8 +27,6 @@ export class DmpListingItemComponent implements OnInit {
constructor(
private router: Router,
private dialog: MatDialog,
private route: ActivatedRoute,
private datasetService: DatasetService,
private authentication: AuthService,
private translate: TranslateService) { }
@ -81,18 +72,17 @@ export class DmpListingItemComponent implements OnInit {
this.router.navigate(['/plans/versions/' + rowId], { queryParams: { groupLabel: rowLabel } });
}
itemClicked() {
this.onClick.emit(this.dmp);
}
// itemClicked() {
// this.onClick.emit(this.dmp);
// }
grantClicked(grantId: String) {
// ----------- UNCOMMENT TO ADD AGAIN GRANTS --------
// this.router.navigate(['/grants/edit/' + grantId]);
}
// grantClicked(grantId: String) {
// this.router.navigate(['/grants/edit/' + grantId]);
// }
datasetClicked(dmpId: string) {
this.router.navigate(['/plans/edit/' + dmpId], { queryParams: { tab: "datasetDescriptions" } });
}
// datasetClicked(dmpId: string) {
// this.router.navigate(['/plans/edit/' + dmpId], { queryParams: { tab: "datasetDescriptions" } });
// }
roleDisplay(value: any) {
const principal: Principal = this.authentication.current();

2
dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html
View File

@ -20,7 +20,7 @@
</div>
<div class="col-12 col-sm-12 col-md-9 pt-4">
<div *ngFor="let item of listingItems; let i = index">
<app-explore-dataset-listing-item-component [dataset]="item" [showDivider]="i !== (listingItems.length - 1)" (onClick)="rowClicked($event)"></app-explore-dataset-listing-item-component>
<app-explore-dataset-listing-item-component [dataset]="item" [showDivider]="i !== (listingItems.length - 1)"></app-explore-dataset-listing-item-component>
</div>
</div>
</div>

10
dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts
View File

@ -1,4 +1,3 @@
import {of as observableOf, Observable } from 'rxjs';
import { Component, OnInit, ViewChild, ɵConsole } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
@ -14,9 +13,6 @@ import { IBreadCrumbComponent } from '../misc/breadcrumb/definition/IBreadCrumbC
import { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item';
import { TranslateService } from '@ngx-translate/core';
import { DmpService } from '../../core/services/dmp/dmp.service';
import { DatasetCriteriaComponent } from '../dataset/listing/criteria/dataset-criteria.component';
import { DmpModel } from '../../core/model/dmp/dmp';
import { DatasetCriteria } from '../../core/query/dataset/dataset-criteria';
@Component({
@ -97,9 +93,9 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
});
}
rowClicked(dataset: DatasetListingModel) {
this.router.navigate(['/datasets/publicEdit/' + dataset.id]);
}
// rowClicked(dataset: DatasetListingModel) {
// this.router.navigate(['/datasets/publicEdit/' + dataset.id]);
// }
onCriteriaChange(event: ExploreDatasetCriteriaModel) {
this.exploreDatasetCriteriaModel = event;

96
dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html
View File

@ -1,57 +1,59 @@
<div class="listing-item" (click)="itemClicked()">
<div class="col">
<div class="row">
<div class="col-12 gray-container container-header">
<p>{{ dataset.grantAbbreviation }}</p>
<!-- <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto"
(click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button> -->
</div>
</div>
<div class="row">
<div class="col-12 title">
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.FINALIZED' | translate}}" class="finalized-bookmark">bookmark</mat-icon>
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
</div>
</div>
<div class="row">
<div class="col-12">
<p class="mt-1 mb-2">{{dataset.description}}</p>
</div>
</div>
<div class="row">
<div class="col-auto about-item">
<div class="row">
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">storage</mat-icon>
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
<div class="listing-item">
<a [routerLink]="['/datasets/publicEdit/' + dataset.id]">
<div class="col">
<div class="row">
<div class="col-12 gray-container container-header">
<p>{{ dataset.grantAbbreviation }}</p>
<!-- <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto"
(click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon>
</button> -->
</div>
</div>
<div class="col-auto about-item">
<div class="row">
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">work_outline</mat-icon>
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
<div class="row">
<div class="col-12 title">
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.FINALIZED' | translate}}" class="finalized-bookmark">bookmark</mat-icon>
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
</div>
</div>
<div class="col-auto about-item">
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
<div class="pt-1">
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
<div class="row">
<div class="col-12">
<p class="mt-1 mb-2">{{dataset.description}}</p>
</div>
</div>
<div class="col-12 about-item">
<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.dmpPublishedAt | date: "shortDate"}}</p>
<div class="row">
<div class="col-auto about-item">
<div class="row">
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">storage</mat-icon>
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
</div>
</div>
<div class="col-auto about-item">
<div class="row">
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">work_outline</mat-icon>
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
</div>
</div>
<div class="col-auto about-item">
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
<div class="pt-1">
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
</div>
</div>
<div class="col-12 about-item">
<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.dmpPublishedAt | date: "shortDate"}}</p>
</div>
</div>
</div>
<!-- <div class="info">
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.grant }}</p>
</div>
<div class="row" style="margin-left: 0px !important">
<div class="chip">
<p>{{ dataset.profile }}</p>
<!-- <div class="info">
<h6>{{ dataset.dmp }}</h6>
<p>{{ dataset.grant }}</p>
</div>
</div> -->
</div>
<div class="row" style="margin-left: 0px !important">
<div class="chip">
<p>{{ dataset.profile }}</p>
</div>
</div> -->
</div>
</a>
</div>
<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->

5
dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss
View File

@ -20,6 +20,7 @@
h4 {
display: inline;
padding-left: 1em;
color: #333333;
}
.title h4 {
@ -48,6 +49,10 @@ h4 {
color: #aaaaaa;
}
p {
color: #333333;
}
// .explore-dataset-info {
// background-color: #f6f6f6;
// padding: 8px 15px;

6
dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.ts
View File

@ -22,8 +22,8 @@ export class ExploreDatasetListingItemComponent implements OnInit {
else { this.isDraft = false }
}
itemClicked() {
this.onClick.emit(this.dataset);
}
// itemClicked() {
// this.onClick.emit(this.dataset);
// }
}

2
dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html
View File

@ -21,7 +21,7 @@
</div>
<div class="col-12 col-sm-12 col-md-9 pt-4">
<div *ngFor="let item of listingItems; let i = index">
<app-explore-dmp-listing-item-component [showDivider]="i !== (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-explore-dmp-listing-item-component>
<app-explore-dmp-listing-item-component [showDivider]="i !== (listingItems.length - 1)" [dmp]="item"></app-explore-dmp-listing-item-component>
</div>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator>
</div>

10
dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.ts
View File

@ -1,5 +1,5 @@
import {of as observableOf, Observable } from 'rxjs';
import { of as observableOf, Observable } from 'rxjs';
import { Component, OnInit, ViewChild } from "@angular/core";
import { MatPaginator } from "@angular/material/paginator";
import { MatSort } from "@angular/material/sort";
@ -29,6 +29,7 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
totalCount: number;
listingItems: DmpListingModel[] = [];
breadCrumbs: Observable<BreadcrumbItem[]>;
linkToDmpId: string;
constructor(
private dmpService: DmpService,
@ -67,9 +68,6 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
});
}
rowClicked(dmp: DmpListingModel) {
this.router.navigate(['overview', dmp.id], { relativeTo: this.route });
}
getDefaultCriteria(): ExploreDmpCriteriaModel {
const defaultCriteria = new ExploreDmpCriteriaModel();
@ -86,6 +84,10 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
this.refresh();
}
// rowClicked(dmp: DmpListingModel) {
// this.router.navigate(['overview', dmp.id], { relativeTo: this.route });
// }
// @ViewChild(MatPaginator) _paginator: MatPaginator;
// @ViewChild(MatSort) sort: MatSort;
// criteria: ExploreDmpCriteriaModel = new ExploreDmpCriteriaModel();

70
dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.html
View File

@ -1,42 +1,44 @@
<div class="listing-item">
<div class="col" (click)="itemClicked()">
<div class="row">
<div class="col-12 gray-container container-header">
{{dmp.grantAbbreviation}}
</div>
</div>
<div class="row d-flex flex-wrap">
<div class="col-auto">
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon>
</div>
<div class="col pl-0">
<h4 class="title pl-0">{{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-auto about-item">
<!-- <mat-icon class="gray-icon pt-2">settings</mat-icon> -->
<!-- <h4 class="mt-2 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4> -->
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2">storage</mat-icon>
<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
</div>
<div class="col-auto about-item">
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" 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>
<a [routerLink]="['overview/' + this.dmp.id]">
<div class="col">
<div class="row">
<div class="col-12 gray-container container-header">
{{dmp.grantAbbreviation}}
</div>
</div>
<div class="col-12 about-item">
<p>{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
<div class="row d-flex flex-wrap">
<div class="col-auto">
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon>
</div>
<div class="col pl-0">
<h4 class="title pl-0">{{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-auto about-item">
<!-- <mat-icon class="gray-icon pt-2">settings</mat-icon> -->
<!-- <h4 class="mt-2 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4> -->
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2">storage</mat-icon>
<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
</div>
<div class="col-auto about-item">
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" 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>
</div>
<div class="col-12 about-item">
<p>{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
</div>
</div>
</div>
</div>
</a>
</div>

6
dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.scss
View File

@ -23,7 +23,7 @@
.about-item .length {
color: #00b29f;
// color: #089dbb;
// color: #089dbb;
}
.about-item .title {
@ -62,6 +62,10 @@ h4 > span {
text-transform: uppercase;
}
p {
color: #333333;
}
// .explore-dmp-listing-item {
// margin-top: 2em;
// margin-bottom: 2em;

11
dmp-frontend/src/app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component.ts
View File

@ -3,6 +3,7 @@ import { DmpListingModel } from '../../../core/model/dmp/dmp-listing';
import { Principal } from '../../../core/model/auth/Principal';
import { AuthService } from '../../../core/services/auth/auth.service';
import { TranslateService } from '@ngx-translate/core';
import { Router, ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-explore-dmp-listing-item-component',
@ -17,15 +18,17 @@ export class ExploreDmpListingItemComponent implements OnInit {
constructor(
private authentication: AuthService,
private translate: TranslateService
private translate: TranslateService,
private router: Router,
private route: ActivatedRoute
) { }
ngOnInit() {
}
itemClicked() {
this.onClick.emit(this.dmp);
}
// itemClicked() {
// this.onClick.emit(this.dmp);
// }
roleDisplay(value: any) {
const principal: Principal = this.authentication.current();