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

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

@@ -0,0 +1,115 @@
+<lib-base-card *ngIf="processedCardData" class="card-component px-4 py-4 my-2 rounded-lg outset-downshadow">
+  <div class="flex items-start justify-between mb-2">
+    <div class="flex gap-5 items-start">
+      <div [class]="
+          !isDraft
+            ? ' text-primary'
+            : '' +
+              ' items-center sm:text-[10px] xs:text-[9px] flex flex-col gap-y-[0px]'
+        ">
+        <img [src]="!isDraft ? ICONS['upvote'] : ICONS['upArrowWhite']" alt="" />
+        <span [class]="!isDraft ? 'text-primary' : 'drah-voter-header'">
+          {{ parseStringToNumber(processedCardData.upVotes) | votes }}
+        </span>
+        <img [src]="ICONS['downvote']" alt="" />
+      </div>
+      <div (click)="handleTitleClick()" class="">
+        <h4 class="title medium-14 p-0 m-0">
+          {{ processedCardData.title }}
+        </h4>
+        <h5 class="text-secondary opacity-80 text-[10px] xs:text-[9px] flex gap-[6px] items-center">
+          <img [src]="ICONS['user']" alt="" />
+          <span>{{ processedCardData.userName }} -
+            {{ processedCardData.timeAgo }}</span>
+        </h5>
+      </div>
+    </div>
+    <ng-container *ngIf="displayPublishStatus">
+      <div class="draft-header lg:ml-[36px]" *ngIf="processedCardData.isDraft">
+        {{ "DRAFT_SAVED" | translate }}
+      </div>
+      <div class="draft-header lg:ml-[36px]" *ngIf="!processedCardData.isDraft">
+        Published
+      </div>
+    </ng-container>
+
+    <div class="flex items-center">
+      <lib-menu-btn
+        (select)="handleMenueItemSelect()"
+        (click)="handleMenuClick()"
+        (change)="handleMenuItemChange()"
+        id="lib-menu-btn"
+        class="lib-menu-custom-class lib-menu-bg-none"
+        [disableTextShadow]="true"
+        [menuItems]="libMenuItem"
+      >
+        <img [src]="ICONS['horizontal']" alt="" />
+      </lib-menu-btn>
+    </div>
+  </div>
+  <hr class="h-1 text-secondary opacity-25" />
+  <div class="my-2 flex items-start gap-x-5">
+    <div
+      (click)="handleImageClick()"
+      class="1 mb-0 flex flex-col items-center justify-center w-[80px]"
+    >
+      <img
+        class="card-image"
+        [src]="processedCardData.imageSrc"
+        alt=""
+        width="100"
+      />
+    </div>
+    <div class="2 flex-1">
+      <div *ngIf="!cardData?.isDraft" class="font-normal text-secondary flex items-center gap-x-4 text-sm">
+        <ul class="flex flex-col gap-y-[6px] xs:text-[9px] sm:text-[12px]">
+          <li *ngFor="let location of cardDataForLocations.locationColumn1"
+            class="location-item flex items-center gap-1">
+            <img [src]="location.icon" alt="" />
+            <span class="truncate sm:max-w-10 xs:max-w-11">{{
+              location.name
+              }}</span>
+          </li>
+        </ul>
+        <ul class="flex flex-col gap-y-[6px] xs:text-[9px] sm:text-[12px]">
+          <li *ngFor="let location of cardDataForLocations.locationColumn2"
+            class="location-item flex items-center gap-1">
+            <img [src]="location.icon" alt="" />
+            <span class="truncate sm:max-w-10 xs:max-w-11">{{
+              location.name
+              }}</span>
+          </li>
+        </ul>
+      </div>
+      <p *ngIf="processedCardData.isDraft" class="text-xs draft-description">
+        {{ "FINISH_ITINERARY_CREATION" | translate }}
+      </p>
+    </div>
+  </div>
+  <hr class="h-1 text-secondary opacity-25" />
+  <div class="my-2 flex items-center justify-between">
+    <div
+      class="flex items-center justify-between sm:gap-x-7 xs:gap-x-5 sm:text-sm xs:text-[9px] text-secondary"
+    >
+      <div (click)="handleEyeClicked()" class="flex items-center gap-x-[6px]">
+        <img class="bottom-icons" [src]="ICONS['eye']" alt="" />
+        <span class="bottom-tags">{{ processedCardData.views }}</span>
+      </div>
+      <div (click)="handleMessageClicked()" class="flex items-center gap-x-[6px]">
+        <img class="bottom-icons" [src]="ICONS['comment2']" alt="" />
+        <span class="bottom-tags">{{ processedCardData.comments }}</span>
+      </div>
+      <div (click)="handleForkClick()" class="flex items-center gap-x-[6px]">
+        <img class="bottom-icons" [src]="ICONS['fork']" alt="" />
+        <span class="bottom-tags">{{ processedCardData.shares }}</span>
+      </div>
+    </div>
+    <div (click)="handleUserProfileClicked()" class="flex items-center gap-x-1">
+      <span class="text-[13px] userIconText">
+        {{ processedCardData.users }}
+        <span class="user-icon-text" *ngIf="processedCardData.users > 0">Users</span>
+      </span>
+      <app-users-stack [size]="14" [images]="images"></app-users-stack>
+    </div>
+  </div>
+</lib-base-card>

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

