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

package/src/lib/i18n/vocabs/fr.ts

@@ -0,0 +1,105 @@
+// France
+export const locale = {
+  lang: 'fr',
+  data: {
+    TRANSLATOR: {
+      SELECT: 'choisissez votre langue',
+    },
+    MENU: {
+      NEW: 'Nouveau',
+      ACTIONS: 'Actes',
+      CREATE_POST: 'Créer un nouveau Post',
+      PAGES: 'Pages',
+      FEATURES: 'Fonctionnalités',
+      APPS: 'Applications',
+      DASHBOARD: 'Tableau de Bord',
+    },
+    AUTH: {
+      GENERAL: {
+        OR: 'Ou',
+        SUBMIT_BUTTON: 'Soumettre',
+        NO_ACCOUNT: 'Ne pas avoir de compte?',
+        SIGNUP_BUTTON: 'Registre',
+        FORGOT_BUTTON: 'Mot de passe oublié',
+        BACK_BUTTON: 'Back',
+        PRIVACY: 'Privacy',
+        LEGAL: 'Legal',
+        CONTACT: 'Contact',
+      },
+      LOGIN: {
+        TITLE: 'Créer un compte',
+        BUTTON: 'Sign In',
+      },
+      FORGOT: {
+        TITLE: 'Forgotten Password?',
+        DESC: 'Enter your email to reset your password',
+        SUCCESS: 'Your account has been successfully reset.'
+      },
+      REGISTER: {
+        TITLE: 'Sign Up',
+        DESC: 'Enter your details to create your account',
+        SUCCESS: 'Your account has been successfuly registered.'
+      },
+      INPUT: {
+        EMAIL: 'Email',
+        FULLNAME: 'Fullname',
+        PASSWORD: 'Mot de passe',
+        CONFIRM_PASSWORD: 'Confirm Password',
+        USERNAME: 'Nom d\'utilisateur'
+      },
+      VALIDATION: {
+        INVALID: '{{name}} n\'est pas valide',
+        REQUIRED: '{{name}} est requis',
+        MIN_LENGTH: '{{name}} minimum length is {{min}}',
+        AGREEMENT_REQUIRED: 'Accepting terms & conditions are required',
+        NOT_FOUND: 'The requested {{name}} is not found',
+        INVALID_LOGIN: 'The login detail is incorrect',
+        REQUIRED_FIELD: 'Required field',
+        MIN_LENGTH_FIELD: 'Minimum field length:',
+        MAX_LENGTH_FIELD: 'Maximum field length:',
+        INVALID_FIELD: 'Field is not valid',
+      }
+    },
+    ECOMMERCE: {
+      COMMON: {
+        SELECTED_RECORDS_COUNT: 'Nombre d\'enregistrements sélectionnés: ',
+        ALL: 'All',
+        SUSPENDED: 'Suspended',
+        ACTIVE: 'Active',
+        FILTER: 'Filter',
+        BY_STATUS: 'by Status',
+        BY_TYPE: 'by Type',
+        BUSINESS: 'Business',
+        INDIVIDUAL: 'Individual',
+        SEARCH: 'Search',
+        IN_ALL_FIELDS: 'in all fields'
+      },
+      ECOMMERCE: 'éCommerce',
+      CUSTOMERS: {
+        CUSTOMERS: 'Les clients',
+        CUSTOMERS_LIST: 'Liste des clients',
+        NEW_CUSTOMER: 'Nouveau client',
+        DELETE_CUSTOMER_SIMPLE: {
+          TITLE: 'Suppression du client',
+          DESCRIPTION: 'Êtes-vous sûr de supprimer définitivement ce client?',
+          WAIT_DESCRIPTION: 'Le client est en train de supprimer ...',
+          MESSAGE: 'Le client a été supprimé'
+        },
+        DELETE_CUSTOMER_MULTY: {
+          TITLE: 'Supprimer les clients',
+          DESCRIPTION: 'Êtes-vous sûr de supprimer définitivement les clients sélectionnés?',
+          WAIT_DESCRIPTION: 'Les clients suppriment ...',
+          MESSAGE: 'Les clients sélectionnés ont été supprimés'
+        },
+        UPDATE_STATUS: {
+          TITLE: 'Le statut a été mis à jour pour les clients sélectionnés',
+          MESSAGE: 'Le statut des clients sélectionnés a été mis à jour avec succès'
+        },
+        EDIT: {
+          UPDATE_MESSAGE: 'Le client a été mis à jour',
+          ADD_MESSAGE: 'Le client a été créé'
+        }
+      }
+    }
+  }
+};

