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

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

@@ -0,0 +1,176 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { GlobalStateService } from 'tango-app-ui-global';
+import {Subject, takeUntil} from 'rxjs';
+import { TraxService } from '../../services/trax.service';
+import { ToastService } from 'tango-app-ui-shared';
+import { TraxpopupComponent } from '../traxpopup/traxpopup.component';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'lib-managechecklist',
+  templateUrl: './managechecklist.component.html',
+  styleUrl: './managechecklist.component.scss'
+})
+export class ManagechecklistComponent implements OnInit,OnDestroy {
+  type:any;
+  clientId:any;
+  checklistDetails:any;
+  storeCount:any;
+  loading:boolean = false;
+  private detach = new Subject();
+  constructor(private route:ActivatedRoute,private router:Router,private gs:GlobalStateService,private sopService:TraxService,private toast:ToastService,private dialog:NgbModal,private cd:ChangeDetectorRef){
+    this.route.queryParams.subscribe((params:any) => {
+      if(params.type){
+        this.type = params.type;
+      }
+    })
+  }
+
+  ngOnInit(): void {
+    this.gs.dataRangeValue.pipe(takeUntil(this.detach)).subscribe({
+      next:(data:any) => {
+        if(data) {
+          this.clientId = data.client;
+        }
+        else {
+          let data = JSON.parse(localStorage.getItem('header-filters') as string);
+          this.clientId = data?.client;
+        }
+      }
+    });
+    this.route.queryParams.pipe(takeUntil(this.detach)).subscribe({
+      next:(params:any) => {
+          if(params.type == 'ai') {
+            this.getAiDetails();
+          }
+          else {
+            this.getPredefinedDetails();
+          }
+      }
+    })
+  }
+
+  getAiDetails(){
+    this.loading = true;
+    this.sopService.getaichecklist(this.clientId).pipe(takeUntil(this.detach)).subscribe({
+      next:(res:any) => {
+        if(res && res.code == 200 ) {
+          this.loading = false;
+          this.checklistDetails = res.data;
+          this.storeCount = res.data.count
+        }
+        else {
+          this.checklistDetails = [];
+        }
+      }
+    });
+  }
+
+  getPredefinedDetails() {
+    this.loading = true;
+    this.sopService.getpredefinedchecklist(this.clientId).pipe(takeUntil(this.detach)).subscribe({
+      next:(res:any) => {
+        if(res && res.code == 200 && res.data.length) {
+          this.loading = false;
+          this.checklistDetails = res.data;
+        }
+        else {
+          this.checklistDetails = [];
+        }
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.detach.next(true);
+    this.detach.complete();
+  }
+
+  redirectUrl(type:any) {
+    let queryString:any=`type=${type}`;
+    if(this.checklistDetails?.uniformDetection.length && type == 'uniformdetection') {
+      queryString=`checkListId=${this.checklistDetails?.uniformDetection[0]._id}`
+    }
+    if(this.checklistDetails?.mobileUsageDetection.length && type == 'mobileusagedetection') {
+      queryString=`checkListId=${this.checklistDetails?.mobileUsageDetection[0]._id}`
+    }
+    if(this.checklistDetails?.storeOpenClose.length && type == 'storeopenandclose') {
+      queryString=`checkListId=${this.checklistDetails?.storeOpenClose[0]._id}`
+    }
+    this.router.navigateByUrl(`manage/trax/configure?${queryString}`);
+  }
+
+  redirectChecklist(data:any) {
+    let queryString:any=`type=${data.checkListType}`;
+    if(data.checkListType == 'custom') {
+      queryString=`checklistId=${data._id}`
+    }
+    this.router.navigateByUrl(`manage/trax/createChecklist?${queryString}`);
+  }
+
+  redirectToConfigure(data: any) {
+    let queryString:any
+    if (data?.client_id) {
+      queryString =`aicheckListId=${data._id}&disabledQuestion=${data.publish}&type=${data.checkListType}`;
+    } else {
+      queryString = `type=${data.checkListType}`
+    }
+    this.router.navigateByUrl(`manage/trax/configure?${queryString}`);
+  }
+
+  publish(event:any,data:any) {
+    let popupcontent;
+    let htmlContent:any;
+    if(event.target.checked) {
+      popupcontent = {
+        displayprop: false,
+        imagesrc: '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="4" y="4" width="48" height="48" rx="24" fill="#D1FADF"/><path d="M38 27.0818V28.0018C37.9988 30.1582 37.3005 32.2565 36.0093 33.9836C34.7182 35.7108 32.9033 36.9743 30.8354 37.5857C28.7674 38.1971 26.5573 38.1237 24.5345 37.3764C22.5117 36.6291 20.7847 35.2479 19.611 33.4389C18.4373 31.6299 17.8798 29.4899 18.0217 27.3381C18.1636 25.1864 18.9972 23.1381 20.3983 21.4989C21.7994 19.8596 23.6928 18.7172 25.7962 18.242C27.8996 17.7667 30.1003 17.9842 32.07 18.8618M38 20.0018L28 30.0118L25 27.0118" stroke="#039855" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="4" width="48" height="48" rx="24" stroke="#ECFDF3" stroke-width="8"/></svg>',
+        title: `Are you sure you want to publish ‘${data.checkListName}’ checklist?`,
+        content: `Publishing will make this checklist live, and changes will take effect immediately.`,
+        buttontype: 'confirm'
+      }
+      htmlContent= `${data.checkListName} has been published</div>`;
+    }
+    else {
+      popupcontent = {
+        displayprop: false,
+        imagesrc: '<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="4" y="4" width="48" height="48" rx="24" fill="#FEF0C7"/><path d="M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z" stroke="#DC6803" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8"/></svg>',
+        title: `Are you sure you want to unpublish ‘${data.checkListName}’ checklist?`,
+        content: `Unpublishing will remove this checklist immediately, and it will no longer be visible to assigned locations.`,
+        buttontype: 'confirm'
+      }
+      htmlContent= `${data.checkListName} has been unpublished`;
+    }
+    const dialogRef = this.dialog.open(TraxpopupComponent, {
+      centered:true,size:'md' 
+    });
+    dialogRef.componentInstance.data = popupcontent;
+    dialogRef.result.then((res:any) => {
+      if (res == 'confirm') {
+        let params = {
+          ...(data.client_id) ? {checklistId:data._id} : {},
+          type:data.checkListType,
+          clientId:this.clientId,
+          publish:event.target.checked
+        }
+        this.sopService.publish(params).pipe(takeUntil(this.detach)).subscribe({
+          next:(res:any) => {
+            if(res && res.code == 200) {
+              let message = event.target.checked ? 'published' : 'unpublished';
+              this.toast.getSuccessToast(`${data.checkListName} is ${message} successfully.`);
+              this.cd.detectChanges();
+              data.publish = event.target.checked;
+            }
+            else {
+              event.target.checked = data.publish;
+            }
+          }
+        });
+      }
+      else {
+        event.target.checked = data.publish;
+      }
+    });
+  }
+}

package/src/lib/components/multi-chip-dropdown/multi-chip-dropdown.component.html

@@ -0,0 +1,46 @@
+<div class="chip-box">
+    <div *ngIf="assignType !== 'store'" class="outer-container d-flex align-items-center position-relative w-100">
+        <div class="input-container form-control">
+            <ng-container *ngFor="let item of getValues();let i=index">
+                <span class="chip">
+                    <span class="me-3">{{item?.[searchKey[0]] || item?.[searchKey[1]]}}</span>
+                    <span (click)="removeBadge(item,i)"><svg
+                            xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+                            <path d="M9 3L3 9M3 3L9 9" stroke="#667085" stroke-width="1.5" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </svg>
+                    </span>
+                </span>
+            </ng-container>
+            <input style="min-height: 44px;" type="text" class="form-control dropdown-input ps-3 me-3" [(ngModel)]="searchValue" (click)="openDropdown($event)" (change)="onInput($event)" id="searchInput">
+        </div>
+    </div>
+    <div [ngClass]="showDropdown ? '' : 'd-none'" class="input-chip dropdown" >
+        <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[searchKey[0]] || item?.[searchKey[1]]}}
+                    </span>  <span class="badge-value ms-5">
+                        {{item[badgeValue]}}
+                    </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/components/multi-chip-dropdown/multi-chip-dropdown.component.scss

@@ -0,0 +1,181 @@
+:host {
+    width: 100%;
+    height: 100%;
+}
+ 
+ 
+.chip-box {
+    // 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;
+        min-height: 42.5px;
+        max-height: 300px !important;
+    }
+ 
+    .disable-input{
+        pointer-events: none;
+        background-color: #F9FAFB !important;
+    }
+ 
+    .input-chip {
+        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;
+            }
+ 
+        }
+ 
+    }
+ 
+}
+
+.outer-container {
+    position: relative;
+
+    .form-control {
+        padding-top: 0;
+        padding-bottom: 0;
+    }
+
+    .input-container {
+        min-height: auto;
+        max-height: 100px !important;
+        overflow: auto;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+
+        input {
+            all: unset;
+            flex: 1;
+            min-width: 50px;
+        }
+        .chip {
+            border-radius: 20px;
+            margin: 10px 0px 10px 10px;
+            padding: 3px 10px;
+            border-radius: 16px;
+            background: var(--Gray-100, #F2F4F7);
+            color: var(--Gray-700, #344054);
+            font-family: Inter;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 20px;
+        }
+
+        .chip:nth-child(1) {
+            margin-left: 0;
+        }
+    }
+}
+ 
+.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;
+}
+
+.badge-value{
+    // overflow: hidden;
+color: var(--Gray-500, #667085);
+// text-overflow: ellipsis;
+font-size: 12px;
+font-weight: 500;
+line-height: 18px;
+}

package/src/lib/components/multi-chip-dropdown/multi-chip-dropdown.component.spec.ts

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

package/src/lib/components/multi-chip-dropdown/multi-chip-dropdown.component.ts

@@ -0,0 +1,221 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { TraxService } from '../../services/trax.service';
+
+@Component({
+  selector: 'lib-multi-chip-dropdown',
+  templateUrl: './multi-chip-dropdown.component.html',
+  styleUrl: './multi-chip-dropdown.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MultiChipDropdownComponent implements OnInit,OnChanges {
+   @HostListener('document:click', ['$event'])
+   onClick(event: MouseEvent) {
+     const target = event.target as HTMLElement;
+     if (!target.closest('.dropdown')) {
+       this.showDropdown = false;
+       if (!this.showDropdown) {
+        this.searchValue = '';
+       const searchData = '';
+       const searchTerm = searchData.split(',').map((el: any) => el.trim());
+       this.filteredValues = this.items?.filter((item: any) => 
+         this.searchField.some(field => searchTerm.some((term: any) => item[field]?.toLowerCase().includes(term))));
+       this.updateSelectedValues();
+     }
+     }
+   }
+  
+   @Input() items: any
+   @Input() searchField:any[]
+   @Input() multi: boolean
+   @Input() idField: string
+   @Input() selectedValues: any = []
+   @Input() disabled: boolean | undefined
+   @Input() label: string
+  @Input() badgeValue: string
+  @Input() searchKey: any;
+  @Input() assignType: any;
+  selectAll: boolean = false;
+  
+  @Output() selected = new EventEmitter<any>()
+  @Output() removed = 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();
+       this.searchValue = '';
+     }
+ 
+     if (changes['selectedValues'] && this.selectedValues?.length && Array.isArray(changes['selectedValues']?.currentValue)) {  
+       this.emitSelectedValues(this.selectedValues); 
+       this.updateSelectedValues();
+     }
+   }
+  
+   initializeItems() {
+     this.filteredValues = this.items.map((item: any) => ({ ...item }));
+     this.updateSelectedValues()
+   }
+  
+   updateSelectedValues() { 
+     this.filteredValues?.forEach((filteredItem: any) => {
+       filteredItem.isSelected = false;
+     });
+ 
+     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;
+     if (!this.showDropdown) {
+       this.searchValue = '';
+      const searchData = '';
+      const searchTerm = searchData.split(',').map((el: any) => el.trim());
+      this.filteredValues = this.items?.filter((item: any) => 
+        this.searchField.some(field => searchTerm.some((term: any) => item[field]?.toLowerCase().includes(term))));
+      this.updateSelectedValues();
+    }
+  }
+  
+  removeBadge(data:any,index:number) {
+    // this.items.push(data);
+    this.removed.emit([data._id])
+    this.selectedValues = this.selectedValues.reduce((acc: any[], item: any) => {
+      if (item._id !== data._id) {
+          acc.push(item);
+      }
+      return acc;
+  }, []);
+    this.emitSelectedValues(this.selectedValues);
+    this.updateSelectedValues();
+  }
+  
+  onInput(event: any) {
+     if (!event.target.value) {
+       this.filteredValues = [...this.items];
+     } else {
+      const searchData = event?.target?.value.toLowerCase();
+      const searchTerm = searchData.split(',').map((el: any) => el.trim());
+      
+      this.filteredValues = this.items?.filter((item: any) => {
+        return this.searchField.some(field => {
+          return searchTerm.length === 1  
+            ? item[field]?.toLowerCase().includes(searchTerm[0]) // Partial match for a single term
+            : searchTerm.includes(item[field]?.toLowerCase()); // Exact match for multiple terms
+        });
+      });
+     }
+     this.updateSelectedValues();
+    this.cd.detectChanges();
+    // this.searchValue = '';
+   }
+  
+   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]);
+         this.removed.emit([item?._id])
+       }
+     } 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.selectAll = event.currentTarget.checked;
+     this.filteredValues.forEach((item: any) => item.isSelected = selectAll);
+
+     if (selectAll && this.filteredValues) {
+       this.selectedValues = [...this.filteredValues];
+     } else {
+       this.selectedValues = [];
+       this.removed.emit(this.filteredValues.map((item: any) => item?._id))
+     }
+  
+     const valuesToEmit = this.filteredValues.filter((item: any) => item.isSelected == true);
+     this.emitSelectedValues(valuesToEmit);
+     this.cd.detectChanges();
+   }
+  
+  
+   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);
+  }
+
+  getValues(): any[] {
+    // let uniqueKey = this.assignType == 'store' ? 'storeName' : this.assignType == 'user' ? 'userName' : this.assignType == 'cluster' ? 'clusterName' : 'teamName';
+    let uniqueKey = '_id';
+    let data: any = [];
+    if (this.selectedValues?.length) {
+      if(this.selectAll) {
+        this.selectedValues = this.filteredValues.filter((item: any) => item.isSelected == true);
+        // this.emitSelectedValues(this.selectedValues)
+      }
+      data = Array.from(
+          new Map(
+            this.selectedValues.map((item: any) => [
+              item[uniqueKey],
+              {
+                ...(item.storeName ? { storeName: item.storeName } : {}),
+                ...(item.clusterName ? { clusterName: item.clusterName } : {}),
+                ...(item.userName ? { userName: item.userName } : {}),
+                ...(item.teamName ? { teamName: item.teamName } : {}),
+                ...(item._id ? { _id: item._id } : {})
+              }
+            ])
+          ).values()
+      );
+    }
+    return data;
+  }
+  
+}

