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

package/src/lib/itinerary-app/shared/selectable-badge/selectable-badge.component.ts

@@ -0,0 +1,18 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'lib-selectable-badge',
+    templateUrl: './selectable-badge.component.html',
+    styleUrl: './selectable-badge.component.scss',
+    standalone: false
+})
+export class SelectableBadgeComponent {
+    @Input() label: string = '';
+    @Input() selected: boolean = true;
+    @Output() selectionChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    toggleSelection() {
+      this.selected = !this.selected;
+      this.selectionChanged.emit(this.selected);
+    }
+}

package/src/lib/itinerary-app/shared/shared.module.ts

@@ -0,0 +1,128 @@
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  BaseCardModule,
+  ButtonsModule,
+  ContentViewCardModule,
+  DashedCheckboxModule,
+  FormFieldModule,
+  FormGeneratorModule,
+  GridModule,
+  ImageCardModule,
+  InfoCardListModule,
+  InfoCardModule,
+  InfoCardPlaceholderModule,
+  InputDateFieldModule,
+  LibMapModule,
+  LibModalModule,
+  LibTabMenuModule,
+  LibToastrModule,
+  NotificationsModule,
+  OtpInputModule,
+  PopperModule,
+  SearchBarModule,
+  SelectableModule,
+} from '@naniteninja/ionic-lib';  
+import { CardComponent } from './card-component/card-component.component';
+import { CommentImagesComponent } from './comment/comment-images/comment-images.component';
+import { CommentComponent } from './comment/comment.component';
+import { CustomHeadingWithButtonComponent } from './custom-heading-with-button/custom-heading-with-button.component';
+import { CustomStoryCardComponent } from './custom-story-card/custom-story-card.component';
+import { CutomCardComponent } from './cutom-card/cutom-card.component';
+import { BottomNavigationItemsComponent } from './footer/components/bottom-navigation-items/bottom-navigation-items.component';
+import { FooterComponent } from './footer/footer.component';
+import { HeaderComponent } from './header/header.component';
+import { ImageViewerComponent } from './image-viewer/image-viewer.component';
+import { NotificationTileComponent } from './notification-tile/notification-tile.component';
+import { SearchPopupComponent } from './search-popup/search-popup.component';
+import { SwiperDialogComponent } from './swiper-dialog/swiper-dialog.component';
+import { TabBarComponent } from './tab-bar/tab-bar.component';
+import { UserStackTileComponent } from './user-stack-tile/user-stack-tile.component';
+import { UserTileComponent } from './user-tile/user-tile.component';
+import { UsersStackComponent } from './users-stack/users-stack.component';
+import { VotesPipe } from '../_pipes/votes.pipe';
+import { MatchingClientsComponent } from './matching-clients/matching-clients.component';
+import { IconButtonComponent } from './icon-button/icon-button.component';
+import { ActionCardComponent } from './action-card/action-card.component';
+import { SelectableBadgeComponent } from './selectable-badge/selectable-badge.component';
+
+@NgModule({ declarations: [
+        CardComponent,
+        CustomHeadingWithButtonComponent,
+        CutomCardComponent,
+        CustomStoryCardComponent,
+        CommentComponent,
+        NotificationTileComponent,
+        UsersStackComponent,
+        UserStackTileComponent,
+        UserTileComponent,
+        SearchPopupComponent,
+        CommentImagesComponent,
+        FooterComponent,
+        HeaderComponent,
+        TabBarComponent,
+        ImageViewerComponent,
+        SwiperDialogComponent,
+        BottomNavigationItemsComponent,
+        VotesPipe,
+        MatchingClientsComponent,
+        IconButtonComponent,
+        ActionCardComponent,
+        SelectableBadgeComponent
+    ],
+    exports: [
+        CardComponent,
+        CustomHeadingWithButtonComponent,
+        CutomCardComponent,
+        CustomStoryCardComponent,
+        CommentComponent,
+        NotificationTileComponent,
+        UsersStackComponent,
+        UserStackTileComponent,
+        UserTileComponent,
+        SearchPopupComponent,
+        ImageViewerComponent,
+        TabBarComponent,
+        HeaderComponent,
+        FooterComponent,
+        BottomNavigationItemsComponent,
+        MatchingClientsComponent,
+        IconButtonComponent,
+        ActionCardComponent,
+        SelectableBadgeComponent
+    ],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA], imports: [BaseCardModule,
+        TranslateModule,
+        CommonModule,
+        SearchBarModule,
+        ButtonsModule,
+        OtpInputModule,
+        DashedCheckboxModule,
+        FormFieldModule,
+        FormsModule,
+        FormGeneratorModule,
+        GridModule,
+        ImageCardModule,
+        InfoCardModule,
+        InfoCardListModule,
+        InfoCardPlaceholderModule,
+        InputDateFieldModule,
+        LibMapModule,
+        PopperModule,
+        SearchBarModule,
+        NgOptimizedImage,
+        LibTabMenuModule,
+        LibModalModule,
+        IonicModule,
+        ContentViewCardModule,
+        NotificationsModule,
+        LibToastrModule,
+        SelectableModule,
+        RouterLink,
+        ReactiveFormsModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
+export class SharedModule { }

package/src/lib/itinerary-app/shared/swiper-dialog/swiper-dialog.component.css

@@ -0,0 +1,67 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-container {
+  position: relative;
+  width: 100%;
+  max-width: 100vw;
+  background: #fff;
+  padding: 0;
+}
+
+.modal-image {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  border: none;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.2rem;
+  height: 200px;
+  width: 200px;
+  color: white;
+}
+
+.hidden {
+  display: none;
+}
+
+.alt-images-section{
+  position: absolute;
+  bottom: 50px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  overflow-x: auto;
+  padding: 10px;
+}
+.alt-images-section img {
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+}

package/src/lib/itinerary-app/shared/swiper-dialog/swiper-dialog.component.html

@@ -0,0 +1,14 @@
+<div class="modal-overlay">
+  <swiper-container [slides-per-view]="1" [navigation]="true" [pagination]="{ clickable: true }"
+    [initial-slide]="currentIndex" class="modal-container">
+    <div *ngIf="isLoading" class="loader">Loading...</div>
+    <swiper-slide *ngFor="let image of images">
+      <img [src]="image.src" alt="Image" class="modal-image" (load)="onImageLoad()" [class.hidden]="isLoading" />
+    </swiper-slide>
+  </swiper-container>
+  <button class="close-btn" (click)="close()">Close</button>
+  <div class="alt-images-section">
+    <img *ngFor="let image of images; let i = index" [src]="image.src" class="alt-image"
+      (click)="updateCurrentIndex(image)" />
+  </div>
+</div>

package/src/lib/itinerary-app/shared/swiper-dialog/swiper-dialog.component.spec.ts

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

package/src/lib/itinerary-app/shared/swiper-dialog/swiper-dialog.component.ts

@@ -0,0 +1,49 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+interface Image {
+  idx: number;
+  src: string;
+}
+@Component({
+    selector: 'app-swiper-dialog',
+    templateUrl: './swiper-dialog.component.html',
+    styleUrl: './swiper-dialog.component.css',
+    standalone: false
+})
+
+export class SwiperDialogComponent {
+  images: Image[];
+  currentIndex: number;
+  isLoading: boolean = true;
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: { images: string[]; currentIndex: number },
+    private dialogRef: MatDialogRef<SwiperDialogComponent>,
+  ) {
+    const images = data.images;
+    images.sort((a, b) => {
+      const nameA = a.split('/').pop()?.toLowerCase() ?? '';
+      const nameB = b.split('/').pop()?.toLowerCase() ?? '';
+      return nameA.localeCompare(nameB);
+    });
+
+    this.images = images.map((image, index) => ({
+      idx: index + 1,
+      src: image
+    }));
+    this.currentIndex = data.currentIndex;
+  }
+
+  onImageLoad(): void {
+    this.isLoading = false;
+  }
+
+  updateCurrentIndex(img: Image) {
+    this.currentIndex = img.idx;
+  }
+  close() {
+    this.dialogRef.close();
+  }
+}

package/src/lib/itinerary-app/shared/tab-bar/tab-bar.component.html

@@ -0,0 +1,6 @@
+<lib-tab-menu
+  [items]="tabMenuItems"
+  [activeItem]="activeItem"
+  (activeItemChange)="onActiveItemChange($event)"
+  #libTabMenu
+></lib-tab-menu>

package/src/lib/itinerary-app/shared/tab-bar/tab-bar.component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { ItinerariesRoutesEnum } from '../../_enums/ItenariesRoutes.enum';
+import { filter, Subject, takeUntil } from 'rxjs';
+
+@Component({
+    selector: 'app-tab-bar',
+    templateUrl: './tab-bar.component.html',
+    styleUrl: './tab-bar.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class TabBarComponent implements OnInit, OnDestroy {
+  private destroy$: Subject<void> = new Subject<void>();
+  @Input() tabMenuItems: MenuItem[] = [
+    {
+      label: 'Explore',
+      icon: 'pi pi-fw pi-home',
+      routerLink: ItinerariesRoutesEnum.ITINERARY_EXPLORE,
+    },
+    {
+      label: 'Builder',
+      icon: 'pi pi-fw pi-map-marker',
+      routerLink: ItinerariesRoutesEnum.ITINERARY_BUILDER,
+    },
+    {
+      label: 'Favorites',
+      icon: 'pi pi-fw pi-user',
+      routerLink: ItinerariesRoutesEnum.ITINERARY_FAVOURITES,
+    },
+  ];
+  activeItem: MenuItem = this.tabMenuItems[0];
+
+  //LIFE CYCLES
+  constructor(
+    private router: Router,
+    private cdr: ChangeDetectorRef
+  ) { }
+
+  ngOnInit(): void {
+    this.activeItem = this.tabMenuItems.find(
+      (x) => x.routerLink === this.router.url,
+    )!;
+    this.router.events
+      .pipe(
+        filter(
+          (event): event is NavigationEnd => event instanceof NavigationEnd,
+        ),
+        takeUntil(this.destroy$)
+      )
+      .subscribe((event: NavigationEnd) => {
+        this.activeItem = this.tabMenuItems.find(
+          (x) => x.routerLink === event.urlAfterRedirects
+        )!;
+        this.cdr.detectChanges();
+      });
+  }
+
+  ngOnDestroy() {
+    this.destroy$.next(); // Emit a value to trigger takeUntil
+    this.destroy$.complete(); // Complete the subject
+  }
+
+  //UI LOGIC
+  onActiveItemChange(event: MenuItem): void {
+    this.activeItem = event;
+    this.router.navigate([event.routerLink]);
+  }
+}

package/src/lib/itinerary-app/shared/user-stack-tile/user-stack-tile.component.html

@@ -0,0 +1,15 @@
+<div [ngClass]="class" class="mt-3">
+  <div class="mb-2 text-xs userIconText">
+    <p>{{ label }}</p>
+  </div>
+  <div class="flex justify-between items-center relative">
+    <app-users-stack [images]="images" [maxVisible]="maxVisible" [size]="size"
+      [isSelectableVisible]="isSelectableVisible" [selectableOption]="selectableOption"></app-users-stack>
+    <div class="flex">
+      <button class="pinkTextColor" (click)="handleBtnClick()">
+        {{ buttonText }}
+      </button>
+      <p class="px-1 text-white">></p>
+    </div>
+  </div>
+</div>

package/src/lib/itinerary-app/shared/user-stack-tile/user-stack-tile.component.ts

@@ -0,0 +1,33 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { SelectOption } from '@naniteninja/ionic-lib';  
+import { ICONS } from '../../_constants/constants';
+import { Iicon } from '../../_interface/icon';
+
+@Component({
+    selector: 'app-user-stack-tile',
+    templateUrl: './user-stack-tile.component.html',
+    styleUrl: './user-stack-tile.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class UserStackTileComponent {
+  ICONS: Iicon = ICONS;
+  @Input() class: string = '';
+  @Input() buttonText: string = 'View Invites';
+  @Input() label: string = '';
+  @Output() onClick: EventEmitter<void> = new EventEmitter<void>();
+  @Input() images: string[] = [];
+  @Input() maxVisible = 3;
+  @Input() size: number = 41;
+  @Input() isSelectableVisible: boolean = false;
+  @Input() selectableOption!: SelectOption<string>;
+
+  //UI LOGIC
+  handleBtnClick = (): void => this.onClick.emit();
+}

package/src/lib/itinerary-app/shared/user-tile/user-tile.component.html

@@ -0,0 +1,24 @@
+<div [class]="'comment-card text-white pt-4 pb-4 rounded-xl ' + class">
+  <div class="flex items-center justify-between">
+    <div class="flex space-x-3">
+      <div class="rounded-full overflow-hidden">
+        <img
+          [src]="image"
+          alt="User"
+          loading="lazy"
+          class="w-10 h-10 object-cover"
+        />
+      </div>
+      <div>
+        <h4 class="text-sm font-semibold">{{ name }}</h4>
+        <p class="text-xs text-gray-300">{{ email }}</p>
+      </div>
+    </div>
+    <ng-container
+      *ngTemplateOutlet="
+        sufixTemplate;
+        context: { $implicit: { image, name, email } }
+      "
+    ></ng-container>
+  </div>
+</div>

package/src/lib/itinerary-app/shared/user-tile/user-tile.component.ts

@@ -0,0 +1,22 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  TemplateRef,
+} from '@angular/core';
+
+@Component({
+    selector: 'app-user-tile',
+    templateUrl: './user-tile.component.html',
+    styleUrl: './user-tile.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class UserTileComponent {
+  @Input() sufixTemplate: TemplateRef<unknown> | null = null;
+  @Input() name: string = '';
+  @Input() email: string = '';
+  @Input() image: string = '';
+  @Input() class: string = '';
+  constructor() {}
+}

package/src/lib/itinerary-app/shared/users-stack/users-stack.component.html

@@ -0,0 +1,29 @@
+<div *ngIf="!loading" [class]="'flex items-center ' + class">
+  <ng-container *ngFor="let img of visibleImages; let i = index">
+    <div class="rounded-full overflow-hidden relative" [ngStyle]="{
+        height: size + 'px',
+        width: size + 'px',
+        'margin-left': i === 0 ? '0px' : -size * 0.45 + 'px',
+      }">
+      <img [src]="img" alt="Avatar" loading="lazy" class="w-full h-full object-cover" (load)="onImageLoad(i)"
+        (error)="onImageLoad(i)" />
+      <div *ngIf="!imageLoaded[i]" class="absolute inset-0 flex items-center justify-center bg-gray-200">
+        <div class="spinner"></div>
+      </div>
+    </div>
+  </ng-container>
+
+  <div *ngIf="remainingCount > 0" class="rounded-full relative flex items-center justify-center" [ngStyle]="{
+      height: size + 'px',
+      width: size + 'px',
+      'margin-left': visibleImages.length > 0 ? -size * 0.45 + 'px' : '0px',
+      'background-color': 'rgba(81, 78, 87, 1)',
+    }">
+    <p style="font-size: clamp(7px, 3vw, 15px)" class="f-gilroy-regular">
+      {{ remainingCount }}+
+    </p>
+  </div>
+  <div class="absolute z-10" [style.left.px]="maxVisible * 26">
+    <lib-selectable *ngIf="isSelectableVisible" [options]="[selectableOption]"></lib-selectable>
+  </div>
+</div>

package/src/lib/itinerary-app/shared/users-stack/users-stack.component.scss

@@ -0,0 +1,20 @@
+.my-custom-class {
+  box-shadow: 0 0 4px rgba(81, 78, 87, 1);
+}
+.spinner {
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top: 2px solid white;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/lib/itinerary-app/shared/users-stack/users-stack.component.ts

@@ -0,0 +1,54 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { SelectOption } from '@naniteninja/ionic-lib';   
+import { AssetsService } from '../../_services/assets.service';
+
+@Component({
+    selector: 'app-users-stack',
+    templateUrl: './users-stack.component.html',
+    styleUrls: ['./users-stack.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class UsersStackComponent implements OnInit {
+  @Input() images: string[] = [];
+  @Input() maxVisible = 3;
+  @Input() size: number = 41;
+  @Input() loading: boolean = false;
+  @Input() class: string = '';
+  @Input() isSelectableVisible: boolean = false;
+  @Input() selectableOption!: SelectOption<string>;
+  imageLoaded: boolean[] = [];
+
+  constructor(
+    private assetService: AssetsService,
+    private cdr: ChangeDetectorRef, 
+  ) {}
+
+  ngOnInit(): void {
+    this.loading = true;
+    this.assetService.getMembers().subscribe((data) => {
+      this.images = data.map((x) => x.memberPic);
+      this.imageLoaded = Array(this.visibleImages.length).fill(false);
+      this.loading = false;
+      this.cdr.detectChanges();
+    });
+  }
+
+  get visibleImages(): string[] {
+    return this.images.slice(0, this.maxVisible);
+  }
+
+  get remainingCount(): number {
+    return this.images.length - this.maxVisible;
+  }
+
+  onImageLoad(index: number): void {
+    this.imageLoaded[index] = true;
+  }
+}