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

View File

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

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

View File

@ -1,4 +1,5 @@
<div class="listing-item" (click)="itemClicked()"> <div class="listing-item">
<a [routerLink]="['/datasets/edit/' + dataset.id]">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-12 gray-container container-header"> <div class="col-12 gray-container container-header">
@ -29,20 +30,20 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col-auto about-item"> <div class="col-auto about-item">
<div class="row"> <a class="row storage" [routerLink]="['/plans/edit/' + dataset.dmpId]">
<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2"> <mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">
storage storage
</mat-icon> </mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dataset)" class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4> <h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
</div> </a>
</div> </div>
<div class="col-auto about-item"> <div class="col-auto about-item">
<div class="row"> <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"> <mat-icon matTooltip="{{'DATASET-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">
work_outline work_outline
</mat-icon> </mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); grantClicked(dataset)" class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4> <h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
</div> </div>
</div> </div>
@ -70,5 +71,6 @@
</div> </div>
</div> --> </div> -->
</div> </div>
</a>
</div> </div>
<!-- <mat-divider *ngIf="showDivider"></mat-divider> --> <!-- <mat-divider *ngIf="showDivider"></mat-divider> -->

View File

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

View File

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

View File

@ -24,7 +24,7 @@
<div class="col-12 col-sm-12 col-md-9 pt-4"> <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> --> <!-- <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"> <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> </div>
</div> </div>

View File

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

View File

@ -1,10 +1,10 @@
<div class="listing-item"> <div class="listing-item">
<div class="col" (click)="itemClicked()"> <a [routerLink]="['/plans/overview/' + dmp.id]">
<div class="col">
<div class="row"> <div class="row">
<div class="col-12 gray-container container-header"> <div class="col-12 gray-container container-header">
<p (click)="$event.stopImmediatePropagation(); grantClicked(dmp.grantId)"> <p>{{dmp.grantAbbreviation}}</p>
{{dmp.grantAbbreviation}}</p> <button *ngIf="isDraft" mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto" (click)="$event.preventDefault(); $event.stopPropagation();">
<button *ngIf="isDraft" mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto" (click)="$event.stopImmediatePropagation();">
<mat-icon class="more-horiz">more_horiz</mat-icon> <mat-icon class="more-horiz">more_horiz</mat-icon>
</button> </button>
<mat-menu #actionsMenu="matMenu"> <mat-menu #actionsMenu="matMenu">
@ -60,13 +60,12 @@
<h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4> <h4 class="mt-1 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4>
</div> </div>
<div class="col-auto about-item"> <div class="col-auto about-item">
<div class="datasets-counter"> <a class="datasets-counter" [routerLink]="['/plans/edit/' + dmp.id]" [queryParams]="{ tab: 'datasetDescriptions' }">
<mat-icon (click)="$event.stopImmediatePropagation(); datasetClicked(dmp.id)" class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}"> <mat-icon class="gray-icon pt-2" matTooltip="{{'DMP-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}">
storage storage
</mat-icon> </mat-icon>
<h4 (click)="$event.stopImmediatePropagation(); datasetClicked(dmp.id)" class="mt-1 ml-1 mr-3 p-1"> <h4 class="mt-1 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
{{dmp.datasets.length}}</h4> </a>
</div>
</div> </div>
<div class="col-auto about-item pt-2"> <div class="col-auto about-item pt-2">
<mat-icon class="gray-icon" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon> <mat-icon class="gray-icon" matTooltip="{{'DMP-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}">assignment</mat-icon>
@ -88,6 +87,6 @@
</div> </div>
</div> --> </div> -->
</div> </div>
</a>
</div> </div>
<!-- <mat-divider *ngIf="showDivider"></mat-divider> --> <!-- <mat-divider *ngIf="showDivider"></mat-divider> -->

View File

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

View File

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

View File

@ -20,7 +20,7 @@
</div> </div>
<div class="col-12 col-sm-12 col-md-9 pt-4"> <div class="col-12 col-sm-12 col-md-9 pt-4">
<div *ngFor="let item of listingItems; let i = index"> <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> </div>
</div> </div>

View File

@ -1,4 +1,3 @@
import {of as observableOf, Observable } from 'rxjs'; import {of as observableOf, Observable } from 'rxjs';
import { Component, OnInit, ViewChild, ɵConsole } from '@angular/core'; import { Component, OnInit, ViewChild, ɵConsole } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator'; 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 { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { DmpService } from '../../core/services/dmp/dmp.service'; 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({ @Component({
@ -97,9 +93,9 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
}); });
} }
rowClicked(dataset: DatasetListingModel) { // rowClicked(dataset: DatasetListingModel) {
this.router.navigate(['/datasets/publicEdit/' + dataset.id]); // this.router.navigate(['/datasets/publicEdit/' + dataset.id]);
} // }
onCriteriaChange(event: ExploreDatasetCriteriaModel) { onCriteriaChange(event: ExploreDatasetCriteriaModel) {
this.exploreDatasetCriteriaModel = event; this.exploreDatasetCriteriaModel = event;

View File

@ -1,4 +1,5 @@
<div class="listing-item" (click)="itemClicked()"> <div class="listing-item">
<a [routerLink]="['/datasets/publicEdit/' + dataset.id]">
<div class="col"> <div class="col">
<div class="row"> <div class="row">
<div class="col-12 gray-container container-header"> <div class="col-12 gray-container container-header">
@ -53,5 +54,6 @@
</div> </div>
</div> --> </div> -->
</div> </div>
</a>
</div> </div>
<!-- <mat-divider *ngIf="showDivider"></mat-divider> --> <!-- <mat-divider *ngIf="showDivider"></mat-divider> -->

View File

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

View File

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

View File

@ -21,7 +21,7 @@
</div> </div>
<div class="col-12 col-sm-12 col-md-9 pt-4"> <div class="col-12 col-sm-12 col-md-9 pt-4">
<div *ngFor="let item of listingItems; let i = index"> <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> </div>
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator> <mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator>
</div> </div>

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

View File

@ -1,5 +1,6 @@
<div class="listing-item"> <div class="listing-item">
<div class="col" (click)="itemClicked()"> <a [routerLink]="['overview/' + this.dmp.id]">
<div class="col">
<div class="row"> <div class="row">
<div class="col-12 gray-container container-header"> <div class="col-12 gray-container container-header">
{{dmp.grantAbbreviation}} {{dmp.grantAbbreviation}}
@ -37,6 +38,7 @@
</div> </div>
</div> </div>
</div> </div>
</a>
</div> </div>

View File

@ -62,6 +62,10 @@ h4 > span {
text-transform: uppercase; text-transform: uppercase;
} }
p {
color: #333333;
}
// .explore-dmp-listing-item { // .explore-dmp-listing-item {
// margin-top: 2em; // margin-top: 2em;
// margin-bottom: 2em; // margin-bottom: 2em;

View File

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