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

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();
+  });
+});

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

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { LibMenuItem } from '@naniteninja/ionic-lib'; 
+import { Iicon } from '../../../../_interface/icon';
+import { ICONS } from '../../../../_constants/constants';
+ 
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-navbar',
+    templateUrl: './navbar.component.html',
+    styleUrls: ['./navbar.component.scss'],
+    standalone: false
+})
+export class NavbarComponent {
+  ICONS: Iicon = ICONS;
+  menuItems: LibMenuItem[] = [];
+  navigationItems = [
+    { label: 'MENU.HOME', iconPath: this.ICONS['dashHomeActive'] },
+    { label: 'MENU.CONSTITUENTS', iconPath: this.ICONS['users'] },
+    { label: 'MENU.ITINERARY', iconPath: this.ICONS['itineraries'] },
+    { label: 'MENU.STATS', iconPath: this.ICONS['stats'] },
+    { label: 'MENU.SETTINGS', iconPath: this.ICONS['setting'] },
+  ];
+  constructor(private translate: TranslateService) {
+    this.initializeMenuItems();
+  }
+
+  private initializeMenuItems() {
+    this.menuItems = [
+      {
+        title: this.translate.instant('NAVBAR.LOGOUT'),
+        titlePrefix: '',
+        iconUrl: ICONS['logout'],
+      },
+      {
+        title: this.translate.instant('NAVBAR.INFO'),
+        titlePrefix: '',
+        iconUrl: ICONS['info'],
+      },
+      {
+        title: this.translate.instant('NAVBAR.FEEDBACK'),
+        titlePrefix: '',
+        iconUrl: ICONS['feedback'],
+      },
+      {
+        title: this.translate.instant('NAVBAR.SEARCH_2'),
+        titleSuffix: 'AI',
+        iconUrl: ICONS['dashboardSearch'],
+      },
+      {
+        title: this.translate.instant('NAVBAR.NOTIFICATIONS'),
+        titlePrefix: '',
+        iconUrl: ICONS['notifications'],
+      },
+    ];
+  }
+
+  handleSearchStringChange(_$event: string) {}
+
+  clear(): void {}
+}

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

@@ -0,0 +1,20 @@
+<aside class="side-nav text-white w-64 h-screen fixed top-0 left-0 z-40">
+  <div class="px-2">
+    <app-header
+      cssClass="side-bar-heading-bar"
+      [heading]="'SIDEBAR.ITINERARIES' | translate"
+    ></app-header>
+  </div>
+  <ul class="space-y-2">
+    <li *ngFor="let item of sideBarItem" (click)="selectItem(item)">
+      <a
+        [routerLink]="item.url"
+        [class]="item.cssClass + ' block p-3 text-center'"
+        >{{ item.name | translate }}</a
+      >
+      <div *ngIf="item.id === 1 && item.selected">
+        <app-filter-menu [cssClass]="filterClass"></app-filter-menu>
+      </div>
+    </li>
+  </ul>
+</aside>

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

@@ -0,0 +1,36 @@
+@use "../../../../_styles/colors" as *;
+
+$secondary-color: rgba(255, 255, 255, 0.7);
+$box-shadow: rgba(203, 199, 209, 0.25);
+$shadow-color-dark: rgba(17, 16, 20, 0.65);
+
+.side-nav {
+  background: $background-color-1;
+  margin-top: 30px;
+  box-shadow: -2px -5px 7px 0px $box-shadow inset;
+  filter: drop-shadow(-3.172px -3.172px 10.15px $box-shadow)
+    drop-shadow(6.978px 6.344px 17.128px $shadow-color-dark) !important;
+  ul {
+    li {
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      padding: 10px 70px;
+
+      a {
+        font-family: "Calistoga";
+        opacity: 50%;
+      }
+    }
+  }
+}
+
+.active {
+  color: $text-color-3 !important;
+  border-bottom: 2px solid $secondary-color;
+}
+
+.active {
+  opacity: 100% !important;
+}

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

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

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

