rakia

  nameAlreadyExists: boolean = false;

  private notifyParentComponentWhenNameChanges(): void {
    this.form
      ?.get('name')
      ?.valueChanges.pipe(
      takeUntilDestroyed(this.destroyRef),
      debounceTime(300), // debounce user input
      distinctUntilChanged()
    )

rakia

@Component({
  selector: 'app-ecs-field',
  templateUrl: './ecs-field.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EcsFieldComponent implements OnInit, OnChanges {
  private storeService = inject(EcsFieldsStoreService);
  
  nameAlreadyExists: boolean = false;
  

rakia

@Component({
  selector: 'app-ecs-field',
  templateUrl: './ecs-field.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EcsFieldComponent {
  formBuilder = inject(FormBuilder);

  @Input() entity: EcsField;
  @Input() nameAlreadyExists: boolean | null = false;

rakia

@Component({
  selector: 'app-ecs-fieldset',
  templateUrl: './ecs-fieldset.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EcsFieldsetComponent {
   formBuilder = inject(FormBuilder);
   
   @Input() entity: EcsFieldset;
   @Input() nameAlreadyExists: boolean | null = false;

rakia

<ng-container *ngIf="isCreateMode">
          <div class="mt-0">
            <app-create-custom-field
              [ecsFieldset]="entity.id!"
              [nameAlreadyExists]="nameAlreadyExists"
              (checkIfNameExists)="checkIfNameExists.emit($event)"
              (cancelEdit)="cancelEdit.emit()"
              (save)="createCustomField.emit($event)"
            >
            </app-create-custom-field>

rakia

<app-ecs-fieldset
    [entity]="ecsFieldset"
    [fields]="(ecsFields$ | async) || []"
    [nameAlreadyExists]="nameAlreadyExists$ | async"
    (checkIfNameExists)="checkIfNameExists($event)"
    (cancelEdit)="onCancelEdit()"
>
</app-ecs-fieldset>

rakia

@Component({
  selector: 'app-create-custom-field',
  templateUrl: './create-custom-field.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CreateCustomFieldComponent implements OnInit {
  private readonly destroyRef = inject(DestroyRef);
  
  @Input() nameAlreadyExists: boolean | null = false;
  @Output() checkIfNameExists = new EventEmitter<string>();

rakia

@Component({
  selector: 'app-ecs-fieldsets-with-details',
  templateUrl: './ecs-fieldsets-with-details.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EcsFieldsetsWithDetailsComponent implements OnChanges {
  private storeService = inject(EcsFieldsStoreService);

  nameAlreadyExists$ = new BehaviorSubject<boolean>(false);

rakia

<!-- Show warning: Name already exists -->
<ng-container *ngIf="nameAlreadyExists">
    <div class="mb-4 text-red-600">
        {{ "WARNING.DUPLICATE_NAME" | transloco }}
    </div>
</ng-container>

rakia

const routes: Routes = [
  { path: "dashboard", component: DashboardComponent },
  {
    path: "profiles",
    redirectTo: ({ queryParams }) => {
      const errorHandler = inject(ErrorHandler);
      const userId = queryParams['userId'];
      if (userId) {
        // return the appropriate redirect path based on the userId query-parameter
        return `/profiles/${userId}`;