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

Adds searches fields on tab listings

This commit is contained in:
apapachristou 2020-07-10 16:52:35 +03:00
parent fcbb0dfdf8
commit 84e8a72dbb
17 changed files with 238 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/core/services/dashboard/dashboard.service.ts
View File

@ -31,4 +31,8 @@ export class DashboardService {
getRecentActivity(request: DataTableRequest<RecentActivityCriteria>): Observable<RecentActivityModel[]> { getRecentActivity(request: DataTableRequest<RecentActivityCriteria>): Observable<RecentActivityModel[]> {
return this.http.post<RecentActivityModel[]>(this.actionUrl + 'recentActivity', request, {headers: this.headers}); return this.http.post<RecentActivityModel[]>(this.actionUrl + 'recentActivity', request, {headers: this.headers});
} }
// getRecentActivity(request: DataTableRequest<RecentActivityCriteria>): Observable<DataTableData<RecentActivityModel>> {
// return this.http.post<DataTableData<RecentActivityModel>>(this.actionUrl + 'recentActivity', request, {headers: this.headers});
// }
} }

4
dmp-frontend/src/app/ui/dashboard/dashboard.component.html
View File

@ -51,22 +51,18 @@
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div> <div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
<mat-tab-group mat-align-tabs="start" class="remove-border-bottom"> <mat-tab-group mat-align-tabs="start" class="remove-border-bottom">
<mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})"> <mat-tab label="{{'DASHBOARD.ALL' | translate}} ({{totalRecents}})">
<div *ngIf="totalRecents === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
<app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></app-recent-edited-activity> <app-recent-edited-activity (totalCountRecentEdited)="onCountAllRecent($event)"></app-recent-edited-activity>
<div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div> <div *ngIf="totalRecents === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab> </mat-tab>
<mat-tab label="{{'DASHBOARD.DRAFTS' | translate}} ({{totalDraftDatasets}})"> <mat-tab label="{{'DASHBOARD.DRAFTS' | translate}} ({{totalDraftDatasets}})">
<div *ngIf="totalDraftDatasets === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
<app-drafts (totalCountDraftDatasets)="onCountDraftDatasets($event)"></app-drafts> <app-drafts (totalCountDraftDatasets)="onCountDraftDatasets($event)"></app-drafts>
<div *ngIf="totalDraftDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div> <div *ngIf="totalDraftDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab> </mat-tab>
<mat-tab label="{{'DASHBOARD.DMPS' | translate}} ({{totalDmps}})"> <mat-tab label="{{'DASHBOARD.DMPS' | translate}} ({{totalDmps}})">
<div *ngIf="totalDmps === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
<app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity> <app-recent-edited-dmp-activity (totalCountDmps)="onCountDmps($event)"></app-recent-edited-dmp-activity>
<div *ngIf="totalDmps === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div> <div *ngIf="totalDmps === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
</mat-tab> </mat-tab>
<mat-tab label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} ({{totalDatasets}})"> <mat-tab label="{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}} ({{totalDatasets}})">
<div *ngIf="totalDatasets === 0" class="col-auto pt-3"><input type="text" class="d-flex ml-auto" placeholder="&nbsp;&nbsp;&#xf002;&nbsp;&nbsp;Search"></div>
<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity> <app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
<div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div> <div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
<div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center"> <div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center">

5
dmp-frontend/src/app/ui/dashboard/dashboard.module.ts
View File

