refactor: update components to enforce required inputs (#357)

src/app/common/breadcrumb/breadcrumb.component.ts

@@ -16,7 +16,7 @@ import { Breadcrumb, BreadcrumbService } from './breadcrumb.service';
 	imports: [NgFor, NgIf, RouterLink]
 })
 export class BreadcrumbComponent {
-	@Input()
+	@Input({ required: true })
 	set homeBreadcrumb(hb: Breadcrumb) {
 		this._homeBreadcrumb = hb;
 		this.homeBreadcrumbChanged$.next(hb);

src/app/common/loading-overlay/loading-overlay.component.ts

@@ -12,12 +12,20 @@ import { NotificationComponent } from '../notification/notification.component';
 	imports: [NgIf, NotificationComponent, LoadingSpinnerComponent]
 })
 export class LoadingOverlayComponent {
-	@Input() message = 'Loading...';
-	@Input() isLoading = false;
-	@Input() isError = false;
-	@Input() errorMessage = '';
+	@Input()
+	message = 'Loading...';
 
-	@Output() readonly retry = new EventEmitter();
+	@Input()
+	isLoading = false;
+
+	@Input()
+	isError = false;
+
+	@Input()
+	errorMessage = '';
+
+	@Output()
+	readonly retry = new EventEmitter();
 
 	handleRetry() {
 		this.retry.emit(true);

src/app/common/multi-select-input/multi-select-input.component.ts

@@ -31,11 +31,13 @@ import { NgSelectModule } from '@ng-select/ng-select';
 	imports: [NgSelectModule, FormsModule]
 })
 export class MultiSelectInputComponent implements ControlValueAccessor {
-	@Input() placeholder = '';
+	@ViewChild(NgModel) model?: NgModel;
 
-	@Input() readonly = false;
+	@Input()
+	placeholder = '';
 
-	@ViewChild(NgModel) model?: NgModel;
+	@Input()
+	readonly = false;
 
 	autocompleteOpen = false;
 

src/app/common/notification/notification.component.ts

@@ -9,11 +9,18 @@ import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
 	imports: [NgIf, NgTemplateOutlet]
 })
 export class NotificationComponent {
-	@Input() notificationType: 'info' | 'success' | 'warning' | 'danger' = 'info';
-	@Input() message = '';
-	@Input() showActions = false;
-	@Input() small = false;
-
 	@ContentChild('notificationActions', { static: true }) actionTemplate: TemplateRef<any> | null =
 		null;
+
+	@Input()
+	notificationType: 'info' | 'success' | 'warning' | 'danger' = 'info';
+
+	@Input()
+	message = '';
+
+	@Input()
+	showActions = false;
+
+	@Input()
+	small = false;
 }

src/app/common/search-input/search-input.component.ts

