tango-app-ui-manage-tickets 3.7.0-beta.7 → 3.7.0-beta.70

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

@@ -0,0 +1,54 @@
+<div class="card">
+    <div class="card-header">
+        <div class="card-title d-grid">
+            <div *ngIf="data?.type" class="card-label">{{data?.type | titlecase}} Count - {{data?.storeId}}</div>
+            <div class="text-sub">{{data?.fileDate | customDateFormat}}</div>
+        </div>
+    <div class="card-toolbar">
+        <button *ngIf="!noData" type="button" (click)="exportTable()"
+            class="btn btn-default mx-2 btn-outline btn-outline-default rounded-3 text-nowrap border-val"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <path d="M17.5 12.5V15.8333C17.5 16.2754 17.3244 16.6993 17.0118 17.0118C16.6993 17.3244 16.2754 17.5 15.8333 17.5H4.16667C3.72464 17.5 3.30072 17.3244 2.98816 17.0118C2.67559 16.6993 2.5 16.2754 2.5 15.8333V12.5M14.1667 6.66667L10 2.5M10 2.5L5.83333 6.66667M10 2.5V12.5" stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            <span class="ms-2">Export</span> </button>
+    </div>
+    </div>
+    <div class="card-body">
+        <div class="row mx-3">
+            <div class="col-md-12 item scroll-y">
+                <div class="item" *ngFor="let images of auditImages;let i=index" style="padding: 10px;">
+                    <img class="mx-3 my-3 img" [src]="images?.imgPath">
+                    <div class="text-center m-0 fs-7 fw-bold">{{images?.imgName}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <ng-container *ngIf="loading">
+        <div class="row loader  d-flex justify-content-center align-items-center">
+            <div class="shimmer">
+                <div class="wrapper">
+                  <div class="stroke animate title"></div>
+                  <div class="stroke animate link"></div>
+                  <div class="stroke animate description"></div>
+                </div>
+              </div>
+              <div class="shimmer">
+                <div class="wrapper">
+                  <div class="stroke animate title"></div>
+                  <div class="stroke animate link"></div>
+                  <div class="stroke animate description"></div>
+                </div>
+              </div>               
+        </div>
+    </ng-container>
+    <ng-container *ngIf="noData">
+        <div class="row">
+            <div class="col-lg-12 mb-3">
+                <div class="card-body d-flex justify-content-center align-items-center flex-column">
+                    <img class="img-src w-25" src="./assets/tango/Icons/Nodata.svg" alt="">
+                </div>
+            </div>
+        </div>
+    </ng-container>
+</div>
+

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