@@ -0,0 +1,65 @@
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { ISideBarMenuItem } from '../../../../_interface/dashboardSideBar';
+ 
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-sidebar',
+    templateUrl: './sidebar.component.html',
+    styleUrls: ['./sidebar.component.scss'],
+    standalone: false
+})
+export class SidebarComponent implements OnInit {
+  isFilter: boolean = false;
+  filterClass = 'filter-side-bar';
+
+  sideBarItem: ISideBarMenuItem[] = [];
+
+  constructor(
+    private router: Router,
+  ) {}
+
+  ngOnInit(): void {
+    this.initializeSidebarItems();
+    this.sideBarItem.some((element: ISideBarMenuItem) => {
+      if (element.selected) {
+        this.router.navigate([element.url]);
+      }
+    });
+  }
+
+  private initializeSidebarItems(): void {
+    this.sideBarItem = [
+      {
+        id: 1,
+        name: 'SIDEBAR.EXPLORE',
+        selected: true,
+        cssClass: 'active',
+        url: '/dashboard/itineraries/explore',
+      },
+      {
+        id: 2,
+        name: 'SIDEBAR.BUILDER',
+        selected: false,
+        cssClass: '',
+        url: '/dashboard/itineraries/explore',
+      },
+      {
+        id: 3,
+        name: 'SIDEBAR.FAVOURITE',
+        selected: false,
+        cssClass: '',
+        url: '/dashboard/itineraries/explore',
+      },
+    ];
+  }
+
+  selectItem(item: ISideBarMenuItem): void {
+    this.sideBarItem.some((element: ISideBarMenuItem) => {
+      element.selected = false;
+      element.cssClass = '';
+    });
+    item.selected = true;
+    item.cssClass = 'active';
+  }
+}

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

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ExploreComponent } from '../itineraries/pages/explore/explore.component';
+import { DashboardComponent } from './dashboard.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
+  { path: 'dashboard', component: DashboardComponent },
+  { path: 'itineraries/explore', component: ExploreComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class DashboardRoutingModule {}

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

@@ -0,0 +1,15 @@
+<div class="main-dashboard-sec w-screen h-screen">
+  <app-navbar></app-navbar>
+
+  <div class="flex">
+    <div class="w-64">
+      <!-- Hidden for medium and larger screens -->
+      <app-sidebar></app-sidebar>
+    </div>
+
+    <main class="flex-grow p-4 max-padd-container">
+      <!-- Your main content goes here -->
+      <router-outlet></router-outlet>
+    </main>
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+.main-dashboard-sec {
+  overflow-x: hidden !important;
+}

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

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

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

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-dashboard',
+    templateUrl: './dashboard.component.html',
+    styleUrl: './dashboard.component.scss',
+    standalone: false
+})
+export class DashboardComponent {}

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

@@ -0,0 +1,32 @@
+import { CommonModule, NgOptimizedImage } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { TranslateModule } from '@ngx-translate/core';
+import { ButtonsModule, SearchBarModule } from '@naniteninja/ionic-lib';
+import { SharedModule } from '../../shared/shared.module';
+import { ItinerariesModule } from '../itineraries/itineraries.module';
+import { NavbarComponent } from './components/navbar/navbar.component';
+import { SidebarComponent } from './components/sidebar/sidebar.component';
+import { DashboardRoutingModule } from './dashboard-routing.module';
+import { DashboardComponent } from './dashboard.component';
+import { MainDashboardComponent } from './pages/main-dashboard/main-dashboard.component';
+
+@NgModule({
+  declarations: [
+    MainDashboardComponent,
+    SidebarComponent,
+    NavbarComponent,
+    DashboardComponent,
+  ],
+  imports: [
+    CommonModule,
+    DashboardRoutingModule,
+    SharedModule,
+    NgOptimizedImage,
+    ItinerariesModule,
+    ButtonsModule,
+    TranslateModule,
+    SearchBarModule,
+  ],
+})
+export class DashboardModule {}

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

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

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

@@ -0,0 +1,9 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    selector: 'app-main-dashboard',
+    templateUrl: './main-dashboard.component.html',
+    standalone: false
+})
+export class MainDashboardComponent {}

package/src/lib/itinerary-app/modules/itineraries/components/app-header-desktop/app-header-desktop.component.html

