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

package/src/lib/itinerary-app/_services/modal.sendclient.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ModalSendClientService {
+  public toggleModal: boolean = false;
+  public bottomToggleModal: boolean = false;
+  public toggleGlobalSearch: boolean = false;
+
+  constructor() { }
+}

package/src/lib/itinerary-app/_services/modal.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ModalService {
+  public toggleModal: boolean = false;
+  public bottomToggleModal: boolean = false;
+  public toggleGlobalSearch: boolean = false;
+
+  constructor() { }
+}

package/src/lib/itinerary-app/_services/modal.shareitinerary.service.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ModalShareItineraryService {
+  public toggleModal: boolean = false;
+  public bottomToggleModal: boolean = false;
+  public toggleGlobalSearch: boolean = false;
+
+  constructor() { }
+}

package/src/lib/itinerary-app/_services/modal.shareurlservice.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ModalShareUrlClientService {
+  public toggleModal: boolean = false;
+  public bottomToggleModal: boolean = false;
+  public toggleGlobalSearch: boolean = false;
+
+  constructor() { }
+}

package/src/lib/itinerary-app/_services/shadow-root-handler.service.ts

@@ -0,0 +1,38 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ShadowRootHandlerService {
+  accessShadowRoot(
+    targetNode: HTMLElement,
+    componentName: string,
+    callback: () => void,
+  ): void {
+    // Query the custom element
+    const element = targetNode.querySelector(componentName) as HTMLElement;
+
+    if (element) {
+      // Create a MutationObserver to monitor changes
+      const observer = new MutationObserver((mutationsList) => {
+        for (const mutation of mutationsList) {
+          if (mutation.type === 'childList' || mutation.type === 'attributes') {
+            callback();
+          }
+        }
+      });
+
+      // Observe the element for changes
+      observer.observe(element, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+      });
+
+      // Apply callback when the component is initialized
+      callback();
+      // observer.disconnect();
+    } else {
+    }
+  }
+}

package/src/lib/itinerary-app/_services/share-popup-data.ts

@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { Itinerary } from '../_models/Itinerary';
+
+@Injectable({ providedIn: 'root' })
+export class SharePopupDataService {
+    private popupDataSubject = new BehaviorSubject<Itinerary | null>(null);
+    popupData$: Observable<Itinerary | null>  = this.popupDataSubject.asObservable();
+
+    setPopupData(data: Itinerary) {
+        this.popupDataSubject.next(data);
+    }
+
+    clearPopupData() {
+        this.popupDataSubject.next(null);
+    }
+}

package/src/lib/itinerary-app/_styles/component-global-styles/custom-button.scss

@@ -0,0 +1,32 @@
+.custom-flat-button {
+    display: flex;
+	color: var(--secondary-color);
+	background-color: transparent;
+	border: 2px solid transparent;
+	border-radius: 2px;
+	font-family: Roboto, sans-serif;
+	font-size: 14px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: normal;
+	outline: none;
+	cursor: pointer;
+	align-items: center;
+	transition: width 0.15s ease-out, height 0.15s ease-out, background-color 0.15s ease-out, color 0.15s ease-out, opacity 0.15s ease-out;
+    padding: 8px 16px;
+    border-radius: var(--lib-button-border-radius, 30.582px);
+
+	&:active {
+        border: 2px solid var(--cyrano-pink-shade-1);
+    }
+		
+	&[disabled]:not([disabled=false]), &[soft-disabled]:not([soft-disabled=false]) {
+        pointer-events: none !important;
+		opacity: 0.5;
+    }	
+}
+
+.custom-flat-button-highlighted-font {
+    @extend .custom-flat-button; 
+    color: var(--cyrano-pink-shade-1);
+}

package/src/lib/itinerary-app/_styles/media-queries.scss

@@ -84,6 +84,12 @@
   }
 }
 
