From 98f1e787d6b2d139bead980f38ed102332ce5b76 Mon Sep 17 00:00:00 2001 From: apapachristou Date: Wed, 15 May 2019 11:09:42 +0300 Subject: [PATCH] Apply the new style to the filters in the "Public Dataset Descriptions" page. (Ticket #78) --- .../listing/dataset-listing.component.scss | 26 ++++ .../dataset-listing-item.component.scss | 26 ---- .../explore-dataset-listing.component.html | 2 +- .../explore-dataset-listing.component.scss | 63 +++++++-- .../explore-dataset-listing.component.ts | 4 +- .../explore-dataset-filters.component.html | 66 ++++++++- .../explore-dataset-filters.component.scss | 105 ++++++++++++++- .../explore-dataset-filters.component.ts | 125 +++++++++++++++++- ...xplore-dataset-listing-item.component.html | 57 ++++++-- ...xplore-dataset-listing-item.component.scss | 49 +++++++ .../explore-dataset-listing-item.component.ts | 6 +- .../explore-dmp-listing.component.html | 2 +- 12 files changed, 460 insertions(+), 71 deletions(-) diff --git a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss index c8073db0e..d60d77eee 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss +++ b/dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss @@ -29,6 +29,32 @@ margin-left: auto !important; } +::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; +} + // .mat-table { // margin: 24px; // } diff --git a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss index a3687c77a..db19d7277 100644 --- a/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss +++ b/dmp-frontend/src/app/ui/dataset/listing/listing-item/dataset-listing-item.component.scss @@ -46,29 +46,3 @@ h4 { padding-top: 7px; color: #aaaaaa; } - -::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; -} diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html index 2e3ca7661..fed53183f 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html +++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.html @@ -7,7 +7,7 @@
-
+

{{'DASHBOARD.DATASETS' | translate}}

{{'DATASET-LISTING.SUBTITLE' | translate}}

diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss index 8cd5f2fd6..d62fd87ad 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss +++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.scss @@ -1,25 +1,60 @@ text-center { - text-align: center + text-align: center; } .header-image { - background: url('/assets/images/public-datasets-bg.png') no-repeat; - background-size: cover; - margin-top: 70px; - min-height: 15em; - position: relative; + background: url("/assets/images/public-datasets-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; + 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; + 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: 55% !important; + min-height: 43px !important; + justify-content: space-between; +} + +::ng-deep .mat-paginator-navigation-previous { + margin-left: auto !important; } diff --git a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts index 48fe40196..464664a8d 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts +++ b/dmp-frontend/src/app/ui/explore-dataset/explore-dataset-listing.component.ts @@ -31,7 +31,7 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI } ngOnInit() { - + this.refresh(); } refresh() { @@ -64,4 +64,4 @@ export class ExploreDatasetListingComponent extends BaseComponent implements OnI // } return defaultCriteria; } -} \ No newline at end of file +} diff --git a/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.html b/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.html index 7f2274bab..a2442da07 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.html +++ b/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.html @@ -1,4 +1,66 @@ - +
+
{{'CRITERIA.FILTERS'| translate}}
+
+ + + + search + + + + +
+
{{ 'FACET-SEARCH.PROJECT-STATUS.TITLE' | translate }}
+ + + {{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.ACTIVE' | translate }} + + + + {{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.INACTIVE' | translate }} + +
+ +
+
{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}
+ + + + arrow_drop_down + +
+ +
+
{{ 'FACET-SEARCH.PROFILES.TITLE' | translate }}
+ + + + arrow_drop_down + +
+ +
+
{{ 'FACET-SEARCH.DMP-ORGANISATIONS.TITLE' | translate }}
+ + + + arrow_drop_down + +
+
+
+ + + diff --git a/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss b/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss index 9c5d328da..6849ebbc0 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss +++ b/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.scss @@ -1,9 +1,102 @@ .facet-search-component { - .mat-form-field { - width: 100%; - } + .mat-form-field { + width: 100%; + } - .tags-chips { - padding: 0px; - } + .tags-chips { + 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; } diff --git a/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.ts b/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.ts index 38529b52a..3b3bb3385 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.ts +++ b/dmp-frontend/src/app/ui/explore-dataset/filters/explore-dataset-filters.component.ts @@ -17,6 +17,11 @@ import { ProjectService } from '../../../core/services/project/project.service'; import { RequestItem } from '../../../core/query/request-item'; import { DataTableRequest } from '../../../core/model/data-table/data-table-request'; import { AuthService } from '../../../core/services/auth/auth.service'; +import { MultipleAutoCompleteConfiguration } from '../../../library/auto-complete/multiple/multiple-auto-complete-configuration'; +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'; @Component({ selector: 'app-explore-dataset-filters-component', @@ -35,6 +40,7 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI dmpOrganisations: Observable; projectOptions: Observable; projectStateOptions: Observable; + filteringOrganisationsAsync = false; @ViewChild('facetAccordion') accordion: MatAccordion; displayProjectStateValue = (option) => option['value']; @@ -56,9 +62,38 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI 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'] + } + + 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'] + } + constructor( public activatedRoute: ActivatedRoute, public projectService: ProjectService, + public dmpService: DmpService, + public organisationService: OrganisationService, public languageService: TranslateService, public datasetProfileService: DatasetService, public externalSourcesService: ExternalSourcesService, @@ -82,13 +117,14 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI } public projectStatusChanged(event) { - this.facetCriteria.projectStatus = event.option.value.value; - if (!event.option.selected) { + this.facetCriteria.projectStatus = event.value; + if (!event.source.checked) { this.facetCriteria.projectStatus = null; this.projects = Observable.of([]); this.facetCriteria.projects = []; } - if (event.option.selected) { + // if (event.option.selected) { + if (event.source.checked) { // const projectCriteria = new ProjectCriteria(); // projectCriteria.projectStateType = this.facetCriteria.projectStatus; //projectCriteria['length'] = 10; @@ -132,11 +168,24 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI 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 = new Array(); + fields.push('asc'); + const dataTableRequest: DataTableRequest = new DataTableRequest(0, null, { fields: fields }); + dataTableRequest.criteria = new OrganisationCriteria(); + dataTableRequest.criteria.labelLike = ''; + return this.organisationService.searchPublicOrganisations(dataTableRequest).map(x => x.data); + } + public dmpOrganisationChanged(event: any) { const eventValue = event.option.value.id; if (event.option.selected) { this.facetCriteria.dmpOrganisations.push(eventValue); } @@ -181,6 +230,48 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI 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); + } + } + + 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); + } + } + + 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); + } + } + filterTags(value: string): Observable { this.filteredTags = undefined; this.filteringTagsAsync = true; @@ -193,7 +284,35 @@ export class ExploreDatasetFiltersComponent extends BaseComponent implements OnI // this.filteredTags = items; // this.filteringTagsAsync = false; // }); + } + filterProject(query: string) { + const fields: Array = new Array(); + fields.push('asc'); + const projectRequestItem: DataTableRequest = 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 = new Array(); + fields.push('asc'); + const profileRequestItem: DataTableRequest = 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 = new Array(); + fields.push('asc'); + const dataTableRequest: DataTableRequest = new DataTableRequest(0, null, { fields: fields }); + dataTableRequest.criteria = new OrganisationCriteria(); + dataTableRequest.criteria.labelLike = value; + + return this.organisationService.searchPublicOrganisations(dataTableRequest).map(x => x.data); } } diff --git a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html index 9407c3c06..ac10fbf41 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html +++ b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.html @@ -1,19 +1,50 @@ -
-
- bookmark - bookmark -
+
-

{{ dataset.label }}

-

{{ dataset.description }}

-
+
+
+ + +
+
+
+
+ bookmark + bookmark +

DRAFT: {{ dataset.label }}

+

{{ dataset.label }}

+
+
+
+
+

{{dataset.description}}

+
+
+
+
+ storage +

{{ dataset.dmp }}

+ + work_outline +

{{ dataset.project }}

+ + assignment +
+
{{ dataset.profile }}
+
+
+
+
-
- + diff --git a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss index 2dcbde42d..6ef0acf78 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss +++ b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.scss @@ -1,3 +1,52 @@ +.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: 5px 30px; + margin-bottom: 0px; +} + +h4 { + display: inline; + padding-left: 1em; +} + +.title h4 { + padding-left: 30px; + line-height: 2em; +} + +.about-item { + display: flex; + flex-wrap: wrap; +} + +.about-item .length { + color: rgb(70, 135, 240); +} + +.about-item .title { + margin: 2px 10px; +} + +.about-item p { + margin-left: auto; + margin-bottom: 0px; + padding-top: 7px; + color: #aaaaaa; +} + // .explore-dataset-info { // background-color: #f6f6f6; // padding: 8px 15px; diff --git a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.ts b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.ts index 9bee14e7e..4f2ddfbd4 100644 --- a/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.ts +++ b/dmp-frontend/src/app/ui/explore-dataset/listing-item/explore-dataset-listing-item.component.ts @@ -12,13 +12,13 @@ export class ExploreDatasetListingItemComponent implements OnInit { @Input() showDivider: boolean = true; @Output() onClick: EventEmitter = new EventEmitter(); - draft: boolean; + isDraft: boolean; constructor() { } ngOnInit() { - if (this.dataset.status == 0) { this.draft = true } - else { this.draft = false } + if (this.dataset.status == 0) { this.isDraft = true } + else { this.isDraft = false } } itemClicked() { diff --git a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html index 1abf4fe43..4bbb57e4c 100644 --- a/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html +++ b/dmp-frontend/src/app/ui/explore-dmp/explore-dmp-listing.component.html @@ -7,7 +7,7 @@
-
+

{{'DMP-LISTING.TITLE' | translate}}

{{'DMP-LISTING.SUBTITLE' | translate}}