feat: adding all option and fixing some styling (#514)

* feat: adding all option and fixing some styling

* refactor: addressing review comments

Author: anandtiwary

projects/common/src/color/color.ts

@@ -7,6 +7,7 @@ export const enum Color {
   BlueGray4 = '#4b5f77',
   Gray1 = '#f4f5f5',
   Gray2 = '#e1e4e5',
+  Gray4 = '#889499',
   Gray5 = '#657277',
   Gray7 = '#272c2e',
   Gray9 = '#080909',

projects/components/src/multi-select/multi-select.component.scss

@@ -54,7 +54,6 @@
 .multi-select-content {
   @include dropdown();
   min-width: 120px;
-  max-height: 204px;
 
   .multi-select-option {
     display: flex;
@@ -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 {

projects/components/src/multi-select/multi-select.component.test.ts

@@ -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';
@@ -13,7 +14,7 @@ describe('Multi Select Component', () => {
     component: MultiSelectComponent,
     imports: [LetAsyncModule],
     entryComponents: [SelectOptionComponent],
-    declarations: [MockComponent(LabelComponent)],
+    declarations: [MockComponent(LabelComponent), MockComponent(DividerComponent)],
     shallow: true
   });
 
@@ -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);
 
@@ -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();
 
@@ -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);

projects/components/src/multi-select/multi-select.component.ts

@@ -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
@@ -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;
 
@@ -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;
@@ -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;
@@ -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) {

projects/components/src/multi-select/multi-select.module.ts

@@ -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]
 })