Adds sort by field on all listings

This commit is contained in:
apapachristou 2020-07-13 13:01:03 +03:00
parent 74f5019ff3
commit 15e09d7994
21 changed files with 276 additions and 76 deletions

View File

@ -9,6 +9,7 @@ import { DmpProfileType } from '../../common/enum/dmp-profile-type';
import { DmpStatus } from '../../common/enum/dmp-status';
import { ValidationType } from '../../common/enum/validation-type';
import { DatasetProfileInternalDmpEntitiesType } from '../../common/enum/dataset-profile-internal-dmp-entities-type';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
@Injectable()
export class EnumUtils {
@ -101,4 +102,13 @@ export class EnumUtils {
case DatasetProfileInternalDmpEntitiesType.Dmps: return this.language.instant('TYPES.DATASET-PROFILE-INTERNAL-DMP-ENTITIES-TYPE.DMPS');
}
}
toRecentActivityOrderString(status: RecentActivityOrder): string {
switch (status) {
case RecentActivityOrder.CREATED: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.CREATED');
case RecentActivityOrder.LABEL: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.LABEL');
case RecentActivityOrder.MODIFIED: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.MODIFIED');
case RecentActivityOrder.STATUS: return this.language.instant('TYPES.RECENT-ACTIVITY-ORDER.STATUS');
}
}
}

View File

@ -190,6 +190,11 @@ input[type="text"] {
padding-bottom: 0 !important;
}
::ng-deep .sort-form .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}

View File

@ -1,11 +1,24 @@
<div>
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DATA-SETS.DRAFT-LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field appearance="outline" class="sort-form col-auto">
<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
<!-- <mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option> -->
<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
</mat-select>
</mat-form-field>
<!-- End of Sort by -->
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DATA-SETS.DRAFT-LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
</div>
<div *ngFor="let activity of datasetDrafts">
<div class="dataset-card">
<div [routerLink]="['../datasets/overview/' + activity.id]" class="pointer">

View File

