@flower-city-online/itinerary-lib 0.0.30 → 0.0.32

package/src/lib/itinerary-app/modules/search/components/recent-searches-item/recent-searches-item.component.spec.ts

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

package/src/lib/itinerary-app/modules/search/components/recent-searches-item/recent-searches-item.component.ts

@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Iicon } from '../../../../_interface/icon';
+import { ICONS } from '../../../../_constants/constants';
+ 
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-recent-searches-item',
+    templateUrl: './recent-searches-item.component.html',
+    styleUrl: './recent-searches-item.component.scss',
+    standalone: false
+})
+export class RecentSearchesItemComponent {
+  ICONS: Iicon = ICONS;
+}

package/src/lib/itinerary-app/modules/search/components/recent-searches-list/recent-searches-list.component.html

@@ -0,0 +1,6 @@
+<div class="mt-3">
+  <app-recent-searches-item></app-recent-searches-item>
+  <app-recent-searches-item></app-recent-searches-item>
+  <app-recent-searches-item></app-recent-searches-item>
+  <app-recent-searches-item></app-recent-searches-item>
+</div>

package/src/lib/itinerary-app/modules/search/components/recent-searches-list/recent-searches-list.component.spec.ts

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

package/src/lib/itinerary-app/modules/search/components/recent-searches-list/recent-searches-list.component.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-recent-searches-list',
+    templateUrl: './recent-searches-list.component.html',
+    styleUrl: './recent-searches-list.component.scss',
+    standalone: false
+})
+export class RecentSearchesListComponent {}

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

@@ -0,0 +1,24 @@
+<div class="suggestion mt-6 pr-2 pl-2">
+  <p class="search-sub-heading">
+    <ng-container *ngIf="chipSelected">
+      {{ "SEARCHING" | translate }}
+    </ng-container>
+    <ng-container *ngIf="!chipSelected">
+      I'm searching for...
+    </ng-container>
+  </p>
+  <div class="mt-2">
+    <div class="search-chip flex gap-2 flex-wrap">
+      <ng-container *ngFor="let item of chipItems;">
+        <lib-selectable-badge
+          *ngIf="item.show"
+          [label]="item.label"
+          [selected]="item.selected"
+          (selectionChanged)="onSelectionChanged($event, item.value)"
+        >
+        </lib-selectable-badge>
+      </ng-container>
+    </div>
+  </div>
+</div>
+<div class="border-t border-gray-700 mt-4 mx-2"></div>

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

@@ -0,0 +1,6 @@
+@use "../../../../_styles/colors" as *;
+
+.search-sub-heading {
+  color: $text-color-4;
+  font-size: var(--font-size-small);
+}

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

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

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

@@ -0,0 +1,82 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnInit, Output, Input } 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',
+    standalone: false
+})
+export class SearchChipsComponent implements OnInit {
+  ICONS: Iicon = ICONS;
+  chipItems: Array<{
+    label: string;
+    selected: boolean;
+    value: string;
+    show: boolean;
+  }> = [];
+  chipSelected: boolean = false;
+
+  @Input() selectedChip: string = '';
+  @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: this.selectedChip === "Itineraries",
+      value: 'Itineraries',
+      show: true
+    }, {
+      label: this.ts.instant("MATCHES"),
+      selected: this.selectedChip === "Matcher",
+      value: 'Matcher',
+      show: true
+    }, {
+      label: this.ts.instant("ITINERARY_DETAIL.COMMENTS"),
+      selected: this.selectedChip === "Comments",
+      value: 'Comments',
+      show: true
+    }, {
+      label: this.ts.instant("MY_CREATION"),
+      selected: this.selectedChip === "My_creation",
+      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,14 @@
+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',
+    standalone: false
+})
+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,14 @@
+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',
+    standalone: false
+})
+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,33 @@
+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',
+    standalone: false
+})
+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,18 @@
+<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>
+    <app-search-chips [selectedChip]="selectedCategory" (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();
+  });
+});