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

Changes on listing according to new designs: card appears only on empty listings.

This commit is contained in:
apapachristou 2020-09-14 14:28:26 +03:00
parent 13f41dfd8b
commit b3ffd39151
6 changed files with 62 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +1,10 @@
<div class="main-content listing-main-container h-100"> <div class="main-content listing-main-container h-100">
<div class="container-fluid"> <div class="container-fluid">
<div class="d-flex flex-direction-row"> <div class="d-flex flex-direction-row">
<div class="card mt-0" [style.display]="isVisible ? 'block' : 'none'"> <div *ngIf="hasListingItems && listingItems && listingItems.length === 0" class="card mt-0">
<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a> <!-- <div class="card mt-0" [style.display]="isVisible ? 'block' : 'none'"> -->
<div class="card-content info-text mb-0 pt-0"> <!-- <a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a> -->
<div class="card-content info-text mb-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>{{'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}} <p class="mt-4 pt-2">{{'DATASET-LISTING.TEXT-INFO-PAR' | translate}}
<div class="col pl-0 pt-3"> <div class="col pl-0 pt-3">
@ -13,7 +14,15 @@
</div> </div>
</div> </div>
</div> </div>
<div class="filter-btn" [style.right]="dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar ? '57px' : '37px'" (click)="openFiltersDialog()"> <p *ngIf="listingItems && listingItems.length > 0" class="col-auto header-title">{{'GENERAL.TITLES.DATASETS' | translate}}</p>
<div *ngIf="listingItems && listingItems.length > 0" class="ml-auto">
<div class="col-auto">
<button mat-raised-button class="add-dataset align-self-center yellow-btn" [routerLink]="['/new/dataset/']">
{{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
</button>
</div>
</div>
<div *ngIf="listingItems && listingItems.length > 0" class="filter-btn" [style.right]="dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar ? '57px' : '37px'" (click)="openFiltersDialog()">
<button mat-raised-button class="p-0"> <button mat-raised-button class="p-0">
<mat-icon class="mr-4">filter_alt</mat-icon> <mat-icon class="mr-4">filter_alt</mat-icon>
</button> </button>
@ -21,11 +30,11 @@
</div> </div>
<div> <div>
<div class="listing row pb-2"> <div class="listing row pb-2">
<div class="col-md-12"> <div *ngIf="listingItems && listingItems.length > 0" class="col-md-12">
<div class="d-flex flex-direction-row pt-4"> <div class="d-flex flex-direction-row pt-4">
<!-- Sort by --> <!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span> <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-form-field class="sort-form col-auto pr-0">
<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')"> <mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option *ngIf="!isPublic" [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option> <mat-option *ngIf="!isPublic" [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
<mat-option *ngIf="isPublic" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> <mat-option *ngIf="isPublic" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option>
@ -37,12 +46,12 @@
<!-- End of Sort by --> <!-- End of Sort by -->
<div class="d-flex flex-row ml-auto"> <div class="d-flex flex-row ml-auto">
<!-- Guided Tour --> <!-- Guided Tour -->
<div class="center-content" [style.display]=" (!isVisible && isAuthenticated()) ? 'block' : 'none'" (click)="restartTour()"> <div class="center-content" (click)="restartTour()">
{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }} {{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}
</div> </div>
<!-- End of Guided Tour --> <!-- End of Guided Tour -->
<!-- Search Filter--> <!-- Search Filter-->
<mat-form-field *ngIf="listingItems && listingItems.length > 0" appearance="outline" class="search-form ml-auto col-auto" floatLabel="never"> <mat-form-field 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>
@ -59,7 +68,7 @@
<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>
<div class="col-md-12 d-flex justify-content-center" *ngIf="listingItems.length === 0"> <div class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4" *ngIf="hasListingItems && listingItems && listingItems.length === 0">
<span class="empty-list">{{'DATASET-LISTING.EMPTY-LIST' | translate}}</span> <span class="empty-list">{{'DATASET-LISTING.EMPTY-LIST' | translate}}</span>
</div> </div>
</div> </div>

14
dmp-frontend/src/app/ui/dataset/listing/dataset-listing.component.scss
View File

@ -19,6 +19,14 @@
position: relative; position: relative;
} }
.header-title {
text-align: left;
font-size: 1.25rem;
font-weight: 300;
color: #212121;
padding: 0px;
}
.header-text-container { .header-text-container {
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
position: absolute; position: absolute;
@ -146,7 +154,7 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
color: #2D72D6; color: #2d72d6;
cursor: pointer; cursor: pointer;
} }
@ -179,8 +187,8 @@
} }
::ng-deep .sort-form .mat-form-field-wrapper { ::ng-deep .sort-form .mat-form-field-wrapper {
background-color: white !important; background-color: white !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {

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

@ -46,6 +46,7 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
totalCount: number; totalCount: number;
dmpSearchEnabled = true; dmpSearchEnabled = true;
listingItems: DatasetListingModel[] = []; listingItems: DatasetListingModel[] = [];
hasListingItems = null;
isPublic: boolean = false; isPublic: boolean = false;
public isVisible = true public isVisible = true
@ -195,6 +196,7 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
// if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; } // if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
this.totalCount = result.totalCount; this.totalCount = result.totalCount;
this.listingItems = result.data; this.listingItems = result.data;
this.hasListingItems = true;
}); });
} }
@ -211,6 +213,7 @@ export class DatasetListingComponent extends BaseComponent implements OnInit, IB
// if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; } // if (this._paginator.pageIndex === 0) { this.totalCount = result.totalCount; }
// this.listingItems = this.listingItems.concat(result.data); // this.listingItems = this.listingItems.concat(result.data);
this.listingItems = this.listingItems.length > 0 ? this.mergeTwoSortedLists(this.listingItems, result.data, this.formGroup.get('order').value) : result.data; this.listingItems = this.listingItems.length > 0 ? this.mergeTwoSortedLists(this.listingItems, result.data, this.formGroup.get('order').value) : result.data;
this.hasListingItems = true;
}); });
} }

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

