tango-app-ui-manage-tickets 3.7.0-beta.61 → 3.7.0-beta.63

package/src/lib/components/count/count.component.scss

@@ -1,14 +0,0 @@
-.img {
-    width: 95px;
-    height: 200px;
-}
-.item {
-    position: relative;
-    padding-top: 20px;
-    display: inline-block;
-    max-height: 595px;
-}
-.scroll-y{
-    overflow-y: auto !important;
-    position: relative !important;
-}

package/src/lib/components/count/count.component.spec.ts

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

package/src/lib/components/count/count.component.ts

@@ -1,82 +0,0 @@
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { TicketService } from '../../services/ticket.service';
-import { ToastService } from 'tango-app-ui-shared';
-import { ExcelService } from '../../services/excel.service';
-import { Subject, takeUntil } from 'rxjs';
-
-@Component({
-  selector: 'lib-count',
-  templateUrl: './count.component.html',
-  styleUrl: './count.component.scss'
-})
-export class CountComponent implements OnInit,OnDestroy {
-
-  private readonly destroy$ = new Subject();
-  @Input() data:any;
-  loading:any = true;
-  noData:any=false;
-  auditImages:any;
-  
-  constructor(private Service:TicketService,private toast:ToastService,private excel : ExcelService,private cd: ChangeDetectorRef){}
-  ngOnInit(){
-    this.getAuditImages();
-  }
-  
-  ngOnDestroy(): void {
-    this.destroy$.next(true);
-    this.destroy$.complete();
-  }
-  
-  getAuditImages(){
-    let params:any = {
-     fileDate: this.data?.fileDate,
-     storeId:this.data?.storeId,
-     imageType:this.data?.imageType,
-     export : false,
-     moduleType : this.data?.selectedType,
-     zoneName: this.data?.zoneName
-    }
-    this.Service.getAuditImages(params).pipe(takeUntil(this.destroy$)).subscribe({
-      next:(res:any)=>{
-        if(res && res?.code === 200){
-          this.auditImages = res?.data?.result;
-          this.loading = false;
-          this.noData = false;
-        }else{
-          this.noData = true;
-          this.loading = false;
-        }
-        this.cd.detectChanges();
-      },
-      error:(err:any)=>{
-          this.noData = true;
-          this.loading = false;
-      },
-    })
-  
-  }
-  
-  exportTable(){
-    let params:any = {
-       fileDate: this.data?.fileDate,
-       storeId:this.data?.storeId,
-       imageType:this.data?.imageType,
-       export : true,
-       moduleType: this.data?.selectedType,
-       zoneName: this.data?.zoneName
-      }
-      let type = this.data?.type === 'before' ? 'BeforeCount' : 'AfterCount'
-      this.Service.ExportAuditImagesasxlsx(params).pipe(takeUntil(this.destroy$)).subscribe({
-        next:(res:any)=>{
-          if(res){
-            this.excel.saveAsZipFile(res,type)
-          }
-        },
-        error:(err:any)=>{
-           this.toast.getErrorToast(err?.error)
-        },
-      })
-    
-  }
-  
-}

package/src/lib/components/custom-select/custom-select.component.html

