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

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

@@ -0,0 +1,17 @@
+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',
+})
+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,111 @@
+<ng-container *ngFor="let data of commentsData; let i = index">
+  <div class="comment-card text-white p-4 rounded-xl w-full">
+    <div class="flex items-start justify-between">
+      <div class="flex space-x-3 mr-1">
+        <img
+          [src]="ICONS['user']"
+          loading="lazy"
+          alt="User"
+          class="comment-user rounded-full"
+        />
+        <div>
+          <p class="text-sm font-semibold">
+            {{ data?.userName }} - {{ data?.timeAgo }}
+            {{ data.isEditted == true ? "(Edited)" : "" }}
+          </p>
+          <p class="text-md text-gray-300">{{ data?.commentText }}</p>
+        </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="flex gap-[18px]">
+      <div class="flex flex-col items-center text-pink-500">
+        <img
+          [src]="ICONS['upvote']"
+          alt="Upvote"
+          class="cursor-pointer"
+          (click)="upvote(i)"
+        />
+        <span class="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 class="flex flex-col">
+        <div
+          *ngIf="data.hasAttachments === true"
+          class="grid grid-cols-2 gap-2 mt-3"
+        >
+          <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 h-28 rounded-lg 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 space-x-4 text-gray-400 text-sm">
+            <button
+              class="flex items-center space-x-1 hover:text-white"
+              (click)="RedirectToReplies()"
+            >
+              <img [src]="ICONS['comment2']" alt="Reply" />
+              <p>Reply</p>
+            </button>
+            <button class="flex items-center space-x-1 hover:text-white">
+              <img
+                style="height: 10px; width: 10px"
+                [src]="ICONS['featured']"
+                alt="Feature"
+              />
+              <p>Featured</p>
+            </button>
+          </div>
+        </div>
+        <p
+          class="custom-pink mt-4 font-bold text-sm cursor-pointer"
+          (click)="RedirectToReplies()"
+        >
+          View Replies
+        </p>
+      </div>
+    </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,27 @@
+.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;
+}

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

@@ -0,0 +1,88 @@
+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',
+})
+export class CommentComponent implements OnInit {
+  @Input() libMenuItem!: LibMenuItem[];
+  @Input() commentsData: ICommentsData[] | undefined;
+  ICONS: Iicon = ICONS;
+  index: number = 0;
+  isOpen: boolean = false;
+  imageComponent: Type<unknown> = 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();
+  });
+});

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

@@ -0,0 +1,21 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-custom-heading-with-button',
+  templateUrl: './custom-heading-with-button.component.html',
+  styleUrl: './custom-heading-with-button.component.scss',
+})
+export class CustomHeadingWithButtonComponent {
+  @Input() heading!: string;
+  @Input() buttonText!: string;
+  @Input() buttonIcon!: string;
+  @Input() cssClass!: string;
+  @Output() buttonClick = new EventEmitter<MouseEvent>();
+}

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

