argos/dmp-frontend/src/app/ui/dashboard/drafts/drafts.component.html

<div class="col-md-12 d-flex justify-content-center" *ngIf="listingItems == null">
	<span class="empty-list">{{'DMP-LISTING.EMPTY-LIST' | translate}}</span>
</div>
<div *ngIf="listingItems != null" id="results" #results>
	<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.UpdatedAt">{{enumUtils.toRecentActivityOrderString(order.UpdatedAt)}}</mat-option>
				<mat-option [value]="order.Label">{{enumUtils.toRecentActivityOrderString(order.Label)}}</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.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 *ngIf="listingItems && listingItems.length > 0 && page > 1" class="d-flex justify-content-center">
		<button type="button" class="btn-load-more" (click)="loadNextOrPrevious(false)">{{'GENERAL.ACTIONS.LOAD-LESS' | translate}}</button>
	</div>
	<div *ngFor="let item of listingItems; let i = index">
		<app-dmp-listing-item-component *ngIf="item.dmp" [showDivider]="i != (listingItems.length - 1)" [dmp]="item.dmp" [isPublic]="isPublic"></app-dmp-listing-item-component>
		<app-description-listing-item-component *ngIf="item.description" [showDivider]="i != (listingItems.length - 1)" [description]="item.description" [isPublic]="isPublic"  ></app-description-listing-item-component>
	</div>
	<div class="text-muted d-flex justify-content-center mt-5" *ngIf="!hasMoreActivity && listingItems && listingItems.length > 0">
		{{'GENERAL.ACTIONS.NO-MORE-AVAILABLE' | translate}}
	</div>
	<div *ngIf="listingItems && listingItems.length > 0 && (listingItems.length >= startIndex + pageSize) && hasMoreActivity" class="d-flex justify-content-center">
		<button type="button" class="btn-load-more" (click)="loadNextOrPrevious()">{{'GENERAL.ACTIONS.LOAD-MORE' | translate}}</button>
	</div>
</div>