Adds breadcrumbs everywhere - (Ticket #86) and adds related dmps filter on public datasets

This commit is contained in:
apapachristou 2019-06-11 11:25:32 +03:00
parent 3db3456eb8
commit 60d05bd374
19 changed files with 178 additions and 38 deletions

View File

@ -3,6 +3,7 @@ import { BaseCriteria } from "../base-criteria";
export class ExploreDatasetCriteriaModel extends BaseCriteria {
public projectStatus: ProjectStateType;
public dmpIds: string[] = [];
public projects: string[] = [];
public datasetProfile: string[] = [];
public dmpOrganisations: string[] = [];

View File

@ -46,10 +46,14 @@ export class DmpService {
return this.http.get<DmpModel>(this.actionUrl + 'public/' + id, { headers: this.headers });
}
getOverviewSingle(id: string): Observable<any> {
getOverviewSingle(id: string): Observable<DmpOverviewModel> {
return this.http.get<DmpOverviewModel>(this.actionUrl + 'overview/' + id, { headers: this.headers });
}
getOverviewSinglePublic(id: string): Observable<DmpOverviewModel> {
return this.http.get<DmpOverviewModel>(this.actionUrl + 'publicOverview/' + id, { headers: this.headers })
}
unlock(id: String): Observable<DmpModel> {
return this.http.get<DmpModel>(this.actionUrl + id + '/unlock', { headers: this.headers });
}
@ -117,7 +121,7 @@ export class DmpService {
return this.http.post(this.actionUrl + 'upload', formData, { params: params });
}
getPublicPaged(dataTableRequest: DataTableRequest<ExploreDmpCriteriaModel>): Observable<DataTableData<DmpListingModel>> {
return this.http.post<DataTableData<DmpListingModel>>(this.actionUrl + 'public/paged', dataTableRequest);
getPublicPaged(dataTableRequest: DataTableRequest<ExploreDmpCriteriaModel>, fieldsGroup?: string): Observable<DataTableData<DmpListingModel>> {
return this.http.post<DataTableData<DmpListingModel>>(this.actionUrl + 'public/paged?fieldsGroup=' + fieldsGroup, dataTableRequest, { headers: this.headers });
}
}

View File

@ -149,7 +149,7 @@ export class DashboardComponent extends BaseComponent implements OnInit, IBreadC
fields.push('asc');
const dataTableRequest: DataTableRequest<ExploreDmpCriteriaModel> = new DataTableRequest(0, 2, { fields: fields });
dataTableRequest.criteria = dmpCriteria;
return this.dmpService.getPublicPaged(dataTableRequest).pipe(takeUntil(this._destroyed)).subscribe(result => { this.dmpListingItems = result.data; });
return this.dmpService.getPublicPaged(dataTableRequest, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => { this.dmpListingItems = result.data; });
}
getPublicDatasets() {

View File

@ -25,7 +25,7 @@
</div>
<hr>
<div class="date">
<p>{{'DATASET-LISTING.PUBLISHED' | translate}} {{dataset.created | date: "shortDate"}}</p>
<p>{{'DATASET-LISTING.COLUMNS.PUBLISHED' | translate}} {{dataset.created | date: "shortDate"}}</p>
</div>
</div>
</div>

View File

@ -269,7 +269,7 @@ export class DatasetWizardComponent extends BaseComponent implements OnInit, IBr
this.formGroup.get('dmp').setValue(this.datasetWizardModel.dmp);
this.loadDatasetProfiles();
const breadcrumbs = [];
breadcrumbs.push({parentComponentName: null, label: this.language.instant('NAV-BAR.PUBLIC DATASETS'), url: '/datasets'});
breadcrumbs.push({parentComponentName: null, label: this.language.instant('NAV-BAR.PUBLIC DATASETS'), url: '/explore'});
breadcrumbs.push({parentComponentName: null, label: this.datasetWizardModel.label, url: '/datasets/publicEdit/' + this.datasetWizardModel.id});
this.breadCrumbs = Observable.of(breadcrumbs);
}

View File

@ -22,12 +22,12 @@ import { DmpListingItemComponent } from './listing/listing-item/dmp-listing-item
import { DmpWizardComponent } from './wizard/dmp-wizard.component';
import { DmpWizardEditorComponent } from './wizard/editor/dmp-wizard-editor.component';
import { DmpWizardDatasetListingComponent } from './wizard/listing/dmp-wizard-dataset-listing.component';
import { DmpOverviewComponent } from './overview/dmp-overview.component';
import { ExportMethodDialogModule } from '../../library/export-method-dialog/export-method-dialog.module';
import { GeneralTabComponent } from './editor/general-tab/general-tab.component';
import { PeopleTabComponent } from './editor/people-tab/people-tab.component';
import { ProjectTabComponent } from './editor/project-tab/project-tab.component';
import { DatasetsTabComponent } from './editor/datasets-tab/datasets-tab.component';
import { DmpOverviewModule } from './overview/dmp-overview.module';
@NgModule({
imports: [
@ -38,7 +38,8 @@ import { DatasetsTabComponent } from './editor/datasets-tab/datasets-tab.compone
ExportMethodDialogModule,
FormattingModule,
AutoCompleteModule,
DmpRoutingModule
DmpRoutingModule,
DmpOverviewModule
],
declarations: [
DmpListingComponent,
@ -57,7 +58,6 @@ import { DatasetsTabComponent } from './editor/datasets-tab/datasets-tab.compone
DynamicFieldProjectComponent,
DmpUploadDialogue,
DmpListingItemComponent,
DmpOverviewComponent,
GeneralTabComponent,
PeopleTabComponent,
ProjectTabComponent,

View File

@ -36,15 +36,15 @@ const routes: Routes = [
},
},
{
path: 'overview/:id',
component: DmpOverviewComponent,
path: 'publicEdit/:publicId',
component: DmpEditorComponent,
data: {
breadcrumb: true
},
},
{
path: 'publicEdit/:publicId',
component: DmpEditorComponent,
path: 'overview/:id',
component: DmpOverviewComponent,
data: {
breadcrumb: true
},

View File

@ -157,10 +157,9 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
this.formGroup = this.dmp.buildForm();
//this.registerFormEventsForDmpProfile(this.dmp.definition);
if (!this.editMode || this.dmp.status === Status.Inactive) { this.formGroup.disable(); }
if (this.isAuthenticated()) {
// if (!this.isAuthenticated) {
// if (!this.isAuthenticated) {
const breadcrumbs = [];
breadcrumbs.push({ parentComponentName: null, label:this.language.instant('NAV-BAR.MY-PUBLIC-DMPS').toUpperCase(), url: '/plans' });
breadcrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-PUBLIC-DMPS').toUpperCase(), url: '/plans' });
breadcrumbs.push({ parentComponentName: null, label: this.dmp.label, url: '/plans/publicEdit/' + this.dmp.id });
this.breadCrumbs = Observable.of(breadcrumbs);
// this.breadCrumbs = Observable.of([
@ -172,7 +171,7 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
// }]
// );
this.associatedUsers = data.associatedUsers;
}
// }
});
} else {
this.dmp = new DmpEditorModel();

View File

@ -26,8 +26,8 @@
}
.about-item h4 {
font-size: 0.92rem;
line-height: 1.3em;
font-size: 1rem;
line-height: 1.25em;
font-weight: 500;
}

View File

@ -26,6 +26,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
dmp: DmpOverviewModel;
isNew = true;
isPublic = false;
breadCrumbs: Observable<BreadcrumbItem[]> = Observable.of();
constructor(
@ -47,6 +48,7 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
.pipe(takeUntil(this._destroyed))
.subscribe((params: Params) => {
const itemId = params['id'];
const publicId = params['publicId'];
if (itemId != null) {
this.isNew = false;
this.dmpService.getOverviewSingle(itemId)
@ -59,6 +61,19 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
this.breadCrumbs = Observable.of(breadCrumbs);
})
}
else if (publicId != null) {
this.isNew = false;
this.isPublic = true;
this.dmpService.getOverviewSinglePublic(publicId)
.pipe(takeUntil(this._destroyed))
.subscribe(data => {
this.dmp = data;
const breadCrumbs = [];
breadCrumbs.push({ parentComponentName: null, label: this.language.instant('NAV-BAR.MY-DMPS'), url: "/explore-plans" });
breadCrumbs.push({ parentComponentName: 'DmpListingComponent', label: this.dmp.label, url: '/plans/publicOverview/' + this.dmp.id });
this.breadCrumbs = Observable.of(breadCrumbs);
});
}
});
}
@ -79,7 +94,10 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
}
datasetsClicked(dmpId: String) {
this.router.navigate(['/datasets'], { queryParams: { dmpId: dmpId } });
if(!this.isPublic)
this.router.navigate(['/datasets'], { queryParams: { dmpId: dmpId } });
else
this.router.navigate(['/explore'], { queryParams: { dmpId: dmpId } });
}
goToUri(uri: string) {
@ -100,8 +118,8 @@ export class DmpOverviewComponent extends BaseComponent implements OnInit {
this.dmpService.delete(this.dmp.id)
.pipe(takeUntil(this._destroyed))
.subscribe(
complete => { this.onCallbackSuccess() },
error => this.onDeleteCallbackError(error)
complete => { this.onCallbackSuccess() },
error => this.onDeleteCallbackError(error)
);
}
});

