Apply the new style to the filters in the "Public Dataset Descriptions" page. (Ticket #78)
This commit is contained in:
apapachristou
parent
9c0be255c3
commit
98f1e787d6
|
|
@ -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;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="explore-dmp-content">
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-blue d-flex">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,66 @@
|
|||
<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-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.PROJECT-STATUS.TITLE' | translate }}</h6>
|
||||
<mat-list-item>
|
||||
<mat-radio-button value="0" (change)="projectStatusChanged($event)">
|
||||
{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.ACTIVE' | translate }}</mat-radio-button>
|
||||
</mat-list-item>
|
||||
<mat-list-item>
|
||||
<mat-radio-button value="1" (change)="projectStatusChanged($event)">
|
||||
{{ 'FACET-SEARCH.PROJECT-STATUS.OPTIONS.INACTIVE' | translate }}</mat-radio-button>
|
||||
</mat-list-item>
|
||||
</div>
|
||||
|
||||
<div class="col-10 gray-container">
|
||||
<h6 class="category-title">{{ 'FACET-SEARCH.PROJECT.TITLE' | translate }}</h6>
|
||||
<mat-form-field>
|
||||
<app-multiple-auto-complete placeholder="{{ 'CRITERIA.DATA-SETS.SELECT-PROJECTS' | translate }}"
|
||||
[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="{{ 'CRITERIA.DATA-SETS.SELECT-SPEC' | translate }}"
|
||||
[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="{{ 'CRITERIA.DATA-SETS.SELECT-ORGANIZATIONS' | translate }}"
|
||||
[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>
|
||||
|
|
@ -62,4 +124,4 @@
|
|||
[displayTitleFunc]="displayDmpOrganisationsLabel" [displayValueFunc]="displayDmpOrganisationsValue">
|
||||
</app-explore-dataset-filter-item-component>
|
||||
</mat-expansion-panel>
|
||||
</mat-accordion>
|
||||
</mat-accordion> -->
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<ExternalSourceItemModel[]>;
|
||||
projectOptions: Observable<ProjectListingModel[]>;
|
||||
projectStateOptions: Observable<any[]>;
|
||||
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<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).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<ExternalSourceItemModel[]> {
|
||||
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<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.searchPublicOrganisations(dataTableRequest).map(x => x.data);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,50 @@
|
|||
<div class="explore-dataset-listing-item row" (click)="itemClicked()">
|
||||
<div class="col-auto">
|
||||
<mat-icon *ngIf="draft" class="draft-bookmark">bookmark</mat-icon>
|
||||
<mat-icon *ngIf="!draft" class="finalized-bookmark">bookmark</mat-icon>
|
||||
</div>
|
||||
<div class="listing-item" (click)="itemClicked()">
|
||||
<div class="col">
|
||||
<h4>{{ dataset.label }}</h4>
|
||||
<p>{{ dataset.description }}</p>
|
||||
<div class="explore-dataset-info">
|
||||
<div class="row">
|
||||
<div class="col-12 gray-container container-header">
|
||||
<!-- <p></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-12 title">
|
||||
<mat-icon *ngIf="isDraft" class="draft-bookmark">bookmark</mat-icon>
|
||||
<mat-icon *ngIf="!isDraft" class="finalized-bookmark">bookmark</mat-icon>
|
||||
<h4 *ngIf="isDraft"><span>DRAFT:</span> {{ dataset.label }}</h4>
|
||||
<h4 *ngIf="!isDraft">{{ dataset.label }}</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<p class="mt-1 mb-2">{{dataset.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 about-item">
|
||||
<mat-icon class="gray-icon pt-2">storage</mat-icon>
|
||||
<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.dmp }}</h4>
|
||||
|
||||
<mat-icon class="gray-icon pt-2">work_outline</mat-icon>
|
||||
<h4 class="mt-2 ml-1 mr-3 p-1">{{ dataset.project }}</h4>
|
||||
|
||||
<mat-icon 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>
|
||||
<!-- <div class="info">
|
||||
<h6>{{ dataset.dmp }}</h6>
|
||||
<p>{{ dataset.project }}</p>
|
||||
</div>
|
||||
<div class="template-name"><p>{{ dataset.profile }}</p></div>
|
||||
<div class="row" style="margin-left: 0px !important">
|
||||
<div class="chip">
|
||||
<p>{{ dataset.profile }}</p>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="col-auto">
|
||||
<mat-icon>more_horiz</mat-icon>
|
||||
</div> -->
|
||||
</div>
|
||||
<mat-divider *ngIf="showDivider"></mat-divider>
|
||||
<!-- <mat-divider *ngIf="showDivider"></mat-divider> -->
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -12,13 +12,13 @@ export class ExploreDatasetListingItemComponent implements OnInit {
|
|||
@Input() showDivider: boolean = true;
|
||||
@Output() onClick: EventEmitter<DatasetListingModel> = 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() {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<div class="explore-dmp-content">
|
||||
<div class="container-fluid">
|
||||
<div class="card">
|
||||
<div class="card-header card-header-blue d-flex">
|
||||
<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>
|
||||
<p class="card-category">{{'DMP-LISTING.SUBTITLE' | translate}}</p>
|
||||
|
|
|
|||
Loading…
Reference in New Issue