Removed explore-dmp and explore-dataset components
parent
1771ffa426
commit
c93f8eda52
@ -1,82 +0,0 @@
|
||||
<div class="header-image">
|
||||
<div class="header-text-container">
|
||||
<h3>Welcome to ARGOS</h3>
|
||||
<h4>Create, Link, Share Data Management Plans</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explore-dmp-content">
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-plain d-flex">
|
||||
<div class="card-desc d-flex flex-column justify-content-center">
|
||||
<h4 class="card-title">{{'DASHBOARD.DATASETS' | translate}}</h4>
|
||||
<!-- <p class="card-category">{{'DATASET-LISTING.SUBTITLE' | translate}}</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body table-responsive">
|
||||
<div class="dmp-listing row pb-2">
|
||||
<div class="col-12 col-sm-12 col-md-3">
|
||||
<app-explore-dataset-filters-component (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dataset-filters-component>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-9 pt-4">
|
||||
<div *ngFor="let item of listingItems; let i = index">
|
||||
<app-explore-dataset-listing-item-component [dataset]="item" [showDivider]="i !== (listingItems.length - 1)"></app-explore-dataset-listing-item-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-9 ml-auto paginator">
|
||||
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="main-content">
|
||||
<div class="container-fluid">
|
||||
<div class="explore-dataset">
|
||||
<h3 class="text-center">{{'DATASET-PUBLIC-LISTING.TITLE' | translate}} {{titlePrefix}}</h3>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<app-explore-dataset-filters-component (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dataset-filters-component>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div>
|
||||
<mat-card class="mat-card">
|
||||
<mat-table [dataSource]="dataSource" matSort (matSortChange)="refresh()">
|
||||
<ng-container cdkColumnDef="label">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="label">{{'DATASET-LISTING.COLUMNS.NAME' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.label}}</mat-cell>
|
||||
</ng-container>
|
||||
<ng-container cdkColumnDef="grant">
|
||||
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.GRANT' |
|
||||
translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.grant}} </mat-cell>
|
||||
</ng-container>
|
||||
<ng-container cdkColumnDef="profile">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="|join|profile:label">{{'DATASET-LISTING.COLUMNS.PROFILE'
|
||||
| translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.profile}} </mat-cell>
|
||||
</ng-container>
|
||||
<ng-container cdkColumnDef="description">
|
||||
<mat-header-cell *matHeaderCellDef>{{'DATASET-LISTING.COLUMNS.DESCRIPTION' | translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.description}} </mat-cell>
|
||||
</ng-container>
|
||||
<ng-container cdkColumnDef="created">
|
||||
<mat-header-cell *matHeaderCellDef mat-sort-header="created">{{'DATASET-LISTING.COLUMNS.CREATED' |
|
||||
translate}}</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row">{{row.created | 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
@ -1,78 +0,0 @@
|
||||
@import "node_modules/bootstrap/scss/functions";
|
||||
@import "node_modules/bootstrap/scss/variables";
|
||||
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.lightblue-btn {
|
||||
font-size: 12px;
|
||||
}
|
||||
::ng-deep .mat-paginator-container {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-image {
|
||||
background: url("/assets/images/new-dashboard-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;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
min-height: 5vh;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
::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: auto !important;
|
||||
min-width: 55% !important;
|
||||
min-height: 43px !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-navigation-previous {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
@ -1,117 +0,0 @@
|
||||
import { Component, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatPaginator } from '@angular/material/paginator';
|
||||
import { MatSort } from '@angular/material/sort';
|
||||
import { ActivatedRoute, Params, Router } from '@angular/router';
|
||||
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
|
||||
import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';
|
||||
import { ExploreDatasetCriteriaModel } from '@app/core/query/explore-dataset/explore-dataset-criteria';
|
||||
import { DatasetService } from '@app/core/services/dataset/dataset.service';
|
||||
import { DmpService } from '@app/core/services/dmp/dmp.service';
|
||||
import { BaseComponent } from '@common/base/base.component';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { Observable, of as observableOf } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item';
|
||||
import { IBreadCrumbComponent } from '../misc/breadcrumb/definition/IBreadCrumbComponent';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-explore-dataset-listing-component',
|
||||
templateUrl: 'explore-dataset-listing.component.html',
|
||||
styleUrls: ['./explore-dataset-listing.component.scss'],
|
||||
})
|
||||
export class ExploreDatasetListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
|
||||
|
||||
@ViewChild(MatPaginator, { static: true }) _paginator: MatPaginator;
|
||||
@ViewChild(MatSort, { static: false }) sort: MatSort;
|
||||
|
||||
totalCount: number;
|
||||
listingItems: DatasetListingModel[] = [];
|
||||
exploreDatasetCriteriaModel: ExploreDatasetCriteriaModel;
|
||||
breadCrumbs: Observable<BreadcrumbItem[]>;
|
||||
dmpId: string;
|
||||
dmpSearchEnabled = true;
|
||||
titlePrefix: String;
|
||||
|
||||
constructor(
|
||||
private datasetService: DatasetService,
|
||||
private dmpService: DmpService,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private language: TranslateService,
|
||||
) {
|
||||
super();
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.params
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(async (params: Params) => {
|
||||
const queryParams = this.route.snapshot.queryParams;
|
||||
this.dmpId = queryParams['dmpId'];
|
||||
if (this.dmpId != null) {
|
||||
this.dmpSearchEnabled = false;
|
||||
const dmp = await this.dmpService.getSinglePublic(this.dmpId).toPromise();
|
||||
|
||||
const fields: Array<string> = [];
|
||||
const dmpDataTableRequest: DataTableRequest<ExploreDatasetCriteriaModel> = new DataTableRequest(0, this._paginator.pageSize, { fields: fields });
|
||||
dmpDataTableRequest.criteria = new ExploreDatasetCriteriaModel();
|
||||
dmpDataTableRequest.criteria.dmpIds.push(this.dmpId);
|
||||
|
||||
this.datasetService.getPublicPaged(dmpDataTableRequest).pipe(takeUntil(this._destroyed)).subscribe(result => {
|
||||
if (!result) { return []; }
|
||||
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||
this.listingItems = result.data;
|
||||
});
|
||||
|
||||
|
||||
} else {
|
||||
this.refresh();
|
||||
}
|
||||
});
|
||||
|
||||
const breadCrumbs = [];
|
||||
breadCrumbs.push({
|
||||
parentComponentName: null,
|
||||
label: this.language.instant('NAV-BAR.PUBLIC DATASETS'),
|
||||
url: "/explore"
|
||||
})
|
||||
this.breadCrumbs = observableOf(breadCrumbs);
|
||||
}
|
||||
|
||||
refresh(resetPages = false) {
|
||||
if (this._paginator.pageSize === undefined) this._paginator.pageSize = 10;
|
||||
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<ExploreDatasetCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
|
||||
request.criteria = this.exploreDatasetCriteriaModel || this.getDefaultCriteria();
|
||||
this.datasetService.getPublicPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
|
||||
if (!result) { return []; }
|
||||
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||
this.listingItems = result.data;
|
||||
});
|
||||
}
|
||||
|
||||
// rowClicked(dataset: DatasetListingModel) {
|
||||
// this.router.navigate(['/datasets/publicEdit/' + dataset.id]);
|
||||
// }
|
||||
|
||||
onCriteriaChange(event: ExploreDatasetCriteriaModel) {
|
||||
this.exploreDatasetCriteriaModel = event;
|
||||
this._paginator.pageIndex = 0;
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
getDefaultCriteria(): ExploreDatasetCriteriaModel {
|
||||
const defaultCriteria = new ExploreDatasetCriteriaModel();
|
||||
// if (dmp != null) {
|
||||
// defaultCriteria.dmpIds.push(dmp.id);
|
||||
// }
|
||||
return defaultCriteria;
|
||||
}
|
||||
|
||||
pageThisEvent(event) {
|
||||
this.refresh();
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
|
||||
import { ExploreDatasetListingComponent } from '@app/ui/explore-dataset/explore-dataset-listing.component';
|
||||
import { ExploreDatasetRoutingModule } from '@app/ui/explore-dataset/explore-dataset.routing';
|
||||
import { ExploreDatasetFilterItemComponent } from '@app/ui/explore-dataset/filters/explore-dataset-filter-item/explore-dataset-filter-item.component';
|
||||
import { ExploreDatasetFiltersComponent } from '@app/ui/explore-dataset/filters/explore-dataset-filters.component';
|
||||
import { ExploreDatasetListingItemComponent } from '@app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component';
|
||||
import { CommonFormsModule } from '@common/forms/common-forms.module';
|
||||
import { CommonUiModule } from '@common/ui/common-ui.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonUiModule,
|
||||
CommonFormsModule,
|
||||
AutoCompleteModule,
|
||||
ExploreDatasetRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
ExploreDatasetListingComponent,
|
||||
ExploreDatasetFiltersComponent,
|
||||
ExploreDatasetFilterItemComponent,
|
||||
ExploreDatasetListingItemComponent
|
||||
]
|
||||
})
|
||||
export class ExploreDatasetModule { }
|
||||
@ -1,19 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { ExploreDatasetListingComponent } from './explore-dataset-listing.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ExploreDatasetListingComponent,
|
||||
data: {
|
||||
breadcrumb: true
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ExploreDatasetRoutingModule { }
|
||||
@ -1,20 +0,0 @@
|
||||
<div *ngIf="searchEnabled">
|
||||
<mat-form-field>
|
||||
<input type="text" placeholder="{{ 'FACET-SEARCH.FILTER' | translate }}" matInput [formControl]="optionSearchControl">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-chip-list *ngIf="searchEnabled">
|
||||
<mat-chip [removable]="true" (removed)="removeOption(option)" *ngFor="let option of selectedOptions">{{
|
||||
displayLabel(option) }}
|
||||
<mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
|
||||
<div class="data-expand-panel">
|
||||
<mat-selection-list #optionsList (selectionChange)="selectionChanged($event)">
|
||||
<mat-list-option class="facet-option-item" *ngFor="let option of (options | async)" [value]="option" [selected]="isOptionSelected(option)">
|
||||
<p>{{ displayLabel(option) }}</p>
|
||||
</mat-list-option>
|
||||
</mat-selection-list>
|
||||
</div>
|
||||
@ -1,14 +0,0 @@
|
||||
.facet-option-item {
|
||||
height: auto !important;
|
||||
min-height: 48px;
|
||||
padding: 0.5em;
|
||||
.mat-list-item-content {
|
||||
min-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.data-expand-panel{
|
||||
max-height: 20em;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -1,94 +0,0 @@
|
||||
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { MatListOption, MatSelectionList } from '@angular/material/list';
|
||||
import { BaseComponent } from '@common/base/base.component';
|
||||
import { Observable, of as observableOf } from 'rxjs';
|
||||
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-explore-dataset-filter-item-component',
|
||||
templateUrl: './explore-dataset-filter-item.component.html',
|
||||
styleUrls: ['./explore-dataset-filter-item.component.scss']
|
||||
})
|
||||
export class ExploreDatasetFilterItemComponent extends BaseComponent implements OnInit {
|
||||
|
||||
@Input()
|
||||
searchEnabled = false;
|
||||
|
||||
@Input()
|
||||
requestDelay = 200;
|
||||
|
||||
@Input()
|
||||
multipleSelect = true;
|
||||
|
||||
@Input()
|
||||
filterOptions: (value) => Observable<any[]>;
|
||||
|
||||
@Input()
|
||||
options: Observable<any[]> = observableOf([]);
|
||||
|
||||
@Input()
|
||||
displayTitleFunc: (value) => string;
|
||||
|
||||
@Input()
|
||||
displayValueFunc: (value) => string;
|
||||
|
||||
@Output()
|
||||
selectedChanged = new EventEmitter();
|
||||
|
||||
@Output()
|
||||
optionRemoved = new EventEmitter();
|
||||
|
||||
optionSearchControl = new FormControl('');
|
||||
|
||||
private selectedOptions: any[] = [];
|
||||
|
||||
@ViewChild('optionsList', { static: true }) selectionList: MatSelectionList;
|
||||
|
||||
constructor() { super(); }
|
||||
|
||||
ngOnInit(): void {
|
||||
if (!this.multipleSelect) { this.selectionList.selectedOptions = new SelectionModel<MatListOption>(this.multipleSelect); }
|
||||
this.optionSearchControl.valueChanges.pipe(debounceTime(this.requestDelay),
|
||||
distinctUntilChanged())
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(x => { if (this.filterOptions) { this.options = this.filterOptions(x); } });
|
||||
}
|
||||
|
||||
public selectionChanged(event: any) {
|
||||
const eventValue = event.option.value;
|
||||
if (event.option.selected) { this.selectedOptions.push(eventValue); }
|
||||
if (!event.option.selected) {
|
||||
const index = this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(eventValue));
|
||||
this.selectedOptions.splice(index, 1);
|
||||
}
|
||||
this.selectedChanged.emit(event);
|
||||
}
|
||||
|
||||
public removeOption(grant) {
|
||||
const list = this.selectionList.selectedOptions.selected.map(x => x.value);
|
||||
const indexOfGrant = list.indexOf(grant);
|
||||
if (this.selectionList.selectedOptions.selected[indexOfGrant]) {
|
||||
this.selectionList.selectedOptions.selected[indexOfGrant].selected = false;
|
||||
this.selectionList.selectedOptions.selected.splice(indexOfGrant, 1);
|
||||
}
|
||||
this.selectedOptions.splice(this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(grant)), 1);
|
||||
this.optionRemoved.emit(grant);
|
||||
}
|
||||
|
||||
public isOptionSelected(value) {
|
||||
return this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(value)) !== -1;
|
||||
}
|
||||
|
||||
displayLabel(value) {
|
||||
return this.displayTitleFunc ? this.displayTitleFunc(value) : value;
|
||||
}
|
||||
|
||||
displayValue(value) {
|
||||
return this.displayValueFunc ? this.displayValueFunc(value) : value;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,129 +0,0 @@
|
||||
<div class="filters">
|
||||
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
|
||||
<div class="row" style="justify-content: center;">
|
||||
|
||||
<mat-form-field class="col-11 search">
|
||||
<input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="dmpCriteriaName" [(ngModel)]="facetCriteria.like" (ngModelChange)="controlModified()">
|
||||
<mat-icon matSuffix class="style-icon">search</mat-icon>
|
||||
<app-multiple-auto-complete [(ngModel)]="facetCriteria.tags" (ngModelChange)="controlModified()" placeholder="{{'CRITERIA.DATA-SETS.TAGS' | translate}}" [configuration]="tagsAutoCompleteConfiguration">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
|
||||
<mat-radio-group>
|
||||
<mat-list-item><mat-radio-button value="null" checked (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ANY' | translate }}</mat-radio-button></mat-list-item>
|
||||
<mat-list-item><mat-radio-button value="0" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button></mat-list-item>
|
||||
<mat-list-item><mat-radio-button value="1" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button></mat-list-item>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="col-10 gray-container">
|
||||
<h6 class="category-title">{{'CRITERIA.DATA-SETS.RELATED-DMP' | translate}}</h6>
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete placeholder="{{'CRITERIA.DATA-SETS.SELECT-DMP' | translate }}" [configuration]="dmpAutoCompleteConfiguration" (optionSelected)="onDmpOptionSelected($event)" (optionRemoved)="onDmpOptionRemoved($event)">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.GRANT.TITLE' | translate }}</h6>
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}" [configuration]="grantAutoCompleteConfiguration" (optionSelected)="onGrantOptionSelected($event)" (optionRemoved)="onGrantOptionRemoved($event)">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}</h6>
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-SPEC' | translate }}" [configuration]="profileAutoCompleteConfiguration" (optionSelected)="onProfileOptionSelected($event)" (optionRemoved)="onProfileOptionRemoved($event)">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div *ngIf="isAuthenticated()" class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.ROLE.TITLE' | translate }}</h6>
|
||||
<mat-radio-group>
|
||||
<mat-list-item><mat-radio-button value="null" checked (change)="roleChanged($event)">{{ 'FACET-SEARCH.ROLE.ANY' | translate }}</mat-radio-button></mat-list-item>
|
||||
<mat-list-item><mat-radio-button value="0" (change)="roleChanged($event)">{{ 'FACET-SEARCH.ROLE.OWNER' | translate }}</mat-radio-button></mat-list-item>
|
||||
<mat-list-item><mat-radio-button value="1" (change)="roleChanged($event)">{{ 'FACET-SEARCH.ROLE.MEMBER' | translate }}</mat-radio-button></mat-list-item>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}</h6>
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate }}" [configuration]="organizationAutoCompleteConfiguration" (optionSelected)="onOrganizationOptionSelected($event)" (optionRemoved)="onOrganizationOptionRemoved($event)">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <mat-accordion #facetAccordion="matAccordion" [multi]="true" class="facet-search-component">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ 'FACET-SEARCH.FILTER' | translate }}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="datasetCriteriaName" [(ngModel)]="facetCriteria.like"
|
||||
(ngModelChange)="controlModified()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete [(ngModel)]="facetCriteria.tags" (ngModelChange)="controlModified()" placeholder="{{'CRITERIA.DATA-SETS.TAGS' | translate}}"
|
||||
[configuration]="tagsAutoCompleteConfiguration">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<app-explore-dataset-filter-item-component [multipleSelect]="false" [options]="this.grantStateOptions"
|
||||
(selectedChanged)="grantStatusChanged($event)" [displayTitleFunc]="displayGrantStateLabel" [displayValueFunc]="displayGrantStateValue">
|
||||
</app-explore-dataset-filter-item-component>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel *ngIf="this.facetCriteria.grantStatus == GrantStateType.OnGoing || this.facetCriteria.grantStatus == GrantStateType.Finished">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ 'FACET-SEARCH.GRANT.TITLE' | translate }}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<app-explore-dataset-filter-item-component [options]="this.grants" (selectedChanged)="grantChanged($event)"
|
||||
[filterOptions]="grantSearch.bind(this)" [searchEnabled]="true" (optionRemoved)="removeGrant($event)"
|
||||
[displayTitleFunc]="displayGrantLabel" [displayValueFunc]="displayGrantValue">
|
||||
</app-explore-dataset-filter-item-component>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<app-explore-dataset-filter-item-component [options]="this.profiles" (selectedChanged)="profileChanged($event)"
|
||||
[filterOptions]="profileSearch.bind(this)" (optionRemoved)="removeProfile($event)" [displayTitleFunc]="displayProfileLabel"
|
||||
[displayValueFunc]="displayProfileValue">
|
||||
</app-explore-dataset-filter-item-component>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<app-explore-dataset-filter-item-component [options]="this.dmpOrganisations" (selectedChanged)="dmpOrganisationChanged($event)"
|
||||
[filterOptions]="dmpOrganisationSearch.bind(this)" (optionRemoved)="removeOrganisation($event)" [searchEnabled]="true"
|
||||
[displayTitleFunc]="displayDmpOrganisationsLabel" [displayValueFunc]="displayDmpOrganisationsValue">
|
||||
</app-explore-dataset-filter-item-component>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion> -->
|
||||
@ -1,106 +0,0 @@
|
||||
.facet-search-component {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tags-chips {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.search ::ng-deep.mat-form-field-infix {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
color: black;
|
||||
// color: #089dbb;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.import {
|
||||
margin: 10px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.filters-title {
|
||||
width: 90px;
|
||||
color: #089dbb;
|
||||
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: #00b29f !important;
|
||||
// }
|
||||
|
||||
// ::ng-deep.mat-form-field-underline {
|
||||
// background-color: #adadad;
|
||||
// }
|
||||
|
||||
// ::ng-deep.mat-form-field-ripple {
|
||||
// background-color: #00b29f !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: #00b29f;
|
||||
}
|
||||
|
||||
::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: #777777;
|
||||
// border-color: #00b29f;
|
||||
}
|
||||
|
||||
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
||||
color: #777777;
|
||||
background-color: #777777;
|
||||
// color: #00b29f;
|
||||
// background-color: #00b29f;
|
||||
}
|
||||
|
||||
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
||||
background-color: #2e74b649;
|
||||
}
|
||||
@ -1,366 +0,0 @@
|
||||
|
||||
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { MatAccordion } from '@angular/material/expansion';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { GrantStateType } from '@app/core/common/enum/grant-state-type';
|
||||
import { DataTableData } from '@app/core/model/data-table/data-table-data';
|
||||
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
|
||||
import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
|
||||
import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
|
||||
import { ExternalSourceItemModel } from '@app/core/model/external-sources/external-source-item';
|
||||
import { GrantListingModel } from '@app/core/model/grant/grant-listing';
|
||||
import { OrganizationModel } from '@app/core/model/organisation/organization';
|
||||
import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';
|
||||
import { ExploreDatasetCriteriaModel } from '@app/core/query/explore-dataset/explore-dataset-criteria';
|
||||
import { ExploreDmpCriteriaModel } from '@app/core/query/explore-dmp/explore-dmp-criteria';
|
||||
import { GrantCriteria } from '@app/core/query/grant/grant-criteria';
|
||||
import { OrganisationCriteria } from '@app/core/query/organisation/organisation-criteria';
|
||||
import { RequestItem } from '@app/core/query/request-item';
|
||||
import { TagCriteria } from '@app/core/query/tag/tag-criteria';
|
||||
import { AuthService } from '@app/core/services/auth/auth.service';
|
||||
import { DatasetService } from '@app/core/services/dataset/dataset.service';
|
||||
import { DmpService } from '@app/core/services/dmp/dmp.service';
|
||||
import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
|
||||
import { GrantService } from '@app/core/services/grant/grant.service';
|
||||
import { OrganisationService } from '@app/core/services/organisation/organisation.service';
|
||||
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
|
||||
import { BaseComponent } from '@common/base/base.component';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { Observable, of as observableOf } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-explore-dataset-filters-component',
|
||||
templateUrl: './explore-dataset-filters.component.html',
|
||||
styleUrls: ['./explore-dataset-filters.component.scss']
|
||||
})
|
||||
export class ExploreDatasetFiltersComponent extends BaseComponent implements OnInit, AfterViewInit {
|
||||
|
||||
@Input() facetCriteria = new ExploreDatasetCriteriaModel();
|
||||
@Output() facetCriteriaChange = new EventEmitter();
|
||||
public filteringTagsAsync = false;
|
||||
public filteredTags: ExternalSourceItemModel[];
|
||||
GrantStateType = GrantStateType;
|
||||
grants: Observable<GrantListingModel[]>;
|
||||
profiles: Observable<DatasetProfileModel[]>;
|
||||
dmpOrganisations: Observable<ExternalSourceItemModel[]>;
|
||||
dmpIds: Observable<DataTableData<DmpListingModel>>;
|
||||
grantOptions: Observable<GrantListingModel[]>;
|
||||
grantStateOptions: Observable<any[]>;
|
||||
filteringOrganisationsAsync = false;
|
||||
@ViewChild('facetAccordion', { static: false }) accordion: MatAccordion;
|
||||
|
||||
displayGrantStateValue = (option) => option['value'];
|
||||
displayGrantStateLabel = (option) => option['label'];
|
||||
|
||||
displayGrantValue = (option) => option['id'];
|
||||
displayGrantLabel = (option) => option['label'];
|
||||
|
||||
displayProfileValue = (option) => option['id'];
|
||||
displayProfileLabel = (option) => option['label'];
|
||||
|
||||
displayDmpOrganisationsValue = (option) => option['id'];
|
||||
displayDmpOrganisationsLabel = (option) => option['name'];
|
||||
|
||||
tagsAutoCompleteConfiguration = {
|
||||
filterFn: this.filterTags.bind(this),
|
||||
initialItems: (excludedItems: any[]) => this.filterTags('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
|
||||
displayFn: (item) => item['name'],
|
||||
titleFn: (item) => item['name']
|
||||
};
|
||||
|
||||
dmpAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
||||
filterFn: (x, excluded) => this.filterDmps(x).pipe(map(x => x.data)),
|
||||
initialItems: (extraData) => this.filterDmps('').pipe(map(x => x.data)),
|
||||
displayFn: (item) => item['label'],
|
||||
titleFn: (item) => item['label']
|
||||
};
|
||||
|
||||
grantAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
||||
filterFn: this.filterGrant.bind(this),
|
||||
initialItems: (excludedItems: any[]) =>
|
||||
this.filterGrant('').pipe(
|
||||
map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
|
||||
displayFn: (item) => item['label'],
|
||||
titleFn: (item) => item['label']
|
||||
}
|
||||
|
||||
profileAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
||||
filterFn: this.filterProfile.bind(this),
|
||||
initialItems: (excludedItems: any[]) =>
|
||||
this.filterProfile('').pipe(
|
||||
map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
|
||||
displayFn: (item) => item['label'],
|
||||
titleFn: (item) => item['label']
|
||||
};
|
||||
|
||||
organizationAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
||||
filterFn: this.filterOrganisation.bind(this),
|
||||
initialItems: (excludedItems: any[]) =>
|
||||
this.getOrganisations().pipe(
|
||||
map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
|
||||
displayFn: (item) => item['name'],
|
||||
titleFn: (item) => item['name']
|
||||
}
|
||||
|
||||
constructor(
|
||||
public activatedRoute: ActivatedRoute,
|
||||
private authentication: AuthService,
|
||||
public grantService: GrantService,
|
||||
public dmpService: DmpService,
|
||||
public organisationService: OrganisationService,
|
||||
public languageService: TranslateService,
|
||||
public datasetProfileService: DatasetService,
|
||||
public externalSourcesService: ExternalSourcesService,
|
||||
) { super(); }
|
||||
|
||||
ngOnInit() {
|
||||
setTimeout(() => {
|
||||
this.grantStateOptions = observableOf(
|
||||
[
|
||||
{ label: this.languageService.instant('FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE'), value: GrantStateType.Finished },
|
||||
{ label: this.languageService.instant('FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE'), value: GrantStateType.OnGoing },
|
||||
]);
|
||||
});
|
||||
// this.profiles = this.datasetProfileService.getDatasetProfiles();
|
||||
this.dmpOrganisations = this.externalSourcesService.searchDMPOrganizations('');
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
// this.accordion.openAll();
|
||||
}
|
||||
|
||||
public grantStatusChanged(event) {
|
||||
this.facetCriteria.grantStatus = event.value;
|
||||
if (event.value === 'null') {
|
||||
this.facetCriteria.grantStatus = null;
|
||||
this.grants = observableOf([]);
|
||||
this.facetCriteria.grants = [];
|
||||
}
|
||||
// if (event.option.selected) {
|
||||
// if (event.source.checked) {
|
||||
else {
|
||||
// const grantCriteria = new GrantCriteria();
|
||||
// grantCriteria.grantStateType = this.facetCriteria.grantStatus;
|
||||
//grantCriteria['length'] = 10;
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const dataTableRequest: DataTableRequest<GrantCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
dataTableRequest.criteria = new GrantCriteria();
|
||||
dataTableRequest.criteria.grantStateType = this.facetCriteria.grantStatus;
|
||||
dataTableRequest.criteria['length'] = 10;
|
||||
|
||||
this.grants = this.grantService.getPublicPaged(dataTableRequest).pipe(map(x => x.data));
|
||||
this.facetCriteria.grants = [];
|
||||
}
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
public grantChanged(event: any) {
|
||||
const eventValue = event.option.value.id;
|
||||
if (event.option.selected) { this.facetCriteria.grants.push(eventValue); }
|
||||
if (!event.option.selected) {
|
||||
const index = this.facetCriteria.grants.indexOf(eventValue);
|
||||
this.facetCriteria.grants.splice(index, 1);
|
||||
}
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
removeGrant(grant) {
|
||||
this.facetCriteria.grants.splice(this.facetCriteria.grants.indexOf(grant), 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
public profileChanged(event: any) {
|
||||
const eventValue = event.option.value.id;
|
||||
if (event.option.selected) {
|
||||
this.facetCriteria.datasetProfile.push(eventValue);
|
||||
}
|
||||
if (!event.option.selected) {
|
||||
const index = this.facetCriteria.datasetProfile.indexOf(eventValue);
|
||||
this.facetCriteria.datasetProfile.splice(index, 1);
|
||||
}
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
// getProfiles() {
|
||||
// return this.datasetProfileService.getDatasetProfiles();
|
||||
// }
|
||||
|
||||
removeProfile(profile) {
|
||||
this.facetCriteria.datasetProfile.splice(this.facetCriteria.datasetProfile.indexOf(profile), 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
getOrganisations() {
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const dataTableRequest: DataTableRequest<OrganisationCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
dataTableRequest.criteria = new OrganisationCriteria();
|
||||
dataTableRequest.criteria.labelLike = '';
|
||||
return this.organisationService.searchPublicOrganisations(dataTableRequest).pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
public roleChanged(event: any) {
|
||||
this.facetCriteria.role = event.value;
|
||||
if (event.value === 'null') {
|
||||
this.facetCriteria.role = null;
|
||||
}
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
public dmpOrganisationChanged(event: any) {
|
||||
const eventValue = event.option.value.id;
|
||||
if (event.option.selected) { this.facetCriteria.dmpOrganisations.push(eventValue); }
|
||||
if (!event.option.selected) {
|
||||
const index = this.facetCriteria.dmpOrganisations.indexOf(eventValue);
|
||||
this.facetCriteria.dmpOrganisations.splice(index, 1);
|
||||
}
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
public grantSearch(value: string): Observable<GrantListingModel[]> {
|
||||
|
||||
const grantCriteria = new GrantCriteria();
|
||||
grantCriteria.grantStateType = this.facetCriteria.grantStatus;
|
||||
grantCriteria['length'] = 10;
|
||||
grantCriteria.like = value;
|
||||
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
|
||||
const dataTableRequest: DataTableRequest<GrantCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
dataTableRequest.criteria = grantCriteria;
|
||||
//const dataTableRequest: RequestItem<GrantCriteria> = { criteria: grantCriteria };
|
||||
//return this.grantService.getPaged(dataTableRequest, "autocomplete").map(x => x.data);
|
||||
return this.grantService.getPublicPaged(dataTableRequest).pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
public dmpOrganisationSearch(value: string): Observable<ExternalSourceItemModel[]> {
|
||||
return this.externalSourcesService.searchDMPOrganizations(value);
|
||||
}
|
||||
|
||||
removeOrganisation(organisation) {
|
||||
this.facetCriteria.dmpOrganisations.splice(this.facetCriteria.dmpOrganisations.indexOf(organisation), 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
// public profileSearch(value: string) {
|
||||
// return this.datasetProfileService.getDatasetProfiles();
|
||||
// }
|
||||
|
||||
public controlModified() {
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
onGrantOptionSelected(item: GrantListingModel) {
|
||||
this.facetCriteria.grants.push(item.id);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
onGrantOptionRemoved(item: GrantListingModel) {
|
||||
const index = this.facetCriteria.grants.indexOf(item.id);
|
||||
if (index >= 0) {
|
||||
this.facetCriteria.grants.splice(index, 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
}
|
||||
|
||||
onDmpOptionSelected(item: DmpListingModel) {
|
||||
this.facetCriteria.dmpIds.push(item.id);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
onDmpOptionRemoved(item: DmpListingModel) {
|
||||
const index = this.facetCriteria.dmpIds.indexOf(item.id);
|
||||
if (index >= 0) {
|
||||
this.facetCriteria.dmpIds.splice(index, 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
}
|
||||
|
||||
onProfileOptionSelected(item: DatasetProfileModel) {
|
||||
this.facetCriteria.datasetProfile.push(item.id);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
onProfileOptionRemoved(item: DatasetProfileModel) {
|
||||
const index = this.facetCriteria.datasetProfile.indexOf(item.id);
|
||||
if (index >= 0) {
|
||||
this.facetCriteria.datasetProfile.splice(index, 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
}
|
||||
|
||||
onOrganizationOptionSelected(item: OrganizationModel) {
|
||||
this.facetCriteria.dmpOrganisations.push(item.id);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
onOrganizationOptionRemoved(item: OrganizationModel) {
|
||||
const index = this.facetCriteria.dmpOrganisations.indexOf(item.id);
|
||||
if (index >= 0) {
|
||||
this.facetCriteria.dmpOrganisations.splice(index, 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
}
|
||||
|
||||
filterDmps(value: string): Observable<DataTableData<DmpListingModel>> {
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('-finalizedAt');
|
||||
const dmpDataTableRequest: DataTableRequest<ExploreDmpCriteriaModel> = new DataTableRequest(0, null, { fields: fields });
|
||||
dmpDataTableRequest.criteria = new ExploreDmpCriteriaModel();
|
||||
dmpDataTableRequest.criteria.like = value;
|
||||
return this.dmpService.getPublicPaged(dmpDataTableRequest, "autocomplete")
|
||||
}
|
||||
|
||||
filterTags(value: string): Observable<ExternalSourceItemModel[]> {
|
||||
this.filteredTags = undefined;
|
||||
this.filteringTagsAsync = true;
|
||||
const requestItem: RequestItem<TagCriteria> = new RequestItem();
|
||||
const criteria: TagCriteria = new TagCriteria();
|
||||
criteria.like = value;
|
||||
requestItem.criteria = criteria;
|
||||
return this.externalSourcesService.searchDatasetTags(requestItem);
|
||||
// .subscribe(items => {
|
||||
// this.filteredTags = items;
|
||||
// this.filteringTagsAsync = false;
|
||||
// });
|
||||
}
|
||||
|
||||
filterGrant(query: string) {
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const grantRequestItem: DataTableRequest<GrantCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
grantRequestItem.criteria = new GrantCriteria();
|
||||
grantRequestItem.criteria.like = query;
|
||||
return this.grantService.getPublicPaged(grantRequestItem).pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
filterProfile(query: string) {
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const profileRequestItem: DataTableRequest<DatasetProfileCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
profileRequestItem.criteria = new DatasetProfileCriteria();
|
||||
profileRequestItem.criteria.like = query;
|
||||
|
||||
return this.datasetProfileService.getDatasetProfiles(profileRequestItem);
|
||||
// this.dmpService.getPublicPaged(profileRequestItem, "listing").pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
filterOrganisation(value: string) {
|
||||
this.filteringOrganisationsAsync = true;
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const dataTableRequest: DataTableRequest<OrganisationCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
dataTableRequest.criteria = new OrganisationCriteria();
|
||||
dataTableRequest.criteria.labelLike = value;
|
||||
|
||||
return this.organisationService.searchPublicOrganisations(dataTableRequest).pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
public isAuthenticated(): boolean {
|
||||
return !(!this.authentication.current());
|
||||
}
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
<div class="listing-item">
|
||||
<a [routerLink]="['/datasets/publicEdit/' + dataset.id]">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-12 gray-container container-header">
|
||||
<p>{{ dataset.grantAbbreviation }}</p>
|
||||
<!-- <button mat-icon-button [matMenuTriggerFor]="actionsMenu" class="ml-auto"
|
||||
(click)="$event.stopImmediatePropagation();">
|
||||
<mat-icon class="more-horiz">more_horiz</mat-icon>
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.FINALIZED' | translate}}" class="finalized-bookmark">bookmark</mat-icon>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row d-flex flex-wrap">
|
||||
<div class="col pl-0">
|
||||
<h4 class="title pl-0" *ngIf="!isDraft">{{ dataset.label }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col pl-0">
|
||||
<p class="mt-1 mb-2">{{dataset.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto about-item pl-0">
|
||||
<div class="row">
|
||||
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.DMP' | translate}}" class="col-auto gray-icon pr-0 pt-2">storage</mat-icon>
|
||||
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto about-item pl-0">
|
||||
<div class="row">
|
||||
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.GRANT' | translate}}" class="col-auto gray-icon pr-0 pt-2">work_outline</mat-icon>
|
||||
<h4 class="col mt-2 ml-1 mr-3 p-1">{{ dataset.grant }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto about-item pl-0">
|
||||
<mat-icon matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
|
||||
<div class="pt-1">
|
||||
<div matTooltip="{{ dataset.profile }}" class="chip ml-2 mr-2">{{ dataset.profile }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col about-item ml-auto">
|
||||
<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.dmpPublishedAt | date: "shortDate"}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<div class="col-12 title">
|
||||
<mat-icon *ngIf="!isDraft" matTooltip="{{'DATASET-PUBLIC-LISTING.TOOLTIP.FINALIZED' | translate}}" class="finalized-bookmark">bookmark</mat-icon>
|
||||
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- <div class="info">
|
||||
<h6>{{ dataset.dmp }}</h6>
|
||||
<p>{{ dataset.grant }}</p>
|
||||
</div>
|
||||
<div class="row" style="margin-left: 0px !important">
|
||||
<div class="chip">
|
||||
<p>{{ dataset.profile }}</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->
|
||||
@ -1,99 +0,0 @@
|
||||
.gray-container {
|
||||
letter-spacing: 5px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.container-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-top: 0px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.container-header p {
|
||||
letter-spacing: 5px;
|
||||
color: #aaaaaa;
|
||||
padding-top: 10px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
display: inline;
|
||||
padding-left: 1em;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.title h4 {
|
||||
padding-left: 30px;
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
.about-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.about-item .length {
|
||||
color: #00b29f;
|
||||
// color: #089dbb;
|
||||
}
|
||||
|
||||
.about-item .title {
|
||||
margin: 2px 10px;
|
||||
}
|
||||
|
||||
.about-item p {
|
||||
margin-left: auto;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 7px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.finalized-bookmark {
|
||||
color: #08bd63;
|
||||
}
|
||||
|
||||
// .explore-dataset-info {
|
||||
// background-color: #f6f6f6;
|
||||
// padding: 8px 15px;
|
||||
// }
|
||||
|
||||
// .explore-dataset-info p {
|
||||
// margin-bottom: 0px;
|
||||
// color: rgb(37, 35, 140);
|
||||
// font-weight: 600;
|
||||
// }
|
||||
|
||||
// .template-name {
|
||||
// padding-left: 0px;
|
||||
// border: 1px solid rgb(218, 227, 243);
|
||||
// color: rgb(43, 104, 209);
|
||||
// background-color: rgb(236, 241, 249);
|
||||
// border-radius: 10em;
|
||||
// justify-content: center;
|
||||
// text-transform: uppercase;
|
||||
// display: flex;
|
||||
// width: 25em;
|
||||
// height: 1.8em;
|
||||
// margin-top: 15px;
|
||||
// font-size: 13px;
|
||||
// font-weight: 500;
|
||||
// }
|
||||
|
||||
// .draft-bookmark {
|
||||
// color: #e7e6e6;
|
||||
// display: inline;
|
||||
// }
|
||||
|
||||
// .finalized-bookmark {
|
||||
// color: #92d050;
|
||||
// display: inline;
|
||||
// }
|
||||
|
||||
// h4 {
|
||||
// display: inline;
|
||||
// }
|
||||
@ -1,29 +0,0 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { DatasetListingModel } from '../../../core/model/dataset/dataset-listing';
|
||||
import { DatasetStatus } from '../../../core/common/enum/dataset-status';
|
||||
|
||||
@Component({
|
||||
selector: 'app-explore-dataset-listing-item-component',
|
||||
templateUrl: './explore-dataset-listing-item.component.html',
|
||||
styleUrls: ['./explore-dataset-listing-item.component.scss']
|
||||
})
|
||||
export class ExploreDatasetListingItemComponent implements OnInit {
|
||||
|
||||
@Input() dataset: DatasetListingModel;
|
||||
@Input() showDivider: boolean = true;
|
||||
@Output() onClick: EventEmitter<DatasetListingModel> = new EventEmitter();
|
||||
|
||||
isDraft: boolean;
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
if (this.dataset.status == DatasetStatus.Draft) { this.isDraft = true }
|
||||
else { this.isDraft = false }
|
||||
}
|
||||
|
||||
// itemClicked() {
|
||||
// this.onClick.emit(this.dataset);
|
||||
// }
|
||||
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
<div *ngIf="searchEnabled">
|
||||
<mat-form-field>
|
||||
<input type="text" placeholder="{{ 'FACET-SEARCH.FILTER' | translate }}" matInput [formControl]="optionSearchControl">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-chip-list *ngIf="searchEnabled">
|
||||
<mat-chip [removable]="true" (removed)="removeOption(option)" *ngFor="let option of selectedOptions">{{
|
||||
displayLabel(option) }}
|
||||
<mat-icon matChipRemove>cancel</mat-icon>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
|
||||
<div class="data-expand-panel">
|
||||
<mat-selection-list #optionsList (selectionChange)="selectionChanged($event)">
|
||||
<mat-list-option class="facet-option-item" *ngFor="let option of (options | async)" [value]="option" [selected]="isOptionSelected(option)">
|
||||
<p>{{ displayLabel(option) }}</p>
|
||||
</mat-list-option>
|
||||
</mat-selection-list>
|
||||
</div>
|
||||
@ -1,14 +0,0 @@
|
||||
.facet-option-item {
|
||||
height: auto !important;
|
||||
min-height: 48px;
|
||||
padding: 0.5em;
|
||||
.mat-list-item-content {
|
||||
min-height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.data-expand-panel{
|
||||
max-height: 20em;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -1,84 +0,0 @@
|
||||
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { MatListOption, MatSelectionList } from '@angular/material/list';
|
||||
import { BaseComponent } from '@common/base/base.component';
|
||||
import { Observable, of as observableOf } from 'rxjs';
|
||||
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-explore-dmp-filter-item-component',
|
||||
templateUrl: './explore-dmp-filter-item.component.html',
|
||||
styleUrls: ['./explore-dmp-filter-item.component.scss']
|
||||
})
|
||||
export class ExploreDmpFilterItemComponent extends BaseComponent implements OnInit {
|
||||
@Input()
|
||||
searchEnabled = false;
|
||||
@Input()
|
||||
requestDelay = 200;
|
||||
@Input()
|
||||
multipleSelect = true;
|
||||
@Input()
|
||||
filterOptions: (value) => Observable<any[]>;
|
||||
@Input()
|
||||
options: Observable<any[]> = observableOf([]);
|
||||
@Input()
|
||||
displayTitleFunc: (value) => string;
|
||||
@Input()
|
||||
displayValueFunc: (value) => string;
|
||||
@Output()
|
||||
selectedChanged = new EventEmitter();
|
||||
@Output()
|
||||
optionRemoved = new EventEmitter();
|
||||
|
||||
|
||||
optionSearchControl = new FormControl('');
|
||||
public selectedOptions: any[] = [];
|
||||
|
||||
@ViewChild('optionsList', { static: true }) selectionList: MatSelectionList;
|
||||
|
||||
constructor() { super(); }
|
||||
|
||||
ngOnInit(): void {
|
||||
if (!this.multipleSelect) { this.selectionList.selectedOptions = new SelectionModel<MatListOption>(this.multipleSelect); }
|
||||
this.optionSearchControl.valueChanges.pipe(debounceTime(this.requestDelay),
|
||||
distinctUntilChanged())
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(x => { if (this.filterOptions) { this.options = this.filterOptions(x); } });
|
||||
}
|
||||
|
||||
public selectionChanged(event: any) {
|
||||
const eventValue = event.option.value;
|
||||
if (event.option.selected) { this.selectedOptions.push(eventValue); }
|
||||
if (!event.option.selected) {
|
||||
const index = this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(eventValue));
|
||||
this.selectedOptions.splice(index, 1);
|
||||
}
|
||||
this.selectedChanged.emit(event);
|
||||
}
|
||||
|
||||
public removeOption(grant) {
|
||||
const list = this.selectionList.selectedOptions.selected.map(x => x.value);
|
||||
const indexOfGrant = list.indexOf(grant);
|
||||
if (this.selectionList.selectedOptions.selected[indexOfGrant]) {
|
||||
this.selectionList.selectedOptions.selected[indexOfGrant].selected = false;
|
||||
this.selectionList.selectedOptions.selected.splice(indexOfGrant, 1);
|
||||
}
|
||||
this.selectedOptions.splice(this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(grant)), 1);
|
||||
this.optionRemoved.emit(grant);
|
||||
}
|
||||
|
||||
public isOptionSelected(value) {
|
||||
return this.selectedOptions.map(x => this.displayValue(x)).indexOf(this.displayValue(value)) !== -1;
|
||||
}
|
||||
|
||||
displayLabel(value) {
|
||||
return this.displayTitleFunc ? this.displayTitleFunc(value) : value;
|
||||
}
|
||||
|
||||
displayValue(value) {
|
||||
return this.displayValueFunc ? this.displayValueFunc(value) : value;
|
||||
}
|
||||
}
|
||||
@ -1,122 +0,0 @@
|
||||
<div class="filters">
|
||||
<h6 class="filters-title">{{'CRITERIA.FILTERS'| translate}}</h6>
|
||||
<div class="row" style="justify-content: center;">
|
||||
|
||||
<mat-form-field class="col-11 search">
|
||||
<input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="dmpCriteriaName" [(ngModel)]="facetCriteria.like" (ngModelChange)="controlModified()">
|
||||
<mat-icon matSuffix class="style-icon">search</mat-icon>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}</h6>
|
||||
<mat-radio-group>
|
||||
<mat-list-item>
|
||||
<mat-radio-button value="null" checked (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ANY' | translate }}</mat-radio-button>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-radio-button value="0" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-radio-button value="1" (change)="grantStatusChanged($event)">{{ 'FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button>
|
||||
</mat-list-item>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.GRANT.TITLE' | translate }}</h6>
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-GRANTS' | translate }}" [configuration]="grantAutoCompleteConfiguration" (optionSelected)="onGrantOptionSelected($event)" (optionRemoved)="onGrantOptionRemoved($event)">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}</h6>
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-SPEC' | translate }}" [configuration]="profileAutoCompleteConfiguration" (optionSelected)="onProfileOptionSelected($event)" (optionRemoved)="onProfileOptionRemoved($event)">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div *ngIf="isAuthenticated()" class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.ROLE.TITLE' | translate }}</h6>
|
||||
<mat-radio-group>
|
||||
<mat-list-item>
|
||||
<mat-radio-button value="null" checked (change)="roleChanged($event)">{{ 'FACET-SEARCH.ROLE.ANY' | translate }}</mat-radio-button>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-radio-button value="0" (change)="roleChanged($event)">{{ 'FACET-SEARCH.ROLE.OWNER' | translate }}</mat-radio-button>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-radio-button value="1" (change)="roleChanged($event)">{{ 'FACET-SEARCH.ROLE.MEMBER' | translate }}</mat-radio-button>
|
||||
</mat-list-item>
|
||||
</mat-radio-group>
|
||||
</div>
|
||||
|
||||
<div class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}</h6>
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate }}" [configuration]="organizationAutoCompleteConfiguration" (optionSelected)="onOrganizationOptionSelected($event)" (optionRemoved)="onOrganizationOptionRemoved($event)">
|
||||
</app-multiple-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <mat-accordion #facetAccordion="matAccordion" [multi]="true" class="facet-search-component">
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ 'FACET-SEARCH.FILTER' | translate }}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div>
|
||||
<mat-form-field>
|
||||
<input matInput placeholder="{{'CRITERIA.GRANTS.LIKE'| translate}}" name="dmpCriteriaName" [(ngModel)]="facetCriteria.like"
|
||||
(ngModelChange)="controlModified()">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ 'FACET-SEARCH.GRANT-STATUS.TITLE' | translate }}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<app-explore-dmp-filter-item-component [multipleSelect]="false" [options]="this.grantStateOptions" (selectedChanged)="grantStatusChanged($event)"
|
||||
[displayTitleFunc]="displayGrantStateLabel" [displayValueFunc]="displayGrantStateValue">
|
||||
</app-explore-dmp-filter-item-component>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel *ngIf="this.facetCriteria.grantStatus == GrantStateType.OnGoing || this.facetCriteria.grantStatus == GrantStateType.Finished">
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ 'FACET-SEARCH.GRANT.TITLE' | translate }}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<app-explore-dmp-filter-item-component [options]="this.grants" (selectedChanged)="grantChanged($event)" [filterOptions]="grantSearch.bind(this)"
|
||||
[searchEnabled]="true" (optionRemoved)="removeGrant($event)" [displayTitleFunc]="displayGrantLabel" [displayValueFunc]="displayGrantValue">
|
||||
</app-explore-dmp-filter-item-component>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<app-explore-dmp-filter-item-component [options]="this.profiles" (selectedChanged)="profileChanged($event)" [filterOptions]="profileSearch.bind(this)"
|
||||
(optionRemoved)="removeProfile($event)" [displayTitleFunc]="displayProfileLabel" [displayValueFunc]="displayProfileValue">
|
||||
</app-explore-dmp-filter-item-component>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<app-explore-dmp-filter-item-component [options]="this.dmpOrganisations" (selectedChanged)="dmpOrganisationChanged($event)"
|
||||
[filterOptions]="dmpOrganisationSearch.bind(this)" (optionRemoved)="removeOrganisation($event)" [searchEnabled]="true"
|
||||
[displayTitleFunc]="displayDmpOrganisationsLabel" [displayValueFunc]="displayDmpOrganisationsValue">
|
||||
</app-explore-dmp-filter-item-component>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion> -->
|
||||
@ -1,106 +0,0 @@
|
||||
.facet-search-component {
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tags-chips {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.search ::ng-deep.mat-form-field-infix {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
color: black;
|
||||
// color: #089dbb;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.import {
|
||||
margin: 10px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.filters {
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.filters-title {
|
||||
width: 93px;
|
||||
color: #089dbb;
|
||||
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: #00b29f !important;
|
||||
// }
|
||||
|
||||
// ::ng-deep.mat-form-field-underline {
|
||||
// background-color: #adadad;
|
||||
// }
|
||||
|
||||
// ::ng-deep.mat-form-field-ripple {
|
||||
// background-color: #00b29f !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: #00b29f;
|
||||
}
|
||||
|
||||
::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: #777777;
|
||||
// border-color: #00b29f;
|
||||
}
|
||||
|
||||
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
|
||||
color: #777777;
|
||||
background-color: #777777;
|
||||
// color: #00b29f;
|
||||
// background-color: #00b29f;
|
||||
}
|
||||
|
||||
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
|
||||
background-color: #2e74b649;
|
||||
}
|
||||
@ -1,347 +0,0 @@
|
||||
|
||||
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core";
|
||||
import { MatAccordion } from "@angular/material/expansion";
|
||||
import { ActivatedRoute } from "@angular/router";
|
||||
import { GrantStateType } from '@app/core/common/enum/grant-state-type';
|
||||
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
|
||||
import { DatasetProfileModel } from '@app/core/model/dataset/dataset-profile';
|
||||
import { GrantListingModel } from '@app/core/model/grant/grant-listing';
|
||||
import { OrganizationModel } from '@app/core/model/organisation/organization';
|
||||
import { DatasetProfileCriteria } from '@app/core/query/dataset-profile/dataset-profile-criteria';
|
||||
import { ExploreDmpCriteriaModel } from '@app/core/query/explore-dmp/explore-dmp-criteria';
|
||||
import { GrantCriteria } from '@app/core/query/grant/grant-criteria';
|
||||
import { OrganisationCriteria } from '@app/core/query/organisation/organisation-criteria';
|
||||
import { AuthService } from '@app/core/services/auth/auth.service';
|
||||
import { DatasetService } from '@app/core/services/dataset/dataset.service';
|
||||
import { DmpService } from '@app/core/services/dmp/dmp.service';
|
||||
import { ExternalSourcesService } from '@app/core/services/external-sources/external-sources.service';
|
||||
import { GrantService } from '@app/core/services/grant/grant.service';
|
||||
import { OrganisationService } from '@app/core/services/organisation/organisation.service';
|
||||
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
|
||||
import { BaseCriteriaComponent } from '@app/ui/misc/criteria/base-criteria.component';
|
||||
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
|
||||
import { TranslateService } from "@ngx-translate/core";
|
||||
import { Observable, of as observableOf } from 'rxjs';
|
||||
import { map } from 'rxjs/operators';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-explore-dmp-filters-component',
|
||||
templateUrl: './explore-dmp-filters.component.html',
|
||||
styleUrls: ['./explore-dmp-filters.component.scss']
|
||||
})
|
||||
export class ExploreDmpFiltersComponent extends BaseCriteriaComponent implements OnInit, AfterViewInit {
|
||||
|
||||
@Input() facetCriteria = new ExploreDmpCriteriaModel();
|
||||
@Output() facetCriteriaChange = new EventEmitter();
|
||||
@Input() displayTitleFunc: (value) => string;
|
||||
GrantStateType = GrantStateType;
|
||||
grants: Observable<GrantListingModel[]>;
|
||||
profiles: Observable<DatasetProfileModel[]>;
|
||||
dmpOrganisations: Observable<OrganizationModel[]>;
|
||||
grantOptions: Observable<GrantListingModel[]>;
|
||||
grantStateOptions: Observable<any[]>;
|
||||
filteringOrganisationsAsync = false;
|
||||
filteredOrganisations: OrganizationModel[];
|
||||
status: GrantStateType;
|
||||
IsChecked: boolean;
|
||||
IsIndeterminate: boolean;
|
||||
LabelAlign: string;
|
||||
IsDisabled: boolean;
|
||||
Active: string;
|
||||
Inactive: string;
|
||||
|
||||
@ViewChild('facetAccordion', { static: false }) accordion: MatAccordion;
|
||||
|
||||
displayGrantStateValue = (option) => option['value'];
|
||||
displayGrantStateLabel = (option) => option['label'];
|
||||
|
||||
displayGrantValue = (option) => option['id'];
|
||||
displayGrantLabel = (option) => option['label'];
|
||||
|
||||
displayProfileValue = (option) => option['id'];
|
||||
displayProfileLabel = (option) => option['label'];
|
||||
|
||||
displayDmpOrganisationsValue = (option) => option['id'];
|
||||
displayDmpOrganisationsLabel = (option) => option['name'];
|
||||
|
||||
profileAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
||||
filterFn: this.filterProfile.bind(this),
|
||||
initialItems: (excludedItems: any[]) =>
|
||||
this.filterProfile('').pipe(
|
||||
map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
|
||||
displayFn: (item) => item['label'],
|
||||
titleFn: (item) => item['label']
|
||||
};
|
||||
|
||||
organizationAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
||||
filterFn: this.filterOrganisation.bind(this),
|
||||
initialItems: (excludedItems: any[]) =>
|
||||
this.getOrganisations().pipe(
|
||||
map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
|
||||
displayFn: (item) => item['name'],
|
||||
titleFn: (item) => item['name']
|
||||
}
|
||||
|
||||
grantAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
|
||||
filterFn: this.filterGrant.bind(this),
|
||||
initialItems: (excludedItems: any[]) =>
|
||||
this.filterGrant('').pipe(
|
||||
map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
|
||||
displayFn: (item) => item['label'],
|
||||
titleFn: (item) => item['label']
|
||||
}
|
||||
|
||||
constructor(
|
||||
public activatedRoute: ActivatedRoute,
|
||||
public languageService: TranslateService,
|
||||
public grantService: GrantService,
|
||||
private authentication: AuthService,
|
||||
public datasetProfileService: DatasetService,
|
||||
public organisationService: OrganisationService,
|
||||
public externalSourcesService: ExternalSourcesService,
|
||||
private dmpService: DmpService
|
||||
) {
|
||||
super(new ValidationErrorModel());
|
||||
this.IsChecked = false;
|
||||
this.IsIndeterminate = false;
|
||||
this.LabelAlign = 'after';
|
||||
this.IsDisabled = false;
|
||||
this.Active = "0";
|
||||
this.Inactive = "1";
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
setTimeout(x => {
|
||||
this.grantStateOptions = observableOf(
|
||||
[
|
||||
{ label: this.languageService.instant('FACET-SEARCH.GRANT-STATUS.OPTIONS.INACTIVE'), value: GrantStateType.Finished },
|
||||
{ label: this.languageService.instant('FACET-SEARCH.GRANT-STATUS.OPTIONS.ACTIVE'), value: GrantStateType.OnGoing },
|
||||
]);
|
||||
});
|
||||
//this.profiles = this.datasetProfileService.getDatasetProfiles();
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
this.dmpOrganisations = this.organisationService.searchPublicOrganisations(new DataTableRequest<OrganisationCriteria>(0, null, { fields: fields })).pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
// this.accordion.openAll();
|
||||
}
|
||||
|
||||
OnChange($event) {
|
||||
console.log($event);
|
||||
}
|
||||
|
||||
OnIndeterminateChange($event) {
|
||||
console.log($event);
|
||||
}
|
||||
|
||||
controlModified() {
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
grantSearch(value: string): Observable<GrantListingModel[]> {
|
||||
const grantCriteria = new GrantCriteria();
|
||||
grantCriteria.grantStateType = this.facetCriteria.grantStatus;
|
||||
grantCriteria['length'] = 10;
|
||||
grantCriteria.like = value;
|
||||
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
|
||||
const dataTableRequest: DataTableRequest<GrantCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
dataTableRequest.criteria = grantCriteria;
|
||||
return this.grantService.getPublicPaged(dataTableRequest).pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
grantStatusChanged(event) {
|
||||
this.facetCriteria.grantStatus = event.value;
|
||||
// this.facetCriteria.grantStatus = +event.source.ariaLabel; // For checkboxes
|
||||
// this.facetCriteria.grantStatus = event.option.value.value; // For <app-explore-dmp-filter-item-component>
|
||||
// if (!event.source.checked) {
|
||||
if (event.value === 'null') {
|
||||
this.facetCriteria.grantStatus = null;
|
||||
this.grants = observableOf([]);
|
||||
this.facetCriteria.grants = [];
|
||||
}
|
||||
// if (event.checked) {
|
||||
// if (event.option.selected) {
|
||||
// if (event.source.checked) {
|
||||
else {
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const dataTableRequest: DataTableRequest<GrantCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
dataTableRequest.criteria = new GrantCriteria();
|
||||
dataTableRequest.criteria.grantStateType = this.facetCriteria.grantStatus;
|
||||
dataTableRequest.criteria['length'] = 10;
|
||||
|
||||
this.grants = this.grantService.getPublicPaged(dataTableRequest).pipe(map(x => x.data));
|
||||
this.facetCriteria.grants = [];
|
||||
}
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
grantChanged(event: any) {
|
||||
const eventValue = event.option.value.id;
|
||||
if (event.option.selected) { this.facetCriteria.grants.push(eventValue); }
|
||||
if (!event.option.selected) {
|
||||
const index = this.facetCriteria.grants.indexOf(eventValue);
|
||||
this.facetCriteria.grants.splice(index, 1);
|
||||
}
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
removeGrant(grant) {
|
||||
this.facetCriteria.grants.splice(this.facetCriteria.grants.indexOf(grant), 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
onProfileOptionSelected(items: DatasetProfileModel) {
|
||||
//this.facetCriteria.datasetProfile.splice(0);
|
||||
this.facetCriteria.datasetProfile.push(items.id);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
onProfileOptionRemoved(item: DatasetProfileModel) {
|
||||
const index = this.facetCriteria.datasetProfile.indexOf(item.id);
|
||||
if (index >= 0) {
|
||||
this.facetCriteria.datasetProfile.splice(index, 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
}
|
||||
|
||||
profileChanged(event: any) {
|
||||
const eventValue = event.option.value.id;
|
||||
if (event.option.selected) {
|
||||
this.facetCriteria.datasetProfile.push(eventValue);
|
||||
}
|
||||
if (!event.option.selected) {
|
||||
const index = this.facetCriteria.datasetProfile.indexOf(eventValue);
|
||||
this.facetCriteria.datasetProfile.splice(index, 1);
|
||||
}
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
removeProfile(profile) {
|
||||
this.facetCriteria.datasetProfile.splice(this.facetCriteria.datasetProfile.indexOf(profile), 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
onOrganizationOptionSelected(item: OrganizationModel) {
|
||||
this.facetCriteria.dmpOrganisations.push(item.id);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
onOrganizationOptionRemoved(item: OrganizationModel) {
|
||||
const index = this.facetCriteria.dmpOrganisations.indexOf(item.id);
|
||||
if (index >= 0) {
|
||||
this.facetCriteria.dmpOrganisations.splice(index, 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
}
|
||||
|
||||
onGrantOptionSelected(item: GrantListingModel) {
|
||||
this.facetCriteria.grants.push(item.id);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
onGrantOptionRemoved(item: GrantListingModel) {
|
||||
const index = this.facetCriteria.grants.indexOf(item.id);
|
||||
if (index >= 0) {
|
||||
this.facetCriteria.grants.splice(index, 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
}
|
||||
|
||||
public roleChanged(event: any) {
|
||||
this.facetCriteria.role = event.value;
|
||||
if (event.value === 'null') {
|
||||
this.facetCriteria.role = null;
|
||||
}
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
dmpOrganisationChanged(event: any) {
|
||||
const eventValue = event.option.value.id;
|
||||
if (event.option.selected) { this.facetCriteria.dmpOrganisations.push(eventValue); }
|
||||
if (!event.option.selected) {
|
||||
const index = this.facetCriteria.dmpOrganisations.indexOf(eventValue);
|
||||
this.facetCriteria.dmpOrganisations.splice(index, 1);
|
||||
}
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
// profileSearch(value: string) {
|
||||
// return this.datasetProfileService.getDatasetProfiles();
|
||||
// }
|
||||
|
||||
dmpOrganisationSearch(value: string): Observable<OrganizationModel[]> {
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const dataTableRequest: DataTableRequest<OrganisationCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
dataTableRequest.criteria = new OrganisationCriteria();
|
||||
dataTableRequest.criteria.labelLike = value;
|
||||
return this.organisationService.searchPublicOrganisations(dataTableRequest).pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
removeOrganisation(organisation) {
|
||||
this.facetCriteria.dmpOrganisations.splice(this.facetCriteria.dmpOrganisations.indexOf(organisation), 1);
|
||||
this.facetCriteriaChange.emit(this.facetCriteria);
|
||||
}
|
||||
|
||||
// getProfiles() {
|
||||
// return this.datasetProfileService.getDatasetProfiles();
|
||||
// }
|
||||
|
||||
getOrganisations() {
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const dataTableRequest: DataTableRequest<OrganisationCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
dataTableRequest.criteria = new OrganisationCriteria();
|
||||
dataTableRequest.criteria.labelLike = '';
|
||||
return this.organisationService.searchPublicOrganisations(dataTableRequest).pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
filterGrant(query: string) {
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const grantRequestItem: DataTableRequest<GrantCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
grantRequestItem.criteria = new GrantCriteria();
|
||||
grantRequestItem.criteria.like = query;
|
||||
return this.grantService.getPublicPaged(grantRequestItem).pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
filterProfile(query: string) {
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const profileRequestItem: DataTableRequest<DatasetProfileCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
profileRequestItem.criteria = new DatasetProfileCriteria();
|
||||
profileRequestItem.criteria.like = query;
|
||||
|
||||
return this.datasetProfileService.getDatasetProfiles(profileRequestItem);
|
||||
}
|
||||
|
||||
filterOrganisation(value: string) {
|
||||
this.filteringOrganisationsAsync = true;
|
||||
const fields: Array<string> = new Array<string>();
|
||||
fields.push('asc');
|
||||
const dataTableRequest: DataTableRequest<OrganisationCriteria> = new DataTableRequest(0, null, { fields: fields });
|
||||
dataTableRequest.criteria = new OrganisationCriteria();
|
||||
dataTableRequest.criteria.labelLike = value;
|
||||
|
||||
return this.organisationService.searchPublicOrganisations(dataTableRequest).pipe(map(x => x.data));
|
||||
}
|
||||
|
||||
displayLabel(value) {
|
||||
return this.displayTitleFunc ? this.displayTitleFunc(value) : value;
|
||||
}
|
||||
|
||||
isOptionSelected(profile: any) {
|
||||
return this.formGroup.value.map(x => x.id).indexOf(profile.id) !== -1;
|
||||
}
|
||||
|
||||
public isAuthenticated(): boolean {
|
||||
return !(!this.authentication.current());
|
||||
}
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
<div class="header-image">
|
||||
<div class="header-text-container">
|
||||
<h3>{{ 'ABOUT.WELCOME' | translate }}</h3>
|
||||
<h4>{{ 'ABOUT.WELCOME-MESSAGE' | translate }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="explore-dmp-content">
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-plain d-flex">
|
||||
<div class="card-desc d-flex flex-column justify-content-center">
|
||||
<h4 class="card-title">{{'DMP-LISTING.TITLE' | translate}}</h4>
|
||||
<div *ngIf="allVersions">
|
||||
<span class="all-versions">
|
||||
{{'DMP-LISTING.VIEW-ALL-VERSIONS' | translate}}
|
||||
</span>
|
||||
<span class="dmp-label">
|
||||
{{this.groupLabel}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body table-responsive">
|
||||
<div class="explore-dmp-listing row pb-2">
|
||||
<div class="col-12 col-sm-12 col-md-3">
|
||||
<app-explore-dmp-filters-component class="col-auto" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component>
|
||||
<!-- <app-explore-dmp-filters-component class="col-auto" [showGrant]="showGrant" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component> -->
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-9 pt-4">
|
||||
<div *ngFor="let item of listingItems; let i = index">
|
||||
<app-explore-dmp-listing-item-component [showDivider]="i !== (listingItems.length - 1)" [dmp]="item"></app-explore-dmp-listing-item-component>
|
||||
</div>
|
||||
<mat-paginator #paginator [length]="totalCount" [pageSizeOptions]="[10, 25, 100]" (page)="pageThisEvent($event)"></mat-paginator>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,86 +0,0 @@
|
||||
@import "node_modules/bootstrap/scss/functions";
|
||||
@import "node_modules/bootstrap/scss/variables";
|
||||
@import "node_modules/bootstrap/scss/mixins/_breakpoints";
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
.lightblue-btn {
|
||||
font-size: 12px;
|
||||
}
|
||||
::ng-deep .mat-paginator-container {
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
min-height: 5vh;
|
||||
}
|
||||
|
||||
.header-image {
|
||||
background: url("/assets/images/new-dashboard-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;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
::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: auto !important;
|
||||
min-width: 55% !important;
|
||||
min-height: 43px !important;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
::ng-deep .mat-paginator-navigation-previous {
|
||||
margin-left: auto !important;
|
||||
}
|
||||
|
||||
.all-versions {
|
||||
color: #999999 !important;
|
||||
}
|
||||
|
||||
.dmp-label {
|
||||
color: #089dbb !important;
|
||||
}
|
||||
@ -1,198 +0,0 @@
|
||||
|
||||
import { Component, OnInit, ViewChild } from "@angular/core";
|
||||
import { MatPaginator } from "@angular/material/paginator";
|
||||
import { MatSort } from "@angular/material/sort";
|
||||
import { ActivatedRoute, Router } from "@angular/router";
|
||||
import { DataTableRequest } from '@app/core/model/data-table/data-table-request';
|
||||
import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
|
||||
import { ExploreDmpCriteriaModel } from '@app/core/query/explore-dmp/explore-dmp-criteria';
|
||||
import { DmpService } from '@app/core/services/dmp/dmp.service';
|
||||
import { BreadcrumbItem } from '@app/ui/misc/breadcrumb/definition/breadcrumb-item';
|
||||
import { IBreadCrumbComponent } from '@app/ui/misc/breadcrumb/definition/IBreadCrumbComponent';
|
||||
import { BaseComponent } from '@common/base/base.component';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { Observable, of as observableOf } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
|
||||
@Component({
|
||||
selector: 'app-explore-dmp-listing-component',
|
||||
templateUrl: 'explore-dmp-listing.component.html',
|
||||
styleUrls: ['./explore-dmp-listing.component.scss'],
|
||||
})
|
||||
export class ExploreDmpListingComponent extends BaseComponent implements OnInit, IBreadCrumbComponent {
|
||||
|
||||
@ViewChild(MatPaginator, { static: true }) _paginator: MatPaginator;
|
||||
sort = new MatSort();
|
||||
|
||||
exploreDmpCriteriaModel: ExploreDmpCriteriaModel = new ExploreDmpCriteriaModel();
|
||||
titlePrefix: string;
|
||||
totalCount: number;
|
||||
listingItems: DmpListingModel[] = [];
|
||||
breadCrumbs: Observable<BreadcrumbItem[]>;
|
||||
linkToDmpId: string;
|
||||
groupId: string;
|
||||
allVersions: boolean = false;
|
||||
groupLabel: string;
|
||||
|
||||
constructor(
|
||||
private dmpService: DmpService,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute,
|
||||
private language: TranslateService,
|
||||
) {
|
||||
super();
|
||||
this.sort.direction = 'desc';
|
||||
this.sort.active = "publishedAt";
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.params
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(params => {
|
||||
if (params['groupId']) {
|
||||
this.groupId = params['groupId'];
|
||||
this.exploreDmpCriteriaModel.groupIds.push(this.groupId);
|
||||
this.exploreDmpCriteriaModel.allVersions = true;
|
||||
this.allVersions = true;
|
||||
this.route.queryParams
|
||||
.pipe(takeUntil(this._destroyed))
|
||||
.subscribe(queryParams => {
|
||||
if (queryParams["groupLabel"]) {
|
||||
this.groupLabel = queryParams["groupLabel"];
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
this.refresh();
|
||||
const breadCrumbs = [];
|
||||
breadCrumbs.push({
|
||||
parentComponentName: null,
|
||||
label: this.language.instant('NAV-BAR.PUBLIC-DMPS'),
|
||||
url: "/explore-plans"
|
||||
})
|
||||
this.breadCrumbs = observableOf(breadCrumbs);
|
||||
})
|
||||
}
|
||||
|
||||
refresh() {
|
||||
if (this._paginator.pageSize === undefined) this._paginator.pageSize = 10;
|
||||
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, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
|
||||
if (!result) { return []; }
|
||||
if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
|
||||
this.listingItems = result.data;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
getDefaultCriteria(): ExploreDmpCriteriaModel {
|
||||
const defaultCriteria = new ExploreDmpCriteriaModel();
|
||||
return defaultCriteria;
|
||||
}
|
||||
|
||||
onCriteriaChange(event: ExploreDmpCriteriaModel) {
|
||||
this.exploreDmpCriteriaModel = event;
|
||||
if (this.allVersions == true) this.exploreDmpCriteriaModel.allVersions = this.allVersions;
|
||||
if (this.groupId) this.exploreDmpCriteriaModel.groupIds.push(this.groupId);
|
||||
this._paginator.pageIndex = 0;
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
pageThisEvent(event) {
|
||||
this.refresh();
|
||||
}
|
||||
|
||||
// rowClicked(dmp: DmpListingModel) {
|
||||
// this.router.navigate(['overview', dmp.id], { relativeTo: this.route });
|
||||
// }
|
||||
|
||||
// @ViewChild(MatPaginator) _paginator: MatPaginator;
|
||||
// @ViewChild(MatSort) sort: MatSort;
|
||||
// criteria: ExploreDmpCriteriaModel = new ExploreDmpCriteriaModel();
|
||||
|
||||
// dataSource: DmpDataSource | null;
|
||||
// displayedColumns: String[] = ['name', 'grant', '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> {
|
||||
|
||||
// totalCount = 0;
|
||||
|
||||
// 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
|
||||
// ];
|
||||
|
||||
// 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
|
||||
// }
|
||||
// }
|
||||
@ -1,27 +0,0 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
import { AutoCompleteModule } from '@app/library/auto-complete/auto-complete.module';
|
||||
import { DmpOverviewModule } from '@app/ui/dmp/overview/dmp-overview.module';
|
||||
import { ExploreDmpFilterItemComponent } from '@app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filter-item/explore-dmp-filter-item.component';
|
||||
import { ExploreDmpFiltersComponent } from '@app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component';
|
||||
import { ExploreDmpListingComponent } from '@app/ui/explore-dmp/explore-dmp-listing.component';
|
||||
import { ExploreDmpRoutingModule } from '@app/ui/explore-dmp/explore-dmp.routing';
|
||||
import { ExploreDmpListingItemComponent } from '@app/ui/explore-dmp/listing-item/explore-dmp-listing-item.component';
|
||||
import { CommonFormsModule } from '@common/forms/common-forms.module';
|
||||
import { CommonUiModule } from '@common/ui/common-ui.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonUiModule,
|
||||
CommonFormsModule,
|
||||
AutoCompleteModule,
|
||||
ExploreDmpRoutingModule,
|
||||
DmpOverviewModule
|
||||
],
|
||||
declarations: [
|
||||
ExploreDmpListingComponent,
|
||||
ExploreDmpFiltersComponent,
|
||||
ExploreDmpFilterItemComponent,
|
||||
ExploreDmpListingItemComponent
|
||||
]
|
||||
})
|
||||
export class ExploreDmpModule { }
|
||||
@ -1,35 +0,0 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { ExploreDmpListingComponent } from './explore-dmp-listing.component';
|
||||
import { DmpOverviewComponent } from '../dmp/overview/dmp-overview.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: ExploreDmpListingComponent,
|
||||
data: {
|
||||
breadcrumb: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'versions/:groupId',
|
||||
component: ExploreDmpListingComponent,
|
||||
data: {
|
||||
breadcrumb: true
|
||||
},
|
||||
},
|
||||
{
|
||||
path: 'overview/:publicId',
|
||||
component: DmpOverviewComponent,
|
||||
data: {
|
||||
breadcrumb: true,
|
||||
title: 'GENERAL.TITLES.EXPLORE-PLANS-OVERVIEW'
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forChild(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ExploreDmpRoutingModule { }
|
||||
@ -1,88 +0,0 @@
|
||||
<div class="listing-item">
|
||||
<a [routerLink]="['/explore-plans/overview/' + this.dmp.id]">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col-12 gray-container container-header">
|
||||
{{dmp.grantAbbreviation}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto">
|
||||
<div class="outer-circle"><div class="inner-circle" matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}"></div></div>
|
||||
<!-- <mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">fiber_manual_record</mat-icon> -->
|
||||
<!-- <mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.PUBLISHED' | translate}}" class="published-icon">radio_button_checked</mat-icon> -->
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row d-flex flex-wrap">
|
||||
<div class="col pl-0">
|
||||
<h4 class="title pl-0">{{dmp.label}}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto pl-0">
|
||||
<p class="mt-1 description">{{dmp.description}}</p>
|
||||
</div>
|
||||
<div class="col-auto about-item ml-auto">
|
||||
<p>{{'DMP-LISTING.COLUMNS.VERSION' | translate}} : {{dmp.version}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-auto about-item pl-0">
|
||||
<!-- <mat-icon class="gray-icon pt-2">settings</mat-icon> -->
|
||||
<!-- <h4 class="mt-2 ml-1 mr-3 p-1">{{roleDisplay(dmp.users).toUpperCase()}}</h4> -->
|
||||
|
||||
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.INVOLVED-DATASETS' | translate}}" class="gray-icon pt-2">storage</mat-icon>
|
||||
<h4 class="length mt-2 ml-1 mr-3 p-1">{{dmp.datasets.length}}</h4>
|
||||
</div>
|
||||
<div class="col-auto about-item">
|
||||
<mat-icon matTooltip="{{'DMP-PUBLIC-LISTING.TOOLTIP.TEMPLATES-INVOLVED' | translate}}" class="gray-icon pt-2">assignment</mat-icon>
|
||||
<div *ngFor="let profile of dmp.associatedProfiles" class="pt-1">
|
||||
<div matTooltip="{{profile.label}}" class="chip ml-2 mr-2">{{profile.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto about-item ml-auto">
|
||||
<p>{{'DMP-PROFILE-LISTING.COLUMNS.PUBLISHED' | translate}} {{dmp.finalizedAt | date: "shortDate"}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- <div class="explore-dmp-listing-item row" (click)="itemClicked()">
|
||||
<div class="col-auto">
|
||||
<mat-icon>lock</mat-icon>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<h4 class="col-12 title">{{dmp.label}}</h4>
|
||||
<h4 class="col-12 grant-title">{{dmp.grant}}</h4>
|
||||
</div>
|
||||
<div class="row d-flex align-items-center my-1">
|
||||
<mat-icon class="col-auto gray-icon">storage</mat-icon>
|
||||
<h4 class="col-auto m-2 p-1">{{dmp.associatedProfiles.length}}</h4>
|
||||
<div class="row" *ngFor="let profile of dmp.associatedProfiles">
|
||||
<div class="col-auto explore-dmp-chip ml-2">{{profile.label}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex align-items-center my-1">
|
||||
<mat-icon class="col-auto gray-icon">settings</mat-icon>
|
||||
<h4 class="col-auto m-0 p-0">OWNER</h4>
|
||||
</div>
|
||||
<div class="row d-flex align-items-center my-1">
|
||||
<mat-icon class="col-auto gray-icon">group</mat-icon>
|
||||
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
|
||||
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
|
||||
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
|
||||
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
|
||||
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
|
||||
<div class="col-auto explore-dmp-squared-chip mr-2">JOHN DOE</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<mat-icon>more_horiz</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
<mat-divider *ngIf="showDivider"></mat-divider> -->
|
||||
@ -1,142 +0,0 @@
|
||||
.gray-container {
|
||||
letter-spacing: 5px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.container-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin-top: 0px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.about-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.about-item h4 {
|
||||
font-size: 1rem;
|
||||
line-height: 1.25em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.about-item .length {
|
||||
color: #00b29f;
|
||||
// color: #089dbb;
|
||||
}
|
||||
|
||||
.about-item .title {
|
||||
margin: 2px 10px;
|
||||
}
|
||||
|
||||
.about-item p {
|
||||
margin-left: auto;
|
||||
margin-bottom: 0px;
|
||||
padding-top: 7px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.draft-icon {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.more-horiz {
|
||||
font-size: 28px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.custom-published-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: #08bd6342;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.published-icon {
|
||||
color: #08bd63;
|
||||
font-size: 12px;
|
||||
margin-left: 4px;
|
||||
padding-bottom: 7px;
|
||||
// padding-top: 2px;
|
||||
// padding-left: 4px;
|
||||
// color: #92d050;
|
||||
}
|
||||
|
||||
.outer-circle {
|
||||
background: #08bd6342;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.inner-circle {
|
||||
position: absolute;
|
||||
background: #08bd63;
|
||||
border-radius: 50%;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -5px 0px 0px -5px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
display: inline;
|
||||
padding-left: 1em;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
h4 > span {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
// .explore-dmp-listing-item {
|
||||
// margin-top: 2em;
|
||||
// margin-bottom: 2em;
|
||||
// cursor: pointer;
|
||||
|
||||
// .title {
|
||||
// color: black;
|
||||
// }
|
||||
|
||||
// .grant-title {
|
||||
// color: rgb(93, 125, 173);
|
||||
// }
|
||||
|
||||
// .gray-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;
|
||||
// }
|
||||
// }
|
||||
@ -1,53 +0,0 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
|
||||
import { DmpListingModel } from '../../../core/model/dmp/dmp-listing';
|
||||
import { Principal } from '../../../core/model/auth/principal';
|
||||
import { AuthService } from '../../../core/services/auth/auth.service';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
import { Router, ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-explore-dmp-listing-item-component',
|
||||
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(
|
||||
private authentication: AuthService,
|
||||
private translate: TranslateService,
|
||||
private router: Router,
|
||||
private route: ActivatedRoute
|
||||
) { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
// itemClicked() {
|
||||
// this.onClick.emit(this.dmp);
|
||||
// }
|
||||
|
||||
roleDisplay(value: any) {
|
||||
const principal: Principal = this.authentication.current();
|
||||
let role: number;
|
||||
if (principal) {
|
||||
value.forEach(element => {
|
||||
if (principal.id === element.id) {
|
||||
role = element.role;
|
||||
}
|
||||
});
|
||||
}
|
||||
if (role === 0) {
|
||||
return this.translate.instant('DMP-PUBLIC-LISTING.OWNER');
|
||||
}
|
||||
else if (role === 1) {
|
||||
return this.translate.instant('DMP-PUBLIC-LISTING.MEMBER');
|
||||
}
|
||||
else {
|
||||
return this.translate.instant('DMP-PUBLIC-LISTING.VIEW-ONLY');
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue