ca-components 2.1.1421 → 2.1.1431

package/lib/components/ca-search-multiple-states/ca-search-multiple-states.component.ts

@@ -0,0 +1,380 @@
+import {
+    Component,
+    ElementRef,
+    EventEmitter,
+    HostListener,
+    Input,
+    OnDestroy,
+    OnInit,
+    Output,
+    ViewChild,
+} from '@angular/core';
+import { NgClass } from '@angular/common';
+
+// Modules
+import { AngularSvgIconModule } from 'angular-svg-icon';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { FormsModule } from '@angular/forms';
+
+// SvgRoutes
+import { SearchMultipleStatesRoutes } from './utils/svg-routes';
+
+// Components
+import { CaAppTooltipV2Component } from '../ca-app-tooltip-v2/ca-app-tooltip-v2.component';
+
+// Animation
+import { toggleAnimation } from '../../animations/expand-search-button.animation';
+
+//Service
+import { CaSearchMultipleStatesService } from './utils/services';
+
+//Pipes
+import { ChipClassPipe } from './utils/pipes/';
+
+//Enums
+import {
+    ChipsColorsEnum,
+    KeyboardEventCommands,
+    SearchCountEnum,
+} from './utils/enums';
+
+//Model
+import { ChipsModel, ITabData } from './models';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+    selector: 'app-ca-search-multiple-states',
+    animations: [toggleAnimation],
+    imports: [
+        // Angular
+        NgClass,
+        AngularSvgIconModule,
+        // Modules
+        FormsModule,
+        NgbTooltipModule,
+        // Components
+        CaAppTooltipV2Component,
+        // Pipes
+        ChipClassPipe,
+    ],
+    templateUrl: './ca-search-multiple-states.component.html',
+    styleUrls: ['./ca-search-multiple-states.component.scss'],
+})
+export class CaSearchMultipleStatesComponent implements OnInit, OnDestroy {
+    @HostListener('document:click', ['$event'])
+    public onDocumentClick(event: MouseEvent): void {
+        if (
+            !this.elementRef.nativeElement.contains(event.target) &&
+            this.openSearch &&
+            !this.isAlwaysOpenSearch
+        ) {
+            setTimeout(() => {
+                this.toggleSearch();
+            }, 0);
+        }
+    }
+
+    @ViewChild('tableSearchInput', { static: false })
+    tableSearchInput!: ElementRef;
+
+    @Input() toolbarSearch?: boolean = true;
+    @Input() selectedTabData!: ITabData;
+    @Input() searchType!: string;
+    @Input() isAlwaysOpenSearch: boolean = false;
+    @Input() set isDetailsPageSearch(value: boolean) {
+        this._isDetailsPageSearch = value;
+        this.openSearch = value;
+    }
+
+    @Output() close = new EventEmitter<void>();
+    @Output() onSearch: EventEmitter<string> = new EventEmitter();
+
+    public _isDetailsPageSearch!: boolean;
+    public chips: ChipsModel[] = [];
+    public openSearch!: boolean;
+    public searchText: string = '';
+    public searchIsActive: boolean = false;
+    public isInputFocused: boolean = false;
+    public chipToDelete: number = -1;
+    private chipsForHighlightSearch!: string[];
+
+    private typingTimeout!: ReturnType<typeof setTimeout>;
+
+    private destroy$ = new Subject<void>();
+
+    constructor(
+        private searchMultipleStatesService: CaSearchMultipleStatesService,
+        private elementRef: ElementRef
+    ) {}
+
+    ngOnInit(): void {
+        this.initDeleteAllChipsListener();
+    }
+
+    public initDeleteAllChipsListener(): void {
+        this.searchMultipleStatesService.deleteAllChips$
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((value) => {
+                this.deleteAllChips();
+            });
+    }
+
+    public toggleSearch() {
+        if (this.chips.length === 3) this.openSearch = false;
+        else {
+            this.openSearch = !this.openSearch;
+            if (!this.openSearch) this.close.emit();
+
+            if (this.openSearch && this.chips.length < 3)
+                setTimeout(() => {
+                    this.tableSearchInput.nativeElement.focus();
+                }, 100);
+        }
+    }
+
+    public onTyping(event: MouseEvent | KeyboardEvent): void {
+        clearTimeout(this.typingTimeout);
+
+        const searchNumber = !this.chips.length
+            ? SearchCountEnum.SEARCH_ONE
+            : this.chips.length === 1
+              ? SearchCountEnum.SEARCH_TWO
+              : SearchCountEnum.SEARCH_THREE;
+
+        const keyboardEvent = this.isKeyboardEvent(event)
+            ? (event as KeyboardEvent)
+            : null;
+
+        if (!keyboardEvent || !keyboardEvent.key) {
+            this.searchIsActive = true;
+            this.searchText = SearchCountEnum.EMPTY_PLACE_HOLDER;
+            this.sendHighlightSearchOnTyping();
+
+            this.emitSearchEvent();
+
+            this.searchMultipleStatesService.sendCurrentSearchTableData({
+                chip: searchNumber,
+                search: this.searchText,
+                searchType: this.searchType,
+            });
+        }
+
+        if (
+            keyboardEvent &&
+            keyboardEvent.key !== KeyboardEventCommands.ENTER
+        ) {
+            this.typingTimeout = setTimeout(() => {
+                if (this.searchText.length >= 3) {
+                    this.searchIsActive = true;
+
+                    this.sendHighlightSearchOnTyping();
+
+                    this.searchMultipleStatesService.sendCurrentSearchTableData(
+                        {
+                            chip: searchNumber,
+                            search: this.searchText,
+                            searchType: this.searchType,
+                        }
+                    );
+                } else if (this.searchIsActive && this.searchText.length < 3) {
+                    this.searchIsActive = false;
+
+                    this.sendHighlightSearchOnEnter();
+
+                    this.searchMultipleStatesService.sendCurrentSearchTableData(
+                        {
+                            chip: searchNumber,
+                            doReset: true,
+                            all: searchNumber === SearchCountEnum.SEARCH_ONE,
+                            searchType: this.searchType,
+                        }
+                    );
+                }
+
+                this.emitSearchEvent();
+            }, 500);
+        }
+    }
+
+    private isKeyboardEvent(event: Event): event is KeyboardEvent {
+        return (event as KeyboardEvent).key !== undefined;
+    }
+
+    public onEnter(): void {
+        if (!this.toolbarSearch) return;
+
+        if (this.chips.length < 3 && !this.checkChips()) {
+            this.chips.push({
+                searchText: this.searchText,
+                color: this.getChipColor(this.chips.length),
+                canDoAnimation: true,
+                query: this.getChipQuery(this.chips.length),
+            });
+
+            this.sendHighlightSearchOnEnter();
+
+            this.emitSearchEvent();
+
+            this.searchMultipleStatesService.sendCurrentSearchTableData({
+                chipAdded: true,
+                search: this.searchText,
+                query: this.getChipQuery(this.chips.length - 1),
+                searchType: this.searchType,
+            });
+            this.chips.length === 3 && !this._isDetailsPageSearch
+                ? this.toggleSearch()
+                : null;
+            this.chipToDelete = -1;
+            this.searchText = '';
+            this.searchIsActive = false;
+        }
+    }
+
+    private sendHighlightSearchOnTyping(): void {
+        this.chipsForHighlightSearch = [];
+
+        this.chips.map((chip) => {
+            this.chipsForHighlightSearch.push(chip.searchText);
+        });
+
+        if (this.chips.length <= 2)
+            this.chipsForHighlightSearch.push(this.searchText);
+
+        this.searchMultipleStatesService.sendChipsForHighlightSearchToTable(
+            this.chipsForHighlightSearch
+        );
+    }
+
+    private sendHighlightSearchOnEnter() {
+        this.chipsForHighlightSearch = [];
+
+        this.chips.map((chip) => {
+            this.chipsForHighlightSearch.push(chip.searchText);
+        });
+
+        this.searchMultipleStatesService.sendChipsForHighlightSearchToTable(
+            this.chipsForHighlightSearch
+        );
+
+        this.searchMultipleStatesService.emitSelectedChips(
+            this.chipsForHighlightSearch
+        );
+    }
+
+    public handleClearClick(): void {
+        if (this.searchText) this.searchText = '';
+    }
+
+    private checkChips(): boolean {
+        let hasSearchText = false;
+
+        this.chips.map((chip) => {
+            if (chip.searchText === this.searchText) hasSearchText = true;
+        });
+
+        return hasSearchText;
+    }
+
+    public onDeleteChip(index: number) {
+        this.chips.splice(index, 1);
+
+        this.sendHighlightSearchOnEnter();
+
+        if (this.chips.length) {
+            this.chips = this.chips.map((chip, i) => {
+                chip = {
+                    searchText: chip.searchText,
+                    color: this.getChipColor(i),
+                    canDoAnimation: false,
+                    query: this.getChipQuery(i),
+                };
+
+                return chip;
+            });
+        }
+
+        if (this.openSearch)
+            setTimeout(() => {
+                this.tableSearchInput.nativeElement.focus();
+            }, 100);
+
+        this.searchMultipleStatesService.sendCurrentSearchTableData({
+            isChipDelete: true,
+            search: this.searchText?.length >= 3 ? this.searchText : undefined,
+            addToQuery: this.getChipQuery(this.chips.length),
+            querys: [
+                SearchCountEnum.SEARCH_ONE,
+                SearchCountEnum.SEARCH_THREE,
+                SearchCountEnum.SEARCH_THREE,
+            ],
+            chips: this.chips,
+            searchType: this.searchType,
+        });
+    }
+
+    public deleteAllChips(): void {
+        this.chips = [];
+        this.chipToDelete = -1;
+
+        this.searchMultipleStatesService.sendChipsForHighlightSearchToTable([]);
+        this.searchMultipleStatesService.emitSelectedChips([]);
+
+        if (this.openSearch)
+            setTimeout(() => {
+                this.tableSearchInput.nativeElement.focus();
+            }, 100);
+
+        this.searchMultipleStatesService.sendCurrentSearchTableData({
+            isChipDelete: true,
+            search: this.searchText?.length >= 3 ? this.searchText : undefined,
+            addToQuery: this.getChipQuery(this.chips.length),
+            querys: [
+                SearchCountEnum.SEARCH_ONE,
+                SearchCountEnum.SEARCH_THREE,
+                SearchCountEnum.SEARCH_THREE,
+            ],
+            chips: this.chips,
+            searchType: this.searchType,
+        });
+    }
+
+    private getChipColor(index: number): string {
+        const chipsColors: string[] = Object.values(ChipsColorsEnum);
+
+        return chipsColors[index];
+    }
+
+    private getChipQuery(index: number): string {
+        const chipsQuery = [
+            SearchCountEnum.SEARCH_ONE,
+            SearchCountEnum.SEARCH_THREE,
+            SearchCountEnum.SEARCH_THREE,
+        ];
+
+        return chipsQuery[index];
+    }
+
+    public getSvgPath(
+        propertyName: keyof typeof SearchMultipleStatesRoutes
+    ): string {
+        return SearchMultipleStatesRoutes[propertyName] as string;
+    }
+
+    public capitalizeInput(text: string): void {
+        this.searchText = text.charAt(0).toUpperCase() + text.slice(1);
+    }
+
+    public emitSearchEvent(): void {
+        if (this._isDetailsPageSearch) this.onSearch.emit(this.searchText);
+    }
+
+    public onInputFocus(isFocused: boolean): void {
+        this.isInputFocused = isFocused;
+    }
+
+    ngOnDestroy(): void {
+        this.searchMultipleStatesService.sendCurrentSearchTableData(null);
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}

package/lib/components/ca-search-multiple-states/ca-search-multiple-states.stories.ts

@@ -0,0 +1,180 @@
+import {
+  type Meta,
+  type StoryObj,
+  applicationConfig,
+} from '@storybook/angular';
+//modules
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { AngularSvgIconModule } from 'angular-svg-icon';
+import { importProvidersFrom } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+//components
+import { CaSearchMultipleStatesComponent } from '../ca-search-multiple-states/ca-search-multiple-states.component';
+import { ChipsColorsEnum } from './utils/enums/chips-colors.enum';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta: Meta<CaSearchMultipleStatesComponent> = {
+  title: 'example/CaSearchMultipleStatesComponent',
+  component: CaSearchMultipleStatesComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom(
+          BrowserAnimationsModule,
+          HttpClientModule,
+          AngularSvgIconModule.forRoot()
+        ),
+      ],
+    }),
+  ],
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<CaSearchMultipleStatesComponent>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const SearchMultipleStatesDefault: Story = {
+  args: {
+    searchType: 'tabel',
+    selectedTabData: {
+      title: 'active',
+      extended: false,
+      field: 'active',
+      isActive: true,
+      length: 27,
+      stateName: 'drivers',
+      gridNameTitle: 'Drivers',
+      tableConfiguration: 'driver',
+      data: {},
+      gridColumns: {
+        ngTemplate: 'checkbox',
+        title: '',
+        field: 'select',
+        name: 'Select',
+        hidden: false,
+        width: 28,
+        isPined: true,
+        filter: '',
+        isNumeric: false,
+        index: 0,
+        sortable: false,
+        isActionColumn: true,
+        isSelectColumn: true,
+        avatar: null,
+        progress: null,
+        hoverTemplate: null,
+        filterable: false,
+        disabled: false,
+        export: false,
+        resizable: false,
+        tableHeadTitle: '',
+      },
+    },
+  },
+};
+
+export const SearchMultipleStatesSearchOne: Story = {
+  args: {
+    chips: [
+      {
+        query: 'One',
+        color: ChipsColorsEnum.FIRST_CHIP_COLOR,
+        searchText: 'One',
+        canDoAnimation: true,
+      },
+    ],
+    searchType: 'tabel',
+    selectedTabData: {
+      title: 'active',
+      extended: false,
+      field: 'active',
+      isActive: true,
+      length: 27,
+      stateName: 'drivers',
+      gridNameTitle: 'Drivers',
+      tableConfiguration: 'driver',
+      data: {},
+      gridColumns: {
+        ngTemplate: 'checkbox',
+        title: '',
+        field: 'select',
+        name: 'Select',
+        hidden: false,
+        width: 28,
+        isPined: true,
+        filter: '',
+        isNumeric: false,
+        index: 0,
+        sortable: false,
+        isActionColumn: true,
+        isSelectColumn: true,
+        avatar: null,
+        progress: null,
+        hoverTemplate: null,
+        filterable: false,
+        disabled: false,
+        export: false,
+        resizable: false,
+        tableHeadTitle: '',
+      },
+    },
+  },
+};
+
+export const SearchMultipleStatesSearchTwo: Story = {
+  args: {
+    chips: [
+      {
+        query: 'One',
+        color: ChipsColorsEnum.FIRST_CHIP_COLOR,
+        searchText: 'One',
+        canDoAnimation: true,
+      },
+      {
+        query: 'Two',
+        color: ChipsColorsEnum.SECOND_CHIP_COLOR,
+        searchText: 'Two',
+        canDoAnimation: true,
+      },
+    ],
+    searchType: 'tabel',
+  },
+};
+
+export const SearchMultipleStatesSearchThree: Story = {
+  args: {
+    chips: [
+      {
+        query: 'One',
+        color: ChipsColorsEnum.FIRST_CHIP_COLOR,
+        searchText: 'One',
+        canDoAnimation: true,
+      },
+      {
+        query: 'Two',
+        color: ChipsColorsEnum.SECOND_CHIP_COLOR,
+        searchText: 'Two',
+        canDoAnimation: true,
+      },
+      {
+        query: 'Three',
+        color: ChipsColorsEnum.THIRD_CHIP_COLOR,
+        searchText: 'Three',
+        canDoAnimation: true,
+      },
+    ],
+    searchType: 'tabel',
+  },
+};
+
+export const SearchMultipleStatesSearchDetails: Story = {
+  args: {
+    searchType: 'Contact',
+    toolbarSearch: false,
+    isDetailsPageSearch: true,
+    selectedTabData: {
+      gridNameTitle: 'Contact'
+    }
+  },
+};