@ -1,14 +1,16 @@
<div class="main-content listing-main-container h-100"> <div class="main-content listing-main-container h-100">
<div class="container-fluid"> <div class="container-fluid">
<div class="d-flex flex-direction-row"> <div class="d-flex flex-direction-row">
<div class="card mt-0" [style.display]="isVisible ? 'block' : 'none'"> <div *ngIf="hasListingItems && listingItems && listingItems.length === 0" class="card mt-0">
<a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a> <!-- <div *ngIf="listingItems && listingItems.length === 0" class="card mt-0" [style.display]="isVisible ? 'block' : 'none'"> -->
<div class="card-content info-text mb-0 pt-0"> <!-- <a class="col-auto d-flex" (click)="closeCard()"><span class="ml-auto pt-3 material-icons clear-icon">clear</span></a> -->
<div class="card-content info-text mb-0">
<p>{{'DMP-LISTING.TEXT-INFO' | translate}}</p> <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> <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>
</div> </div>
</div> </div>
<div class="filter-btn" [style.right]="dialogAnimation.dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar ? '57px' : '37px'" (click)="openFiltersDialog()"> <p *ngIf="listingItems && listingItems.length > 0" class="col-auto header-title">{{'GENERAL.TITLES.PLANS' | translate}}</p>
<div *ngIf="listingItems && listingItems.length > 0" class="filter-btn" [style.right]="dialogAnimation.dialog.getDialogById('filters') ? '446px' : '0px'" [style.width]="scrollbar ? '57px' : '37px'" (click)="openFiltersDialog()">
<button mat-raised-button class="p-0"> <button mat-raised-button class="p-0">
<mat-icon class="mr-4">filter_alt</mat-icon> <mat-icon class="mr-4">filter_alt</mat-icon>
</button> </button>
@ -16,11 +18,11 @@
</div> </div>
<div> <div>
<div class="listing row pb-2"> <div class="listing row pb-2">
<div class="col-md-12"> <div *ngIf="listingItems && listingItems.length > 0" class="col-md-12">
<div class="d-flex flex-direction-row pt-4"> <div class="d-flex flex-direction-row pt-4">
<!-- Sort by --> <!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span> <span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field appearance="outline" class="sort-form col-auto"> <mat-form-field class="sort-form col-auto">
<mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')"> <mat-select placeholder="{{'CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')">
<mat-option *ngIf="!isPublic" [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option> <mat-option *ngIf="!isPublic" [value]="order.MODIFIED">{{enumUtils.toRecentActivityOrderString(order.MODIFIED)}}</mat-option>
<mat-option *ngIf="isPublic" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> <mat-option *ngIf="isPublic" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option>
@ -32,13 +34,11 @@
<!-- End of Sort by --> <!-- End of Sort by -->
<div class="d-flex flex-row ml-auto"> <div class="d-flex flex-row ml-auto">
<!-- Guided Tour --> <!-- Guided Tour -->
<div class="center-content" <!-- <div class="center-content" [style.display]="!isVisible && isAuthenticated()? 'block' : 'none'" (click)="restartTour()"> -->
[style.display]="!isVisible && isAuthenticated()? 'block' : 'none'" (click)="restartTour()"> <div class="center-content" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</div>
{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}
</div>
<!-- End of Guided Tour --> <!-- End of Guided Tour -->
<!-- Search Filter--> <!-- Search Filter-->
<mat-form-field *ngIf="listingItems && listingItems.length > 0" appearance="outline" class="search-form ml-auto col-auto pr-0" <mat-form-field class="search-form ml-auto col-auto pr-0"
floatLabel="never"> floatLabel="never">
<mat-icon matSuffix>search</mat-icon> <mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria" <input matInput placeholder="{{'CRITERIA.DMP.LIKE'| translate}}" name="likeCriteria"
@ -58,7 +58,7 @@
<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>
<div class="col-md-12 d-flex justify-content-center" *ngIf="listingItems && listingItems.length === 0"> <div class="col-md-12 d-flex justify-content-center pt-4 mt-4 mb-4 pb-4" *ngIf="hasListingItems && listingItems && listingItems.length === 0">
<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span> <span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
</div> </div>
</div> </div>

21
dmp-frontend/src/app/ui/dmp/listing/dmp-listing.component.scss
View File

@ -81,6 +81,14 @@
position: relative; position: relative;
} }
.header-title {
text-align: left;
font-size: 1.25rem;
font-weight: 300;
color: #212121;
padding: 0px;
}
.header-text-container { .header-text-container {
background: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.7);
position: absolute; position: absolute;
@ -133,7 +141,7 @@
letter-spacing: 0px; letter-spacing: 0px;
color: #212121; color: #212121;
padding-left: 40px; padding-left: 40px;
padding-top: 36px; padding-top: 38px;
padding-bottom: 36px; padding-bottom: 36px;
padding-right: 55px; padding-right: 55px;
opacity: 1; opacity: 1;
@ -190,7 +198,7 @@
right: 0px; right: 0px;
z-index: 100; z-index: 100;
width: 37px; width: 37px;
transition: right .3s; transition: right 0.3s;
transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;
} }
@ -225,7 +233,8 @@
color: black; color: black;
} }
.pointer:hover, .zenodo-link:hover { .pointer:hover,
.zenodo-link:hover {
color: #00b29f; color: #00b29f;
} }
@ -235,8 +244,8 @@
} }
::ng-deep .sort-form .mat-form-field-wrapper { ::ng-deep .sort-form .mat-form-field-wrapper {
background-color: white !important; background-color: white !important;
padding-bottom: 0 !important; padding-bottom: 0 !important;
} }
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix { ::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
@ -252,7 +261,7 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.02rem; letter-spacing: 0.02rem;
color: #2D72D6; color: #2d72d6;
cursor: pointer; cursor: pointer;
} }

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

@ -52,6 +52,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
groupLabel: string; groupLabel: string;
isPublic: boolean = false; isPublic: boolean = false;
public isVisible = true public isVisible = true
hasListingItems = null;
startIndex: number = 0; startIndex: number = 0;
pageSize: number = 5; pageSize: number = 5;
@ -236,6 +237,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
return item; return item;
}); });
this.listingItems = result.data; this.listingItems = result.data;
this.hasListingItems = true;
this.totalCount = result.totalCount; this.totalCount = result.totalCount;
}); });
} }
@ -260,6 +262,7 @@ export class DmpListingComponent extends BaseComponent implements OnInit, IBread
}); });
// this.listingItems = this.listingItems.concat(result.data); // this.listingItems = this.listingItems.concat(result.data);
this.listingItems = this.mergeTwoSortedLists(this.listingItems, result.data, this.formGroup.get('order').value); this.listingItems = this.mergeTwoSortedLists(this.listingItems, result.data, this.formGroup.get('order').value);
this.hasListingItems = true;
}); });
} }