dmp listing style changed
This commit is contained in:
parent
e232dbb83a
commit
7388cb479b
|
@ -3,13 +3,13 @@ import { CommonUiModule } from '../../common/ui/common-ui.module';
|
||||||
import { CardComponent } from './card/card.component';
|
import { CardComponent } from './card/card.component';
|
||||||
import { DashboardComponent } from './dashboard.component';
|
import { DashboardComponent } from './dashboard.component';
|
||||||
import { DashboardRoutingModule } from './dashboard.routing';
|
import { DashboardRoutingModule } from './dashboard.routing';
|
||||||
|
import { DraftsComponent } from './drafts/drafts.component';
|
||||||
|
import { InfoCounterComponent } from './info-counter/info-counter.component';
|
||||||
import { QuickWizardCreateAdd } from './quick-wizard-create-add/quick-wizard-create-add.component';
|
import { QuickWizardCreateAdd } from './quick-wizard-create-add/quick-wizard-create-add.component';
|
||||||
import { RecentActivityComponent } from './recent-activity/recent-activity.component';
|
import { RecentActivityComponent } from './recent-activity/recent-activity.component';
|
||||||
import { WizardComponent } from './wizard/wizard.component';
|
|
||||||
import { InfoCounterComponent } from './info-counter/info-counter.component';
|
|
||||||
import { RecentVisitedActivityComponent } from './recent-visited-activity/recent-visited-activity.component';
|
|
||||||
import { RecentEditedActivityComponent } from './recent-edited-activity/recent-edited-activity.component';
|
import { RecentEditedActivityComponent } from './recent-edited-activity/recent-edited-activity.component';
|
||||||
import { DraftsComponent } from './drafts/drafts.component';
|
import { RecentVisitedActivityComponent } from './recent-visited-activity/recent-visited-activity.component';
|
||||||
|
import { WizardComponent } from './wizard/wizard.component';
|
||||||
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
|
@ -16,11 +16,12 @@ import { DynamicFieldsProjectComponent } from './editor/dynamic-fields-project/d
|
||||||
import { InvitationAcceptedComponent } from './invitation/accepted/dmp-invitation-accepted.component';
|
import { InvitationAcceptedComponent } from './invitation/accepted/dmp-invitation-accepted.component';
|
||||||
import { DmpInvitationDialogComponent } from './invitation/dmp-invitation.component';
|
import { DmpInvitationDialogComponent } from './invitation/dmp-invitation.component';
|
||||||
import { DmpCriteriaComponent } from './listing/criteria/dmp-criteria.component';
|
import { DmpCriteriaComponent } from './listing/criteria/dmp-criteria.component';
|
||||||
|
import { DmpUploadDialogue } from './listing/criteria/upload-dialogue/dmp-upload-dialogue.component';
|
||||||
import { DmpListingComponent } from './listing/dmp-listing.component';
|
import { DmpListingComponent } from './listing/dmp-listing.component';
|
||||||
|
import { DmpListingItemComponent } from './listing/listing-item/dmp-listing-item.component';
|
||||||
import { DmpWizardComponent } from './wizard/dmp-wizard.component';
|
import { DmpWizardComponent } from './wizard/dmp-wizard.component';
|
||||||
import { DmpWizardEditorComponent } from './wizard/editor/dmp-wizard-editor.component';
|
import { DmpWizardEditorComponent } from './wizard/editor/dmp-wizard-editor.component';
|
||||||
import { DmpWizardDatasetListingComponent } from './wizard/listing/dmp-wizard-dataset-listing.component';
|
import { DmpWizardDatasetListingComponent } from './wizard/listing/dmp-wizard-dataset-listing.component';
|
||||||
import { DmpUploadDialogue } from './listing/criteria/upload-dialogue/dmp-upload-dialogue.component';
|
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
imports: [
|
imports: [
|
||||||
|
@ -47,7 +48,8 @@ import { DmpUploadDialogue } from './listing/criteria/upload-dialogue/dmp-upload
|
||||||
DynamicDmpFieldResolverComponent,
|
DynamicDmpFieldResolverComponent,
|
||||||
DynamicFieldsProjectComponent,
|
DynamicFieldsProjectComponent,
|
||||||
DynamicFieldProjectComponent,
|
DynamicFieldProjectComponent,
|
||||||
DmpUploadDialogue
|
DmpUploadDialogue,
|
||||||
|
DmpListingItemComponent
|
||||||
],
|
],
|
||||||
entryComponents: [
|
entryComponents: [
|
||||||
DmpInvitationDialogComponent,
|
DmpInvitationDialogComponent,
|
||||||
|
|
|
@ -4,22 +4,22 @@
|
||||||
<mat-card-title>
|
<mat-card-title>
|
||||||
<h4>{{'CRITERIA.FILTERS'| translate}}</h4>
|
<h4>{{'CRITERIA.FILTERS'| translate}}</h4>
|
||||||
</mat-card-title>
|
</mat-card-title>
|
||||||
<div class="col"></div>
|
|
||||||
<button class="importButton" mat-raised-button color="primary" (click)="fileSave($event)" type="button col-auto">
|
|
||||||
{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}
|
|
||||||
</button>
|
|
||||||
</mat-card-header>
|
</mat-card-header>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<mat-form-field class="col-md-6">
|
<mat-form-field class="col-12">
|
||||||
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="projectCriteriaLike" [formControl]="formGroup.get('like')"
|
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="projectCriteriaLike" [formControl]="formGroup.get('like')" (ngModelChange)="controlModified()">
|
||||||
(ngModelChange)="controlModified()">
|
|
||||||
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
<mat-form-field *ngIf="showProject" class="col-md-6">
|
<mat-form-field *ngIf="showProject" class="col-12">
|
||||||
<app-multiple-auto-complete [formControl]="formGroup.get('projects')" placeholder="{{'CRITERIA.DMP.PROJECTS' | translate}}"
|
<app-multiple-auto-complete [formControl]="formGroup.get('projects')" placeholder="{{'CRITERIA.DMP.PROJECTS' | translate}}" [configuration]="projectAutoCompleteConfiguration">
|
||||||
[configuration]="projectAutoCompleteConfiguration">
|
|
||||||
</app-multiple-auto-complete>
|
</app-multiple-auto-complete>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
<div class="col-12"><button class="importButton" mat-raised-button color="primary" (click)="fileSave($event)" type="button col-auto">
|
||||||
|
{{'DMP-UPLOAD.ACTIONS.IMPORT' | translate}}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mat-card>
|
</mat-card>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,111 +1,107 @@
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<div class="container-fluid">
|
<div class="container-fluid">
|
||||||
<div class="dmp-listing">
|
<div class="card">
|
||||||
<h3>{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
|
<div class="card-header card-header-plain d-flex">
|
||||||
|
<div class="card-desc d-flex flex-column justify-content-center">
|
||||||
<app-dmp-criteria-component [showProject]="showProject"></app-dmp-criteria-component>
|
<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}} {{titlePrefix}}</h4>
|
||||||
<mat-card class="mat-card">
|
<p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p>
|
||||||
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
|
</div>
|
||||||
|
<div class="d-flex align-items-center ml-auto p-2">
|
||||||
|
<button mat-raised-button color="primary" class="text-uppercase" [routerLink]="projectId ? ['/plans/new/project/', projectId] : ['./new'] ">
|
||||||
<!-- Column Definition: Name -->
|
<mat-icon>add</mat-icon> {{'DMP-LISTING.ACTIONS.NEW' | translate}}
|
||||||
<ng-container cdkColumnDef="name">
|
</button>
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DMP-LISTING.COLUMNS.NAME' | translate}}
|
</div>
|
||||||
</mat-header-cell>
|
</div>
|
||||||
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
|
<div class="card-body table-responsive">
|
||||||
</ng-container>
|
<div class="dmp-listing row">
|
||||||
|
<app-dmp-criteria-component [showProject]="showProject" class="col-auto"></app-dmp-criteria-component>
|
||||||
<!-- Column Definition: Project -->
|
<div class="col">
|
||||||
<ng-container cdkColumnDef="project">
|
<mat-card class="mat-card">
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|project:label">{{'DMP-LISTING.COLUMNS.PROJECT' |
|
<div class="row" *ngFor="let item of listingItems">
|
||||||
translate}}</mat-header-cell>
|
<app-dmp-listing-item-component class="col-12" [dmp]="item" (onClick)="rowClicked($event)"></app-dmp-listing-item-component>
|
||||||
<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
|
</div>
|
||||||
</ng-container>
|
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
|
||||||
|
</mat-card>
|
||||||
<!-- Column Definition: Profile -->
|
</div>
|
||||||
<ng-container cdkColumnDef="status">
|
</div>
|
||||||
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
|
</div>
|
||||||
<mat-cell *matCellDef="let row"> {{enumUtils.toDmpStatusString(row.status)}} </mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Column Definition: Researchers -->
|
|
||||||
<ng-container cdkColumnDef="creationTime">
|
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header="created">
|
|
||||||
{{'DMP-LISTING.COLUMNS.CREATION-TIME' | translate}}</mat-header-cell>
|
|
||||||
<mat-cell *matCellDef="let row"> {{row.creationTime | date:'shortDate'}} </mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Column Definition: Organisations -->
|
|
||||||
<ng-container cdkColumnDef="organisations">
|
|
||||||
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ORGANISATIONS' | translate}}</mat-header-cell>
|
|
||||||
<mat-cell *matCellDef="let row"> {{row.organisations}} </mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Column Definition: Version -->
|
|
||||||
<ng-container cdkColumnDef="version">
|
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header="version">
|
|
||||||
{{'DMP-LISTING.COLUMNS.LATEST_VERSION' | translate}}</mat-header-cell>
|
|
||||||
<mat-cell *matCellDef="let row">
|
|
||||||
|
|
||||||
|
|
||||||
{{row.version}}
|
|
||||||
|
|
||||||
<!-- <div class="row">
|
|
||||||
<div class="col"></div>
|
|
||||||
<div class="col-auto">{{row.version}}</div>
|
|
||||||
<div class="col"></div>
|
|
||||||
</div> -->
|
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Column Definition: Datasets -->
|
|
||||||
<ng-container cdkColumnDef="datasets">
|
|
||||||
<mat-header-cell *matHeaderCellDef mat-sort-header="|count|dataset">
|
|
||||||
{{'DMP-LISTING.COLUMNS.DATASETS' | translate}}</mat-header-cell>
|
|
||||||
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
|
|
||||||
<app-url-listing [items]="row.datasets" [urlLimit]="5" [parameters]="{ datasetLabel: row.label }">
|
|
||||||
</app-url-listing>
|
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<ng-container cdkColumnDef="actions">
|
|
||||||
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
|
|
||||||
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
|
|
||||||
<mat-menu #actionsMenu="matMenu">
|
|
||||||
<button mat-menu-item (click)="openShareDialog(row.id,row.label)">
|
|
||||||
<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
|
|
||||||
</button>
|
|
||||||
<button mat-menu-item (click)="addDataset(row.id)">
|
|
||||||
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
|
|
||||||
</button>
|
|
||||||
<button mat-menu-item (click)="showDatasets(row.id, row.label)">
|
|
||||||
<mat-icon>list</mat-icon>{{'DMP-LISTING.ACTIONS.DATASETS' | translate}}
|
|
||||||
</button>
|
|
||||||
<button mat-menu-item (click)="viewVersions(row.groupId, row.label)">
|
|
||||||
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
|
|
||||||
</button>
|
|
||||||
</mat-menu>
|
|
||||||
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
|
|
||||||
<mat-icon>more_vert</mat-icon>
|
|
||||||
</button>
|
|
||||||
</mat-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
|
||||||
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row>
|
|
||||||
|
|
||||||
</mat-table>
|
|
||||||
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
|
|
||||||
</mat-paginator>
|
|
||||||
</mat-card>
|
|
||||||
|
|
||||||
<button *ngIf="!projectId" mat-fab class="mat-fab-bottom-right" color="primary" [routerLink]=" ['./new'] ">
|
|
||||||
<mat-icon class="mat-24">add</mat-icon>
|
|
||||||
</button>
|
|
||||||
<button *ngIf="projectId" mat-fab class="mat-fab-bottom-right" color="primary"
|
|
||||||
[routerLink]=" ['/plans/new/project/', projectId] ">
|
|
||||||
<mat-icon class="mat-24">add</mat-icon>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
|
||||||
|
|
||||||
|
|
||||||
|
<ng-container cdkColumnDef="name">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DMP-LISTING.COLUMNS.NAME' | translate}}
|
||||||
|
</mat-header-cell>
|
||||||
|
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container cdkColumnDef="project">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|project:label">{{'DMP-LISTING.COLUMNS.PROJECT' |
|
||||||
|
translate}}</mat-header-cell>
|
||||||
|
<mat-cell *matCellDef="let row"> {{row.project}} </mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container cdkColumnDef="status">
|
||||||
|
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.STATUS' | translate}}</mat-header-cell>
|
||||||
|
<mat-cell *matCellDef="let row"> {{enumUtils.toDmpStatusString(row.status)}} </mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container cdkColumnDef="creationTime">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header="created">
|
||||||
|
{{'DMP-LISTING.COLUMNS.CREATION-TIME' | translate}}</mat-header-cell>
|
||||||
|
<mat-cell *matCellDef="let row"> {{row.creationTime | date:'shortDate'}} </mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container cdkColumnDef="organisations">
|
||||||
|
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ORGANISATIONS' | translate}}</mat-header-cell>
|
||||||
|
<mat-cell *matCellDef="let row"> {{row.organisations}} </mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container cdkColumnDef="version">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header="version">
|
||||||
|
{{'DMP-LISTING.COLUMNS.LATEST_VERSION' | translate}}</mat-header-cell>
|
||||||
|
<mat-cell *matCellDef="let row">
|
||||||
|
{{row.version}}
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container cdkColumnDef="datasets">
|
||||||
|
<mat-header-cell *matHeaderCellDef mat-sort-header="|count|dataset">
|
||||||
|
{{'DMP-LISTING.COLUMNS.DATASETS' | translate}}</mat-header-cell>
|
||||||
|
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
|
||||||
|
<app-url-listing [items]="row.datasets" [urlLimit]="5" [parameters]="{ datasetLabel: row.label }">
|
||||||
|
</app-url-listing>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<ng-container cdkColumnDef="actions">
|
||||||
|
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
|
||||||
|
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
|
||||||
|
<mat-menu #actionsMenu="matMenu">
|
||||||
|
<button mat-menu-item (click)="openShareDialog(row.id,row.label)">
|
||||||
|
<mat-icon>share</mat-icon>{{'DMP-LISTING.ACTIONS.INVITE' | translate}}
|
||||||
|
</button>
|
||||||
|
<button mat-menu-item (click)="addDataset(row.id)">
|
||||||
|
<mat-icon>add</mat-icon>{{'DMP-LISTING.ACTIONS.ADD-DATASET' | translate}}
|
||||||
|
</button>
|
||||||
|
<button mat-menu-item (click)="showDatasets(row.id, row.label)">
|
||||||
|
<mat-icon>list</mat-icon>{{'DMP-LISTING.ACTIONS.DATASETS' | translate}}
|
||||||
|
</button>
|
||||||
|
<button mat-menu-item (click)="viewVersions(row.groupId, row.label)">
|
||||||
|
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
|
||||||
|
</button>
|
||||||
|
</mat-menu>
|
||||||
|
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
|
||||||
|
<mat-icon>more_vert</mat-icon>
|
||||||
|
</button>
|
||||||
|
</mat-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||||
|
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="rowClick(row.id);"></mat-row>
|
||||||
|
|
||||||
|
</mat-table>
|
||||||
|
<mat-paginator #paginator [length]="dataSource?.totalCount" [pageSizeOptions]="[10, 25, 100]">
|
||||||
|
</mat-paginator> -->
|
||||||
|
|
|
@ -3,26 +3,4 @@
|
||||||
.mat-card {
|
.mat-card {
|
||||||
margin: 1em 0;
|
margin: 1em 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-row {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
mat-row:hover {
|
|
||||||
background-color: lightgray;
|
|
||||||
}
|
|
||||||
|
|
||||||
mat-row:nth-child(odd) {
|
|
||||||
background-color: #eef0fb;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-fab-bottom-right {
|
|
||||||
// top: auto !important;
|
|
||||||
// right: 20px !important;
|
|
||||||
// bottom: 10px !important;
|
|
||||||
// left: auto !important;
|
|
||||||
// position: fixed !important;
|
|
||||||
float: right;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,20 +1,19 @@
|
||||||
import { DataSource } from '@angular/cdk/table';
|
|
||||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||||
import { MatDialog, MatPaginator, MatSort } from '@angular/material';
|
import { MatDialog, MatPaginator, MatSort } from '@angular/material';
|
||||||
import { ActivatedRoute, Router } from '@angular/router';
|
import { ActivatedRoute, Router } from '@angular/router';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { takeUntil } from 'rxjs/operators';
|
import { takeUntil } from 'rxjs/operators';
|
||||||
import { BaseComponent } from '../../../core/common/base/base.component';
|
import { BaseComponent } from '../../../core/common/base/base.component';
|
||||||
|
import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
|
||||||
import { DmpListingModel } from '../../../core/model/dmp/dmp-listing';
|
import { DmpListingModel } from '../../../core/model/dmp/dmp-listing';
|
||||||
|
import { ProjectListingModel } from '../../../core/model/project/project-listing';
|
||||||
import { DmpCriteria } from '../../../core/query/dmp/dmp-criteria';
|
import { DmpCriteria } from '../../../core/query/dmp/dmp-criteria';
|
||||||
import { DmpService } from '../../../core/services/dmp/dmp.service';
|
import { DmpService } from '../../../core/services/dmp/dmp.service';
|
||||||
import { EnumUtils } from '../../../core/services/utilities/enum-utils.service';
|
import { EnumUtils } from '../../../core/services/utilities/enum-utils.service';
|
||||||
import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
|
|
||||||
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
|
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
|
||||||
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
|
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
|
||||||
import { DmpInvitationDialogComponent } from '../invitation/dmp-invitation.component';
|
import { DmpInvitationDialogComponent } from '../invitation/dmp-invitation.component';
|
||||||
import { DmpCriteriaComponent } from './criteria/dmp-criteria.component';
|
import { DmpCriteriaComponent } from './criteria/dmp-criteria.component';
|
||||||
import { ProjectListingModel } from '../../../core/model/project/project-listing';
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-dmp-listing-component',
|
selector: 'app-dmp-listing-component',
|
||||||
|
@ -28,12 +27,13 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
|
||||||
@ViewChild(DmpCriteriaComponent) criteria: DmpCriteriaComponent;
|
@ViewChild(DmpCriteriaComponent) criteria: DmpCriteriaComponent;
|
||||||
|
|
||||||
breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
|
breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
|
||||||
dataSource: DmpDataSource | null;
|
|
||||||
displayedColumns: String[] = ['name', 'project', 'status', 'creationTime', 'organisations', 'version', 'datasets', 'actions'];
|
|
||||||
itemId: string;
|
itemId: string;
|
||||||
projectId: string;
|
projectId: string;
|
||||||
showProject: boolean;
|
showProject: boolean;
|
||||||
titlePrefix: string;
|
titlePrefix: string;
|
||||||
|
totalCount: number;
|
||||||
|
listingItems: DmpListingModel[] = [];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private dmpService: DmpService,
|
private dmpService: DmpService,
|
||||||
private router: Router,
|
private router: Router,
|
||||||
|
@ -89,11 +89,32 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
|
||||||
}
|
}
|
||||||
|
|
||||||
refresh() {
|
refresh() {
|
||||||
this.dataSource = new DmpDataSource(this.dmpService, this._paginator, this.sort, this.criteria, this.itemId);
|
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
|
||||||
|
let fields: Array<string> = new Array();
|
||||||
|
if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
|
||||||
|
const request = new DataTableRequest<DmpCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
|
||||||
|
request.criteria = this.criteria.formGroup.value;
|
||||||
|
if (this.itemId) {
|
||||||
|
request.criteria.groupIds = [this.itemId];
|
||||||
|
request.criteria.allVersions = true;
|
||||||
|
}
|
||||||
|
this.dmpService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
|
||||||
|
if (!result) { return []; }
|
||||||
|
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||||
|
result.data.map(item => {
|
||||||
|
item['datasets'].map(dmp => {
|
||||||
|
dmp.url = 'datasets/edit/' + dmp.url;
|
||||||
|
dmp.all = 'datasets/dmp/' + item.id;
|
||||||
|
return dmp;
|
||||||
|
});
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
this.listingItems = result.data;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
rowClick(rowId: String) {
|
rowClicked(dmp: DmpListingModel) {
|
||||||
this.router.navigate(['/plans/edit/' + rowId]);
|
this.router.navigate(['/plans/edit/' + dmp.id]);
|
||||||
}
|
}
|
||||||
|
|
||||||
addDataset(rowId: String) {
|
addDataset(rowId: String) {
|
||||||
|
@ -125,68 +146,68 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export class DmpDataSource extends DataSource<DmpListingModel> {
|
// export class DmpDataSource extends DataSource<DmpListingModel> {
|
||||||
|
|
||||||
totalCount = 0;
|
// totalCount = 0;
|
||||||
|
|
||||||
constructor(
|
// constructor(
|
||||||
private _service: DmpService,
|
// private _service: DmpService,
|
||||||
private _paginator: MatPaginator,
|
// private _paginator: MatPaginator,
|
||||||
private _sort: MatSort,
|
// private _sort: MatSort,
|
||||||
private _criteria: DmpCriteriaComponent,
|
// private _criteria: DmpCriteriaComponent,
|
||||||
private itemId
|
// private itemId
|
||||||
) {
|
// ) {
|
||||||
super();
|
// super();
|
||||||
}
|
// }
|
||||||
|
|
||||||
connect(): Observable<DmpListingModel[]> {
|
// connect(): Observable<DmpListingModel[]> {
|
||||||
const displayDataChanges = [
|
// const displayDataChanges = [
|
||||||
this._paginator.page
|
// this._paginator.page
|
||||||
];
|
// ];
|
||||||
|
|
||||||
return Observable.merge(...displayDataChanges)
|
// return Observable.merge(...displayDataChanges)
|
||||||
.startWith(null)
|
// .startWith(null)
|
||||||
.switchMap(() => {
|
// .switchMap(() => {
|
||||||
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
|
// const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
|
||||||
let fields: Array<string> = new Array();
|
// let fields: Array<string> = new Array();
|
||||||
if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
|
// if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
|
||||||
const request = new DataTableRequest<DmpCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
|
// const request = new DataTableRequest<DmpCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
|
||||||
request.criteria = this._criteria.formGroup.value;
|
// request.criteria = this._criteria.formGroup.value;
|
||||||
if (this.itemId) {
|
// if (this.itemId) {
|
||||||
request.criteria.groupIds = [this.itemId];
|
// request.criteria.groupIds = [this.itemId];
|
||||||
request.criteria.allVersions = true;
|
// request.criteria.allVersions = true;
|
||||||
}
|
// }
|
||||||
return this._service.getPaged(request, "listing");
|
// return this._service.getPaged(request, "listing");
|
||||||
})
|
// })
|
||||||
/*.catch((error: any) => {
|
// /*.catch((error: any) => {
|
||||||
this._snackBar.openFromComponent(SnackBarNotificationComponent, {
|
// this._snackBar.openFromComponent(SnackBarNotificationComponent, {
|
||||||
data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService },
|
// data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService },
|
||||||
duration: 3000,
|
// duration: 3000,
|
||||||
extraClasses: ['snackbar-warning']
|
// extraClasses: ['snackbar-warning']
|
||||||
});
|
// });
|
||||||
return Observable.of(null);
|
// return Observable.of(null);
|
||||||
})*/
|
// })*/
|
||||||
.map(result => {
|
// .map(result => {
|
||||||
result.data = result.data;
|
// result.data = result.data;
|
||||||
return result;
|
// return result;
|
||||||
})
|
// })
|
||||||
.map(result => {
|
// .map(result => {
|
||||||
return result;
|
// return result;
|
||||||
})
|
// })
|
||||||
.map(result => {
|
// .map(result => {
|
||||||
if (!result) { return []; }
|
// if (!result) { return []; }
|
||||||
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
// if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||||
return result.data.map(item => {
|
// return result.data.map(item => {
|
||||||
item['datasets'].map(dmp => {
|
// item['datasets'].map(dmp => {
|
||||||
dmp.url = 'datasets/edit/' + dmp.url;
|
// dmp.url = 'datasets/edit/' + dmp.url;
|
||||||
dmp.all = 'datasets/dmp/' + item.id;
|
// dmp.all = 'datasets/dmp/' + item.id;
|
||||||
return dmp;
|
// return dmp;
|
||||||
});
|
// });
|
||||||
return item;
|
// return item;
|
||||||
});
|
// });
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
|
|
||||||
disconnect() {
|
// disconnect() {
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
|
@ -0,0 +1,38 @@
|
||||||
|
<div class="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 type-icon">storage</mat-icon>
|
||||||
|
<h4 class="col-auto m-0 p-0">4</h4>
|
||||||
|
<div class="col-auto dmp-chip ml-2">TEMPLATE</div>
|
||||||
|
<div class="col-auto dmp-chip ml-2">TEMPLATE</div>
|
||||||
|
<div class="col-auto dmp-chip ml-2">TEMPLATE</div>
|
||||||
|
<div class="col-auto dmp-chip ml-2">TEMPLATE</div>
|
||||||
|
<div class="col-auto dmp-chip ml-2">TEMPLATE</div>
|
||||||
|
<div class="col-auto dmp-chip ml-2">TEMPLATE</div>
|
||||||
|
</div>
|
||||||
|
<div class="row d-flex align-items-center my-1">
|
||||||
|
<mat-icon class="col-auto type-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 type-icon">group</mat-icon>
|
||||||
|
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
|
||||||
|
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
|
||||||
|
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
|
||||||
|
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
|
||||||
|
<div class="col-auto dmp-squared-chip mr-2">JOHN DOE</div>
|
||||||
|
<div class="col-auto 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>
|
|
@ -0,0 +1,38 @@
|
||||||
|
.dmp-listing-item {
|
||||||
|
margin-top: 2em;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-title {
|
||||||
|
color: rgb(93, 125, 173);
|
||||||
|
}
|
||||||
|
|
||||||
|
.type-icon {
|
||||||
|
color: rgb(191, 191, 191);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dmp-chip {
|
||||||
|
padding: 0.1em 1em;
|
||||||
|
border: 0.1em solid rgb(236, 241, 249);
|
||||||
|
border-radius: 10em;
|
||||||
|
background-color: rgb(236, 241, 249);
|
||||||
|
color: rgb(68, 114, 196);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dmp-squared-chip {
|
||||||
|
padding: 0.1em 1em;
|
||||||
|
border: 0.1em solid rgb(236, 241, 249);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
background-color: rgb(246, 246, 246);
|
||||||
|
color: rgb(127, 127, 127);
|
||||||
|
}
|
||||||
|
|
||||||
|
mat-icon {
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,26 @@
|
||||||
|
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||||
|
import { DmpListingModel } from '../../../../core/model/dmp/dmp-listing';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-dmp-listing-item-component',
|
||||||
|
templateUrl: './dmp-listing-item.component.html',
|
||||||
|
styleUrls: ['./dmp-listing-item.component.scss'],
|
||||||
|
})
|
||||||
|
export class DmpListingItemComponent implements OnInit {
|
||||||
|
|
||||||
|
@Input() dmp: DmpListingModel;
|
||||||
|
@Input() showDivider: boolean = true;
|
||||||
|
@Output() onClick: EventEmitter<DmpListingModel> = new EventEmitter();
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
|
||||||
|
) {
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
}
|
||||||
|
|
||||||
|
itemClicked() {
|
||||||
|
this.onClick.emit(this.dmp);
|
||||||
|
}
|
||||||
|
}
|
|
@ -225,6 +225,7 @@
|
||||||
"STATUS": "Status"
|
"STATUS": "Status"
|
||||||
},
|
},
|
||||||
"ACTIONS": {
|
"ACTIONS": {
|
||||||
|
"NEW":"New Data Management Plan",
|
||||||
"EDIT": "Edit",
|
"EDIT": "Edit",
|
||||||
"INVITE": "Invite Contributors",
|
"INVITE": "Invite Contributors",
|
||||||
"ADD-DATASET": "Add Dataset To DMP",
|
"ADD-DATASET": "Add Dataset To DMP",
|
||||||
|
|
Loading…
Reference in New Issue