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

package/src/lib/itinerary-app/modules/itineraries/components/no-visual-map-filters/no-visual-map-filters.component.ts

@@ -0,0 +1,88 @@
+import { Component, EventEmitter, Output } from "@angular/core";
+import { Iicon } from "../../../../_interface/icon";
+import { ICONS } from "../../../../_constants/constants";
+import { IConditions } from "../../../../_interface/conditions";
+import { IPresetRecord } from "../../../../_interface/presetRecord";
+
+@Component({
+    selector: 'lib-no-visual-map-filters',
+    templateUrl: './no-visual-map-filters.component.html',
+    styleUrl: './no-visual-map-filters.component.css',
+    standalone: false
+})
+export class NoVisualMapFiltersComponent {
+  ICONS: Iicon = ICONS;
+  selectedPresets: string[] = [];
+  conditionsArray: IConditions[] = [];
+
+  @Output() presetsChanged: EventEmitter<IPresetRecord[]> = new EventEmitter<IPresetRecord[]>();
+
+  @Output() backButtonClicked: EventEmitter<void> = new EventEmitter<void>();
+
+  // Example preset filters
+  presetFilters: Array<IPresetRecord> = [
+    { name: 'Restaurants', field: 'type', condition: 'restaurant' },
+    { name: 'Good Rating', field: 'rating', condition: '>=4' },
+    { name: 'Open Now', field: 'open_now', condition: true },
+  ];
+
+  
+
+  // Dynamic fields and their possible conditions
+  filterFields: string[] = ['type', 'rating', 'open_now'];
+
+  filterConditions: { [key: string]: string[] } = {
+    type: ['restaurant', 'cafe', 'lodging', 'store'],
+    rating: ['>=3', '>=4', '>=4.5'],
+    open_now: ['true', 'false'],
+  };
+
+  selectedField: string = '';
+  selectedCondition: string = '';
+  selectedPreset: string | null = null;
+
+  firstButtonClick() {
+    this.backButtonClicked.emit();
+  }
+
+  applyPreset(preset: IPresetRecord) {
+    if(this.selectedPresets.includes(preset.name)) {
+      this.selectedPresets = this.selectedPresets.filter(name => name !== preset.name);
+      this.conditionsArray = this.conditionsArray.filter(condition => condition.name !== preset.name);
+    } else {
+      this.selectedPresets.push(preset.name);
+      this.conditionsArray.push({
+        name: preset.name,
+        field: preset.field,
+        condition: preset.condition
+      });
+    }     
+  }
+
+  onFieldChange() {
+    this.selectedCondition = ''; // Reset condition when field changes
+  }
+
+  removeCondition(i: number) {
+    this.conditionsArray.splice(i, 1);
+  }
+
+  applyCustomFilter() {
+    this.conditionsArray.push({
+      name: '',
+      field: this.selectedField,
+      condition: this.selectedCondition
+    });
+    this.selectedField = '';
+    this.selectedCondition = '';
+  }
+
+  applyFilter() {
+    this.presetsChanged.emit(this.conditionsArray);
+    this.backButtonClicked.emit();
+  }
+
+  applyGooglePlacesFilter(field: string, condition: string) {
+    console.log(field, condition);
+  }
+}

package/src/lib/itinerary-app/modules/itineraries/components/report-itinerary-modal/report-itinerary-modal.component.html

@@ -0,0 +1,14 @@
+<div class="report-itineraies max-padd-container">
+  <h1 class="p-4 pt-1">{{ popupTitle | translate }}</h1>
+  <div>
+    <lib-form-field [formFieldControl]="radio" [submitted]="false" [required]="true" [maxLength]="10"
+      [type]="FormFieldType.radio" [options]="options" [radioDeselectable]="false" class="mb-2"></lib-form-field>
+  </div>
+
+  <lib-text-box class="text-feild normal-text-sm" *ngIf = "selectedItem == 9" [class.show]="selectedItem == 9" [class.hide]="selectedItem != 9"
+    label="Please brief your issue"></lib-text-box>
+  <div class="flex justify-center gap-[46px] mt-3">
+    <button class="custom-flat-button font-[Calistoga]" (click)="closeModal()">{{ "COMMON.CANCEL" | translate}}</button>
+    <button class="custom-flat-button-highlighted-font font-[Calistoga]"  (click)="onOk()">{{ "REPORT" | translate }}</button>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/components/report-itinerary-modal/report-itinerary-modal.component.scss

