Misc updates

src/app/common/modal/modal/modal.component.html

@@ -11,6 +11,12 @@ <h2 class="modal-title">
 </section>
 
 <section class="modal-footer">
+	@if (errorMsg()) {
+		<div class="alert alert-danger py-1">
+			<span class="fa-solid fa-fw fa-warning me-1"></span>
+			{{ errorMsg() }}
+		</div>
+	}
 	@if (hideCancel()) {
 		<button class="btn btn-outline-primary me-2" type="button" (click)="cancel.emit()">
 			{{ cancelText() }}

src/app/common/modal/modal/modal.component.ts

@@ -25,6 +25,11 @@ export class ModalComponent {
 	 */
 	readonly cancelText = input('Cancel');
 
+	/**
+	 * Error message to display
+	 */
+	readonly errorMsg = input('');
+
 	readonly disableOk = input(false, { transform: booleanAttribute });
 	readonly hideCancel = input(false, { transform: booleanAttribute });
 

src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html

@@ -82,9 +82,14 @@ <h1 skipTo>Cache Entries</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>
 

src/app/core/admin/end-user-agreement/eua.service.ts

@@ -34,6 +34,6 @@ export class EuaService extends AbstractEntityService<EndUserAgreement> {
 	}
 
 	publish(eua: EndUserAgreement): Observable<EndUserAgreement | null> {
-		return this.updateAction('publish', eua);
+		return this.updateAction('publish', eua, {});
 	}
 }

src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html

@@ -135,8 +135,13 @@ <h1 skipTo>EUAs</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>

src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.spec.ts

@@ -28,8 +28,8 @@ describe('Admin List End User Agreements Component', () => {
 			return of(void 0);
 		});
 		endUserAgreementServiceSpy.cache = {};
-		dialogServiceSpy = jasmine.createSpyObj('DialogService', ['alert']);
-		dialogServiceSpy.alert.and.callFake(() => {
+		dialogServiceSpy = jasmine.createSpyObj('DialogService', ['open']);
+		dialogServiceSpy.open.and.callFake(() => {
 			return of(void 0);
 		});
 		const testBed = TestBed.configureTestingModule({
@@ -53,8 +53,8 @@ describe('Admin List End User Agreements Component', () => {
 
 	it('Should Open a Modal When Preview End User Agreement', () => {
 		fixture.detectChanges();
-		expect(dialogServiceSpy.alert).toHaveBeenCalledTimes(0);
+		expect(dialogServiceSpy.open).toHaveBeenCalledTimes(0);
 		component.previewEndUserAgreement(new EndUserAgreement());
-		expect(dialogServiceSpy.alert).toHaveBeenCalledTimes(1);
+		expect(dialogServiceSpy.open).toHaveBeenCalledTimes(1);
 	});
 });

src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.ts

@@ -33,6 +33,10 @@ import {
 } from '../../../../common/table';
 import { EndUserAgreement } from '../../../auth';
 import { EuaService } from '../eua.service';
+import {
+	PreviewEuaModalComponent,
+	PreviewEuaModalData
+} from '../preview-eua-modal/preview-eua-modal.component';
 
 @Component({
 	templateUrl: './admin-list-euas.component.html',
@@ -163,8 +167,9 @@ export class AdminListEuasComponent implements OnInit {
 	/**
 	 * Opens a preview modal containing the text and title of this end user agreement.
 	 */
-	previewEndUserAgreement(endUserAgreement: EndUserAgreement) {
-		const { text, title } = endUserAgreement;
-		this.#dialogService.alert(title, text);
+	previewEndUserAgreement(eua: EndUserAgreement) {
+		this.#dialogService.open<unknown, PreviewEuaModalData>(PreviewEuaModalComponent, {
+			data: { eua }
+		});
 	}
 }

src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.ts

@@ -9,6 +9,10 @@ import { DialogService } from '../../../../common/dialog';
 import { SystemAlertComponent, SystemAlertService } from '../../../../common/system-alert';
 import { EndUserAgreement } from '../../../auth';
 import { EuaService } from '../eua.service';
+import {
+	PreviewEuaModalComponent,
+	PreviewEuaModalData
+} from '../preview-eua-modal/preview-eua-modal.component';
 
 @Component({
 	standalone: true,
@@ -44,6 +48,8 @@ export class ManageEuaComponent {
 	}
 
 	previewEua(): void {
-		this.#dialogService.alert(this.eua().title, this.eua().text);
+		this.#dialogService.open<unknown, PreviewEuaModalData>(PreviewEuaModalComponent, {
+			data: { eua: this.eua() }
+		});
 	}
 }

src/app/core/admin/end-user-agreement/preview-eua-modal/preview-eua-modal.component.html

@@ -0,0 +1,8 @@
+<asy-modal title="EUA Preview" (cancel)="close()" (ok)="close()">
+	<div class="card">
+		<div class="card-header">
+			<h2>{{ data.eua.title }}</h2>
+		</div>
+		<div class="card-body" [innerHtml]="data.eua.text"></div>
+	</div>
+</asy-modal>

src/app/core/admin/end-user-agreement/preview-eua-modal/preview-eua-modal.component.ts

@@ -0,0 +1,28 @@
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import { Component, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { ModalComponent } from '../../../../common';
+import { DialogAction } from '../../../../common/dialog';
+import { EndUserAgreement } from '../../../auth';
+
+export type PreviewEuaModalData = {
+	eua: EndUserAgreement;
+};
+
+@Component({
+	selector: 'app-preview-eua-modal',
+	standalone: true,
+	imports: [FormsModule, ModalComponent],
+	templateUrl: './preview-eua-modal.component.html',
+	styleUrl: './preview-eua-modal.component.scss'
+})
+export class PreviewEuaModalComponent {
+	readonly #dialogRef = inject(DialogRef);
+
+	readonly data: PreviewEuaModalData = inject(DIALOG_DATA);
+
+	close() {
+		this.#dialogRef.close({ action: DialogAction.CANCEL });
+	}
+}

src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html

@@ -161,7 +161,7 @@ <h1 skipTo>System Feedback</h1>
 							attr.aria-controls="feedback-{{ feedback._id }}-assignee-menu"
 							[cdkMenuTriggerFor]="assigneeMenu"
 						>
-							{{ feedback.assignee ?? 'None' }}
+							{{ feedback.assignee || 'None' }}
 						</button>
 						<ng-template #assigneeMenu>
 							<div
@@ -216,8 +216,13 @@ <h1 skipTo>System Feedback</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>

src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.ts

@@ -3,7 +3,7 @@ import { OverlayModule } from '@angular/cdk/overlay';
 import { CdkTableModule } from '@angular/cdk/table';
 import { NgClass, TitleCasePipe } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, DestroyRef, OnInit, inject, signal } from '@angular/core';
+import { Component, DestroyRef, OnInit, inject, signal, viewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
@@ -72,6 +72,8 @@ export class AdminListFeedbackComponent implements OnInit {
 	readonly #adminUsersService = inject(AdminUsersService);
 	readonly feedbackStatusOptions = FeedbackStatusOption;
 
+	readonly filter = viewChild.required(AsyFilterDirective);
+
 	readonly displayedColumns = signal<string[]>([]);
 	readonly assigneeUsernames = signal<string[]>([]);
 
@@ -164,6 +166,7 @@ export class AdminListFeedbackComponent implements OnInit {
 
 	clearFilters() {
 		this.dataSource.search('');
+		this.filter().clearFilter();
 	}
 
 	exportCurrentView() {

src/app/core/admin/messages/list-messages/list-messages.component.html

@@ -97,8 +97,13 @@ <h1 skipTo>Messages</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>

src/app/core/admin/messages/list-messages/list-messages.component.ts

@@ -30,6 +30,10 @@ import {
 	TextColumnComponent
 } from '../../../../common/table';
 import { Message, MessageService } from '../../../messages';
+import {
+	PreviewMessageModalComponent,
+	PreviewMessageModalData
+} from '../preview-message-modal/preview-message-modal.component';
 
 @Component({
 	templateUrl: './list-messages.component.html',
@@ -113,7 +117,10 @@ export class ListMessagesComponent implements OnInit {
 	 * @param message - the message used to populate the modal
 	 */
 	previewMessage(message: Message) {
-		const { body, title } = message;
-		this.#dialogService.alert(title, body);
+		this.#dialogService.open<unknown, PreviewMessageModalData>(PreviewMessageModalComponent, {
+			data: {
+				message
+			}
+		});
 	}
 }

src/app/core/admin/messages/manage-message/manage-message.component.spec.ts

@@ -35,8 +35,8 @@ describe('ManageMessageComponent', () => {
 		messageServiceSpy.create.and.callFake(() => {
 			return of(message);
 		});
-		dialogServiceSpy = jasmine.createSpyObj('DialogService', ['alert']);
-		dialogServiceSpy.alert.and.callFake(() => {
+		dialogServiceSpy = jasmine.createSpyObj('DialogService', ['open']);
+		dialogServiceSpy.open.and.callFake(() => {
 			return of();
 		});
 
@@ -75,8 +75,8 @@ describe('ManageMessageComponent', () => {
 
 	it('Should Open a Modal When Preview Message', () => {
 		fixture.detectChanges();
-		expect(dialogServiceSpy.alert).toHaveBeenCalledTimes(0);
+		expect(dialogServiceSpy.open).toHaveBeenCalledTimes(0);
 		component.previewMessage();
-		expect(dialogServiceSpy.alert).toHaveBeenCalledTimes(1);
+		expect(dialogServiceSpy.open).toHaveBeenCalledTimes(1);
 	});
 });

src/app/core/admin/messages/manage-message/manage-message.component.ts

@@ -10,6 +10,10 @@ import { SkipToDirective } from '../../../../common';
 import { DialogService } from '../../../../common/dialog';
 import { SystemAlertComponent, SystemAlertService } from '../../../../common/system-alert';
 import { Message, MessageService, MessageType } from '../../../messages';
+import {
+	PreviewMessageModalComponent,
+	PreviewMessageModalData
+} from '../preview-message-modal/preview-message-modal.component';
 
 @Component({
 	standalone: true,
@@ -60,6 +64,10 @@ export class ManageMessageComponent {
 	}
 
 	previewMessage() {
-		this.#dialogService.alert(this.message().title, this.message().body);
+		this.#dialogService.open<unknown, PreviewMessageModalData>(PreviewMessageModalComponent, {
+			data: {
+				message: this.message()
+			}
+		});
 	}
 }

src/app/core/admin/messages/preview-message-modal/preview-message-modal.component.html

@@ -0,0 +1,3 @@
+<asy-modal title="Message Preview" (cancel)="close()" (ok)="close()">
+	<app-message [message]="data.message" />
+</asy-modal>

src/app/core/admin/messages/preview-message-modal/preview-message-modal.component.ts

@@ -0,0 +1,33 @@
+import { DIALOG_DATA, DialogRef } from '@angular/cdk/dialog';
+import { LowerCasePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+
+import { ModalComponent } from '../../../../common';
+import { DialogAction } from '../../../../common/dialog';
+import { AgoDatePipe } from '../../../../common/pipes';
+import { Message, MessageType } from '../../../messages';
+import { MessageComponent } from '../../../messages/message/message.component';
+
+export type PreviewMessageModalData = {
+	message: Message;
+};
+
+@Component({
+	selector: 'app-preview-message-modal',
+	standalone: true,
+	imports: [ModalComponent, AgoDatePipe, LowerCasePipe, MessageComponent],
+	templateUrl: './preview-message-modal.component.html',
+	styleUrl: './preview-message-modal.component.scss',
+	changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PreviewMessageModalComponent {
+	readonly #dialogRef = inject(DialogRef);
+
+	readonly data: PreviewMessageModalData = inject(DIALOG_DATA);
+
+	protected readonly messageType = MessageType;
+
+	close() {
+		this.#dialogRef.close({ action: DialogAction.CANCEL });
+	}
+}

src/app/core/admin/user/list-users/admin-list-users.component.html

@@ -152,8 +152,13 @@ <h1 skipTo>Users</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>

src/app/core/audit/list-audit-entries/list-audit-entries.component.html

@@ -146,8 +146,13 @@ <h1 skipTo>Audit Logs</h1>
 	</div>
 
 	<div class="table-footer d-flex align-items-center">
-		<div class="table-footer-pager ms-auto">
-			<asy-paginator [dataSource]="dataSource" />
-		</div>
+		<button
+			class="btn btn-outline-primary btn-sm px-4 me-3"
+			type="button"
+			(click)="clearFilters()"
+		>
+			Reset Filters
+		</button>
+		<asy-paginator class="ms-auto" [dataSource]="dataSource" />
 	</div>
 </section>

src/app/core/eua/user-eua.component.html

@@ -2,12 +2,12 @@
 	<div class="row g-0">
 		@if (eua$ | async; as eua) {
 			<div class="col-xl-8 offset-xl-2">
-				<h1>
+				<h2>
 					End User Agreement (EUA)<br />
 					@if (!alreadyAccepted()) {
 						<small> Please review and acknowledge the end user agreement </small>
 					}
-				</h1>
+				</h2>
 				<!-- Alert Notifications -->
 				<system-alert />
 				<form name="userForm" role="form" autocomplete="off">