@flower-city-online/itinerary-lib 0.0.9 → 0.0.10

package/src/lib/itinerary-app/modules/search/components/search-chips/search-chips.component.ts

@@ -0,0 +1,75 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Iicon } from '../../../../_interface/icon'; 
+import { ICONS } from '../../../../_constants/constants';
+import { TranslateService } from '@ngx-translate/core';
+ 
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-search-chips',
+  templateUrl: './search-chips.component.html',
+  styleUrl: './search-chips.component.scss',
+})
+export class SearchChipsComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  chipItems: Array<{
+    label: string;
+    selected: boolean;
+    value: string;
+    show: boolean;
+  }> = [];
+  chipSelected: boolean = false;
+
+  @Output() chipItemSelected: EventEmitter<string> = new EventEmitter<string>();
+
+  onSelectionChanged($event: boolean, value: string) {
+    this.chipItems = this.chipItems.map((chipItem) => {
+      if($event) {
+        this.chipSelected = true;
+        if(chipItem.value === value) {
+          this.chipItemSelected.emit(chipItem.value);
+          chipItem.selected = true;
+        } else {
+          chipItem.show = false;
+        }
+      } else if(!$event) {
+        this.chipSelected = false;
+        this.chipItemSelected.emit("");
+        chipItem.selected = false;
+        chipItem.show = true;
+      }
+      return chipItem;
+    });
+    this.cd.detectChanges();
+  }
+
+  initializeChips() {
+    this.chipItems = [{
+      label: this.ts.instant("SIDEBAR.ITINERARIES"),
+      selected: false,
+      value: 'Itineraries',
+      show: true
+    },{
+      label: this.ts.instant("MATCHES"),
+      selected: false,
+      value: 'Matcher',
+      show: true
+    },{
+      label: this.ts.instant("MY_CREATION"),
+      selected: false,
+      value: 'My_creation',
+      show: true
+    }];
+    this.cd.detectChanges();
+  }
+
+  ngOnInit() {
+    this.initializeChips();
+  }
+
+  constructor(
+    private readonly ts: TranslateService,
+    private cd: ChangeDetectorRef
+  ) {
+    
+  }
+}

package/src/lib/itinerary-app/modules/search/components/search-results/search-results.component.html

@@ -0,0 +1,10 @@
+<div class="flex flex-col mt-4 mb-4 gap-3">
+    <ng-container *ngFor="let item of data">
+        <div class="flex row justify-between items-center">
+            <p class="text-white"> {{item.text}} </p>
+            <p class="text-pink-700"> {{item.section}} </p>
+        </div>
+        <div class="border-t border-gray-700 mt-2"></div>
+    </ng-container>
+
+</div>