package/lib/components/ca-search-multiple-states/models/chips.model.ts

@@ -0,0 +1,6 @@
+export interface ChipsModel {
+  searchText: string;
+  color: string;
+  canDoAnimation: boolean;
+  query: string;
+}

package/lib/components/ca-search-multiple-states/models/grid-column.model.ts

@@ -0,0 +1,23 @@
+export interface GridColumn {
+  avatar: null | string;
+  disabled: boolean;
+  export: boolean;
+  field: string;
+  filter: string;
+  filterable: boolean;
+  hidden: boolean;
+  hoverTemplate: null | string;
+  index: number;
+  isActionColumn: boolean;
+  isNumeric: boolean;
+  isPined: boolean;
+  isSelectColumn: boolean;
+  name: string;
+  ngTemplate: string;
+  progress: null | string;
+  resizable: boolean;
+  sortable: boolean;
+  tableHeadTitle: string;
+  title: string;
+  width: number;
+}

package/lib/components/ca-search-multiple-states/models/index.ts

@@ -0,0 +1,3 @@
+export * from './chips.model';
+export * from './grid-column.model';
+export * from './tab-data.model';

package/lib/components/ca-search-multiple-states/models/tab-data.model.ts

@@ -0,0 +1,14 @@
+import { GridColumn } from './grid-column.model';
+
+export interface ITabData {
+    extended?: boolean;
+    field?: string;
+    gridNameTitle?: string;
+    isActive?: boolean;
+    length?: number;
+    stateName?: string;
+    tableConfiguration?: string;
+    title?: string;
+    gridColumns?: GridColumn;
+    data?: any; // Leave this for now
+}

