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

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

@@ -0,0 +1,115 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+import { LibMenuItem } from '@naniteninja/ionic-lib';   
+import { ICONS } from '../../_constants/constants';
+import { ICardData } from '../../_interface/cardData';
+import { Iicon } from '../../_interface/icon';
+import { Itinerary } from '../../_models/Itinerary';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-cutom-card',
+  templateUrl: './cutom-card.component.html',
+  styleUrl: './cutom-card.component.scss',
+})
+export class CutomCardComponent {
+  @Input() libMenuItem!: LibMenuItem[];
+  @Input() isDraft!: boolean;
+  @Input() cardData: Itinerary | undefined;
+  processedCardData: ICardData | undefined;
+  @Input() displayPublishStatus!: boolean;
+  ICONS: Iicon = ICONS;
+  @Input() images: string[] = [];
+  @Input() itineraryStarted: boolean = false;
+  @Output() StartItineraryClick: EventEmitter<void> = new EventEmitter<void>();
+  @Output() TitleClicked: EventEmitter<void> = new EventEmitter<void>();
+  @Output() forkClicked: EventEmitter<void> = new EventEmitter<void>();
+  @Output() messageClicked: EventEmitter<void> = new EventEmitter<void>();
+  @Output() userProfileClicked: EventEmitter<void> = new EventEmitter<void>();
+  @Output() itineraryWatchingUsersClicked: EventEmitter<void> = new EventEmitter<void>();
+
+  @Output() imageClicked: EventEmitter<void> = new EventEmitter<void>();
+  @Output() eyeClicked: EventEmitter<void> = new EventEmitter<void>();
+  @Output() menuClicked: EventEmitter<Itinerary> = new EventEmitter<Itinerary>();
+
+  cardDataForLocations = {
+    locationColumn1: [
+      { icon: ICONS['temp'], name: 'Palace' },
+      { icon: ICONS['palace2'], name: 'Template' },
+      { icon: ICONS['palace2'], name: 'Optional' },
+      { icon: ICONS['palace2'], name: 'Optional' },
+    ],
+    locationColumn2: [
+      { icon: ICONS['coffee'], name: 'Coffee shop' },
+      { icon: ICONS['template'], name: 'Optional' },
+      { icon: ICONS['template'], name: 'Optional' },
+      { icon: ICONS['template'], name: 'Optional' },
+    ],
+  };
+
+  constructor(
+  ) { }
+
+  ngOnInit(): void {
+    if(this.cardData) {
+      this.processedCardData = this.processCardData(this.cardData);
+    }
+  }
+
+  private nullCheck(data: string | number | null | undefined): boolean {
+    return (
+      data?.toString().length == 0 ||
+      data == null ||
+      data == undefined ||
+      data == '0' ||
+      data == 0 ||
+      data == '-'
+    );
+  }
+
+  parseStringToNumber(value: string) {
+    return parseInt(value);
+  }
+
+  private processCardData(data: Itinerary): ICardData {
+    return {
+      ...data,
+      id: data.id,
+      upVotes: data.stats?.upvotes?.toString() ?? '0',
+      downVotes: this.nullCheck(data.stats?.downvotes) ? 0 : (data.stats?.downvotes ?? 0),
+      title: this.nullCheck(data.name) ? 'Untitled Itinerary' : data.name,
+      userName: this.nullCheck(data.user?.name) ? 'You' : (data.user?.name === "Jonathan" ? 'You' : (data.user?.name ?? "")),//Temporarily added Jonathan will need to change once user data is available in application
+      timeAgo: this.nullCheck(data.createdAt) ? '' : '2 hours ago',
+      users: 4,
+      views: this.nullCheck(data.stats?.views) ? 0 : (data.stats?.views ?? 0),
+      comments: 0,
+      shares: this.nullCheck(data.stats?.shares) ? 0 : (data.stats?.shares ?? 0),
+      imageSrc: data.isDraft ? ICONS['untitled'] : (data.image ?? ICONS['untitled']),
+      userimageSrc: data.user?.image
+        ?? ICONS['notSpecified'],
+      location: this.nullCheck(data.startLocation?.address) ? 'Not Specified' : (data.startLocation?.address ?? ""),
+      isDraft: data.isDraft ?? false
+    };
+  }
+
+  handleMenueItemSelect(): void { }
+  handleMenuItemChange(): void { }
+  handleMenuClick(): void { this.menuClicked.emit(this.cardData) }
+
+  handleForkClick = (): void => this.forkClicked.emit();
+  handleStartItineraryClick = (): void => this.StartItineraryClick.emit();
+  handleTitleClick = (): void => this.TitleClicked.emit();
+  handleMessageClicked = (): void => this.messageClicked.emit();
+  handleUserProfileClicked = (): void => this.userProfileClicked.emit();
+  handleImageClick = (): void => this.imageClicked.emit();
+  handleEyeClicked = (): void => this.eyeClicked.emit();
+
+  handleItineraryWatchingClicked(): void {
+    this.itineraryWatchingUsersClicked.emit();
+  }
+}

