@fhss-web-team/frontend-utils 1.6.1 → 1.6.3

package/fesm2022/fhss-web-team-frontend-utils.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, InjectionToken, inject, Injector, signal, afterNextRender, effect, computed, Injectable, input, ViewChild } from '@angular/core';
+import { Component, InjectionToken, inject, Injector, signal, afterNextRender, effect, computed, Injectable, input, untracked, ViewChild } from '@angular/core';
 import * as i1 from '@angular/router';
 import { Router, RouterModule, RedirectCommand } from '@angular/router';
 import { KEYCLOAK_EVENT_SIGNAL, KeycloakEventType, typeEventArgs } from 'keycloak-angular';
@@ -19,6 +19,7 @@ import * as i6 from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
 import * as i1$2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import { isTRPCClientError } from '@trpc/client';
 
 class ByuFooterComponent {
     currentYear = new Date().getFullYear(); // Automatically updates the year
@@ -271,42 +272,43 @@ const debounce = (callback, wait) => {
     };
 };
 
-/**
- * Reads the underlying value from a MaybeSignal.
- *
- * This function is designed for use with reactive APIs (like fetchSignal) where it's important
- * that Angular's computed methods register the dependency. If the input is a Signal, invoking it
- * not only returns its current value but also tracks the signal for reactivity. If the input is
- * a plain value, it simply returns that value.
- *
- * @template T The type of the value.
- * @param value A plain value or a Signal that yields the value.
- * @returns The current value, with dependency tracking enabled if the input is a Signal.
- */
-function readMaybeSignal(value) {
-    return typeof value === 'function' ? value() : value;
-}
 /**
  * Creates a reactive fetch signal.
  *
  * The request function can include Signals for properties. These are unwrapped in the refresh function.
  */