package/src/lib/i18n/vocabs/jp.ts

@@ -0,0 +1,105 @@
+// Japan
+export const locale = {
+  lang: 'ja',
+  data: {
+    TRANSLATOR: {
+      SELECT: 'あなたが使う言語を選んでください',
+    },
+    MENU: {
+      NEW: '新しい',
+      ACTIONS: '行動',
+      CREATE_POST: '新しい投稿を作成',
+      PAGES: 'Pages',
+      FEATURES: '特徴',
+      APPS: 'アプリ',
+      DASHBOARD: 'ダッシュボード',
+    },
+    AUTH: {
+      GENERAL: {
+        OR: 'または',
+        SUBMIT_BUTTON: '提出する',
+        NO_ACCOUNT: 'アカウントを持っていない？',
+        SIGNUP_BUTTON: 'サインアップ',
+        FORGOT_BUTTON: 'パスワードをお忘れですか',
+        BACK_BUTTON: 'バック',
+        PRIVACY: 'プライバシー',
+        LEGAL: '法的',
+        CONTACT: '接触',
+      },
+      LOGIN: {
+        TITLE: 'Create Account',
+        BUTTON: 'Sign In',
+      },
+      FORGOT: {
+        TITLE: 'Forgotten Password?',
+        DESC: 'Enter your email to reset your password',
+        SUCCESS: 'Your account has been successfully reset.',
+      },
+      REGISTER: {
+        TITLE: 'Sign Up',
+        DESC: 'Enter your details to create your account',
+        SUCCESS: 'Your account has been successfuly registered.',
+      },
+      INPUT: {
+        EMAIL: 'Email',
+        FULLNAME: 'Fullname',
+        PASSWORD: 'Password',
+        CONFIRM_PASSWORD: 'Confirm Password',
+        USERNAME: 'ユーザー名',
+      },
+      VALIDATION: {
+        INVALID: '{{name}} is not valid',
+        REQUIRED: '{{name}} is required',
+        MIN_LENGTH: '{{name}} minimum length is {{min}}',
+        AGREEMENT_REQUIRED: 'Accepting terms & conditions are required',
+        NOT_FOUND: 'The requested {{name}} is not found',
+        INVALID_LOGIN: 'The login detail is incorrect',
+        REQUIRED_FIELD: 'Required field',
+        MIN_LENGTH_FIELD: 'Minimum field length:',
+        MAX_LENGTH_FIELD: 'Maximum field length:',
+        INVALID_FIELD: 'Field is not valid',
+      },
+    },
+    ECOMMERCE: {
+      COMMON: {
+        SELECTED_RECORDS_COUNT: 'Selected records count: ',
+        ALL: 'All',
+        SUSPENDED: 'Suspended',
+        ACTIVE: 'Active',
+        FILTER: 'Filter',
+        BY_STATUS: 'by Status',
+        BY_TYPE: 'by Type',
+        BUSINESS: 'Business',
+        INDIVIDUAL: 'Individual',
+        SEARCH: 'Search',
+        IN_ALL_FIELDS: 'in all fields',
+      },
+      ECOMMERCE: 'eCommerce',
+      CUSTOMERS: {
+        CUSTOMERS: 'Customers',
+        CUSTOMERS_LIST: 'Customers list',
+        NEW_CUSTOMER: 'New Customer',
+        DELETE_CUSTOMER_SIMPLE: {
+          TITLE: 'Customer Delete',
+          DESCRIPTION: 'Are you sure to permanently delete this customer?',
+          WAIT_DESCRIPTION: 'Customer is deleting...',
+          MESSAGE: 'Customer has been deleted',
+        },
+        DELETE_CUSTOMER_MULTY: {
+          TITLE: 'Customers Delete',
+          DESCRIPTION: 'Are you sure to permanently delete selected customers?',
+          WAIT_DESCRIPTION: 'Customers are deleting...',
+          MESSAGE: 'Selected customers have been deleted',
+        },
+        UPDATE_STATUS: {
+          TITLE: 'Status has been updated for selected customers',
+          MESSAGE: 'Selected customers status have successfully been updated',
+        },
+        EDIT: {
+          UPDATE_MESSAGE: 'Customer has been updated',
+          ADD_MESSAGE: 'Customer has been created',
+        },
+      },
+    },
+  },
+};

