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

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,87 @@
+@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;
+  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,117 @@
+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'],
+    standalone: false
+})
+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>

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

@@ -0,0 +1,18 @@
+import { Component, Input } from '@angular/core'; 
+import { CommentImageService } from '../../../_services/comment-image.service';
+
+@Component({
+    selector: 'app-comment-images',
+    templateUrl: './comment-images.component.html',
+    styleUrl: './comment-images.component.css',
+    standalone: false
+})
+export class CommentImagesComponent {
+  @Input() images: string[] = [];
+  @Input() index: number = 0;
+
+  constructor(commentImage: CommentImageService) {
+    this.images = commentImage.image;
+    this.index = commentImage.index;
+  }
+}

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

@@ -0,0 +1,115 @@
+<ng-container *ngFor="let data of commentsData; let i = index">
+  <div class="comment-card text-white px-4 mb-4 rounded-xl w-full">
+    <div class="flex items-start justify-between">
+      <div class="flex space-x-3 mr-1">
+        <div>
+          <img
+            [src]="ICONS['user']"
+            loading="lazy"
+            alt="User"
+            class="comment-user rounded-full"
+          />
+          <div class="flex flex-col items-center text-pink-500 mt-4">
+            <img
+              [src]="ICONS['upvote']"
+              alt="Upvote"
+              class="cursor-pointer"
+              (click)="upvote(i)"
+            />
+            <span class="normal-text-xs font-semibold text-pink-500">{{
+              data!.upVotes - data!.downVotes | votes
+            }}</span>
+            <img
+              [src]="ICONS['downvote']"
+              alt="Downvote"
+              class="cursor-pointer"
+              (click)="downvote(i)"
+            />
+          </div>
+        </div>
+
+        <div class="flex gap-[18px]">
+          <div class="flex flex-col">
+            <div>
+              <p class="normal-text-sm normal-text">
+                {{ data?.userName }} - {{ data?.timeAgo }}
+                {{ data.isEditted == true ? "(Edited)" : "" }}
+              </p>
+              <p class="normal-text-md text-white">{{ data?.commentText }}</p>
+            </div>
+            <div
+              *ngIf="data.hasAttachments === true"
+              class="grid grid-cols-2 gap-[3.5px] mt-3 mb-2"
+            >
+              <ng-container *ngFor="let image of data?.attachments; let i = index">
+                <div class="relative" *ngIf="i < 4">
+                  <img
+                    [src]="image"
+                    loading="lazy"
+                    alt="Attachment"
+                    (click)="showImage(data?.attachments!, i)"
+                    class="w-full object-cover"
+                  />
+                  <div
+                    *ngIf="i === 3 && data?.attachments"
+                    class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center text-white text-xl font-bold"
+                  >
+                    +{{ i }}
+                  </div>
+                </div>
+              </ng-container>
+            </div>
+            <div class="flex items-center justify-between mt-3">
+              <div class="flex gap-8 text-gray-400 text-sm">
+                <button
+                  class="flex items-center space-x-1 hover:text-white normal-text-sm"
+                  (click)="RedirectToReplies()"
+                >
+                  <img [src]="ICONS['comment2']" alt="Reply" />
+                  <p class="normal-text-sm">Reply</p>
+                </button>
+                <button class="flex items-center space-x-1 hover:text-white normal-text-sm">
+                  <img
+                    style="height: 10px; width: 10px"
+                    [src]="ICONS['featured']"
+                    alt="Feature"
+                  />
+                  <p class="normal-text-sm">Featured</p>
+                </button>
+              </div>
+            </div>
+            <p
+              class="custom-pink mt-4 font-bold normal-text-sm cursor-pointer"
+              (click)="RedirectToReplies()"
+            >
+              View Replies
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <lib-menu-btn
+        (select)="handleMenueItemSelect()"
+        (click)="handleMenuClick(i)"
+        (change)="handleMenuItemChange()"
+        class="lib-menu-custom-class lib-menu-bg-none"
+        [disableTextShadow]="true"
+        [menuItems]="libMenuItem"
+      >
+        <img [src]="ICONS['horizontalWhite']" alt="" />
+      </lib-menu-btn>
+    </div>
+
+
+
+    <div class="border-t border-gray-700 mt-2"></div>
+  </div>
+</ng-container>
+
+<lib-popup
+  [isOpen]="isOpen"
+  [modalComponent]="imageComponent"
+  [backdropDismiss]="true"
+  (afterCloseEvent)="close()"
+>
+</lib-popup>

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