+@media screen and (max-width: 500px) {
+  .custom-popup-container {
+      --width: 85% !important;
+  }
+}
+
 @media screen and (max-width: 1492px) {
   .sub-nav {
     gap: 100px;

package/src/lib/itinerary-app/_styles/styles.scss

@@ -41,8 +41,8 @@ $ns-add-in-theme: mat.define-dark-theme(
 @include mat.all-component-themes($ns-add-in-theme);
 
 @import "../assets/styles/typography.scss";
-@import "../../node_modules/nextsapien-component-lib/src/lib/shared-styles/styles.scss";
-
+@import "../../node_modules/@naniteninja/ionic-lib/src/lib/shared-styles/styles.scss";
+@import '~@naniteninja/ionic-lib/src/lib/shared-styles/styles.scss';
 @import "./colors";
 
 html {

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

@@ -0,0 +1,42 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router'; 
+import { ArchivesModule } from './modules/archives/archives.module';
+import { DashboardModule } from './modules/dashboard/dashboard.module';
+import { ItinerariesModule } from './modules/itineraries/itineraries.module';
+import { PathwayModule } from './modules/pathway/pathway.module';
+import { SearchModule } from './modules/search/search.module';
+import { UserModule } from './modules/user/user.module';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'itineraries', pathMatch: 'full' },
+  {
+    path: 'itineraries',
+    loadChildren: () => ItinerariesModule
+  },
+  {
+    path: 'search',
+    loadChildren: () => SearchModule
+  },
+  {
+    path: 'archives',
+    loadChildren: () => ArchivesModule
+  },
+  {
+    path: 'dashboard',
+    loadChildren: () => DashboardModule,
+  },
+  {
+    path: 'pathway',
+    loadChildren: () => PathwayModule
+  },
+  {
+    path: 'user',
+    loadChildren: () => UserModule
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ItineraryLibRoutingModule {}

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

@@ -0,0 +1,69 @@
+import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';
+import { AfterViewInit, Component, ElementRef, HostListener, inject, OnDestroy, OnInit, Renderer2, ViewChild, ViewContainerRef } from '@angular/core';
+import { Location } from '@angular/common'; 
+import { PopupModalService } from '@naniteninja/ionic-lib';
+import { Subscription } from 'rxjs'; 
+import { BottomNavigationService } from './_services/bottom-navigation.service';
+
+@Component({
+  selector: 'lib-itinerary-lib',
+  template: `
+    <router-outlet></router-outlet> <ng-container #dynamicModal></ng-container>
+  `,
+  styles: ``
+})
+export class ItineraryLibComponent implements OnInit, AfterViewInit, OnDestroy {
+ isSmallScreen = false;
+  private breakpointSubscription!: Subscription;
+  @ViewChild('dynamicModal', { read: ViewContainerRef })
+  dynamicModal!: ViewContainerRef;
+  private popupModalService = inject(PopupModalService);
+
+  constructor(
+    private breakpointObserver: BreakpointObserver,
+    private renderer: Renderer2,
+    public el: ElementRef,
+    public location: Location,
+    public navService: BottomNavigationService,
+  ) { }
+
+  ngOnInit(): void {
+    this.handleScreenSizeChange();
+  }
+
+  ngAfterViewInit(): void {
+    this.popupModalService.setRootViewContainerRef(this.dynamicModal);
+  }
+
+  //use to change application ui and behaviour based on screen size
+  handleScreenSizeChange(): void {
+    this.checkWindowWidth();
+    this.breakpointSubscription = this.breakpointObserver
+      .observe([Breakpoints.Small, Breakpoints.XSmall])
+      .subscribe((state: BreakpointState) => {
+        this.isSmallScreen = state.matches;
+        if (this.isSmallScreen) {
+          this.renderer.removeClass(document.body, 'customBody');
+        } else {
+          this.renderer.addClass(document.body, 'customBody');
+        }
+      });
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(_event: Event): void {
+    this.checkWindowWidth();
+  }
+
+  checkWindowWidth(): void {
+    const width = window.innerWidth;
+    if (width <= 960) {
+      if (this.location.path().includes('dashboard')) {
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.breakpointSubscription.unsubscribe();
+  }
+}

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

@@ -0,0 +1,55 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { MatDialogModule } from '@angular/material/dialog';
+import {
+  ButtonsModule,
+  LibModalModule,
+  RangeSelectorModule,
+  ToggleModule,
+} from '@naniteninja/ionic-lib';
+import { ItineraryLibRoutingModule } from './itinerary-lib-routing.module';
+import { ItineraryLibComponent } from './itinerary-lib.component';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { HttpBackend, HttpClient } from '@angular/common/http';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+import { UserModule } from './modules/user/user.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { BrowserModule } from '@angular/platform-browser';
+import { NextsapienComponentLibModule } from '@naniteninja/ionic-lib';
+import { IonicModule } from '@ionic/angular';
+import { provideIonicAngular } from '@ionic/angular/standalone';
+
+export const httpLoaderFactory = (http: HttpBackend): TranslateHttpLoader =>
+  new TranslateHttpLoader(new HttpClient(http), './assets/i18n/', '.json');
+
+@NgModule({
+  declarations: [ItineraryLibComponent],
+  imports: [
+    BrowserModule,
+    TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: httpLoaderFactory,
+        deps: [HttpBackend],
+      },
+    }),
+    ButtonsModule,
+    FormsModule,
+    IonicModule.forRoot(),
+    ReactiveFormsModule,
+    LibModalModule,
+    ToggleModule,
+    RangeSelectorModule,
+    BrowserAnimationsModule,
+    MatDialogModule,
+    UserModule,
+    ItineraryLibRoutingModule,
+    NextsapienComponentLibModule
+  ],
+  exports: [ItineraryLibComponent, ItineraryLibRoutingModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  providers: [provideAnimationsAsync(),  provideIonicAngular()],
+})
+export class ItineraryLibModule { }

package/src/lib/itinerary-app/modules/archives/archives-routing.module.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MainArchivesComponent } from './pages/main-archives/main-archives.component';
+
+const routes: Routes = [{ path: 'archives', component: MainArchivesComponent }];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ArchivesRoutingModule {}

package/src/lib/itinerary-app/modules/archives/archives.component.html

@@ -0,0 +1,8 @@
+<div class="w-screen h-screen max-padd-container overflow-y-auto">
+  <app-header
+    [heading]="'MAIN_ARCHIVES.ARCHIVES' | translate"
+    (firstButton)="backButton()"
+  ></app-header>
+  <router-outlet></router-outlet>
+  <app-footer></app-footer>
+</div>

package/src/lib/itinerary-app/modules/archives/archives.component.spec.ts

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

package/src/lib/itinerary-app/modules/archives/archives.component.ts

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-archives',
+  templateUrl: './archives.component.html',
+  styleUrl: './archives.component.scss',
+})
+export class ArchivesComponent {
+  constructor() {}
+
+  backButton(): void {
+    window.history.back();
+  }
+}

package/src/lib/itinerary-app/modules/archives/archives.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { TranslateModule } from '@ngx-translate/core';
+import { LibModalModule } from '@naniteninja/ionic-lib';
+import { SharedModule } from '../../shared/shared.module';
+import { ItinerariesModule } from '../itineraries/itineraries.module';
+import { ArchivesRoutingModule } from './archives-routing.module';
+import { ArchivesComponent } from './archives.component';
+import { MainArchivesComponent } from './pages/main-archives/main-archives.component';
+
+@NgModule({
+  declarations: [ArchivesComponent, MainArchivesComponent],
+  imports: [
+    CommonModule,
+    ArchivesRoutingModule,
+    SharedModule,
+    LibModalModule,
+    ItinerariesModule,
+    TranslateModule,
+  ],
+})
+export class ArchivesModule {}

package/src/lib/itinerary-app/modules/archives/pages/main-archives/main-archives.component.html

@@ -0,0 +1,35 @@
+<div class="pl-2 pr-4">
+  <div class="minScreen pl-4 pr-4">
+      <ng-template #search>
+        <img [src]="ICONS['search']" alt="right-icon" (click)="searchButtonClick()" />
+      </ng-template>
+      <app-header
+        (firstButton)="backButtonClick()"
+        [heading]="'MAIN_ARCHIVES.ARCHIVES' | translate"
+        [headerSuffixTemplate]="search"
+      ></app-header>
+      <app-custom-heading-with-button
+        cssClass="archive-css"
+        [heading]="'MAIN_ARCHIVES.NOTE_ARCHIVED' | translate"
+        [buttonText]="'MAIN_ARCHIVES.CLEAR_ALL' | translate"
+        [buttonIcon]="ICONS['deleteSec']"
+        (buttonClick)="buttonClicked()"
+      ></app-custom-heading-with-button>
+      <div *ngIf="!loading && itineraries.length" 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 itinerary of itineraries;">
+          <app-cutom-card 
+          [cardData]="itinerary"
+          [libMenuItem]="libMenuItem"
+          (menuClicked)="menuClicked($event)"
+          ></app-cutom-card>
+        </ng-container>
+      </div>
+      <div *ngIf="!loading && !itineraries.length" class="text-center">
+        {{ "MAIN_ARCHIVES.NO_ARCHIVED_FOUND" | translate }}
+      </div>
+  </div>
+  <lib-popup [isOpen]="modalService.toggleModal">
+    <app-delete-itineraries (deleteItineraryEvent)="deleteItinerary()"></app-delete-itineraries>
+  </lib-popup>
+</div>
+<app-footer></app-footer>

package/src/lib/itinerary-app/modules/archives/pages/main-archives/main-archives.component.scss

@@ -0,0 +1,3 @@
+.main-archive {
+  overflow-y: scroll !important;
+}

package/src/lib/itinerary-app/modules/archives/pages/main-archives/main-archives.component.spec.ts

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

package/src/lib/itinerary-app/modules/archives/pages/main-archives/main-archives.component.ts

@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { LibMenuItem } from '@naniteninja/ionic-lib'; 
+import { CustomDropdownMenuService } from '../../../../_services/custom-dropdown-menu.service';
+import { ModalService } from '../../../../_services/modal.service';
+import { Iicon } from '../../../../_interface/icon'; 
+import { ICONS } from '../../../../_constants/constants';
+import { Router } from '@angular/router';
+import { ItinerariesRoutesEnum } from '../../../../_enums/ItenariesRoutes.enum';
+import { ItineraryService } from '../../../../_services/itinerary.service';
+import { Itinerary } from '../../../../_models/Itinerary';
+import { Location } from '@angular/common';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'app-main-archives',
+  templateUrl: './main-archives.component.html',
+  styleUrl: './main-archives.component.scss',
+})
+export class MainArchivesComponent implements OnInit {
+  libMenuItem: LibMenuItem[] = [];
+  itineraries: Itinerary[] = [];
+  ICONS: Iicon = ICONS;
+  selectedItem!: Itinerary;
+  loading: boolean = true;
+
+  ngOnInit(): void {
+    this.itineraryService.getArchivedItinerariesByUserId().subscribe((data: Itinerary[]) => {
+      this.itineraries = data;
+      this.loading = false;
+      this.cd.detectChanges();
+    });
+    this.libMenuItem = this.customMenuList.getMenuList('archives');
+  }
+
+  menuClicked(event: Itinerary): void {
+    this.selectedItem = event;
+  }
+
+  backButtonClick(): void {
+    this.location.back();
+  }
+
+  buttonClicked(): void {
+    this.itineraryService.deleteItineraryArchived();
+  }
+
+  deleteItinerary() {
+    this.itineraryService.deleteItinerary(this.selectedItem.id).subscribe(() => {
+      this.itineraries = this.itineraries.filter((itinerary) => itinerary.id !== this.selectedItem.id);
+      this.cd.detectChanges();
+    });
+  }
+
+  searchButtonClick(): void {
+    this.router.navigate([ItinerariesRoutesEnum.SEARCH]).then((_r) => {});
+  }
+
+  constructor(
+    public customMenuList: CustomDropdownMenuService,
+    public modalService: ModalService,
+    public translate: TranslateService,
+    private readonly router: Router,
+    private cd: ChangeDetectorRef,
+    private readonly itineraryService: ItineraryService,
+    private location: Location
+  ) {}
+}

