Skip to content

feat: adding server side search support #723

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 26, 2021
Merged

feat: adding server side search support #723

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9d68e43
feat: adding server side search support
anandtiwary Mar 25, 2021
226d131
refactor: addressing review comments
anandtiwary Mar 25, 2021
5ce64a7
refactor: remove hiding search on options length logic
anandtiwary Mar 25, 2021
ee0f4de
Merge branch 'main' into multi-select-support-server-search
anandtiwary Mar 26, 2021
d00685c
refactor: addressing review comments
anandtiwary Mar 26, 2021
05a6b70
Merge branch 'multi-select-support-server-search' of github.com:hyper…
anandtiwary Mar 26, 2021
065255e
refactor: update comment
anandtiwary Mar 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 13 additions & 3 deletions projects/components/src/multi-select/multi-select.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ import { MultiSelectJustify } from './multi-select-justify';
<div class="multi-select-content" [ngStyle]="{ 'min-width.px': triggerContainer.offsetWidth }">
<ng-container *ngIf="this.enableSearch">
<ng-container *ngIf="this.allOptions$ | async as allOptions">
<ng-container *ngIf="allOptions.length > 5">
<ng-container *ngIf="!this.enableImplicitOptionsSearch || allOptions.length > 5">
<ht-search-box
class="search-bar"
(valueChange)="this.searchOptions($event)"
Expand All @@ -78,7 +78,7 @@ import { MultiSelectJustify } from './multi-select-justify';

<ht-button
class="select-all"
*ngIf="!this.isAnyOptionSelected()"
*ngIf="allOptions.length > 0 && !this.isAnyOptionSelected()"
role="${ButtonRole.Primary}"
display="${ButtonStyle.Text}"
label="Select All"
Expand Down Expand Up @@ -136,6 +136,9 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
@Input()
public enableSearch: boolean = false;

@Input()
public enableImplicitOptionsSearch: boolean = true;
Copy link
Contributor

@aaron-steinfeld aaron-steinfeld Mar 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if we took a page out of the table api (hah!) and took in some like a searchProvider object instead. We could default it to a client side version, but provide a server implementation in other places.

Copy link
Contributor Author

@anandtiwary anandtiwary Mar 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh god. let me check

Copy link
Contributor Author

@anandtiwary anandtiwary Mar 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That sounds complicated. Can we do it with just may be a searchMode enum (Implicit and external)? I think eventually, we would have a separate basic filter multi select component, but we need this as a stepping stone.

Copy link
Contributor

@aaron-steinfeld aaron-steinfeld Mar 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK looked at multiselect - the search provider wouldn't work as well because the data is actually coming in as content children vs an array like some of the other components, so an output is the only way that comes to mind to accomplish this - but let's clean up the ambiguity between the two enable search inputs as you mentioned.

Copy link
Contributor Author

@anandtiwary anandtiwary Mar 25, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

so does this look good?

@Input()
public enableSearch: boolean = false;

@Input()
public searchMode: MultiSelectSearchMode = MultiSelectSearchMode.Implicit;

...


export const enum MultiSelectSearchMode {
  Implicit = 'implicit',
  External = 'external'
}

Copy link
Contributor

@aaron-steinfeld aaron-steinfeld Mar 25, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd rather boil down another input and make the enum values more explicit, but same idea:

@Input()
public searchMode: MultiSelectSearchMode = MultiSelectSearchMode.Disabled;
@Output
public searchValueChange: EventEmitter<string> = new EventEmitter<string>();

...

export const enum MultiSelectSearchMode {
  Disabled = 'disabled', // Search is not available
  CaseInsensitive = 'case-insensitive', // Current available values are filtered in a case insensitive way and an emit is triggered
  EmitOnly = 'emit-only' // Current available values not filtered, but an emit still triggered
}

Copy link
Contributor Author

@anandtiwary anandtiwary Mar 25, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool.


@Input()
public justify: MultiSelectJustify = MultiSelectJustify.Left;

Expand All @@ -145,6 +148,9 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
@Output()
public readonly selectedChange: EventEmitter<V[]> = new EventEmitter<V[]>();

@Output()
public readonly optionsSearchChange: EventEmitter<string> = new EventEmitter<string>();

@ContentChildren(SelectOptionComponent)
private readonly allOptionsList?: QueryList<SelectOptionComponent<V>>;
public allOptions$!: Observable<QueryList<SelectOptionComponent<V>>>;
Expand All @@ -170,7 +176,11 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
}

public searchOptions(searchText: string): void {
this.searchSubject.next(searchText);
if (!this.enableImplicitOptionsSearch) {
this.optionsSearchChange.emit(searchText);
} else {
this.searchSubject.next(searchText);
}
}

public onSelectAll(): void {
Expand Down