@@ -1,134 +0,0 @@
-<div class="outer-container">
-  <!-- TRIGGER -->
-  <div
-    [ngClass]="disabled ? 'disable-input' : ''"
-    class="select-trigger form-select"
-    (click)="openDropdown($event)"
-  >
-    <ng-container *ngIf="multi; else singleMode">
-      <span *ngIf="selectedValues?.length" class="select-value mx-2">
-        <!-- <img class="me-2 trigger-avatar" alt="Pic" src="./assets/tango/Image/users-teams.svg" /> -->
-        {{ selectedValues?.[0]?.[searchField] }}
-      </span>
-      <span class="select-value mx-2" *ngIf="selectedValues?.length > 1">
-        +{{ selectedValues?.length - 1 }}
-      </span>
-      <span  *ngIf="!selectedValues?.length">{{ label  || 'Select' }}</span>
-    </ng-container>
-
-    <ng-template #singleMode>
-      <span *ngIf="selectedValues?.[0]; else placeholderSingle">
-        {{ selectedValues?.[0]?.[searchField] || 'Select' }}
-      </span>
-      <ng-template #placeholderSingle>
-        <span >{{ label || 'Select' }}</span>
-      </ng-template>
-    </ng-template>
-
-
-  </div>
-
-  <!-- DROPDOWN PANEL -->
-  <div
-    class="input-container dropdown"
-    [ngClass]="showDropdown ? '' : 'd-none'"
-    (click)="$event.stopPropagation()"
-  >
-    <!-- Search -->
-    <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>
-      <!-- Select all (multi mode only) -->
-      <li *ngIf="multi && filteredValues?.length">
-        <label class="form-check" [for]="instanceId">
-          <input
-            (change)="onSelectAll($event)"
-            [checked]="checkIfAllSelected()"
-            class="form-check-input me-3"
-            type="checkbox"
-            [id]="instanceId"
-          />
-          <span class="form-check-label"> Select All </span>
-        </label>
-      </li>
-
-      <!-- LIST ITEMS -->
-      <li
-        *ngFor="let item of filteredValues"
-        [ngClass]="item.isSelected && !multi ? 'selected' : ''"
-        (click)="onItemClick(item, $event)"
-      >
-        <!-- multi → checkbox + label ; single → user row (avatar + name + email) -->
-        <ng-container *ngIf="multi; else singleItemTemplate">
-          <label
-            [for]="item[idField] + instanceId"
-            [ngClass]="multi ? '' : 'ps-0'"
-            class="form-check"
-          >
-            <input
-              (change)="onSelect($event, item)"
-              [(ngModel)]="item.isSelected"
-              class="form-check-input me-3"
-              type="checkbox"
-              [id]="item[idField] + instanceId"
-            />
-            <span class="form-check-label">
-              {{ item[searchField] }}
-            </span>
-          </label>
-        </ng-container>
-
-        <ng-template #singleItemTemplate>
-          <div class="user-row">
-            <div class="avatar avatar-text light-primary p-3">
-                                                    {{ getInitialsFromEmail(item.email ||
-                                                    item.email) }}
-                                                </div>
-            <!-- <img
-              class="user-avatar"
-              [src]="item.avatarUrl || './assets/tango/Image/Avatar.svg'"
-              alt="{{ item[searchField] }}"
-            /> -->
-            <div class="user-text">
-              <div class="user-name">
-                {{ item[searchField] }}
-              </div>
-              <div class="user-email">
-                {{ item.email }}
-              </div>
-            </div>
-          </div>
-        </ng-template>
-      </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/components/custom-select/custom-select.component.scss

@@ -1,204 +0,0 @@
-: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;
-}
-
-.select-value{
-    border-radius: 16px !important;
-background: var(--Gray-100, #F2F4F7) !important;
-mix-blend-mode: multiply;
-color: var(--Gray-700, #344054) !important;
-text-align: center;
-font-size: 14px;
-font-style: normal;
-font-weight: 500;
-line-height: 20px;
-padding: 4px 12px 4px 6px;
-}
-
-.user-row {
-  display: flex;
-  align-items: center;
-  padding: 8px 14px;
-  cursor: pointer;
-  border-bottom: 1px solid #f3f4f6;
-}
-
-.user-row:last-child {
-  border-bottom: none;
-}
-
-.user-row:hover {
-  background: #f5f7ff;
-}
-
-.user-avatar {
-  width: 36px;
-  height: 36px;
-  border-radius: 50%;
-  object-fit: cover;
-  margin-right: 10px;
-}
-
-.user-text {
-  display: flex;
-  flex-direction: column;
-}
-
-.user-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #111827;
-}
-
-.user-email {
-  font-size: 12px;
-  color: #6b7280;
-}
-
-.disable-input {
-  pointer-events: none;
-  opacity: 0.6;
-}
-
-
-.avatar {
-  width: 42px;
-  height: 40px;
-  border-radius: 50%;
-  margin-right: 15px;
-  font-size: 14px;
-  color: #1D2939;
-  font-weight: 600;
-}
-
-.light-primary {
-  background: #eaf8ff !important;
-}

package/src/lib/components/custom-select/custom-select.component.spec.ts

@@ -1,23 +0,0 @@
-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();
-  });
-});

package/src/lib/components/custom-select/custom-select.component.ts

