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

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

@@ -0,0 +1,35 @@
+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'
+})
+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,90 @@
+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,
+})
+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,133 @@
+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,
+})
+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: any) {
+    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,32 @@
+<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="pb-10">
+      <app-header [isTextSearch]="false" heading="Comments" (firstButton)="backButton()"></app-header>
+
+      <div class="flex w-full items-center px-2">
+        <lib-text-box class="flex-1 w-full rounded-2" [(ngModel)]="textModel" [includeEmojiPicker]="true"
+          [emojiPickerConfig]="emojiPickerConfig" [includeImageAttachment]="true" style="max-width: calc(100vw - 69px);">
+        </lib-text-box>
+
+        <button (click)="SaveComment()">
+          <img [src]="ICONS['submit']" class="w-15 h-15" />
+        </button>
+      </div>
+
+      <app-filter-menu (onFilterClick)="navToCommentSearch($event)"></app-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,7 @@
+lib-text-box {
+  padding: 0px !important;
+}
+
+::ng-deep .success {
+  width: 85vw !important;
+}

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

@@ -0,0 +1,125 @@
+import { Location } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  OnInit,
+} from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  EmojiPickerConfig,
+  IText,
+  LibMenuItem,
+  StatusPosition,
+  ToastrDescription,
+  ToastrSeverity,
+  ToastrStackConfig, 
+} from '@naniteninja/ionic-lib';
+import { Subject } from 'rxjs';  
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+import { ICommentsData } from '../../../../_interface/commentsdata';
+import { Iicon } from '../../../../_interface/icon';
+import { ApiService } from '../../../../_services/api.service';
+import { CustomDropdownMenuService } from '../../../../_services/custom-dropdown-menu.service';
+import { ModalService } from '../../../../_services/modal.service';
+import { ICONS } from '../../../../_constants/constants';
+@Component({
+  selector: 'app-comments-page',
+  templateUrl: './comments-page.component.html',
+  styleUrl: './comments-page.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CommentsPageComponent implements OnInit {
+  emojiPickerConfig!: EmojiPickerConfig;
+  textModel!: IText | undefined;
+  libMenuItem: LibMenuItem[] = [];
+  commentData: ICommentsData[] = [];
+  attachedImages: string[] = [];
+  comment!: ICommentsData | undefined;
+  ICONS: Iicon = ICONS;
+  StatusPosition = StatusPosition;
+  config$: Subject<ToastrStackConfig> = new Subject<ToastrStackConfig>();
+
+  //LIFE CYCLES
+  constructor( 
+    public modalService: ModalService,
+    private _location: Location,
+    private router: Router,
+    private customMenuList: CustomDropdownMenuService,
+    private apiService: ApiService,
+    private activeRoute: ActivatedRoute,
+    private cdr: ChangeDetectorRef,
+  ) {
+    this.emojiPickerConfig = { pickerIcon: ICONS['pickerIcon'] };
+  }
+  ngOnInit(): void {
+    this.libMenuItem = this.customMenuList.getMenuList('stories');
+    this.getCommentsData();
+  }
+
+  //UI LOGIC
+  getCommentsData(): void {
+    this.apiService.get('/assets/commentsData.json').subscribe((data) => {
+      this.commentData = data as ICommentsData[];
+      const id: string = this.activeRoute.snapshot.params['id'];
+      if (id) {
+        this.comment = this.commentData.find((x) => x.id === id)!;
+        if (this.comment) {
+          this.textModel = {
+            message: this.comment?.commentText,
+            attachments: this.comment?.attachments,
+          };
+        }
+      }
+      this.cdr.detectChanges();
+    });
+  }
+
+  SaveComment(): void {
+    if (this.comment && this.comment.id) {
+      this.config$.next({
+        token: 'token',
+        title: 'Comment Updated',
+        description: {
+          content:
+            'Your featured comment will update after being approved by the author.',
+          type: ToastrDescription.STRING,
+        },
+        severity: ToastrSeverity.SUCCESS,
+      });
+    } else {
+      this.comment = {
+        id: '65',
+        upVotes: 55,
+        downVotes: 4,
+        title: 'Adventure',
+        timeAgo: new Date().toISOString(),
+        views: 54,
+        commentText: this.textModel?.message!,
+        attachments: this.textModel?.attachments || [],
+        hasAttachments: true,
+        userimageSrc: ICONS['userimageSrc'],
+        isEditted: false,
+        userName: 'Mr. Nick',
+      };
+
+      this.commentData.unshift(this.comment);
+      this.cdr.detectChanges();
+    }
+
+    this.textModel = { message: ' ', attachments: [] };
+    this.comment = undefined;
+  }
+
+  //NAVIGATIONS
+  navToCommentSearch(_val: any): void {
+    this.router.navigate([
+      ItinerariesRoutesEnum.ITINERARY,
+      ItinerariesRoutesEnum.COMMENT_SEARCH,
+    ]);
+  }
+
+  backButton(): void {
+    this._location.back();
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/pages/comments/handle-update-comment-request/handle-update-comment-request.component.html

@@ -0,0 +1,8 @@
+<div class="relative min-h-screen">
+  <div class="z-auto">
+    <div class="pb-10">
+      <app-header heading="Comments" (firstButton)="backButton()"></app-header>
+      <app-comment-comparison></app-comment-comparison>
+    </div>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/pages/comments/handle-update-comment-request/handle-update-comment-request.component.ts

@@ -0,0 +1,14 @@
+import { Location } from '@angular/common';
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-handle-update-comment-request',
+  templateUrl: './handle-update-comment-request.component.html',
+  styleUrl: './handle-update-comment-request.component.scss',
+})
+export class HandleUpdateCommentRequestComponent {
+  constructor(private _location: Location) {}
+  backButton(): void {
+    this._location.back();
+  }
+}

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

@@ -0,0 +1,37 @@
+<div class="z-auto mt-4">
+  <div class="block md:hidden">
+    <lib-search-bar
+      class="search-field"
+      (searchStringChange)="handleSearchStringChange($event)"
+      (cleared)="clear()"
+      [searchIcon]="ICONS['dashboardSearch']"
+      [placeholderText]="'NG_GRID.searchOoo' | translate"
+    >
+    </lib-search-bar>
+    <app-filter-menu (onFilterClick)="navToCommentSearch()"></app-filter-menu>
+  </div>
+  <div class="pb-10">
+    <div
+      class="grid-columns sm:mt-3 md:mt-10 grid grid-cols-1 md:grid-cols-3 sm:gap-y-5 md:gap-y-10 gap-x-10"
+    >
+      <ng-container *ngFor="let item of libMenuItems; let i = index">
+        <app-cutom-card
+          [libMenuItem]="libMenuItem"
+          [cardData]="item"
+          [isDraft]="false"
+          [itineraryStarted]="true"
+          (TitleClicked)="navigateToDetail(item)"
+          (forkClicked)="navToBranchItinerary()"
+          (messageClicked)="navToComments()"
+          (imageClicked)="navToStories()"
+          (eyeClicked)="navToNotifications()"
+          (menuClicked)="menuClicked($event)"
+        ></app-cutom-card>
+      </ng-container>
+    </div>
+  </div>
+</div>
+<lib-popup [isOpen]="modalSendToClientService.toggleModal">
+  <lib-send-to-client></lib-send-to-client>
+</lib-popup>
+<lib-toast></lib-toast>

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

@@ -0,0 +1,4 @@
+::ng-deep .search-field .container {
+  margin: 0px !important;
+  padding: 0px !important;
+}

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

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