tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/disabled-select/disabled-select.component.scss

@@ -0,0 +1,149 @@
+: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;
+            }
+ 
+        }
+ 
+    }
+ 
+}
+.disabled-dropdown ul, 
+.disabled-dropdown li {
+  pointer-events: none;  /* Prevents clicks */
+//   opacity: 0.5;          /* Makes it look disabled */
+}
+
+.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;
+}

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

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

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

@@ -0,0 +1,146 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { TraxService } from '../../services/trax.service';
+@Component({
+  selector: 'lib-disabled-select',
+  templateUrl: './disabled-select.component.html',
+  styleUrl: './disabled-select.component.scss'
+})
+export class DisabledSelectComponent {
+@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() dropDowndisabled: boolean | undefined
+  @Input() label: string
+  @Output() selected = new EventEmitter<any>()
+  filteredValues: any = []
+  showDropdown: boolean
+  searchValue: string
+  instanceId: any;
+ 
+ 
+  constructor(private cd: ChangeDetectorRef, private authService:TraxService) { }
+  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);
+  }
+}

package/src/lib/components/export-gallery/export-gallery.component.html

@@ -0,0 +1,175 @@
+<div class="card group-delete py-0 scroll">
+    <div class="card-body py-0 d-flex flex-start flex-column p-9 ">
+        <div class="my-5">
+            <div class="symbol symbol-75px symbol-circle">
+                <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="4" y="4" width="48" height="48" rx="24" fill="#DAF1FF" />
+                    <rect x="4" y="4" width="48" height="48" rx="24" stroke="#EAF8FF" stroke-width="8" />
+                    <path
+                        d="M37 31V35C37 35.5304 36.7893 36.0391 36.4142 36.4142C36.0391 36.7893 35.5304 37 35 37H21C20.4696 37 19.9609 36.7893 19.5858 36.4142C19.2107 36.0391 19 35.5304 19 35V31M23 26L28 31M28 31L33 26M28 31V19"
+                        stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </div>
+        </div>
+        <a class="fs-4 text-gray-800 text-hover-primary fw-bold mb-0 title cursor-pointer">{{type}}</a>
+
+        <span *ngIf="type ==='Export as CSV'" class="fw-normal mt-2"><span class="dark-line1">One of your team has
+                requested edit access to your project</span> <span class="dark-line ms-1">Website Design.</span></span>
+        <div *ngIf="type ==='Export as CSV'" class="col-md-12 position-relative mt-3 h-350px">
+            <span style="top: 2%;" class="svg-icon svg-icon-1 position-absolute ms-3">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path
+                        d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                        stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </span>
+            <input class="fx-date-range form-control ps-14 " #dateRangePickerInput
+                style="min-width: 260px !important; z-index: 1050 !important;" type="text" matInput ngxDaterangepickerMd
+                [drops]="'down'" [opens]="'right'" [alwaysShowCalendars]="false" [keepCalendarOpeningWithRange]="true"
+                [showCancel]="false" autocomplete="off" [(ngModel)]="selectedDateRange" (click)="dateheight()"
+                [ngModelOptions]="{standalone: true}" (datesUpdated)="datechange($event)" [autoApply]="true"
+                (startDateChanged)="onStartDateChange($event)" [isCustomDate]="isCustomDate"
+                [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+                name="daterange" [readonly]="true" />
+            <div class="col-md-8 mb-4 mt-4">
+                <div class="select-wrapper">
+                    <div class="placeholder-overlay" *ngIf="this.payload.filtertype==='Clusters'">
+                        Select Stores
+                    </div>
+                    <lib-stores-select *ngIf="this.payload.filtertype==='Clusters'" [items]="storeList"
+                        [disabled]="false" [multi]="true" [searchField]="'storeName'" [idField]="'storeId'"
+                        (selected)="onStoreSelect($event)" [selectedValues]="selectedStore"></lib-stores-select>
+
+                    <div class="placeholder-overlay" *ngIf="this.payload.filtertype==='Teams'">
+                        Select Users
+                    </div>
+                    <lib-stores-select *ngIf="this.payload.filtertype==='Teams'" [items]="userList" [disabled]="false"
+                        [multi]="true" [searchField]="'userName'" [idField]="'userName'"
+                        (selected)="onuserSelect($event)" [selectedValues]="selectedusers"></lib-stores-select>
+
+                </div>
+            </div>
+
+
+
+
+        </div>
+
+        <span *ngIf="type ==='Export as CSV'" [ngClass]="maxdaysReached ? 'flagclour':''"
+            class="dark-line1 fw-normal mt-2">Data downloads are limited to one month at a time.</span>
+        <span *ngIf="type ==='Export as PDF'" class="dark-line1 fw-normal mt-2">This blog post has been published. Team
+            members will be able to edit this post and republish changes.</span>
+        <div *ngIf="type==='Export as PDF'" class="col-md-12  mt-3">
+            <label class="label">Select checklist</label>
+            <select class="form-control">
+                <option><span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                            fill="none">
+                            <path
+                                d="M11.6654 1.66602H4.9987C4.55667 1.66602 4.13275 1.84161 3.82019 2.15417C3.50763 2.46673 3.33203 2.89065 3.33203 3.33268V16.666C3.33203 17.108 3.50763 17.532 3.82019 17.8445C4.13275 18.1571 4.55667 18.3327 4.9987 18.3327H14.9987C15.4407 18.3327 15.8646 18.1571 16.1772 17.8445C16.4898 17.532 16.6654 17.108 16.6654 16.666V6.66602M11.6654 1.66602L16.6654 6.66602M11.6654 1.66602V6.66602H16.6654M13.332 10.8327H6.66536M13.332 14.166H6.66536M8.33203 7.49935H6.66536"
+                                stroke="#667085" stroke-width="1.66667" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </svg></span>Store Operation checklist</option>
+            </select>
+        </div>
+        <div *ngIf="type==='Export as PDF'" class="col-md-12  mt-3">
+            <label class="label">Select Store</label>
+            <select class="form-control">
+                <option></option>
+            </select>
+        </div>
+
+        <div *ngIf="type==='Export as PDF'" class="col-md-12 position-relative mt-5">
+            <span style="top: 20%;" class="svg-icon svg-icon-1 position-absolute ms-3">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                    <path
+                        d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                        stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+            </span>
+            <input class="fx-date-range form-control ps-14" #dateRangePickerInput
+                style="min-width: 260px !important; z-index: 1050 !important;" type="text" matInput ngxDaterangepickerMd
+                [drops]="'down'" [singleDatePicker]="true" [opens]="'right'" [alwaysShowCalendars]="false"
+                [keepCalendarOpeningWithRange]="true" [showCancel]="false" autocomplete="off"
+                [(ngModel)]="selectedDateRange" [ngModelOptions]="{standalone: true}"
+                (datesUpdated)="datechange($event)" [autoApply]="true" (startDateChanged)="onStartDateChange($event)"
+                [isCustomDate]="isCustomDate"
+                [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+                name="daterange" [readonly]="true" />
+            <span class="sub-title fw-normal mt-2">Only 1 day data can be downloaded</span>
+        </div>
+        <div *ngIf="type==='Export as PPT'||type==='Export as ZIP'">
+
+            <div class="d-flex flex-wrap mt-5">
+                <div class="border rounded min-w-200px cursor-pointer py-3 px-4 me-6 mb-3"
+                    [ngClass]="previewType === 'image' ? 'nav-line-tabs1' : 'border-gray-300'"
+                    (click)="onSelect('image')">
+                    <div class="d-flex align-items-center mb-5">
+                        <svg *ngIf="previewType === 'image'" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                            viewBox="0 0 24 24" fill="none">
+                            <path
+                                d="M5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21ZM5 21L16 10L21 15M10 8.5C10 9.32843 9.32843 10 8.5 10C7.67157 10 7 9.32843 7 8.5C7 7.67157 7.67157 7 8.5 7C9.32843 7 10 7.67157 10 8.5Z"
+                                stroke="#009BF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                        <svg *ngIf="previewType === 'video'" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                            viewBox="0 0 24 24" fill="none">
+                            <path
+                                d="M5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21ZM5 21L16 10L21 15M10 8.5C10 9.32843 9.32843 10 8.5 10C7.67157 10 7 9.32843 7 8.5C7 7.67157 7.67157 7 8.5 7C9.32843 7 10 7.67157 10 8.5Z"
+                                stroke="#101828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </div>
+                    <div [ngClass]="previewType === 'image' ? 'text-border-priamry' : 'textvalue'">Image</div>
+                </div>
+                <div class="border rounded min-w-200px cursor-pointer py-3 px-4  mb-3"
+                    [ngClass]="previewType === 'video' ? 'nav-line-tabs1' : 'border-gray-300'"
+                    (click)="onSelect('video')">
+                    <div class="d-flex align-items-center mb-5">
+                        <svg *ngIf="previewType === 'image'" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                            viewBox="0 0 24 24" fill="none">
+                            <path
+                                d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+                                stroke="#101828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M10 8L16 12L10 16V8Z" stroke="#101828" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </svg>
+                        <svg *ngIf="previewType === 'video'" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                            viewBox="0 0 24 24" fill="none">
+                            <path
+                                d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
+                                stroke="#009BF3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            <path d="M10 8L16 12L10 16V8Z" stroke="#009BF3" stroke-width="2" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </svg>
+                    </div>
+                    <div [ngClass]="previewType === 'video' ? 'text-border-priamry' : 'textvalue'">Video</div>
+                </div>
+
+            </div>
+            <!-- <label for="dropdown" class="m-4 fs-4">Choose an option: </label> -->
+            <!-- <select id="dropdown" class="form-control" [(ngModel)]="previewType" (change)="onSelect($event)">
+              <option [value]="'image'">Image</option>
+              <option [value]="'video'">Video</option>
+            </select> -->
+        </div>
+        <div *ngIf="type ==='Export as CSV'" class="row w-100">
+            <div class="col-md-8"></div>
+            <div class="col-md-4 mt-2 text-end">
+                <div role="group" class="d-flex mt-3 mb-15">
+                    <button class="btn btn-outline w-100 me-2" (click)="cancel()">Cancel</button>
+                    <button id="alert-toast" class="btn btn-primary w-100 ms-2" [disabled]="maxdaysReached||getstore"
+                        (click)="onSubmit()">Confirm</button>
+                </div>
+
+            </div>
+        </div>
+        <div *ngIf="type !=='Export as CSV'" class="mt-2 w-100 text-end">
+
+            <div role="group" class="d-flex mt-3 mb-15">
+                <button class="btn btn-outline w-100 me-2" (click)="cancel()">Cancel</button>
+                <button id="alert-toast" class="btn btn-primary w-100 ms-2" [disabled]="maxdaysReached||getstore"
+                    (click)="onSubmit()">Confirm</button>
+            </div>
+
+        </div>
+
+    </div>
+</div>