package/lib/components/ca-search-multiple-states/utils/config/index.ts

@@ -0,0 +1 @@
+export * from './input-config';

package/lib/components/ca-search-multiple-states/utils/config/input-config.ts

@@ -0,0 +1,10 @@
+import { ICaInput } from '../../../ca-input/config/ca-input.config';
+
+export const inputConfig: ICaInput = {
+    name: 'search-multiple-states',
+    label: 'Find',
+    isDisabled: false,
+    type: 'search-multiple-states',
+    blackInput: true,
+    hideClear: true,
+};

package/lib/components/ca-search-multiple-states/utils/enums/chips-colors.enum.ts

@@ -0,0 +1,5 @@
+export enum ChipsColorsEnum {
+  FIRST_CHIP_COLOR = '26A690',
+  SECOND_CHIP_COLOR = 'AB47BC',
+  THIRD_CHIP_COLOR = 'FFA726',
+}

package/lib/components/ca-search-multiple-states/utils/enums/index.ts

@@ -0,0 +1,3 @@
+export * from './chips-colors.enum';
+export * from './keyboard-event-commands.enum';
+export * from './search-count.enum';

package/lib/components/ca-search-multiple-states/utils/enums/keyboard-event-commands.enum.ts

@@ -0,0 +1,3 @@
+export enum KeyboardEventCommands {
+  ENTER = 'Enter',
+}

