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

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,49 @@
+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',
+})
+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,18 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'lib-action-card',
+  templateUrl: './action-card.component.html',
+  styleUrl: './action-card.component.scss'
+})
+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);
+  }
+}

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

@@ -0,0 +1,134 @@
+<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'">
+          {{ processedCardData.upVotes }}
+        </span>
+        <img [src]="ICONS['downvote']" alt="" />
+      </div>
+      <div class="">
+        <h4 class="title medium-14 p-0 m-0" (click)="handleTitleClick()">
+          {{ 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>
+    <div class="draft-header" *ngIf="processedCardData.isDraft">
+      Draft Saved
+    </div>
+
+    <div class="flex items-center">
+      <div
+        *ngIf="itineraryStarted"
+        (click)="handleStartItineraryClick()"
+        class="startItinerary"
+      >
+        <img [src]="ICONS['startItinerary']" alt="icon" />
+      </div>
+      <lib-menu-btn
+        (select)="handleMenueItemSelect()"
+        (click)="handleMenuClick()"
+        (change)="handleMenuItemChange()"
+        class="lib-menu-custom-class"
+        [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 mb-1 flex items-start gap-x-5">
+    <div class="1 mb-0 flex flex-col items-center justify-center">
+      <img
+        [class]="isDraft ? 'draf-location-image' : ''"
+        [src]="processedCardData.imageSrc"
+        alt=""
+        width="100"
+      />
+    </div>
+    <div class="2">
+      <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 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 class="flex items-center gap-x-2">
+      <span class="text-xs userIconText">
+        {{ processedCardData.users }}
+        <span class="user-icon-text" *ngIf="processedCardData.users > 0"
+          >Users</span
+        >
+      </span>
+      <img [src]="processedCardData.userimageSrc" alt="" />
+    </div>
+  </div>
+</lib-base-card>

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

@@ -0,0 +1,88 @@
+@use "../../_styles/colors" as *;
+
+.card-component {
+  width: 200px !important;
+  height: 300px !important;
+  background: $background-color-1;
+}
+
+.bottom-tags {
+  font-size: 12px;
+}
+.text-primary {
+  font-size: 10px;
+}
+
+.draft-header {
+  color: $text-color-4;
+  font-weight: normal !important;
+  font-size: 11px !important;
+  margin-top: 7px;
+  /* margin-left: 80px; */
+  position: relative;
+  left: 36px;
+}
+
+.draft-description {
+  color: $text-color-3;
+}
+
+.user-icon-text {
+  color: $text-color-4;
+  margin-top: 2px;
+  font-size: 13px;
+}
+
+.bottom-icons {
+  height: 15px;
+  width: 16px;
+}
+
+.bottom-icons:last-child {
+  height: 16px !important;
+  width: 17px !important;
+}
+
+.draf-location-image {
+  height: 5rem;
+  width: 9rem;
+}
+
+.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: 12px;
+  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;
+}
+
+.startItinerary {
+  position: relative;
+  top: -4px;
+}

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

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

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

@@ -0,0 +1,116 @@
+import { Component, EventEmitter, Input, OnInit, 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 { ApiService } from '../../_services/api.service';
+
+@Component({
+  selector: 'app-card-component',
+  templateUrl: './card-component.component.html',
+  styleUrls: ['./card-component.component.scss'],
+})
+export class CardComponent implements OnInit {
+  @Input() libMenuItem!: LibMenuItem[];
+  @Input() isDraft!: boolean;
+  cardData: ICardData | undefined;
+  processedCardData: ICardData | undefined;
+  ICONS: Iicon = ICONS;
+  @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>();
+
+  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(private apiService: ApiService) {}
+
+  ngOnInit(): void {
+    if (!this.isDraft) {
+      this.apiService.get('/assets/data.json').subscribe((data) => {
+        this.cardData = data as ICardData;
+        this.processedCardData = this.processCardData(this.cardData);
+      });
+    } else {
+      this.cardData = {
+        id: '2',
+        upVotes: '',
+        downVotes: 5,
+        title: '',
+        userName: '',
+        timeAgo: '',
+        location: '',
+        views: 0,
+        comments: 0,
+        shares: 0,
+        users: 0,
+        imageSrc: '',
+        userimageSrc: '',
+        isDraft: true,
+      };
+      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 == '-'
+    );
+  }
+
+  private processCardData(data: ICardData): ICardData {
+    return {
+      ...data,
+      id: data.id,
+      upVotes: this.nullCheck(data.upVotes) ? '00' : data.upVotes,
+      title: this.nullCheck(data.title) ? 'Untitled Itinerary' : data.title,
+      userName: this.nullCheck(data.userName) ? 'You' : data.userName,
+      timeAgo: this.nullCheck(data.timeAgo) ? '' : data.timeAgo,
+      users: this.nullCheck(data.users) ? 0 : data.users,
+      views: this.nullCheck(data.views) ? 0 : data.views,
+      comments: this.nullCheck(data.comments) ? 0 : data.comments,
+      shares: this.nullCheck(data.shares) ? 0 : data.shares,
+      imageSrc: this.nullCheck(data.imageSrc) ? ICONS['untitled'] : data.imageSrc,
+      userimageSrc: this.nullCheck(data.userimageSrc)
+        ? ICONS['notSpecified']
+        : data.userimageSrc,
+      location: this.nullCheck(data.location) ? 'Not Specified' : data.location,
+    };
+  }
+
+  handleMenueItemSelect(): void {}
+  handleMenuItemChange(): void {}
+  handleMenuClick(): void {}
+
+  handleForkClick(): void {
+    this.forkClicked.emit();
+  }
+  handleStartItineraryClick(): void {
+    this.StartItineraryClick.emit();
+  }
+  handleTitleClick(): void {
+    this.TitleClicked.emit();
+  }
+  handleMessageClicked(): void {
+    this.messageClicked.emit();
+  }
+}

package/src/lib/itinerary-app/shared/comment/comment-images/comment-images.component.html

@@ -0,0 +1,3 @@
+<div class="w-full h-full">
+  <lib-image-deck [images]="images" [activeIndex]="index"></lib-image-deck>
+</div>