MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Styles: Public Dmp Filters

This commit is contained in:
apapachristou 2019-05-13 18:41:40 +03:00
parent ebfde3e992
commit efb8b080c1
6 changed files with 335 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/core/model/dataset/dataset-profile.ts
View File

@ -1,7 +1,7 @@
export interface DatasetProfileModel {
id: String;
label: String;
id: string;
label: string;
}
// export class DatasetProfileModel implements Serializable<DatasetProfileModel> {

6
dmp-frontend/src/app/core/model/organisation/organization.ts
View File

@ -1,8 +1,8 @@
import { Status } from "../../common/enum/Status";
export interface OrganizationModel {
id: String;
name: String;
label: String;
id: string;
name: string;
label: string;
status: Status;
}

57
dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.html
View File

@ -1,4 +1,57 @@
<mat-accordion #facetAccordion="matAccordion" [multi]="true" class="facet-search-component">
<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.PROJECTS.LIKE'| translate}}" name="dmpCriteriaName"
[(ngModel)]="facetCriteria.like" (ngModelChange)="controlModified()">
</mat-form-field>
<div class="col-10 gray-container">
<h6 class="category-title">{{ 'FACET-SEARCH.PROJECT-STATUS.TITLE' | translate }}</h6>
<mat-list-item><mat-radio-button value="0" (change)="projectStatusChanged($event)">Active</mat-radio-button></mat-list-item>
<mat-list-item><mat-radio-button value="1" (change)="projectStatusChanged($event)">Inactive</mat-radio-button></mat-list-item>
</div>
<div *ngIf="this.facetCriteria.projectStatus == ProjectStateType.OnGoing || this.facetCriteria.projectStatus == ProjectStateType.Finished"
class="col-10 gray-container">
<h6 class="category-title">{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}</h6>
<mat-form-field>
<app-multiple-auto-complete placeholder="Select Project"
[configuration]="projectAutoCompleteConfiguration"
(optionSelected)="onProjectOptionSelected($event)" (optionRemoved)="onProjectOptionRemoved($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.PROFILES.TITLE' | translate }}</h6>
<mat-form-field>
<app-multiple-auto-complete placeholder="Select Dataset Specification"
[configuration]="profileAutoCompleteConfiguration"
(optionSelected)="onProfileOptionSelected($event)" (optionRemoved)="onProfileOptionRemoved($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.DMP-ORGANISATIONS.TITLE' | translate }}</h6>
<mat-form-field>
<app-multiple-auto-complete placeholder="Select Organization"
[configuration]="organizationAutoCompleteConfiguration"
(optionSelected)="onOrganizationOptionSelected($event)"
(optionRemoved)="onOrganizationOptionRemoved($event)">
</app-multiple-auto-complete>
<mat-icon matSuffix class="style-icon">arrow_drop_down</mat-icon>
</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>
@ -53,4 +106,4 @@
[displayTitleFunc]="displayDmpOrganisationsLabel" [displayValueFunc]="displayDmpOrganisationsValue">
</app-explore-dmp-filter-item-component>
</mat-expansion-panel>
</mat-accordion>
</mat-accordion> -->

93
dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.scss
View File

@ -7,3 +7,96 @@
padding: 0px;
}
}
.search ::ng-deep.mat-form-field-infix {
margin-left: 1em;
}
.category-title {
color: #2e75b6;
margin-top: 8px;
margin-bottom: 12px;
}
.import {
margin: 10px;
padding: 0px;
}
.filters {
border: 1px solid #e4e4e4;
border-radius: 5px;
}
.filters-title {
width: 90px;
color: #2e75b6;
background-color: white;
padding: 0px 20px;
margin-top: -10px;
margin-left: 20px;
text-transform: uppercase;
}
.style-icon {
color: #adadad;
}
::ng-deep .mat-checkbox-inner-container {
background: white;
}
::ng-deep .mat-focused .mat-form-field-label {
color: #2e75b6 !important;
}
::ng-deep.mat-form-field-underline {
background-color: #adadad !important;
}
::ng-deep.mat-form-field-ripple {
background-color: #2e75b6 !important;
}
// ::ng-deep .mat-checkbox {
// background-color: #f6f6f6 !important;
// }
::ng-deep .mat-checkbox .mat-checkbox-frame {
border: 1px solid #aaaaaa;
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background,
.mat-accent .mat-pseudo-checkbox-checked,
.mat-accent .mat-pseudo-checkbox-indeterminate,
.mat-pseudo-checkbox-checked,
.mat-pseudo-checkbox-indeterminate {
background-color: #2e75b6;
}
::ng-deep .mat-ripple-element {
background-color: #2e74b649 !important;
}
::ng-deep .mat-radio-container {
border-radius: 1em;
background: white;
}
::ng-deep .mat-radio-button .mat-radio-outer-circle {
border: 1px solid #aaaaaa;
}
::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color: #2e75b6;
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
color: #2e75b6;
background-color: #2e75b6;
}
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
background-color: #2e74b649;
}

