tango-app-ui-manage-tickets 3.7.0-beta.6 → 3.7.0-beta.60

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

@@ -0,0 +1,14 @@
+.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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,134 @@
+<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

@@ -0,0 +1,204 @@
+: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

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

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

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