Merge branch 'ui-refactoring' of gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot into ui-refactoring
This commit is contained in:
apapachristou
commit
2fba31012a
|
|
@ -1,46 +1,29 @@
|
|||
<div class="main-content">
|
||||
<div class="header-image">
|
||||
<div class="header-text-container">
|
||||
<h3>Welcome to OpenDMP</h3>
|
||||
<h4>Lorem ipsum dolor sit amet concectetum lorem ipsum</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explore-dmp-content">
|
||||
<div class="container-fluid">
|
||||
<div class="explore-dmp">
|
||||
<h3 class="text-center">{{'DMP-PUBLIC-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<app-explore-dmp-filters-component (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component>
|
||||
<div class="card">
|
||||
<div class="card-header card-header-blue d-flex">
|
||||
<div class="card-desc d-flex flex-column justify-content-center">
|
||||
<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}}</h4>
|
||||
<p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<mat-card class="mat-card">
|
||||
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
|
||||
<!-- Column Definition: Name -->
|
||||
<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>
|
||||
|
||||
<!-- Column Definition: Dmp -->
|
||||
<ng-container cdkColumnDef="project">
|
||||
<mat-header-cell *matHeaderCellDef>{{'DMP-LISTING.COLUMNS.PROJECT' | translate}}
|
||||
</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.project}} </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: Created -->
|
||||
<ng-container cdkColumnDef="created">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div class="card-body table-responsive">
|
||||
<div class="explore-dmp-listing row">
|
||||
<div class="col-3">
|
||||
<app-explore-dmp-filters-component class="col-auto" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="row" *ngFor="let item of listingItems; let i = index">
|
||||
<app-explore-dmp-listing-item-component class="col-12" [showDivider]="i !== (listingItems.length - 1)" [dmp]="item" (onClick)="rowClicked($event)"></app-explore-dmp-listing-item-component>
|
||||
</div>
|
||||
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,25 @@
|
|||
text-center{
|
||||
text-center {
|
||||
text-align: center
|
||||
}
|
||||
}
|
||||
|
||||
.header-image {
|
||||
background: url('/assets/images/public-dmps-bg.png') no-repeat;
|
||||
background-size: cover;
|
||||
margin-top: 70px;
|
||||
min-height: 15em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.header-text-container {
|
||||
background: rgba(255,255,255,0.7);
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
padding-left: 5em;
|
||||
padding-right: 10em;
|
||||
padding-top: 2em;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.explore-dmp-content {
|
||||
padding: 30px 15px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,12 @@
|
|||
import { BaseComponent } from "../../core/common/base/base.component";
|
||||
import { Component, OnInit, ViewChild } from "@angular/core";
|
||||
import { Router, ActivatedRoute } from "@angular/router";
|
||||
import { MatPaginator, MatSort, MatSnackBar, PageEvent } from "@angular/material";
|
||||
import { DataSource } from "@angular/cdk/collections";
|
||||
import { DmpListingModel } from "../../core/model/dmp/dmp-listing";
|
||||
import { TranslateService } from "@ngx-translate/core";
|
||||
import { Observable } from "rxjs";
|
||||
import { DmpService } from "../../core/services/dmp/dmp.service";
|
||||
import { ExploreDmpCriteriaModel } from "../../core/query/explore-dmp/explore-dmp-criteria";
|
||||
import { MatPaginator, MatSort } from "@angular/material";
|
||||
import { Router } from "@angular/router";
|
||||
import { takeUntil } from "rxjs/operators";
|
||||
import { BaseComponent } from "../../core/common/base/base.component";
|
||||
import { DataTableRequest } from "../../core/model/data-table/data-table-request";
|
||||
import { DmpCriteria } from "../../core/query/dmp/dmp-criteria";
|
||||
import { DmpListingModel } from "../../core/model/dmp/dmp-listing";
|
||||
import { ExploreDmpCriteriaModel } from "../../core/query/explore-dmp/explore-dmp-criteria";
|
||||
import { DmpService } from "../../core/services/dmp/dmp.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-explore-dmp-listing-component',
|
||||
|
|
@ -20,20 +17,15 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit
|
|||
|
||||
@ViewChild(MatPaginator) _paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
criteria: ExploreDmpCriteriaModel = new ExploreDmpCriteriaModel();
|
||||
|
||||
dataSource: DmpDataSource | null;
|
||||
displayedColumns: String[] = ['name', 'project', 'organisations', 'created'];
|
||||
pageEvent: PageEvent;
|
||||
titlePrefix: String;
|
||||
dmpId: string;
|
||||
exploreDmpCriteriaModel: ExploreDmpCriteriaModel;
|
||||
titlePrefix: string;
|
||||
totalCount: number;
|
||||
listingItems: DmpListingModel[] = [];
|
||||
|
||||
constructor(
|
||||
public dmpService: DmpService,
|
||||
private router: Router,
|
||||
private languageService: TranslateService,
|
||||
public snackBar: MatSnackBar,
|
||||
public route: ActivatedRoute
|
||||
private dmpService: DmpService,
|
||||
private router: Router
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
|
@ -42,65 +34,117 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit
|
|||
this.refresh();
|
||||
}
|
||||
|
||||
rowClick(rowId: String) {
|
||||
this.router.navigate(['/plans/publicEdit/' + rowId]);
|
||||
}
|
||||
|
||||
refresh() {
|
||||
this.dataSource = new DmpDataSource(this.dmpService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
|
||||
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<ExploreDmpCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
|
||||
request.criteria = this.exploreDmpCriteriaModel || this.getDefaultCriteria();
|
||||
this.dmpService.getPublicPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
|
||||
if (!result) { return []; }
|
||||
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||
this.listingItems = result.data;
|
||||
});
|
||||
}
|
||||
|
||||
getDefaultCriteria(dmpId: String): DmpCriteria {
|
||||
const defaultCriteria = new DmpCriteria();
|
||||
rowClicked(dmp: DmpListingModel) {
|
||||
this.router.navigate(['/plans/publicEdit/' + dmp.id]);
|
||||
}
|
||||
|
||||
getDefaultCriteria(): ExploreDmpCriteriaModel {
|
||||
const defaultCriteria = new ExploreDmpCriteriaModel();
|
||||
return defaultCriteria;
|
||||
}
|
||||
|
||||
onCriteriaChange(event: ExploreDmpCriteriaModel) {
|
||||
//console.log(event)
|
||||
this.criteria = event;
|
||||
this.exploreDmpCriteriaModel = event;
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
// @ViewChild(MatPaginator) _paginator: MatPaginator;
|
||||
// @ViewChild(MatSort) sort: MatSort;
|
||||
// criteria: ExploreDmpCriteriaModel = new ExploreDmpCriteriaModel();
|
||||
|
||||
// dataSource: DmpDataSource | null;
|
||||
// displayedColumns: String[] = ['name', 'project', 'organisations', 'created'];
|
||||
// pageEvent: PageEvent;
|
||||
// titlePrefix: String;
|
||||
// dmpId: string;
|
||||
|
||||
// constructor(
|
||||
// public dmpService: DmpService,
|
||||
// private router: Router,
|
||||
// private languageService: TranslateService,
|
||||
// public snackBar: MatSnackBar,
|
||||
// public route: ActivatedRoute
|
||||
// ) {
|
||||
// super();
|
||||
// }
|
||||
|
||||
// ngOnInit() {
|
||||
// this.refresh();
|
||||
// }
|
||||
|
||||
// rowClick(rowId: String) {
|
||||
// this.router.navigate(['/plans/publicEdit/' + rowId]);
|
||||
// }
|
||||
|
||||
// refresh() {
|
||||
// this.dataSource = new DmpDataSource(this.dmpService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
|
||||
// }
|
||||
|
||||
// getDefaultCriteria(dmpId: String): DmpCriteria {
|
||||
// const defaultCriteria = new DmpCriteria();
|
||||
// return defaultCriteria;
|
||||
// }
|
||||
|
||||
// onCriteriaChange(event: ExploreDmpCriteriaModel) {
|
||||
// //console.log(event)
|
||||
// this.criteria = event;
|
||||
// this.refresh();
|
||||
// }
|
||||
}
|
||||
|
||||
export class DmpDataSource extends DataSource<DmpListingModel> {
|
||||
// export class DmpDataSource extends DataSource<DmpListingModel> {
|
||||
|
||||
totalCount = 0;
|
||||
// totalCount = 0;
|
||||
|
||||
constructor(
|
||||
private _service: DmpService,
|
||||
private _paginator: MatPaginator,
|
||||
private _sort: MatSort,
|
||||
private _languageService: TranslateService,
|
||||
private _snackBar: MatSnackBar,
|
||||
private _criteria: ExploreDmpCriteriaModel,
|
||||
) {
|
||||
super();
|
||||
}
|
||||
// constructor(
|
||||
// private _service: DmpService,
|
||||
// private _paginator: MatPaginator,
|
||||
// private _sort: MatSort,
|
||||
// private _languageService: TranslateService,
|
||||
// private _snackBar: MatSnackBar,
|
||||
// private _criteria: ExploreDmpCriteriaModel,
|
||||
// ) {
|
||||
// super();
|
||||
// }
|
||||
|
||||
connect(): Observable<DmpListingModel[]> {
|
||||
const displayDataChanges = [
|
||||
this._paginator.page
|
||||
];
|
||||
// connect(): Observable<DmpListingModel[]> {
|
||||
// const displayDataChanges = [
|
||||
// this._paginator.page
|
||||
// ];
|
||||
|
||||
return Observable.merge(...displayDataChanges)
|
||||
.startWith(null)
|
||||
.switchMap(() => {
|
||||
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
|
||||
let fields: Array<string> = new Array();
|
||||
if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
|
||||
const request = new DataTableRequest<ExploreDmpCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
|
||||
request.criteria = this._criteria;
|
||||
//if (this.dmpId) request.criteria.allVersions = true;
|
||||
return this._service.getPublicPaged(request);
|
||||
})
|
||||
.map(result => {
|
||||
if (!result) { return []; }
|
||||
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||
return result.data;
|
||||
});
|
||||
}
|
||||
// return Observable.merge(...displayDataChanges)
|
||||
// .startWith(null)
|
||||
// .switchMap(() => {
|
||||
// const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
|
||||
// let fields: Array<string> = new Array();
|
||||
// if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
|
||||
// const request = new DataTableRequest<ExploreDmpCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
|
||||
// request.criteria = this._criteria;
|
||||
// //if (this.dmpId) request.criteria.allVersions = true;
|
||||
// return this._service.getPublicPaged(request);
|
||||
// })
|
||||
// .map(result => {
|
||||
// if (!result) { return []; }
|
||||
// if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||
// return result.data;
|
||||
// });
|
||||
// }
|
||||
|
||||
disconnect(): void {
|
||||
// No-op
|
||||
}
|
||||
}
|
||||
// disconnect(): void {
|
||||
// // No-op
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import { NgModule } from "@angular/core";
|
||||
import { CommonUiModule } from "../../common/ui/common-ui.module";
|
||||
import { CommonFormsModule } from "../../common/forms/common-forms.module";
|
||||
import { CommonUiModule } from "../../common/ui/common-ui.module";
|
||||
import { AutoCompleteModule } from "../../library/auto-complete/auto-complete.module";
|
||||
import { ExploreDmpFilterItemComponent } from "./dmp-explore-filters/explore-dmp-filter-item/explore-dmp-filter-item.component";
|
||||
import { ExploreDmpFiltersComponent } from "./dmp-explore-filters/explore-dmp-filters.component";
|
||||
import { ExploreDmpListingComponent } from "./explore-dmp-listing.component";
|
||||
import { ExploreDmpRoutingModule } from "./explore-dmp.routing";
|
||||
import { ExploreDmpFiltersComponent } from "./dmp-explore-filters/explore-dmp-filters.component";
|
||||
import { ExploreDmpFilterItemComponent } from "./dmp-explore-filters/explore-dmp-filter-item/explore-dmp-filter-item.component";
|
||||
import { ExploreDmpListingItemComponent } from "./listing-item/explore-dmp-listing-item.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
|
|
@ -17,7 +18,8 @@ import { ExploreDmpFilterItemComponent } from "./dmp-explore-filters/explore-dmp
|
|||
declarations: [
|
||||
ExploreDmpListingComponent,
|
||||
ExploreDmpFiltersComponent,
|
||||
ExploreDmpFilterItemComponent
|
||||
ExploreDmpFilterItemComponent,
|
||||
ExploreDmpListingItemComponent
|
||||
]
|
||||
})
|
||||
export class ExploreDmpModule {}
|
||||
export class ExploreDmpModule { }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,35 @@
|
|||
<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 type-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 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 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>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.explore-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);
|
||||
}
|
||||
|
||||
.explore-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);
|
||||
}
|
||||
|
||||
.explore-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-explore-dmp-listing-item-component',
|
||||
templateUrl: './explore-dmp-listing-item.component.html',
|
||||
styleUrls: ['./explore-dmp-listing-item.component.scss'],
|
||||
})
|
||||
export class ExploreDmpListingItemComponent implements OnInit {
|
||||
|
||||
@Input() dmp: DmpListingModel;
|
||||
@Input() showDivider: boolean = true;
|
||||
@Output() onClick: EventEmitter<DmpListingModel> = new EventEmitter();
|
||||
|
||||
constructor(
|
||||
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
itemClicked() {
|
||||
this.onClick.emit(this.dmp);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,42 +1,40 @@
|
|||
<mat-card class="mat-card">
|
||||
<div class="row">
|
||||
<!-- <h4 class="col-md-12">{{'CRITERIA.FILTERS'| translate}}</h4> -->
|
||||
<mat-form-field class="col-md-3">
|
||||
<input matInput placeholder=" {{'CRITERIA.PROJECTS.LIKE'| translate}}" name="projectCriteriaLike" [(ngModel)]="criteria.like"
|
||||
(ngModelChange)="controlModified()">
|
||||
</mat-form-field>
|
||||
<mat-form-field class="col-md-3">
|
||||
<input matInput (focus)="periodStartPicker.open()" (click)="periodStartPicker.open()" placeholder=" {{this.languageResolver.getBy('criteriaStart')| translate}}"
|
||||
[matDatepicker]="periodStartPicker" name="projectCriteriaPeriodStart" [(ngModel)]="criteria.periodStart"
|
||||
(ngModelChange)="controlModified()" [errorStateMatcher]="this">
|
||||
<mat-datepicker-toggle matSuffix [for]="periodStartPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #periodStartPicker></mat-datepicker>
|
||||
<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="project-criteria">
|
||||
<div class="filters">
|
||||
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
|
||||
<div class="row" style="justify-content: center;">
|
||||
<!-- <h4 class="col-md-12">{{'CRITERIA.FILTERS'| translate}}</h4> -->
|
||||
<mat-form-field class="col-11 search">
|
||||
<input matInput placeholder=" {{'CRITERIA.PROJECTS.LIKE'| translate}}" name="projectCriteriaLike" [(ngModel)]="criteria.like" (ngModelChange)="controlModified()">
|
||||
<mat-icon matSuffix class="style-icon">search</mat-icon>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="col-10 filter-category">
|
||||
<input matInput (focus)="periodStartPicker.open()" (click)="periodStartPicker.open()" placeholder=" {{this.languageResolver.getBy('criteriaStart')| translate}}" [matDatepicker]="periodStartPicker" name="projectCriteriaPeriodStart" [(ngModel)]="criteria.periodStart" (ngModelChange)="controlModified()" [errorStateMatcher]="this">
|
||||
<mat-datepicker-toggle matSuffix [for]="periodStartPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #periodStartPicker></mat-datepicker>
|
||||
<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="col-md-3">
|
||||
<input matInput (focus)="periodEndPicker.open()" (click)="periodEndPicker.open()" name="projectCriteriaPeriodEnd"
|
||||
placeholder=" {{this.languageResolver.getBy('criteriaEnd')| translate}}" [matDatepicker]="periodEndPicker"
|
||||
[(ngModel)]="criteria.periodEnd" (ngModelChange)="controlModified()" [errorStateMatcher]="this">
|
||||
<mat-datepicker-toggle matSuffix [for]="periodEndPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #periodEndPicker></mat-datepicker>
|
||||
<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="col-10 filter-category">
|
||||
<input matInput (focus)="periodEndPicker.open()" (click)="periodEndPicker.open()" name="projectCriteriaPeriodEnd" placeholder=" {{this.languageResolver.getBy('criteriaEnd')| translate}}" [matDatepicker]="periodEndPicker" [(ngModel)]="criteria.periodEnd" (ngModelChange)="controlModified()" [errorStateMatcher]="this">
|
||||
<mat-datepicker-toggle matSuffix [for]="periodEndPicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #periodEndPicker></mat-datepicker>
|
||||
<mat-error>{{'GENERAL.VALIDATION.PROJECT-START-AFTER-END' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
|
||||
<mat-form-field class="col-md-3">
|
||||
<mat-select placeholder=" {{ 'CRITERIA.PROJECTS.PROJECT-STATE-TYPE' | translate}}" [(ngModel)]="criteria.projectStateType"
|
||||
(ngModelChange)="controlModified()">
|
||||
<mat-option [value]="null">
|
||||
{{ 'CRITERIA.PROJECTS.TYPES.NONE' | translate}}
|
||||
</mat-option>
|
||||
<mat-option [value]="ProjectStateType.OnGoing">
|
||||
{{ 'CRITERIA.PROJECTS.TYPES.ON-GOING' | translate}}
|
||||
</mat-option>
|
||||
<mat-option [value]="ProjectStateType.Finished">
|
||||
{{ 'CRITERIA.PROJECTS.TYPES.FINISHED' | translate}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="col-10 filter-category">
|
||||
<mat-select placeholder=" {{ 'CRITERIA.PROJECTS.PROJECT-STATE-TYPE' | translate}}" [(ngModel)]="criteria.projectStateType" (ngModelChange)="controlModified()">
|
||||
<mat-option [value]="null">
|
||||
{{ 'CRITERIA.PROJECTS.TYPES.NONE' | translate}}
|
||||
</mat-option>
|
||||
<mat-option [value]="ProjectStateType.OnGoing">
|
||||
{{ 'CRITERIA.PROJECTS.TYPES.ON-GOING' | translate}}
|
||||
</mat-option>
|
||||
<mat-option [value]="ProjectStateType.Finished">
|
||||
{{ 'CRITERIA.PROJECTS.TYPES.FINISHED' | translate}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
.dmp-criteria {
|
||||
mat-form-field {
|
||||
padding-bottom: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
mat-card {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.uploadButton {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.search ::ng-deep.mat-form-field-infix {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.filter-category {
|
||||
background-color: #f6f6f6;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
color: #2e75b6;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.import {
|
||||
margin: 10px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.filters-title {
|
||||
width: 90px;
|
||||
color: #2e75b6;
|
||||
background-color: white;
|
||||
padding: 0px 20px;
|
||||
margin-top: -10px;
|
||||
margin-left: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.style-icon {
|
||||
color: #adadad;
|
||||
}
|
||||
|
||||
::ng-deep .mat-checkbox-inner-container {
|
||||
background: white;
|
||||
}
|
||||
|
||||
::ng-deep .mat-focused .mat-form-field-label {
|
||||
color: #2e75b6 !important;
|
||||
}
|
||||
|
||||
::ng-deep.mat-form-field-underline {
|
||||
background-color: #adadad !important;
|
||||
}
|
||||
|
||||
::ng-deep.mat-form-field-ripple {
|
||||
background-color: #2e75b6 !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-checkbox {
|
||||
background-color: #f6f6f6 !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-checkbox .mat-checkbox-frame {
|
||||
border: 1px solid #aaaaaa;
|
||||
}
|
||||
|
||||
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,
|
||||
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
|
||||
.mat-accent .mat-pseudo-checkbox-checked,
|
||||
.mat-accent .mat-pseudo-checkbox-indeterminate,
|
||||
.mat-pseudo-checkbox-checked,
|
||||
.mat-pseudo-checkbox-indeterminate {
|
||||
background-color: #2e75b6;
|
||||
}
|
||||
|
||||
::ng-deep .mat-ripple-element {
|
||||
background-color: #2e74b649 !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-radio-container {
|
||||
border-radius: 1em;
|
||||
background: white;
|
||||
}
|
||||
|
||||
::ng-deep .mat-radio-button .mat-radio-outer-circle {
|
||||
border: 1px solid #aaaaaa;
|
||||
}
|
||||
|
||||
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
|
||||
border-color: #2e75b6;
|
||||
}
|
||||
|
||||
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
||||
color: #2e75b6;
|
||||
background-color: #2e75b6;
|
||||
}
|
||||
|
||||
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
||||
background-color: #2e74b649;
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<div class="project-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">{{project.label}}</h4>
|
||||
<h4 class="col-12 project-title">{{project.abbreviation}}</h4>
|
||||
</div>
|
||||
<div class="row d-flex align-items-center my-1">
|
||||
<mat-icon class="col-auto type-icon">desc</mat-icon>
|
||||
<span class="col-auto m-2 p-1">{{project.description}}</span>
|
||||
</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-2 p-1">{{project.startDate | date:'shortDate'}}</h4> - <h4 class="col-auto m-2 p-1">{{project.endDate | date:'shortDate'}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider *ngIf="showDivider"></mat-divider>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.project-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);
|
||||
}
|
||||
|
||||
.project-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);
|
||||
}
|
||||
|
||||
.project-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 { ProjectListingModel } from '../../../../core/model/project/project-listing';
|
||||
|
||||
@Component({
|
||||
selector: 'app-project-listing-item-component',
|
||||
templateUrl: './project-listing-item.component.html',
|
||||
styleUrls: ['./project-listing-item.component.scss'],
|
||||
})
|
||||
export class ProjectListingItemComponent implements OnInit {
|
||||
|
||||
@Input() project: ProjectListingModel;
|
||||
@Input() showDivider: boolean = true;
|
||||
@Output() onClick: EventEmitter<ProjectListingModel> = new EventEmitter();
|
||||
|
||||
constructor(
|
||||
|
||||
) {
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
itemClicked() {
|
||||
this.onClick.emit(this.project);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,34 @@
|
|||
<div class="main-content">
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-blue d-flex">
|
||||
<div class="card-desc d-flex flex-column justify-content-center">
|
||||
<h4 class="card-title">{{languageResolverService.getBy('listingTitle') | translate}}</h4>
|
||||
<p class="card-category">{{'PROJECT-LISTING.SUBTITLE' | translate}}</p>
|
||||
</div>
|
||||
<div class="d-flex align-items-center ml-auto p-2">
|
||||
<button mat-raised-button color="primary" class="text-uppercase" [routerLink]="['./new']">
|
||||
<mat-icon>add</mat-icon> {{'PROJECT-LISTING.ACTIONS.NEW' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body table-responsive">
|
||||
<div class="project-listing row">
|
||||
<div class="col-3">
|
||||
<app-project-criteria-component class="col-auto"></app-project-criteria-component>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<div class="row" *ngFor="let item of listingItems; let i = index">
|
||||
<app-project-listing-item-component class="col-12" [showDivider]="i !== (listingItems.length - 1)" [project]="item" (onClick)="rowClicked($event)"></app-project-listing-item-component>
|
||||
</div>
|
||||
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<div class="main-content">
|
||||
<div class="container-fluid">
|
||||
<h3>{{languageResolverService.getBy('listingTitle') | translate}}</h3>
|
||||
|
|
@ -13,32 +44,23 @@
|
|||
<img mat-card-avatar [src]="host+'files/'+row.files[0].id+'?location='+row.files[0].location+'&type='+row.files[0].type">
|
||||
</mat-cell>
|
||||
</ng-container>
|
||||
<!-- Column Definition: Name -->
|
||||
<ng-container cdkColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'PROJECT-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: Αbbreviation -->
|
||||
<ng-container cdkColumnDef="abbreviation">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="abbreviation">{{'PROJECT-LISTING.COLUMNS.ABBREVIATION' |
|
||||
translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.abbreviation}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: Start -->
|
||||
<ng-container cdkColumnDef="start">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="startdate">{{'PROJECT-LISTING.COLUMNS.START' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.startDate | date:'shortDate'}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: End -->
|
||||
<ng-container cdkColumnDef="end">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="enddate">{{'PROJECT-LISTING.COLUMNS.END' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.endDate | date:'shortDate'}} </mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Column Definition: End -->
|
||||
<ng-container cdkColumnDef="dmps">
|
||||
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.DMPS' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" (click)="$event.stopPropagation()">
|
||||
|
|
@ -46,13 +68,6 @@
|
|||
</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
|
||||
<!-- Column Definition: Submission Time -->
|
||||
<!-- <ng-container cdkColumnDef="actions">
|
||||
<mat-header-cell *matHeaderCellDef>{{'PROJECT-LISTING.COLUMNS.ACTIONS' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"></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>
|
||||
|
||||
|
|
@ -67,4 +82,4 @@
|
|||
<mat-icon class="mat-24">add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
|
|
|||
|
|
@ -1,30 +1,46 @@
|
|||
.mat-card {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.project-listing {
|
||||
.mat-card {
|
||||
margin: 1em 0;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.mat-row {
|
||||
cursor: pointer;
|
||||
|
||||
.col-9 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
mat-row:hover {
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
mat-row:nth-child(odd) {
|
||||
background-color: #eef0fb;
|
||||
}
|
||||
|
||||
.mat-fab-bottom {
|
||||
top: auto !important;
|
||||
right: 20px !important;
|
||||
bottom: 10px !important;
|
||||
left: auto !important;
|
||||
position: fixed !important;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-container {
|
||||
flex-direction: row-reverse !important;
|
||||
justify-content: space-between !important;
|
||||
background-color: #f6f6f6;
|
||||
height: 30px;
|
||||
min-height: 30px !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-page-size {
|
||||
height: 43px;
|
||||
}
|
||||
|
||||
::ng-deep .mat-icon-button {
|
||||
height: 30px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-range-label {
|
||||
margin: 15px 32px 0 24px !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-range-actions {
|
||||
width: 55% !important;
|
||||
min-height: 43px !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-navigation-previous {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
|
|
@ -1,45 +1,40 @@
|
|||
import { DataSource } from '@angular/cdk/table';
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatPaginator, MatSnackBar, MatSort } from '@angular/material';
|
||||
import { MatPaginator, MatSort } from '@angular/material';
|
||||
import { Router } from '@angular/router';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { Observable } from 'rxjs';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { BaseComponent } from '../../../core/common/base/base.component';
|
||||
import { ProjectStateType } from '../../../core/common/enum/project-state-type';
|
||||
import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
|
||||
import { ProjectListingModel } from '../../../core/model/project/project-listing';
|
||||
import { ProjectCriteria } from '../../../core/query/project/project-criteria';
|
||||
import { ProjectService } from '../../../core/services/project/project.service';
|
||||
import { DataTableRequest } from '../../../core/model/data-table/data-table-request';
|
||||
import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
|
||||
import { BreadcrumbItem } from '../../misc/breadcrumb/definition/breadcrumb-item';
|
||||
import { IBreadCrumbComponent } from '../../misc/breadcrumb/definition/IBreadCrumbComponent';
|
||||
import { ProjectCriteriaComponent } from './criteria/project-criteria.component';
|
||||
import { LanguageResolverService } from '../../../services/language-resolver/language-resolver.service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-project-listing-component',
|
||||
templateUrl: 'project-listing.component.html',
|
||||
styleUrls: ['./project-listing.component.scss']
|
||||
})
|
||||
export class ProjectListingComponent implements OnInit, IBreadCrumbComponent {
|
||||
|
||||
public breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
|
||||
export class ProjectListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
|
||||
|
||||
@ViewChild(MatPaginator) _paginator: MatPaginator;
|
||||
@ViewChild(MatSort) sort: MatSort;
|
||||
@ViewChild(ProjectCriteriaComponent) criteria: ProjectCriteriaComponent;
|
||||
|
||||
host = environment.Server;
|
||||
dataSource: ProjectDataSource | null;
|
||||
displayedColumns: String[] = ['avatar', 'name', 'abbreviation', 'start', 'end', 'dmps'];
|
||||
breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of([]);
|
||||
totalCount: number;
|
||||
listingItems: ProjectListingModel[] = [];
|
||||
|
||||
constructor(
|
||||
public projectService: ProjectService,
|
||||
public router: Router,
|
||||
public languageService: TranslateService,
|
||||
public snackBar: MatSnackBar,
|
||||
private projectService: ProjectService,
|
||||
private router: Router,
|
||||
public languageResolverService: LanguageResolverService
|
||||
) {
|
||||
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
|
|
@ -51,92 +46,26 @@ export class ProjectListingComponent implements OnInit, IBreadCrumbComponent {
|
|||
}
|
||||
|
||||
refresh() {
|
||||
this.dataSource = new ProjectDataSource(this.projectService, this._paginator, this.sort, this.languageService, this.snackBar, this.criteria);
|
||||
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<ProjectCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
|
||||
request.criteria = this.criteria.criteria;
|
||||
this.projectService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
|
||||
if (!result) { return []; }
|
||||
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||
this.listingItems = result.data;
|
||||
});
|
||||
}
|
||||
|
||||
rowClick(rowId: String) {
|
||||
this.router.navigate(['/projects/edit/' + rowId]);
|
||||
rowClicked(project: ProjectListingModel) {
|
||||
this.router.navigate(['/projects/edit/' + project.id]);
|
||||
}
|
||||
|
||||
getDefaultCriteria(): ProjectCriteria {
|
||||
const defaultCriteria = new ProjectCriteria();
|
||||
defaultCriteria.projectStateType = ProjectStateType.OnGoing;
|
||||
return defaultCriteria;
|
||||
}
|
||||
}
|
||||
|
||||
export class ProjectDataSource extends DataSource<ProjectListingModel> {
|
||||
|
||||
totalCount = 0;
|
||||
|
||||
constructor(
|
||||
private _service: ProjectService,
|
||||
private _paginator: MatPaginator,
|
||||
private _sort: MatSort,
|
||||
private _languageService: TranslateService,
|
||||
private _snackBar: MatSnackBar,
|
||||
private _criteria: ProjectCriteriaComponent
|
||||
) {
|
||||
super();
|
||||
|
||||
//this._paginator.page.pipe(takeUntil(this._destroyed)).subscribe((pageEvent: PageEvent) => {
|
||||
// this.store.dispatch(new LoadPhotosRequestAction(pageEvent.pageIndex, pageEvent.pageSize))
|
||||
//})
|
||||
}
|
||||
|
||||
connect(): Observable<ProjectListingModel[]> {
|
||||
const displayDataChanges = [
|
||||
this._paginator.page
|
||||
//this._sort.matSortChange
|
||||
];
|
||||
|
||||
// If the user changes the sort order, reset back to the first page.
|
||||
//this._sort.matSortChange.pipe(takeUntil(this._destroyed)).subscribe(() => {
|
||||
// this._paginator.pageIndex = 0;
|
||||
//})
|
||||
|
||||
return Observable.merge(...displayDataChanges)
|
||||
.startWith(null)
|
||||
.switchMap(() => {
|
||||
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
|
||||
let fields: Array<string> = new Array();
|
||||
if (this._sort.active) { fields = this._sort.direction === 'asc' ? ['+' + this._sort.active] : ['-' + this._sort.active]; }
|
||||
const request = new DataTableRequest<ProjectCriteria>(startIndex, this._paginator.pageSize, { fields: fields });
|
||||
request.criteria = this._criteria.criteria;
|
||||
return this._service.getPaged(request, "listing");
|
||||
})
|
||||
/*.catch((error: any) => {
|
||||
this._snackBar.openFromComponent(SnackBarNotificationComponent, {
|
||||
data: { message: 'GENERAL.SNACK-BAR.FORMS-BAD-REQUEST', language: this._languageService },
|
||||
duration: 3000,
|
||||
extraClasses: ['snackbar-warning']
|
||||
});
|
||||
this._criteria.onCallbackError(error.error);
|
||||
return Observable.of(null);
|
||||
})*/
|
||||
.map(result => {
|
||||
result.data = result.data;
|
||||
return result;
|
||||
})
|
||||
.map(result => {
|
||||
return result;
|
||||
})
|
||||
.map(result => {
|
||||
if (!result) { return []; }
|
||||
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||
return result.data.map(item => {
|
||||
item.dmps.map(dmp => {
|
||||
dmp.url = 'plans/edit/' + dmp.url;
|
||||
dmp.all = 'plans/project/' + item.id;
|
||||
return dmp;
|
||||
});
|
||||
return item;
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
// No-op
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import { ConfirmationDialogModule } from '../../library/confirmation-dialog/conf
|
|||
import { UrlListingModule } from '../../library/url-listing/url-listing.module';
|
||||
import { ProjectEditorComponent } from './editor/project-editor.component';
|
||||
import { ProjectCriteriaComponent } from './listing/criteria/project-criteria.component';
|
||||
import { ProjectListingItemComponent } from './listing/listing-item/project-listing-item.component';
|
||||
import { ProjectListingComponent } from './listing/project-listing.component';
|
||||
import { ProjectRoutingModule } from './project.routing';
|
||||
|
||||
|
|
@ -19,7 +20,8 @@ import { ProjectRoutingModule } from './project.routing';
|
|||
declarations: [
|
||||
ProjectListingComponent,
|
||||
ProjectCriteriaComponent,
|
||||
ProjectEditorComponent
|
||||
ProjectEditorComponent,
|
||||
ProjectListingItemComponent
|
||||
]
|
||||
})
|
||||
export class ProjectModule { }
|
||||
|
|
@ -202,14 +202,9 @@
|
|||
},
|
||||
"PROJECT-LISTING": {
|
||||
"TITLE": "Projects",
|
||||
"COLUMNS": {
|
||||
"AVATAR": "Image",
|
||||
"NAME": "Name",
|
||||
"ABBREVIATION": "Abbreviation",
|
||||
"START": "Start",
|
||||
"END": "End",
|
||||
"ACTIONS": "Actions",
|
||||
"DMPS": "DMPs"
|
||||
"SUBTITLE": "Project Subtitle",
|
||||
"ACTIONS": {
|
||||
"NEW":"New Project"
|
||||
}
|
||||
},
|
||||
"DMP-LISTING": {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 387 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 387 KiB |
Loading…
Reference in New Issue