package/src/lib/itinerary-app/shared/footer/components/bottom-navigation-items/bottom-navigation-items.component.html

@@ -0,0 +1,7 @@
+<div
+  [routerLink]="routerLink"
+  class="bottom-nav-item flex flex-col items-center"
+>
+  <img [src]="iconPath" class="bottom-nav-image" />
+  <span [class]="cssClass + ' span-text'">{{ label }}</span>
+</div>

package/src/lib/itinerary-app/shared/footer/components/bottom-navigation-items/bottom-navigation-items.component.scss

@@ -0,0 +1,50 @@
+@use "../../../../_styles/colors" as *;
+
+.bottom-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 30px;
+  max-width: 60px;
+}
+
+.bottom-nav-image {
+  height: 16px;
+  width: 17px;
+}
+
+.bottom-nav-item {
+  span {
+    color: $text-color-3;
+    opacity: 0.3;
+    font-size: 11px;
+    line-height: 15px;
+  }
+}
+
+.bottom-nav-item {
+  .spanText:nth-child(3) {
+    background: red !important;
+    margin-top: 3px !important;
+  }
+}
+
+.dashboard-active.span-text {
+  background-image: linear-gradient(
+    208.61deg,
+    $scroll-color -5.8%,
+    $background-color-6 192.44%
+  ) !important;
+
+  /* Clip the gradient to the text */
+  -webkit-background-clip: text !important;
+  background-clip: text !important; /* Standard property for non-webkit browsers */
+
+  /* Make text color transparent to reveal the gradient */
+  color: transparent !important;
+
+  /* For better cross-browser support */
+  display: inline !important;
+  opacity: 100% !important;
+}

package/src/lib/itinerary-app/shared/footer/components/bottom-navigation-items/bottom-navigation-items.component.spec.ts

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

package/src/lib/itinerary-app/shared/footer/components/bottom-navigation-items/bottom-navigation-items.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-bottom-navigation-items',
+  templateUrl: './bottom-navigation-items.component.html',
+  styleUrl: './bottom-navigation-items.component.scss',
+})
+export class BottomNavigationItemsComponent {
+  @Input() label!: string;
+  @Input() iconPath!: string;
+  @Input() routerLink!: string;
+  @Input() cssClass!: string;
+  @Input() selected!: boolean;
+}

package/src/lib/itinerary-app/shared/footer/footer.component.html

@@ -0,0 +1,12 @@
+<div class="bottom-nav-main">
+  <app-bottom-navigation-items
+    (click)="navigate(bottomNavigationService.bottomNavList, item)"
+    *ngFor="let item of bottomNavigationService.bottomNavList"
+    [cssClass]="item.cssClass"
+    [routerLink]="item.routerLink"
+    [label]="item.label"
+    [iconPath]="
+      item.cssClass == 'active' ? item.clickedIconPath : item.iconPath
+    "
+  />
+</div>