@@ -0,0 +1,55 @@
+:host ::ng-deep .mat-mdc-radio-button .mdc-form-field  {
+  --mat-checkbox-label-text-size: 10px !important;
+}
+
+:host ::ng-deep .form-field__radio-states {
+  --radio-button-size: 13.13px;
+}
+
+:host ::ng-deep .mat-mdc-radio-group {
+  gap: 6px;
+}
+.report-itineraies {
+  width: 235.5px;
+  border-radius: 9.85px;
+  border-radius: 10px;
+  overflow: hidden;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  --color: red;
+}
+
+.report-itineraies h1 {
+  font-family: "Calistoga";
+}
+
+input {
+  box-shadow: none;
+}
+
+.text-feild {
+  position: relative;
+  width: 100%;
+  border-radius: 8.2px;
+  transition: opacity 0.5s ease, max-height 0.5s ease;
+}
+
+.text-feild.show {
+  opacity: 1;
+  min-height: 56px;
+  max-height: 200px;
+}
+
+.text-feild.hide {
+  opacity: 0;
+  max-height: 0;
+}
+
+lib-text-box {
+  --input-padding: 9px 8px;
+  --border-radius: 8.2px;
+  --label-font-size: 9.85px;
+}

package/src/lib/itinerary-app/modules/itineraries/components/report-itinerary-modal/report-itinerary-modal.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/components/report-itinerary-modal/report-itinerary-modal.component.ts

@@ -0,0 +1,79 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { FormFieldType } from '@naniteninja/ionic-lib';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators'; 
+import { ModalService } from '../../../../_services/modal.service';
+import { IReportOptions } from '../../../../_interface/reportOptions';
+import { ApiService } from '../../../../_services/api.service';
+import { ConstantsService } from '../../../../_services/constants.service';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-report-itinerary-modal',
+    templateUrl: './report-itinerary-modal.component.html',
+    styleUrls: ['./report-itinerary-modal.component.scss'],
+    standalone: false
+})
+export class ReportItineraryModalComponent implements OnInit, OnDestroy {
+  @Input() popupTitle!: string;
+  selectedItem: number | undefined;
+  radio: FormControl = new FormControl(0);
+  options: IReportOptions[] = [];
+  private destroy$: Subject<void> = new Subject<void>();
+
+  constructor(
+    public constantService: ConstantsService,
+    public modalService: ModalService,
+    public apiService: ApiService,
+    private cdr: ChangeDetectorRef,
+  ) {}
+
+  radioChecked(): void {
+    if (this.radio.value === this.constantService.SPECIAL_VALUE) {
+      this.selectedItem = this.constantService.SPECIAL_VALUE;
+    } else {
+      this.selectedItem = 0;
+    }
+  }
+
+  ngOnInit(): void {
+    this.apiService
+      .get<IReportOptions[]>('/assets/reportsOptionsData.json')
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data: IReportOptions[]) => {
+        this.options = data;
+        this.cdr.detectChanges();
+      });
+
+    this.radio.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((e: number | null) => {
+        this.selectedItem =
+          e === this.constantService.SPECIAL_VALUE
+            ? this.constantService.SPECIAL_VALUE
+            : 0;
+      });
+    
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  closeModal(): void {
+    this.modalService.toggleModal = !this.modalService.toggleModal;
+  }
+
+  onOk(): void {}
+
+  protected readonly FormFieldType = FormFieldType;
+}

package/src/lib/itinerary-app/modules/itineraries/components/report-media-modal/report-media-modal.component.html

@@ -0,0 +1,15 @@
+<div class="report-media max-padd-container">
+  <h1 class="p-1">{{ popupTitle | translate }}</h1>
+  <div>
+    <lib-form-field [formFieldControl]="radio" [submitted]="false" [required]="true" [maxLength]="10"
+      [type]="FormFieldType.radio" [options]="options" [radioDeselectable]="false" class="mb-2 report-items"
+      ></lib-form-field>
+  </div>
+
+  <lib-text-box class="text-feild" [class.show]="selectedItem == 9" [class.hide]="selectedItem != 9"
+    label="Please brief your issue"></lib-text-box>
+  <div class="flex justify-center gap-10 mt-3">
+    <button class="custom-flat-button font-[Calistoga]" (click)="closeModal()">{{ "COMMON.CANCEL" | translate}}</button>
+    <button class="custom-flat-button-highlighted-font font-[Calistoga]"  (click)="onOk()">{{ "REPORT" | translate }}</button>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/components/report-media-modal/report-media-modal.component.scss