package/src/lib/interceptors/http-auth-interceptor.ts

@@ -0,0 +1,225 @@
+import { Injectable } from '@angular/core';
+import {
+  HttpRequest,
+  HttpHandler,
+  HttpEvent,
+  HttpInterceptor,
+  HttpErrorResponse
+} from '@angular/common/http';
+import { BehaviorSubject, Observable, catchError, switchMap, throwError, tap } from 'rxjs';
+import { GlobalStateService } from 'tango-app-ui-global';
+import { AuthService } from '../services/auth.service';
+import { Router } from '@angular/router';
+@Injectable()
+export class HttpAuthInterceptor implements HttpInterceptor {
+
+  authlocalStorageToken: string='';
+  private isRefreshingToken: boolean = false;
+  private tokenRefreshed: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  
+  constructor(
+    private gs:GlobalStateService,
+    private authService: AuthService,private router:Router
+  ) {
+    this.gs.environment.subscribe((env)=>{
+      if(env){
+       this.authlocalStorageToken = `${env.appVersion}-${env.USERDATA_KEY}`;}
+     })
+  }
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const user: any = JSON.parse(localStorage.getItem(this.authlocalStorageToken) || '{}');
+    request = request.clone({
+      setHeaders: {
+        Authorization: 'Bearer ' + user.authenticationToken
+      }
+    });
+    return next.handle(request)
+    .pipe(tap((response:any)=>{
+      if(response?.body?.data?.result === 'RESTRICTED-IP'){
+        this.router.navigateByUrl('/error/403-ip')
+      }
+    }))
+    .pipe(
+      catchError((error:any)=>{
+        if (error instanceof HttpErrorResponse && error.status === 401) {
+          // If the error is due to unauthorized access, try to refresh the token
+          return this.handle401Error(request, next);
+        } 
+        // else if (error instanceof HttpErrorResponse && error.status === 403) {
+        //   // If the error is due to unauthorized access, try to refresh the token
+        //  this.router.navigate(['/manage/brands'])
+        // } 
+        return throwError(error);
+      })
+    );
+  }
+
+  private handle401Error(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    if (!this.isRefreshingToken) {
+      this.isRefreshingToken = true;
+      return this.authService.refreshToken().pipe(
+        switchMap((res: any) => {
+          if (res && res.code == 200 && res.data.result) {
+            // Update local storage with the new token
+            localStorage.setItem(this.authlocalStorageToken, JSON.stringify(res.data.result));
+            
+            // Clone the request with the new token
+            request = request.clone({
+              setHeaders: {
+                Authorization: `Bearer ${res.data.result.authenticationToken}`
+              }
+            });
+  
+            // Reset the flag for token refreshing
+            this.isRefreshingToken = false;
+  
+            // Retry the original request with the new token
+            return next.handle(request);
+          } else {
+            // Logout user if refresh token fails
+            this.authService.logout();
+            const keysToKeep = ['data-mismatch-draft'];
+            const valuesToKeep:any = {};
+  
+            keysToKeep.forEach(key => {
+              const value = localStorage.getItem(key);
+              if (value !== null) {
+                valuesToKeep[key] = value;
+              }
+            });
+  
+            localStorage.clear();
+  
+            Object.keys(valuesToKeep).forEach(key => {
+              localStorage.setItem(key, valuesToKeep[key]);
+            }); 
+            this.router.navigate(['/auth/login']);
+            return throwError('Token Expired Please Login Again!');
+          }
+        }),
+        catchError((error) => {
+          // Logout user if refresh token fails
+          this.authService.logout();
+          const keysToKeep = ['data-mismatch-draft'];
+          const valuesToKeep:any = {};
+
+          keysToKeep.forEach(key => {
+            const value = localStorage.getItem(key);
+            if (value !== null) {
+              valuesToKeep[key] = value;
+            }
+          });
+
+          localStorage.clear();
+
+          Object.keys(valuesToKeep).forEach(key => {
+            localStorage.setItem(key, valuesToKeep[key]);
+          }); 
+          
+          this.router.navigate(['/auth/login']);
+          return throwError(error);
+        })
+      );
+    } else {
+      // If already refreshing the token, queue the request and wait
+      return this.tokenRefreshed.pipe(
+        switchMap(() => {
+          const tokens: any = JSON.parse(localStorage.getItem(this.authlocalStorageToken) || '{}');
+          request = request.clone({
+            setHeaders: {
+              Authorization: 'Bearer ' + tokens.authenticationToken
+            }
+          });
+          return next.handle(request);
+        })
+      );
+    }
+  }
+  // intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+  //   const tokenObjStr = this.authService.getCookie(this.authlocalStorageToken);
+  //   let token = '';
+
+  //   if (tokenObjStr) {
+  //     try {
+  //       const tokenObj = JSON.parse(tokenObjStr);
+  //       token = tokenObj?.authenticationToken || '';
+  //     } catch (e) {
+  //       console.error('Invalid auth token format in cookie', e);
+  //     }
+  //   }
+
+  //   if (token) {
+  //     request = request.clone({
+  //       setHeaders: {
+  //         Authorization: 'Bearer ' + token,
+  //       },
+  //     });
+  //   }
+
+  //   return next.handle(request).pipe(
+  //     tap((response: any) => {
+  //       if (response?.body?.data?.result === 'RESTRICTED-IP') {
+  //         this.router.navigateByUrl('/error/403-ip');
+  //       }
+  //     }),
+  //     catchError((error: any) => {
+  //       if (error instanceof HttpErrorResponse && error.status === 401) {
+  //         return this.handle401Error(request, next);
+  //       }
+  //       return throwError(error);
+  //     })
+  //   );
+  // }
+
+  // private handle401Error(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+  //   if (!this.isRefreshingToken) {
+  //     this.isRefreshingToken = true;
+
+  //     return this.authService.refreshToken().pipe(
+  //       switchMap((res: any) => {
+  //         if (res && res.code === 200 && res.data?.result) {
+  //           this.authService.setCookie(this.authlocalStorageToken, JSON.stringify(res.data.result), 1);
+
+  //           const newToken = res.data.result.authenticationToken;
+  //           request = request.clone({
+  //             setHeaders: {
+  //               Authorization: 'Bearer ' + newToken,
+  //             },
+  //           });
+
+  //           this.isRefreshingToken = false;
+  //           return next.handle(request);
+  //         } else {
+  //           return this.forceLogout('Token Expired. Please login again.');
+  //         }
+  //       }),
+  //       catchError((err) => this.forceLogout(err))
+  //     );
+  //   } else {
+  //     // Optional: implement logic to queue and retry if multiple requests during refresh
+  //     return throwError('Token refresh already in progress');
+  //   }
+  // }
+
+  // private forceLogout(message: string): Observable<never> {
+  //   this.authService.logout();
+
+  //   const keysToKeep = ['data-mismatch-draft'];
+  //   const valuesToKeep: any = {};
+
+  //   keysToKeep.forEach((key) => {
+  //     const val = localStorage.getItem(key);
+  //     if (val) valuesToKeep[key] = val;
+  //   });
+
+  //   localStorage.clear();
+
+  //   // Object.entries(valuesToKeep).forEach(([k, v]) => {
+  //   //   return localStorage.setItem(k, v);
+  //   // });
+
+  //   this.authService.deleteCookie(this.authlocalStorageToken);
+  //   this.router.navigate(['/auth/login']);
+  //   return throwError(() => message);
+  // }
+}

