feat: Added user search component. Resolves #15

src/app/app.module.ts

@@ -85,6 +85,7 @@ import { OutboxComponent } from './admin-view/notifications/outbox/outbox.compon
 import { ToolbarComponent } from './admin-view/toolbar/toolbar.component';
 import { MessageComponent } from './admin-view/notifications/outbox/message/message.component';
 import { NotifDialogComponent } from './app-view/notif-dialog/notif-dialog.component';
+import { UserSearchComponent } from './commonComponents/user-search/user-search.component';
 import { StartAdminComponent } from './admin-view/start/start.component';
 
 @NgModule({
@@ -135,6 +136,7 @@ import { StartAdminComponent } from './admin-view/start/start.component';
     ToolbarComponent,
     MessageComponent,
     NotifDialogComponent,
+    UserSearchComponent,
     StartAdminComponent,
   ],
   imports: [

src/app/commonComponents/user-search/user-search.component.html

@@ -0,0 +1,16 @@
+<mat-form-field>
+    <mat-label *ngIf="label">{{label}}</mat-label>
+    <input matInput type="text" [matAutocomplete]="ac" [formControl]="control" #inputComponent>
+</mat-form-field>
+<mat-spinner color="accent" diameter="32" *ngIf="loading"></mat-spinner>
+<mat-autocomplete #ac="matAutocomplete" autoActiveFirstOption (optionSelected)="saveValue($event)" [displayWith]="displayFn">
+    @for (item of list; track $index) {
+        <mat-option [value]="item">
+            @if (item.fname) {
+                {{item.fname}} {{item.surname}} <span *ngIf="item.room" class="room">({{item.room}})</span>
+            } @else {
+                {{item.uname}}
+            }
+        </mat-option>
+    }
+</mat-autocomplete>

src/app/commonComponents/user-search/user-search.component.scss

@@ -0,0 +1,9 @@
+:host {
+    display: flex;
+    align-items: center;
+    gap: 1ch;
+}
+
+.room {
+    color: gray;
+}

src/app/commonComponents/user-search/user-search.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserSearchComponent } from './user-search.component';
+
+describe('UserSearchComponent', () => {
+  let component: UserSearchComponent;
+  let fixture: ComponentFixture<UserSearchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [UserSearchComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(UserSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/commonComponents/user-search/user-search.component.ts

@@ -0,0 +1,76 @@
+import { Component, EventEmitter, forwardRef, Input, Output, ViewChild } from '@angular/core';
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatInput } from '@angular/material/input';
+import { AdminCommService } from 'src/app/admin-view/admin-comm.service';
+
+interface UserSearchResult {
+  _id: string;
+  fname: string;
+  surname: string;
+  uname: string;
+  room: string;
+}
+
+@Component({
+  selector: 'app-user-search',
+  templateUrl: './user-search.component.html',
+  styleUrl: './user-search.component.scss',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => UserSearchComponent),
+      multi: true
+    }
+  ],
+  host: {
+    '(blur)': '_onTouched()'
+  }
+})
+export class UserSearchComponent implements ControlValueAccessor {
+  protected loading: boolean = false
+  @Input() label?: boolean
+  control: FormControl = new FormControl();
+  protected list: UserSearchResult[] = []
+  private timeout?: NodeJS.Timeout
+  private _onChange!: (_: UserSearchResult) => void
+  private _onTouched!: any
+
+  constructor(readonly acu: AdminCommService) {
+    this.control.valueChanges.subscribe(() => {
+      this.loading = true
+      if (this.timeout) clearTimeout(this.timeout)
+      this.timeout = setTimeout(() => {
+        this.acu.userFilter(this.control.value).subscribe(v => {
+          this.list = v
+          this.loading = false
+        })
+      }, 500)
+    })
+  }
+
+  writeValue(obj: string): void {
+    this.control.setValue(obj)
+  }
+
+  registerOnChange(fn: (_: UserSearchResult) => void): void {
+    this._onChange = fn
+  }
+
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    isDisabled ? this.control.disable() : this.control.enable()
+  }
+
+  protected displayFn(u: UserSearchResult): string {
+    if (!u) return ''
+    return u.fname ? `${u.fname} ${u.surname}` : u.uname
+  }
+
+  protected saveValue(e: MatAutocompleteSelectedEvent) {
+    this._onChange(this.control.value)
+  }
+}