@@ -0,0 +1,120 @@
+<div class="carousel-container w-full">
+  <div class="carousel">
+    <lib-image-deck [index]="1" class="imageSize" [images]="images"></lib-image-deck>
+    <div class="card active bg-cover bg-center bg-no-repeat story-img"
+      style="position: absolute; top: 20px; background: transparent; z-index: 1;">
+      <div class="flex justify-between">
+        <div class="flex">
+          <div class="items-start justify-between gap-5 px-4 py-4">
+            <button (click)="goBack()">
+              <img loading="lazy" [src]="ICONS['back']" alt="Back" />
+            </button>
+          </div>
+          <h5 class="text-secondary opacity-80 text-[10px] xs:text-[9px] flex gap-[6px] items-center">
+            <img loading="lazy" [src]="ICONS['userReal']" alt="User" />
+            <span>{{ processedCardData?.userName }} </span>
+            <img loading="lazy" [src]="ICONS['king']" alt="Favorite" />
+          </h5>
+        </div>
+        <div class="gap-5 px-4 py-4">
+          <lib-menu-btn (select)="handleMenueItemSelect()" (click)="handleMenuClick()" (change)="handleMenuItemChange()"
+            class="lib-menu-custom-class lib-menu-bg-none" [disableTextShadow]="true" [menuItems]="libMenuItem">
+            <img loading="lazy" [src]="ICONS['horizontalWhite']" alt="--------" />
+          </lib-menu-btn>
+        </div>
+      </div>
+
+      <div class="flex px-4">
+        <div class="progress-bar"></div>
+        <div class="progress-bar"></div>
+        <div class="progress-bar"></div>
+      </div>
+
+      <div class="py-2 px-4">
+        <div class="flex items-start story-content mt-2"  *ngFor="let item of [1, 2, 3]">
+          <div class="items-center sm:text-[10px] xs:text-[9px] flex flex-col gap-y-[0px] px-4 py-2">
+            <img loading="lazy" [src]="ICONS['upvote']" alt="Upvote" />
+            <span [class]="!isDraft ? 'text-primary' : 'drah-voter-header'">
+              {{ processedCardData?.upVotes }}
+            </span>
+            <img loading="lazy" [src]="ICONS['downvote']" alt="Downvote" />
+          </div>
+          <div class="py-4">
+            <h5 class="text-secondary mb-3 opacity-80 text-[20px] xs:text-[15px] flex gap-[6px] items-center">
+              <img loading="lazy" class="story-avatar" [src]="ICONS['userReal']" alt="User" />
+              <span>{{ processedCardData?.userName }} </span>
+              <img loading="lazy" [src]="ICONS['king']" alt="Favorite" />
+            </h5>
+
+            <p class="story-text">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt
+              <span class="read-more-text">Read More</span>
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-start justify-end absolute story-right-info">
+        <div>
+          <div class="py-2 flex flex-col items-center">
+            <img loading="lazy" [src]="ICONS['upvoteWhite']" alt="Upvote" />
+            <span class="votes-Count">
+              {{ processedCardData?.upVotes }}
+            </span>
+            <img loading="lazy" [src]="ICONS['downvoteWhite']" alt="Downvote" />
+          </div>
+
+          <div class="py-2 flex flex-col items-center">
+            <img loading="lazy" class="py-2" [src]="ICONS['message']" alt="Message" />
+            <span class="votes-Count"> 23 </span>
+          </div>
+
+          <div class="py-2 flex flex-col items-center">
+            <img loading="lazy" class="py-2" [src]="ICONS['forward']" alt="Forward" />
+            <span class="votes-Count"> Share </span>
+          </div>
+          <div class="py-2 flex flex-col items-center">
+            <img loading="lazy" class="py-2" [src]="ICONS['badge_check']" alt="Check" />
+          </div>
+        </div>
+      </div>
+      <div class="text-white absolute w-full story-bottom-info">
+        <div class="flex-1">
+          <h2 class="text-2xl font-bold story-title py-2">Adventure Tour</h2>
+          <div class="py-2">
+            <h5 class="text-secondary opacity-80 text-[10px] xs:text-[9px] flex gap-[6px] items-center">
+              <img loading="lazy" [src]="ICONS['userReal']" alt="User" />
+              <span>{{ processedCardData?.userName }} -
+                {{ processedCardData?.timeAgo }}</span>
+            </h5>
+          </div>
+        </div>
+        <div class="flex items-start justify-between w-full items-center">
+          <!-- Left-aligned div -->
+          <div class="flex space-x-1 justify-start">
+            <span class="story-bottom-info-badge ellipsis story-bottom-buttons-pink"><img loading="lazy" [src]="ICONS['temp']" alt="Place" />
+              Palace</span>
+            <span class="story-bottom-info-badge ellipsis story-bottom-buttons-white"><img loading="lazy" [src]="ICONS['coffee']" alt="Coffee" />
+              Coffee</span>
+            <span class="story-bottom-info-badge ellipsis story-bottom-buttons-white"><img loading="lazy" [src]="ICONS['template']" alt="Temple" />
+              Temple</span>
+            <span class="story-bottom-info-badge font-bold story-bottom-buttons-white">More +6</span>
+          </div>
+
+          <!-- Right-aligned div -->
+          <div class="flex justify-end items-end px-4">
+            <div class="flex">
+              <div class="flex items-end gap-x-2">
+                <span class="text-xs userIconText text-nowrap">
+                  {{ processedCardData?.users }}
+                  <span class="user-icon-text" *ngIf="processedCardData && processedCardData!.users > 0">Users</span>
+                </span>
+                <img loading="lazy" [src]="processedCardData?.userimageSrc" alt="UserPic" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>