@tuki-io/tuki-widgets 0.0.219-dev.0 → 0.0.220

package/projects/tuki/widgets/user-creation/src/widgets/user-creation-wizard/components/user-details-step/user-details-step.component.ts

@@ -1,657 +0,0 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
-import {
-    AbstractControl,
-    AsyncValidatorFn,
-    FormArray,
-    FormBuilder,
-    FormGroup,
-    ValidationErrors,
-    ValidatorFn,
-    Validators,
-} from '@angular/forms';
-import { PageEvent } from '@angular/material/paginator';
-import {
-    catchError,
-    debounceTime,
-    finalize,
-    map,
-    Observable,
-    of,
-    startWith,
-    Subject,
-    switchMap,
-    take,
-    takeUntil,
-    tap,
-    timer,
-} from 'rxjs';
-import {
-    LdapQueryType,
-    LdapUsersTableResponse,
-    ListUserInterface,
-    UserDetailsFormValue,
-} from '../../../../interfaces/user-creation-wizard.interfaces';
-import { UserCreationApiService } from '../../../../shared/services/user-creation-api.service';
-import { deviceNameValidator } from '../../../../utils/device-name-validation';
-import { UserCreationWizardService } from '../../user-creation-wizard.service';
-
-const LDAP_PAGE_SIZE = 10;
-
-@Component({
-    selector: 'tk-user-details-step',
-    templateUrl: './user-details-step.component.html',
-    styleUrls: ['./user-details-step.component.scss'],
-})
-export class UserDetailsStepComponent implements OnInit, OnDestroy {
-    @Output() validityChange = new EventEmitter<boolean>();
-
-    userDetailsForm: FormGroup;
-    ldapSearchForm: FormGroup;
-
-    userIdCheckPending = false;
-    loadingAvailableNumbers = false;
-    ldapLoading = false;
-    ldapSearchAttempted = false;
-
-    readonly ldapPageSize = LDAP_PAGE_SIZE;
-    ldapPageIndex = 0;
-
-    readonly ldapQueryTypeOptions: { label: string; value: LdapQueryType }[] = [
-        { label: 'User ID', value: 'userId' },
-        { label: 'First Name', value: 'firstName' },
-        { label: 'Last Name', value: 'lastName' },
-    ];
-
-    filteredAvailableNumbersByLine: string[][] = [];
-    filteredRoutePartitionsByLine: string[][] = [];
-
-    private readonly destroy$ = new Subject<void>();
-    private readonly userIdAsyncValidator = this.createUserIdAsyncValidator();
-
-    get linesFormArray(): FormArray {
-        return this.userDetailsForm.get('lines') as FormArray;
-    }
-
-    get devicesFormArray(): FormArray {
-        return this.userDetailsForm.get('devices') as FormArray;
-    }
-
-    get deviceProfilesFormArray(): FormArray {
-        return this.userDetailsForm.get('deviceProfiles') as FormArray;
-    }
-
-    get selectedLdapUser(): ListUserInterface | null {
-        return this.userCreationWizardService.selectedLdapUser;
-    }
-
-    get ldapTotalCount(): number {
-        return this.userCreationWizardService.ldapUsersTotal;
-    }
-
-    get hasLdapUsers(): boolean {
-        return this.userCreationWizardService.ldapUsers.length > 0;
-    }
-
-    constructor(
-        private readonly fb: FormBuilder,
-        private readonly userCreationApiService: UserCreationApiService,
-        public readonly userCreationWizardService: UserCreationWizardService
-    ) {
-        this.ldapSearchForm = this.fb.group({
-            queryValue: [''],
-            queryType: ['userId' as LdapQueryType],
-        });
-
-        this.userDetailsForm = this.fb.group({
-            userId: ['', [Validators.required], [this.userIdAsyncValidator]],
-            firstName: ['', Validators.required],
-            lastName: ['', Validators.required],
-            email: ['', [Validators.required, Validators.email]],
-            lines: this.fb.array([]),
-            devices: this.fb.array([]),
-            deviceProfiles: this.fb.array([]),
-        });
-    }
-
-    ngOnInit(): void {
-        const savedFormValue = this.userCreationWizardService.userDetailsFormValue;
-        const isRestoringPreviousEntry = !!savedFormValue;
-
-        if (!isRestoringPreviousEntry) {
-            this.resetLdapSearchForm();
-        }
-
-        this.buildDynamicFormArrays(savedFormValue);
-        if (isRestoringPreviousEntry) {
-            this.patchUserFieldsFromSavedValue(savedFormValue);
-        } else {
-            this.patchUserFieldsFromService();
-        }
-
-        this.initLineFilters();
-        this.setupFormSync();
-        this.setupValidityEmitter();
-        this.fetchInitialAvailableNumbers();
-
-        if (!isRestoringPreviousEntry) {
-            this.userCreationWizardService.applyUserDetailsFormValue(this.userDetailsForm.getRawValue());
-        }
-
-        this.applyDeviceNameValidators();
-
-        this.userCreationWizardService.deviceDefaultsLoaded$
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(() => {
-                this.applyDeviceNameValidators();
-                this.emitValidity();
-            });
-
-        if (this.userCreationWizardService.isLdapIntegrated && this.selectedLdapUser) {
-            this.applyLdapIntegratedFormState();
-        }
-
-        this.emitValidity();
-    }
-
-    ngOnDestroy(): void {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-
-    isStepValid(): boolean {
-        return this.userDetailsForm.valid && !this.userIdCheckPending;
-    }
-
-    markAllAsTouched(): void {
-        this.userDetailsForm.markAllAsTouched();
-        this.emitValidity();
-    }
-
-    syncToService(): void {
-        this.userCreationWizardService.applyUserDetailsFormValue(this.userDetailsForm.getRawValue());
-    }
-
-    getLineGroup(index: number): FormGroup {
-        return this.linesFormArray.at(index) as FormGroup;
-    }
-
-    getDeviceGroup(index: number): FormGroup {
-        return this.devicesFormArray.at(index) as FormGroup;
-    }
-
-    getDeviceProfileGroup(index: number): FormGroup {
-        return this.deviceProfilesFormArray.at(index) as FormGroup;
-    }
-
-    getDeviceNamePrefix(index: number): string | null {
-        return this.userCreationWizardService.getDeviceNamePrefix(index, false);
-    }
-
-    getDeviceProfileNamePrefix(index: number): string | null {
-        return this.userCreationWizardService.getDeviceNamePrefix(index, true);
-    }
-
-    getDeviceNameValidationCaption(index: number): string {
-        return this.userCreationWizardService.getDeviceNameValidationCaption(index, false);
-    }
-
-    getDeviceProfileNameValidationCaption(index: number): string {
-        return this.userCreationWizardService.getDeviceNameValidationCaption(index, true);
-    }
-
-    getFilteredNumbers(lineIndex: number): string[] {
-        return this.filteredAvailableNumbersByLine[lineIndex] ?? [];
-    }
-
-    getFilteredRoutePartitions(lineIndex: number): string[] {
-        return this.filteredRoutePartitionsByLine[lineIndex] ?? [];
-    }
-
-    filterAvailableNumbers(lineIndex: number, event: Event): void {
-        const raw = (event.target as HTMLInputElement | null)?.value || '';
-        this.applyNumberFilter(lineIndex, raw);
-    }
-
-    filterRoutePartitions(lineIndex: number, event: Event): void {
-        const raw = (event.target as HTMLInputElement | null)?.value || '';
-        this.applyRoutePartitionFilter(lineIndex, raw);
-    }
-
-    onRoutePartitionSelected(lineIndex: number, routePartition: string): void {
-        const lineGroup = this.linesFormArray.at(lineIndex) as FormGroup;
-        lineGroup.get('routePartition')?.setValue(routePartition, { emitEvent: false });
-        lineGroup.get('number')?.setValue('');
-        this.applyRoutePartitionFilter(lineIndex, routePartition);
-        this.loadAvailableNumbersForLine(lineIndex, routePartition);
-    }
-
-    onNumberSelected(lineIndex: number, number: string): void {
-        const lineGroup = this.linesFormArray.at(lineIndex) as FormGroup;
-        const displayNumber = this.extractDirectoryNumber(number);
-        lineGroup.get('number')?.setValue(displayNumber, { emitEvent: true });
-    }
-
-    searchLdapUsers(pageIndex = 0): void {
-        const queryValue = String(this.ldapSearchForm.get('queryValue')?.value).trim() || undefined;
-        const siteId = this.userCreationWizardService.selectedSite;
-
-        if (!siteId) {
-            this.userCreationWizardService.setLdapUsersResult([], 0);
-            this.ldapPageIndex = 0;
-            this.ldapSearchAttempted = false;
-            return;
-        }
-
-        this.ldapPageIndex = pageIndex;
-        const queryType = this.ldapSearchForm.get('queryType')?.value as LdapQueryType;
-
-        const params = {
-            size: String(LDAP_PAGE_SIZE),
-            page: String(pageIndex),
-            deviceless: 'true',
-            querytype: queryType,
-            withEmailOnly: 'true',
-            queryvalue: queryValue,
-        };
-
-        this.ldapLoading = true;
-        this.userCreationApiService
-            .getLdapUsers(String(siteId), params)
-            .pipe(
-                take(1),
-                map((res: LdapUsersTableResponse) => ({
-                    users: res?.pageData ?? [],
-                    total: res?.total ?? 0,
-                })),
-                catchError(() => of({ users: [], total: 0 })),
-                finalize(() => {
-                    this.ldapLoading = false;
-                })
-            )
-            .subscribe(({ users, total }) => {
-                this.ldapSearchAttempted = true;
-                this.userCreationWizardService.setLdapUsersResult(users, total);
-            });
-    }
-
-    onLdapPageChange(event: PageEvent): void {
-        this.searchLdapUsers(event.pageIndex);
-    }
-
-    onAddLdapUser(row: ListUserInterface): void {
-        this.userCreationWizardService.selectLdapUser(row);
-        this.userDetailsForm.patchValue({
-            userId: row.userid,
-            firstName: row.firstName ?? '',
-            lastName: row.lastName ?? '',
-            email: row.email ?? '',
-        });
-        this.applyLdapIntegratedFormState();
-        this.emitValidity();
-    }
-
-    onDeleteLdapUser(row: ListUserInterface): void {
-        if (!this.userCreationWizardService.isLdapUserRowSelected(row)) {
-            return;
-        }
-        this.clearLdapSelection();
-    }
-
-    onRemoveLdapTag(): void {
-        this.clearLdapSelection();
-    }
-
-    isLdapUserRowSelected(row: ListUserInterface): boolean {
-        return this.userCreationWizardService.isLdapUserRowSelected(row);
-    }
-
-    private clearLdapSelection(): void {
-        this.userCreationWizardService.clearLdapUserSelection();
-        this.userDetailsForm.patchValue({
-            userId: '',
-            firstName: '',
-            lastName: '',
-            email: '',
-        });
-        this.restoreManualEntryFormState();
-        this.emitValidity();
-    }
-
-    private applyLdapIntegratedFormState(): void {
-        this.setUserIdentityFieldsReadonly(true);
-        this.toggleUserIdAsyncValidator(false);
-        this.userDetailsForm.get('userId')?.updateValueAndValidity({ emitEvent: false });
-    }
-
-    private restoreManualEntryFormState(): void {
-        this.setUserIdentityFieldsReadonly(false);
-        this.toggleUserIdAsyncValidator(true);
-        this.userDetailsForm.get('userId')?.updateValueAndValidity();
-    }
-
-    private setUserIdentityFieldsReadonly(readonly: boolean): void {
-        ['userId', 'firstName', 'lastName', 'email'].forEach(fieldName => {
-            const control = this.userDetailsForm.get(fieldName);
-            if (!control) {
-                return;
-            }
-            if (readonly) {
-                control.disable({ emitEvent: false });
-            } else {
-                control.enable({ emitEvent: false });
-            }
-        });
-    }
-
-    private toggleUserIdAsyncValidator(enabled: boolean): void {
-        const control = this.userDetailsForm.get('userId');
-        if (!control) {
-            return;
-        }
-        if (enabled) {
-            control.setAsyncValidators([this.userIdAsyncValidator]);
-        } else {
-            control.clearAsyncValidators();
-        }
-        control.updateValueAndValidity({ emitEvent: false });
-    }
-
-    private setupValidityEmitter(): void {
-        this.userDetailsForm.statusChanges
-            .pipe(startWith(this.userDetailsForm.status), takeUntil(this.destroy$))
-            .subscribe(() => this.emitValidity());
-    }
-
-    private emitValidity(): void {
-        this.validityChange.emit(this.isStepValid());
-    }
-
-    private buildDynamicFormArrays(savedFormValue?: UserDetailsFormValue | null): void {
-        const service = this.userCreationWizardService;
-        const linesArray = this.linesFormArray;
-        const devicesArray = this.devicesFormArray;
-        const profilesArray = this.deviceProfilesFormArray;
-
-        while (linesArray.length) {
-            linesArray.removeAt(0);
-        }
-        while (devicesArray.length) {
-            devicesArray.removeAt(0);
-        }
-        while (profilesArray.length) {
-            profilesArray.removeAt(0);
-        }
-
-        service.lines.forEach((line, index) => {
-            const savedLine = savedFormValue?.lines?.[index];
-            const lineGroup = this.fb.group({
-                lineNumber: [
-                    {
-                        value: line.directoryNumber?.templateDirectoryNumber || '',
-                        disabled: true,
-                    },
-                ],
-                number: [
-                    savedLine?.number ?? line.directoryNumber?.directoryNumber ?? '',
-                    Validators.required,
-                ],
-                routePartition: [
-                    savedLine?.routePartition ?? line.directoryNumber?.routePartitionName ?? '',
-                    Validators.required,
-                ],
-            });
-            linesArray.push(lineGroup);
-            this.setupLineListeners(index, lineGroup);
-        });
-
-        service.devices.forEach((device, index) => {
-            const savedDevice = savedFormValue?.devices?.[index];
-            devicesArray.push(
-                this.fb.group({
-                    deviceType: [{ value: device.deviceType || '', disabled: true }],
-                    protocol: [{ value: device.protocol || '', disabled: true }],
-                    buttonTemplate: [{ value: device.buttonTemplate || '', disabled: true }],
-                    name: [
-                        savedDevice?.name ?? device.name ?? '',
-                        this.buildDeviceNameValidators(index, false),
-                    ],
-                })
-            );
-        });
-
-        service.deviceProfiles.forEach((profile, index) => {
-            const savedProfile = savedFormValue?.deviceProfiles?.[index];
-            profilesArray.push(
-                this.fb.group({
-                    deviceType: [{ value: profile.deviceType || '', disabled: true }],
-                    protocol: [{ value: profile.protocol || '', disabled: true }],
-                    buttonTemplate: [{ value: profile.buttonTemplate || '', disabled: true }],
-                    name: [
-                        savedProfile?.name ?? profile.name ?? '',
-                        this.buildDeviceNameValidators(index, true),
-                    ],
-                })
-            );
-        });
-    }
-
-    private buildDeviceNameValidators(deviceIndex: number, isProfile: boolean): ValidatorFn[] {
-        const validators: ValidatorFn[] = isProfile ? [] : [Validators.required];
-        const options = this.userCreationWizardService.getDeviceNameValidationOptions(
-            deviceIndex,
-            isProfile
-        );
-        if (options) {
-            validators.push(deviceNameValidator(options));
-        }
-        return validators;
-    }
-
-    private applyDeviceNameValidators(): void {
-        this.devicesFormArray.controls.forEach((_, index) => {
-            const nameControl = this.getDeviceGroup(index).get('name');
-            nameControl?.setValidators(this.buildDeviceNameValidators(index, false));
-            nameControl?.updateValueAndValidity({ emitEvent: false });
-        });
-
-        this.deviceProfilesFormArray.controls.forEach((_, index) => {
-            const nameControl = this.getDeviceProfileGroup(index).get('name');
-            nameControl?.setValidators(this.buildDeviceNameValidators(index, true));
-            nameControl?.updateValueAndValidity({ emitEvent: false });
-        });
-    }
-
-    private resetLdapSearchForm(): void {
-        this.ldapSearchForm.reset({
-            queryValue: '',
-            queryType: 'userId' as LdapQueryType,
-        });
-        this.ldapSearchAttempted = false;
-        this.ldapPageIndex = 0;
-        this.userIdCheckPending = false;
-    }
-
-    private patchUserFieldsFromSavedValue(saved: UserDetailsFormValue): void {
-        this.userDetailsForm.patchValue({
-            userId: saved.userId || '',
-            firstName: saved.firstName || '',
-            lastName: saved.lastName || '',
-            email: saved.email || '',
-        });
-    }
-
-    private patchUserFieldsFromService(): void {
-        const service = this.userCreationWizardService;
-        const endUser = service.endUser;
-        this.userDetailsForm.patchValue({
-            userId: endUser?.userid || service.userDetailsForm.userId || '',
-            firstName: endUser?.firstName || service.userDetailsForm.firstName || '',
-            lastName: endUser?.lastName || service.userDetailsForm.lastName || '',
-            email: endUser?.email || service.userDetailsForm.email || '',
-        });
-        this.userDetailsForm.markAsPristine();
-        this.userDetailsForm.markAsUntouched();
-    }
-
-    private setupLineListeners(lineIndex: number, lineGroup: FormGroup): void {
-        lineGroup
-            .get('routePartition')
-            ?.valueChanges.pipe(debounceTime(300), takeUntil(this.destroy$))
-            .subscribe(value => {
-                this.applyRoutePartitionFilter(lineIndex, String(value ?? ''));
-            });
-
-        lineGroup
-            .get('number')
-            ?.valueChanges.pipe(debounceTime(150), takeUntil(this.destroy$))
-            .subscribe(value => {
-                this.applyNumberFilter(lineIndex, String(value ?? ''));
-            });
-    }
-
-    private initLineFilters(): void {
-        const partitions = this.userCreationWizardService.routePartitionOptions;
-        const numbers = this.userCreationWizardService.availableNumbers;
-        this.filteredRoutePartitionsByLine = this.linesFormArray.controls.map((_, index) => {
-            const current = String(
-                (this.linesFormArray.at(index) as FormGroup).get('routePartition')?.value ?? ''
-            );
-            return this.filterOptions(partitions, current);
-        });
-        this.filteredAvailableNumbersByLine = this.linesFormArray.controls.map((_, index) => {
-            const current = String((this.linesFormArray.at(index) as FormGroup).get('number')?.value ?? '');
-            return this.filterOptions(numbers, current);
-        });
-    }
-
-    private setupFormSync(): void {
-        this.userDetailsForm.valueChanges
-            .pipe(debounceTime(200), takeUntil(this.destroy$))
-            .subscribe(() => {
-                this.userCreationWizardService.applyUserDetailsFormValue(
-                    this.userDetailsForm.getRawValue()
-                );
-            });
-    }
-
-    private fetchInitialAvailableNumbers(): void {
-        const firstPartition =
-            this.linesFormArray.length > 0
-                ? String((this.linesFormArray.at(0) as FormGroup).get('routePartition')?.value ?? '').trim()
-                : this.userCreationWizardService.firstLineRoutePartition ||
-                  this.userCreationWizardService.siteDefaultRoutePartition ||
-                  '';
-
-        if (firstPartition) {
-            this.loadAvailableNumbersForLine(0, firstPartition, false);
-        }
-    }
-
-    private loadAvailableNumbersForLine(
-        lineIndex: number,
-        routePartition: string,
-        clearNumber = true
-    ): void {
-        const siteId = this.userCreationWizardService.selectedSite;
-        if (!siteId || !routePartition.trim()) {
-            return;
-        }
-
-        if (clearNumber) {
-            (this.linesFormArray.at(lineIndex) as FormGroup).get('number')?.setValue('');
-        }
-
-        this.loadingAvailableNumbers = true;
-        this.userCreationWizardService
-            .getNumberRange(String(siteId), routePartition)
-            .pipe(
-                take(1),
-                catchError(() => of(null)),
-                finalize(() => {
-                    this.loadingAvailableNumbers = false;
-                    this.refreshNumberFilters();
-                })
-            )
-            .subscribe();
-    }
-
-    private refreshNumberFilters(): void {
-        const numbers = this.userCreationWizardService.availableNumbers;
-        this.filteredAvailableNumbersByLine = this.linesFormArray.controls.map((_, index) => {
-            const current = String((this.linesFormArray.at(index) as FormGroup).get('number')?.value ?? '');
-            return this.filterOptions(numbers, current);
-        });
-    }
-
-    private applyNumberFilter(lineIndex: number, raw: string): void {
-        const value = raw.trim().toLowerCase();
-        const source = this.userCreationWizardService.availableNumbers || [];
-        this.filteredAvailableNumbersByLine[lineIndex] = value.length
-            ? source.filter(n => !!n && n.toLowerCase().includes(value))
-            : [...source];
-    }
-
-    private applyRoutePartitionFilter(lineIndex: number, raw: string): void {
-        const value = raw.trim().toLowerCase();
-        const source = this.userCreationWizardService.routePartitionOptions || [];
-        this.filteredRoutePartitionsByLine[lineIndex] = value.length
-            ? source.filter(n => !!n && n.toLowerCase().includes(value))
-            : [...source];
-    }
-
-    private filterOptions(source: string[], raw: string): string[] {
-        const value = raw.trim().toLowerCase();
-        if (!value.length) {
-            return [...source];
-        }
-        return source.filter(item => !!item && item.toLowerCase().includes(value));
-    }
-
-    private extractDirectoryNumber(value: string): string {
-        const trimmed = value.trim();
-        const spaceIndex = trimmed.indexOf(' ');
-        return spaceIndex > -1 ? trimmed.substring(0, spaceIndex) : trimmed;
-    }
-
-    private createUserIdAsyncValidator(): AsyncValidatorFn {
-        return (control: AbstractControl): Observable<ValidationErrors | null> => {
-            if (this.userCreationWizardService.isLdapIntegrated) {
-                this.userIdCheckPending = false;
-                return of(null);
-            }
-
-            const userId = String(control.value ?? '').trim();
-            const siteId = this.userCreationWizardService.selectedSite;
-            if (!userId || !siteId) {
-                this.userIdCheckPending = false;
-                this.emitValidity();
-                return of(null);
-            }
-
-            this.userIdCheckPending = true;
-            this.emitValidity();
-
-            return timer(500).pipe(
-                switchMap(() =>
-                    this.userCreationApiService
-                        .checkUserIdExisting(
-                            String(siteId),
-                            encodeURIComponent(encodeURIComponent(userId))
-                        )
-                        .pipe(
-                            map(() => ({ userIdExists: true })),
-                            catchError(() => of(null))
-                        )
-                ),
-                tap(() => {
-                    this.userIdCheckPending = false;
-                    this.emitValidity();
-                }),
-                finalize(() => {
-                    this.userIdCheckPending = false;
-                    this.emitValidity();
-                })
-            );
-        };
-    }
-}