package/src/lib/itinerary-app/modules/dashboard/components/navbar/navbar.component.html

@@ -0,0 +1,38 @@
+<nav class="nav-bar text-white fixed top-0 left-0 w-full z-50">
+  <div class="nav-main-bar">
+    <div class="flex ml-2">
+      <img class="navbar-logo" [ngSrc]="ICONS['logo']" alt="logo" />
+    </div>
+    <div class="sub-nav mx-auto">
+      <div *ngFor="let item of navigationItems">
+        <app-bottom-navigation-items
+          [label]="item.label | translate"
+          [iconPath]="item.iconPath"
+        ></app-bottom-navigation-items>
+      </div>
+      <div>
+        <lib-search-bar
+          class="search-field"
+          [placeholderText]="'NAVBAR.SEARCH' | translate"
+          (searchStringChange)="handleSearchStringChange($event)"
+          (cleared)="clear()"
+          [searchIcon]="ICONS['dashboardSearch']"
+        >
+        </lib-search-bar>
+      </div>
+    </div>
+    <div class="profile-icon ml-auto mt-1">
+      <lib-menu-btn
+        menuDirection="rtl"
+        [menuBtnImgUrl]="
+          'https://semantic-ui.com/images/avatar2/large/matthew.png'
+        "
+        [hasNotification]="true"
+        [menuBtnNotificationIconUrl]="ICONS['notBlip']"
+        [menuItems]="menuItems"
+        class="dashboard-menu"
+      >
+      </lib-menu-btn>
+    </div>
+  </div>
+</nav>

package/src/lib/itinerary-app/modules/dashboard/components/navbar/navbar.component.scss

@@ -0,0 +1,35 @@
+@use "../../../../_styles/colors" as *;
+
+$box-shadow-inset: 0px -4px 4px 0px rgba(0, 0, 0, 0.25) inset;
+$box-shadow-outer: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+
+.nav-bar {
+  background: $background-color-1;
+  box-shadow: $box-shadow-inset, $box-shadow-outer;
+}
+
+.navbra-logo {
+  height: 10px;
+  width: 50px;
+}
+
+.nav-main-bar {
+  min-width: 100% !important;
+  padding-right: 20px !important;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+}
+
+.sub-nav {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: row;
+  gap: 130px;
+}
+
+.profile-icon {
+  position: absolute;
+  right: 10px;
+}

package/src/lib/itinerary-app/modules/dashboard/components/navbar/navbar.component.spec.ts

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