@hicoder/angular-cli/templates/schema-list.pagination.html

Angular UI componenets and service generator. It works with the mean-rest-express package to generate the end to end web application. The input to this generator is the Mongoose schema defined for the express application. mean-rest-express exposes the Res

		<div class="row justify-content-end">
		<%const SearchAndSortThreshold = 2;
		%><%_ if (typeof(disableSortSelection) == 'undefined' || !disableSortSelection) {

			let sortableFields = briefView.filter(x=> {
				return x.sortable &&
					!x.hidden &&
					!x.exclusiveRequiredWith && !x.exclusiveRequired &&
					!listCategoryFieldsNotShown.includes(x.fieldName);
			});
			if (sortableFields.length > 0) {
			%>
			<div *ngIf="list.length > <%-SearchAndSortThreshold%>" class="sort-selection me-5 mt-1">
					<div class="dropdown" style="width: 100%;">
						<button class="sort-dropdown btn btn-light btn-sm dropdown-toggle"
							type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
							Sort: <span *ngIf="listSortFieldDisplay">{{listSortFieldDisplay}}
									<i *ngIf="listSortOrder === 'asc'" class="fas fa-arrow-up"></i>
									<i *ngIf="listSortOrder === 'desc'" class="fas fa-arrow-down"></i>
							</span>
						</button>
						<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton"><% for (let field of sortableFields) { 
							if (field.hidden) continue;
							if (listCategoryFieldsNotShown.includes(field.fieldName)) continue;
							if (field.sortable) {%>
							<li><a class="dropdown-item pointer" (click)="setListSortAndRefresh('<%-field.fieldName%>', 'asc')"><%-field.displayName%><i class="fas fa-arrow-up"></i></a></li>
							<li><a class="dropdown-item pointer" (click)="setListSortAndRefresh('<%-field.fieldName%>', 'desc')"><%-field.displayName%><i class="fas fa-arrow-down"></i></a></li><%} }%>
						</ul>
					</div>
			</div><%} }%>
			<% if (typeof showExport !== 'undefined' && showExport && api.includes('E')) {%>
			<div class="d-flex justify-content-center"><button type="button" class="btn btn-outline-success  mt-3" (click)="onExport()">Export to excel</button></div><%}%>
		</div>
		<div class="d-flex justify-content-between">
			<div><%_ if (typeof(disableViewSwitch) == 'undefined' || !disableViewSwitch) {
				if (widgetDef.views.length > 1) {
				%>
				<div *ngIf=" !options['disableViewSwitch'] && list.length > 0">
				<%_ for (let widget of widgetDef.views) {%>
					<input *ngIf="listViews.includes('<%-widget%>')" type="radio" name="view-filter" id="<%-widget%>-view" class="view-radio"
						(click)="setListViewFilter('<%-widget%>')" [checked]="isShowListView('<%-widget%>')">
						<label for="<%-widget%>-view">
							<%- include(`/widgets/list-view/${widget}/icon.html`); %>
						</label>
				<%_ }%>
				</div>
			<%_ } } %>
			</div>

			<div>
				<div class="total_counts">
					<span *ngIf="totalCount > <%-SearchAndSortThreshold%>">Total: <b>{{totalCount}}</b></span><%_ if (typeof(disableRefreshIcon) == 'undefined' || !disableRefreshIcon) {
					%><%if(api.includes('D') || api.includes('A') ){%>
					<span *ngIf="list.length > 1"><input type="checkbox" class="ms-3 me-1" [(ngModel)]="checkAll" (change)="onCheckAllChange()">All</span><%}%>
					<a class="ms-3" routerLink="." (click)="onRefresh()"><i class="fa fa-sync-alt"></i></a><%}%>
				</div>
			</div>
		</div>

		<div  *ngIf="totalPages > 1" class="d-flex justify-content-center flex-wrap mt-2">
			<div>
				<ul class="pagination justify-content-center">
					<li class="page-item"
							[ngClass]="{'disabled': page<=1}">
					<a class="page-link" routerLink="." (click)="onPreviousPage()"
						aria-label="Previous">
						<span aria-hidden="true">&laquo;</span>
						<span class="sr-only">Previous</span>
					</a>
					</li>

					<li *ngIf="leftMore" class="page-item"><a class="page-link">...</a></li>

					<li *ngFor="let p of pages;  let i = index" class="page-item"
							[ngClass]="{'active': p==page}">
						<a class="page-link" routerLink="." (click)="onGotoPage(p)">{{p}}</a>
					</li>

					<li *ngIf="rightMore" class="page-item"><a class="page-link">...</a></li>
					<li class="page-item"
							[ngClass]="{'disabled': page>=totalPages}">
					<a class="page-link" routerLink="." (click)="onNextPage()"
						aria-label="Next">
						<span aria-hidden="true">&raquo;</span>
						<span class="sr-only">Next</span>
					</a>
					</li>
				</ul>
			</div>
			<div class="ms-3">
				<small>Page</small>&nbsp;<input type="number" class="page-control form-control" [value]="page" (input)="onGotoPage($any($event.target).value)" />&nbsp;/&nbsp;{{totalPages}}
			</div>
		</div>