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

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

@@ -0,0 +1,207 @@
+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 { Router } from '@angular/router';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-main-search',
+    templateUrl: './main-search.component.html',
+    styleUrl: './main-search.component.scss',
+    standalone: false
+})
+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: string = '';
+  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;
+
+  // Optional: if using userFilter
+  @Output() userFilter = new EventEmitter<{
+    publicFieldName: string;
+    operatorType: string;
+    values: string[];
+  }>();
+  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.showTrash.emit(event);
+  }
+  constructor(private apiService: ApiService,
+    private location: Location,
+    private cdr: ChangeDetectorRef,
+    private router: Router
+  ) { }
+  public emitCreateEvent(): void {
+    this.createClicked.emit(true);
+  }
+  public emitRefreshEvent(): void {
+    this.refreshData.emit(true);
+  }
+
+  ngOnInit() {
+    this.getData();
+
+    this.searchStringSubject
+      .asObservable()
+      .pipe(debounceTime(500), distinctUntilChanged(), takeUntil(this.componentDestroyed$))
+      .subscribe((searchString) => {
+        this.searchString = searchString;
+        this.first = 0;
+      });
+
+    const nav = this.router.getCurrentNavigation();
+    if (nav?.extras.state && nav.extras.state['selectedCategory']) {
+      const category = nav.extras.state['selectedCategory'];
+      this.categorySelected(category);
+    }
+  }
+  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,
+    },
+  ];
+  search(e: string): void {
+    this.searchTerm = e.toLowerCase().trim();
+
+    if (!this.searchTerm) {
+      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: string) {
+    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,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-search',
+    templateUrl: './search.component.html',
+    styleUrl: './search.component.scss',
+    standalone: false
+})
+export class SearchComponent {}

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

@@ -0,0 +1,60 @@
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  ButtonsModule,
+  LibModalModule,
+  SearchBarModule,
+  SectionSeparatorComponent,
+  GridToolbarModule,
+  GridFiltersModule,
+  GridModule
+  
+  
+} from '@naniteninja/ionic-lib'; 
+import { SharedModule } from '../../shared/shared.module';
+import { QuickActionsComponent } from './components/quick-actions/quick-actions.component';
+import { RecentSearchesItemComponent } from './components/recent-searches-item/recent-searches-item.component';
+import { RecentSearchesListComponent } from './components/recent-searches-list/recent-searches-list.component';
+import { RecentSearchesComponent } from './components/recent-searches/recent-searches.component';
+import { SearchChipsComponent } from './components/search-chips/search-chips.component';
+import { SearchResultsComponent } from './components/search-results/search-results.component';
+import { SerachBottomBarComponent } from './components/serach-bottom-bar/serach-bottom-bar.component';
+import { SerachClearHistoryComponent } from './components/serach-clear-history/serach-clear-history.component';
+import { MainSearchComponent } from './pages/main-search/main-search.component';
+import { SearchRoutingModule } from './search-routing.module';
+import { SearchComponent } from './search.component';
+import { ClearHistoryPopupComponent } from './components/clear-history-popup/clear-history-popup.component'; 
+
+@NgModule({
+  declarations: [
+    SearchComponent,
+    SearchChipsComponent,
+    RecentSearchesComponent,
+    QuickActionsComponent,
+    MainSearchComponent,
+    RecentSearchesListComponent,
+    RecentSearchesItemComponent,
+    SerachBottomBarComponent,
+    SerachClearHistoryComponent,
+    SearchResultsComponent,
+    ClearHistoryPopupComponent
+  ],
+  imports: [
+    SearchBarModule,
+    TranslateModule,
+    ButtonsModule,
+    CommonModule,
+    SearchRoutingModule,
+    SharedModule,
+    SectionSeparatorComponent,
+    NgOptimizedImage,
+    LibModalModule, 
+    GridToolbarModule ,
+    GridModule,
+  GridFiltersModule,
+
+  ],
+})
+export class SearchModule {}

package/src/lib/itinerary-app/modules/user/profile/profile.component.html

@@ -0,0 +1,34 @@
+<div class="ps-5 pe-5">
+  <app-header (firstButton)="back()" [heading]="'PROFILE.PROFILE' | translate">
+  </app-header>
+
+  <div class="mt-3 flex justify-center">
+    <img class="profile-pic" [src]="ICONS['dummyUserProfile']" alt="profile" />
+  </div>
+
+  <h3 class="mt-4 text-center">Jonathan</h3>
+
+  <div class="mt-2 flex justify-center items-center">
+    <img class="icon me-1" [src]="ICONS['calendar']" alt="calender" />
+    <span>23 year old</span>
+    <img class="icon ms-2 me-1" [src]="ICONS['locationLight']" alt="location" />
+    <span>New York City, NY</span>
+  </div>
+
+  <hr />
+
+  <div>
+    <h4 class="mb-5">{{ "PROFILE.ABOUT_ME" | translate }}</h4>
+    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam
+      minus officia provident in iusto nostrum nesciunt enim? At minima
+      doloremque, reiciendis suscipit magnam quam quae in vitae soluta? Fugiat,
+      adipisci!</span>
+  </div>
+
+  <hr />
+
+  <h4 class="mb-5">{{ "PROFILE.PASSION" | translate }}</h4>
+  <div class="flex flex-wrap gap-4">
+    <lib-selectable [options]="passions"></lib-selectable>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/user/profile/profile.component.scss