@@ -0,0 +1,69 @@
+<header class="items-center justify-between py-1 px-6 hidden md:flex">
+    <div class="flex-auto">
+      <img src="assets/icons/logo.svg" />
+    </div>
+    <div class="flex-auto">
+      <div
+        class="bottom-nav-item flex flex-col items-center"
+      >
+        <img src="assets/icons/home.svg" />
+        <span [class]="'span-text'" style="font-size:6.81px;">Home</span>
+      </div>
+    </div>
+    
+
+    <div class="flex-grow w-1/8">
+      <lib-search-bar
+        class="search-field"
+        [searchIcon]="'assets/icons/dashboard_search.svg'"
+        [placeholderText]="'NG_GRID.searchOoo' | translate"
+      >
+      </lib-search-bar>
+    </div>
+      
+    <div class="flex-auto text-right">
+      <div
+        class="bottom-nav-item flex flex-col items-center"
+      >
+        <img src="assets/icons/constituents.svg" />
+        <span [class]="'span-text'" style="font-size:6.81px;">Constituents</span>
+      </div>
+    </div>
+
+    <div class="flex-auto font-white text-right">
+      <div
+        class="bottom-nav-item flex flex-col items-center"
+      >
+        <img src="assets/icons/itineraries.svg" />
+        <span [class]="'span-text'" style="font-size:6.81px;">Itinerary</span>
+      </div>
+    </div>
+
+    <div class="flex-auto font-white text-right">
+      <div
+        class="bottom-nav-item flex flex-col items-center"
+      >
+        <img src="assets/icons/stats.svg" />
+        <span [class]="'span-text'" style="font-size:6.81px;">Stats</span>
+      </div>
+    </div>
+
+    <div class="flex-auto font-white text-right">
+      <div
+        class="bottom-nav-item flex flex-col items-center"
+      >
+        <img src="assets/icons/setting.svg" />
+        <span [class]="'span-text'" style="font-size:6.81px;">Settings</span>
+      </div>
+    </div>
+
+    <div class="flex justify-end flex-auto">
+        <div class="h-[30px] w-[30px]">
+            <lib-user-menu
+                [userImageUrl]="'assets/images/user-image.jpg'"
+            >
+            </lib-user-menu>
+        </div>
+      
+    </div>
+</header>

package/src/lib/itinerary-app/modules/itineraries/components/app-header-desktop/app-header-desktop.component.spec.ts

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

package/src/lib/itinerary-app/modules/itineraries/components/app-header-desktop/app-header-desktop.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'lib-app-header-desktop',
+    templateUrl: './app-header-desktop.component.html',
+    styleUrl: './app-header-desktop.component.css',
+    standalone: false
+})
+export class AppHeaderDesktopComponent {
+
+}

package/src/lib/itinerary-app/modules/itineraries/components/app-sidebar-desktop/app-sidebar-desktop.component.css

