1. translations

2. filters count badge
3. html clean up
This commit is contained in:
Sofia Papacharalampous 2024-06-27 12:07:00 +03:00
parent 5e5efea33d
commit d15e4419bf
15 changed files with 50 additions and 19 deletions

View File

@ -25,6 +25,7 @@ export class DescriptionReferenceLookup extends Lookup {
super();
}
}
export class DmpReferenceLookup extends Lookup {
referenceIds: Guid[];
excludedIds: Guid[];

View File

@ -195,5 +195,4 @@ export class ReferenceService {
getReferencesForTypesFirstSafe(dmpReferences: DmpReference[], referenceTypeIds?: Guid[]): DmpReference {
return this.getReferencesForTypes(dmpReferences, referenceTypeIds)?.find(Boolean);
}
}

View File

@ -1,7 +1,7 @@
<div class="main-content listing-main-container h-100">
<div class="container-fluid">
<div class="row">
<div *ngIf="hasListingItems && listingItems && listingItems.length === 0 && !hasLikeFilters()" class="col-12 card mt-0">
<div *ngIf="!hasListingItems && !hasFilters" class="col-12 card mt-0">
<div class="card-content info-text mb-0">
<p>{{'DMP-LISTING.TEXT-INFO' | translate}}</p>
<p class="mt-4 pt-2">{{'DMP-LISTING.TEXT-INFO-QUESTION' | translate}} <a class="zenodo-link" href="https://zenodo.org/communities/liber-dmp-cat/?page=1&size=20" target="_blank">{{'DMP-LISTING.LINK-ZENODO' | translate}}</a> {{'DMP-LISTING.GET-IDEA' | translate}}</p>
@ -11,25 +11,18 @@
</div>
</div>
</div>
<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-12">
<div *ngIf="hasListingItems || hasFilters" class="col-12">
<app-navigation-breadcrumb />
</div>
<!-- TODO: implement filters -->
<!-- <div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="filter-btn" [style.right]="dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="listingItems.length > 2 ? '57px' : '37px'" (click)="openFiltersDialog()"> -->
<div class="filter-btn" [style.right]="dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="listingItems.length > 2 ? '57px' : '37px'" (click)="openFiltersDialog()">
<button mat-raised-button class="p-0">
<div *ngIf="hasListingItems || hasFilters" class="filter-btn" [style.right]="dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="listingItems.length > 2 ? '57px' : '37px'" (click)="openFiltersDialog()">
<button mat-raised-button class="p-0" [matBadge]="filtersCount" [matBadgeHidden]="!hasFilters" matBadgePosition="before">
<mat-icon class="mr-4 filter-icon">filter_alt</mat-icon>
</button>
</div>
<!-- <div class="filter-btn" [style.right]="this.dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar || this.dialog.getDialogById('filters') ? '57px' : '37px'" (click)="openFiltersDialog()">
<button mat-raised-button class="p-0">
<mat-icon class="mr-4">filter_alt</mat-icon>
</button>
</div> -->
</div>
<div>
<div class="listing row pb-2">
<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
<div *ngIf="hasListingItems || hasFilters" class="col-md-12">
<div class="row pt-4">
<!-- Sort by -->
<div class="col-auto d-flex align-items-center order-1">
@ -71,13 +64,16 @@
<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>
</div>
<div *ngIf="listingItems && listingItems.length > 0 && this.lookup?.page?.offset < this.totalCount - 1 && this.pageSize < this.totalCount - 1" class="d-flex justify-content-center">
<div *ngIf="hasListingItems && this.lookup?.page?.offset < 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>
</div>
</div>
<div *ngIf="hasListingItems && listingItems && listingItems.length === 0 && this.lookup.like !== ''" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">
<div *ngIf="!hasListingItems && !hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">
<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
</div>
<div *ngIf="!hasListingItems && hasFilters" class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4">
<span class="empty-list">{{'DMP-LISTING.FILTERS.NO-ITEMS-FOUND' | translate}}</span>
</div>
</div>
</div>
</div>

View File

@ -56,9 +56,9 @@ export class DmpListingComponent extends BaseListingComponent<BaseDmp, DmpLookup
totalCount: number;
listingItems: any[] = [];
isPublic: boolean = false;
hasListingItems = null;
protected ITEMS_PER_PAGE = 5;
pageSize: number = 5;
filtersCount: number;
referenceFilters: ReferencesWithType[];
public formGroup = new UntypedFormBuilder().group({
like: new UntypedFormControl(),
@ -85,6 +85,16 @@ export class DmpListingComponent extends BaseListingComponent<BaseDmp, DmpLookup
return this.isAscending ? this.language.instant('DMP-LISTING.ACTIONS.TOGGLE-ΑSCENDING') : this.language.instant('DMP-LISTING.ACTIONS.TOGGLE-DESCENDING');
}
get hasListingItems(): boolean {
return this.listingItems != null && this.listingItems.length > 0;
}
get hasFilters(): boolean {
return (this.lookup.like != null && this.lookup.like != '') || this.lookup.statuses != null ||
this.lookup.dmpReferenceSubQuery != null || this.lookup.dmpDescriptionTemplateSubQuery != null ||
this.lookup.dmpBlueprintSubQuery != null || this.lookup.dmpUserSubQuery != null;
}
constructor(
protected router: Router,
protected route: ActivatedRoute,
@ -117,7 +127,10 @@ export class DmpListingComponent extends BaseListingComponent<BaseDmp, DmpLookup
.subscribe(async (params: Params) => {
const queryParams = this.route.snapshot.queryParams;
if (!this.lookup) this.lookup = queryParams['lookup'] ? this._parseLookupFromParams(queryParams) : this.initializeLookup();
if (!this.lookup && queryParams['lookup']) {
this.lookup = this._parseLookupFromParams(queryParams)
this.filtersCount = this._countFilters(this.lookup);
} else if (!this.lookup) this.lookup = this.initializeLookup();
if ((this.formGroup.get('order')?.value == null || (!this.isAscending && !this.isDescending)) && this.lookup.order.items && this.lookup.order.items.length > 0) {
@ -172,7 +185,6 @@ export class DmpListingComponent extends BaseListingComponent<BaseDmp, DmpLookup
this.totalCount = result.count;
if (this.lookup?.page?.offset === 0) this.listingItems = [];
this.listingItems.push(...result.items);
this.hasListingItems = true;
}));
} else {
return this.dmpService.query(this.lookup).pipe(takeUntil(this._destroyed))
@ -181,7 +193,6 @@ export class DmpListingComponent extends BaseListingComponent<BaseDmp, DmpLookup
this.totalCount = result.count;
if (this.lookup?.page?.offset === 0) this.listingItems = [];
this.listingItems.push(...result.items);
this.hasListingItems = true;
}));
}
}
@ -272,6 +283,7 @@ export class DmpListingComponent extends BaseListingComponent<BaseDmp, DmpLookup
updateDataFn(filterForm: UntypedFormGroup): void {
this.referenceFilters = this._patchReferenceFiltersFromForm(filterForm);
this.lookup = this._patchLookupFromForm(this.lookup, filterForm);
this.filtersCount = this._countFilters(this.lookup);
this.filterChanged(this.lookup)
}
@ -394,6 +406,18 @@ export class DmpListingComponent extends BaseListingComponent<BaseDmp, DmpLookup
});
}
private _countFilters(lookup: DmpLookup): number {
let count = 0;
if (lookup.statuses) count += lookup.statuses.length;
if (lookup.dmpDescriptionTemplateSubQuery) count += lookup.dmpDescriptionTemplateSubQuery.descriptionTemplateGroupIds?.length;
if (lookup.dmpBlueprintSubQuery) count += lookup.dmpBlueprintSubQuery.ids?.length;
if (lookup.dmpUserSubQuery) count += lookup.dmpUserSubQuery.userRoles?.length;
if (lookup.dmpReferenceSubQuery) count += lookup.dmpReferenceSubQuery.referenceIds?.length;
return count;
}
private get _lookupFields(): string[] {
return [
nameof<Dmp>(x => x.id),

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {

View File

@ -672,6 +672,7 @@
"FILTERS": {
"NAME": "Filters",
"APPLY-FILTERS": "Apply filters",
"NO-ITEMS-FOUND": "Your search didn't match any items.",
"STATUS": {
"NAME": "Status",
"TYPE": {