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

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

@@ -0,0 +1,88 @@
+// import {
+//   ChangeDetectionStrategy,
+//   Component,
+//   EventEmitter,
+//   Input,
+//   Output,
+// } from '@angular/core';
+// import { Router } from '@angular/router';
+// import { LibMenuItem } from '@naniteninja/ionic-lib';
+// import { ICONS } from 'src/app/constants/constants';
+// import { Iicon } from 'src/app/interface/icon';
+// import { ModalService } from 'src/app/services/core/modal/modal.service';
+// import { SearchPopupComponent } from 'src/app/shared/components/search-popup/search-popup.component';
+// @Component({
+//   changeDetection: ChangeDetectionStrategy.OnPush,
+//   selector: 'app-header',
+//   templateUrl: './header.component.html',
+//   styleUrl: './header.component.scss',
+// })
+// export class HeaderComponent {
+//   @Input() heading!: string;
+//   @Input() headerRightIcon: string = ICONS.search;
+//   @Output() firstButton: EventEmitter<MouseEvent> =
+//     new EventEmitter<MouseEvent>();
+//   // @Output() lastButton: EventEmitter<MouseEvent> =
+//   //   new EventEmitter<MouseEvent>();
+//   @Input() cssClass!: string;
+//   @Input() isSearchVisible: boolean = true;
+//   @Input() isTextSearch: boolean = false;
+//   @Input() menuItems: LibMenuItem[] = [];
+//   ICONS: Iicon = ICONS;
+//   modalComponent = SearchPopupComponent;
+
+//   constructor(
+//     public modalService: ModalService,
+//     private router: Router,
+//   ) {}
+
+//   // handleBackBtnClicked = (): void => this.lastButton.emit();
+//   firstButtonClick = (): void => this.firstButton.emit();
+
+//   openModal() {
+//     if (this.isTextSearch) {
+//       this.modalService.toggleGlobalSearch = true;
+//     } else {
+//       this.router.navigate(['/search']);
+//     }
+//   }
+// }
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'; 
+import { ICONS } from '../../_constants/constants';
+import { Iicon } from '../../_interface/icon';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    styleUrls: ['./header.component.scss'],
+    standalone: false
+})
+export class HeaderComponent {
+  @Input() heading!: string;
+  @Input() headerRightIcon: string = ICONS['search'];
+  @Input() titleIcon: string = '';
+  @Input() cssClass!: string;
+  @Output() firstButton: EventEmitter<MouseEvent> =
+    new EventEmitter<MouseEvent>();
+  @Output() titleIconClick: EventEmitter<MouseEvent> =
+    new EventEmitter<MouseEvent>();
+  @Input() headerSuffixTemplate!: TemplateRef<unknown>;
+  ICONS: Iicon = ICONS;
+
+  firstButtonClick(): void {
+    this.firstButton.emit();
+  }
+
+  onTitleIconClick() {
+    this.titleIconClick.emit();
+  }
+}

package/src/lib/itinerary-app/shared/icon-button/icon-button.component.css

@@ -0,0 +1,21 @@
+.icon-button {
+    box-shadow: 
+  -4.1px -4.1px 13.13px -2.46px rgba(203, 199, 209, 0.25),
+   9.03px 8.2px 22.15px 2.05px rgba(17, 16, 20, 0.65);
+   padding: 15px 30px;
+   border-radius: 7px;
+   border: 2px solid transparent;
+   width: 100%;
+   span {
+    color: var(--cyrano-pink-shade-1);
+    text-shadow: 0px 0px 16.41px var(--cyrano-pink-shade-1);
+   }
+   img {
+    box-shadow: 0px 0px 16.41px var(--cyrano-pink-shade-1);
+    background: transparent;
+   }
+}
+
+.icon-button:active {
+  border: 2px solid var(--cyrano-pink-shade-1);
+}

package/src/lib/itinerary-app/shared/icon-button/icon-button.component.html

@@ -0,0 +1,7 @@
+<button class="icon-button">
+    <div class="flex items-center justify-center">
+      <span class="me-1">
+        +&nbsp;&nbsp;{{buttonText}}
+      </span>
+    </div>
+</button>

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

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

package/src/lib/itinerary-app/shared/icon-button/icon-button.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { ICONS } from '../../_constants/constants';
+import { Iicon } from '../../_interface/icon';
+
+@Component({
+    selector: 'lib-icon-button',
+    templateUrl: './icon-button.component.html',
+    styleUrl: './icon-button.component.css',
+    standalone: false
+})
+export class IconButtonComponent {
+  @Input("buttonText") buttonText!: string;
+  ICONS: Iicon = ICONS;
+  
+  constructor() {
+  }
+}

package/src/lib/itinerary-app/shared/image-viewer/image-viewer.component.css

