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

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-detail/components/summary/summary.component.ts

@@ -0,0 +1,88 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from '@angular/core';
+import { Router } from '@angular/router';  
+import { ItinerariesRoutesEnum } from '../../../../../../_enums/ItenariesRoutes.enum';
+import { Itinerary } from '../../../../../../_models/Itinerary';
+import { ApiService } from '../../../../../../_services/api.service';
+import { LocationService } from '../../../../../../_services/location.service';
+import { ICONS } from '../../../../../../_constants/constants';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-summary',
+  templateUrl: './summary.component.html',
+  styleUrl: './summary.component.css',
+})
+export class SummaryComponent {
+  initialLocation = { lat: 24.8607, lng: 67.0011 }; // Centered on California
+  ICONS: { [key: string]: string } = ICONS;
+  usersImageSrc = '/assets/images/users.png';
+
+  places: Itinerary[] = [];
+
+  constructor(
+    public locationService: LocationService,
+    public apiService: ApiService,
+    private cdr: ChangeDetectorRef,
+    private router: Router,
+  ) {}
+
+  handleUserStackTileClick(clickedOption: string): void {
+    switch (clickedOption) {
+      case 'upvotes':
+        // Navigate to the upvotes page
+         this.router.navigate([
+            ItinerariesRoutesEnum.ITINERARY,
+            ItinerariesRoutesEnum.ITINERARY_DETAIL,
+            ItinerariesRoutesEnum.ITINERARY_USERS,
+          ]);
+        break;
+    }
+  }
+
+  ngOnInit(): void {
+    this.apiService.get('/assets/ItinerariesData.json').subscribe((data) => {
+      this.places = data as Itinerary[];
+      this.cdr.detectChanges();
+    });
+    this.locationService.getCurrentLocation().subscribe((location) => {
+      this.initialLocation.lat = location.lat;
+      this.initialLocation.lng = location.long;
+    });
+  }
+
+  navToStartLocation() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY_ORIGIN,
+      1,
+    ]);
+  }
+
+  navToAddPlace() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.SELECT_ITINERARY_ADD_PLACE,
+      1,
+    ]);
+  }
+
+  navToMembers() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY,
+    ]);
+  }
+
+  navToAddPlaceDateTime() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.SELECT_ITINERARY_ADD_PLACE,
+      1,
+      ItinerariesRoutesEnum.SELECT_ITINERARY_PLACE_DATETIME,
+    ]);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-detail/itinerary-detail.component.html

@@ -0,0 +1,37 @@
+<div>
+  <ng-template #menuItems>
+    <lib-menu-btn [menuItems]="dropdownMenuItems" class="lib-menu-bg-none">
+      <img [src]="ICONS['horizontal']" alt="right-icon" />
+    </lib-menu-btn>
+  </ng-template>
+
+  <app-header
+    [headerSuffixTemplate]="menuItems"
+    heading="Adventure Tour"
+    (firstButton)="back()"
+    [titleIcon]="ICONS['editPink']"
+    (titleIconClick)="navToMembers()"
+  ></app-header>
+  <lib-tab-menu
+    [items]="tabMenuItems"
+    [activeItem]="activeItem"
+    (activeItemChange)="onActiveItemChange($event)"
+    #libTabMenu
+  ></lib-tab-menu>
+
+  <div class="minScreen">
+    <router-outlet></router-outlet>
+  </div>
+</div>
+
+<ng-container>
+  <lib-popup
+    [isOpen]="isModalOpen"
+    confirmButton="Delete"
+    cancelButton="Keep"
+    title="Delete Itinerary"
+    message="Are you sure you want to permanently delete this history?"
+    (modalConfirm)="onModalConfirmed()"
+    (modalDismiss)="onModalDismissed()"
+  ></lib-popup>
+</ng-container>

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-detail/itinerary-detail.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-detail/itinerary-detail.component.ts

