File

projects/netgrif-components/src/lib/search/search-component/search.component.ts

Extends

AbstractSearchComponent

Metadata

encapsulation ViewEncapsulation.None
providers { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT } { provide: NAE_SEARCH_CATEGORIES, useFactory: searchCategoryConverter, deps: [ CategoryResolverService, NAE_BASE_FILTER, NAE_DEFAULT_CASE_SEARCH_CATEGORIES, NAE_DEFAULT_TASK_SEARCH_CATEGORIES, [new Optional(), new SkipSelf(), NAE_SEARCH_CATEGORIES] ] }
selector nc-search
styleUrls ./search.component.scss
templateUrl ./search.component.html

Constructor

constructor(searchService: SearchService, logger: LoggerService, dialogService: DialogService, translate: TranslateService, userFilterService: UserFiltersService, allowedNetsService: AllowedNetsService, viewIdService: ViewIdService, searchCategories: Array>>, configuration: SearchComponentConfiguration, filtersFilter: Filter, navigationItemTaskData: Array)
Parameters :
Name Type Optional
searchService SearchService No
logger LoggerService No
dialogService DialogService No
translate TranslateService No
userFilterService UserFiltersService No
allowedNetsService AllowedNetsService No
viewIdService ViewIdService No
searchCategories Array<Type<Category<any>>> No
configuration SearchComponentConfiguration No
filtersFilter Filter No
navigationItemTaskData Array<DataGroup> No
import {Component, Inject, Optional, SkipSelf, Type, ViewEncapsulation} from '@angular/core';
import {MAT_DATE_FORMATS} from '@angular/material/core';
import {
    AbstractSearchComponent,
    BaseFilter,
    CategoryResolverService,
    DATE_FORMAT,
    DialogService,
    LoggerService,
    SearchService,
    NAE_SEARCH_COMPONENT_CONFIGURATION,
    SearchComponentConfiguration,
    UserFiltersService,
    AllowedNetsService,
    NAE_SEARCH_CATEGORIES,
    Category,
    ViewIdService,
    NAE_FILTERS_FILTER,
    Filter,
    FilterType,
    NAE_BASE_FILTER,
    NAE_DEFAULT_CASE_SEARCH_CATEGORIES,
    NAE_DEFAULT_TASK_SEARCH_CATEGORIES, NAE_NAVIGATION_ITEM_TASK_DATA, DataGroup
} from '@netgrif/components-core';
import {TranslateService} from '@ngx-translate/core';

/**
 * Converts search categories provided by the {@link NAE_SEARCH_CATEGORIES}
 * injection token in the old (pre 5.6.0) format, to the new format.
 *
 * If no search categories are provided converts the default search categories into search categories
 * based on the base filter filter type.
 *
 * @param categoryResolverService service for serialisation and deserialization of search categories
 * @param baseFilter determines the default categories used if no categories are provided, injected by the {@link NAE_BASE_FILTER}
 * injection token
 * @param defaultCaseSearchCategories the default case search categories, injected by the {@link NAE_DEFAULT_CASE_SEARCH_CATEGORIES}
 * injection token
 * @param defaultTaskSearchCategories the default task search categories, injected by the {@link NAE_DEFAULT_TASK_SEARCH_CATEGORIES}
 * injection token
 * @param naeSearchCategories optionally the search category instances, or the search category classes. Instances are converted to classes.
 * If no categories are provided the default ones based on the base filter filter type will be returned.
 * Injected by the {@link NAE_SEARCH_CATEGORIES} injection token.
 */
export function searchCategoryConverter(categoryResolverService: CategoryResolverService,
                                        baseFilter: BaseFilter,
                                        defaultCaseSearchCategories: Array<Type<Category<any>>>,
                                        defaultTaskSearchCategories: Array<Type<Category<any>>>,
                                        naeSearchCategories: Array<Category<any>> | Array<Type<Category<any>>> = null
): Array<Type<Category<any>>> {
    if (naeSearchCategories === null) {
        // categories were not provided => return the defaults
        const type = baseFilter.filter instanceof Filter ? baseFilter.filter.type : baseFilter.filterType;
        if (type === FilterType.CASE) {
            return defaultCaseSearchCategories;
        } else if (type === FilterType.TASK) {
            return defaultTaskSearchCategories;
        }
        throw new Error(`Illegal filter type: ${type}`);
    }

    // categories were provided => convert them if necessary
    if (naeSearchCategories.length !== 0 && naeSearchCategories[0] instanceof Category) {
        return (naeSearchCategories as Array<Category<any>>).map(c => {
            return categoryResolverService.toClass(categoryResolverService.serialize(c));
        });
    }
    return naeSearchCategories as Array<Type<Category<any>>>;
}

