tango-app-ui-shared 3.7.3-dev6-demo6 → 3.7.3-dev6-demo7

package/src/lib/modules/common/pagination/pagination.component.ts

@@ -0,0 +1,46 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'lib-pagination',
+  templateUrl: './pagination.component.html',
+  styleUrl: './pagination.component.scss'
+})
+export class PaginationComponent {
+  @Input() collection: any[] = [];
+  @Input() itemsPerPage: number;
+  @Input() currentPage: number;
+  @Input() totalItems: number;
+  @Input() directionLinks: boolean = false;
+
+  @Input() pageSize: number;
+  @Input() paginationSizes: number[];
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+  instanceId = crypto.randomUUID()
+  
+  onPageChange(page: number) {
+    this.pageChange.emit(page);
+  }
+
+  onPageSizeChange(pageSize:any) {
+    this.itemsPerPage = pageSize;
+    this.pageSizeChange.emit(this.pageSize);
+  }
+
+  // disableOption(size: number): boolean {
+  //   if (!this.paginationSizes.includes(size)) {
+  //     console.error('Size is not in paginationSizes.');
+  //     return true; // Disable the option to prevent invalid selection
+  //   }
+  
+  //   // Calculate the maximum possible total items on the current page
+  //   const maxTotalOnPage = (this.currentPage) * size;
+  //   console.log('Current Page:', maxTotalOnPage);
+  //   // Disable the option if totalItems is less than or equal to the option size
+  //   const disable = this.totalItems <= maxTotalOnPage;
+  //   console.log('Disable:', disable);
+  //   return disable;
+  // }
+  
+  
+}

package/src/lib/modules/errors/error403/error403.component.html

@@ -0,0 +1,25 @@
+<!--begin::Title-->
+<h1 class="fw-bolder fs-2hx text-gray-900 mb-4">
+    !Forbidden
+  </h1>
+  <!--end::Title-->
+  
+  <!--begin::Text-->
+  <div class="fw-semibold fs-6 text-gray-500 mb-7">
+    We can't find that page.
+  </div>
+  <!--end::Text-->
+  
+  <!--begin::Illustration-->
+  <div class="mb-3">
+    <img src="./assets/media/auth/404-error.png" class="mw-100 mh-300px theme-light-show" alt="" />
+    <img src="./assets/media/auth/404-error-dark.png" class="mw-100 mh-300px theme-dark-show" alt="" />
+  </div>
+  <!--end::Illustration-->
+  
+  <!--begin::Link-->
+  <div class="mb-0">
+    <a routerLink="/manage/brands" class="btn btn-sm btn-primary">Return Home</a>
+  </div>
+  <!--end::Link-->
+  

package/src/lib/modules/errors/error403/error403.component.spec.ts

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

package/src/lib/modules/errors/error403/error403.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { ThemeModeService } from 'tango-app-ui-global';
+
+@Component({
+  selector: 'lib-error403',
+  templateUrl: './error403.component.html',
+  styleUrl: './error403.component.scss'
+})
+export class Error403Component implements OnInit,OnDestroy {
+  private unsubscribe: Subscription[] = [];
+
+  constructor(private router: Router, private modeService: ThemeModeService) {}
+  ngOnInit(): void {
+    const subscr = this.modeService.mode.asObservable().subscribe((mode) => {
+      document.body.style.backgroundImage =
+        mode === 'dark'
+          ? 'url(./assets/media/auth/bg1-dark.jpg)'
+          : 'url(./assets/media/auth/bg1.jpg)';
+    });
+    this.unsubscribe.push(subscr);
+  }
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+    document.body.style.backgroundImage = 'none';
+  }
+}

package/src/lib/modules/errors/error404/error404.component.html

@@ -0,0 +1,24 @@
+<!--begin::Title-->
+<h1 class="fw-bolder fs-2hx text-gray-900 mb-4">
+  Oops!
+</h1>
+<!--end::Title-->
+
+<!--begin::Text-->
+<div class="fw-semibold fs-6 text-gray-500 mb-7">
+  We can't find that page.
+</div>
+<!--end::Text-->
+
+<!--begin::Illustration-->
+<div class="mb-3">
+  <img src="./assets/media/auth/404-error.png" class="mw-100 mh-300px theme-light-show" alt="" />
+  <!-- <img src="./assets/media/auth/404-error-dark.png" class="mw-100 mh-300px theme-dark-show" alt="" /> -->
+</div>
+<!--end::Illustration-->
+
+<!--begin::Link-->
+<div class="mb-0">
+  <a (click)="routeToDashboard()" class="btn btn-sm btn-primary">Return Home</a>
+</div>
+<!--end::Link-->