-function createFetchSignal(request, method, transform, autoRefresh) {
+function createFetchSignal(request, method, transform, options) {
     // Use a computed signal so that any changes to Signals in the request object trigger updates.
     const currentRequest = computed(request);
-    const value = signal(undefined);
-    const persistentValue = signal(undefined);
+    const value = signal(options?.defaultValue, { equal: options?.equal });
+    const errorResponse = signal(undefined);
     const isLoading = signal(false);
-    const error = signal(undefined);
     const statusCode = signal(undefined);
     const headers = signal(undefined);
+    const status = signal('idle');
+    const error = signal(undefined);
+    const injector = inject(Injector);
+    let effectRef = undefined;
+    if (options?.autoRefresh) {
+        effectRef = effect((onCleanup) => {
+            // pass abort signal to refresh on cleanup of effect
+            const controller = new AbortController();
+            onCleanup(() => controller.abort());
+            // call refresh with this abort controller
+            refresh(controller.signal, true);
+        }, { injector: options?.injector || injector });
+    }
     const refresh = async (abortSignal, keepLoadingThroughAbort) => {
+        // if the fetchSignal has been destroyed, do nothing
+        if (untracked(status) === 'destroyed')
+            return;
         // Reset signals for a fresh request.
-        value.set(undefined);
         isLoading.set(true);
-        error.set(undefined);
+        errorResponse.set(undefined);
         statusCode.set(undefined);
         headers.set(undefined);
+        status.set('loading');
+        error.set(undefined);
         // Unwrap the current request.
         const req = currentRequest();
         const url = req.url;
@@ -323,14 +325,20 @@ function createFetchSignal(request, method, transform, autoRefresh) {
             }
             uri += (uri.includes('?') ? '&' : '?') + searchParams.toString();
         }
+        // Filter out undefined header values
+        const filteredHeaders = requestHeaders
+            ? Object.fromEntries(Object.entries(requestHeaders).filter(([, value]) => value !== undefined))
+            : undefined;
         try {
+            // send the request
             const response = await fetch(uri, {
                 method,
-                headers: requestHeaders,
+                headers: filteredHeaders,
                 // Only include a body if one is provided.
-                body: body !== undefined ? JSON.stringify(body) : undefined,
+                body: body,
                 signal: abortSignal,
             });
+            // set the status code
             statusCode.set(response.status);
             // Extract response headers.
             const headersObj = {};
@@ -341,57 +349,71 @@ function createFetchSignal(request, method, transform, autoRefresh) {
             // if the response is ok, transform the body
             if (response.ok) {
                 value.set(await transform(response));
-                error.set(null);
+                status.set('resolved');
             }
             else {
                 // try to parse the error as json
-                // set the error to null if this fails
                 try {
-                    error.set(await response.json());
+                    errorResponse.set(await response.json());
+                    value.set(undefined);
+                    status.set('resolved');
                 }
                 catch {
-                    error.set(null);
-                }
-                finally {
-                    value.set(null);
+                    throw new Error('Unable to parse error response.');
                 }
             }
         }
         catch (err) {
-            if (err.name === 'AbortError' && keepLoadingThroughAbort) {
-                return;
+            if (err instanceof Error) {
+                // if the fetch request was aborted
+                // we check if we would like to continue loading (the next request)
+                // if so then we just leave this refresh in an undefined state
+                // else we error as usual
+                if (err.name === 'AbortError' && keepLoadingThroughAbort) {
+                    return;
+                }
+                error.set(err);
+            }
+            else {
+                // Fallback for non-Error values
+                error.set(new Error(String(err)));
             }
-            error.set(null);
-            value.set(null);
+            value.set(undefined);
+            status.set('error');
         }
-        persistentValue.set(value());
         isLoading.set(false);
     };
-    if (autoRefresh) {
-        effect((onCleanup) => {
-            // read the current request to trigger re-run of this effect
-            currentRequest();
-            // pass abort signal to refresh on cleanup of effect
-            const controller = new AbortController();
-            onCleanup(() => controller.abort());
-            // call refresh with this abort controller
-            refresh(controller.signal, true);
-        });
-    }
+    const destroy = () => {
+        // if the fetchSignal has been destroyed, do nothing
+        if (status() === 'destroyed')
+            return;
+        if (effectRef) {
+            effectRef.destroy();
+        }
+        status.set('destroyed');
+        value.set(undefined);
+        errorResponse.set(undefined);
+        isLoading.set(false);
+        statusCode.set(undefined);
+        headers.set(undefined);
+        error.set(undefined);
+    };
     return {
         value,
-        persistentValue,
+        errorResponse,
         isLoading,
-        error,
         statusCode,
         headers,
+        status,
+        error,
         refresh,
+        destroy
     };
 }
 //
-// Helpers for attaching response transforms for GET/DELETE (which don’t include a body).
+// Helpers for attaching response transforms.
 //
-const createHelper = (method, transform) => (request, autoRefresh = false) => createFetchSignal(request, method, transform, autoRefresh);
+const createHelper = (method, transform) => (request, options) => createFetchSignal(request, method, transform, options);
 // Transforms
 const jsonTransformer = (response) => response.json();
 const textTransformer = (response) => response.text();
@@ -462,9 +484,9 @@ class UserManagementService {
                 created_before: createdBefore && createdBefore().toISOString(),
             },
             headers: {
-                Authorization: this.auth.bearerToken() ?? ''
+                Authorization: this.auth.bearerToken()
             }
-        }), true);
+        }), { autoRefresh: true });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: UserManagementService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: UserManagementService, providedIn: 'root' });
@@ -503,11 +525,11 @@ class UserManagementComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: UserManagementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: UserManagementComponent, isStandalone: true, selector: "app-user-management", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  <mat-label>Search for User</mat-label>\n  <input matInput [(ngModel)]=\"search\">\n</mat-form-field>\n<mat-form-field>\n  <mat-label>Account Type</mat-label>\n  <mat-select multiple [(ngModel)]=\"accountTypes\">\n    @for (accountType of accountTypeOptions; track accountType) {\n      <mat-option [value]=\"accountType\">{{accountType}}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n\n<table mat-table [dataSource]=\"getUsers.persistentValue()?.data ?? []\" matSort matSortActive=\"netId\" matSortDisableClear matSortDirection=\"asc\">\n  <!-- NetID Column -->\n  <ng-container matColumnDef=\"netId\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>NetID</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.netId}}</td>\n  </ng-container>\n\n  <!-- First Name Column -->\n  <ng-container matColumnDef=\"preferredFirstName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredFirstName}}</td>\n  </ng-container>\n\n  <!-- Last Name Column -->\n  <ng-container matColumnDef=\"preferredLastName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredLastName}}</td>\n  </ng-container>\n\n  <!-- Roles Column -->\n  <ng-container matColumnDef=\"roles\">\n    <th mat-header-cell *matHeaderCellDef>Roles</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.roles.join(', ')}}</td>\n  </ng-container>\n\n  <!-- Account Type Column -->\n  <ng-container matColumnDef=\"accountType\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Account Type</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.accountType}}</td>\n  </ng-container>\n\n  <!-- Created Column -->\n  <ng-container matColumnDef=\"created\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>\n      Created\n    </th>\n    <td mat-cell *matCellDef=\"let user\">{{user.created | date}}</td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<mat-paginator [length]=\"getUsers.persistentValue()?.totalCount\" [pageSize]=\"pageCount()\" [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons></mat-paginator>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: UserManagementComponent, isStandalone: true, selector: "app-user-management", viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true }], ngImport: i0, template: "<mat-form-field>\n  <mat-label>Search for User</mat-label>\n  <input matInput [(ngModel)]=\"search\">\n</mat-form-field>\n<mat-form-field>\n  <mat-label>Account Type</mat-label>\n  <mat-select multiple [(ngModel)]=\"accountTypes\">\n    @for (accountType of accountTypeOptions; track accountType) {\n      <mat-option [value]=\"accountType\">{{accountType}}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n\n<table mat-table [dataSource]=\"getUsers.value()?.data ?? []\" matSort matSortActive=\"netId\" matSortDisableClear matSortDirection=\"asc\">\n  <!-- NetID Column -->\n  <ng-container matColumnDef=\"netId\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>NetID</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.netId}}</td>\n  </ng-container>\n\n  <!-- First Name Column -->\n  <ng-container matColumnDef=\"preferredFirstName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredFirstName}}</td>\n  </ng-container>\n\n  <!-- Last Name Column -->\n  <ng-container matColumnDef=\"preferredLastName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredLastName}}</td>\n  </ng-container>\n\n  <!-- Roles Column -->\n  <ng-container matColumnDef=\"roles\">\n    <th mat-header-cell *matHeaderCellDef>Roles</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.roles.join(', ')}}</td>\n  </ng-container>\n\n  <!-- Account Type Column -->\n  <ng-container matColumnDef=\"accountType\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Account Type</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.accountType}}</td>\n  </ng-container>\n\n  <!-- Created Column -->\n  <ng-container matColumnDef=\"created\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>\n      Created\n    </th>\n    <td mat-cell *matCellDef=\"let user\">{{user.created | date}}</td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<mat-paginator [length]=\"getUsers.value()?.totalCount\" [pageSize]=\"pageCount()\" [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons></mat-paginator>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$1.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i3.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i6.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: UserManagementComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-user-management', imports: [MatTableModule, MatSortModule, MatPaginatorModule, DatePipe, FormsModule, MatInputModule, MatSelectModule], template: "<mat-form-field>\n  <mat-label>Search for User</mat-label>\n  <input matInput [(ngModel)]=\"search\">\n</mat-form-field>\n<mat-form-field>\n  <mat-label>Account Type</mat-label>\n  <mat-select multiple [(ngModel)]=\"accountTypes\">\n    @for (accountType of accountTypeOptions; track accountType) {\n      <mat-option [value]=\"accountType\">{{accountType}}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n\n<table mat-table [dataSource]=\"getUsers.persistentValue()?.data ?? []\" matSort matSortActive=\"netId\" matSortDisableClear matSortDirection=\"asc\">\n  <!-- NetID Column -->\n  <ng-container matColumnDef=\"netId\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>NetID</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.netId}}</td>\n  </ng-container>\n\n  <!-- First Name Column -->\n  <ng-container matColumnDef=\"preferredFirstName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredFirstName}}</td>\n  </ng-container>\n\n  <!-- Last Name Column -->\n  <ng-container matColumnDef=\"preferredLastName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredLastName}}</td>\n  </ng-container>\n\n  <!-- Roles Column -->\n  <ng-container matColumnDef=\"roles\">\n    <th mat-header-cell *matHeaderCellDef>Roles</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.roles.join(', ')}}</td>\n  </ng-container>\n\n  <!-- Account Type Column -->\n  <ng-container matColumnDef=\"accountType\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Account Type</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.accountType}}</td>\n  </ng-container>\n\n  <!-- Created Column -->\n  <ng-container matColumnDef=\"created\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>\n      Created\n    </th>\n    <td mat-cell *matCellDef=\"let user\">{{user.created | date}}</td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<mat-paginator [length]=\"getUsers.persistentValue()?.totalCount\" [pageSize]=\"pageCount()\" [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons></mat-paginator>\n" }]
+            args: [{ selector: 'app-user-management', imports: [MatTableModule, MatSortModule, MatPaginatorModule, DatePipe, FormsModule, MatInputModule, MatSelectModule], template: "<mat-form-field>\n  <mat-label>Search for User</mat-label>\n  <input matInput [(ngModel)]=\"search\">\n</mat-form-field>\n<mat-form-field>\n  <mat-label>Account Type</mat-label>\n  <mat-select multiple [(ngModel)]=\"accountTypes\">\n    @for (accountType of accountTypeOptions; track accountType) {\n      <mat-option [value]=\"accountType\">{{accountType}}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n\n<table mat-table [dataSource]=\"getUsers.value()?.data ?? []\" matSort matSortActive=\"netId\" matSortDisableClear matSortDirection=\"asc\">\n  <!-- NetID Column -->\n  <ng-container matColumnDef=\"netId\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>NetID</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.netId}}</td>\n  </ng-container>\n\n  <!-- First Name Column -->\n  <ng-container matColumnDef=\"preferredFirstName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredFirstName}}</td>\n  </ng-container>\n\n  <!-- Last Name Column -->\n  <ng-container matColumnDef=\"preferredLastName\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.preferredLastName}}</td>\n  </ng-container>\n\n  <!-- Roles Column -->\n  <ng-container matColumnDef=\"roles\">\n    <th mat-header-cell *matHeaderCellDef>Roles</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.roles.join(', ')}}</td>\n  </ng-container>\n\n  <!-- Account Type Column -->\n  <ng-container matColumnDef=\"accountType\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>Account Type</th>\n    <td mat-cell *matCellDef=\"let user\">{{user.accountType}}</td>\n  </ng-container>\n\n  <!-- Created Column -->\n  <ng-container matColumnDef=\"created\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header>\n      Created\n    </th>\n    <td mat-cell *matCellDef=\"let user\">{{user.created | date}}</td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n</table>\n\n<mat-paginator [length]=\"getUsers.value()?.totalCount\" [pageSize]=\"pageCount()\" [pageSizeOptions]=\"[5, 10, 20]\" showFirstLastButtons></mat-paginator>\n" }]
         }], propDecorators: { paginator: [{
                 type: ViewChild,
                 args: [MatPaginator]
@@ -605,6 +627,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             args: [{ selector: 'fhss-not-found', imports: [MatButtonModule, ByuHeaderComponent, ByuFooterComponent], template: "<byu-header />\n\n<div class=\"container\">\n  <div class=\"not-found\">\n    <img src=\"/confused-duck.png\" alt=\"\" />\n    <h1>404 - Page not found</h1>\n    <p>The page you are looking for doesn't exist or it may have moved.</p>\n    <a mat-flat-button href=\"/\">Go back to home</a>\n  </div>\n</div>\n\n<byu-footer />\n", styles: [":host{height:100vh;display:flex;flex-direction:column}.container{flex:1;display:flex;align-items:center;justify-content:center}.container .not-found{text-align:center;padding-bottom:3em}\n"] }]
         }] });
 