@@ -0,0 +1,32 @@
+.comment-card {
+  .text-md {
+    font-size: 14px;
+  }
+  .text-sm {
+    font-size: 12px;
+  }
+  .text-xs {
+    font-size: 10px;
+  }
+  img {
+    transition: opacity 0.2s;
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+  .custom-pink {
+    margin-left: 0;
+    font-weight: bold;
+    color: #fe3c72;
+  }
+}
+
+.comment-user {
+  height: 20px;
+  width: 20px;
+}
+
+.grid img.object-cover {
+  width: 118.15;
+  height: 72.2;
+}

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

@@ -0,0 +1,89 @@
+import {
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+  Type,
+} from '@angular/core';
+import { Router } from '@angular/router'; 
+import { CommentImagesComponent } from './comment-images/comment-images.component';
+import { LibMenuItem } from '@naniteninja/ionic-lib';  
+import { ICONS } from '../../_constants/constants';
+import { ItinerariesRoutesEnum } from '../../_enums/ItenariesRoutes.enum';
+import { ICommentsData } from '../../_interface/commentsdata';
+import { Iicon } from '../../_interface/icon';
+import { CommentImageService } from '../../_services/comment-image.service';
+
+@Component({
+    selector: 'app-comment',
+    templateUrl: './comment.component.html',
+    styleUrl: './comment.component.scss',
+    standalone: false
+})
+export class CommentComponent implements OnInit {
+  @Input() libMenuItem!: LibMenuItem[];
+  @Input() commentsData: ICommentsData[] | undefined;
+  ICONS: Iicon = ICONS;
+  index: number = 0;
+  isOpen: boolean = false;
+  imageComponent: Type<CommentImagesComponent> = CommentImagesComponent;
+
+  //LIFE CYCLES
+  constructor(
+    private router: Router,
+    private cdr: ChangeDetectorRef,
+    private commentImageService: CommentImageService,
+  ) {}
+  ngOnInit(): void {
+    for (let i = 0; i < this.libMenuItem.length; i++) {
+      this.libMenuItem[i].command = () => {
+        this.handleUpdateComment();
+      };
+    }
+  }
+
+  //UI LOGIC
+  handleMenueItemSelect(): void {}
+  handleMenuItemChange(): void {}
+  handleMenuClick(i: number): void {
+    this.index = i;
+  }
+
+  close = (): void => {
+    this.isOpen = false;
+  };
+
+  showImage(images: string[], currentIndex: number): void {
+    if (this.isOpen) {
+      this.close();
+    }
+
+    setTimeout(() => {
+      this.isOpen = true;
+      this.commentImageService.image = images;
+      this.commentImageService.index = currentIndex;
+      this.cdr.detectChanges();
+    }, 0);
+  }
+
+  //NAVGIATIONS
+  handleUpdateComment() {
+    const id: string = this.commentsData![this.index].id;
+    this.router.navigate([ItinerariesRoutesEnum.COMMENTS, id]);
+  }
+
+  upvote(index: number) {
+    this.commentsData![index].upVotes += 1;
+  }
+
+  downvote(index: number) {
+    this.commentsData![index].downVotes += 1;
+  }
+
+  RedirectToReplies() {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.COMMENT_REPLIES,
+    ]);
+  }
+}

package/src/lib/itinerary-app/shared/custom-heading-with-button/custom-heading-with-button.component.html

@@ -0,0 +1,10 @@
+<div [class]="cssClass + ' flex flex-row justify-between items-center mb-5'">
+  <h4 class="heading">{{ heading }}</h4>
+  <button
+    class="iconButton flex flex-row items-center"
+    (click)="buttonClick.emit()"
+  >
+    <img class="inline" [ngSrc]="buttonIcon" height="12" width="13" />
+    <p class="inline">{{ buttonText }}</p>
+  </button>
+</div>

package/src/lib/itinerary-app/shared/custom-heading-with-button/custom-heading-with-button.component.scss

@@ -0,0 +1,23 @@
+@use "../../_styles/colors" as *;
+
+p {
+  color: $scroll-color;
+  margin-left: 2px;
+}
+
+.heading {
+  font-size: 12px;
+}
+
+.archive-css {
+  margin-top: 10px;
+}
+.archive-css h4 {
+  font-size: 12px !important;
+  color: $text-color-4 !important;
+}
+
+.archive-css p {
+  margin-top: 4px;
+  font-size: 10px !important;
+}

package/src/lib/itinerary-app/shared/custom-heading-with-button/custom-heading-with-button.component.spec.ts

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