refactor: rework asy-sort-header for improved rendering flexibility

bluehalo · Jul 17, 2024 · 4fff4e4 · 4fff4e4
1 parent d9190e2
commit 4fff4e4
Show file tree

Hide file tree

Showing 28 changed files with 158 additions and 123 deletions.
diff --git a/src/app/common/table/columns/ago-date/ago-date-column.component.html b/src/app/common/table/columns/ago-date/ago-date-column.component.html
@@ -1,14 +1,17 @@
 <ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
-	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable()">
-		<ng-template #defaultHeaderTemplate>
+	<th cdk-header-cell *cdkHeaderCellDef>
+		<asy-header-sort [sortable]="sortable()">
 			{{ header() ?? (name | titlecase) }}
-		</ng-template>
-		<ng-template
-			[ngTemplateOutlet]="headerTemplate() ?? defaultHeaderTemplate"
-			[ngTemplateOutletContext]="{
-				header: header()
-			}"
-		/>
+		</asy-header-sort>
+		@if (headerTemplate(); as tpl) {
+			<ng-template
+				[ngTemplateOutlet]="tpl"
+				[ngTemplateOutletContext]="{
+					header: header()
+				}"
+			/>
+		}
+		<ng-content />
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		<div class="text-nowrap" container="body" ngbTooltip="{{ obj[name] | utcDate: format() }}">

diff --git a/src/app/common/table/columns/ago-date/ago-date-column.component.ts b/src/app/common/table/columns/ago-date/ago-date-column.component.ts
@@ -5,7 +5,7 @@ import { Component, booleanAttribute, input } from '@angular/core';
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
 
 import { AgoDatePipe, UtcDatePipe } from '../../../pipes';
-import { AsySortHeaderComponent } from '../../sort/asy-sort-header/asy-sort-header.component';
+import { AsyHeaderSortComponent } from '../../sort/asy-header-sort/asy-header-sort.component';
 import { DateColumnComponent } from '../date/date-column.component';
 
 @Component({
@@ -15,7 +15,7 @@ import { DateColumnComponent } from '../date/date-column.component';
 		CommonModule,
 		CdkTableModule,
 		UtcDatePipe,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AgoDatePipe,
 		NgbTooltip
 	],

diff --git a/src/app/common/table/columns/date/date-column.component.html b/src/app/common/table/columns/date/date-column.component.html
@@ -1,14 +1,17 @@
 <ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
-	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable()">
-		<ng-template #defaultHeaderTemplate>
+	<th cdk-header-cell *cdkHeaderCellDef>
+		<asy-header-sort [sortable]="sortable()">
 			{{ header() ?? (name | titlecase) }}
-		</ng-template>
-		<ng-template
-			[ngTemplateOutlet]="headerTemplate() ?? defaultHeaderTemplate"
-			[ngTemplateOutletContext]="{
-				header: header()
-			}"
-		/>
+		</asy-header-sort>
+		@if (headerTemplate(); as tpl) {
+			<ng-template
+				[ngTemplateOutlet]="tpl"
+				[ngTemplateOutletContext]="{
+					header: header()
+				}"
+			/>
+		}
+		<ng-content />
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		{{ obj[name] | utcDate: format() }}

diff --git a/src/app/common/table/columns/date/date-column.component.ts b/src/app/common/table/columns/date/date-column.component.ts
@@ -2,14 +2,14 @@ import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
 import { Component, input } from '@angular/core';
 
-import { UtcDatePipe } from '../../../pipes/utc-date-pipe/utc-date.pipe';
-import { AsySortHeaderComponent } from '../../sort/asy-sort-header/asy-sort-header.component';
+import { UtcDatePipe } from '../../../pipes';
+import { AsyHeaderSortComponent } from '../../sort/asy-header-sort/asy-header-sort.component';
 import { AsyAbstractValueColumnComponent } from '../asy-abstract-value-column.component';
 
 @Component({
 	selector: 'asy-date-column',
 	standalone: true,
-	imports: [CommonModule, CdkTableModule, UtcDatePipe, AsySortHeaderComponent],
+	imports: [CommonModule, CdkTableModule, UtcDatePipe, AsyHeaderSortComponent],
 	templateUrl: './date-column.component.html',
 	styleUrls: ['./date-column.component.scss']
 })