package/src/lib/modules/errors/error404/error404.component.spec.ts

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

package/src/lib/modules/errors/error404/error404.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import {
+  DrawerComponent,
+  MenuComponent,
+  ScrollComponent,
+  ScrollTopComponent,
+  StickyComponent,
+  ToggleComponent,
+} from 'tango-app-ui-global';
+import { ThemeModeService } from 'tango-app-ui-global';
+
+@Component({
+  selector: 'lib-error404',
+  templateUrl: './error404.component.html',
+  styleUrls: ['./error404.component.scss'],
+})
+export class Error404Component implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+
+  constructor(private router: Router, private modeService: ThemeModeService) {}
+
+  ngOnInit(): void {
+    // const subscr = this.modeService.mode.asObservable().subscribe((mode) => {
+    //   document.body.style.backgroundImage =
+    //     mode === 'dark'
+    //       ? 'url(./assets/media/auth/bg1-dark.jpg)'
+    //       : 'url(./assets/media/auth/bg1.jpg)';
+    // });
+    // this.unsubscribe.push(subscr);
+  }
+
+  routeToDashboard() {
+    this.router.navigate(['/manage/brands']);
+    // setTimeout(() => {
+    //   ToggleComponent.reinitialization();
+    //   ScrollTopComponent.reinitialization();
+    //   DrawerComponent.reinitialization();
+    //   StickyComponent.bootstrap();
+    //   MenuComponent.reinitialization();
+    //   ScrollComponent.reinitialization();
+    // }, 200);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+    document.body.style.backgroundImage = 'none';
+  }
+}

package/src/lib/modules/errors/error500/error500.component.html

@@ -0,0 +1,24 @@
+<!--begin::Title-->
+<h1 class="fw-bolder fs-2qx text-gray-900 mb-4">
+  System Error
+</h1>
+<!--end::Title-->
+
+<!--begin::Text-->
+<div class="fw-semibold fs-6 text-gray-500 mb-7">
+  Something went wrong! Please try again later.
+</div>
+<!--end::Text-->
+
+<!--begin::Illustration-->
+<div class="mb-11">
+  <img src="./assets/media/auth/500-error.png" class="mw-100 mh-300px theme-light-show" alt="" />
+  <img src="./assets/media/auth/500-error-dark.png" class="mw-100 mh-300px theme-dark-show" alt="" />
+</div>
+<!--end::Illustration-->
+
+<!--begin::Link-->
+<div class="mb-0">
+  <a (click)="routeToDashboard()" class="btn btn-sm btn-primary">Return Home</a>
+</div>
+<!--end::Link-->

package/src/lib/modules/errors/error500/error500.component.spec.ts

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

package/src/lib/modules/errors/error500/error500.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import {
+  DrawerComponent,
+  MenuComponent,
+  ScrollComponent,
+  ScrollTopComponent,
+  StickyComponent,
+  ToggleComponent,
+} from 'tango-app-ui-global';
+import { ThemeModeService } from 'tango-app-ui-global';
+
+@Component({
+  selector: 'lib-error500',
+  templateUrl: './error500.component.html',
+  styleUrls: ['./error500.component.scss'],
+})
+export class Error500Component implements OnInit, OnDestroy {
+  private unsubscribe: Subscription[] = [];
+
+  constructor(private router: Router, private modeService: ThemeModeService) {}
+
+  ngOnInit(): void {
+    const subscr = this.modeService.mode.asObservable().subscribe((mode) => {
+      document.body.style.backgroundImage =
+        mode === 'dark'
+          ? 'url(./assets/media/auth/bg7-dark.jpg)'
+          : 'url(./assets/media/auth/bg7.jpg)';
+    });
+    this.unsubscribe.push(subscr);
+  }
+
+  routeToDashboard() {
+    this.router.navigate(['dashboard']);
+    setTimeout(() => {
+      ToggleComponent.reinitialization();
+      ScrollTopComponent.reinitialization();
+      DrawerComponent.reinitialization();
+      StickyComponent.bootstrap();
+      MenuComponent.reinitialization();
+      ScrollComponent.reinitialization();
+    }, 200);
+  }
+
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+    document.body.style.backgroundImage = 'none';
+  }
+}