@@ -0,0 +1,51 @@
+@use "../../../_styles/colors" as *;
+
+.profile-pic {
+  border-radius: 500px;
+  height: 79px !important;
+  width: 79px !important;
+}
+
+h3 {
+  font-family: Calistoga;
+  font-weight: 400;
+  font-size: 19.69px;
+  line-height: 25.6px;
+  letter-spacing: 0%;
+  text-align: center;
+}
+
+h4 {
+  font-family: Gilroy;
+  font-weight: 600;
+  font-size: 13.13px;
+  line-height: 21px;
+  letter-spacing: 0%;
+}
+
+.icon {
+  width: 13px !important;
+  height: 13px !important;
+  top: 232.2px;
+  left: 77.13px;
+}
+
+hr {
+  width: 262.55999755859375;
+  height: 0.8205000162124634;
+  margin: 1.25rem 0.5rem;
+  opacity: 0.15;
+  border-radius: 6.83px;
+  background: rgba(220, 220, 220, 1);
+  box-shadow: 1.71px 1.71px 3.41px 0px rgba(0, 0, 0, 0.25) inset;
+  box-shadow: -1.71px -1.71px 3.41px 0px rgba(255, 255, 255, 0.25) inset;
+}
+
+span {
+  font-family: Gilroy;
+  font-weight: 500;
+  font-size: 9.85px;
+  line-height: 0px;
+  letter-spacing: 0%;
+  color: rgba(187, 186, 188, 1);
+}

package/src/lib/itinerary-app/modules/user/profile/profile.component.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+ import { Location } from '@angular/common';
+import { SelectOption } from '@naniteninja/ionic-lib'; 
+import { ICONS } from '../../../_constants/constants';
+
+@Component({
+    selector: 'app-profile',
+    templateUrl: './profile.component.html',
+    styleUrl: './profile.component.scss',
+    standalone: false
+})
+export class ProfileComponent {
+  ICONS = ICONS;
+  passions: SelectOption<string>[] = [
+    {
+      value: 'Viyasa',
+      label: 'Viyasa',
+      selected: true,
+      disabled: true,
+    },
+    {
+      value: 'Skincare',
+      label: 'Skincare',
+      selected: true,
+      disabled: true,
+    },
+    {
+      value: 'Baking',
+      label: 'Baking',
+      selected: true,
+      disabled: true,
+    },
+    {
+      value: 'Hiking',
+      label: 'Hiking',
+      selected: true,
+      disabled: true,
+    },
+    {
+      value: 'Bicycle Racing',
+      label: 'Bicycle Racing',
+      selected: true,
+      disabled: true,
+    },
+  ];
+
+  constructor(private location: Location) {}
+
+  back = () => this.location.back();
+}

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

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ProfileComponent } from './profile/profile.component';
+import { UserRoutes } from '../../_enums/userRoutes.enum';
+
+const routes: Routes = [ 
+  { path: UserRoutes.profile, component: ProfileComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class UserRoutingModule { }

package/src/lib/itinerary-app/modules/user/user.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { UserRoutingModule } from './user-routing.module';
+import { ProfileComponent } from './profile/profile.component';
+import { SectionSeparatorComponent, SelectableModule } from '@naniteninja/ionic-lib';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../shared/shared.module';
+
+@NgModule({
+  declarations: [
+    ProfileComponent
+  ],
+  imports: [
+    CommonModule,
+    UserRoutingModule,
+    SectionSeparatorComponent,
+    SharedModule,
+    TranslateModule,
+    SelectableModule
+]
+})
+export class UserModule { }

package/src/lib/itinerary-app/shared/action-card/action-card.component.html

@@ -0,0 +1,22 @@
+<div
+  (click)="handleClick()"
+  class="action-main rounded-[6.56px] mb-[6.56px] p-5 flex items-center justify-between cursor-pointer transition-all duration-300"
+>
+  <div class="flex items-center gap-4">
+    <img [src]="icon" alt="icon" class="w-12 h-12" />
+    <div class="pr-2">
+      <h3 class="text-white font-semibold flex gap-[3px] font-[Gilroy] text-[13.13px]">
+        <span class="text-white">{{ title.split(' ')[0] }}</span>
+        <span class="text-pink-500">{{ title.split(' ').slice(1).join(' ') }}</span>
+      </h3>
+      <p class="text-white font-[Gilroy] text-[6.56px]">{{ description }}</p>
+    </div>
+  </div>
+  <div>
+    <div
+      class="w-8 h-8 rounded-full bg-[#2b2733] flex items-center justify-center"
+    >
+      <img src="assets/icons/right-arrow.svg" />
+    </div>
+  </div>
+</div>

package/src/lib/itinerary-app/shared/action-card/action-card.component.scss

@@ -0,0 +1,3 @@
+.action-main {
+    background-color: #27242C;
+}

package/src/lib/itinerary-app/shared/action-card/action-card.component.spec.ts

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

package/src/lib/itinerary-app/shared/action-card/action-card.component.ts

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'lib-action-card',
+    templateUrl: './action-card.component.html',
+    styleUrl: './action-card.component.scss',
+    standalone: false
+})
+export class ActionCardComponent {
+  @Output() actionCardClicked: EventEmitter<string> = new EventEmitter<string>();
+  @Input() icon!: string;
+  @Input() title!: string;
+  @Input() description!: string;
+  @Input() actionName!: string;
+
+  handleClick() {
+    this.actionCardClicked.emit(this.actionName);
+  }
+}