diff --git a/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html b/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.html
@@ -1,14 +1,17 @@
 <ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
 	<th cdk-header-cell *cdkHeaderCellDef>
-		<ng-template #defaultHeaderTemplate>
+		<div class="d-inline-block">
 			{{ header() ?? (name | titlecase) }}
-		</ng-template>
-		<ng-template
-			[ngTemplateOutlet]="headerTemplate() ?? defaultHeaderTemplate"
-			[ngTemplateOutletContext]="{
-				header: header()
-			}"
-		/>
+		</div>
+		@if (headerTemplate(); as tpl) {
+			<ng-template
+				[ngTemplateOutlet]="tpl"
+				[ngTemplateOutletContext]="{
+					header: header()
+				}"
+			/>
+		}
+		<ng-content />
 	</th>
 	<td
 		class=""

diff --git a/src/app/common/table/columns/text/text-column.component.html b/src/app/common/table/columns/text/text-column.component.html
@@ -1,14 +1,17 @@
 <ng-container cdkColumnDef [sticky]="sticky()" [stickyEnd]="stickyEnd()">
-	<th asy-sort-header cdk-header-cell *cdkHeaderCellDef [sortable]="sortable()">
-		<ng-template #defaultHeaderTemplate>
+	<th cdk-header-cell *cdkHeaderCellDef>
+		<asy-header-sort [sortable]="sortable()">
 			{{ header() ?? (name | titlecase) }}
-		</ng-template>
-		<ng-template
-			[ngTemplateOutlet]="headerTemplate() ?? defaultHeaderTemplate"
-			[ngTemplateOutletContext]="{
-				header: header()
-			}"
-		/>
+		</asy-header-sort>
+		@if (headerTemplate(); as tpl) {
+			<ng-template
+				[ngTemplateOutlet]="tpl"
+				[ngTemplateOutletContext]="{
+					header: header()
+				}"
+			/>
+		}
+		<ng-content />
 	</th>
 	<td class="text-nowrap" cdk-cell *cdkCellDef="let obj">
 		{{ obj[name] || defaultValue() }}

diff --git a/src/app/common/table/columns/text/text-column.component.ts b/src/app/common/table/columns/text/text-column.component.ts
@@ -2,13 +2,13 @@ import { CdkTableModule } from '@angular/cdk/table';
 import { CommonModule } from '@angular/common';
 import { Component, input } from '@angular/core';
 
-import { AsySortHeaderComponent } from '../../sort/asy-sort-header/asy-sort-header.component';
+import { AsyHeaderSortComponent } from '../../sort/asy-header-sort/asy-header-sort.component';
 import { AsyAbstractValueColumnComponent } from '../asy-abstract-value-column.component';
 
 @Component({
 	selector: 'asy-text-column',
 	standalone: true,
-	imports: [CommonModule, AsySortHeaderComponent, CdkTableModule],
+	imports: [CommonModule, AsyHeaderSortComponent, CdkTableModule],
 	templateUrl: './text-column.component.html',
 	styleUrls: ['./text-column.component.scss']
 })

