@hicoder/angular-cli/templates/widgets/list/general/general.component.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

<%_ let cate = listCategories[0] || {};
	let { listCategoryField, listCategoryRef, listCategoryShowMore } = cate;
	let cate2 = listCategories[1] || {};
	let { listCategoryField: listCategoryField2, listCategoryRef: listCategoryRef2, listCategoryShowMore: listCategoryShowMore2 } = cate2;
%>
<div class="d-flex flex-wrap" *ngIf="!options['disableTitleRow']">
	<%_ if (listTitle) {%>
	<div class="list-title my-2" *ngIf="!options['disableTitle']"><%-listTitle%></div><%}%>
	<%_ if (listCategoryField2) {%>
	<div *ngIf="categoryDisplays2.length > 0" class="sort-selection ms-3 my-2">
			<div class="dropdown" style="width: 100%;">
				<button class="category2-dropdown btn btn-light btn-sm dropdown-toggle"
					type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
					{{categoryDisplays2[selectedCategory2 || 0]}}
				</button>
				<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
					<li><a *ngFor="let ele of categoryDisplays2; let idx = index;"  class="dropdown-item pointer" (click)="categorySelected2(idx)">{{ele}}</a></li>
				</ul>
			</div>
	</div><%}%>
</div>


<ul *ngIf="listCategory1.listCategoryField" class="nav nav-pills category-nav font-size-responsive">
	<li *ngFor="let ele of categoryDisplays; let idx = index;" class="nav-item" >
		<a *ngIf=" listCategory1.showEmptyCategory || (!listCategory1.showEmptyCategory && categoriesCounts[idx] > 0)"
			class="nav-link nav-link-responsive" [ngClass]="{'active': idx === selectedCategory }" [routerLink]="['.']" queryParamsHandling="preserve" (click)="categorySelected(idx)">
				{{ele}} <span *ngIf="listCategory1.showCategoryCounts">({{categoriesCounts[idx]}})</span>
		</a>
	</li>
</ul>
<%_ 
if (listCategoryRef && listCategoryShowMore) {%>
<div *ngFor="let cat of categoryMore; let i = index;" class="ms-3 mb-5">
	<div *ngIf="i === selectedCategory">
		<app-<%-listCategoryRef%>-detail-field [showFieldsStr]="'<%-listCategoryShowMore%>'" [detailObj]="cat"></app-<%-listCategoryRef%>-detail-field>
	</div>
</div> <%}%>

<div>
	<%if (listCalendarRoute) {%>
	<div *ngIf="!options['disableCalendarView']" class="d-flex justify-content-center my-3"><a [routerLink]="['../calendar']">
		<i class="fa-solid fa-calendar"></i> Calendar View
	</a></div><%}%>
	<div *ngIf="!options['disableListHead']" class="container search"><%-
		include('/schema-search.include.html'); %>
		<div class="row" *ngIf="!options['disableActionButtons']">
			<div class="col">
		        <div class="action-buttons"><%
					if (api.includes('M') && listActionButtons[2]){%>
					<lib-mdds-action-email *ngIf="emailFields.length > 0 || emailFieldsRefArray.length > 0" class="m-1"
						[emailFields]="emailFields"
						[emailFieldsRefArray]="emailFieldsRefArray"
						[emailFieldsRefObj]="emailFieldsRefObj"
						[stringFields]="stringFields" [recordNumber]="totalCount"
						(componentEvents)="onActionBaseEvent($event)">
					</lib-mdds-action-email><%}%><%

					if(api.includes('C') && listActionButtons[0]){%>
					<a [routerLink]="['../new' ]" [skipLocationChange]="false" class="btn btn-outline-primary"><%-listActionButtons[0]%></a><%}%><%
					if(api.includes('D') && listActionButtons[1]){%>
					<a routerLink="." class="btn btn-outline-primary" (click)="onDeleteSelected()"
						[ngClass]="{'disabled': !isItemSelected()}"><%-listActionButtons[1]%></a><%}%><%
					if(api.includes('A') && listActionButtons[3]){%>
					<a routerLink="." class="btn btn-outline-primary" (click)="onArchiveSelected()"
						[ngClass]="{'disabled': !isItemSelected()}">
							<span *ngIf="!archivedSearch"><%-listActionButtons[3]%></span>
							<span *ngIf="archivedSearch">Unarchive</span>
					</a><%}%>
				</div>
			</div>
		</div>
		<hr/>
		<div *ngIf="!options['disablePagination']">
			<%_ let disableRefreshIcon = false; let disableSortSelection = false; let disableViewSwitch = false;
				let pagiObj = {disableRefreshIcon, disableSortSelection, disableViewSwitch, };
			%><%-include(`/schema-list.pagination.html`, pagiObj)%>
		</div>
	</div>
	<div class="no-records" *ngIf="list.length === 0">
		<span *ngIf="loaded">No records found.</span>
		<span *ngIf="!loaded">Loading...</span>
	</div>

	<div *ngIf="list.length > 0"><% for (let view of widgetDef.views) {%>
		<ng-template [ngIf]="isShowListView('<%-view%>')">
			<app-<%-schemaName%>-list-view-widget-<%-view%>
			<%- include(`/widgets/list/view-component.inputs.html`)%>
			>
			</app-<%-schemaName%>-list-view-widget-<%-view%>>
		</ng-template>
		<%}%>
	</div>
	<div class="container">
		<div *ngIf="!options['disablePagination']">
		<%_ disableRefreshIcon = true; disableSortSelection = true; disableViewSwitch = true;
			pagiObj = {disableRefreshIcon, disableSortSelection, disableViewSwitch};
		%><%-include(`/schema-list.pagination.html`, pagiObj) %>
		</div>
	</div>
</div>