package/src/lib/modules/errors/errors-routing.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { Error404Component } from './error404/error404.component';
+import { Error500Component } from './error500/error500.component';
+import { ErrorsComponent } from './errors.component';
+import { Error403Component } from './error403/error403.component';
+import { InvalidIpComponent } from './invalid-ip/invalid-ip.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ErrorsComponent,
+    children: [
+      {
+        path: '403',
+        component: Error403Component,
+      },
+      {
+        path: '404',
+        component: Error404Component,
+      },
+      {
+        path: '500',
+        component: Error500Component,
+      },
+      {
+        path: '403-ip',
+        component: InvalidIpComponent,
+      },
+      { path: '', redirectTo: '404', pathMatch: 'full' },
+      { path: '**', redirectTo: '404', pathMatch: 'full' },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class ErrorsRoutingModule {}

package/src/lib/modules/errors/errors.component.html

@@ -0,0 +1,15 @@
+<!--begin::Authentication - -->
+<div class="d-flex flex-column flex-center flex-column-fluid">
+  <!--begin::Content-->
+  <div class="d-flex flex-column flex-center text-center p-10">
+    <!--begin::Wrapper-->
+    <div class="card card-flush  w-lg-650px py-5">
+      <div class="card-body py-15 py-lg-20">
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+    <!--end::Wrapper-->
+  </div>
+  <!--end::Content-->
+</div>
+<!--end::Authentication - -->

package/src/lib/modules/errors/errors.component.scss

@@ -0,0 +1,4 @@
+:host {
+  height: 100%;
+  margin: 0;
+}

package/src/lib/modules/errors/errors.component.spec.ts

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

package/src/lib/modules/errors/errors.component.ts

@@ -0,0 +1,42 @@
+import { Component, HostBinding, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  DrawerComponent,
+  MenuComponent,
+  ScrollComponent,
+  ScrollTopComponent,
+  StickyComponent,
+  ToggleComponent,
+} from 'tango-app-ui-global';
+
+const BODY_CLASSES = ['bgi-size-cover', 'bgi-position-center', 'bgi-no-repeat'];
+
+@Component({
+  selector: 'lib-errors',
+  templateUrl: './errors.component.html',
+  styleUrls: ['./errors.component.scss'],
+})
+export class ErrorsComponent implements OnInit, OnDestroy {
+  @HostBinding('class') class = 'd-flex flex-column flex-root';
+  constructor(private router: Router) {}
+
+  ngOnInit(): void {
+    BODY_CLASSES.forEach((c) => document.body.classList.add(c));
+  }
+
+  ngOnDestroy(): void {
+    BODY_CLASSES.forEach((c) => document.body.classList.remove(c));
+  }
+
+  routeToDashboard() {
+    this.router.navigate(['dashboard']);
+    setTimeout(() => {
+      ToggleComponent.bootstrap();
+      ScrollTopComponent.bootstrap();
+      DrawerComponent.bootstrap();
+      StickyComponent.bootstrap();
+      MenuComponent.bootstrap();
+      ScrollComponent.bootstrap();
+    }, 200);
+  }
+}

package/src/lib/modules/errors/errors.module.ts

@@ -0,0 +1,25 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ErrorsRoutingModule } from './errors-routing.module';
+import { ErrorsComponent } from '../errors/errors.component';
+import { Error500Component } from './error500/error500.component';
+import { Error404Component } from './error404/error404.component';
+import { Error403Component } from './error403/error403.component';
+import { InvalidIpComponent } from './invalid-ip/invalid-ip.component';
+
+
+@NgModule({
+  declarations: [
+    ErrorsComponent,
+    Error404Component,
+    Error500Component,
+    Error403Component,
+    InvalidIpComponent
+  ],
+  imports: [
+    CommonModule,
+    ErrorsRoutingModule
+  ]
+})
+export class ErrorsModule { }

package/src/lib/modules/errors/invalid-ip/invalid-ip.component.html

@@ -0,0 +1,16 @@
+
+  
+  <!--begin::Illustration-->
+  <div class="mb-8">
+    <img src="./assets/media/auth/invalid-ip-error.png" class="mw-100 mh-300px theme-light-show" alt="" />
+    <img src="./assets/media/auth/invalid-ip-error.png" class="mw-100 mh-300px theme-dark-show" alt="" />
+  </div>
+  <!--end::Illustration-->
+  
+  
+  <!--begin::Text-->
+  <div class="fw-semibold fs-6 text-gray-500 mb-7">
+    Your IP address is not whitelisted. Please connect to an authorized network or contact your administrator to whitelist your IP address.
+  </div>
+  <!--end::Text-->
+  