diff --git a/src/app/common/table/filter/_shared.scss b/src/app/common/table/filter/_shared.scss
@@ -11,6 +11,7 @@ button.dropdown-toggle {
 	padding-top: 0;
 	padding-bottom: 0;
 	transform: translateY(1px);
+	margin-bottom: 2px;
 }
 
 .dropdown-menu {

diff --git a/src/app/common/table/sort/asy-header-sort/asy-header-sort.component.html b/src/app/common/table/sort/asy-header-sort/asy-header-sort.component.html
@@ -0,0 +1,16 @@
+<button class="btn btn-text p-0" type="button">
+	<ng-content />
+
+	@if (sortable()) {
+		<span class="fa-stack">
+			<span
+				class="fa-solid fa-sort-desc fa-stack-1x low-opacity"
+				[class.sorted]="isSorted() && sortDir() === 'DESC'"
+			></span>
+			<span
+				class="fa-solid fa-sort-asc fa-stack-1x low-opacity"
+				[class.sorted]="isSorted() && sortDir() === 'ASC'"
+			></span>
+		</span>
+	}
+</button>
diff --git a/...ort-header/asy-sort-header.component.scss → ...eader-sort/asy-header-sort.component.scss b/...ort-header/asy-sort-header.component.scss → ...eader-sort/asy-header-sort.component.scss
@@ -1,11 +1,12 @@
 @import '../../../../../styles/shared';
 
+:host {
+	display: inline-block;
+}
+
 button {
 	background: inherit;
-	border: none;
 	font: inherit;
-	padding-top: 0;
-	padding-bottom: 0;
 }
 
 .fa-solid {
@@ -23,8 +24,3 @@ button {
 	line-height: 2px;
 	width: 22px;
 }
-
-.asy-sort-header-sortable {
-	cursor: pointer;
-	padding-right: 5px;
-}
diff --git a/...-sort-header/asy-sort-header.component.ts → ...-header-sort/asy-header-sort.component.ts b/...-sort-header/asy-sort-header.component.ts → ...-header-sort/asy-header-sort.component.ts
@@ -24,21 +24,20 @@ interface AsySortHeaderColumnDef {
 }
 
 @Component({
-	selector: '[asy-sort-header]',
-	templateUrl: './asy-sort-header.component.html',
-	styleUrls: ['./asy-sort-header.component.scss'],
+	selector: 'asy-header-sort',
+	templateUrl: './asy-header-sort.component.html',
+	styleUrls: ['./asy-header-sort.component.scss'],
 	// eslint-disable-next-line @angular-eslint/no-host-metadata-property
 	host: {
-		class: 'asy-sort-header',
+		class: 'text-nowrap',
 		'(click)': '_handleClick()',
-		'[class.asy-sort-header-sorted]': 'isSorted()',
 		'[attr.aria-sort]': '_getAriaSortAttribute()'
 	},
 	changeDetection: ChangeDetectionStrategy.OnPush,
 	standalone: true,
 	imports: []
 })
-export class AsySortHeaderComponent implements AsySortable, OnDestroy, OnInit {
+export class AsyHeaderSortComponent implements AsySortable, OnDestroy, OnInit {
 	readonly #destroyRef = inject(DestroyRef);
 	readonly #changeDetectorRef = inject(ChangeDetectorRef);
 
@@ -51,7 +50,8 @@ export class AsySortHeaderComponent implements AsySortable, OnDestroy, OnInit {
 	 * ID of this sort header. If used within the context of a CdkColumnDef, this will default to
 	 * the column's name.
 	 */
-	@Input('asy-sort-header')
+	// eslint-disable-next-line @angular-eslint/no-input-rename
+	@Input('sortId')
 	id: string;
 
 	/** Overrides the sort start value of the containing AsySort for this AsySortable. */

diff --git a/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html b/src/app/common/table/sort/asy-sort-header/asy-sort-header.component.html
diff --git a/src/app/common/table/sort/public-api.ts b/src/app/common/table/sort/public-api.ts
@@ -1,2 +1,2 @@
-export * from './asy-sort-header/asy-sort-header.component';
+export * from './asy-header-sort/asy-header-sort.component';
 export * from './asy-sort.directive';
diff --git a/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.ts
@@ -23,8 +23,8 @@ import {
 	ActionsMenuTemplateDirective,
 	AgoDateColumnComponent,
 	AsyFilterDirective,
+	AsyHeaderSortComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	PaginatorComponent,
@@ -47,7 +47,7 @@ import { CacheEntry } from '../cache-entry.model';
 		CdkTableModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyTableEmptyStateComponent,
 		PaginatorComponent,
 		JsonPipe,

diff --git a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html
@@ -45,15 +45,19 @@ <h1 skipTo>EUAs</h1>
 			>
 				<asy-text-column name="_id" header="ID" [sortable]="false" />
 				<ng-container cdkColumnDef="title">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Title</th>
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort>Title</asy-header-sort>
+					</th>
 					<td class="hide-overflow" cdk-cell *cdkCellDef="let eua">
 						<a class="btn btn-link p-0" [routerLink]="['/admin/eua', eua._id]">
 							{{ eua.title }}
 						</a>
 					</td>
 				</ng-container>
 				<ng-container cdkColumnDef="text">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Text</th>
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort>Text</asy-header-sort>
+					</th>
 					<td class="hide-overflow" cdk-cell *cdkCellDef="let eua">
 						{{ eua.text }}
 					</td>

diff --git a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts
@@ -21,8 +21,8 @@ import {
 	ActionsMenuColumnComponent,
 	ActionsMenuTemplateDirective,
 	AsyFilterDirective,
+	AsyHeaderSortComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	ColumnChooserComponent,
@@ -46,7 +46,7 @@ import { EuaService } from '../eua.service';
 		CdkTableModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyTableEmptyStateComponent,
 		SidebarComponent,
 		ColumnChooserComponent,

diff --git a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html
@@ -74,7 +74,9 @@ <h1 skipTo>System Feedback</h1>
 				<asy-ago-date-column name="created" header="Submitted Date" />
 				<asy-ago-date-column name="updated" />
 				<ng-container cdkColumnDef="type">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Type</th>
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort>Type</asy-header-sort>
+					</th>
 					<td class="text-nowrap" cdk-cell *cdkCellDef="let feedback">
 						{{ feedback.type | titlecase }}
 					</td>
@@ -92,8 +94,8 @@ <h1 skipTo>System Feedback</h1>
 				<asy-text-column name="os" />
 				<asy-text-column name="url" header="Submitted From" />
 				<ng-container cdkColumnDef="status">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>
-						Status
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort> Status </asy-header-sort>
 						<asy-header-filter list-filter [options]="['New', 'Open', 'Closed']" />
 					</th>
 					<td cdk-cell *cdkCellDef="let feedback">
@@ -148,7 +150,9 @@ <h1 skipTo>System Feedback</h1>
 					</td>
 				</ng-container>
 				<ng-container cdkColumnDef="assignee">
-					<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Assignee</th>
+					<th cdk-header-cell *cdkHeaderCellDef>
+						<asy-header-sort>Assignee</asy-header-sort>
+					</th>
 					<td cdk-cell *cdkCellDef="let feedback">
 						<button
 							class="btn btn-text dropdown-toggle p-0"

diff --git a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts
@@ -21,9 +21,9 @@ import {
 	AgoDateColumnComponent,
 	AsyFilterDirective,
 	AsyHeaderListFilterComponent,
+	AsyHeaderSortComponent,
 	AsyHeaderTextFilterComponent,
 	AsySortDirective,
-	AsySortHeaderComponent,
 	AsyTableDataSource,
 	AsyTableEmptyStateComponent,
 	ColumnChooserComponent,
@@ -46,7 +46,7 @@ import { AdminUsersService } from '../../user/admin-users.service';
 		OverlayModule,
 		AsySortDirective,
 		AsyFilterDirective,
-		AsySortHeaderComponent,
+		AsyHeaderSortComponent,
 		AsyHeaderListFilterComponent,
 		AsyTableEmptyStateComponent,
 		SidebarComponent,

diff --git a/src/app/core/admin/messages/list-messages/list-messages.component.html b/src/app/core/admin/messages/list-messages/list-messages.component.html
@@ -32,7 +32,9 @@ <h1 skipTo>Messages</h1>
 	<div class="table-content">
 		<table class="table table-striped" asyFilter asySort cdk-table [dataSource]="dataSource">
 			<ng-container cdkColumnDef="title">
-				<th asy-sort-header cdk-header-cell *cdkHeaderCellDef>Title</th>
+				<th cdk-header-cell *cdkHeaderCellDef>
+					<asy-header-sort>Title</asy-header-sort>
+				</th>
 				<td cdk-cell *cdkCellDef="let message">
 					<a class="btn btn-link p-0" [routerLink]="['/admin/message', message._id]">
 						{{ message.title }}