@@ -0,0 +1,72 @@
+.report-items * {
+  /* radio button styles */
+  --radio-button-size: 10px;
+  --size: .24px;      /* diameter of the radio */
+  --dot-size: .12px;  /* size of the inner dot */
+  --color: #d32f57;  /* border + dot color */
+
+  /* label text size */
+  font-size: .1rem;   /* adjust as needed */
+}
+:host ::ng-deep .mat-mdc-radio-button .mdc-form-field  {
+  --mat-checkbox-label-text-size: 10px !important;
+}
+
+:host ::ng-deep .form-field__radio-states {
+  --radio-button-size: 13.13px;
+}
+
+:host ::ng-deep .mat-mdc-radio-group {
+  gap: 6px;
+}
+:host ::ng-deep .input-label.with-value {
+  --label-float-position-top:0;
+}
+:host ::ng-deep .input-group-wrapper {
+  --border-radius: 8.2px;
+  padding: 8px 12px;
+  font-size: 9.85px;
+}
+:host ::ng-deep .input-group-wrapper label {
+  --label-font-size-floated: 9.85px;
+}
+.report-media {
+  width: 235.5px;
+  border-radius: 9.85px;
+  border-radius: 10px;
+  overflow: hidden;
+  // padding: 20px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.report-media h1 {
+  font-family: "Calistoga";
+}
+
+.report-items label{
+  font-size: 9.85px;
+}
+
+input {
+  box-shadow: none;
+}
+
+.text-feild {
+  position: relative;
+  width: 100%;
+  padding: 5px 0px;
+  transition: opacity 0.5s ease, max-height 0.5s ease;
+}
+
+.text-feild.show {
+  opacity: 1;
+  max-height: 200px;
+}
+
+.text-feild.hide {
+  opacity: 0;
+  max-height: 0;
+}

package/src/lib/itinerary-app/modules/itineraries/components/report-media-modal/report-media-modal.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/components/report-media-modal/report-media-modal.component.ts

@@ -0,0 +1,79 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import { FormControl } from '@angular/forms'; 
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { ModalService } from '../../../../_services/modal.service';
+import { IReportOptions } from '../../../../_interface/reportOptions';
+import { ApiService } from '../../../../_services/api.service';
+import { ConstantsService } from '../../../../_services/constants.service';
+import { FormFieldType } from '@naniteninja/ionic-lib';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-report-media-modal',
+    templateUrl: './report-media-modal.component.html',
+    styleUrls: ['./report-media-modal.component.scss'],
+    standalone: false
+})
+export class ReportMediaModalComponent implements OnInit, OnDestroy {
+  @Input() popupTitle!: string;
+  selectedItem: number | undefined;
+  radio: FormControl = new FormControl(0);
+  options: IReportOptions[] = [];
+  private destroy$: Subject<void> = new Subject<void>();
+
+  constructor(
+    public constantService: ConstantsService,
+    public modalService: ModalService,
+    public apiService: ApiService,
+    private cdr: ChangeDetectorRef,
+  ) { }
+
+  radioChecked(): void {
+    if (this.radio.value === this.constantService.SPECIAL_VALUE) {
+      this.selectedItem = this.constantService.SPECIAL_VALUE;
+    } else {
+      this.selectedItem = 0;
+    }
+  }
+
+  ngOnInit(): void {
+    this.apiService
+      .get<IReportOptions[]>('/assets/reportMediaOptions.json')
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((data: IReportOptions[]) => {
+        this.options = data;
+        this.cdr.detectChanges();
+      });
+
+    this.radio.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((e: number | null) => {
+        this.selectedItem =
+          e === this.constantService.SPECIAL_VALUE
+            ? this.constantService.SPECIAL_VALUE
+            : 0;
+      });
+
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  closeModal(): void {
+    this.modalService.toggleModal = !this.modalService.toggleModal;
+  }
+
+  onOk(): void { }
+
+  protected readonly FormFieldType = FormFieldType;
+}

package/src/lib/itinerary-app/modules/itineraries/components/send-to-client/send-to-client.component.css

@@ -0,0 +1,28 @@
+.check-box-field {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 10px;
+  margin-top: 30px;
+}
+
+.check-box-field {
+  span {
+    margin-left: 8px;
+  }
+}
+
+.check-box {
+  height: 20px !important;
+  width: 20px !important;
+}
+
+.modal-bottom-bar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.suggest-client-title {
+  font-family: Calistoga;
+}

package/src/lib/itinerary-app/modules/itineraries/components/send-to-client/send-to-client.component.html

@@ -0,0 +1,10 @@
+<div class="delete-modal">
+  <h3 class="text-center mb-[25px] font-[Calistoga]">{{ "SNACKBAR.SUGGEST_TO_CLIENT" | translate }}</h3>
+  
+  <lib-matching-clients (clientSelectionChanged)="onClientSelectionChanged($event)"></lib-matching-clients>
+
+  <div class="flex justify-center gap-10 mt-5">
+    <button class="custom-flat-button font-[Calistoga]" (click)="closeSendClientModal()">{{ "COMMON.CANCEL" | translate}}</button>
+    <button class="custom-flat-button-highlighted-font font-[Calistoga]"  (click)="submitSendClient()">{{ "COMMON.SEND" | translate }}</button>
+  </div>
+</div>

package/src/lib/itinerary-app/modules/itineraries/components/send-to-client/send-to-client.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/components/send-to-client/send-to-client.component.ts

@@ -0,0 +1,44 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ModalService } from '../../../../_services/modal.service';
+import { MatchingClients } from '../../../../_models/matching-clients';
+import { ModalSendClientService } from '../../../../_services/modal.sendclient.service';
+import { Itinerary } from '../../../../_models/Itinerary';
+import { ItineraryService } from '../../../../_services/itinerary.service';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'lib-send-to-client',
+    templateUrl: './send-to-client.component.html',
+    styleUrl: './send-to-client.component.css',
+    standalone: false
+})
+export class SendToClientComponent {
+    clientsSelection: Array<MatchingClients> = [];
+
+    @Input() itinerary!: Itinerary;
+
+    constructor(
+      public modalService: ModalService,
+      public sendClientModalService: ModalSendClientService,
+      public itineraryApiService: ItineraryService
+    ) {}
+  
+    closeModal(): void {
+      this.modalService.toggleModal = !this.modalService.toggleModal;
+    }
+
+    closeSendClientModal(): void {
+      this.sendClientModalService.toggleModal = !this.sendClientModalService.toggleModal;
+    }
+
+    onClientSelectionChanged(clientsSelection: Array<MatchingClients>) {
+      this.clientsSelection = clientsSelection;
+    }
+
+    submitSendClient(): void {
+      this.itineraryApiService.sendItenaryToClients(this.itinerary, this.clientsSelection);
+      this.closeSendClientModal();
+    }
+  
+    onOk(): void {}
+}

