Skip to content

feat: adding all option and fixing some styling #514

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 3 commits into from
Jan 21, 2021
Merged

feat: adding all option and fixing some styling #514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
caae69b
feat: adding all option and fixing some styling
anandtiwary Jan 20, 2021
80abcad
refactor: addressing review comments
anandtiwary Jan 21, 2021
1ad5f54
Merge branch 'main' into multi-slect-changes
anandtiwary Jan 21, 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
1 change: 1 addition & 0 deletions projects/common/src/color/color.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const enum Color {
BlueGray4 = '#4b5f77',
Gray1 = '#f4f5f5',
Gray2 = '#e1e4e5',
Gray4 = '#889499',
Gray5 = '#657277',
Gray7 = '#272c2e',
Gray9 = '#080909',
Expand Down
7 changes: 3 additions & 4 deletions projects/components/src/multi-select/multi-select.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,6 @@
.multi-select-content {
@include dropdown();
min-width: 120px;
max-height: 204px;
Copy link
Contributor

@aaron-steinfeld aaron-steinfeld Jan 21, 2021

Choose a reason for hiding this comment

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

Shouldn't it have some max height? I'd rather it scroll then run off the screen.

Copy link
Contributor Author

@anandtiwary anandtiwary Jan 21, 2021

Choose a reason for hiding this comment

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

How do we choose this value? Different use cases may show different set of options. Do you want to expose an input for this?

Copy link
Contributor Author

@anandtiwary anandtiwary Jan 21, 2021

Choose a reason for hiding this comment

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

Or may be we can set a max height which is equal to available height, that is, from trigger element's position to the bottom on the window.

Copy link
Contributor Author

@anandtiwary anandtiwary Jan 21, 2021

Choose a reason for hiding this comment

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

Let me create a separate story for this change.


.multi-select-option {
display: flex;
Expand All @@ -65,15 +64,15 @@
align-items: center;

.checkbox {
margin-right: 8px;
margin: 0px;
}

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

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

&:hover {
Expand Down
73 changes: 69 additions & 4 deletions projects/components/src/multi-select/multi-select.component.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { fakeAsync, flush } from '@angular/core/testing';
import { IconType } from '@hypertrace/assets-library';
import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
import { MockComponent } from 'ng-mocks';
import { DividerComponent } from '../divider/divider.component';
import { LabelComponent } from '../label/label.component';
import { LetAsyncModule } from '../let-async/let-async.module';
import { SelectJustify } from '../select/select-justify';
Expand All @@ -13,7 +14,7 @@ describe('Multi Select Component', () => {
component: MultiSelectComponent,
imports: [LetAsyncModule],
entryComponents: [SelectOptionComponent],
declarations: [MockComponent(LabelComponent)],
declarations: [MockComponent(LabelComponent), MockComponent(DividerComponent)],
shallow: true
});

Expand Down Expand Up @@ -75,7 +76,7 @@ describe('Multi Select Component', () => {
spectator.tick();

spectator.click('.trigger-content');
const optionElements = spectator.queryAll('.multi-select-option', { root: true });
const optionElements = spectator.queryAll('.multi-select-option:not(.all-options)', { root: true });
expect(spectator.query('.multi-select-content', { root: true })).toExist();
expect(optionElements.length).toBe(3);

Expand Down Expand Up @@ -109,15 +110,79 @@ describe('Multi Select Component', () => {
spectator.tick();
spectator.click('.trigger-content');

const optionElements = spectator.queryAll('.multi-select-option', { root: true });
const optionElements = spectator.queryAll('.multi-select-option:not(.all-options)', { root: true });
spectator.click(optionElements[2]);
spectator.tick();

expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith([selectionOptions[1].value, selectionOptions[2].value]);
expect(spectator.query(LabelComponent)?.label).toEqual('second and 1 more');
flush();
}));

test('should show all checkbox only when enabled by input property', fakeAsync(() => {
spectator = hostFactory(
`
<ht-multi-select>
<ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
</ht-select-option>
</ht-multi-select>`,
{
hostProps: {
options: selectionOptions
}
}
);

spectator.tick();
spectator.click('.trigger-content');

const allOptionElement = spectator.query('.all-options', { root: true });
expect(allOptionElement).not.toExist();

flush();
}));

test('should notify and update selection when all checkbox is selected', fakeAsync(() => {
const onChange = jest.fn();

spectator = hostFactory(
`
<ht-multi-select [selected]="selected" (selectedChange)="onChange($event)" [placeholder]="placeholder" [showAllOptionControl]="showAllOptionControl">
<ht-select-option *ngFor="let option of options" [label]="option.label" [value]="option.value">
</ht-select-option>
</ht-multi-select>`,
{
hostProps: {
options: selectionOptions,
selected: [selectionOptions[1].value],
placeholder: 'Select options',
showAllOptionControl: true,
onChange: onChange
}
}
);

spectator.tick();
spectator.click('.trigger-content');

const allOptionElement = spectator.query('.all-options', { root: true });
expect(allOptionElement).toExist();
spectator.click(allOptionElement!);

expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange).toHaveBeenCalledWith(selectionOptions.map(option => option.value));
expect(spectator.query(LabelComponent)?.label).toEqual('first and 2 more');

// De select all
spectator.click(allOptionElement!);
expect(onChange).toHaveBeenCalledTimes(2);
expect(onChange).toHaveBeenLastCalledWith([]);
expect(spectator.query(LabelComponent)?.label).toEqual('Select options');

flush();
}));

test('should notify but not change trigger label if triggerLabelDisplayMode is placeholder', fakeAsync(() => {
const onChange = jest.fn();

Expand All @@ -141,7 +206,7 @@ describe('Multi Select Component', () => {
expect(spectator.query(LabelComponent)?.label).toEqual('Placeholder');
spectator.click('.trigger-content');

const optionElements = spectator.queryAll('.multi-select-option', { root: true });
const optionElements = spectator.queryAll('.multi-select-option:not(.all-options)', { root: true });
spectator.click(optionElements[2]);

expect(onChange).toHaveBeenCalledTimes(1);
Expand Down
53 changes: 39 additions & 14 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 @@ -40,6 +40,15 @@ import { SelectSize } from '../select/select-size';
</ht-popover-trigger>
<ht-popover-content>
<div class="multi-select-content">
<ng-container *ngIf="this.showAllOptionControl">
<div class="multi-select-option all-options" (click)="this.onAllSelectionChange()">
<input class="checkbox" type="checkbox" [checked]="this.areAllOptionsSelected()" />
<span class="label">All</span>
</div>

<ht-divider></ht-divider>
</ng-container>

<div *ngFor="let item of items" (click)="this.onSelectionChange(item)" class="multi-select-option">
<input class="checkbox" type="checkbox" [checked]="this.isSelectedItem(item)" />
<ht-icon
Expand Down Expand Up @@ -79,6 +88,9 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
@Input()
public justify?: SelectJustify;

@Input()
public showAllOptionControl?: boolean = false;

@Input()
public triggerLabelDisplayMode: TriggerLabelDisplayMode = TriggerLabelDisplayMode.Selection;

Expand Down Expand Up @@ -113,6 +125,33 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
this.setTriggerLabel();
}

public onAllSelectionChange(): void {
this.selected = this.areAllOptionsSelected() ? [] : this.items!.map(item => item.value); // Select All or none
this.setSelection();
}

public areAllOptionsSelected(): boolean {
return this.selected !== undefined && this.items !== undefined && this.selected.length === this.items.length;
}

public onSelectionChange(item: SelectOptionComponent<V>): void {
this.selected = this.isSelectedItem(item)
? this.selected?.filter(value => value !== item.value)
: (this.selected ?? []).concat(item.value);

this.setSelection();
}

public isSelectedItem(item: SelectOptionComponent<V>): boolean {
return this.selected !== undefined && this.selected.filter(value => value === item.value).length > 0;
}

private setSelection(): void {
this.setTriggerLabel();
this.selected$ = this.buildObservableOfSelected();
this.selectedChange.emit(this.selected);
}

private setTriggerLabel(): void {
if (this.triggerLabelDisplayMode === TriggerLabelDisplayMode.Placeholder) {
this.triggerLabel = this.placeholder;
Expand All @@ -130,10 +169,6 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
}
}

public isSelectedItem(item: SelectOptionComponent<V>): boolean {
return this.selected !== undefined && this.selected.filter(value => value === item.value).length > 0;
}

private buildObservableOfSelected(): Observable<SelectOption<V>[] | undefined> {
if (!this.items) {
return EMPTY;
Expand All @@ -145,16 +180,6 @@ export class MultiSelectComponent<V> implements AfterContentInit, OnChanges {
);
}

public onSelectionChange(item: SelectOptionComponent<V>): void {
this.selected = this.isSelectedItem(item)
? this.selected?.filter(value => value !== item.value)
: (this.selected ?? []).concat(item.value);

this.setTriggerLabel();
this.selected$ = this.buildObservableOfSelected();
this.selectedChange.emit(this.selected);
}

// Find the select option object for a value
private findItems(value: V[] | undefined): SelectOption<V>[] | undefined {
if (this.items === undefined) {
Expand Down
3 changes: 2 additions & 1 deletion projects/components/src/multi-select/multi-select.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DividerModule } from '../divider/divider.module';
import { IconModule } from '../icon/icon.module';
import { LabelModule } from '../label/label.module';
import { LetAsyncModule } from '../let-async/let-async.module';
import { PopoverModule } from '../popover/popover.module';
import { MultiSelectComponent } from './multi-select.component';

@NgModule({
imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule],
imports: [FormsModule, CommonModule, IconModule, LabelModule, LetAsyncModule, PopoverModule, DividerModule],
declarations: [MultiSelectComponent],
exports: [MultiSelectComponent]
})
Expand Down