package/src/lib/interfaces/global-state.ts

@@ -0,0 +1,6 @@
+export type sampleType =  {
+    firstName:string
+    lastName:string,
+    email:string
+}
+

package/src/lib/modules/common/common-shared.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgxPaginationModule } from 'ngx-pagination';
+import { PaginationComponent } from './pagination/pagination.component';
+import { FiltersComponent } from './filters/filters.component';
+import { CustomSelectComponent } from './custom-select/custom-select.component';
+import { CustomDateFormatPipe } from '../../pipes/customDate.pipe';
+
+
+@NgModule({
+  declarations: [PaginationComponent, FiltersComponent,CustomSelectComponent,CustomDateFormatPipe],
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgxPaginationModule
+  ],
+  exports:[PaginationComponent,FiltersComponent,CustomSelectComponent,CustomDateFormatPipe]
+})
+export class CommonSharedModule { }

package/src/lib/modules/common/custom-select/custom-select.component.html

@@ -0,0 +1,42 @@
+<div class="outer-container">
+    <div [ngClass]="disabled ? 'disable-input':''"  (click)="openDropdown($event)"  class="form-select">
+    <ng-container *ngIf="multi" >
+    {{selectedValues?.length}} {{label}} Selected    
+    </ng-container>
+    <ng-container *ngIf="!multi" >
+        {{selectedValues?.[0]?.[searchField]}}
+    </ng-container>
+    </div>
+    <div [ngClass]="showDropdown ? '' : 'd-none'" class="input-container dropdown" >
+        <div class="w-100 input-wrapper">
+        <input [(ngModel)]="searchValue" placeholder="Search"  (input)="onInput($event)" type="text">  
+        <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+            <path d="M14 14.5L11.1 11.6M12.6667 7.83333C12.6667 10.7789 10.2789 13.1667 7.33333 13.1667C4.38781 13.1667 2 10.7789 2 7.83333C2 4.88781 4.38781 2.5 7.33333 2.5C10.2789 2.5 12.6667 4.88781 12.6667 7.83333Z" stroke="#667085" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>  
+        </div>
+        <ul>
+            <li *ngIf="multi && filteredValues?.length">
+                <label class="form-check" for="selectAll">
+                    <input (change)="onSelectAll($event)" [checked]="checkIfAllSelected()" class="form-check-input me-3" type="checkbox"
+                        id="selectAll">
+                    <span class="form-check-label" >
+                        Select All
+                    </span>
+                </label>
+            </li>
+            <li *ngFor="let item of filteredValues" [ngClass]="item.isSelected && !multi ? 'selected' : ''" >
+                <label [for]="item[idField] + instanceId" [ngClass]="multi  ? '': 'ps-0'" class="form-check">
+                    <input [ngClass]="multi  ? '': 'd-none'" (change)="onSelect($event, item)" [(ngModel)]="item.isSelected" class="form-check-input me-3" type="checkbox" value=""
+                        [id]="item[idField] + instanceId">
+                    <span class="form-check-label" >
+                        {{item[searchField]}}
+                    </span>
+                </label>
+            </li>
+            <li *ngIf="!filteredValues?.length" >
+                <span class="d-flex align-items-center justify-content-center" >No data found</span>
+            </li>
+        </ul>  
+    </div>  
+   
+</div>