@@ -27,9 +27,14 @@ import { debounceTime } from 'rxjs/operators';
 	imports: [FormsModule, NgIf]
 })
 export class SearchInputComponent {
-	@Input() placeholder = 'Search...';
-	@Output() readonly applySearch: EventEmitter<string> = new EventEmitter();
-	@Input() search = '';
+	@Input()
+	placeholder = 'Search...';
+
+	@Input()
+	search = '';
+
+	@Output()
+	readonly applySearch: EventEmitter<string> = new EventEmitter();
 
 	/**
 	 * If true, searches will be made on `input` events, otherwise searches will be made on `keyup` events

src/app/common/table/asy-table-data-source.ts

@@ -35,7 +35,7 @@ export class AsyTableDataSource<T> extends DataSource<T> {
 
 	constructor(
 		private loadPageFunc: LoadPageFunction<T>,
-		public storageKey: string | null = null,
+		public storageKey?: string,
 		initialSort: SortChange = {} as SortChange,
 		initialSearch = '',
 		initialFilter: any = {},

src/app/common/table/column-chooser/column-chooser.component.ts

@@ -35,7 +35,7 @@ export class ColumnChooserComponent implements OnInit {
 	_defaultColumns: ColumnDefinition[] = [];
 
 	@Input()
-	storageKey: string | null;
+	storageKey?: string;
 
 	@Input()
 	sortingDisabled = false;

src/app/common/table/filter/asy-filter.directive.ts

@@ -24,7 +24,7 @@ export class AsyFilterDirective {
 
 	filters = new Map<string, any>();
 
-	@Input()
+	@Input({ required: true })
 	dataSource: AsyTableDataSource<any>;
 
 	/**

src/app/common/table/filter/asy-header-list-filter/asy-header-list-filter.component.ts

@@ -49,9 +49,11 @@ export class AsyHeaderListFilterComponent extends AsyAbstractHeaderFilterCompone
 
 	matchAll = false;
 
-	@Input() showSearch = false;
+	@Input()
+	showSearch = false;
 
-	@Input() showMatch = false;
+	@Input()
+	showMatch = false;
 
 	@Input()
 	buildFilterFunc?: BuildFilterFunction;

src/app/common/table/skeleton-rows/asy-skeleton-rows.component.ts

@@ -11,7 +11,8 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 })
 export class AsySkeletonRowsComponent {
 	_rows: Array<number> = [];
-	@Input()
+
+	@Input({ required: true })
 	set rows(numRows: number) {
 		this._rows = Array(numRows).fill(0);
 	}

src/app/common/table/sort/asy-sort-header/asy-sort-header.component.ts

@@ -46,12 +46,15 @@ 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') id: string;
+	@Input('asy-sort-header')
+	id: string;
 
 	/** Overrides the sort start value of the containing AsySort for this AsySortable. */
-	@Input() start: SortDir;
+	@Input()
+	start: SortDir;
 
-	@Input() sortable = true;
+	@Input()
+	sortable = true;
 
 	private destroyRef = inject(DestroyRef);
 	private changeDetectorRef = inject(ChangeDetectorRef);

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

@@ -60,7 +60,7 @@ export class ListCacheEntriesComponent implements OnDestroy, OnInit {
 
 	dataSource = new AsyTableDataSource<CacheEntry>(
 		(request) => this.loadData(request.pagingOptions, request.search, request.filter),
-		null,
+		undefined,
 		{
 			sortField: 'ts',
 			sortDir: SortDirection.desc

src/app/core/audit/audit-object.component.ts

@@ -10,7 +10,8 @@ import { AuditObjectTypes } from './audit.classes';
 	imports: [JsonPipe]
 })
 export class DefaultAuditObjectComponent {
-	@Input() auditObject: any = {};
+	@Input()
+	auditObject: any = {};
 }
 AuditObjectTypes.registerType('default', DefaultAuditObjectComponent);
 
@@ -57,8 +58,11 @@ AuditObjectTypes.registerType('export', ExportAuditObjectComponent);
 export class AuditObjectComponent implements OnInit {
 	@ViewChild('content', { read: ViewContainerRef, static: true }) content?: ViewContainerRef;
 
-	@Input() auditObject: any = {};
-	@Input() auditType = '';
+	@Input()
+	auditObject: any = {};
+
+	@Input()
+	auditType = '';
 
 	ngOnInit() {
 		if (!AuditObjectTypes.objects.hasOwnProperty(this.auditType)) {

src/app/core/auth/directives/has-every-role.directive.ts

@@ -26,7 +26,7 @@ export class HasEveryRoleDirective implements OnInit {
 	private sessionService = inject(SessionService);
 	private authorizationService = inject(AuthorizationService);
 
-	@Input()
+	@Input({ required: true })
 	set hasEveryRole(roles: Array<string | Role>) {
 		this.roles = roles;
 		this.updateNgIf();

src/app/core/auth/directives/has-role.directive.ts

@@ -26,7 +26,7 @@ export class HasRoleDirective implements OnInit {
 	private sessionService = inject(SessionService);
 	private authorizationService = inject(AuthorizationService);
 
-	@Input()
+	@Input({ required: true })
 	set hasRole(role: string | Role) {
 		this.role = role;
 		this.updateNgIf();

src/app/core/auth/directives/has-some-roles.directive.ts

@@ -26,7 +26,7 @@ export class HasSomeRolesDirective implements OnInit {
 	private sessionService = inject(SessionService);
 	private authorizationService = inject(AuthorizationService);
 
-	@Input()
+	@Input({ required: true })
 	set hasSomeRoles(roles: Array<string | Role>) {
 		this.roles = roles;
 		this.updateNgIf();

src/app/core/help/help-topic.component.ts

@@ -38,7 +38,7 @@ export class HelpTopicComponent {
 
 	helpTopics = getHelpTopicsMap();
 
-	@Input()
+	@Input({ required: true })
 	set key(key: string) {
 		if (this.componentRef) {
 			this.componentRef.destroy();

src/app/core/teams/directives/has-some-team-roles.directive.ts

@@ -30,7 +30,7 @@ export class HasSomeTeamRolesDirective implements OnInit {
 	private authorizationService = inject(AuthorizationService);
 	private teamAuthorizationService = inject(TeamAuthorizationService);
 
-	@Input()
+	@Input({ required: true })
 	set hasSomeTeamRoles(team: Pick<Team, '_id'>) {
 		this.team = team;
 		this.updateNgIf();

src/app/core/teams/directives/has-team-role.directive.ts

@@ -30,7 +30,7 @@ export class HasTeamRoleDirective implements OnInit {
 	private authorizationService = inject(AuthorizationService);
 	private teamAuthorizationService = inject(TeamAuthorizationService);
 
-	@Input()
+	@Input({ required: true })
 	set hasTeamRole(team: Pick<Team, '_id'>) {
 		this.team = team;
 		this.updateNgIf();

src/app/core/teams/list-team-members/list-team-members.component.ts

@@ -85,7 +85,7 @@ export class ListTeamMembersComponent implements OnChanges, OnDestroy, OnInit {
 	@ViewChild(AsyFilterDirective)
 	filter: AsyFilterDirective;
 
-	@Input()
+	@Input({ required: true })
 	team!: Team;
 
 	isUserAdmin = false;
@@ -111,7 +111,7 @@ export class ListTeamMembersComponent implements OnChanges, OnDestroy, OnInit {
 
 	dataSource = new AsyTableDataSource<TeamMember>(
 		(request) => this.loadData(request.pagingOptions, request.search, request.filter),
-		null,
+		undefined,
 		{
 			sortField: 'name',
 			sortDir: SortDirection.asc
@@ -127,9 +127,6 @@ export class ListTeamMembersComponent implements OnChanges, OnDestroy, OnInit {
 	private alertService = inject(SystemAlertService);
 
 	ngOnInit() {
-		if (!this.team) {
-			throw new TypeError(`'Team' is required`);
-		}
 		this.alertService.clearAllAlerts();
 
 		this.sessionService

src/app/core/teams/view-team/general-details/general-details.component.ts

@@ -41,8 +41,8 @@ import { TeamsService } from '../../teams.service';
 	]
 })
 export class GeneralDetailsComponent implements OnInit {
-	@Input()
-	team?: Team;
+	@Input({ required: true })
+	team!: Team;
 
 	_team: Team;
 

src/app/core/teams/view-team/view-team.component.ts

@@ -31,8 +31,8 @@ import { TeamsService } from '../teams.service';
 export class ViewTeamComponent {
 	topics = getTeamTopics();
 
-	@Input()
-	team?: Team;
+	@Input({ required: true })
+	team!: Team;
 
 	private destroyRef = inject(DestroyRef);
 	private dialogService = inject(DialogService);