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

package/src/lib/itinerary-app/modules/itineraries/pages/comment-replies/components/comment-single/comment-single.component.html

@@ -0,0 +1,65 @@
+<ng-container *ngIf="comment">
+    <div class="comment-card text-white rounded-xl w-full">
+        <div class="flex items-start justify-between">
+            <!-- Left Side: Profile & Details -->
+            <div class="flex">
+                <!-- Profile Image -->
+                <div class="min-w-[30px] w-[30px] flex flex-col items-center">
+                  <img [src]="ICONS['user']" alt="User" class="w-[20px] h-[20px] rounded-full mt-1 mb-3" />
+                  <!-- Upvote/Downvote -->
+                  <div class="flex flex-col items-center text-pink-500 gap-[2px]">
+                      <img [src]="ICONS['upvote']" alt="Upvote" class="cursor-pointer" />
+                      <span class="text-[7px] font-semibold">{{ comment.upVotes }}</span>
+                      <img [src]="ICONS['downvote']" alt="Downvote" class="cursor-pointer" />
+                  </div>
+                </div>
+
+                <!-- Username & Timestamp -->
+                <div class="ps-3 pe-2">
+                    <h4 class="comment-title mt-1">{{ comment.userName }} - {{ comment.timeAgo }}
+                      {{comment.isEditted == true ? "(Edited)" : ""}}
+                    </h4>
+                    <p class="comment-content mt-1 min-h-[35px]">{{ comment.commentText }}</p>
+                    <!-- Reply & Feature Comment -->
+                    <div class="flex space-x-4 text-gray-400 text-sm comment-control mt-3">
+                      <button class="flex items-center space-x-1 hover:text-white me-4">
+                          <img [src]="ICONS['comment2']" alt="Reply" />
+                          <span class="normal-text-gray">Reply</span>
+                      </button>
+                      <button class="flex items-center space-x-1 hover:text-white">
+                          <ng-container *ngIf="featured; else notFeatured">
+                              <img [src]="ICONS['removeFeature']" alt="Feature" />
+                              <span class="normal-text-gray">Featured</span>
+                          </ng-container>
+                          <ng-template #notFeatured>
+                              <img [src]="ICONS['addFeature']" alt="Feature" />
+                              <span class="normal-text-gray">Feature Comment</span>
+                          </ng-template>
+                      </button>
+                    </div>
+                </div>
+            </div>
+
+            <lib-menu-btn (select)="handleMenueItemSelect()" (click)="handleMenuClick()"
+                (change)="handleMenuItemChange()" class="lib-menu-custom-class lib-menu-bg-none" [disableTextShadow]="true"
+                [menuItems]="libMenuItem">
+                <img [src]="ICONS['horizontalWhite']" alt="tricolon" class="w-[10px] h-[10px]" />
+            </lib-menu-btn>
+        </div>
+
+        <!-- Attachments Section (Visible Only If hasAttachment is True) -->
+        <div *ngIf="comment.hasAttachments===true" class="grid grid-cols-2 gap-2 mt-3">
+            <ng-container *ngFor="let image of comment.attachments; let i = index">
+                <div class="relative" *ngIf="i < 4">
+                    <img [src]="image" alt="Attachment" class="w-full h-28 rounded-lg object-cover" />
+                    <div *ngIf="i === 3 && comment.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>
+        <!-- Separator Line -->
+        <div *ngIf="!featured" class="border-t border-gray-700 mt-1"></div>
+    </div>
+</ng-container>

package/src/lib/itinerary-app/modules/itineraries/pages/comment-replies/components/comment-single/comment-single.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/pages/comment-replies/components/comment-single/comment-single.component.ts