package/src/lib/itinerary-app/modules/search/components/search-results/search-results.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchResultsComponent } from './search-results.component';
+
+describe('SearchResultsComponent', () => {
+  let component: SearchResultsComponent;
+  let fixture: ComponentFixture<SearchResultsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SearchResultsComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(SearchResultsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/search/components/search-results/search-results.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+import { SearchResult } from '../../../../_interface/searchResults';
+ 
+@Component({
+  selector: 'app-search-results',
+  templateUrl: './search-results.component.html',
+  styleUrl: './search-results.component.css'
+})
+export class SearchResultsComponent {
+  @Input() data!: SearchResult[];
+
+  constructor() {}
+}

package/src/lib/itinerary-app/modules/search/components/serach-bottom-bar/serach-bottom-bar.component.html

@@ -0,0 +1,9 @@
+<div class="search-bottom px-8">
+  <div class="border-t border-gray-700 mb-[15px]"></div>
+  <div class="bottom-bar">
+    <span>
+      <img [ngSrc]="ICONS['searchPlus']" height="18" width="19" />
+    </span>
+    <span class="lightText">Switch to&nbsp;</span>Advanced Search
+  </div>
+</div>

package/src/lib/itinerary-app/modules/search/components/serach-bottom-bar/serach-bottom-bar.component.scss

@@ -0,0 +1,29 @@
+@use "../../../../_styles/colors" as *;
+
+.search-bottom {
+  color: $text-color-5;
+  width: 100%;
+  right: 0%;
+  padding-top: 15px;
+  padding-bottom: 50px;
+  font-size: 12px;
+  bottom: 0;
+  position: fixed;
+}
+
+.bottom-bar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+.bottomBar span img {
+  margin-bottom: 3px;
+  margin-right: 5px;
+  height: 14px !important;
+  width: 15px !important;
+}
+
+.lightText {
+  color: $text-color-5 !important;
+}

package/src/lib/itinerary-app/modules/search/components/serach-bottom-bar/serach-bottom-bar.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SerachBottomBarComponent } from './serach-bottom-bar.component';
+
+describe('SerachBottomBarComponent', () => {
+  let component: SerachBottomBarComponent;
+  let fixture: ComponentFixture<SerachBottomBarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SerachBottomBarComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SerachBottomBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/search/components/serach-bottom-bar/serach-bottom-bar.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Iicon } from '../../../../_interface/icon';
+import { ICONS } from '../../../../_constants/constants';
+ 
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-serach-bottom-bar',
+  templateUrl: './serach-bottom-bar.component.html',
+  styleUrl: './serach-bottom-bar.component.scss',
+})
+export class SerachBottomBarComponent {
+  ICONS: Iicon = ICONS;
+}

package/src/lib/itinerary-app/modules/search/components/serach-clear-history/serach-clear-history.component.html

@@ -0,0 +1,14 @@
+<div>
+  <div class="clear-history-main" (click)="toggleModal()">
+    <span>
+      <img [ngSrc]="ICONS['deleteCross']" height="14" width="15" />
+    </span>
+    <span class="clear-history-label">Clear History</span>
+  </div>
+  <lib-popup
+    [isOpen]="modalClearHistoryService.toggleModal"
+  >
+    <lib-clear-history-popup (clearHistory)="clearHistory()"></lib-clear-history-popup>
+  </lib-popup>
+  <lib-section-separator></lib-section-separator>
+</div>

package/src/lib/itinerary-app/modules/search/components/serach-clear-history/serach-clear-history.component.scss

@@ -0,0 +1,26 @@
+@use "../../../../_styles/colors" as *;
+
+.search-sub-heading {
+  color: $text-color-4;
+}
+
+.clear-history-main {
+  display: flex;
+  justify-content: start;
+  gap: 10px;
+  align-items: center;
+  padding: 5px 0px;
+  width: 100px;
+  margin-top: 10px;
+  font-weight: lighter;
+  position: relative;
+  font-size: 13px !important;
+}
+
+.clearHistoryMain span {
+  margin-bottom: 2px;
+}
+
+.clear-history-label {
+  font-size: var(--font-size-medium);
+}

package/src/lib/itinerary-app/modules/search/components/serach-clear-history/serach-clear-history.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SerachClearHistoryComponent } from './serach-clear-history.component';
+
+describe('SerachClearHistoryComponent', () => {
+  let component: SerachClearHistoryComponent;
+  let fixture: ComponentFixture<SerachClearHistoryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SerachClearHistoryComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SerachClearHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/search/components/serach-clear-history/serach-clear-history.component.ts

@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Iicon } from '../../../../_interface/icon';
+import { ICONS } from '../../../../_constants/constants';
+import { ModalClearHistoryService } from '../../../../_services/modal.clearhistory.service';
+import { AssetsService } from '../../../../_services/assets.service';
+ 
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-serach-clear-history',
+  templateUrl: './serach-clear-history.component.html',
+  styleUrl: './serach-clear-history.component.scss',
+})
+export class SerachClearHistoryComponent {
+  openModal: boolean = false;
+  cssClasses = ['custom-modal-class'];
+  ICONS: Iicon = ICONS;
+
+  constructor(
+    public readonly modalClearHistoryService: ModalClearHistoryService,
+    public readonly assetService: AssetsService
+  ) {
+  }
+
+  toggleModal(): void {
+    // Add your custom CSS classes
+    this.modalClearHistoryService.toggleModal = !this.modalClearHistoryService.toggleModal;
+  }
+
+  clearHistory(): void {
+    this.assetService.clearSearchHistory();
+  }
+}

package/src/lib/itinerary-app/modules/search/pages/main-search/main-search.component.html

@@ -0,0 +1,21 @@
+<div class="main-search-screen pt-5 px-4">
+  <div class="sub-screen">
+    <lib-search-bar class="search-field" [placeholderText]="'SEARCH_ITINERARIES' | translate"
+      (searchStringChange)="handleSearchStringChange($event)" (cleared)="clear()" [searchIcon]="ICONS['dashboardSearch']">
+    </lib-search-bar>
+    <!-- <lib-filter-bar [filters]="filtersss" [savedFilters]="filtersss" [userFiltersList]="userFilterList"
+    [standardFilters]="filtersss" [showAllFilters]="true" (searchStringChange)="search($event)"
+    [activeFilter]="userFilterList[0]"></lib-filter-bar> -->
+    <app-search-chips (chipItemSelected)="categorySelected($event)"></app-search-chips>
+    <div class="p-4">
+      <ng-container *ngIf="isSearching">
+        <app-search-results [data]="filteredData"></app-search-results>
+      </ng-container>
+      <app-recent-searches *ngIf="!isSearching"></app-recent-searches>
+      <app-serach-clear-history *ngIf="!isSearching"></app-serach-clear-history>
+      <div class="border-t border-gray-700 mt-2" *ngIf="!isSearching"></div>
+      <app-quick-actions [hidden]="searchString && !selectedCategory"></app-quick-actions>
+      <app-serach-bottom-bar></app-serach-bottom-bar>
+    </div>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/search/pages/main-search/main-search.component.scss