+function trpcResource(procedure, input, options) {
+    const currentInput = computed(input);
+    const value = signal(options?.defaultValue, { equal: options?.equal });
+    const error = signal(undefined);
+    const isLoading = signal(false);
+    const resourceError = signal(undefined);
+    const injector = inject(Injector);
+    let effectRef = undefined;
+    if (options?.autoRefresh) {
+        effectRef = effect((onCleanup) => {
+            // pass abort signal to refresh on cleanup of effect
+            const controller = new AbortController();
+            onCleanup(() => controller.abort());
+            // call refresh with this abort controller
+            // refresh reads currentInput which triggers the effect
+            refresh(controller.signal, true);
+        }, { injector: options?.injector || injector });
+    }
+    const refresh = async (abortSignal, keepLoadingThroughAbort = true) => {
+        // Reset signals for a fresh request.
+        isLoading.set(true);
+        error.set(undefined);
+        resourceError.set(undefined);
+        try {
+            value.set(await procedure(currentInput(), {
+                signal: abortSignal
+            }));
+            error.set(undefined);
+        }
+        catch (err) {
+            if (isTRPCClientError(err)) {
+                // if the trpc request was aborted
+                // we check if we would like to continue loading (the next request)
+                // if so then we just leave this refresh in an undefined state
+                // else we error as usual
+                if (err.cause?.name === 'AbortError' && keepLoadingThroughAbort) {
+                    return;
+                }
+                error.set(err);
+            }
+            else if (err instanceof Error) {
+                resourceError.set(err);
+            }
+            else {
+                // Fallback for non-Error values
+                resourceError.set(new Error(String(err)));
+            }
+            value.set(options?.defaultValue);
+        }
+        isLoading.set(false);
+    };
+    return {
+        value,
+        error,
+        isLoading,
+        resourceError,
+        refresh
+    };
+}
+function debugTrpcResource(_trpcResource) {
+    return {
+        value: _trpcResource.value(),
+        error: _trpcResource.error(),
+        isLoading: _trpcResource.isLoading(),
+        resourceError: _trpcResource.resourceError(),
+    };
+}
+
 /**
  * Components
  */
@@ -613,5 +703,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AuthCallbackPage, AuthErrorPage, AuthService, ByuFooterComponent, ByuHeaderComponent, FHSS_CONFIG, ForbiddenPage, NotFoundPage, UserManagementComponent, authGuard, debounced, enumToRecord, fetchSignal, provideFhss, readMaybeSignal, roleGuardFactory };
+export { AuthCallbackPage, AuthErrorPage, AuthService, ByuFooterComponent, ByuHeaderComponent, FHSS_CONFIG, ForbiddenPage, NotFoundPage, UserManagementComponent, authGuard, debounced, debugTrpcResource, enumToRecord, fetchSignal, provideFhss, roleGuardFactory, trpcResource };
 //# sourceMappingURL=fhss-web-team-frontend-utils.mjs.map