slasherss/ipwa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added user search to various components

Browse Source
This commit is contained in:
Jan Szumotalski
2025-06-01 17:44:48 +02:00
parent 94702834b4
commit ca6037d405
9 changed files with 171 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/admin-view/key/key.component.html
View File

@@ -8,7 +8,7 @@
</mat-chip-listbox>
<button mat-icon-button (click)="new()"><mat-icon>add</mat-icon></button>
</div>
<mat-spinner *ngIf="loading"></mat-spinner>
<mat-spinner *ngIf="loading" color="accent"></mat-spinner>
<table mat-table [dataSource]="keys">
<div matColumnDef="room">
<th mat-header-cell *matHeaderCellDef>Sala</th>

14
src/app/admin-view/key/new-key/new-key.component.html
View File

@@ -1,6 +1,6 @@
<mat-dialog-content>
<form (ngSubmit)="send()" [formGroup]="form">
<mat-form-field>
<mat-form-field color="accent">
<mat-label>Sala</mat-label>
<mat-select formControlName="room" required>
@for (item of rooms; track $index) {
@@ -9,17 +9,9 @@
</mat-select>
<mat-error *ngIf="form.controls['room'].hasError('required')">Wymagane</mat-error>
</mat-form-field>
<mat-form-field>
<mat-form-field color="accent">
<mat-label>Wypożyczający</mat-label>
<!-- TODO: Add user selector -->
<input matInput placeholder="Nazwa użytkownika" formControlName="user" required>
<!-- <input #input matInput placeholder="Nazwa użytkownika" formControlName="user" required [matAutocomplete]="auto" (input)="filter()">
<mat-autocomplete requireSelection #auto="matAutocomplete">
@for (item of unames; track item) {
<mat-option [value]="item">{{item}}</mat-option>
}
</mat-autocomplete> -->
<mat-error *ngIf="form.controls['user'].hasError('unf')">Zła nazwa użytkownika</mat-error>
<app-user-search formControlName="user" required/>
<mat-error *ngIf="form.controls['user'].hasError('required')">Wymagane</mat-error>
</mat-form-field>
<button mat-button>Wyślij</button>

22
src/app/admin-view/key/new-key/new-key.component.ts
View File

@@ -1,8 +1,8 @@
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import { AdminCommService } from '../../admin-comm.service';
import { MatDialogRef } from '@angular/material/dialog';
import { FormControl, FormGroup } from '@angular/forms';
import { startWith } from 'rxjs';
import { UserSearchResult } from 'src/app/commonComponents/user-search/user-search.component';
@Component({
selector: 'app-new-key',
@@ -10,11 +10,10 @@ import { startWith } from 'rxjs';
styleUrl: './new-key.component.scss'
})
export class NewKeyComponent implements OnInit {
// @ViewChild('input') input!: ElementRef<HTMLInputElement>
rooms: string[] = []
form = new FormGroup({
room: new FormControl<string>(""),
user: new FormControl<string>("")
user: new FormControl<UserSearchResult | null>(null)
})
unames: any[] = []
constructor ( private ac: AdminCommService, public dialogRef: MatDialogRef<NewKeyComponent> ) {}
@@ -25,24 +24,9 @@ export class NewKeyComponent implements OnInit {
})
}
// filter() {
// const v = this.input.nativeElement.value
// console.log(v);
// if (v) {
// this.ac.userFilter(v.toLowerCase()).subscribe((v) => {
// this.unames = v
// })
// } else {
// this.unames = []
// }
// }
send() {
if (this.form.valid) {
this.dialogRef.close(this.form.value)
} else {
this.form.controls['user'].setErrors({unf: true})
}
}

6
src/app/admin-view/notifications/notifications.component.html
View File

@@ -1,10 +1,10 @@
<form [formGroup]="form" (ngSubmit)="submit()">
<div formGroupName="recp">
<mat-radio-group formControlName="type">
<mat-radio-button value="uname">
<mat-radio-button value="uid">
<mat-form-field>
<mat-label>Nazwa użytkownika</mat-label>
<input matInput type="text" formControlName="uname">
<mat-label>Użytkownik</mat-label>
<app-user-search formControlName="uid" required/>
</mat-form-field>
</mat-radio-button>
<mat-radio-button value="room">