View File

@ -0,0 +1,25 @@
import { NgModule } from '@angular/core';
import { CommonFormsModule } from '../../../common/forms/common-forms.module';
import { CommonUiModule } from '../../../common/ui/common-ui.module';
import { FormattingModule } from '../../../core/formatting.module';
import { AutoCompleteModule } from '../../../library/auto-complete/auto-complete.module';
import { ConfirmationDialogModule } from '../../../library/confirmation-dialog/confirmation-dialog.module';
import { UrlListingModule } from '../../../library/url-listing/url-listing.module';
import { DmpOverviewComponent } from './dmp-overview.component';
import { ExportMethodDialogModule } from '../../../library/export-method-dialog/export-method-dialog.module';
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
UrlListingModule,
ConfirmationDialogModule,
ExportMethodDialogModule,
FormattingModule,
AutoCompleteModule
],
declarations: [
DmpOverviewComponent
]
})
export class DmpOverviewModule { }

View File

@ -1,6 +1,6 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, ViewChild, ɵConsole } from '@angular/core';
import { MatPaginator, MatSort } from '@angular/material';
import { Router } from '@angular/router';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../core/common/base/base.component';
import { DataTableRequest } from '../../core/model/data-table/data-table-request';
@ -11,6 +11,10 @@ import { IBreadCrumbComponent } from '../misc/breadcrumb/definition/IBreadCrumbC
import { BreadcrumbItem } from '../misc/breadcrumb/definition/breadcrumb-item';
import { Observable } from 'rxjs';
import { TranslateService } from '@ngx-translate/core';
import { DmpService } from '../../core/services/dmp/dmp.service';
import { DatasetCriteriaComponent } from '../dataset/listing/criteria/dataset-criteria.component';
import { DmpModel } from '../../core/model/dmp/dmp';
import { DatasetCriteria } from '../../core/query/dataset/dataset-criteria';
@Component({
@ -27,17 +31,46 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
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.refresh();
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({
@ -48,7 +81,7 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
this.breadCrumbs = Observable.of(breadCrumbs);
}
refresh() {
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();
@ -74,8 +107,8 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI
getDefaultCriteria(): ExploreDatasetCriteriaModel {
const defaultCriteria = new ExploreDatasetCriteriaModel();
// if (dmpId != null) {
// defaultCriteria.dmpIds.push(dmpId);
// if (dmp != null) {
// defaultCriteria.dmpIds.push(dmp.id);
// }
return defaultCriteria;
}

View File

@ -23,6 +23,18 @@
</mat-list-item>
</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-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</mat-form-field>
</div>
<div class="col-10 gray-container">
<h6 class="category-title">{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}</h6>
<mat-form-field>

View File

@ -1,6 +1,6 @@
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { MatAccordion } from '@angular/material';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Params } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs';
import { BaseComponent } from '../../../core/common/base/base.component';
@ -22,6 +22,13 @@ import { DmpService } from '../../../core/services/dmp/dmp.service';
import { OrganisationCriteria } from '../../../core/query/organisation/organisation-criteria';
import { OrganisationService } from '../../../core/services/organisation/organisation.service';
import { OrganizationModel } from '../../../core/model/organisation/organization';
import { DataTableData } from '../../../core/model/data-table/data-table-data';
import { DmpListingModel } from '../../../core/model/dmp/dmp-listing';
import { ExploreDmpCriteriaModel } from '../../../core/query/explore-dmp/explore-dmp-criteria';
import { DmpModel } from '../../../core/model/dmp/dmp';
import { BaseCriteriaComponent } from '../../misc/criteria/base-criteria.component';
import { ValidationErrorModel } from '../../../common/forms/validation/error-model/validation-error-model';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'app-explore-dataset-filters-component',
@ -38,6 +45,7 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
projects: Observable<ProjectListingModel[]>;
profiles: Observable<DatasetProfileModel[]>;
dmpOrganisations: Observable<ExternalSourceItemModel[]>;
dmpIds: Observable<DataTableData<DmpListingModel>>;
projectOptions: Observable<ProjectListingModel[]>;
projectStateOptions: Observable<any[]>;
filteringOrganisationsAsync = false;
@ -62,6 +70,13 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
titleFn: (item) => item['name']
};
dmpAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
filterFn: (x, excluded) => this.filterDmps(x).map(x => x.data),
initialItems: (extraData) => this.filterDmps('').map(x => x.data),
displayFn: (item) => item['label'],
titleFn: (item) => item['label']
};
projectAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
filterFn: this.filterProject.bind(this),
initialItems: (excludedItems: any[]) =>
@ -244,6 +259,20 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
}
}
onDmpOptionSelected(items: DmpListingModel[]) {
this.facetCriteria.dmpIds.splice(0);
this.facetCriteria.dmpIds.push(...items.map(x => x.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(items: DatasetProfileModel[]) {
this.facetCriteria.datasetProfile.splice(0);
this.facetCriteria.datasetProfile.push(...items.map(x => x.id));
@ -272,6 +301,15 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
}
}
filterDmps(value: string): Observable<DataTableData<DmpListingModel>> {
const fields: Array<string> = new Array<string>();
fields.push('asc');
const dmpDataTableRequest: DataTableRequest<ExploreDmpCriteriaModel> = new DataTableRequest(0, null, { fields: fields });
dmpDataTableRequest.criteria = new ExploreDatasetCriteriaModel();
dmpDataTableRequest.criteria.like = value;
return this.dmpService.getPublicPaged(dmpDataTableRequest, "autocomplete")
}
filterTags(value: string): Observable<ExternalSourceItemModel[]> {
this.filteredTags = undefined;
this.filteringTagsAsync = true;
@ -302,7 +340,7 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI
profileRequestItem.criteria = new ExploreDatasetCriteriaModel();
profileRequestItem.criteria.like = query;
return this.dmpService.getPublicPaged(profileRequestItem).map(x => x.data);
return this.dmpService.getPublicPaged(profileRequestItem, "listing").map(x => x.data);
}
filterOrganisation(value: string) {

View File

@ -310,7 +310,7 @@ export class ExploreDmpFiltersComponent extends BaseCriteriaComponent implements
profileRequestItem.criteria = new ExploreDatasetCriteriaModel();
profileRequestItem.criteria.like = query;
return this.dmpService.getPublicPaged(profileRequestItem).map(x => x.data);
return this.dmpService.getPublicPaged(profileRequestItem, "listing").map(x => x.data);
}
filterOrganisation(value: string) {

View File

@ -1,6 +1,6 @@
import { Component, OnInit, ViewChild } from "@angular/core";
import { MatPaginator, MatSort } from "@angular/material";
import { Router } from "@angular/router";
import { Router, ActivatedRoute } from "@angular/router";
import { takeUntil } from "rxjs/operators";
import { BaseComponent } from "../../core/common/base/base.component";
import { DataTableRequest } from "../../core/model/data-table/data-table-request";
@ -31,6 +31,7 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
constructor(
private dmpService: DmpService,
private router: Router,
private route: ActivatedRoute,
private language: TranslateService,
) {
super();
@ -55,7 +56,7 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
const request = new DataTableRequest<ExploreDmpCriteriaModel>(startIndex, this._paginator.pageSize, { fields: fields });
request.criteria = this.exploreDmpCriteriaModel || this.getDefaultCriteria();
this.dmpService.getPublicPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
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;
@ -63,7 +64,7 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
}
rowClicked(dmp: DmpListingModel) {
this.router.navigate(['/plans/publicEdit/' + dmp.id]);
this.router.navigate(['overview', dmp.id], { relativeTo: this.route });
}
getDefaultCriteria(): ExploreDmpCriteriaModel {
@ -72,7 +73,6 @@ export class ExploreDmpListingComponent extends BaseComponent implements OnInit,
}
onCriteriaChange(event: ExploreDmpCriteriaModel) {
//console.log(event)
this.exploreDmpCriteriaModel = event;
this._paginator.pageIndex = 0;
this.refresh();

View File

@ -7,13 +7,15 @@ import { ExploreDmpFiltersComponent } from "./dmp-explore-filters/explore-dmp-fi
import { ExploreDmpListingComponent } from "./explore-dmp-listing.component";
import { ExploreDmpRoutingModule } from "./explore-dmp.routing";
import { ExploreDmpListingItemComponent } from "./listing-item/explore-dmp-listing-item.component";
import { DmpOverviewModule } from "../dmp/overview/dmp-overview.module";
@NgModule({
imports: [
CommonUiModule,
CommonFormsModule,
AutoCompleteModule,
ExploreDmpRoutingModule
ExploreDmpRoutingModule,
DmpOverviewModule
],
declarations: [
ExploreDmpListingComponent,

View File

@ -1,11 +1,19 @@
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: 'overview/:publicId',
component: DmpOverviewComponent,
data: {
breadcrumb: true
},

View File

@ -16,8 +16,8 @@
}
.about-item h4 {
font-size: 0.92rem;
line-height: 1.3em;
font-size: 1rem;
line-height: 1.25em;
font-weight: 500;
}