package/src/lib/itinerary-app/shared/footer/footer.component.scss

@@ -0,0 +1,29 @@
+@use "../../_styles/colors" as *;
+
+.bottom-navigation {
+  background: $background-color-5;
+  padding: 15px 10px;
+  z-index: 999;
+  box-shadow: var(
+    --lib-popup-modal-shadow,
+    5px 5px 95px 0px rgba(255, 255, 255, 0.32),
+    -3px -3px 16px 0px rgba(255, 255, 255, 0.1)
+  ) !important;
+}
+
+.bottom-nav-main {
+  display: flex;
+  position: fixed !important;
+  bottom: 0 !important;
+  justify-content: space-between !important;
+  width: 100% !important;
+  padding: 23.09px 25.98px;
+  background-color: $background-color-1;
+  left: 0;
+}
+
+.bottom-nav-main {
+  @media (min-width: 768px) {
+    display: none;
+  }
+}

package/src/lib/itinerary-app/shared/footer/footer.component.ts

@@ -0,0 +1,136 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnInit,
+  ViewEncapsulation,
+} from '@angular/core'; 
+import { IBottomNavigationList } from '../../_interface/bottomNavigationList';
+import { BottomNavigationService } from '../../_services/bottom-navigation.service';
+import { ShadowRootHandlerService } from '../../_services/shadow-root-handler.service';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss'],
+  encapsulation: ViewEncapsulation.Emulated,
+})
+export class FooterComponent implements OnInit, AfterViewInit {
+  public enableBack: boolean = false;
+
+  constructor(
+    private el: ElementRef,
+    private shadowrootHandler: ShadowRootHandlerService,
+    public bottomNavigationService: BottomNavigationService,
+    private cdr: ChangeDetectorRef,
+    private readonly router: Router,
+  ) {}
+
+  ngOnInit(): void {
+    this.router.events
+    .pipe(
+      filter(
+        (event): event is NavigationEnd => event instanceof NavigationEnd,
+      ),
+    )
+    .subscribe((event: NavigationEnd) => {
+      const navItem = this.findNavItem(event.urlAfterRedirects);
+      if(navItem) {
+        this.bottomNavigationService.setActive(navItem);
+        this.cdr.detectChanges();
+      }
+    });
+
+    const initialLoadUrl = setTimeout(() => {
+      const navItem = this.findNavItem(this.router.url);
+      if(navItem) {
+        this.bottomNavigationService.setActive(navItem);
+        this.cdr.detectChanges();
+      }
+      clearTimeout(initialLoadUrl);
+    });
+
+    this.enableBack = true;
+    this.cdr.detectChanges();
+  }
+
+  findNavItem(url: string): IBottomNavigationList | undefined {
+      const homeNavItem = this.bottomNavigationService.bottomNavList.find((bottomnNavList) => {
+        return bottomnNavList.label === 'Home';
+      });
+      if(url === '/archives/archives') {
+        const activeNav = this.bottomNavigationService.bottomNavList.find((bottomnNavList) => {
+          return bottomnNavList.label === 'Itineraries';
+        });
+        return activeNav;
+      }
+      if(homeNavItem?.routerLink === url) {
+        return homeNavItem;
+      } else {
+        let activeNav = this.bottomNavigationService.bottomNavList.find((item) =>
+          url.includes(item.routerLink) 
+        );
+        if(activeNav) {
+          return activeNav;
+        }
+      }
+      return undefined;
+  }
+
+  ngAfterViewInit(): void {
+    this.initShadowrootHandler();
+  }
+
+  navigate(
+    bottomNavList: IBottomNavigationList[],
+    item: IBottomNavigationList,
+  ): void {
+    this.bottomNavigationService.onNavigationChange(bottomNavList, item);
+  }
+
+  initShadowrootHandler(): void {
+    const targetNode = this.el.nativeElement;
+    this.shadowrootHandler.accessShadowRoot(
+      targetNode,
+      'lib-bottom-modal',
+      () => {
+        this.applyStylesToDialog();
+      },
+    );
+  }
+
+  applyStylesToDialog(): void {
+    const targetNode = this.el.nativeElement.querySelector(
+      'lib-bottom-modal',
+    ) as HTMLElement;
+
+    if (targetNode) {
+      const classNameElements =
+        targetNode.getElementsByClassName('lib-bottom-modal');
+
+      if (classNameElements.length > 0) {
+        const dialogDiv = classNameElements[0].shadowRoot?.querySelector(
+          'div[role="dialog"]',
+        ) as HTMLElement;
+
+        if (dialogDiv) {
+          const modalHandle = dialogDiv.getElementsByClassName(
+            'modal-handle',
+          )[0] as HTMLElement;
+          if (modalHandle) {
+            modalHandle.style.display = 'none';
+          } else {
+          }
+        } else {
+        }
+      } else {
+      }
+    } else {
+    }
+  }
+}

