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

bluehalo · Jul 18, 2024 · e9884b6 · e9884b6
1 parent d9190e2
commit e9884b6
Show file tree

Hide file tree

Showing 32 changed files with 200 additions and 159 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/asy-abstract-value-column.component.ts b/src/app/common/table/columns/asy-abstract-value-column.component.ts
@@ -6,7 +6,7 @@ import { HeaderTemplateDirective } from './header-template.directive';
 @Directive({ standalone: true })
 export abstract class AsyAbstractValueColumnComponent<T> extends AsyAbstractColumnComponent<T> {
 	readonly header = input<string>();
-	readonly sortable = input(true, { transform: booleanAttribute });
+	readonly sortable = input(false, { transform: booleanAttribute });
 
 	readonly headerTemplate = contentChild(HeaderTemplateDirective, { read: TemplateRef });
 }
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="header-text">
 			{{ 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/expandable-list/asy-expandable-list-column.component.scss b/src/app/common/table/columns/expandable-list/asy-expandable-list-column.component.scss
@@ -1,13 +1,18 @@
 .list-column-collapsed {
-  .list-item:not(:first-child) {
-    display: none;
-
-  }
+	.list-item:not(:first-child) {
+		display: none;
+	}
 }
 
 .fa-angle-down {
-  transform: scale(1, -1);
-  .list-column-collapsed & {
-    transform: scale(1, 1);
-  }
+	transform: scale(1, -1);
+	.list-column-collapsed & {
+		transform: scale(1, 1);
+	}
+}
+
+.header-text {
+	display: inline-block;
+	position: relative;
+	top: -1px;
 }
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
@@ -5,6 +5,8 @@ $filter-dropdown-font-size: 0.75rem !default;
 $filter-dropdown-max-height: 250px !default;
 
 button.dropdown-toggle {
+	position: relative;
+	top: -2px;
 	background: inherit;
 	border: none;
 	font: inherit;

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.html b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html
@@ -21,14 +21,14 @@ <h1 skipTo>Cache Entries</h1>
 
 	<div class="table-content">
 		<table class="table table-striped" asyFilter asySort cdk-table [dataSource]="dataSource">
-			<asy-text-column name="key" />
+			<asy-text-column name="key" sortable />
 			<ng-container cdkColumnDef="value">
 				<th cdk-header-cell *cdkHeaderCellDef>Value</th>
 				<td class="hide-overflow" cdk-cell style="max-width: 300px" *cdkCellDef="let entry">
 					{{ entry.value | json }}
 				</td>
 			</ng-container>
-			<asy-ago-date-column name="ts" header="Created" />
+			<asy-ago-date-column name="ts" header="Created" sortable />
 			<asy-actions-menu-column scope="cache-entry" stickyEnd>
 				<ng-template
 					actions-menu-tmp

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
@@ -43,24 +43,28 @@ <h1 skipTo>EUAs</h1>
 				cdk-table
 				[dataSource]="dataSource"
 			>
-				<asy-text-column name="_id" header="ID" [sortable]="false" />
+				<asy-text-column name="_id" header="ID" />
 				<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>
 				</ng-container>
-				<asy-date-column name="created" />
-				<asy-date-column name="published" />
-				<asy-date-column name="updated" />
+				<asy-date-column name="created" sortable />
+				<asy-date-column name="published" sortable />
+				<asy-date-column name="updated" sortable />
 				<asy-actions-menu-column scope="eua" stickyEnd>
 					<ng-template
 						actions-menu-tmp

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,