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

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

@@ -0,0 +1,24 @@
+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',
+})
+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,73 @@
+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,
+})
+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,34 @@
+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,
+})
+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,52 @@
+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
+})
+export class SearchPopupComponent {
+  ICONS: Iicon = ICONS;
+  searchTerm: string = '';
+  i18nTranslation!: any;
+  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: any) {
+  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();
+  });
+});

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

@@ -0,0 +1,17 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'lib-selectable-badge',
+  templateUrl: './selectable-badge.component.html',
+  styleUrl: './selectable-badge.component.scss'
+})
+export class SelectableBadgeComponent {
+    @Input() label: string = '';
+    @Input() selected: boolean = true;
+    @Output() selectionChanged: EventEmitter<boolean> = new EventEmitter<boolean>();
+
+    toggleSelection() {
+      this.selected = !this.selected;
+      this.selectionChanged.emit(this.selected);
+    }
+}

package/src/lib/itinerary-app/shared/shared.module.ts

@@ -0,0 +1,140 @@
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { HttpClientModule } from '@angular/common/http';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { TranslateModule } from '@ngx-translate/core';
+import {
+  BaseCardModule,
+  ButtonsModule,
+  CircleProgressModule,
+  ContentViewCardModule,
+  DashedCheckboxModule,
+  FormFieldModule,
+  FormGeneratorModule,
+  GridModule,
+  ImageCardModule,
+  ImageDeckComponent,
+  InfoCardListModule,
+  InfoCardModule,
+  InfoCardPlaceholderModule,
+  InputDateFieldModule,
+  LibMapModule,
+  LibModalModule,
+  LibTabMenuModule,
+  LibToastrModule,
+  NotificationsModule,
+  OtpInputModule,
+  PopperModule,
+  SearchBarModule,
+  SelectableModule,
+} from '@naniteninja/ionic-lib';  
+import { CardComponent } from './card-component/card-component.component';
+import { CommentImagesComponent } from './comment/comment-images/comment-images.component';
+import { CommentComponent } from './comment/comment.component';
+import { CustomHeadingWithButtonComponent } from './custom-heading-with-button/custom-heading-with-button.component';
+import { CustomStoryCardComponent } from './custom-story-card/custom-story-card.component';
+import { CutomCardComponent } from './cutom-card/cutom-card.component';
+import { BottomNavigationItemsComponent } from './footer/components/bottom-navigation-items/bottom-navigation-items.component';
+import { FooterComponent } from './footer/footer.component';
+import { HeaderComponent } from './header/header.component';
+import { ImageViewerComponent } from './image-viewer/image-viewer.component';
+import { NotificationTileComponent } from './notification-tile/notification-tile.component';
+import { SearchPopupComponent } from './search-popup/search-popup.component';
+import { SwiperDialogComponent } from './swiper-dialog/swiper-dialog.component';
+import { TabBarComponent } from './tab-bar/tab-bar.component';
+import { UserStackTileComponent } from './user-stack-tile/user-stack-tile.component';
+import { UserTileComponent } from './user-tile/user-tile.component';
+import { UsersStackComponent } from './users-stack/users-stack.component';
+import { VotesPipe } from '../_pipes/votes.pipe';
+import { MatchingClientsComponent } from './matching-clients/matching-clients.component';
+import { IconButtonComponent } from './icon-button/icon-button.component';
+import { ActionCardComponent } from './action-card/action-card.component';
+import { SelectableBadgeComponent } from './selectable-badge/selectable-badge.component';
+
+@NgModule({
+  declarations: [
+    CardComponent,
+    CustomHeadingWithButtonComponent,
+    CutomCardComponent,
+    CustomStoryCardComponent,
+    CommentComponent,
+    NotificationTileComponent,
+    UsersStackComponent,
+    UserStackTileComponent,
+    UserTileComponent,
+    SearchPopupComponent,
+    CommentImagesComponent,
+    FooterComponent,
+    HeaderComponent,
+    TabBarComponent,
+    ImageViewerComponent,
+    SwiperDialogComponent,
+    BottomNavigationItemsComponent,
+    VotesPipe,
+    MatchingClientsComponent,
+    IconButtonComponent,
+    ActionCardComponent,
+    SelectableBadgeComponent
+  ],
+  exports: [
+    CardComponent,
+    CustomHeadingWithButtonComponent,
+    CutomCardComponent,
+    CustomStoryCardComponent,
+    CommentComponent,
+    NotificationTileComponent,
+    UsersStackComponent,
+    UserStackTileComponent,
+    UserTileComponent,
+    SearchPopupComponent,
+    ImageViewerComponent,
+    TabBarComponent,
+    HeaderComponent,
+    FooterComponent,
+    BottomNavigationItemsComponent,
+    MatchingClientsComponent,
+    IconButtonComponent,
+    ActionCardComponent,
+    SelectableBadgeComponent
+  ],
+  imports: [
+    BaseCardModule,
+    TranslateModule,
+    CommonModule,
+    SearchBarModule,
+    ButtonsModule,
+    CircleProgressModule,
+    OtpInputModule,
+    DashedCheckboxModule,
+    FormFieldModule,
+    FormsModule,
+    FormGeneratorModule,
+    GridModule,
+    ImageCardModule,
+    InfoCardModule,
+    InfoCardListModule,
+    InfoCardPlaceholderModule,
+    InputDateFieldModule,
+    LibMapModule,
+    PopperModule,
+    SearchBarModule,
+    HttpClientModule,
+    NgOptimizedImage,
+    LibTabMenuModule,
+    LibModalModule,
+    IonicModule,
+    ContentViewCardModule,
+    NotificationsModule,
+    LibToastrModule,
+    SelectableModule,
+    ImageDeckComponent,
+    CircleProgressModule,
+    ImageDeckComponent,    
+    RouterLink,
+    ReactiveFormsModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class SharedModule { }

package/src/lib/itinerary-app/shared/swiper-dialog/swiper-dialog.component.css

@@ -0,0 +1,67 @@
+.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;
+  top: 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;
+}
+
+.alt-images-section{
+  position: absolute;
+  bottom: 50px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  overflow-x: auto;
+  padding: 10px;
+}
+.alt-images-section img {
+  width: 100px;
+  height: 100px;
+  cursor: pointer;
+}