package/src/lib/itinerary-app/shared/header/header.component.html

@@ -0,0 +1,24 @@
+<div
+  [class]="
+    'header-main-bar pt-5 pb-5 mr-3 flex items-center justify-between ' +
+    cssClass
+  "
+>
+  <lib-icon-btn class="checkmark-icon-button" (click)="firstButtonClick()">
+    <img [ngSrc]="ICONS['back']" height="12" width="13" />
+  </lib-icon-btn>
+  <div class="flex">
+    <h4 class="mr-1">{{ heading }}</h4>
+    <img
+      *ngIf="titleIcon"
+      [src]="ICONS['editPink']"
+      (click)="onTitleIconClick()"
+      height="8"
+      width="8"
+    />
+  </div>
+  <ng-container *ngIf="headerSuffixTemplate">
+    <ng-container *ngTemplateOutlet="headerSuffixTemplate"></ng-container>
+  </ng-container>
+  <div *ngIf="!headerSuffixTemplate"></div>
+</div>

package/src/lib/itinerary-app/shared/header/header.component.scss

@@ -0,0 +1,20 @@
+@use "../../_styles/colors" as *;
+@use "../../_styles/fonts" as *;
+
+.header-main-bar {
+  font-family: $header-font;
+
+  h4 {
+    font-size: 0.93rem !important;
+  }
+}
+
+.header-back-btn {
+  height: 32px !important;
+  width: 32px !important;
+}
+
+::ng-deep .lib-popup-modal {
+  --background: transparent !important;
+  --box-shadow: none !important;
+}

package/src/lib/itinerary-app/shared/header/header.component.ts