package/src/lib/modules/common/custom-select/custom-select.component.scss

@@ -0,0 +1,131 @@
+:host {
+    width: 100%;
+    height: 100%;
+}
+ 
+ 
+.outer-container {
+    // z-index: 1;
+    position: relative;
+    background-color: white;
+ 
+ 
+    .form-select {
+        font-size: 1.1rem;
+        font-weight: 600;
+        border-radius: 8px !important;
+        color: var(--Gray-500, #344054);
+        border: 1px solid var(--Gray-300, #D0D5DD) !important;
+        height: 42.5px;
+    }
+ 
+    .disable-input{
+        pointer-events: none;
+        background-color: #F9FAFB !important;
+    }
+ 
+    .input-container {
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+ 
+        .input-wrapper {
+            padding: 8px 10px;
+            background-color: white;
+            border-top-right-radius: 8px;
+            border-top-left-radius: 8px;
+            border-top: 1px solid rgba(16, 24, 40, 0.08);
+            border-right: 1px solid rgba(16, 24, 40, 0.08);
+            border-left: 1px solid rgba(16, 24, 40, 0.08);
+ 
+ 
+            input {
+                width: 100%;
+                border-radius: 8px;
+                border: 1px solid var(--Gray-300, #D0D5DD);
+                background: var(--White, #FFF);
+                box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+                padding: 10px 14px 10px 30px;
+                outline: none;
+ 
+                ::placeholder {
+                    color: var(--Gray-500, #667085);
+                    font-family: Inter;
+                    font-size: 14px;
+                    font-weight: 500;
+                    line-height: 20px;
+                }
+            }
+ 
+            .search-icon {
+                position: absolute;
+                left: 20px;
+                top: 20px;
+            }
+        }
+ 
+        ul {
+            position: relative;
+            background-color: white;
+            margin: 0;
+            padding: 0;
+            max-height: 200px;
+            min-height: auto;
+            overflow-y: auto;
+            border-bottom-right-radius: 8px;
+            border-bottom-left-radius: 8px;
+            border-bottom: 1px solid rgba(16, 24, 40, 0.08);
+            border-right: 1px solid rgba(16, 24, 40, 0.08);
+            border-left: 1px solid rgba(16, 24, 40, 0.08);
+ 
+            .selected{
+                background: #F9FAFB;
+            }
+ 
+            li {
+                list-style: none;
+                padding: 10px 16px;
+                cursor: pointer;
+ 
+                label{
+                    cursor: pointer;
+                }
+ 
+            }
+ 
+            li:hover{
+                background: #F9FAFB;
+            }
+ 
+        }
+ 
+    }
+ 
+}
+ 
+.form-check {
+    display: flex;
+    align-items: center;
+}
+ 
+.form-check-input {
+    height: 16px;
+    width: 16px;
+    border-radius: 4px;
+    border: 1px solid var(--Primary-600, #00A3FF);
+}
+ 
+.form-check-input:checked {
+    --bs-form-check-bg-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAB4SURBVHgBhY7NDUBQEIRnqcJNKXTg6qYTStCB+Isy6IQSNMDa9SLh5eWZZPcw+81kCX/quABhD73QyKXsGoyIvNCJSto2hEhNtY4N9cwYeMXEsVqB1GaSauRQOpty2tSmO3FgloAmF5nEhgyoesMO6CuFW66fn2xdFyA3ZzcRLrMAAAAASUVORK5CYII=');
+    background-color: #EAF8FF;
+    border-color: #00A3FF;
+}
+ 
+.form-check-label {
+    color: var(--Gray-700, #344054);
+    font-family: Inter;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+}

package/src/lib/modules/common/custom-select/custom-select.component.spec.ts

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