@@ -1,189 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
-import { TicketService } from '../../services/ticket.service';
-// import { ManageUsersService } from '../../services-v2/manage-users.service';
- 
-@Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
-  selector: 'team-select',
-  templateUrl: './custom-select.component.html',
-  styleUrl: './custom-select.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class CustomSelectComponent implements OnChanges, OnInit {
- 
-  @HostListener('document:click', ['$event'])
-  onClick(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    if (!target.closest('.dropdown')) {
-      this.showDropdown = false;
-    }
-  }
- 
-  @Input() items: any
-  @Input() searchField: string
-  @Input() multi: boolean
-  @Input() idField: string
-  @Input() selectedValues: any = []
-  @Input() disabled: boolean | undefined
-  @Input() label: string
-  @Output() selected = new EventEmitter<any>()
-  filteredValues: any = []
-  showDropdown: boolean
-  searchValue: string
-  instanceId: any;
- 
- 
-  constructor(private cd: ChangeDetectorRef, private authService:TicketService) { }
-  ngOnInit(): void {
-    this.instanceId = crypto.randomUUID();
-    this.authService.dropDownTrigger.subscribe((e)=>{           
-      if(e !== this.instanceId){        
-        this.showDropdown = false
-        this.cd.detectChanges()
-      }
-    })
-  }
- 
-  ngOnChanges(changes: SimpleChanges): void {
- 
-    if (changes['items'] && this.items?.length) {
-      this.initializeItems();
-    }
-    if (changes['selectedValues'] && Array.isArray(changes['selectedValues']?.currentValue) && changes['selectedValues']?.currentValue?.length > 0 && changes['selectedValues']?.currentValue[0]) {            
-      this.updateSelectedValues();
-    }
-  }
- 
-  initializeItems() {
-    this.filteredValues = this.items.map((item: any) => ({ ...item }));
-    this.updateSelectedValues()
-  }
- 
-  updateSelectedValues() {    
-    this.selectedValues?.forEach((selectedItem: any) => {
-      const item = this.filteredValues?.find((filteredItem: any) => filteredItem?.[this.idField] === selectedItem?.[this.idField]);
-      if (item) {
-        item.isSelected = true;
-      }
-    });
-   
-  }
- 
-  openDropdown(event: any) {
-    this.authService.dropDownTrigger.next(this.instanceId)
-    event.stopPropagation();
-    this.showDropdown = !this.showDropdown;
-  }
- 
-  onInput(event: any) {
-    if (!event.target.value) {
-      this.filteredValues = [...this.items];
-    } else {
-      const searchTerm = event.target.value.toLowerCase();
-      this.filteredValues = this.items.filter((item: any) =>
-        item[this.searchField].toLowerCase().includes(searchTerm)
-      );
-    }
-    this.updateSelectedValues();
-    this.cd.detectChanges();
-  }
- 
-  onSelect(event: any, item: any) {    
-    if (this.multi) {
-      if (event.currentTarget.checked) {
-        this.selectedValues.push(item );        
-      } else {
-        this.selectedValues = this.selectedValues.filter((elem: any) => elem[this.idField] !== item[this.idField]);
-      }
-    } else {
-      this.selectedValues = [{ ...item }];
-      this.filteredValues.forEach((element:any) => {
-        if(element[this.idField] !== item[this.idField]){
-          element.isSelected = false
-        }
-      });
-      this.showDropdown = false;
-    }
- 
-    const valuesToEmit = this.selectedValues.map((value: any) => {
-      const selectedItem = { ...value };
-      delete selectedItem.isSelected;
-      return selectedItem;
-    });
- 
-    this.cd.detectChanges();
-    this.emitSelectedValues(valuesToEmit);
- 
-  }
- 
-  onSelectAll(event: any) {
-    const selectAll = event.currentTarget.checked;
-    this.filteredValues.forEach((item: any) => item.isSelected = selectAll);
- 
-    if (selectAll) {
-      this.selectedValues = [...this.filteredValues];
-    } else {
-      this.selectedValues = [];
-    }
- 
-    const valuesToEmit = this.selectedValues.map((value: any) => {
-      const { isSelected, ...selectedItem } = value;
-      return selectedItem;
-    });
- 
-    this.cd.detectChanges();
-    this.emitSelectedValues(valuesToEmit);
-  }
- 
- 
-  emitSelectedValues(values: any[]) {
-    if (this.multi) {
-      this.selected.emit(values);
-    } else {
-      this.selected.emit(values[0]);
-    }
-  }
- 
-  checkIfAllSelected() {
-    return this.filteredValues.every((item: any) => item.isSelected);
-  }
-  onItemClick(item: any, event: MouseEvent) {
-  event.stopPropagation();
-
-  // For multi-select, row click should not do anything special;
-  // checkbox + onSelect already handle it
-  if (this.multi) {
-    return;
-  }
-
-  // Mark this item as selected so UI highlights it
-  item.isSelected = true;
-
-  // Fake an event with `currentTarget.checked = true`
-  const fakeEvent: any = {
-    currentTarget: {
-      checked: true
-    }
-  };
-
-  // Reuse your existing logic
-  this.onSelect(fakeEvent, item);
-}
-  getInitialsFromEmail(email?: string): string {
-    if (!email) return "";
-
-    // take text before @
-    const namePart = email.split("@")[0];
-
-    // split by . or space (e.g. "sandeep.pal" -> ["sandeep", "pal"])
-    const parts = namePart.split(/[.\s_-]+/).filter(Boolean);
-
-    if (parts.length >= 2) {
-      return (parts[0][0] + parts[1][0]).toUpperCase(); // S + P = SP
-    }
-
-    // fallback: first two chars of whole namePart
-    return namePart.substring(0, 2).toUpperCase();
-  }
-
-}