@@ -0,0 +1,87 @@
+// import {
+//   ChangeDetectionStrategy,
+//   Component,
+//   EventEmitter,
+//   Input,
+//   Output,
+// } from '@angular/core';
+// import { Router } from '@angular/router';
+// import { LibMenuItem } from '@naniteninja/ionic-lib';
+// import { ICONS } from 'src/app/constants/constants';
+// import { Iicon } from 'src/app/interface/icon';
+// import { ModalService } from 'src/app/services/core/modal/modal.service';
+// import { SearchPopupComponent } from 'src/app/shared/components/search-popup/search-popup.component';
+// @Component({
+//   changeDetection: ChangeDetectionStrategy.OnPush,
+//   selector: 'app-header',
+//   templateUrl: './header.component.html',
+//   styleUrl: './header.component.scss',
+// })
+// export class HeaderComponent {
+//   @Input() heading!: string;
+//   @Input() headerRightIcon: string = ICONS.search;
+//   @Output() firstButton: EventEmitter<MouseEvent> =
+//     new EventEmitter<MouseEvent>();
+//   // @Output() lastButton: EventEmitter<MouseEvent> =
+//   //   new EventEmitter<MouseEvent>();
+//   @Input() cssClass!: string;
+//   @Input() isSearchVisible: boolean = true;
+//   @Input() isTextSearch: boolean = false;
+//   @Input() menuItems: LibMenuItem[] = [];
+//   ICONS: Iicon = ICONS;
+//   modalComponent = SearchPopupComponent;
+
+//   constructor(
+//     public modalService: ModalService,
+//     private router: Router,
+//   ) {}
+
+//   // handleBackBtnClicked = (): void => this.lastButton.emit();
+//   firstButtonClick = (): void => this.firstButton.emit();
+
+//   openModal() {
+//     if (this.isTextSearch) {
+//       this.modalService.toggleGlobalSearch = true;
+//     } else {
+//       this.router.navigate(['/search']);
+//     }
+//   }
+// }
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'; 
+import { ICONS } from '../../_constants/constants';
+import { Iicon } from '../../_interface/icon';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-header',
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.scss'],
+})
+export class HeaderComponent {
+  @Input() heading!: string;
+  @Input() headerRightIcon: string = ICONS['search'];
+  @Input() titleIcon: string = '';
+  @Input() cssClass!: string;
+  @Output() firstButton: EventEmitter<MouseEvent> =
+    new EventEmitter<MouseEvent>();
+  @Output() titleIconClick: EventEmitter<MouseEvent> =
+    new EventEmitter<MouseEvent>();
+  @Input() headerSuffixTemplate!: TemplateRef<any>;
+  ICONS: Iicon = ICONS;
+
+  firstButtonClick(): void {
+    this.firstButton.emit();
+  }
+
+  onTitleIconClick() {
+    this.titleIconClick.emit();
+  }
+}

package/src/lib/itinerary-app/shared/icon-button/icon-button.component.css

@@ -0,0 +1,21 @@
+.icon-button {
+    box-shadow: 
+  -4.1px -4.1px 13.13px -2.46px rgba(203, 199, 209, 0.25),
+   9.03px 8.2px 22.15px 2.05px rgba(17, 16, 20, 0.65);
+   padding: 15px 30px;
+   border-radius: 7px;
+   border: 2px solid transparent;
+   width: 100%;
+   span {
+    color: var(--cyrano-pink-shade-1);
+    text-shadow: 0px 0px 16.41px var(--cyrano-pink-shade-1);
+   }
+   img {
+    box-shadow: 0px 0px 16.41px var(--cyrano-pink-shade-1);
+    background: transparent;
+   }
+}
+
+.icon-button:active {
+  border: 2px solid var(--cyrano-pink-shade-1);
+}

package/src/lib/itinerary-app/shared/icon-button/icon-button.component.html

@@ -0,0 +1,7 @@
+<button class="icon-button">
+    <div class="flex items-center justify-center">
+      <span class="me-1">
+        +&nbsp;&nbsp;{{buttonText}}
+      </span>
+    </div>
+</button>

package/src/lib/itinerary-app/shared/icon-button/icon-button.component.spec.ts

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

package/src/lib/itinerary-app/shared/icon-button/icon-button.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { ICONS } from '../../_constants/constants';
+import { Iicon } from '../../_interface/icon';
+
+@Component({
+  selector: 'lib-icon-button',
+  templateUrl: './icon-button.component.html',
+  styleUrl: './icon-button.component.css'
+})
+export class IconButtonComponent {
+  @Input("buttonText") buttonText!: string;
+  ICONS: Iicon = ICONS;
+  
+  constructor() {
+  }
+}

package/src/lib/itinerary-app/shared/image-viewer/image-viewer.component.css

@@ -0,0 +1,52 @@
+.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;
+  bottom: 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;
+}

package/src/lib/itinerary-app/shared/image-viewer/image-viewer.component.html

@@ -0,0 +1,13 @@
+<div class="modal-overlay">
+  <div class="modal-container">
+    <div *ngIf="isLoading" class="loader">Loading...</div>
+    <img
+      [src]="data.imageUrl"
+      alt="Image"
+      class="modal-image"
+      (load)="onImageLoad()"
+      [class.hidden]="isLoading"
+    />
+    <button class="close-btn" (click)="close()">Close</button>
+  </div>
+</div>