mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-08-14 17:58:21 +00:00
[ACS-9374] [ACS-9590] Fix search pop up and infinite loading animation (#4717)
* [ACS-9374] Prevent search popup flicker on Enter key press * feat: WIP - fixing search input errors for draft PR * Add test for mat-error on empty search term and handle loading state properly * Add test for mat-error on empty search term and handle loading state properly * Add whitespace error and fix unit test for checkbox * Fix sonarcloud issue for exception * [ACS-9374] Add validator to aca-shared * [ACS-9374] Simplify HTML by handling error state in TypeScript * [ACS-9374] Fix error validation process * [ACS-9374] Fix sonarcloud issue * [ACS-9374] Prevent library search with search term less than 2 characters * [ACS-9374] Show validation error on checking and unchecking checkbox * [ACS-9374] Provide default value to hasLibrariesConstraint * [ACS-9374] Close dropdown on search submission * [ACS-9374] Close menu on search trigger * [ACS-9374] Remove explicit 0 from setTimeout
This commit is contained in:
@@ -574,7 +574,9 @@
|
|||||||
"FILES": "Files",
|
"FILES": "Files",
|
||||||
"FOLDERS": "Folders",
|
"FOLDERS": "Folders",
|
||||||
"LIBRARIES": "Libraries",
|
"LIBRARIES": "Libraries",
|
||||||
"HINT": "Search input must have at least 2 alphanumeric characters."
|
"MIN_LENGTH": "Search input must have at least 2 alphanumeric characters.",
|
||||||
|
"REQUIRED": "Search input is required.",
|
||||||
|
"WHITESPACE": "Search input cannot be only whitespace."
|
||||||
},
|
},
|
||||||
"SORT": {
|
"SORT": {
|
||||||
"SORTING_OPTION": "Sort by",
|
"SORTING_OPTION": "Sort by",
|
||||||
|
@@ -6,6 +6,7 @@
|
|||||||
matPrefix
|
matPrefix
|
||||||
class="app-search-button"
|
class="app-search-button"
|
||||||
(click)="searchSubmit()"
|
(click)="searchSubmit()"
|
||||||
|
(keydown.enter)="searchSubmit()"
|
||||||
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
|
[title]="'SEARCH.BUTTON.TOOLTIP' | translate"
|
||||||
>
|
>
|
||||||
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
|
<mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
|
||||||
@@ -18,14 +19,16 @@
|
|||||||
[type]="inputType"
|
[type]="inputType"
|
||||||
id="app-control-input"
|
id="app-control-input"
|
||||||
[formControl]="searchFieldFormControl"
|
[formControl]="searchFieldFormControl"
|
||||||
(keyup.enter)="searchSubmit()"
|
(keydown.enter)="searchSubmit()"
|
||||||
|
(blur)="onBlur()"
|
||||||
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
|
[placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div matSuffix>
|
<div matSuffix>
|
||||||
<button mat-icon-button (click)="clear()">
|
<button mat-icon-button (click)="clear()">
|
||||||
<mat-icon *ngIf="searchFieldFormControl.value.length" class="app-suffix-icon">clear</mat-icon>
|
<mat-icon *ngIf="searchFieldFormControl.value.length" class="app-suffix-icon">clear</mat-icon>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
@@ -30,40 +30,44 @@ import { NO_ERRORS_SCHEMA } from '@angular/core';
|
|||||||
describe('SearchInputControlComponent', () => {
|
describe('SearchInputControlComponent', () => {
|
||||||
let fixture: ComponentFixture<SearchInputControlComponent>;
|
let fixture: ComponentFixture<SearchInputControlComponent>;
|
||||||
let component: SearchInputControlComponent;
|
let component: SearchInputControlComponent;
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
TestBed.configureTestingModule({
|
TestBed.configureTestingModule({
|
||||||
imports: [AppTestingModule, SearchInputControlComponent],
|
imports: [AppTestingModule, SearchInputControlComponent],
|
||||||
schemas: [NO_ERRORS_SCHEMA]
|
schemas: [NO_ERRORS_SCHEMA]
|
||||||
});
|
});
|
||||||
|
|
||||||
fixture = TestBed.createComponent(SearchInputControlComponent);
|
fixture = TestBed.createComponent(SearchInputControlComponent);
|
||||||
component = fixture.componentInstance;
|
component = fixture.componentInstance;
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should emit submit event on searchSubmit', () => {
|
it('should emit submit event if form is valid', () => {
|
||||||
component.searchTerm = 'mock-search-term';
|
component.searchTerm = 'valid';
|
||||||
|
spyOn(component.submit, 'emit');
|
||||||
let submittedSearchTerm = '';
|
|
||||||
component.submit.subscribe((searchTerm) => (submittedSearchTerm = searchTerm));
|
|
||||||
|
|
||||||
component.searchSubmit();
|
component.searchSubmit();
|
||||||
expect(submittedSearchTerm).toBe('mock-search-term');
|
|
||||||
|
expect(component.submit.emit).toHaveBeenCalledWith('valid');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not emit submit event if form is invalid', () => {
|
||||||
|
component.searchTerm = '';
|
||||||
|
spyOn(component.submit, 'emit');
|
||||||
|
|
||||||
|
component.searchSubmit();
|
||||||
|
|
||||||
|
expect(component.submit.emit).not.toHaveBeenCalled();
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should emit searchChange event on inputChange', () => {
|
it('should emit searchChange event on inputChange', () => {
|
||||||
let emittedSearchTerm = '';
|
let emittedSearchTerm = '';
|
||||||
component.searchChange.subscribe((searchTerm) => (emittedSearchTerm = searchTerm));
|
component.searchChange.subscribe((searchTerm) => (emittedSearchTerm = searchTerm));
|
||||||
component.searchTerm = 'mock-search-term';
|
component.searchTerm = 'mock-search-term';
|
||||||
|
|
||||||
expect(emittedSearchTerm).toBe('mock-search-term');
|
expect(emittedSearchTerm).toBe('mock-search-term');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should emit searchChange event on clear', () => {
|
it('should emit searchChange event on clear', () => {
|
||||||
let emittedSearchTerm: string = null;
|
let emittedSearchTerm: string = null;
|
||||||
component.searchChange.subscribe((searchTerm) => (emittedSearchTerm = searchTerm));
|
component.searchChange.subscribe((searchTerm) => (emittedSearchTerm = searchTerm));
|
||||||
|
|
||||||
component.clear();
|
component.clear();
|
||||||
expect(emittedSearchTerm).toBe('');
|
expect(emittedSearchTerm).toBe('');
|
||||||
});
|
});
|
||||||
@@ -71,18 +75,14 @@ describe('SearchInputControlComponent', () => {
|
|||||||
it('should clear searchTerm', () => {
|
it('should clear searchTerm', () => {
|
||||||
component.searchTerm = 'c';
|
component.searchTerm = 'c';
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
|
|
||||||
component.clear();
|
component.clear();
|
||||||
expect(component.searchTerm).toBe('');
|
expect(component.searchTerm).toBe('');
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should check if searchTerm has a length less than 2', () => {
|
it('should check if searchTerm has a length less than 2', () => {
|
||||||
expect(component.isTermTooShort()).toBe(false);
|
|
||||||
|
|
||||||
component.searchTerm = 'd';
|
component.searchTerm = 'd';
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
expect(component.isTermTooShort()).toBe(true);
|
expect(component.isTermTooShort()).toBe(true);
|
||||||
|
|
||||||
component.searchTerm = 'dd';
|
component.searchTerm = 'dd';
|
||||||
fixture.detectChanges();
|
fixture.detectChanges();
|
||||||
expect(component.isTermTooShort()).toBe(false);
|
expect(component.isTermTooShort()).toBe(false);
|
||||||
|
@@ -22,15 +22,29 @@
|
|||||||
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import { Component, EventEmitter, Input, Output, ViewEncapsulation, ViewChild, ElementRef, OnInit, inject, DestroyRef } from '@angular/core';
|
import {
|
||||||
|
Component,
|
||||||
|
EventEmitter,
|
||||||
|
Input,
|
||||||
|
Output,
|
||||||
|
ViewEncapsulation,
|
||||||
|
ViewChild,
|
||||||
|
ElementRef,
|
||||||
|
OnInit,
|
||||||
|
inject,
|
||||||
|
DestroyRef,
|
||||||
|
OnChanges,
|
||||||
|
SimpleChanges
|
||||||
|
} from '@angular/core';
|
||||||
import { CommonModule } from '@angular/common';
|
import { CommonModule } from '@angular/common';
|
||||||
import { TranslatePipe } from '@ngx-translate/core';
|
import { TranslatePipe } from '@ngx-translate/core';
|
||||||
import { MatButtonModule } from '@angular/material/button';
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
import { MatIconModule } from '@angular/material/icon';
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { MatFormFieldModule } from '@angular/material/form-field';
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
||||||
import { MatInputModule } from '@angular/material/input';
|
import { MatInputModule } from '@angular/material/input';
|
||||||
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
import { FormControl, FormsModule, ReactiveFormsModule, StatusChangeEvent, TouchedChangeEvent, Validators } from '@angular/forms';
|
||||||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
||||||
|
import { noWhitespaceValidator } from '@alfresco/aca-shared';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
imports: [CommonModule, TranslatePipe, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule],
|
imports: [CommonModule, TranslatePipe, MatButtonModule, MatIconModule, MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule],
|
||||||
@@ -40,13 +54,20 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|||||||
encapsulation: ViewEncapsulation.None,
|
encapsulation: ViewEncapsulation.None,
|
||||||
host: { class: 'app-search-control' }
|
host: { class: 'app-search-control' }
|
||||||
})
|
})
|
||||||
export class SearchInputControlComponent implements OnInit {
|
export class SearchInputControlComponent implements OnInit, OnChanges {
|
||||||
private readonly destroyRef = inject(DestroyRef);
|
private readonly destroyRef = inject(DestroyRef);
|
||||||
|
|
||||||
/** Type of the input field to render, e.g. "search" or "text" (default). */
|
/** Type of the input field to render, e.g. "search" or "text" (default). */
|
||||||
@Input()
|
@Input()
|
||||||
inputType = 'text';
|
inputType = 'text';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Indicates whether the search is constrained by libraries.
|
||||||
|
* If true, specific error messaging or validation behavior may be triggered.
|
||||||
|
*/
|
||||||
|
@Input()
|
||||||
|
hasLibrariesConstraint = false;
|
||||||
|
|
||||||
/** Emitted when the search is submitted pressing ENTER button.
|
/** Emitted when the search is submitted pressing ENTER button.
|
||||||
* The search term is provided as value of the event.
|
* The search term is provided as value of the event.
|
||||||
*/
|
*/
|
||||||
@@ -62,10 +83,14 @@ export class SearchInputControlComponent implements OnInit {
|
|||||||
@Output()
|
@Output()
|
||||||
searchChange: EventEmitter<string> = new EventEmitter();
|
searchChange: EventEmitter<string> = new EventEmitter();
|
||||||
|
|
||||||
|
/** Emitted when the input control has a validation error. */
|
||||||
|
@Output()
|
||||||
|
validationError = new EventEmitter<string>();
|
||||||
|
|
||||||
@ViewChild('searchInput', { static: true })
|
@ViewChild('searchInput', { static: true })
|
||||||
searchInput: ElementRef;
|
searchInput: ElementRef;
|
||||||
|
|
||||||
searchFieldFormControl = new FormControl('');
|
searchFieldFormControl = new FormControl('', [Validators.required, noWhitespaceValidator()]);
|
||||||
|
|
||||||
get searchTerm(): string {
|
get searchTerm(): string {
|
||||||
return this.searchFieldFormControl.value.replace('text:', 'TEXT:');
|
return this.searchFieldFormControl.value.replace('text:', 'TEXT:');
|
||||||
@@ -80,11 +105,30 @@ export class SearchInputControlComponent implements OnInit {
|
|||||||
this.searchFieldFormControl.markAsTouched();
|
this.searchFieldFormControl.markAsTouched();
|
||||||
this.searchChange.emit(searchTermValue);
|
this.searchChange.emit(searchTermValue);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
this.searchFieldFormControl.events.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((event) => {
|
||||||
|
if (event instanceof TouchedChangeEvent || event instanceof StatusChangeEvent) {
|
||||||
|
if (this.searchFieldFormControl.touched) {
|
||||||
|
this.emitValidationError();
|
||||||
|
} else {
|
||||||
|
this.validationError.emit('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ngOnChanges(changes: SimpleChanges): void {
|
||||||
|
if (changes['hasLibrariesConstraint'] && !changes['hasLibrariesConstraint'].firstChange) {
|
||||||
|
this.emitValidationError();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
searchSubmit() {
|
searchSubmit() {
|
||||||
if (!this.searchFieldFormControl.errors) {
|
this.searchFieldFormControl.markAsTouched();
|
||||||
this.submit.emit(this.searchTerm);
|
|
||||||
|
const trimmedTerm = this.searchTerm?.trim();
|
||||||
|
if (this.searchFieldFormControl.valid && trimmedTerm) {
|
||||||
|
this.submit.emit(trimmedTerm);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -93,7 +137,24 @@ export class SearchInputControlComponent implements OnInit {
|
|||||||
this.searchChange.emit('');
|
this.searchChange.emit('');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onBlur() {
|
||||||
|
this.searchFieldFormControl.markAsUntouched();
|
||||||
|
}
|
||||||
|
|
||||||
isTermTooShort() {
|
isTermTooShort() {
|
||||||
return !!(this.searchTerm && this.searchTerm.length < 2);
|
return this.searchTerm.trim()?.length < 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
emitValidationError(): void {
|
||||||
|
const errors = this.searchFieldFormControl.errors;
|
||||||
|
if (errors?.whitespace) {
|
||||||
|
this.validationError.emit('SEARCH.INPUT.WHITESPACE');
|
||||||
|
} else if (errors?.required) {
|
||||||
|
this.validationError.emit('SEARCH.INPUT.REQUIRED');
|
||||||
|
} else if (this.hasLibrariesConstraint && this.isTermTooShort()) {
|
||||||
|
this.validationError.emit('SEARCH.INPUT.MIN_LENGTH');
|
||||||
|
} else {
|
||||||
|
this.validationError.emit('');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@@ -35,9 +35,12 @@
|
|||||||
(click)="$event.stopPropagation()"
|
(click)="$event.stopPropagation()"
|
||||||
(submit)="onSearchSubmit($event)"
|
(submit)="onSearchSubmit($event)"
|
||||||
(searchChange)="onSearchChange($event)"
|
(searchChange)="onSearchChange($event)"
|
||||||
|
(validationError)="error = $event"
|
||||||
|
[hasLibrariesConstraint]="hasLibrariesConstraint"
|
||||||
/>
|
/>
|
||||||
<mat-hint *ngIf="hasLibrariesConstraint" class="app-search-hint">{{ 'SEARCH.INPUT.HINT' | translate }}</mat-hint>
|
<mat-error *ngIf="error" class="app-search-error">
|
||||||
|
{{ error | translate }}
|
||||||
|
</mat-error>
|
||||||
<div id="search-options" class="app-search-options">
|
<div id="search-options" class="app-search-options">
|
||||||
<mat-checkbox *ngFor="let option of searchOptions"
|
<mat-checkbox *ngFor="let option of searchOptions"
|
||||||
id="{{ option.id }}"
|
id="{{ option.id }}"
|
||||||
|
@@ -49,16 +49,18 @@ $search-border-radius: 4px;
|
|||||||
.app-search-options {
|
.app-search-options {
|
||||||
color: var(--theme-text-color);
|
color: var(--theme-text-color);
|
||||||
border-top: 1px solid var(--theme-divider-color);
|
border-top: 1px solid var(--theme-divider-color);
|
||||||
padding: 10px;
|
padding: 25px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
column-gap: 24px;
|
column-gap: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-search-hint {
|
.app-search-error {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 12px;
|
gap: 4px;
|
||||||
padding-left: 17px;
|
padding-left: 17px;
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 959px) {
|
@media screen and (max-width: 959px) {
|
||||||
|
@@ -0,0 +1,150 @@
|
|||||||
|
/*!
|
||||||
|
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||||
|
*
|
||||||
|
* Alfresco Example Content Application
|
||||||
|
*
|
||||||
|
* This file is part of the Alfresco Example Content Application.
|
||||||
|
* If the software was purchased under a paid Alfresco license, the terms of
|
||||||
|
* the paid license agreement will prevail. Otherwise, the software is
|
||||||
|
* provided under the following open source license terms:
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Lesser General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Lesser General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Lesser General Public License
|
||||||
|
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
import { UnitTestingUtils } from '@alfresco/adf-core';
|
||||||
|
import { MatError } from '@angular/material/form-field';
|
||||||
|
import { AppStore } from '@alfresco/aca-shared/store';
|
||||||
|
import { AppTestingModule } from '../../../testing/app-testing.module';
|
||||||
|
import { SearchInputComponent } from './search-input.component';
|
||||||
|
import { Store } from '@ngrx/store';
|
||||||
|
import { of } from 'rxjs';
|
||||||
|
import { HarnessLoader } from '@angular/cdk/testing';
|
||||||
|
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
|
||||||
|
import { MatMenuHarness } from '@angular/material/menu/testing';
|
||||||
|
import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
|
||||||
|
|
||||||
|
describe('SearchInputComponent', () => {
|
||||||
|
let fixture: ComponentFixture<SearchInputComponent>;
|
||||||
|
let component: SearchInputComponent;
|
||||||
|
let store: jasmine.SpyObj<Store<AppStore>>;
|
||||||
|
let unitTestingUtils: UnitTestingUtils;
|
||||||
|
let loader: HarnessLoader;
|
||||||
|
|
||||||
|
function getFirstError(): string {
|
||||||
|
const error = unitTestingUtils.getByDirective(MatError);
|
||||||
|
return error?.nativeElement.textContent.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
async function openMenu(): Promise<MatMenuHarness> {
|
||||||
|
const menu = await loader.getHarness(MatMenuHarness);
|
||||||
|
await menu.open();
|
||||||
|
return menu;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCheckbox(id: string): Promise<MatCheckboxHarness> {
|
||||||
|
const overlayLoader = TestbedHarnessEnvironment.documentRootLoader(fixture);
|
||||||
|
return overlayLoader.getHarness(MatCheckboxHarness.with({ selector: `#${id}` }));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function uncheckAllCheckboxes() {
|
||||||
|
const checkboxIds = ['libraries', 'folder', 'content'];
|
||||||
|
for (const id of checkboxIds) {
|
||||||
|
try {
|
||||||
|
const checkbox = await getCheckbox(id);
|
||||||
|
if (await checkbox.isChecked()) {
|
||||||
|
await checkbox.uncheck();
|
||||||
|
fixture.detectChanges();
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
fail(`Checkbox with id ${id} not found`);
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
const storeSpy = jasmine.createSpyObj<Store<AppStore>>('Store', ['dispatch', 'pipe']);
|
||||||
|
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [AppTestingModule, SearchInputComponent],
|
||||||
|
providers: [{ provide: Store, useValue: storeSpy }]
|
||||||
|
}).compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(SearchInputComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
store = TestBed.inject(Store) as jasmine.SpyObj<Store<AppStore>>;
|
||||||
|
store.pipe.and.returnValue(of([]));
|
||||||
|
fixture.detectChanges();
|
||||||
|
unitTestingUtils = new UnitTestingUtils(fixture.debugElement);
|
||||||
|
loader = TestbedHarnessEnvironment.loader(fixture);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should show required error when field is empty and touched', async () => {
|
||||||
|
await openMenu();
|
||||||
|
|
||||||
|
component.searchInputControl.searchFieldFormControl.setValue('');
|
||||||
|
component.searchInputControl.searchFieldFormControl.markAsTouched();
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
expect(getFirstError()).toBe('SEARCH.INPUT.REQUIRED');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not show error when field has value', async () => {
|
||||||
|
await openMenu();
|
||||||
|
|
||||||
|
component.searchInputControl.searchFieldFormControl.setValue('not giving up');
|
||||||
|
component.searchInputControl.searchFieldFormControl.markAsTouched();
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
const error = unitTestingUtils.getByDirective(MatError);
|
||||||
|
expect(error).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not show error when field is untouched', async () => {
|
||||||
|
await openMenu();
|
||||||
|
|
||||||
|
component.searchInputControl.searchFieldFormControl.setValue('');
|
||||||
|
component.searchInputControl.searchFieldFormControl.markAsUntouched();
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
const error = unitTestingUtils.getByDirective(MatError);
|
||||||
|
expect(error).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should dispatch action when Libraries checkbox selected and term is entered', async () => {
|
||||||
|
await openMenu();
|
||||||
|
const checkbox = await getCheckbox('libraries');
|
||||||
|
await checkbox.check();
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
component.onSearchSubmit({ target: { value: 'happy faces only' } });
|
||||||
|
expect(store.dispatch).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should not dispatch SearchByTermAction when no checkboxes are selected and term is empty', async () => {
|
||||||
|
store.dispatch.calls.reset();
|
||||||
|
|
||||||
|
await openMenu();
|
||||||
|
await uncheckAllCheckboxes();
|
||||||
|
|
||||||
|
expect(component.searchOptions.every((option) => !option.value)).toBeTrue();
|
||||||
|
|
||||||
|
component.searchedWord = '';
|
||||||
|
fixture.detectChanges();
|
||||||
|
|
||||||
|
component.onSearchSubmit({ target: { value: '' } });
|
||||||
|
expect(store.dispatch).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
@@ -73,6 +73,8 @@ export class SearchInputComponent implements OnInit, OnDestroy {
|
|||||||
has400LibraryError = false;
|
has400LibraryError = false;
|
||||||
hasLibrariesConstraint = false;
|
hasLibrariesConstraint = false;
|
||||||
searchOnChange: boolean;
|
searchOnChange: boolean;
|
||||||
|
isTrimmedWordEmpty = false;
|
||||||
|
error = '';
|
||||||
|
|
||||||
searchedWord: string = null;
|
searchedWord: string = null;
|
||||||
searchOptions: Array<SearchOptionModel> = [
|
searchOptions: Array<SearchOptionModel> = [
|
||||||
@@ -151,8 +153,8 @@ export class SearchInputComponent implements OnInit, OnDestroy {
|
|||||||
showInputValue() {
|
showInputValue() {
|
||||||
this.appService.setAppNavbarMode('collapsed');
|
this.appService.setAppNavbarMode('collapsed');
|
||||||
this.has400LibraryError = false;
|
this.has400LibraryError = false;
|
||||||
this.hasLibrariesConstraint = this.evaluateLibrariesConstraint();
|
|
||||||
this.searchedWord = this.getUrlSearchTerm();
|
this.searchedWord = this.getUrlSearchTerm();
|
||||||
|
this.hasLibrariesConstraint = this.evaluateLibrariesConstraint();
|
||||||
|
|
||||||
if (this.searchInputControl) {
|
if (this.searchInputControl) {
|
||||||
this.searchInputControl.searchTerm = this.searchedWord;
|
this.searchInputControl.searchTerm = this.searchedWord;
|
||||||
@@ -177,17 +179,22 @@ export class SearchInputComponent implements OnInit, OnDestroy {
|
|||||||
*/
|
*/
|
||||||
onSearchSubmit(event: any) {
|
onSearchSubmit(event: any) {
|
||||||
const searchTerm = event.target ? (event.target as HTMLInputElement).value : event;
|
const searchTerm = event.target ? (event.target as HTMLInputElement).value : event;
|
||||||
if (searchTerm) {
|
const trimmedTerm = searchTerm.trim();
|
||||||
this.searchedWord = searchTerm;
|
|
||||||
|
|
||||||
this.searchByOption();
|
if (trimmedTerm) {
|
||||||
|
this.searchedWord = trimmedTerm;
|
||||||
|
if (this.isLibrariesChecked() && this.searchInputControl.isTermTooShort()) {
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.searchByOption();
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
this.notificationService.showError('APP.BROWSE.SEARCH.EMPTY_SEARCH');
|
this.notificationService.showError('APP.BROWSE.SEARCH.EMPTY_SEARCH');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.trigger) {
|
setTimeout(() => {
|
||||||
this.trigger.closeMenu();
|
this.trigger?.closeMenu();
|
||||||
}
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onSearchChange(searchTerm: string) {
|
onSearchChange(searchTerm: string) {
|
||||||
@@ -196,15 +203,26 @@ export class SearchInputComponent implements OnInit, OnDestroy {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.has400LibraryError = false;
|
this.has400LibraryError = false;
|
||||||
this.hasLibrariesConstraint = this.evaluateLibrariesConstraint();
|
|
||||||
this.searchedWord = searchTerm;
|
this.searchedWord = searchTerm;
|
||||||
|
this.hasLibrariesConstraint = this.evaluateLibrariesConstraint();
|
||||||
}
|
}
|
||||||
|
|
||||||
searchByOption() {
|
searchByOption() {
|
||||||
this.syncInputValues();
|
this.syncInputValues();
|
||||||
this.has400LibraryError = false;
|
this.has400LibraryError = false;
|
||||||
|
|
||||||
|
this.searchInputControl.emitValidationError();
|
||||||
|
|
||||||
|
if (!this.searchedWord.trim()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (this.isLibrariesChecked()) {
|
if (this.isLibrariesChecked()) {
|
||||||
this.hasLibrariesConstraint = this.evaluateLibrariesConstraint();
|
this.hasLibrariesConstraint = this.evaluateLibrariesConstraint();
|
||||||
|
|
||||||
|
if (this.hasLibrariesConstraint) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (this.onLibrariesSearchResults && this.isSameSearchTerm()) {
|
if (this.onLibrariesSearchResults && this.isSameSearchTerm()) {
|
||||||
this.queryLibrariesBuilder.update();
|
this.queryLibrariesBuilder.update();
|
||||||
} else if (this.searchedWord) {
|
} else if (this.searchedWord) {
|
||||||
|
@@ -0,0 +1,50 @@
|
|||||||
|
/*!
|
||||||
|
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||||
|
*
|
||||||
|
* Alfresco Example Content Application
|
||||||
|
*
|
||||||
|
* This file is part of the Alfresco Example Content Application.
|
||||||
|
* If the software was purchased under a paid Alfresco license, the terms of
|
||||||
|
* the paid license agreement will prevail. Otherwise, the software is
|
||||||
|
* provided under the following open source license terms:
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Lesser General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Lesser General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Lesser General Public License
|
||||||
|
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { FormControl } from '@angular/forms';
|
||||||
|
import { noWhitespaceValidator } from './no-whitespace.validator';
|
||||||
|
|
||||||
|
describe('noWhitespaceValidator', () => {
|
||||||
|
const validatorFn = noWhitespaceValidator();
|
||||||
|
|
||||||
|
it('should return null for valid non-whitespace input', () => {
|
||||||
|
const control = new FormControl('valid input');
|
||||||
|
expect(validatorFn(control)).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return error for input with only spaces', () => {
|
||||||
|
const control = new FormControl(' ');
|
||||||
|
expect(validatorFn(control)).toEqual({ whitespace: true });
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return error for empty string', () => {
|
||||||
|
const control = new FormControl('');
|
||||||
|
expect(validatorFn(control)).toBeNull();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should return null for input with leading and trailing spaces but valid content inside', () => {
|
||||||
|
const control = new FormControl(' valid ');
|
||||||
|
expect(validatorFn(control)).toBeNull();
|
||||||
|
});
|
||||||
|
});
|
@@ -0,0 +1,37 @@
|
|||||||
|
/*!
|
||||||
|
* Copyright © 2005-2025 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||||
|
*
|
||||||
|
* Alfresco Example Content Application
|
||||||
|
*
|
||||||
|
* This file is part of the Alfresco Example Content Application.
|
||||||
|
* If the software was purchased under a paid Alfresco license, the terms of
|
||||||
|
* the paid license agreement will prevail. Otherwise, the software is
|
||||||
|
* provided under the following open source license terms:
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is free software: you can redistribute it and/or modify
|
||||||
|
* it under the terms of the GNU Lesser General Public License as published by
|
||||||
|
* the Free Software Foundation, either version 3 of the License, or
|
||||||
|
* (at your option) any later version.
|
||||||
|
*
|
||||||
|
* The Alfresco Example Content Application is distributed in the hope that it will be useful,
|
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
* GNU Lesser General Public License for more details.
|
||||||
|
*
|
||||||
|
* You should have received a copy of the GNU Lesser General Public License
|
||||||
|
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';
|
||||||
|
|
||||||
|
export const noWhitespaceValidator = (): ValidatorFn => {
|
||||||
|
return (control: AbstractControl): ValidationErrors | null => {
|
||||||
|
const rawValue = control.value;
|
||||||
|
if (!rawValue) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const trimmedValue = rawValue.toString().trim();
|
||||||
|
return trimmedValue.length === 0 ? { whitespace: true } : null;
|
||||||
|
};
|
||||||
|
};
|
@@ -40,6 +40,7 @@ export * from './lib/components/document-base-page/document-base-page.component'
|
|||||||
export * from './lib/components/document-base-page/document-base-page.service';
|
export * from './lib/components/document-base-page/document-base-page.service';
|
||||||
export * from './lib/components/open-in-app/open-in-app.component';
|
export * from './lib/components/open-in-app/open-in-app.component';
|
||||||
export * from './lib/constants';
|
export * from './lib/constants';
|
||||||
|
|
||||||
export * from './lib/directives/contextmenu/contextmenu.directive';
|
export * from './lib/directives/contextmenu/contextmenu.directive';
|
||||||
export * from './lib/directives/pagination.directive';
|
export * from './lib/directives/pagination.directive';
|
||||||
|
|
||||||
@@ -60,5 +61,8 @@ export * from './lib/services/app-settings.service';
|
|||||||
export * from './lib/services/user-profile.service';
|
export * from './lib/services/user-profile.service';
|
||||||
export * from './lib/services/navigation-history.service';
|
export * from './lib/services/navigation-history.service';
|
||||||
|
|
||||||
export * from './lib/utils/node.utils';
|
|
||||||
export * from './lib/testing/lib-testing-module';
|
export * from './lib/testing/lib-testing-module';
|
||||||
|
|
||||||
|
export * from './lib/utils/node.utils';
|
||||||
|
|
||||||
|
export * from './lib/validators/no-whitespace.validator';
|
||||||
|
Reference in New Issue
Block a user