18
src/app/admin-view/notifications/notifications.component.ts
View File

@@ -6,6 +6,7 @@ import { Group } from 'src/app/types/group';
import { LocalStorageService } from 'src/app/services/local-storage.service';
import { ToolbarService } from '../toolbar/toolbar.service';
import { ActivatedRoute, Router } from '@angular/router';
import { UserSearchResult } from 'src/app/commonComponents/user-search/user-search.component';
@Component({
selector: 'app-notifications',
@@ -44,9 +45,9 @@ export class NotificationsComponent implements OnInit, OnDestroy {
success?: { sent: number; possible: number; };
form = new FormGroup<NotificationForm>({
form = new FormGroup({
recp: new FormGroup({
uname: new FormControl<string>(''),
uid: new FormControl<UserSearchResult | null>(null),
room: new FormControl<string|null>(null),
group: new FormControl<string>(''),
type: new FormControl<"room" | "uname" | "group">('uname', {nonNullable: true})
@@ -56,19 +57,8 @@ export class NotificationsComponent implements OnInit, OnDestroy {
})
submit() {
this.acs.notif.send(this.form.value as Notification).subscribe((data) => {
this.acs.notif.send({...this.form.value, recp: {...this.form.get("recp")?.value, uid: this.form.controls['recp'].controls['uid'].value?._id}} as Notification).subscribe((data) => {
this.success = data
})
}
}
interface NotificationForm {
body: FormControl<string>;
title: FormControl<string>;
recp: FormGroup<{
uname: FormControl<string | null>;
room: FormControl<string | null>;
group: FormControl<string | null>;
type: FormControl<"room" | "uname" | "group">;
}>
}

31
src/app/commonComponents/user-search/user-search.component.html
View File

@@ -1,16 +1,15 @@
<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>
<div role="group" class="app-user-search-container" (focusin)="onFocusIn($event)" (focusout)="onFocusOut($event)">
<input type="text" [matAutocomplete]="ac" [formControl]="control" #inputComponent class="input-element">
<mat-spinner color="accent" diameter="16" *ngIf="loading" matSuffix></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>
</div>

9
src/app/commonComponents/user-search/user-search.component.scss
View File

@@ -7,3 +7,12 @@
.room {
color: gray;
}
input {
border: none;
background: none;
padding: 0;
outline: 0;
font: inherit;
color: currentColor;
}

145
src/app/commonComponents/user-search/user-search.component.ts
View File

@@ -1,10 +1,12 @@
import { Component, EventEmitter, forwardRef, Input, Output, ViewChild } from '@angular/core';
import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
import { Component, DoCheck, ElementRef, HostBinding, Input, OnDestroy, Optional, Self } from '@angular/core';
import { ControlValueAccessor, FormControl, FormGroupDirective, NgControl, NgForm } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatInput } from '@angular/material/input';
import { MatFormFieldControl } from '@angular/material/form-field';
import { Subject } from 'rxjs';
import { AdminCommService } from 'src/app/admin-view/admin-comm.service';
interface UserSearchResult {
export interface UserSearchResult {
_id: string;
fname: string;
surname: string;
@@ -18,26 +20,120 @@ interface UserSearchResult {
styleUrl: './user-search.component.scss',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => UserSearchComponent),
multi: true
provide: MatFormFieldControl,
useExisting: UserSearchComponent
}
],
host: {
'(blur)': '_onTouched()'
}
})
export class UserSearchComponent implements ControlValueAccessor {
export class UserSearchComponent implements ControlValueAccessor, MatFormFieldControl<UserSearchResult>, OnDestroy, DoCheck {
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) {
static nextId = 0;
@Input()
public get value(): UserSearchResult | null {
return this.control.value;
}
public set value(value: UserSearchResult | null) {
this.control.setValue(value)
this.stateChanges.next()
}
touched = false
stateChanges = new Subject<void>();
@HostBinding() id: string = `app-user-search-${UserSearchComponent.nextId++}`;
private _placeholder: string = "";
@Input()
public get placeholder(): string {
return this._placeholder;
}
public set placeholder(value: string) {
this._placeholder = value;
this.stateChanges.next()
}
focused: boolean = false;
onFocusIn(event: FocusEvent) {
if (!this.focused) {
this.focused = true;
this.stateChanges.next();
}
}
onFocusOut(event: FocusEvent) {
if (!this._elementRef.nativeElement.contains(event.relatedTarget as Element)) {
this.touched = true
this.focused = false;
this._onTouched();
this.stateChanges.next();
}
}
get empty(): boolean {
return !this.control.value
}
@HostBinding('class.floating')
get shouldLabelFloat(): boolean {
return this.focused || !this.empty
}
private _required: boolean = false;
@Input()
public get required(): boolean {
return this._required;
}
public set required(value: BooleanInput) {
this._required = coerceBooleanProperty(value);
this.stateChanges.next()
}
private _disabled: boolean = false;
@Input()
public get disabled(): boolean {
return this._disabled;
}
public set disabled(value: BooleanInput) {
this._disabled = coerceBooleanProperty(value);
this._disabled ? this.control.disable() : this.control.enable()
this.stateChanges.next()
}
errorState: boolean = false
controlType?: string | undefined = "app-user-search";
autofilled?: boolean | undefined;
@Input('aria-describedby') userAriaDescribedBy?: string;
setDescribedByIds(ids: string[]): void {
const controlElement = this._elementRef.nativeElement.querySelector('.app-user-search-container')!;
controlElement.setAttribute('aria-describedby', ids.join(' '))
}
onContainerClick(event: MouseEvent): void {
if ((event.target as Element).tagName.toLowerCase() != 'input') {
this._elementRef.nativeElement.querySelector('input').focus()
}
}
constructor(
readonly acu: AdminCommService,
@Optional() @Self() public ngControl: NgControl,
@Optional() private _parentForm: NgForm,
@Optional() private _parentFormGroup: FormGroupDirective,
private _elementRef: ElementRef
) {
if (this.ngControl != null) {
(this.ngControl as NgControl).valueAccessor = this
}
this.control.valueChanges.subscribe(() => {
if (typeof this.control.value == "object") return;
this.loading = true
if (this.timeout) clearTimeout(this.timeout)
this.timeout = setTimeout(() => {
@@ -48,9 +144,28 @@ export class UserSearchComponent implements ControlValueAccessor {
}, 500)
})
}
ngDoCheck(): void {
if (this.ngControl) {
this.updateErrorState()
}
}
private updateErrorState() {
const parent = this._parentFormGroup || this._parentForm
writeValue(obj: string): void {
this.control.setValue(obj)
const oldState = this.errorState;
const newState = (this.ngControl?.invalid || this.control.invalid) && (this.touched || parent.submitted);
if (oldState !== newState) {
this.errorState = newState
this.stateChanges.next()
}
}
ngOnDestroy(): void {
this.stateChanges.complete()
}
writeValue(obj: UserSearchResult): void {
this.value = obj
}
registerOnChange(fn: (_: UserSearchResult) => void): void {
@@ -62,7 +177,7 @@ export class UserSearchComponent implements ControlValueAccessor {
}
setDisabledState?(isDisabled: boolean): void {
isDisabled ? this.control.disable() : this.control.enable()
this.disabled = isDisabled
}
protected displayFn(u: UserSearchResult): string {
@@ -71,6 +186,8 @@ export class UserSearchComponent implements ControlValueAccessor {
}
protected saveValue(e: MatAutocompleteSelectedEvent) {
this._onChange(this.control.value)
this.autofilled = true
this.value = e.option.value
this._onChange(this.value!)
}
}

2
src/app/types/notification.ts
View File

@@ -2,7 +2,7 @@ export interface Notification {
body: string;
title: string;
recp: {
uname: string | null;
uid: string | null;
room: string | null;
type: "all" | "room" | "uname"
}