@@ -0,0 +1,102 @@
+import { Location } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { LibMenuItem } from '@naniteninja/ionic-lib';
+import { MenuItem } from 'primeng/api';  
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+import { ICONS } from '../../../../_constants/constants';
+
+@Component({
+  selector: 'app-itinerary-detail',
+  templateUrl: './itinerary-detail.component.html',
+  styleUrl: './itinerary-detail.component.css',
+})
+export class ItineraryDetailComponent implements OnInit {
+  @Input() itineraryTitle = 'Advance Tour';
+  ICONS = ICONS;
+  tabMenuItems: MenuItem[] = [
+    {
+      label: 'Summary',
+      icon: 'pi pi-fw pi-home',
+      routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.ITINERARY_DETAIL}/${ItinerariesRoutesEnum.ITINERARY_SUMMARY}`,
+    },
+    {
+      label: 'Map',
+      icon: 'pi pi-fw pi-map-marker',
+      routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.ITINERARY_DETAIL}/${ItinerariesRoutesEnum.ITINERARY_MAP}`,
+    },
+    {
+      label: 'Details',
+      icon: 'pi pi-fw pi-user',
+      routerLink: `${ItinerariesRoutesEnum.ITINERARY}/${ItinerariesRoutesEnum.ITINERARY_DETAIL}/${ItinerariesRoutesEnum.ITINERARY_MORE_DETAIL}`,
+    },
+  ];
+
+  activeItem!: MenuItem;
+
+  dropdownMenuItems: LibMenuItem[] = [
+    {
+      title: 'Edit Itinerary',
+      iconUrl: ICONS['edit'],
+    },
+    {
+      title: 'Archive',
+      iconUrl: ICONS['archiveWhite'],
+    },
+    {
+      title: 'Add to Favorites',
+      iconUrl: ICONS['favorite'],
+    },
+    {
+      title: 'Share Itinerary',
+      iconUrl: ICONS['share'],
+    },
+    {
+      title: 'Report',
+      iconUrl: ICONS['report'],
+    },
+    {
+      title: 'Delete Itinerary',
+      iconUrl: ICONS['delete'],
+      command: () => {
+        this.isModalOpen = true;
+      },
+    },
+  ];
+
+  isModalOpen = false;
+
+  constructor(
+    private location: Location,
+    private router: Router,
+  ) {}
+
+  ngOnInit(): void {
+    this.activeItem = this.tabMenuItems.find(
+      (x) => x.routerLink === this.router.url,
+    )!;
+  }
+
+  onModalConfirmed() {
+    this.isModalOpen = false;
+  }
+
+  onModalDismissed() {
+    this.isModalOpen = false;
+  }
+
+  //NAVIGATIONS
+  back() {
+    this.location.back();
+  }
+  navToMembers() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.CREATE_ITINERARY,
+    ]);
+  }
+  onActiveItemChange(event: MenuItem) {
+    this.activeItem = event;
+    this.router.navigate([event.routerLink]);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/existing-friends/existing-friends.component.css

@@ -0,0 +1,46 @@
+.commonInterests {
+  font-family: "Calistoga";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 19.692px;
+  line-height: 160%;
+  text-transform: capitalize;
+  color: #ffffff;
+}
+
+.commonInterestItem {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 1.641px 13.128px 1.641px 1.641px;
+  gap: 6.56px;
+  background: #f7f5dd;
+  box-shadow:
+    -1.641px -1.641px 10.6665px rgba(255, 255, 255, 0.5),
+    3.282px 3.282px 6.564px rgba(0, 0, 0, 0.89);
+  border-radius: 82.05px;
+  width: 27.9px;
+  height: 27.9px;
+  border-radius: 30px;
+  flex: none;
+  order: 0;
+  flex-grow: 0;
+  width: 90px;
+  height: 30px;
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 11.487px;
+  line-height: 160%;
+  color: #000000;
+  flex: none;
+  order: 1;
+  flex-grow: 0;
+}
+
+.selectable-image {
+  width: 40px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 50%;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/existing-friends/existing-friends.component.html

@@ -0,0 +1,50 @@
+<div class="relative min-h-screen">
+  <div class="z-auto">
+    <div class="pb-10">
+      <ng-container *ngIf="loading">
+        <lib-info-card-placeholder
+          [avatar]="true"
+          [count]="5"
+        ></lib-info-card-placeholder>
+      </ng-container>
+
+      <ng-template #actions>
+        <lib-menu-btn
+          (select)="handleMenueItemSelect()"
+          (click)="handleMenuClick()"
+          (change)="handleMenuItemChange()"
+          class="lib-menu-custom-class lib-menu-bg-none"
+          [disableTextShadow]="true"
+        >
+          <img [src]="ICONS['horizontalWhite']" alt="Horizontal divider" />
+        </lib-menu-btn>
+      </ng-template>
+
+      @if (!loading) {
+        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+          <ng-container *ngFor="let i of itineraryMembers">
+            <app-user-tile
+              [name]="i.memberName"
+              [email]="i.memberEmail"
+              [image]="i.memberPic"
+              [sufixTemplate]="actions"
+            >
+            </app-user-tile>
+          </ng-container>
+        </div>
+      }
+
+      <div class="flex px-4">
+        <img [src]="ICONS['invitePink']" />
+        <button class="pinkTextColor" (click)="navToListFriendUsers()">
+          Friend Request
+        </button>
+      </div>
+
+      <div class="border-t border-gray-700 mt-6 mb-6"></div>
+      <h2 class="commonInterests px-4 mb-4">Common Interests</h2>
+
+      <lib-selectable [options]="passions"></lib-selectable>
+    </div>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/existing-friends/existing-friends.component.ts

@@ -0,0 +1,76 @@
+import { Location } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { Router } from '@angular/router';
+import { SelectOption } from '@naniteninja/ionic-lib';
+import { Subscription } from 'rxjs';  
+import { ItinerariesRoutesEnum } from '../../../../../_enums/ItenariesRoutes.enum';
+import { Iicon } from '../../../../../_interface/icon';
+import { IItineraryMember } from '../../../../../_models/itineraryMember'; 
+import { ICONS } from '../../../../../_constants/constants';
+import { AssetsService } from '../../../../../_services/assets.service';
+
+@Component({
+  selector: 'app-existing-friends',
+  templateUrl: './existing-friends.component.html',
+  styleUrl: './existing-friends.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExistingFriendsComponent implements OnInit, OnDestroy {
+  ICONS: Iicon = ICONS;
+  itineraryMembers: IItineraryMember[] | undefined;
+  loading: boolean = false;
+  subscription!: Subscription;
+  image: string = ICONS['userimageSrc'];
+  passions: SelectOption<string>[] = [
+    {
+      image: ICONS['food'],
+      value: 'Viyasa',
+      label: 'Viyasa',
+      selected: true,
+      disabled: true,
+    },
+  ];
+
+  constructor(
+    private router: Router,
+    private _location: Location,
+    private assetService: AssetsService,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  //UI LOGIC
+
+  ngOnInit(): void {
+    this.loading = true;
+    this.subscription = this.assetService.getMembers().subscribe((data) => {
+      this.itineraryMembers = data;
+      this.loading = false;
+      this.cdr.detectChanges();
+    });
+  }
+
+  handleMenueItemSelect(): void {}
+  handleMenuItemChange(): void {}
+  handleMenuClick(): void {}
+
+  //NAVIGATIONS
+  backButton(): void {
+    this._location.back();
+  }
+  navToListFriendUsers(): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.LIST_FRIENDS,
+    ]);
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/friend-requests/friend-requests.component.html

@@ -0,0 +1,25 @@
+<div class="pl-4 pr-4">
+  <app-header heading="Friend Requests" (firstButton)="backButton()"></app-header>
+
+  <p class="interestedPeopleHeading mt-3">Invites Sent (3)</p>
+
+  <ng-container *ngIf="loading">
+    <lib-info-card-placeholder [avatar]="true" [count]="5"></lib-info-card-placeholder>
+  </ng-container>
+
+  <ng-template #sufixAction>
+    <div class="flex">
+      <img [src]="ICONS['closePink']" alt="Invite label" />
+      <button class="pinkTextColor">Revoke</button>
+    </div>
+  </ng-template>
+
+  @if (!loading) {
+  <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+    <ng-container *ngFor="let i of itineraryMembers">
+      <app-user-tile [name]="i.memberName" [email]="i.memberEmail" [image]="i.memberPic"
+        [sufixTemplate]="sufixAction"></app-user-tile>
+    </ng-container>
+  </div>
+  }
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/friend-requests/friend-requests.component.scss

@@ -0,0 +1,13 @@
+.interestedPeopleHeading {
+  /* People who might want to join this itinerary */
+
+  font-family: "Calistoga";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13.128px;
+  line-height: 160%;
+  /* identical to box height, or 21px */
+
+  /* Dark/White (100%) */
+  color: #ffffff;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/friend-requests/friend-requests.component.ts

@@ -0,0 +1,54 @@
+import { Location } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { Subscription } from 'rxjs';  
+import { Iicon } from '../../../../../_interface/icon';
+import { IItineraryMember } from '../../../../../_models/itineraryMember'; 
+import { ICONS } from '../../../../../_constants/constants';
+import { AssetsService } from '../../../../../_services/assets.service';
+@Component({
+  selector: 'app-friend-requests',
+  templateUrl: './friend-requests.component.html',
+  styleUrl: './friend-requests.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FriendRequestsComponent implements OnInit, OnDestroy {
+  ICONS: Iicon = ICONS;
+  itineraryMembers: IItineraryMember[] = [];
+  loading: boolean = false;
+  subscription!: Subscription;
+
+  constructor(
+    private _location: Location,
+    private assetService: AssetsService,
+    private cdr: ChangeDetectorRef,
+  ) {}
+  ngOnInit(): void {
+    this.getTotalItineraryMembers();
+  }
+
+  //UI LOGIC
+  getTotalItineraryMembers(): void {
+    this.loading = true;
+    this.subscription = this.assetService.getMembers().subscribe((data) => {
+      this.itineraryMembers = data;
+      this.loading = false;
+      this.cdr.detectChanges();
+    });
+  }
+  handleSearchStringChange(_$event: string) {}
+  clear(): void {}
+
+  backButton(): void {
+    this._location.back();
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/itinerary-friends.component.html

@@ -0,0 +1,6 @@
+<div class="z-auto pr-3 pl-3">
+  <div class="pb-4">
+    <app-header heading="Friends" (firstButton)="backButton()"></app-header>
+  </div>
+  <app-existing-friends></app-existing-friends>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/itinerary-friends.component.ts

@@ -0,0 +1,15 @@
+import { Location } from '@angular/common';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-itinerary-friends',
+  templateUrl: './itinerary-friends.component.html',
+  styleUrl: './itinerary-friends.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ItineraryFriendsComponent {
+  constructor(private _location: Location) {}
+  backButton(): void {
+    this._location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/list-friend-users/list-friend-users.component.css

@@ -0,0 +1,8 @@
+.interestedPeopleHeading {
+  font-family: "Calistoga";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 13.128px;
+  line-height: 160%;
+  color: #ffffff;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/itinerary-friends/list-friend-users/list-friend-users.component.html

@@ -0,0 +1,45 @@
+<div class="ps-4 pe-4">
+  <app-header heading="Search For Friends" (firstButton)="backButton()"></app-header>
+
+  <lib-search-bar class="search-field" [placeholderText]="'Search people to invite' | translate"
+    (searchStringChange)="handleSearchStringChange($event)" (cleared)="clear()" (click)="navToSendRequest()"
+    [searchIcon]="ICONS['dashboardSearch']">
+  </lib-search-bar>
+
+  <h3 class="f-calistoga font-normal text-sm mt-4 mb-3">Suggested Requests</h3>
+
+  <ng-container *ngIf="loading">
+    <lib-info-card-placeholder [avatar]="true" [count]="5"></lib-info-card-placeholder>
+  </ng-container>
+
+  @if (!loading) {
+  <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-4">
+    <ng-container *ngFor="let i of friends; let idx = index">
+      <ng-template #request>
+        <div (click)="sendRequest(idx)" class="flex">
+          <img [src]="ICONS['invitePink']" alt="Invite label" />
+          <button class="pinkTextColor">Request</button>
+        </div>
+      </ng-template>
+
+      <ng-template #requested>
+        <div class="flex">
+          <img [src]="ICONS['userAdded']" alt="Invite label" />
+          <button class="pinkTextColor">Requested</button>
+        </div>
+      </ng-template>
+
+      <app-user-tile [name]="i.memberName" [email]="i.memberEmail" [image]="i.memberPic"
+        [sufixTemplate]="i.added ? requested : request"></app-user-tile>
+    </ng-container>
+  </div>
+  }
+
+  <!-- Separator Line -->
+  <div class="border-t border-gray-700 mt-2"></div>
+
+  <p class="interestedPeopleHeading mt-4">Requests Sent</p>
+
+  <app-user-stack-tile label="16 People" [images]="images" buttonText="View Requests"
+    (onClick)="navToFriendRequests()"></app-user-stack-tile>
+</div>