@@ -0,0 +1,4 @@
+.main-search-screen {
+  height: 100%;
+  overflow-y: auto;
+}

package/src/lib/itinerary-app/modules/search/pages/main-search/main-search.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MainSearchComponent } from './main-search.component';
+
+describe('MainSearchComponent', () => {
+  let component: MainSearchComponent;
+  let fixture: ComponentFixture<MainSearchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [MainSearchComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MainSearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/search/pages/main-search/main-search.component.ts

@@ -0,0 +1,237 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core'; 
+import { Iicon } from '../../../../_interface/icon';
+import { SearchResult } from '../../../../_interface/searchResults';
+import { ApiService } from '../../../../_services/api.service';
+import { ICONS } from '../../../../_constants/constants';
+import { EditCompleteEvent, GridColumnChange, GridDataRequest} from '@naniteninja/ionic-lib';
+import { Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { FilterDataRequest, SelectOption } from '@naniteninja/ionic-lib';
+import { Location } from '@angular/common';
+import { SafeHtml } from '@angular/platform-browser';
+
+
+// import { ItinerariesRoutesEnum } from '../../../../../_enums/ItenariesRoutes.enum';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-main-search',
+  templateUrl: './main-search.component.html',
+  styleUrl: './main-search.component.scss',
+})
+export class MainSearchComponent {
+  ICONS: Iicon = ICONS;
+  isSearching:boolean = false;
+  searchTerm: string = '';
+
+  data : SearchResult[] = [];
+  filteredData: SearchResult[] = [];
+  readonly defaultRowsPerPage: number = 10;
+  readonly defaultRowPerPageOptions: number[] = [10, 25, 50];
+  public searchString: string='';
+  public selectedCategory = '';
+  private componentDestroyed$: Subject<void> = new Subject();
+
+  private searchStringSubject: Subject<string> = new Subject();
+ 
+  @Input() enableSelection :boolean = true;
+  @Input() enableGridFilters :boolean = true;
+  @Input() enableCreate : boolean = false;
+  @Input() enableRefresh : boolean = false;
+  @Input() enableTrash :boolean = false;
+  @Input() isLoading :boolean = false;
+  @Input() totalRecords :number = 0;
+  @Input() rowsPerPage :number = this.defaultRowsPerPage;
+  @Input() first :number = 0;
+  @Input() rowsPerPageOptions: number[] = this.defaultRowPerPageOptions;
+  @Input() actionButtons: string[] = [];
+  @Input() currencyDisplayCode: string = 'USD';
+  @Input() minimumColumnWidth: number = -1;
+
+ @Output() lazyLoad: EventEmitter<GridDataRequest> = new EventEmitter<GridDataRequest>();
+  @Output() columnsChange: EventEmitter<GridColumnChange> = new EventEmitter<GridColumnChange>();
+  @Output() editComplete: EventEmitter<EditCompleteEvent> = new EventEmitter<EditCompleteEvent>();
+  @Output() editChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() selectAllPages: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() createClicked: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() refreshData: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() showTrash: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @Output() excludeItem: EventEmitter<(string | number)[]> = new EventEmitter<(string | number)[]>();
+@Input() isEditInProgress :boolean = true;
+@Input() excludedRows: any[] = [];
+@Input() selectedRows: any[] = [];
+// @Input() selectedRows: any[] = [];
+
+
+// Optional: if using userFilter
+@Output() userFilter = new EventEmitter<any>();
+ filtersss: SelectOption<number>[] = [
+    {
+      label: 'Hello',
+      value: 2,
+      selected: true,
+    },
+  ];
+  visibleComments: SafeHtml[] = [];
+ 
+onSelectAllPages(event: boolean): void {
+  this.selectAllPages.emit(event);
+}
+public emitTrashEvent(event: boolean): void {
+    this.filteredData = [];
+    this.excludedRows = [];
+    this.showTrash.emit(event);
+  }
+// handleApplyFilter(event: any): void {
+//   this.isLoading = false;
+// }
+  constructor(private apiService: ApiService ,
+      private location: Location,
+      private cdr: ChangeDetectorRef
+  ) {
+  }
+  public emitCreateEvent(): void {
+    this.createClicked.emit(true);
+  }
+ public emitRefreshEvent(): void {
+    this.refreshData.emit(true);
+  }
+  
+  ngOnInit() {
+    // this.validateConfig();
+    this.getData();
+
+    this.searchStringSubject
+      .asObservable()
+      .pipe(debounceTime(500), distinctUntilChanged(), takeUntil(this.componentDestroyed$))
+      .subscribe((searchString) => {
+        this.searchString = searchString;
+        this.first = 0;
+        // this.emitLazyLoad();
+      });
+      
+      // this.sanitizer.bypassSecurityTrustHtml(comment),
+    
+    // this.createMenuItems(!!this.groupByField);
+    // this.emitGridMiscellaneousData();
+  }
+   userFilterList: FilterDataRequest[] = [
+    {
+      name: 'Filter by Name Ascending',
+      projectGridFilterId: '123',
+      collectionName: 'Employees',
+      userFilters: [
+        {
+          publicFieldName: 'Name',
+          operatorType: 'Contains',
+          values: ['John'],
+        },
+      ],
+      sort: {
+        field: 'Name',
+        direction: 'Ascending',
+      },
+      order: 1,
+    },
+    {
+      name: 'Filter by Department and Salary Descending',
+      projectGridFilterId: '456',
+      collectionName: 'Employees',
+      userFilters: [
+        {
+          publicFieldName: 'Department',
+          operatorType: 'Equals',
+          values: ['IT'],
+        },
+        {
+          publicFieldName: 'Salary',
+          operatorType: 'GreaterThan',
+          values: [50000],
+        },
+      ],
+      sort: {
+        field: 'Salary',
+        direction: 'Descending',
+      },
+      order: 2,
+    },
+  ];
+  // private emitLazyLoad() {
+  //   const request: GridDataRequest = {
+  //     from: this.first,
+  //     size: this.rowsPerPage,
+  //     userFilters: this.userFilter,
+  //     sortField: this.allColumns?.find((c) => c.name == this.sortField)?.defaultSortColumn ?? this.sortField,
+  //     sortDirection: this.parsedSortOrder > 0 ? 'Ascending' : 'Descending',
+  //     groupByField: this.allColumns?.find((c) => c.name == this.groupByField?.name)?.defaultSortColumn ?? this.groupByField?.name,
+  //     searchString: this.searchString,
+  //   };
+  //   this.lazyLoad.emit(request);
+  // }
+  search(e: string): void {
+    this.searchTerm = e.toLowerCase().trim();
+
+    if (!this.searchTerm) {
+      // this.visibleComments = this.comments.map((comment) =>
+      //   this.sanitizer.bypassSecurityTrustHtml(comment),
+      // );
+      return;
+    }
+
+   
+
+  
+
+    
+  }
+  validateConfig() {
+    throw new Error('Method not implemented.');
+  }
+
+  getData(): void {
+    this.apiService.get('/assets/searchData.json').subscribe((data) => {
+      this.data = data as SearchResult[];
+    });
+  }
+
+  categorySelected(category: string) {
+    this.selectedCategory = category;
+    if(category) {
+      this.filteredData = this.filteredData.filter((item) => {
+        return item.section === category;
+      });
+      this.cdr.detectChanges();
+    } else if(this.searchString) {
+      this.filteredData = this.data.filter(item =>
+        item.text.toLowerCase().startsWith(this.searchString.toLowerCase())
+      );
+      this.cdr.detectChanges();
+    }
+    
+  }
+
+  handleSearchStringChange($event: any) {
+    this.searchString = $event;
+    if ($event) {
+      this.isSearching = true;
+      this.filteredData = this.data.filter(item =>
+        item.text.toLowerCase().startsWith($event.toLowerCase())
+        && (this.selectedCategory ? (this.selectedCategory == item.section) : true)
+      );
+      this.cdr.detectChanges();
+    } else {
+      this.isSearching = false;
+      this.filteredData = [];
+      this.cdr.detectChanges();
+    }
+  }
+ searchs(query: string): void {
+    this.searchStringSubject.next(query);
+  }
+
+
+ 
+  //NAVIGATIONS
+  navToBack = () => this.location.back();
+  clear(): void {}
+}

package/src/lib/itinerary-app/modules/search/search-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MainSearchComponent } from './pages/main-search/main-search.component';
+
+const routes: Routes = [{ path: '', component: MainSearchComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SearchRoutingModule {}

package/src/lib/itinerary-app/modules/search/search.component.html

@@ -0,0 +1,3 @@
+<div class="min-screen-main w-screen h-screen max-padd-container">
+  <router-outlet></router-outlet>
+</div>

package/src/lib/itinerary-app/modules/search/search.component.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchComponent } from './search.component';
+
+describe('SearchComponent', () => {
+  let component: SearchComponent;
+  let fixture: ComponentFixture<SearchComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SearchComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(SearchComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/itinerary-app/modules/search/search.component.ts

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-search',
+  templateUrl: './search.component.html',
+  styleUrl: './search.component.scss',
+})
+export class SearchComponent {}