@ -21,6 +21,7 @@ import * as FileSaver from 'file-saver';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { UiNotificationService } from '@app/core/services/notification/ui-notification-service';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
@Component({
selector: 'app-drafts',
@ -40,9 +41,12 @@ export class DraftsComponent extends BaseComponent implements OnInit {
startIndex: number = 0;
pageSize: number = 5;
public formGroup = new FormBuilder().group({
like: new FormControl()
like: new FormControl(),
order: new FormControl()
});
order = RecentActivityOrder;
constructor(
private router: Router,
private datasetService: DatasetService,
@ -57,8 +61,10 @@ export class DraftsComponent extends BaseComponent implements OnInit {
}
ngOnInit() {
const fields: Array<string> = [];
fields.push('-modified');
// const fields: Array<string> = [];
// fields.push('-modified');
this.formGroup.get('order').setValue(this.order.MODIFIED);
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
const dmpDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
dmpDataTableRequest.criteria = new DatasetCriteria();
dmpDataTableRequest.criteria.status = DmpStatus.Draft;
@ -70,6 +76,9 @@ export class DraftsComponent extends BaseComponent implements OnInit {
this.formGroup.get('like').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
this.formGroup.get('order').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
}
redirect(id: string, type: RecentActivityType) {
@ -242,8 +251,9 @@ export class DraftsComponent extends BaseComponent implements OnInit {
}
refresh(): void {
const fields: Array<string> = [];
fields.push('-modified');
// const fields: Array<string> = [];
// fields.push('-modified');
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
this.startIndex = 0;
const dmpDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
dmpDataTableRequest.criteria = new DatasetCriteria();
@ -258,7 +268,8 @@ export class DraftsComponent extends BaseComponent implements OnInit {
public loadMore() {
this.startIndex = this.startIndex + this.pageSize;
const fields: Array<string> = ["-modified"];
// const fields: Array<string> = ["-modified"];
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
request.criteria = new DatasetCriteria();
request.criteria.status = DmpStatus.Draft;

View File

@ -190,6 +190,11 @@ input[type="text"] {
padding-bottom: 0 !important;
}
::ng-deep .sort-form .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}

View File

@ -1,11 +1,24 @@
<div *ngIf="allRecentActivities != null">
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field appearance="outline" class="sort-form col-auto">
<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
<mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
</mat-select>
</mat-form-field>
<!-- End of Sort by -->
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
</div>
<div *ngFor="let activity of allRecentActivities">
<div *ngIf="activity && activity.type === recentActivityTypeEnum.Dmp.valueOf()">
<div class="dmp-card">

View File

@ -29,6 +29,7 @@ import { UserInfoListingModel } from '@app/core/model/user/user-info-listing';
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
import { FormControl, FormBuilder } from '@angular/forms';
import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
@Component({
selector: 'app-recent-edited-activity',
@ -46,9 +47,12 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
startIndex: number = 0;
pageSize: number = 5;
public formGroup = new FormBuilder().group({
like: new FormControl()
like: new FormControl(),
order: new FormControl()
});
order = RecentActivityOrder;
constructor(
private router: Router,
public enumUtils: EnumUtils,
@ -65,10 +69,13 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
ngOnInit() {
if (this.isAuthenticated()) {
const fields: Array<string> = ["-modified"];
const fields: Array<string> = [];
// const fields: Array<string> = ["-modified"];
const allDataTableRequest: DataTableRequest<RecentActivityCriteria> = new DataTableRequest(0, 5, { fields: fields });
allDataTableRequest.criteria = new RecentActivityCriteria();
allDataTableRequest.criteria.like = "";
this.formGroup.get('order').setValue(this.order.MODIFIED);
allDataTableRequest.criteria.order = this.formGroup.get('order').value;
this.dashboardService
.getRecentActivity(allDataTableRequest)
.subscribe(response => {
@ -78,6 +85,9 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
this.formGroup.get('like').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
this.formGroup.get('order').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
}
}
@ -382,11 +392,13 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
}
refresh(): void {
const fields: Array<string> = ["-modified"];
const fields: Array<string> = [];
// const fields: Array<string> = ["-modified"];
this.startIndex = 0;
const allDataTableRequest: DataTableRequest<RecentActivityCriteria> = new DataTableRequest(0, this.pageSize, { fields: fields });
allDataTableRequest.criteria = new RecentActivityCriteria();
allDataTableRequest.criteria.like = this.formGroup.get("like").value;
allDataTableRequest.criteria.order = this.formGroup.get("order").value;
this.dashboardService
.getRecentActivity(allDataTableRequest)
.subscribe(response => {
@ -397,10 +409,12 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
public loadMore() {
this.startIndex = this.startIndex + this.pageSize;
const fields: Array<string> = ["-modified"];
const fields: Array<string> = [];
// const fields: Array<string> = ["-modified"];
const request = new DataTableRequest<RecentActivityCriteria>(this.startIndex, this.pageSize, { fields: fields });
request.criteria = new RecentActivityCriteria();
request.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
request.criteria.order = this.formGroup.get("order").value;
this.dashboardService.getRecentActivity(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
if (!result) { return []; }

View File

@ -1,11 +1,24 @@
<div *ngIf="datasetActivities != null">
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DATA-SETS.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field appearance="outline" class="sort-form col-auto">
<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
<mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
</mat-select>
</mat-form-field>
<!-- End of Sort by -->
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DATA-SETS.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
</div>
<div *ngFor="let activity of datasetActivities">
<div class="dataset-card">
<div [routerLink]="['../datasets/overview/' + activity.id]" class="pointer">

View File

@ -21,6 +21,7 @@ import { UiNotificationService } from '@app/core/services/notification/ui-notifi
import { SnackBarNotificationLevel } from '@common/modules/notification/ui-notification-service';
import { DatasetStatus } from '@app/core/common/enum/dataset-status';
import { DmpInvitationDialogComponent } from '@app/ui/dmp/invitation/dmp-invitation.component';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
@Component({
selector: 'app-recent-edited-dataset-activity',
@ -36,10 +37,13 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
startIndex: number = 0;
pageSize: number = 5;
public formGroup = new FormBuilder().group({
like: new FormControl()
like: new FormControl(),
order: new FormControl()
});
// publicMode = false;
order = RecentActivityOrder;
constructor(
private authentication: AuthService,
private datasetService: DatasetService,
@ -55,7 +59,9 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
ngOnInit() {
if (this.isAuthenticated()) {
const fields: Array<string> = ["-modified"];
// const fields: Array<string> = ["-modified"];
this.formGroup.get('order').setValue(this.order.MODIFIED);
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, this.pageSize, { fields: fields });
datasetDataTableRequest.criteria = new DatasetCriteria();
datasetDataTableRequest.criteria.like = "";
@ -69,11 +75,15 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
this.formGroup.get('like').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
this.formGroup.get('order').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
}
}
refresh(): void {
const fields: Array<string> = ["-modified"];
// const fields: Array<string> = ["-modified"];
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
this.startIndex = 0;
const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, this.pageSize, { fields: fields });
datasetDataTableRequest.criteria = new DatasetCriteria();
@ -89,7 +99,8 @@ export class RecentEditedDatasetActivityComponent extends BaseComponent implemen
public loadMore() {
this.startIndex = this.startIndex + this.pageSize;
const fields: Array<string> = ["-modified"];
// const fields: Array<string> = ["-modified"];
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
request.criteria = new DatasetCriteria();

View File

@ -1,11 +1,24 @@
<div *ngIf="dmpActivities != null">
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field appearance="outline" class="sort-form col-auto">
<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
<mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
</mat-select>
</mat-form-field>
<!-- End of Sort by -->
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
</div>
<div *ngFor="let activity of dmpActivities">
<div class="dmp-card">
<div [routerLink]="['../plans/overview/' + activity.id]" class="pointer">

View File

@ -21,6 +21,7 @@ import { DatasetService } from '@app/core/services/dataset/dataset.service';
import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';
import { Role } from '@app/core/common/enum/role';
import { FormBuilder, FormControl } from '@angular/forms';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
@Component({
selector: 'app-recent-edited-dmp-activity',
@ -40,9 +41,12 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
startIndex: number = 0;
pageSize: number = 5;
public formGroup = new FormBuilder().group({
like: new FormControl()
like: new FormControl(),
order: new FormControl()
});
order = RecentActivityOrder;
constructor(
private router: Router,
public enumUtils: EnumUtils,
@ -58,7 +62,9 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
ngOnInit() {
if (this.isAuthenticated()) {
const fields: Array<string> = ["-modified"];
// const fields: Array<string> = ["-modified"];
this.formGroup.get('order').setValue(this.order.MODIFIED);
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(0, 5, { fields: fields });
dmpDataTableRequest.criteria = new DmpCriteria();
dmpDataTableRequest.criteria.like = "";
@ -81,6 +87,9 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
this.formGroup.get('like').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
this.formGroup.get('order').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
// const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
// datasetDataTableRequest.criteria = new DatasetCriteria();
@ -296,7 +305,8 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
}
refresh(): void {
const fields: Array<string> = ["-modified"];
// const fields: Array<string> = ["-modified"];
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
this.startIndex = 0;
const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields });
dmpDataTableRequest.criteria = new DmpCriteria();
@ -312,7 +322,8 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
public loadMore() {
this.startIndex = this.startIndex + this.pageSize;
const fields: Array<string> = ["-modified"];
// const fields: Array<string> = ["-modified"];
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
request.criteria = new DmpCriteria();

View File

@ -6,11 +6,11 @@
<div class="card-content info-text mb-0 pt-0">
<p>{{'DATASET-LISTING.TEXT-INFO' | translate}} <u class="pointer" [routerLink]="['/explore']">{{'DATASET-LISTING.LINK-PUBLIC-DATASETS' | translate}}</u> {{'DATASET-LISTING.TEXT-INFO-REST' | translate}}</p>
<p class="mt-4 pt-2">{{'DATASET-LISTING.TEXT-INFO-PAR' | translate}}
<div class="col pl-0 pt-3">
<button mat-raised-button class="add-dataset align-self-center yellow-btn" [routerLink]="['/datasets/new']">
{{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
</button>
</div>
<div class="col pl-0 pt-3">
<button mat-raised-button class="add-dataset align-self-center yellow-btn" [routerLink]="['/datasets/new']">
{{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
</button>
</div>
</div>
</div>
<div class="filter-btn" [style.right]="dialog.openDialogs.length > 0 ? '446px' : '0px'" [style.width]="scrollbar ? '57px' : '37px'" (click)="openFiltersDialog()">
@ -21,13 +21,28 @@
</div>
<div>
<div class="listing row pb-2">
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DATA-SETS.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
<div class="col-md-12">
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field appearance="outline" class="sort-form col-auto pr-0">
<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
<mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
</mat-select>
</mat-form-field>
<!-- End of Sort by -->
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DATA-SETS.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
</div>
</div>
<div class="col-md-12 col-sm-12 col-md-9">
<div *ngFor="let item of listingItems; let i = index">
<app-dataset-listing-item-component [isPublic]="isPublic" [dataset]="item" [showDivider]="i != (listingItems.length - 1)"></app-dataset-listing-item-component>

View File

@ -165,6 +165,11 @@
padding-bottom: 0 !important;
}
::ng-deep .sort-form .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}

View File

@ -22,6 +22,8 @@ import { isNullOrUndefined } from 'util';
import { DatasetCriteriaDialogComponent } from './criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component';
import { MatDialog } from '@angular/material';
import { FormGroup, FormBuilder, FormControl } from '@angular/forms';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
@Component({
selector: 'app-dataset-listing-component',
@ -51,10 +53,12 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
criteria: DatasetCriteria;
criteriaFormGroup: FormGroup;
public formGroup = new FormBuilder().group({
like: new FormControl()
like: new FormControl(),
order: new FormControl()
});
scrollbar: boolean;
order = RecentActivityOrder;
constructor(
private datasetService: DatasetService,
@ -63,13 +67,15 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
public dialog: MatDialog,
private dmpService: DmpService,
private language: TranslateService,
private authService: AuthService
private authService: AuthService,
public enumUtils: EnumUtils
) {
super();
}
ngOnInit() {
this.isPublic = this.router.url === '/explore';
this.formGroup.get('order').setValue(this.order.MODIFIED);
if (!this.isPublic && isNullOrUndefined(this.authService.current())) {
this.router.navigateByUrl("/explore");
}
@ -118,6 +124,9 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
this.formGroup.get('like').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.controlModified());
this.formGroup.get('order').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
}
ngAfterContentChecked(): void {
@ -140,9 +149,10 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
// if (this._paginator.pageSize === undefined) this._paginator.pageSize = 10;
// if (resetPages) this._paginator.pageIndex = 0;
// const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
let fields: Array<string> = new Array();
fields.push('-modified');
// let fields: Array<string> = new Array();
// fields.push('-modified');
//if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
this.criteria.isPublic = this.isPublic;
request.criteria = this.criteria;
@ -157,7 +167,8 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
public loadMore() {
this.startIndex = this.startIndex + this.pageSize;
const fields: Array<string> = ["-modified"];
// const fields: Array<string> = ["-modified"];
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
this.criteria.isPublic = this.isPublic;
request.criteria = this.criteria;

View File

@ -16,13 +16,28 @@
</div>
<div>
<div class="listing row pb-2">
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
<div class="col-md-12">
<div class="d-flex flex-direction-row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field appearance="outline" class="sort-form col-auto">
<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
<mat-option [value]="order.LABEL">{{enumUtils.toRecentActivityOrderString(order.LABEL)}}</mat-option>
<mat-option [value]="order.STATUS">{{enumUtils.toRecentActivityOrderString(order.STATUS)}}</mat-option>
<mat-option [value]="order.CREATED">{{enumUtils.toRecentActivityOrderString(order.CREATED)}}</mat-option>
</mat-select>
</mat-form-field>
<!-- End of Sort by -->
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</mat-form-field>
<!-- End of Search Filter -->
</div>
</div>
<div class="col-md-12 col-sm-12 col-md-9">
<div *ngFor="let item of listingItems; let i = index">
<app-dmp-listing-item-component [showDivider]="i != (listingItems.length - 1)" [dmp]="item" [isPublic]="isPublic"></app-dmp-listing-item-component>

View File

@ -227,6 +227,11 @@
padding-bottom: 0 !important;
}
::ng-deep .sort-form .mat-form-field-wrapper {
background-color: white !important;
padding-bottom: 0 !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: 0.3rem 0rem 0.6rem 0rem !important;
}

View File

@ -25,6 +25,7 @@ import { isNullOrUndefined } from 'util';
import { AuthService } from '@app/core/services/auth/auth.service';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { DmpCriteriaDialogComponent } from './criteria/dmp-criteria-dialog.component';
import { RecentActivityOrder } from '@app/core/common/enum/recent-activity-order';
@Component({
@ -56,10 +57,12 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
criteria: DmpCriteria;
criteriaFormGroup: FormGroup;
public formGroup = new FormBuilder().group({
like: new FormControl()
like: new FormControl(),
order: new FormControl()
});
scrollbar: boolean;
order = RecentActivityOrder;
constructor(
private dmpService: DmpService,
@ -77,6 +80,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
ngOnInit() {
this.isPublic = this.router.url.startsWith('/explore-plans');
this.formGroup.get('order').setValue(this.order.MODIFIED);
if (!this.isPublic && isNullOrUndefined(this.authService.current())) {
this.router.navigateByUrl("/explore-plans");
}
@ -164,6 +168,9 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
this.formGroup.get('like').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.controlModified());
this.formGroup.get('order').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
}
ngAfterContentChecked(): void {
@ -175,9 +182,10 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
// if (resetPages) this._paginator.pageIndex = 0;
// const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
let fields: Array<string> = new Array();
// let fields: Array<string> = new Array();
// if (this.sort && this.sort.active) { fields = this.sort.direction === 'asc' ? ['+' + this.sort.active] : ['-' + this.sort.active]; }
fields.push('-modified');
// fields.push('-modified');
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
this.setPublicCriteria();
@ -200,7 +208,8 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
public loadMore() {
this.startIndex = this.startIndex + this.pageSize;
const fields: Array<string> = ["-modified"];
// const fields: Array<string> = ["-modified"];
const fields: Array<string> = ["-" + this.formGroup.get('order').value];
const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
this.setPublicCriteria();
request.criteria = this.criteria;

View File

@ -396,7 +396,7 @@ input[type=email], select {
opacity: 1;
}
textarea {
/* textarea {
width: 100%;
height: 142px;
padding: 16px;
@ -404,7 +404,7 @@ textarea {
border: 1px solid #D1D1D1;
border-radius: 4px;
opacity: 1;
}
} */
p {
text-align: left;

View File

@ -404,6 +404,7 @@
"TEXT-INFO-QUESTION": "Not sure how a DMP looks in practice? Browse Public DMPs and",
"LINK-ZENODO": "LIBER community in Zenodo",
"GET-IDEA": "to get an idea!",
"SORT-BY": "Sort by",
"COLUMNS": {
"NAME": "Name",
"GRANT": "Grant",
@ -1028,6 +1029,12 @@
"DMPS": "DMPs",
"DATASETS": "Dataset Descriptions",
"EXTERNAL-SOURCE-HINT": "List of values provided by external source(s)"
},
"RECENT-ACTIVITY-ORDER": {
"CREATED": "Created",
"LABEL": "Label",
"MODIFIED": "Modified",
"STATUS": "Status"
}
},
"ADDRESEARCHERS-EDITOR": {

View File

@ -403,6 +403,7 @@
"TEXT-INFO-QUESTION": "Not sure how a DMP looks in practice? Browse Public DMPs and",
"LINK-ZENODO": "LIBER community in Zenodo",
"GET-IDEA": "to get an idea!",
"SORT-BY": "Sort by",
"COLUMNS": {
"NAME": "Nombre",
"GRANT": "Subvención",
@ -1023,6 +1024,12 @@
"DMPS": "PGDs",
"DATASETS": "Descripciones del Dataset",
"EXTERNAL-SOURCE-HINT": "Lista de valores para seleccionar la(s) fuente(s) externa(s)"
},
"RECENT-ACTIVITY-ORDER": {
"CREATED": "Created",
"LABEL": "Label",
"MODIFIED": "Modified",
"STATUS": "Status"
}
},
"ADDRESEARCHERS-EDITOR": {

View File

@ -403,6 +403,7 @@
"TEXT-INFO-QUESTION": "Not sure how a DMP looks in practice? Browse Public DMPs and",
"LINK-ZENODO": "LIBER community in Zenodo",
"GET-IDEA": "to get an idea!",
"SORT-BY": "Sort by",
"COLUMNS": {
"NAME": "Τίτλος",
"GRANT": "Επιχορήγηση",
@ -1024,6 +1025,12 @@
"DMPS": "Σχέδια Διαχείρισης Δεδομένων",
"DATASETS": "Περιγραφές Συνόλων Δεδομένων",
"EXTERNAL-SOURCE-HINT": "Κατάλογος τιμών που παρέχονται από εξωτερικές πηγές"
},
"RECENT-ACTIVITY-ORDER": {
"CREATED": "Created",
"LABEL": "Label",
"MODIFIED": "Modified",
"STATUS": "Status"
}
},
"ADDRESEARCHERS-EDITOR": {