package/src/lib/itinerary-app/modules/itineraries/components/share-popup/share-popup.component.html

@@ -0,0 +1,65 @@
+<div class="share-itinerary min-w-[300px] ">
+  <h2 class="title">Share Itinerary</h2>
+
+  <!-- Add People -->
+  <lib-search-bar class="search-field" [placeholderText]="'SEARCH_PEOPLE_GROUP' | translate"
+       [searchIcon]="ICONS['dashboardSearch']">
+  </lib-search-bar>
+
+  <!-- People with Access -->
+  <div class="section font-[Gilroy] font-bold text-[13.px] mt-4 mb-8">
+    <h3 class="mb-1 access-title">People with Access</h3>
+    <div class="person flex gap-2">
+      <img [src]="peopleWithAccess[0].avatar" alt="avatar" class="avatar object-cover" />
+      <div class="info">
+        <div class="person-name">{{ peopleWithAccess[0].name }}</div>
+        <div class="person-email">{{ peopleWithAccess[0].email }}</div>
+      </div>
+      <div class="role-text text-[#8B8B8B]">{{ peopleWithAccess[0].role }}</div>
+    </div>
+  </div>
+
+  <!-- General Access -->
+  <div class="section">
+    <h3 class="general-access-title  font-[Gilroy] mb-1">General Access</h3>
+    <div class="access-row">
+      <div class="icon mt-[7px]">
+        <img src="assets/icons/restricted_icon.png" class="h-[30px] w-[30px] object-cover p-[6px] rounded-full border-[0.68px] border-white"/>
+      </div>
+      <div [formGroup]="accessForm">
+        <div class="relative inline-block text-white">
+          <select formControlName="access" class="access-select appearance-none bg-transparent focus:outline-none">
+            <option value="Restricted">Restricted</option>
+            <option value="Public">Public</option>
+          </select>
+
+          <!-- Custom arrow icon -->
+          <div class="pointer-events-none absolute inset-y-0 right-1 flex items-center pl-6">
+            <svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3.35156 3.61768L6.40146 0.567782H0.301668L3.35156 3.61768Z" fill="white"/>
+            </svg>
+          </div>
+</div>
+
+        <div class="permission-description">
+          <ng-container *ngIf="accessType === 'Restricted'">
+            {{ "ITINERARY.RESTRICTED_ACCESS_MESSAGE" | translate }}
+          </ng-container>
+          <ng-container  *ngIf="accessType === 'Public'">
+            {{ "ITINERARY.PUBLIC_ACCESS_MESSAGE" | translate }}
+          </ng-container>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="flex justify-center gap-10 mt-5">
+    <button class="custom-flat-button font-[Calistoga]" (click)="copyLink()">
+      {{ "COMMON.COPY_LINK" | translate }}
+    </button>
+    <button class="custom-flat-button-highlighted-font font-[Calistoga]" (click)="close()">
+      {{ "COMMON.DONE" | translate }}
+    </button>
+  </div>
+</div>