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

ui fixes on dmp and description listing

This commit is contained in:
Sofia Papacharalampous 2024-04-12 11:46:53 +03:00
parent 25d8503f26
commit 87ffbfb880
4 changed files with 68 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,32 +33,40 @@
<div>
<div class="listing row pb-2">
<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
<div class="d-flex flex-direction-row pt-4">
<div class="row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field class="sort-form col-auto pr-0">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<!-- <mat-option *ngIf="isPublic" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> -->
<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
<mat-option *ngIf="!isPublic" [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 -->
<div class="d-flex flex-row ml-auto">
<!-- Guided Tour -->
<div *ngIf="!isPublic" class="center-content" (click)="restartTour()">
{{ 'DESCRIPTION-LISTING.ACTIONS.TAKE-A-TOUR'| translate }}
</div>
<!-- End of Guided Tour -->
<!-- Search Filter-->
<mat-form-field class="search-form ml-auto col-auto" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.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>
<div class="col-12 col-xl-auto d-flex align-items-center">
<span class="mb-1 mb-xl-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
</div>
<div class="col-12 col-xl-auto">
<mat-form-field class="sort-form w-100">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<!-- <mat-option *ngIf="isPublic" [value]="order.DATASETPUBLISHED">{{enumUtils.toRecentActivityOrderString(order.DATASETPUBLISHED)}}</mat-option> -->
<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
<mat-option *ngIf="!isPublic" [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 Search Filter -->
</div>
<!-- End of Sort by -->
<div class="col-12 col-xl-auto ml-auto">
<div class="row">
<!-- Guided Tour -->
<div class="col-12 col-xl-auto d-flex align-items-center">
<span *ngIf="!isPublic" class="center-content mb-1 mb-xl-4" (click)="restartTour()">{{ 'DESCRIPTION-LISTING.ACTIONS.TAKE-A-TOUR'| translate }}</span>
</div>
<!-- End of Guided Tour -->
<!-- Search Filter-->
<div class="col-12 col-xl-auto">
<mat-form-field class="search-form w-100" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.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>
</div>
<!-- End of Search Filter -->
</div>
</div>
</div>
</div>

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

@ -142,11 +142,11 @@
}
.center-content {
width: 100%;
min-width: 10rem;
margin: auto;
padding: 0 15px;
text-align: right;
// width: 100%;
// min-width: 10rem;
// margin: auto;
// padding: 0 15px;
// text-align: right;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.02rem;

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

@ -22,28 +22,35 @@
<div>
<div class="listing row pb-2">
<div *ngIf="listingItems && listingItems.length > 0 || this.lookup.like" class="col-md-12">
<div class="d-flex flex-direction-row pt-4">
<div class="row pt-4">
<!-- Sort by -->
<span class="d-flex align-items-center">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
<mat-form-field class="sort-form col-auto">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<!-- <mat-option *ngIf="isPublic" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> -->
<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
</mat-select>
</mat-form-field>
<div class="d-flex flex-row ml-auto">
<div *ngIf="!isPublic" class="center-content" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</div>
<mat-form-field class="search-form ml-auto col-auto pr-0"
floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.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>
<div class="col-12 col-xl-auto d-flex align-items-center">
<span class="mb-1 mb-xl-4">{{'DMP-LISTING.SORT-BY' | translate}}:</span>
</div>
<div class="col-12 col-xl-auto">
<mat-form-field class="sort-form w-100">
<mat-select placeholder="{{'GENERAL.CRITERIA.LIKE'| translate}}" [formControl]="formGroup.get('order')" (selectionChange)="orderByChanged()">
<mat-option *ngIf="!isPublic" [value]="order.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
<!-- <mat-option *ngIf="isPublic" [value]="order.PUBLISHED">{{enumUtils.toRecentActivityOrderString(order.PUBLISHED)}}</mat-option> -->
<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</mat-option>
<mat-option *ngIf="!isPublic" [value]="order.Status">{{enumUtils.toRecentActivityOrderString(order.Status)}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-12 col-xl-auto ml-auto">
<div class="row">
<div class="col-12 col-xl-auto d-flex align-items-center">
<span *ngIf="!isPublic" class="center-content mb-1 mb-xl-4" (click)="restartTour()">{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}</span>
</div>
<div class="col-12 col-xl-auto">
<mat-form-field class="search-form w-100" floatLabel="never">
<mat-icon matSuffix>search</mat-icon>
<input matInput placeholder="{{'GENERAL.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>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-md-9">

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

@ -248,11 +248,11 @@
}
.center-content {
width: 100%;
min-width: 10rem;
margin: auto;
padding: 0 15px;
text-align: right;
// width: 100%;
// min-width: 10rem;
// margin: auto;
// padding: 0 15px;
// text-align: right;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.02rem;