@@ -0,0 +1,85 @@
+@use "../../_styles/colors" as *;
+
+.card-component {
+  --width: auto;
+  background: $background-color-1;
+}
+
+.bottom-tags {
+  font-size: 12px;
+}
+
+.draft-header {
+  color: $text-color-4;
+  font-weight: normal !important;
+  font-size: 11px !important;
+  margin-top: 7px;
+  position: relative;
+}
+
+.draft-description {
+  color: $text-color-3;
+}
+
+.usericon-text {
+  color: $text-color-4;
+  margin-top: 2px;
+  font-size: 11px;
+}
+
+.bottom-icons {
+  height: 15px;
+  width: 16px;
+}
+
+.bottom-icons:last-child {
+  height: 16px !important;
+  width: 17px !important;
+}
+
+.card-image {
+  width: 100%;
+}
+
+.bottom-bar-loc {
+  background: $background-color-9 !important;
+  width: 5rem !important;
+  bottom: 1rem !important;
+}
+
+.location-item-main {
+  font-size: 12px;
+}
+
+.location-item-main span {
+  margin-top: 2px;
+  font-size: 12px;
+}
+
+.location-item span {
+  color: $text-color-7 !important;
+  font-size: 13px;
+  margin-top: 2px;
+}
+
+.drah-voter-header {
+  font-family: Gilroy-Thin;
+  margin-top: 5px !important;
+}
+
+.title {
+  font-family: var(--font-gilroy-bold);
+}
+
+.h-1 {
+  opacity: 0.1 !important;
+}
+
+.content-card {
+  padding: 0 !important;
+}
+
+.startItinerary {
+  position: relative;
+  top: -4px;
+}

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

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

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

@@ -0,0 +1,116 @@
+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',
+    standalone: false
+})
+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,16 @@
+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',
+    standalone: false
+})
+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,137 @@
+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,
+    standalone: false
+})
+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,23 @@
+<div
+  [class]="'header-main-bar flex items-center justify-between ' + cssClass"
+>
+  <lib-icon-btn class="checkmark-icon-button w-[20%]" (click)="firstButtonClick()">
+    <img [ngSrc]="ICONS['back']" height="12.5" width="14" />
+  </lib-icon-btn>
+  <div class="flex w-[60%] justify-center">
+    <h4 class="mr-1">{{ heading }}</h4>
+    <img
+      *ngIf="titleIcon"
+      [src]="ICONS['editPink']"
+      (click)="onTitleIconClick()"
+      height="8"
+      width="8"
+    />
+  </div>
+  <div class="w-[20%] flex justify-end">
+    <ng-container *ngIf="headerSuffixTemplate">
+      <ng-container *ngTemplateOutlet="headerSuffixTemplate"></ng-container>
+    </ng-container>
+    <div *ngIf="!headerSuffixTemplate"></div>
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+@use "../../_styles/colors" as *;
+@use "../../_styles/fonts" as *;
+
+.header-main-bar {
+  font-family: $header-font;
+  margin-top: 54px;
+  h4 {
+    font-size: 14.77px !important;
+  }
+}
+.checkmark-icon-button {
+  transform: scale(.9);
+}
+
+::ng-deep .lib-popup-modal {
+  --background: transparent !important;
+  --box-shadow: none !important;
+}