@@ -0,0 +1,36 @@
+import { Component, Input } from '@angular/core';
+import { LibMenuItem } from '@naniteninja/ionic-lib';
+import { ICommentsData } from '../../../../../../_interface/commentsdata';
+import { Iicon } from '../../../../../../_interface/icon'; 
+import { CustomDropdownMenuService } from '../../../../../../_services/custom-dropdown-menu.service';
+import { ICONS } from '../../../../../../_constants/constants';
+
+@Component({
+    selector: 'app-comment-single',
+    templateUrl: './comment-single.component.html',
+    styleUrl: './comment-single.component.css',
+    standalone: false
+})
+export class CommentSingleComponent {
+  @Input() libMenuItem!: LibMenuItem[];
+  @Input() comment!: ICommentsData;
+  @Input() featured!: boolean;
+  commentsData: ICommentsData[] | undefined;
+  ICONS: Iicon = ICONS;
+
+  constructor(
+    private customMenuList: CustomDropdownMenuService
+  ) {
+    this.libMenuItem = this.customMenuList.getMenuList('comment-replies');
+  }
+
+  ngOnInit(): void {
+  console.log(this.libMenuItem,'this.libMenuItem')
+
+  }
+
+  handleMenueItemSelect(): void { }
+  handleMenuItemChange(): void { }
+  handleMenuClick(): void {
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/comments/comment-comparison/comment-comparison.component.html

@@ -0,0 +1,86 @@
+<div class="text-white p-4 rounded-xl">
+  <div class="flex items-start justify-between">
+    <div class="flex space-x-3">
+      <img [src]="ICONS['user']" alt="User" class="comment-user rounded-full" />
+
+      <div>
+        <p class="text-xs">Jonathan updated their comment from</p>
+        <span class="text-xs text-gray-300">
+          {{ processedCardData?.commentText }}
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div
+    *ngIf="processedCardData?.hasAttachments"
+    class="grid grid-cols-2 gap-2 mt-3"
+  >
+    <ng-container
+      *ngFor="let image of processedCardData?.attachments; let i = index"
+    >
+      <div class="relative" *ngIf="i < 4">
+        <img
+          [src]="image"
+          alt="Attachment"
+          class="w-full h-28 rounded-lg object-cover"
+        />
+        <div
+          *ngIf="i === 3 && processedCardData?.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="border-t border-gray-700 mt-2 mb-5"></div>
+
+  <p class="text-xs">To</p>
+
+  <div class="flex items-start justify-between">
+    <div class="flex space-x-3">
+      <div>
+        <span class="text-xs text-gray-300">
+          I would like to change my statements here, that place was shit.
+        </span>
+      </div>
+    </div>
+  </div>
+
+  <div
+    *ngIf="processedCardData?.hasAttachments"
+    class="grid grid-cols-2 gap-2 mt-3"
+  >
+    <ng-container
+      *ngFor="let image of processedCardData?.attachments; let i = index"
+    >
+      <div class="relative" *ngIf="i < 4">
+        <img
+          [src]="image"
+          alt="Attachment"
+          class="w-full h-28 rounded-lg object-cover"
+        />
+        <div
+          *ngIf="i === 3 && processedCardData?.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="mt-5 flex gap-4">
+    <lib-primary-btn
+      class="w-1/2"
+      [disableTextShadow]="true"
+      (click)="disapprove()"
+      >Disapprove</lib-primary-btn
+    >
+    <lib-primary-btn class="w-1/2" [hoverOutline]="true" (click)="approve()"
+      >Approve</lib-primary-btn
+    >
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/comments/comment-comparison/comment-comparison.component.scss

@@ -0,0 +1,11 @@
+p.text-xs {
+  font-size: 9.85px;
+}
+
+span.text-xs {
+  font-size: 11.49;
+}
+.comment-user {
+  height: 20px;
+  width: 20px;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/comments/comment-comparison/comment-comparison.component.ts

@@ -0,0 +1,91 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
+import { Router } from '@angular/router';  
+import { ItinerariesRoutesEnum } from '../../../../../_enums/ItenariesRoutes.enum';
+import { ICommentsData } from '../../../../../_interface/commentsdata';
+import { Iicon } from '../../../../../_interface/icon';
+import { ApiService } from '../../../../../_services/api.service';
+import { ICONS } from '../../../../../_constants/constants';
+
+@Component({
+    selector: 'app-comment-comparison',
+    templateUrl: './comment-comparison.component.html',
+    styleUrl: './comment-comparison.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class CommentComparisonComponent implements OnInit {
+  @Input() isDraft!: boolean;
+  cardData: ICommentsData[] | undefined;
+  processedCardData: ICommentsData | undefined;
+  ICONS: Iicon = ICONS;
+
+  constructor(
+    private apiService: ApiService,
+    private router: Router,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  ngOnInit(): void {
+    this.getCommentsData();
+  }
+
+  private InvalidDataCheck(data: string | number | null | undefined): boolean {
+    return (
+      data?.toString().length == 0 ||
+      data == null ||
+      data == undefined ||
+      data == '0' ||
+      data == 0 ||
+      data == '-'
+    );
+  }
+
+  private processCardData(data: ICommentsData): ICommentsData {
+    return {
+      ...data,
+      upVotes: this.InvalidDataCheck(data.upVotes) ? 0 : data.upVotes,
+      title: this.InvalidDataCheck(data.title)
+        ? 'Untitled Itinerary'
+        : data.title,
+      userName: this.InvalidDataCheck(data.userName) ? 'You' : data.userName,
+      timeAgo: this.InvalidDataCheck(data.timeAgo) ? '' : data.timeAgo,
+
+      views: this.InvalidDataCheck(data.views) ? 0 : data.views,
+      commentText: this.InvalidDataCheck(data.commentText)
+        ? ''
+        : data.commentText,
+
+      userimageSrc: this.InvalidDataCheck(data.userimageSrc)
+        ? ICONS['notSpecified']
+        : data.userimageSrc,
+    };
+  }
+
+  getCommentsData() {
+    this.apiService.get('/assets/commentsData.json').subscribe((data) => {
+      this.cardData = data as ICommentsData[];
+      this.processedCardData = this.cardData?.[0]
+        ? this.processCardData(this.cardData[0])
+        : undefined;
+      this.cdr.detectChanges();
+    });
+  }
+  approve() {
+    this.navToComments();
+  }
+  disapprove() {
+    this.navToComments();
+  }
+  navToComments() {
+    this.router.navigate([ItinerariesRoutesEnum.COMMENTS]);
+  }
+  handleMenueItemSelect(): void {}
+  handleMenuItemChange(): void {}
+  handleMenuClick(): void {}
+}

package/src/lib/itinerary-app/modules/itineraries/pages/comments/comment-search/comment-search.component.css

@@ -0,0 +1,34 @@
+.text {
+  font-family: "Gilroy";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 11.487px;
+  line-height: 150%;
+  letter-spacing: -0.011em;
+  color: #ffffff;
+  text-shadow:
+    0px 0px 3.282px rgba(255, 255, 255, 0.5),
+    0px 0px 16.41px #fe3c72,
+    0px 0px 4.1025px rgba(254, 60, 114, 0.2);
+}
+
+.applyBtn {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  width: 100%;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.w-100 {
+  width: 100% !important;
+}
+
+.highlight {
+  background: rgba(254, 60, 114, 1);
+  padding: 2px 1px;
+  border-radius: 10px;
+}

package/src/lib/itinerary-app/modules/itineraries/pages/comments/comment-search/comment-search.component.html

@@ -0,0 +1,16 @@
+<div class="ps-5 pe-5">
+  <app-header [heading]="'Comment Search'" (firstButton)="navToBack()"></app-header>
+  <p class="mt-2 mb-3">
+    Create and apply custom advance filters or select popular preset advance
+    filters.
+  </p>
+
+  <lib-filter-bar [filters]="filtersss" [savedFilters]="filtersss" [userFiltersList]="userFilterList"
+    [standardFilters]="filtersss" [showAllFilters]="true" (searchStringChange)="search($event)"
+    [activeFilter]="userFilterList[0]"></lib-filter-bar>
+
+  <div class="mt-5 ml-2" *ngFor="let c of visibleComments" (click)="viewReplies(c)">
+    <img class="w-100 mb-2" [src]="ICONS['divider']" alt="divider" />
+    <span [innerHtml]="c"></span>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/comments/comment-search/comment-search.component.ts

@@ -0,0 +1,134 @@
+import { Location } from '@angular/common';
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { FilterDataRequest, SelectOption } from '@naniteninja/ionic-lib';
+import { Iicon } from '../../../../../_interface/icon';
+import { ItinerariesRoutesEnum } from '../../../../../_enums/ItenariesRoutes.enum';
+import { ICONS } from '../../../../../_constants/constants';
+
+@Component({
+    selector: 'app-comment-search',
+    templateUrl: './comment-search.component.html',
+    styleUrls: ['./comment-search.component.css'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: false
+})
+export class CommentSearchComponent implements OnInit {
+  ICONS : Iicon = ICONS;
+  searchTerm: string = '';
+  filtersss: SelectOption<number>[] = [
+    {
+      label: 'Hello',
+      value: 2,
+      selected: true,
+    },
+  ];
+  userFilterList: FilterDataRequest[] = [
+    {
+      name: 'Filter by Name Ascending',
+      projectGridFilterId: '123',
+      collectionName: 'Employees',
+      userFilters: [
+        {
+          publicFieldName: 'Name',
+          operatorType: 'Contains',
+          values: ['John'],
+        },
+      ],
+      sort: {
+        field: 'Name',
+        direction: 'Ascending',
+      },
+      order: 1,
+    },
+    {
+      name: 'Filter by Department and Salary Descending',
+      projectGridFilterId: '456',
+      collectionName: 'Employees',
+      userFilters: [
+        {
+          publicFieldName: 'Department',
+          operatorType: 'Equals',
+          values: ['IT'],
+        },
+        {
+          publicFieldName: 'Salary',
+          operatorType: 'GreaterThan',
+          values: [50000],
+        },
+      ],
+      sort: {
+        field: 'Salary',
+        direction: 'Descending',
+      },
+      order: 2,
+    },
+  ];
+
+  visibleComments: SafeHtml[] = [];
+  private comments: string[] = [
+    "I had a great experience out there. I would say it's perfect for a coffee lover.",
+    'Loving the great ideas here, yet it’s time for me to step out.',
+    'It’s been a great exchange of ideas, but I’ve reached my limit—peace out!',
+    'Absolutely loved the vibe of this place! Can’t wait to visit again.',
+    'The discussions here are top-notch. Keep up the great work, everyone!',
+    'Such a refreshing perspective! This place never fails to inspire me.',
+    "I'm learning so much from everyone here—thank you all!",
+    'This is exactly the kind of place I was looking for. So insightful!',
+    'Had an amazing time here, but I need to wrap up for now. Until next time!',
+    'Great energy and discussions! Looking forward to more in the future.',
+  ];
+
+  constructor(
+    private sanitizer: DomSanitizer,
+    private location: Location,
+    private router: Router
+  ) { }
+
+  ngOnInit(): void {
+    this.visibleComments = this.comments.map((comment) =>
+      this.sanitizer.bypassSecurityTrustHtml(comment),
+    );
+  }
+
+  search(e: string): void {
+    this.searchTerm = e.toLowerCase().trim();
+
+    if (!this.searchTerm) {
+      this.visibleComments = this.comments.map((comment) =>
+        this.sanitizer.bypassSecurityTrustHtml(comment),
+      );
+      return;
+    }
+
+    const words = this.searchTerm.split(/\s+/).filter(Boolean);
+
+    const filteredComments = this.comments.filter((comment) =>
+      words.every((word) => comment.toLowerCase().includes(word)),
+    );
+
+    const combinedRegex = new RegExp(
+      `(${words.map((word) => this.escapeRegExp(word)).join('|')})`,
+      'gi',
+    );
+
+    this.visibleComments = filteredComments.map((comment) => {
+      const highlightedText = comment.replace(
+        combinedRegex,
+        `<span class="highlight">$1</span>`,
+      );
+      return this.sanitizer.bypassSecurityTrustHtml(highlightedText);
+    });
+  }
+
+  private escapeRegExp(text: string): string {
+    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+  }
+
+  viewReplies(_comment: SafeHtml) {
+    this.router.navigate([ItinerariesRoutesEnum.ITINERARY, ItinerariesRoutesEnum.COMMENT_REPLIES])
+  }
+  //NAVIGATIONS
+  navToBack = () => this.location.back();
+}

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

@@ -0,0 +1,37 @@
+<div class="w-full">
+  <div class="fixed bottom-0 left-0 z-50 p-4 w-full">
+    <lib-toast [position]="StatusPosition.bottomLeft"></lib-toast>
+  </div>
+
+  <div class="w-full">
+    <div class="px-4">
+      <ng-template #search>
+        <img [src]="ICONS['search']" alt="right-icon" (click)="searchButtonClick()" />
+      </ng-template>
+      <app-header [isTextSearch]="false" heading="Comments" (firstButton)="backButton()" [headerSuffixTemplate]="search"></app-header>
+    </div>
+    <div class="px-3 mt-4 pb-10">
+      <div class="flex w-full">
+        <lib-text-box class="flex-1 w-full normal-text-lg" [(ngModel)]="textModel" [includeEmojiPicker]="true"
+          [emojiPickerConfig]="emojiPickerConfig" [includeImageAttachment]="true" style="max-width: calc(100vw - 69px);">
+        </lib-text-box>
+        <div class="h-[40px] mt-[-6.5px]">
+          <button (click)="SaveComment()">
+            <img [src]="ICONS['submit']" class="w-15 h-15" />
+          </button>
+        </div>
+
+      </div>
+      <comment-filter-menu (onFilterClick)="navToCommentSearch($event)"></comment-filter-menu>
+      <div class="w-full">
+        <app-comment [libMenuItem]="libMenuItem" [commentsData]="commentData"></app-comment>
+      </div>
+
+      <lib-popup [isOpen]="modalService.toggleModal">
+        <app-report-itinerary-modal popupTitle="Report Comment"></app-report-itinerary-modal>
+      </lib-popup>
+    </div>
+  </div>
+</div>
+
+<lib-toastr-stack [config$]="config$"></lib-toastr-stack>

package/src/lib/itinerary-app/modules/itineraries/pages/comments/comments-page.component.scss

@@ -0,0 +1,37 @@
+lib-text-box {
+  padding: 0px !important;
+}
+
+::ng-deep .success {
+  width: 85vw !important;
+}
+
+lib-text-box {
+  --height: 40px;
+  --input-padding: 10.8px;
+  --emoji-picker-trigger-icon-size: 16.41px;
+  --image-attachment-toggle-size: 16.41px;
+  --border-radius: 21px;
+  --lib-image-card-container-width: 62.56px;
+  --lib-image-card-container-height: 62.56px;
+}
+
+:root ::ng-deep .btn-selectable {
+    width: unset;
+    --padding-start: 8px;
+    --padding-end: 8px;
+    --padding-top: 8px;
+    --padding-bottom: 8px;
+    height: 38px;
+    font-family: Gilroy-Medium;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 160%;
+    color: var(--ion-text-color-secondary);
+    margin: 5px;
+    letter-spacing: 0px;
+    // --background: var(--cyrano-dark-color);
+    // --box-shadow: var(--cyrano-box-inset-shadow);
+    --background: red;
+    border-radius: 34px;
+}