@@ -0,0 +1,52 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.modal-container {
+  position: relative;
+  width: 100%;
+  max-width: 100vw;
+  background: #fff;
+  padding: 0;
+}
+
+.modal-image {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+
+.close-btn {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  background: rgba(0, 0, 0, 0.6);
+  color: #fff;
+  border: none;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  border-radius: 4px;
+}
+.loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 1.2rem;
+  height: 200px;
+  width: 200px;
+  color: white;
+}
+
+.hidden {
+  display: none;
+}

package/src/lib/itinerary-app/shared/image-viewer/image-viewer.component.html

@@ -0,0 +1,13 @@
+<div class="modal-overlay">
+  <div class="modal-container">
+    <div *ngIf="isLoading" class="loader">Loading...</div>
+    <img
+      [src]="data.imageUrl"
+      alt="Image"
+      class="modal-image"
+      (load)="onImageLoad()"
+      [class.hidden]="isLoading"
+    />
+    <button class="close-btn" (click)="close()">Close</button>
+  </div>
+</div>

package/src/lib/itinerary-app/shared/image-viewer/image-viewer.component.ts

@@ -0,0 +1,25 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+@Component({
+    selector: 'app-image-viewer',
+    templateUrl: './image-viewer.component.html',
+    styleUrl: './image-viewer.component.css',
+    standalone: false
+})
+export class ImageViewerComponent {
+  isLoading: boolean = true;
+
+  //LIFE CYCLE
+  constructor(
+    public dialogRef: MatDialogRef<ImageViewerComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { imageUrl: string },
+  ) {}
+
+  onImageLoad(): void {
+    this.isLoading = false;
+  }
+  close() {
+    this.dialogRef.close();
+  }
+}

package/src/lib/itinerary-app/shared/matching-clients/matching-clients.component.html

@@ -0,0 +1,25 @@
+<form [formGroup]="dynamicForm" (ngSubmit)="onSubmit()">
+<ng-container *ngIf="!loading" formArrayName="items">
+    <div class="clients-option-container" *ngFor="let singleClientMatch of matches;  let i = index">
+        <div class="clients-option-row flex justify-between gap-[35px] mb-[10px]">
+            <div class="clients-option-left-section sm:text-[10px] xs:text-[9px] flex items-center gap-[10px]">
+                <lib-dashed-checkbox [formControlName]="i" class="checkbox-sm"></lib-dashed-checkbox> {{singleClientMatch.matchPercentage}}% {{ "ITINERARY.MATCH_TEXT" | translate }}
+            </div>
+            <div class="flex">
+                <div class="flex flex-col justify-center text-right relative">
+                    <p class="sm:text-[10px] xs:text-[9px] text-white inline !px-0">{{singleClientMatch.memberName}}</p>
+                    <p class="sm:text-[10px] xs:text-[9px] absolute sm:mt-[20px] xs:mt-[19px] inline-block !px-0 right-0">for {{singleClientMatch.clientName}}</p>
+                </div>
+                <div class="flex">
+                    <div class="rounded-full overflow-hidden relative inline h-[41px] w-[41px]">
+                        <img [src]="singleClientMatch['clientPic']" alt="Avatar" loading="lazy" class="h-full w-full rounded-full object-cover"/>
+                    </div>
+                    <div class="rounded-full overflow-hidden relative inline h-[41px] w-[41px] ml-[-20px]">
+                        <img [src]="singleClientMatch['memberPic']" alt="Avatar" loading="lazy" class="h-full w-full rounded-full object-cover"/>
+                    </div>
+                </div>            
+            </div>
+        </div>
+    </div>
+</ng-container>
+</form>

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

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

package/src/lib/itinerary-app/shared/matching-clients/matching-clients.component.ts