package/src/lib/components/multi-date-datepicker/multi-date-datepicker.component.html

@@ -0,0 +1,36 @@
+<div class="calendar-container">
+    <div class="calendar">
+        <div class="calendar-header my-3 mx-5">
+            <span class="cursor-pointer" (click)="previousMonth()" [style]="!showPrev() ? {visibility: 'hidden'}:{}"><svg xmlns="http://www.w3.org/2000/svg" width="20"
+                    height="20" viewBox="0 0 20 20" fill="none">
+                    <path d="M12.5 15L7.5 10L12.5 5" stroke="#667085" stroke-width="1.67" stroke-linecap="round"
+                        stroke-linejoin="round" />
+                </svg></span>
+            <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>
+            <span class="cursor-pointer" (click)="nextMonth()" [style]="!showNext() ? {visibility: 'hidden'} : {}"><svg xmlns="http://www.w3.org/2000/svg" width="20"
+                    height="20" viewBox="0 0 20 20" fill="none">
+                    <path d="M7.5 15L12.5 10L7.5 5" stroke="#667085" stroke-width="1.67" stroke-linecap="round"
+                        stroke-linejoin="round" />
+                </svg></span>
+        </div>
+        <div class="calendar-body my-4">
+            <div class="day-names">
+                <div *ngFor="let day of dayNames">{{ day }}</div>
+            </div>
+            <div class="calendar-days">
+                <div *ngFor="let _ of getEmptyDays()" class="empty-day"></div>
+                <div *ngFor="let day of getDaysInMonth()" [class] ="validateDates(day) === true ? 'cursor-pointer' : 'disabled-day'"
+                    [ngClass]="{ 'selected-day': isPredefined(day) }" (click)="validateDates(day) === true ? addPredefinedDays(day) : ''">
+                    {{ day }}
+                </div>
+            </div>
+        </div>
+        <div class="calendar-footer align-self-end">
+            <div class="button ms-2" (click)="applyDate();">
+                <button class="btn btn-primary btn-block w-100 right">
+                    Apply
+                </button>
+            </div>
+        </div>
+    </div>
+</div>