192
dmp-frontend/src/app/ui/explore-dmp/dmp-explore-filters/explore-dmp-filters.component.ts
View File

@ -1,35 +1,55 @@
import { BaseComponent } from "../../../core/common/base/base.component";
import { Component, AfterViewInit, OnInit, Input, EventEmitter, Output, ViewChild } from "@angular/core";
import { ExploreDmpCriteriaModel } from "../../../core/query/explore-dmp/explore-dmp-criteria";
import { MatAccordion } from "@angular/material";
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from "@angular/core";
import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
import { MatAccordion, fadeInItems, MatGridTileHeaderCssMatStyler } from "@angular/material";
import { ActivatedRoute } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { ExternalSourceItemModel } from "../../../core/model/external-sources/external-source-item";
import { Observable } from "rxjs";
import { ExternalSourcesService } from "../../../core/services/external-sources/external-sources.service";
import { ProjectListingModel } from "../../../core/model/project/project-listing";
import { ProjectService } from "../../../core/services/project/project.service";
import { ProjectCriteria } from "../../../core/query/project/project-criteria";
import { DataTableRequest } from "../../../core/model/data-table/data-table-request";
import { takeUntil } from "rxjs/operators";
import { ValidationErrorModel } from "../../../common/forms/validation/error-model/validation-error-model";
import { ProjectStateType } from '../../../core/common/enum/project-state-type';
import { DatasetService } from "../../../core/services/dataset/dataset.service";
import { DataTableRequest } from "../../../core/model/data-table/data-table-request";
import { DatasetProfileModel } from "../../../core/model/dataset/dataset-profile";
import { ExternalSourceItemModel } from "../../../core/model/external-sources/external-source-item";
import { ProjectListingModel } from "../../../core/model/project/project-listing";
import { ExploreDatasetCriteriaModel } from "../../../core/query/explore-dataset/explore-dataset-criteria";
import { ExploreDmpCriteriaModel } from "../../../core/query/explore-dmp/explore-dmp-criteria";
import { ProjectCriteria } from "../../../core/query/project/project-criteria";
import { DatasetService } from "../../../core/services/dataset/dataset.service";
import { DmpService } from "../../../core/services/dmp/dmp.service";
import { ExternalSourcesService } from "../../../core/services/external-sources/external-sources.service";
import { ProjectService } from "../../../core/services/project/project.service";
import { MultipleAutoCompleteConfiguration } from "../../../library/auto-complete/multiple/multiple-auto-complete-configuration";
import { BaseCriteriaComponent } from "../../misc/criteria/base-criteria.component";
import { OrganizationModel } from "../../../core/model/organisation/organization";
import { OrganisationCriteria } from "../../../core/query/organisation/organisation-criteria";
import { OrganisationService } from "../../../core/services/organisation/organisation.service";
@Component({
selector: 'app-explore-dmp-filters-component',
templateUrl: './explore-dmp-filters.component.html',
styleUrls: ['./explore-dmp-filters.component.scss']
})
export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit, AfterViewInit {
export class ExploreDmpFiltersComponent extends BaseCriteriaComponent implements OnInit, AfterViewInit {
@Input() facetCriteria = new ExploreDmpCriteriaModel();
@Output() facetCriteriaChange = new EventEmitter();
@Input() displayTitleFunc: (value) => string;
ProjectStateType = ProjectStateType;
projects: Observable<ProjectListingModel[]>;
profiles: Observable<DatasetProfileModel[]>;
dmpOrganisations: Observable<ExternalSourceItemModel[]>;
projectOptions: Observable<ProjectListingModel[]>;
projectStateOptions: Observable<any[]>;
filteringOrganisationsAsync = false;
filteredOrganisations: ExternalSourceItemModel[];
status: ProjectStateType;
IsChecked: boolean;
IsIndeterminate: boolean;
LabelAlign: string;
IsDisabled: boolean;
Active: string;
Inactive: string;
@ViewChild('facetAccordion') accordion: MatAccordion;
displayProjectStateValue = (option) => option['value'];
@ -44,13 +64,50 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit,
displayDmpOrganisationsValue = (option) => option['id'];
displayDmpOrganisationsLabel = (option) => option['name'];
profileAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
filterFn: this.filterProfile.bind(this),
initialItems: (excludedItems: any[]) =>
this.getProfiles()
.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()
.map(result => result.filter(resultItem => excludedItems.map(x => x.id).indexOf(resultItem.id) === -1)),
displayFn: (item) => item['name'],
titleFn: (item) => item['name']
}
projectAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
filterFn: this.filterProject.bind(this),
initialItems: (excludedItems: any[]) =>
this.filterProject('')
.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 projectService: ProjectService,
public datasetProfileService: DatasetService,
public organisationService: OrganisationService,
public externalSourcesService: ExternalSourcesService,
) { super(); }
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 => {
@ -65,7 +122,15 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit,
}
ngAfterViewInit(): void {
this.accordion.openAll();
// this.accordion.openAll();
}
OnChange($event){
console.log($event);
}
OnIndeterminateChange($event){
console.log($event);
}
controlModified() {
@ -87,13 +152,18 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit,
}
projectStatusChanged(event) {
this.facetCriteria.projectStatus = event.option.value.value;
if (!event.option.selected) {
console.log(event);
this.facetCriteria.projectStatus = event.value;
// this.facetCriteria.projectStatus = +event.source.ariaLabel; // For checkboxes
// this.facetCriteria.projectStatus = event.option.value.value; // For <app-explore-dmp-filter-item-component>
if (!event.source.checked) {
this.facetCriteria.projectStatus = null;
this.projects = Observable.of([]);
this.facetCriteria.projects = [];
}
if (event.option.selected) {
// if (event.checked) {
// if (event.option.selected) {
if (event.source.checked) {
const fields: Array<string> = new Array<string>();
fields.push('asc');
const dataTableRequest: DataTableRequest<ProjectCriteria> = new DataTableRequest(0, null, { fields: fields });
@ -122,6 +192,20 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit,
this.facetCriteriaChange.emit(this.facetCriteria);
}
onProfileOptionSelected(items: DatasetProfileModel[]) {
this.facetCriteria.datasetProfile.splice(0);
this.facetCriteria.datasetProfile.push(...items.map(x => x.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) {
@ -139,6 +223,34 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit,
this.facetCriteriaChange.emit(this.facetCriteria);
}
onOrganizationOptionSelected(items: OrganizationModel[]) {
this.facetCriteria.dmpOrganisations.splice(0);
this.facetCriteria.dmpOrganisations.push(...items.map(x => x.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);
}
}
onProjectOptionSelected(items: ProjectListingModel[]) {
this.facetCriteria.projects.splice(0);
this.facetCriteria.projects.push(...items.map(x => x.id));
this.facetCriteriaChange.emit(this.facetCriteria);
}
onProjectOptionRemoved(item: ProjectListingModel) {
const index = this.facetCriteria.projects.indexOf(item.id);
if (index >= 0) {
this.facetCriteria.projects.splice(index, 1);
this.facetCriteriaChange.emit(this.facetCriteria);
}
}
dmpOrganisationChanged(event: any) {
const eventValue = event.option.value.id;
if (event.option.selected) { this.facetCriteria.dmpOrganisations.push(eventValue); }
@ -161,4 +273,50 @@ export class ExploreDmpFiltersComponent extends BaseComponent implements OnInit,
this.facetCriteria.dmpOrganisations.splice(this.facetCriteria.dmpOrganisations.indexOf(organisation), 1);
this.facetCriteriaChange.emit(this.facetCriteria);
}
getProfiles() {
return this.datasetProfileService.getDatasetProfiles();
}
getOrganisations() {
return this.externalSourcesService.searchDMPOrganizations('');
}
filterProject(query: string) {
const fields: Array<string> = new Array<string>();
fields.push('asc');
const projectRequestItem: DataTableRequest<ProjectCriteria> = new DataTableRequest(0, null, { fields: fields });
projectRequestItem.criteria = new ProjectCriteria();
projectRequestItem.criteria.like = query;
return this.projectService.getPublicPaged(projectRequestItem).map(x => x.data);
}
filterProfile(query: string) {
const fields: Array<string> = new Array<string>();
fields.push('asc');
const profileRequestItem: DataTableRequest<ExploreDatasetCriteriaModel> = new DataTableRequest(0, null, { fields: fields });
profileRequestItem.criteria = new ExploreDatasetCriteriaModel();
profileRequestItem.criteria.like = query;
return this.dmpService.getPublicPaged(profileRequestItem).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.searchInternalOrganisations(dataTableRequest).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;
}
}

1
dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html
View File

@ -17,6 +17,7 @@
<div class="explore-dmp-listing row">
<div class="col-3">
<app-explore-dmp-filters-component class="col-auto" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component>
<!-- <app-explore-dmp-filters-component class="col-auto" [showProject]="showProject" (facetCriteriaChange)="onCriteriaChange($event)"></app-explore-dmp-filters-component> -->
</div>
<div class="col-9">
<div class="row" *ngFor="let item of listingItems; let i = index">