@@ -0,0 +1,74 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { AssetsService } from '../../_services/assets.service';
+import { MatchingClients } from '../../_models/matching-clients';
+import { FormArray, FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { Subscription } from 'rxjs';
+
+
+@Component({
+    selector: 'lib-matching-clients',
+    templateUrl: './matching-clients.component.html',
+    styleUrl: './matching-clients.component.css',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class MatchingClientsComponent implements OnInit, OnDestroy {  
+  loading: boolean = true;
+  matches: Array<MatchingClients> = [];
+  dynamicForm!: FormGroup;
+  private formChangesSubscription!: Subscription;
+
+  @Output() clientSelectionChanged: EventEmitter<Array<MatchingClients>> = new EventEmitter<Array<MatchingClients>>();
+
+  constructor(
+    private assetService: AssetsService,
+    private cdr: ChangeDetectorRef,
+    private fb: FormBuilder 
+  ) {
+  }
+
+  ngOnInit() {
+    this.dynamicForm = this.fb.group({
+      items: this.fb.array([]) // Initialize FormArray
+    });
+    this.assetService.getMatchingClients().subscribe((data) => {
+      this.matches = data;
+      this.loading = false;
+      this.addCheckboxesToForm();
+      this.subscribeToFormChanges();
+      this.cdr.detectChanges();
+    });
+  }
+
+  ngOnDestroy(): void {
+    if (this.formChangesSubscription) {
+      this.formChangesSubscription.unsubscribe();
+    }
+  }
+
+  onSubmit() {
+    return false;
+  }
+
+  private addCheckboxesToForm(): void {
+    this.matches.forEach(() => {
+      this.itemsFormArray.push(new FormControl(false));
+    });
+  }
+
+  private subscribeToFormChanges(): void {
+    this.formChangesSubscription = this.dynamicForm.valueChanges.subscribe(values => {
+      const selectedClients: Array<MatchingClients> = [];
+      values?.items?.forEach( (singleValue: boolean, index: number) => {
+        if(singleValue) {
+          selectedClients.push(this.matches[index]);
+        }
+      });
+      this.clientSelectionChanged.emit(selectedClients);
+    });
+  }
+
+  get itemsFormArray(): FormArray {
+    return this.dynamicForm.get('items') as FormArray;
+  }
+}

package/src/lib/itinerary-app/shared/notification-tile/notification-tile.component.html

@@ -0,0 +1,38 @@
+<div
+  class="text-white p-4"
+  [ngClass]="{ unattendedNotification: notificationAttended === false }"
+>
+  <div class="flex items-start justify-between">
+    <div class="flex space-x-3">
+      <img [src]="ICONS['user']" alt="User" class="w-10 h-10 rounded-full" />
+
+      <div class="gap-2">
+        <p [innerHTML]="content" class="text-xs"></p>
+      </div>
+    </div>
+
+    <div class="flex items-center space-x-4">
+      <p class="hoursAgo">11 hours</p>
+      <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="Horizontal divider" />
+      </lib-menu-btn>
+    </div>
+  </div>
+  <ng-container *ngIf="isBtnVisible">
+    <button class="reviewNowButton" (click)="handleBtnClick()">
+      {{ btnText }}
+    </button>
+  </ng-container>
+  <div class="border-t border-gray-700 mt-2"></div>
+</div>
+
+<div class="mt-4 absolute bottom-0 w-80 ms-10 me-5 mb-5">
+  <button class="markAllAsRead w-full h-10">Mark All as Read</button>
+</div>

package/src/lib/itinerary-app/shared/notification-tile/notification-tile.component.scss

@@ -0,0 +1,46 @@
+.reviewNowButton {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 12px;
+  line-height: 12px;
+  /* identical to box height */
+  margin-left: 13%;
+  color: #fe3c72;
+}
+
+.hoursAgo {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 8.205px;
+  line-height: 10px;
+  /* identical to box height */
+  letter-spacing: -0.011em;
+  min-width: 35px;
+
+  color: #bdbdbd;
+}
+
+.markAllAsRead {
+  box-shadow: 5.79093px 5.26448px 14.2141px 1.31612px rgba(17, 16, 20, 0.65);
+  filter: drop-shadow(
+    -2.63224px -2.63224px 8.42317px rgba(203, 199, 209, 0.25)
+  );
+  box-sizing: border-box;
+  border: 1.1487px solid rgba(255, 255, 255, 0.5);
+  border-radius: 52.6448px;
+
+  font-style: normal;
+  font-weight: 600;
+  font-size: 11.487px;
+  line-height: 160%;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.unattendedNotification {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+.text-xs {
+  font-size: 9.85px;
+}

package/src/lib/itinerary-app/shared/notification-tile/notification-tile.component.ts

@@ -0,0 +1,35 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'; 
+import { LibMenuItem } from '@naniteninja/ionic-lib';  
+import { ICONS } from '../../_constants/constants';
+import { Iicon } from '../../_interface/icon';
+
+@Component({
+    selector: 'app-notification-tile',
+    templateUrl: './notification-tile.component.html',
+    styleUrl: './notification-tile.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class NotificationTileComponent {
+  @Input() libMenuItem!: LibMenuItem[];
+  @Input() content!: string;
+  @Input() btnText: string = 'Action';
+  @Input() isBtnVisible: boolean = false;
+  @Input() notificationAttended: boolean = true;
+  @Output() btnClick: EventEmitter<void> = new EventEmitter<void>();
+  ICONS: Iicon = ICONS;
+
+  constructor() {}
+  handleMenueItemSelect(): void {}
+  handleMenuItemChange(): void {}
+  handleMenuClick(): void {}
+  handleBtnClick(): void {
+    this.btnClick.emit();
+  }
+}

package/src/lib/itinerary-app/shared/search-popup/search-popup.component.css

@@ -0,0 +1,45 @@
+.search-hero {
+  width: 70vw;
+  height: 100%;
+  border-radius: 40px;
+  border-width: 1px;
+  background-blend-mode: overlay;
+  border: 1px solid transparent;
+  backdrop-filter: blur(40px);
+  overflow: hidden;
+}
+
+.no-result {
+  padding-bottom: 30px;
+}
+
+::ng-deep .search-field .container {
+  height: 26px;
+}
+
+.divider {
+  border: 3.26px solid;
+  border-width: 3.26px;
+  border: 3.26px solid;
+
+  border-image-source: radial-gradient(
+    90% 43% at 50% 50%,
+    #f7f5df 1%,
+    rgba(247, 245, 221, 0) 100%
+  );
+
+  border-image-slice: 1;
+}
+
+.custom-text {
+  font-family: "Gilroy", sans-serif;
+  font-weight: 500;
+  font-size: 8px;
+  color: rgba(168, 168, 168, 1);
+}
+
+.highlight-text {
+  background: rgba(254, 60, 114, 1) !important;
+  padding: 2px 1px !important;
+  border-radius: 10px !important;
+}

package/src/lib/itinerary-app/shared/search-popup/search-popup.component.html

@@ -0,0 +1,30 @@
+<div class="search-hero">
+  <div class="flex items-center justify-between mt-4 ml-5 mr-5">
+    <div></div>
+    <span class="font-[Calistoga] font-normal text-[17px] leading-[100%] tracking-[0.07px]">Search</span>
+    <img [src]="ICONS['horizontalWhite']" />
+  </div>
+
+  <div class="m-5">
+    <lib-search-bar (searchStringChange)="handleSearchStringChange($event)" (cleared)="clear()"
+      [searchIcon]="ICONS['dashboardSearch']" [placeholderText]="'NG_GRID.searchOoo' | translate">
+    </lib-search-bar>
+
+    <ng-container *ngIf="loading">
+      <div style="height: 65vh; overflow: auto" class="flex items-center justify-center">
+        <p>Loading...</p>
+      </div>
+    </ng-container>
+
+    <ng-container *ngIf="!loading">
+      <div style="height: 65vh; overflow: auto">
+        <div class="no-result">
+          <p class="mt-2 text-center custom-text">
+            Search the entire application
+          </p>
+          <span class="custom-text">no results.</span>
+        </div>
+      </div>
+    </ng-container>
+  </div>
+</div>

package/src/lib/itinerary-app/shared/search-popup/search-popup.component.ts

@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import { Router } from '@angular/router';   
+import { ICONS } from '../../_constants/constants';
+import { Iicon } from '../../_interface/icon';
+import { AssetsService } from '../../_services/assets.service';
+import { ModalService } from '../../_services/modal.service';
+
+@Component({
+    selector: 'app-search-popup',
+    templateUrl: './search-popup.component.html',
+    styleUrls: ['./search-popup.component.css'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: false
+})
+export class SearchPopupComponent {
+  ICONS: Iicon = ICONS;
+  searchTerm: string = '';
+  i18nTranslation!: Record<string, string>;
+  loading: boolean = false;
+
+  constructor( 
+    private router: Router,
+    private modalService: ModalService,
+    private assetService: AssetsService,
+    private cdr: ChangeDetectorRef
+  ) { }
+
+  ngOnInit(): void {
+    this.loading = true;
+    this.assetService.getTranslation('en').subscribe((res) => {
+      this.i18nTranslation = res;
+      this.cdr.detectChanges();
+    });
+    this.loading = false;
+  }
+
+
+  handleSearchStringChange(_$event: string) {
+  throw new Error('Method not implemented.');
+}
+  clear(): void {
+    this.searchTerm = '';
+  }
+
+  //NAVIGATIONS
+  navigate(url: string) {
+    this.modalService.toggleGlobalSearch = false;
+    this.cdr.detectChanges();
+    setTimeout(() => {
+      this.router.navigate([url]);
+    }, 0);
+  }
+}

package/src/lib/itinerary-app/shared/selectable-badge/selectable-badge.component.html

@@ -0,0 +1,14 @@
+<div
+  class="px-4 py-1 text-[11.49px] rounded-full flex items-center gap-2 text-sm cursor-pointer transition-all bg-[#413F47]"
+  (click)="!selected && toggleSelection()"
+>
+  <span class="badge-label font-[Gilroy]">{{ label }}</span>
+
+  <button
+    *ngIf="selected"
+    class="ml-2 text-xs rounded-full hover:bg-white/20"
+    (click)="toggleSelection(); $event.stopPropagation();"
+  >
+    ✕
+  </button>
+</div>

package/src/lib/itinerary-app/shared/selectable-badge/selectable-badge.component.scss

@@ -0,0 +1,4 @@
+.badge-label {
+    color:#BBBABC;
+    font-size: var(--font-size-medium);
+}

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

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