@Component({
    selector: 'nc-search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.scss'],
    encapsulation: ViewEncapsulation.None,
    providers: [
        {provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT},
        {
            provide: NAE_SEARCH_CATEGORIES,
            useFactory: searchCategoryConverter,
            deps: [
                CategoryResolverService,
                NAE_BASE_FILTER,
                NAE_DEFAULT_CASE_SEARCH_CATEGORIES,
                NAE_DEFAULT_TASK_SEARCH_CATEGORIES,
                [new Optional(), new SkipSelf(), NAE_SEARCH_CATEGORIES]
            ]
        }
    ]
})
export class SearchComponent extends AbstractSearchComponent {

    constructor(searchService: SearchService,
                logger: LoggerService,
                dialogService: DialogService,
                translate: TranslateService,
                userFilterService: UserFiltersService,
                allowedNetsService: AllowedNetsService,
                viewIdService: ViewIdService,
                @Inject(NAE_SEARCH_CATEGORIES) searchCategories: Array<Type<Category<any>>>,
                @Optional() @Inject(NAE_SEARCH_COMPONENT_CONFIGURATION) configuration: SearchComponentConfiguration,
                @Optional() @Inject(NAE_FILTERS_FILTER) filtersFilter: Filter = null,
                @Optional() @Inject(NAE_NAVIGATION_ITEM_TASK_DATA) navigationItemTaskData: Array<DataGroup> = null) {
        super(searchService, logger, dialogService, translate, userFilterService, allowedNetsService,
            viewIdService, searchCategories, configuration, filtersFilter, navigationItemTaskData);
    }
}
<div fxLayout="row wrap" fxLayoutAlign="start center">

    <div *ngIf="advancedSearchDisplayed; then advancedSearch; else fullTextSearch"></div>

    <ng-template #advancedSearch>
        <nc-advanced-search [editable]="!disabled"></nc-advanced-search>
    </ng-template>

    <ng-template #fullTextSearch>
        <nc-fulltext-search [disabled]="disabled" class="netgrif-input"></nc-fulltext-search>
    </ng-template>

    <button mat-stroked-button class="search-buttons-margin search-buttons-padding" *ngIf="showSearchToggleButton" [disabled]="disabled"
            [matTooltip]="(advancedSearchDisplayed ? 'search.tooltip.toFullText' : 'search.tooltip.toAdvanced') | translate"
            (click)="toggleSearchMode()">
        <mat-icon class="advanced-search-icon" svgIcon="filter-variant"></mat-icon>
    </button>

    <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="menu" *ngIf="advancedSearchDisplayed" [disabled]="disabled">
        <mat-icon class="advanced-search-icon">more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu" class="mat-menu-border-radius mat-menu-padding">
        <button mat-menu-item *ngIf="showSaveFilterButton" (click)="saveFilter()">
            <mat-icon class="prefix-icon">save</mat-icon>
            <span>{{'search.tooltip.save' | translate}}</span>
        </button>
        <button mat-menu-item *ngIf="showLoadFilterButton" (click)="loadFilter()">
            <mat-icon class="prefix-icon">open_in_browser</mat-icon>
            <span>{{'search.tooltip.load' | translate}}</span>
        </button>

        <button mat-menu-item *ngIf="showAdvancedSearchHelp" (click)="showHelp()">
            <mat-icon class="prefix-icon">help</mat-icon>
            <span>{{'search.tooltip.help' | translate}}</span>
        </button>
    </mat-menu>
</div>

./search.component.scss

.button-margin {
    margin-left: 8px;
    margin-right: 8px;
}

.disable-error-margin .mat-form-field-wrapper {
    margin: 0 !important;
    padding-bottom: 0;
}

.search-buttons-margin {
    margin-left: 8px;
    margin-top: 1.5px;
    margin-bottom: 1.5px;
}

.search-icon {
    padding-right: 8px;
    font-size: xx-large;
}

.search-input {
    width: 100%;
}

.search-input-lg {
    width: 60%;
}

.search-input-md {
    width: 80%;
}

.search-input-sm {
    width: 100%;
}

.search-buttons-padding {
    height: 44px !important;
    min-width: 44px;
    padding: 0;
}

.prefix-icon {
    color: #64748B !important;
}

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""