@@ -0,0 +1,39 @@
+aside {
+    background-color: rgba(39, 36, 44, 1);
+}
+
+.underline-custom {
+    background: linear-gradient(94.44deg, #FE3C72 1.26%, #E15561 100%);
+    height: 5px;
+}
+
+.filter-outer {
+    box-shadow: -6.4px -6.4px 20.49px -3.84px rgba(203, 199, 209, 0.25);
+    box-shadow: 14.08px 12.8px 34.57px 3.2px rgba(17, 16, 20, 0.65);
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    background: rgba(39, 36, 44, 1);
+}
+
+.filter-item-container {
+    width: 40px;
+    height: 40px;
+    background: rgba(39, 36, 44, 1);
+    box-shadow:
+      -6.4px -6.4px 20.49px -3.84px rgba(203, 199, 209, 0.25),
+      14.08px 12.8px 34.57px 3.2px rgba(17, 16, 20, 0.65);
+}
+
+.custom-button {
+  box-shadow: 
+    -6.4px -6.4px 20.49px -3.84px rgba(203, 199, 209, 0.25),
+    14.08px 12.8px 34.57px 3.2px rgba(17, 16, 20, 0.65);
+  background: rgba(39, 36, 44, 1);
+  padding: 10px 20px;
+  border-radius: 24px;
+}
+
+.custom-button.active {
+    background: linear-gradient(94.44deg, #FE3C72 1.26%, #E15561 100%) !important;
+}

package/src/lib/itinerary-app/modules/itineraries/components/app-sidebar-desktop/app-sidebar-desktop.component.html

@@ -0,0 +1,64 @@
+  <aside class="w-[260px] min-h-screen text-white p-4 flex flex-col gap-10 space-y-6 font-semibold hidden md:block">
+  <!-- Header -->
+  <ng-template #suffix>
+    <span class="discard"><img [ngSrc]="ICONS['search']" height="17" width="18" /></span>
+  </ng-template>
+  <section class="flex justify-between">
+    <lib-icon-btn (click)="back()" class="checkmark-icon-button">
+      <img [ngSrc]="ICONS['back']" height="17" width="18" />
+    </lib-icon-btn>
+    <h4 class="font-[Calistoga] text-[24px]">{{ "SIDEBAR.ITINERARIES" | translate }}</h4>
+    <lib-icon-btn  (click)="openSearch()" class="checkmark-icon-button">
+      <img [ngSrc]="ICONS['search']" height="17" width="18" />
+    </lib-icon-btn>
+  </section>
+
+  <section class="flex flex-col gap-10">
+    <!-- Explore Section -->
+    <div class="flex flex-col justify-center">
+      <button class="m-auto w-[100px] text-center font-[Calistoga] text-[24px] font-normal" (click)="openExplorePage()">{{ "SIDEBAR.EXPLORE" | translate }}</button>    
+      <h2 *ngIf="currentUrl === '/itineraries/explore'" class="m-auto w-[90px] mt-2 text-center underline-custom"></h2>    
+      <div class="flex justify-center mt-6">
+          <div
+              (click)="openCommentsSearch()"
+              class="flex items-center justify-center rounded-full cursor-pointer"
+              style="
+                  width: 40px;
+                  height: 40px;
+                  background: rgba(39, 36, 44, 1);
+                  box-shadow:
+                  -6.4px -6.4px 20.49px -3.84px rgba(203, 199, 209, 0.25),
+                  14.08px 12.8px 34.57px 3.2px rgba(17, 16, 20, 0.65);
+              "
+              
+              >
+              <img [ngSrc]="ICONS['desktopSearch']" height="17" width="18" class="w-5 h-5" />
+              </div>
+      </div>
+      <div class="flex justify-center mt-6">
+          <button class="custom-button font-[Gilroy] font-normal text-[18px]">{{"SIDEBAR.FEATURED" | translate}}</button>
+      </div>
+      <div class="flex justify-center mt-6">
+          <button class="custom-button font-[Gilroy] font-normal text-[18px]">{{"SIDEBAR.HOT" | translate}}</button>
+      </div>
+      <div class="flex justify-center mt-6">
+          <button class="custom-button [Gilroy] font-normal text-[18px]">{{"SIDEBAR.BEST" | translate}}</button>
+      </div>
+      <div class="flex justify-center mt-6">
+          <button class="custom-button [Gilroy] font-normal text-[18px]">{{"SIDEBAR.NEW" | translate}}</button>
+      </div>
+    </div>
+
+    <!-- Builder Section -->
+    <div class="flex flex-col justify-center">
+      <button class="font-[Calistoga] text-[24px] font-normal" (click)="openBuilderPage()">{{"SIDEBAR.BUILDER" | translate}}</button>
+      <h2 *ngIf="currentUrl === '/itineraries/builder'" class="m-auto w-[90px] mt-2 text-center underline-custom"></h2> 
+    </div>
+
+    <!-- Builder Section -->
+    <div class="flex flex-col justify-center">
+      <button class="font-[Calistoga] text-[24px] font-normal" (click)="openFavoritesPage()">{{"SIDEBAR.FAVOURITE" | translate }}</button>
+      <h2 *ngIf="currentUrl === '/itineraries/favorites'" class="m-auto w-[90px] mt-2 text-center underline-custom"></h2> 
+    </div>
+  </section>
+</aside>