@ -17,6 +17,7 @@ import { ConfirmationDialogModule } from '@common/modules/confirmation-dialog/co
import { RecentEditedDatasetActivityComponent } from './recent-edited-dataset-activity/recent-edited-dataset-activity.component'; import { RecentEditedDatasetActivityComponent } from './recent-edited-dataset-activity/recent-edited-dataset-activity.component';
import { DatasetCopyDialogModule } from '../dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module'; import { DatasetCopyDialogModule } from '../dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
import { RecentEditedDmpActivityComponent } from './recent-edited-dmp-activity/recent-edited-dmp-activity.component'; import { RecentEditedDmpActivityComponent } from './recent-edited-dmp-activity/recent-edited-dmp-activity.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({ @NgModule({
imports: [ imports: [
@ -24,7 +25,9 @@ import { RecentEditedDmpActivityComponent } from './recent-edited-dmp-activity/r
DashboardRoutingModule, DashboardRoutingModule,
ExportMethodDialogModule, ExportMethodDialogModule,
ConfirmationDialogModule, ConfirmationDialogModule,
DatasetCopyDialogModule DatasetCopyDialogModule,
FormsModule,
ReactiveFormsModule
], ],
declarations: [ declarations: [
DashboardComponent, DashboardComponent,

18
dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.css
View File

@ -176,6 +176,24 @@ input[type="text"] {
cursor: pointer; cursor: pointer;
} }
.search-form {
text-align: left;
width: 20rem;
}
.search-form mat-icon {
color: #129d99;
}
::ng-deep .search-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;
}
/* .grey { /* .grey {
color: rgb(162, 162, 162); color: rgb(162, 162, 162);
} }

120
dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html
View File

@ -1,67 +1,75 @@
<div *ngFor="let activity of datasetDrafts"> <div>
<div class="dataset-card"> <!-- Search Filter-->
<div [routerLink]="['../datasets/overview/' + activity.id]" class="pointer"> <mat-form-field appearance="outline" class="search-form ml-auto col-auto pr-0" floatLabel="never">
<div class="d-flex flex-direction-row"> <mat-icon matSuffix>search</mat-icon>
<div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div> <input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')">
<div class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div> <mat-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>
</div> </mat-form-field>
<div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{activity.label}}</div> <!-- End of Search Filter -->
<div class="dataset-subtitle"> <div *ngFor="let activity of datasetDrafts">
<span class="col-auto">{{ roleDisplay(activity.users) }}</span> <div class="dataset-card">
<span>.</span> <div [routerLink]="['../datasets/overview/' + activity.id]" class="pointer">
<span class="col-auto" *ngIf="activity.status === 1 && activity.public === true"><span class="material-icons icon-align">public</span>{{'DATASET-LISTING.STATES.PUBLIC' | translate}}</span> <div class="d-flex flex-direction-row">
<span *ngIf="activity.status === 1 && activity.public === false" class="col-auto"><span class="material-icons icon-align">done</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span> <div class="col-auto dataset-label">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}</div>
<span *ngIf="activity.status === 0" class=" col-auto draft"><span class="material-icons icon-align">create</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span> <div class="col-auto ml-auto edited-date">{{'DATASET-LISTING.STATES.EDITED' | translate}}: {{activity.modified | date:"longDate"}}</div>
<span>.</span> </div>
<span class="col">{{'DATASET-LISTING.COLUMNS.GRANT' | translate}}: {{activity.grant}}</span> <div class="col-auto dataset-title">{{'DATASET-LISTING.DATASET-DESCRIPTION' | translate}}: {{activity.label}}</div>
</div> <div class="dataset-subtitle">
<div class="d-flex flex-direction-row pt-3 pb-3"> <span class="col-auto">{{ roleDisplay(activity.users) }}</span>
<div class="col-auto dataset-subtitle">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}} <span>.</span>
<div class="col-auto dmp-label ml-4">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div> <span class="col-auto" *ngIf="activity.status === 1 && activity.public === true"><span class="material-icons icon-align">public</span>{{'DATASET-LISTING.STATES.PUBLIC' | translate}}</span>
<span *ngIf="activity.status === 1 && activity.public === false" class="col-auto"><span class="material-icons icon-align">done</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span>
<span *ngIf="activity.status === 0" class=" col-auto draft"><span class="material-icons icon-align">create</span>{{ enumUtils.toDmpStatusString(activity.status) }}</span>
<span>.</span>
<span class="col">{{'DATASET-LISTING.COLUMNS.GRANT' | translate}}: {{activity.grant}}</span>
</div>
<div class="d-flex flex-direction-row pt-3 pb-3">
<div class="col-auto dataset-subtitle">{{'DATASET-LISTING.TOOLTIP.PART-OF' | translate}}
<div class="col-auto dmp-label ml-4">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div>
</div>
<!-- <div class="col-auto dmp-label">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div> -->
<div class="col dmp-title">{{'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate}}: {{activity.dmp}}</div>
</div> </div>
<!-- <div class="col-auto dmp-label">{{'DATASET-LISTING.TOOLTIP.DMP' | translate}}</div> -->
<div class="col dmp-title">{{'DATASET-LISTING.TOOLTIP.DMP-FOR' | translate}}: {{activity.dmp}}</div>
</div> </div>
</div> <div class="dataset-card-actions">
<div class="dataset-card-actions"> <a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DATASET-LISTING.ACTIONS.EXPORT' | translate}}</a>
<a class="col-auto border-right pointer" [matMenuTriggerFor]="exportMenu"><span class="material-icons icon-align pr-2">open_in_new</span>{{'DATASET-LISTING.ACTIONS.EXPORT' | translate}}</a> <a class="col-auto border-right pointer" (click)="openShareDialog(activity.dmpId, activity.dmp)"><span class="material-icons icon-align pr-2">group_add</span>{{'DATASET-LISTING.ACTIONS.INVITE-COLLABORATORS' | translate}}</a>
<a class="col-auto border-right pointer" (click)="openShareDialog(activity.dmpId, activity.dmp)"><span class="material-icons icon-align pr-2">group_add</span>{{'DATASET-LISTING.ACTIONS.INVITE-COLLABORATORS' | translate}}</a> <a class="col-auto pointer" [matMenuTriggerFor]="actionsMenu"><span class="material-icons icon-align pl-2">more_horiz</span></a>
<a class="col-auto pointer" [matMenuTriggerFor]="actionsMenu"><span class="material-icons icon-align pl-2">more_horiz</span></a> <!-- <a class="col-auto" [matMenuTriggerFor]="actionsMenu" *ngIf="!publicMode"><span class="material-icons icon-align pl-2">more_horiz</span></a> -->
<!-- <a class="col-auto" [matMenuTriggerFor]="actionsMenu" *ngIf="!publicMode"><span class="material-icons icon-align pl-2">more_horiz</span></a> --> </div>
</div> <mat-menu #actionsMenu="matMenu">
<mat-menu #actionsMenu="matMenu"> <button mat-menu-item (click)="openDmpSearchDialogue(activity.id)" class="menu-item">
<button mat-menu-item (click)="openDmpSearchDialogue(activity.id)" class="menu-item"> <mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}}
<mat-icon>file_copy</mat-icon>{{'DATASET-WIZARD.ACTIONS.COPY-DATASET' | translate}} </button>
</button> <button mat-menu-item (click)="openConfirm(activity.id)" class="menu-item">
<button mat-menu-item (click)="openConfirm(activity.id)" class="menu-item"> <mat-icon>delete</mat-icon>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }}
<mat-icon>delete</mat-icon>{{ 'DATASET-WIZARD.ACTIONS.DELETE' | translate }} </button>
</button> <!-- <button mat-menu-item *ngIf="needsUpdate(activity)" class="menu-item" (click)="openUpdateDatasetProfileDialogue(activity.id);">
<!-- <button mat-menu-item *ngIf="needsUpdate(activity)" class="menu-item" (click)="openUpdateDatasetProfileDialogue(activity.id);">
<mat-icon>update</mat-icon> <mat-icon>update</mat-icon>
{{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }} {{ 'DATASET-WIZARD.ACTIONS.UPDATE-DATASET-PROFILE' | translate }}
</button> --> </button> -->
</mat-menu> </mat-menu>
<mat-menu #exportMenu="matMenu" xPosition="before"> <mat-menu #exportMenu="matMenu" xPosition="before">
<button mat-menu-item (click)="downloadPDF(activity)"> <button mat-menu-item (click)="downloadPDF(activity)">
<i class="fa fa-file-pdf-o pr-2"></i> <i class="fa fa-file-pdf-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span> <span>{{'GENERAL.FILE-TYPES.PDF' | translate}}</span>
</button> </button>
<button mat-menu-item (click)="downloadDOCX(activity)"> <button mat-menu-item (click)="downloadDOCX(activity)">
<i class="fa fa-file-word-o pr-2"></i> <i class="fa fa-file-word-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span> <span>{{'GENERAL.FILE-TYPES.DOC' | translate}}</span>
</button> </button>
<button mat-menu-item (click)="downloadXML(activity)"> <button mat-menu-item (click)="downloadXML(activity)">
<i class="fa fa-file-code-o pr-2"></i> <i class="fa fa-file-code-o pr-2"></i>
<span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span> <span>{{'GENERAL.FILE-TYPES.XML' | translate}}</span>
</button> </button>
</mat-menu> </mat-menu>
</div>
</div>
<div *ngIf="datasetDrafts && datasetDrafts.length > 0 && datasetDrafts.length >= startIndex + pageSize" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div> </div>
</div> </div>
<div *ngIf="datasetDrafts && datasetDrafts.length > 0" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div>
<!-- <div class="card card-draft"> <!-- <div class="card card-draft">
<div class="card-header card-header-plain"> <div class="card-header card-header-plain">
<div class="card-desc"> <div class="card-desc">

38
dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.ts
View File

@ -5,14 +5,14 @@ import { DatasetCriteria } from '../../../core/query/dataset/dataset-criteria';
import { DatasetListingModel } from '../../../core/model/dataset/dataset-listing'; import { DatasetListingModel } from '../../../core/model/dataset/dataset-listing';
import { AuthService } from '../../../core/services/auth/auth.service'; import { AuthService } from '../../../core/services/auth/auth.service';
import { RecentActivityType } from '../../../core/common/enum/recent-activity-type'; import { RecentActivityType } from '../../../core/common/enum/recent-activity-type';
import { Router} from '@angular/router'; import { Router } from '@angular/router';
import { DmpStatus } from '../../../core/common/enum/dmp-status'; import { DmpStatus } from '../../../core/common/enum/dmp-status';
import { Principal } from '@app/core/model/auth/principal'; import { Principal } from '@app/core/model/auth/principal';
import { TranslateService } from '@ngx-translate/core'; import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component'; import { ConfirmationDialogComponent } from '@common/modules/confirmation-dialog/confirmation-dialog.component';
import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component'; import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
import { FormControl } from '@angular/forms'; import { FormControl, FormBuilder } from '@angular/forms';
import { BaseComponent } from '@common/base/base.component'; import { BaseComponent } from '@common/base/base.component';
import { MatDialog } from '@angular/material'; import { MatDialog } from '@angular/material';
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service'; import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
@ -37,8 +37,11 @@ export class DraftsComponent extends BaseComponent implements OnInit {
status: number; status: number;
totalCount: number; totalCount: number;
startIndex: number = 4; startIndex: number = 0;
pageSize: number = 5; pageSize: number = 5;
public formGroup = new FormBuilder().group({
like: new FormControl()
});
constructor( constructor(
private router: Router, private router: Router,
@ -62,9 +65,11 @@ export class DraftsComponent extends BaseComponent implements OnInit {
this.datasetService.getPaged(dmpDataTableRequest).subscribe(response => { this.datasetService.getPaged(dmpDataTableRequest).subscribe(response => {
this.datasetDrafts = response.data; this.datasetDrafts = response.data;
this.totalCount = response.totalCount; this.totalCount = response.totalCount;
this.totalCountDraftDatasets.emit(this.pageSize); this.totalCountDraftDatasets.emit(this.datasetDrafts.length);
// this.totalCountDraftDatasets.emit(this.totalCount);
}); });
this.formGroup.get('like').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
} }
redirect(id: string, type: RecentActivityType) { redirect(id: string, type: RecentActivityType) {
@ -236,18 +241,33 @@ export class DraftsComponent extends BaseComponent implements OnInit {
return filename; return filename;
} }
refresh(): void {
const fields: Array<string> = [];
fields.push('-modified');
this.startIndex = 0;
const dmpDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
dmpDataTableRequest.criteria = new DatasetCriteria();
dmpDataTableRequest.criteria.status = DmpStatus.Draft;
dmpDataTableRequest.criteria.like = this.formGroup.get("like").value;
this.datasetService.getPaged(dmpDataTableRequest).subscribe(response => {
this.datasetDrafts = response.data;
this.totalCount = response.totalCount;
this.totalCountDraftDatasets.emit(this.datasetDrafts.length);
});
}
public loadMore() { public loadMore() {
this.startIndex = this.startIndex + this.pageSize;
const fields: Array<string> = ["-modified"]; const fields: Array<string> = ["-modified"];
const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields }); const request = new DataTableRequest<DatasetCriteria>(this.startIndex, this.pageSize, { fields: fields });
request.criteria = new DatasetCriteria(); request.criteria = new DatasetCriteria();
request.criteria.like = ""; request.criteria.status = DmpStatus.Draft;
request.criteria.like = this.formGroup.get("like").value;;
this.datasetService.getPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => { this.datasetService.getPaged(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
if (!result) { return []; } if (!result) { return []; }
this.datasetDrafts = this.datasetDrafts.concat(result.data); this.datasetDrafts = this.datasetDrafts.concat(result.data);
this.totalCountDraftDatasets.emit(this.datasetDrafts.length);
}); });
this.startIndex = this.startIndex + this.pageSize;
this.totalCountDraftDatasets.emit(this.startIndex + 1);
} }
} }

17
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.css
View File

@ -175,6 +175,23 @@ input[type="text"] {
.pointer { .pointer {
cursor: pointer; cursor: pointer;
} }
.search-form {
text-align: left;
width: 20rem;
}
.search-form mat-icon {
color: #129d99;
}
::ng-deep .search-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;
}
/* th { /* th {
text-transform: uppercase; text-transform: uppercase;

9
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.html
View File

@ -1,4 +1,11 @@
<div *ngIf="allRecentActivities != null"> <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.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 *ngFor="let activity of allRecentActivities"> <div *ngFor="let activity of allRecentActivities">
<div *ngIf="activity && activity.type === recentActivityTypeEnum.Dmp.valueOf()"> <div *ngIf="activity && activity.type === recentActivityTypeEnum.Dmp.valueOf()">
<div class="dmp-card"> <div class="dmp-card">
@ -129,7 +136,7 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="allRecentActivities && allRecentActivities.length > 0" class="d-flex justify-content-center"> <div *ngIf="allRecentActivities && allRecentActivities.length > 0 && allRecentActivities.length >= startIndex + pageSize" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button> <button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div> </div>
</div> </div>

34
dmp-frontend/src/app/ui/dashboard/recent-edited-activity/recent-edited-activity.component.ts
View File

@ -27,7 +27,7 @@ import { RecentDmpModel } from '@app/core/model/recent-activity/recent-dmp-activ
import { RecentDatasetModel } from '@app/core/model/recent-activity/recent-dataset-activity.model'; import { RecentDatasetModel } from '@app/core/model/recent-activity/recent-dataset-activity.model';
import { UserInfoListingModel } from '@app/core/model/user/user-info-listing'; import { UserInfoListingModel } from '@app/core/model/user/user-info-listing';
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service'; import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
import { FormControl } from '@angular/forms'; import { FormControl, FormBuilder } from '@angular/forms';
import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component'; import { DatasetCopyDialogueComponent } from '@app/ui/dataset/dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.component';
@Component({ @Component({
@ -39,12 +39,15 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
@Output() totalCountRecentEdited: EventEmitter<any> = new EventEmitter(); @Output() totalCountRecentEdited: EventEmitter<any> = new EventEmitter();
allRecentActivities:RecentActivityModel[]; allRecentActivities: RecentActivityModel[];
recentActivityTypeEnum = RecentActivityType; recentActivityTypeEnum = RecentActivityType;
isDraft: boolean; isDraft: boolean;
totalCount: number; totalCount: number;
startIndex: number = 4; startIndex: number = 0;
pageSize: number = 5; pageSize: number = 5;
public formGroup = new FormBuilder().group({
like: new FormControl()
});
constructor( constructor(
private router: Router, private router: Router,
@ -72,7 +75,10 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
this.allRecentActivities = response; this.allRecentActivities = response;
this.totalCountRecentEdited.emit(this.allRecentActivities.length); this.totalCountRecentEdited.emit(this.allRecentActivities.length);
}); });
} this.formGroup.get('like').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
}
} }
getDatasets(activity: RecentDmpModel): RecentDatasetModel[] { getDatasets(activity: RecentDmpModel): RecentDatasetModel[] {
@ -375,19 +381,33 @@ export class RecentEditedActivityComponent extends BaseComponent implements OnIn
}); });
} }
refresh(): void {
const fields: Array<string> = ["-modified"];
this.startIndex = 0;
const allDataTableRequest: DataTableRequest<RecentActivityCriteria> = new DataTableRequest(0, 5, { fields: fields });
allDataTableRequest.criteria = new RecentActivityCriteria();
allDataTableRequest.criteria.like = this.formGroup.get("like").value;
this.dashboardService
.getRecentActivity(allDataTableRequest)
.subscribe(response => {
this.allRecentActivities = response;
this.totalCountRecentEdited.emit(this.allRecentActivities.length);
});
}
public loadMore() { public loadMore() {
this.startIndex = this.startIndex + this.pageSize;
const fields: Array<string> = ["-modified"]; const fields: Array<string> = ["-modified"];
const request = new DataTableRequest<RecentActivityCriteria>(this.startIndex, this.pageSize, { fields: fields }); const request = new DataTableRequest<RecentActivityCriteria>(this.startIndex, this.pageSize, { fields: fields });
request.criteria = new RecentActivityCriteria(); request.criteria = new RecentActivityCriteria();
request.criteria.like = ""; request.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
this.dashboardService.getRecentActivity(request).pipe(takeUntil(this._destroyed)).subscribe(result => { this.dashboardService.getRecentActivity(request).pipe(takeUntil(this._destroyed)).subscribe(result => {
if (!result) { return []; } if (!result) { return []; }
this.allRecentActivities = this.allRecentActivities.concat(result); this.allRecentActivities = this.allRecentActivities.concat(result);
this.totalCountRecentEdited.emit(this.allRecentActivities.length);
}); });
this.startIndex = this.startIndex + this.pageSize;
this.totalCountRecentEdited.emit(this.startIndex + 1);
} }
// advancedClicked(dmp: DmpListingModel) { // advancedClicked(dmp: DmpListingModel) {

36
dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.css
View File

@ -9,8 +9,7 @@
padding-bottom: 1.2rem; padding-bottom: 1.2rem;
} }
.dmp-card, .dmp-card, .dataset-card {
.dataset-card {
min-width: 712px; min-width: 712px;
/* min-height: 308px; */ /* min-height: 308px; */
background: #ffffff 0% 0% no-repeat padding-box; background: #ffffff 0% 0% no-repeat padding-box;
@ -70,8 +69,7 @@ input[type="text"] {
opacity: 0.75; opacity: 0.75;
} }
.dmp-title, .dmp-title, .dataset-title {
.dataset-title {
text-align: left; text-align: left;
font-weight: 500; font-weight: 500;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
@ -82,8 +80,7 @@ input[type="text"] {
color: #212121; color: #212121;
} }
.dataset-subtitle, .dataset-subtitle, .dmp-subtitle {
.dmp-subtitle {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
@ -112,8 +109,7 @@ input[type="text"] {
padding-bottom: 0.4rem; padding-bottom: 0.4rem;
} }
.dataset-card-actions, .dataset-card-actions, .dmp-card-actions {
.dmp-card-actions {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
border-top: 1px solid #dbdbdb; border-top: 1px solid #dbdbdb;
@ -121,14 +117,12 @@ input[type="text"] {
color: #848484; color: #848484;
} }
.dataset-card-actions a, .dataset-card-actions a, .dmp-card-actions a {
.dmp-card-actions a {
color: #848484 !important; color: #848484 !important;
text-decoration: none !important; text-decoration: none !important;
} }
.dataset-card-actions a:hover, .dataset-card-actions a:hover, .dmp-card-actions a:hover {
.dmp-card-actions a:hover {
color: #129d99 !important; color: #129d99 !important;
} }
@ -175,6 +169,24 @@ input[type="text"] {
cursor: pointer; cursor: pointer;
} }
.search-form {
text-align: left;
width: 20rem;
}
.search-form mat-icon {
color: #129d99;
}
::ng-deep .search-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;
}
/* th { /* th {
text-transform: uppercase; text-transform: uppercase;
} }

9
dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.html
View File

@ -1,4 +1,11 @@
<div *ngIf="dmpActivities != null"> <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 *ngFor="let activity of dmpActivities"> <div *ngFor="let activity of dmpActivities">
<div class="dmp-card"> <div class="dmp-card">
<div [routerLink]="['../plans/overview/' + activity.id]" class="pointer"> <div [routerLink]="['../plans/overview/' + activity.id]" class="pointer">
@ -67,7 +74,7 @@
</mat-menu> </mat-menu>
</div> </div>
</div> </div>
<div *ngIf="dmpActivities && dmpActivities.length > 0" class="d-flex justify-content-center"> <div *ngIf="dmpActivities && dmpActivities.length > 0 && this.startIndex < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
<button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button> <button type="button" class="btn-load-more" (click)="loadMore()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
</div> </div>
</div> </div>

36
dmp-frontend/src/app/ui/dashboard/recent-edited-dmp-activity/recent-edited-dmp-activity.component.ts
View File

@ -20,6 +20,7 @@ import { DmpStatus } from '@app/core/common/enum/dmp-status';
import { DatasetService } from '@app/core/services/dataset/dataset.service'; import { DatasetService } from '@app/core/services/dataset/dataset.service';
import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing'; import { DatasetListingModel } from '@app/core/model/dataset/dataset-listing';
import { Role } from '@app/core/common/enum/role'; import { Role } from '@app/core/common/enum/role';
import { FormBuilder, FormControl } from '@angular/forms';
@Component({ @Component({
selector: 'app-recent-edited-dmp-activity', selector: 'app-recent-edited-dmp-activity',
@ -32,13 +33,15 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
dmpActivities: DmpListingModel[]; dmpActivities: DmpListingModel[];
datasetActivities: DatasetListingModel[]; datasetActivities: DatasetListingModel[];
// allRecentActivities: RecentActivity[] = [];
recentActivityTypeEnum = RecentActivityType; recentActivityTypeEnum = RecentActivityType;
isDraft: boolean; isDraft: boolean;
totalCount: number; totalCount: number;
startIndex: number = 4; startIndex: number = 0;
pageSize: number = 5; pageSize: number = 5;
public formGroup = new FormBuilder().group({
like: new FormControl()
});
constructor( constructor(
private router: Router, private router: Router,
@ -64,7 +67,8 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
.subscribe(response => { .subscribe(response => {
this.dmpActivities = response.data; this.dmpActivities = response.data;
this.totalCount = response.totalCount; this.totalCount = response.totalCount;
this.totalCountDmps.emit(this.pageSize); this.totalCountDmps.emit(this.dmpActivities.length);
// this.totalCount < this.pageSize ? this.totalCountDmps.emit(response.totalCount) : this.totalCountDmps.emit(this.pageSize);
// this.totalCountDmps.emit(this.totalCount); // this.totalCountDmps.emit(this.totalCount);
// this.dmpActivities.forEach(dmpActivity => { // this.dmpActivities.forEach(dmpActivity => {
// const recentActivity: RecentActivity = { // const recentActivity: RecentActivity = {
@ -74,6 +78,9 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
// this.allRecentActivities.push(recentActivity) // this.allRecentActivities.push(recentActivity)
// }) // })
}); });
this.formGroup.get('like').valueChanges
.pipe(takeUntil(this._destroyed))
.subscribe(x => this.refresh());
// const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields }); // const datasetDataTableRequest: DataTableRequest<DatasetCriteria> = new DataTableRequest(0, 5, { fields: fields });
// datasetDataTableRequest.criteria = new DatasetCriteria(); // datasetDataTableRequest.criteria = new DatasetCriteria();
@ -90,7 +97,7 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
// this.allRecentActivities.push(recentActivity) // this.allRecentActivities.push(recentActivity)
// }) // })
// }); // });
} }
} }
public isAuthenticated(): boolean { public isAuthenticated(): boolean {
@ -288,20 +295,35 @@ export class RecentEditedDmpActivityComponent extends BaseComponent implements O
} }
} }
refresh(): void {
const fields: Array<string> = ["-modified"];
this.startIndex = 0;
const dmpDataTableRequest: DataTableRequest<DmpCriteria> = new DataTableRequest(this.startIndex, this.pageSize, { fields: fields });
dmpDataTableRequest.criteria = new DmpCriteria();
dmpDataTableRequest.criteria.like = this.formGroup.get("like").value;
this.dmpService
.getPaged(dmpDataTableRequest, "listing")
.subscribe(response => {
this.dmpActivities = response.data;
this.totalCount = response.totalCount;
this.totalCountDmps.emit(this.dmpActivities.length);
});
}
public loadMore() { public loadMore() {
this.startIndex = this.startIndex + this.pageSize;
const fields: Array<string> = ["-modified"]; const fields: Array<string> = ["-modified"];
const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields }); const request = new DataTableRequest<DmpCriteria>(this.startIndex, this.pageSize, { fields: fields });
request.criteria = new DmpCriteria(); request.criteria = new DmpCriteria();
request.criteria.like = ""; request.criteria.like = this.formGroup.get("like").value ? this.formGroup.get("like").value : "";
this.dmpService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => { this.dmpService.getPaged(request, "listing").pipe(takeUntil(this._destroyed)).subscribe(result => {
if (!result) { return []; } if (!result) { return []; }
this.dmpActivities = this.dmpActivities.concat(result.data); this.dmpActivities = this.dmpActivities.concat(result.data);
this.totalCountDmps.emit(this.dmpActivities.length);
}); });
this.startIndex = this.startIndex + this.pageSize;
this.totalCountDmps.emit(this.startIndex + 1);
} }
// advancedClicked(dmp: DmpListingModel) { // advancedClicked(dmp: DmpListingModel) {

2
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.html
View File

@ -22,7 +22,7 @@
<div> <div>
<div class="listing row pb-2"> <div class="listing row pb-2">
<!-- Search Filter--> <!-- Search Filter-->
<mat-form-field *ngIf="listingItems.length > 0" appearance="outline" class="search-form ml-auto col-auto" floatLabel="never"> <mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
<mat-icon matSuffix>search</mat-icon> <mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DATA-SETS.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')"> <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-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>

1
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.ts
View File

@ -132,6 +132,7 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
// setTimeout(() => this.refreshCallback(true)); // setTimeout(() => this.refreshCallback(true));
// } // }
this.criteria.like = this.formGroup.get("like").value; this.criteria.like = this.formGroup.get("like").value;
this.startIndex = 0;
this.refresh(); this.refresh();
} }

4
dmp-frontend/src/app/ui/dataset/overview/dataset-overview.component.html
View File

@ -2,8 +2,8 @@
<div class="container-fluid pl-0 pr-0"> <div class="container-fluid pl-0 pr-0">
<div *ngIf="dataset"> <div *ngIf="dataset">
<a class="row mb-2 pl-1" (click)="goBack()" role="button"> <a class="row mb-2 pl-1" (click)="goBack()" role="button">
<mat-icon class="back-icon">chevron_left</mat-icon> <mat-icon class="back-icon pointer">chevron_left</mat-icon>
<p class="label-txt">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p> <p class="label-txt pointer">{{'DMP-WIZARD.ACTIONS.BACK' | translate}}</p>
</a> </a>
<div class="row"> <div class="row">
<div class="col-md-8 col-lg-8 pl-4"> <div class="col-md-8 col-lg-8 pl-4">

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

@ -17,7 +17,7 @@
<div> <div>
<div class="listing row pb-2"> <div class="listing row pb-2">
<!-- Search Filter--> <!-- Search Filter-->
<mat-form-field *ngIf="listingItems.length > 0" appearance="outline" class="search-form ml-auto col-auto" floatLabel="never"> <mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">
<mat-icon matSuffix>search</mat-icon> <mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" [formControl]="formGroup.get('like')"> <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-error *ngIf="formGroup.get('like').hasError('backendError')">{{formGroup.get('like').getError('backendError').message}}</mat-error>

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

@ -231,6 +231,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
// setTimeout(() => this.refreshCallback(true)); // setTimeout(() => this.refreshCallback(true));
// } // }
this.criteria.like = this.formGroup.get("like").value; this.criteria.like = this.formGroup.get("like").value;
this.startIndex = 0;
this.refresh(); this.refresh();
} }