package/lib/components/ca-search-multiple-states/utils/enums/search-count.enum.ts

@@ -0,0 +1,6 @@
+export enum SearchCountEnum {
+  SEARCH_ONE = 'searchOne',
+  SEARCH_TWO = 'searchTwo',
+  SEARCH_THREE = 'searchThree',
+  EMPTY_PLACE_HOLDER = '',
+}

package/lib/components/ca-search-multiple-states/utils/pipes/chip-class.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'chipClass',
+  standalone: true,
+})
+export class ChipClassPipe implements PipeTransform {
+  transform(
+    i: number,
+    chips: any[],
+    chipToDelete: number
+  ): { [key: string]: boolean } {
+    return {
+      'first-chip-animation': i === 0 && chips[0]?.canDoAnimation,
+      'second-chip-animation': i === 1 && chips[1]?.canDoAnimation,
+      'third-chip-animation': i === 2 && chips[2]?.canDoAnimation,
+      'first-chip-toolbar-style': i === 0,
+      'second-chip-toolbar-style': i === 1,
+      'third-chip-toolbar-style': i === 2,
+      'delete-chip-style': chipToDelete === i,
+    };
+  }
+}

package/lib/components/ca-search-multiple-states/utils/pipes/index.ts

@@ -0,0 +1 @@
+export * from './chip-class.pipe';

package/lib/components/ca-search-multiple-states/utils/services/index.ts

@@ -0,0 +1 @@
+export * from './search-multiple-states.service';