package/src/lib/modules/errors/invalid-ip/invalid-ip.component.spec.ts

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

package/src/lib/modules/errors/invalid-ip/invalid-ip.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
+import { AuthService } from '../../../services/auth.service';
+import { ThemeModeService } from 'tango-app-ui-global';
+
+@Component({
+  selector: 'lib-invalid-ip',
+  templateUrl: './invalid-ip.component.html',
+  styleUrl: './invalid-ip.component.scss'
+})
+export class InvalidIpComponent implements OnInit, OnDestroy {
+
+  private unsubscribe: Subscription[] = [];
+
+  constructor(private router: Router, private modeService: ThemeModeService, private authService:AuthService) {}
+  ngOnInit(): void {
+    // const subscr = this.modeService.mode.asObservable().subscribe((mode) => {
+    //   document.body.style.backgroundImage =
+    //     mode === 'dark'
+    //       ? 'url(./assets/media/auth/bg1-dark.jpg)'
+    //       : 'url(./assets/media/auth/bg1.jpg)';
+    // });
+    // this.unsubscribe.push(subscr);
+    this.getProfile()
+  }
+  ngOnDestroy() {
+    this.unsubscribe.forEach((sb) => sb.unsubscribe());
+    document.body.style.backgroundImage = 'none';
+  }
+
+  getProfile(){
+    this.unsubscribe.push(
+    this.authService.userProfileDet().subscribe((res)=>{
+      if(res?.data?.result !== 'RESTRICTED-IP'){
+        this.router.navigate(['/manage'])
+      }
+    })  
+    )
+    
+  }
+
+}

package/src/lib/modules/intro/contact-support/contact-support.component.html

@@ -0,0 +1,30 @@
+<div class="card p-0">
+    <div class="card-header border-0 pt-3">
+        <h3 class="card-title align-items-start flex-column">
+            <span class="card-label ellipse1 header mb-2">Contact Support</span>
+        </h3>
+        <div class="card-toolbar">
+        </div>
+    </div>
+    <div class="card-body pt-0 mh-60vh">
+        <div class="d-flex justify-content-between align-items-center pt-5" >
+            <div class="d-flex">
+                <div class="position-relative">
+                    <div class="rounded-5 profile fw-semibold d-flex align-items-center justify-content-center">CU</div>
+                </div>
+                <div class="d-grid mx-3">
+                    <span class="headingtext fw-bold-600"> Customer support </span>
+                    <span class="sub-header ellipse fw-bold-400">hello&#64;tangotech.co.in</span>
+                </div>
+            </div>
+            <div class="contact fw-semibold">
+                <span>+91 6380909115</span>
+            </div>
+        </div>
+    </div>
+    <div class="card-body pt-0">
+        <button (click)="accept()" class="btn btn-default btn-primary mt-5 w-100">
+            Okay
+        </button>
+    </div>
+</div>

package/src/lib/modules/intro/contact-support/contact-support.component.scss

@@ -0,0 +1,60 @@
+.header{
+    color: var(--Gray-900, #101828) !important;
+    font-size: 18px !important;
+    line-height: 28px !important;
+}
+
+.sub-header{
+    color: var(--Gray-500, #667085) !important;
+    font-size: 14px !important;
+    line-height: 20px;
+}
+.contact{
+    color: var(--Gray-500, #667085) !important;
+    font-size: 12px !important;
+    line-height: 18px;
+}
+.fw-bold-400{
+    font-weight: 400 !important;
+}
+.fw-bold-600{
+    font-weight:600 !important;
+}
+.ellipse{
+    width:200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.ellipse1{
+    min-width:auto;
+    max-width:75vh;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+// .msgprofile{
+//     width:40px !important;
+//     height:40px !important  ;
+//     border-radius: 200px;
+//     overflow: hidden; 
+// }
+.profile{
+    color: var(--Primary-600, #00A3FF);
+    background-color: var(--primary-50, #EAF8FF);
+    width:40px !important;
+    height:40px !important;
+  }
+.swal2-popup.swal2-toast.swal2-show {
+    background-color: aqua !important;
+    border-left: 2px solid red !important;
+}
+
+.swal2-toast{
+    background-color: aqua !important;
+    border-left: 2px solid red !important;
+}
+.mh-60vh{
+    max-height: 60vh !important;
+    overflow: auto !important;
+}