@annalib/anna-core 0.0.2 → 0.0.3

package/src/lib/anna-generic-table-lib/components/anna-non-editable-generic-table/anna-non-editable-generic-table.component.ts

@@ -0,0 +1,1100 @@
+
+// Angular import statements
+import { Component, OnInit, Input, ViewChildren, QueryList, Output, EventEmitter, SimpleChanges, OnChanges, ChangeDetectorRef } from '@angular/core';
+
+// Third party import statements
+import moment from "moment";
+import { NgbDate } from '@ng-bootstrap/ng-bootstrap';
+import { Options } from '@angular-slider/ngx-slider';
+import { cloneDeep, isEqual, map, uniq } from "lodash-es";
+
+// User defined import statements
+import { AnnaSortComponent } from '../anna-sort/anna-sort.component';
+
+//sub-entries of anna lib import statement
+import { SellerGroupHierarchy,IWeekCalendar,radioButtonModel,AnnaSortService,AnnaDateTimeFormatService, NgbDateType, AnnaFilterService, IGtGeneralConfig, IGtTableHeader, ITotalRowInfo, AnnaGenericTableService } from  "@annalib/anna-core/src/lib/anna-core-shared-lib";
+
+
+@Component({
+  selector: 'anna-core-non-editable-generic-table-lib',
+  templateUrl: './anna-non-editable-generic-table.component.html',
+  styleUrls: ['./anna-non-editable-generic-table.component.scss']
+})
+export class AnnaNonEditableGenericTableComponent implements OnInit, OnChanges {
+
+  @Input() showSkeletonLoading: boolean;
+  @Input() tableHeaders: IGtTableHeader[];
+  @Input() tableData: any[];
+  @Input() clonedTableData: any[];
+  @Input() numberOfSkeletonRows: number[]; //this is not being used.
+  @Input() numberOfSkeletonColumns: number[][];
+  @Input() gtGeneralConfig: IGtGeneralConfig;
+  @Input() totalRowInfo?: ITotalRowInfo[];
+  @Input() gtDimension: { rowHeight: number, tableHeight: string, headerHeight: number };
+  @Input() tableClass: string;
+  @Input() maximumRowsWhichCanBeRenderedWithoutScroll: number = 5;
+
+  @Output() toggleCheckbox = new EventEmitter();
+  @Output() toggleRowCheckbox = new EventEmitter();
+  @Output() toggleHeaderCheckbox = new EventEmitter();
+  @Output() undoIconClicked = new EventEmitter();
+  @Output() filterAppliedToTable = new EventEmitter();
+  @Output() sortingAppliedToTable = new EventEmitter();
+  @Output() rowClicked = new EventEmitter();
+  @Output() radioButtonSelected = new EventEmitter();
+  @Output() columnFilterOpened = new EventEmitter();
+  @Output() columnFilterClosed = new EventEmitter();
+  @Output() gtIconClicked = new EventEmitter();
+  @Output() gtSVGIconClicked = new EventEmitter();
+  @Output() gtTextActionClicked = new EventEmitter();
+  @Output() gtViewDetailClicked = new EventEmitter();
+
+
+  tableDataWrapper: any[];
+  rowChecked: boolean;
+  isAllRowsChecked: boolean;
+  noDataWidth: string = "55%";
+  markedForCreditStatus: string;
+  markedForMGStatus: string;
+
+  //Sort and Filter
+  toolTipdata: any;
+  tempTooltipData: any;
+  tooltipRadioTextMap: Map<any, any>;
+  radioButtons: any[];
+  tooltip: any;
+  clonedTooltipData: any;
+  clonedTooltipSelectedMapData: any;
+  searchBar: string;
+  disableClearAllBtn: boolean = true;
+  disableColumnClearAllBtn: boolean = true;
+  allSelected = 0;
+  showAll: boolean;
+  disableCheckboxApply: boolean;
+  disableSliderApplyButton: boolean;
+  disableTimeApplyButton: boolean;
+
+  // Slider Filter
+  sliderMinValue: number;
+  sliderMaxValue: number;
+  options: Options = {
+    floor: 0,
+    ceil: 0,
+    step: 0.1
+  };
+  sliderValue: { min: number, max: number };
+  sliderFilterTextBoxStep: string;
+
+  // Calendar Filter
+  calendarMinEnabledDate: NgbDateType;
+  calendarMaxEnabledDate: NgbDateType;
+  selectedMinDate: NgbDateType;
+  selectedMaxDate: NgbDateType;
+
+  //Week Filter
+  multiWeekPickerConfig: IWeekCalendar;
+
+  //Time Filter
+  selectedFromTime: any[];
+  selectedToTime: any[];
+  clonedSelectedFromTime: any;
+  clonedSelectedToTime: any;
+  disableTimeFilterApplyBtn: boolean;
+  tableColumns: string[] = [];
+  totalRowColumns: string[] = null;
+  showMultiTimeCheckbox: boolean;
+  showZeroTimeCheckbox: boolean;
+  showEnterTimeCheckbox: boolean;
+  multiTimeCheckboxChecked: boolean;
+  zeroTimeCheckboxChecked: boolean;
+  enterTimeCheckboxChecked: boolean;
+  bindValueFuncCalled: boolean;
+
+  hierarchyTooltip: { open: () => void; close: () => void; };
+  sellerGroupHierarchy: SellerGroupHierarchy[];
+  showCheckboxFilterRadioButtons: boolean;
+
+  @ViewChildren(AnnaSortComponent) sortComponent: QueryList<AnnaSortComponent>;
+  isScrolledLeft: boolean = false;
+  rowBorderWidth: number = 2;
+  PfpIconActiveColor = "#9B1B93"
+  PfpIconDisableColor = "rgba(189,189,189,0.5)";
+
+  constructor(
+    private cdRef: ChangeDetectorRef,
+    private annaSortService: AnnaSortService,
+    public annaDateTimeFormatService: AnnaDateTimeFormatService,
+    public annaFilterService: AnnaFilterService,
+    private annaGenericTableService: AnnaGenericTableService
+  ) {
+    this.setTooltipRadioNames();
+  }
+
+  ngOnInit() {
+    // this.tableData = this.numberOfSkeletonColumns;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    // console.log("generic");
+    // console.log(this.tableHeaders);
+    // console.log(JSON.stringify(this.tableData));
+    if (this.showSkeletonLoading) {
+      this.tableData = this.numberOfSkeletonColumns;
+    }
+    else {
+      this.setInitialValueMapData();
+      this.disableEnableEachColumnFilters();
+      this.tableColumns = this.tableHeaders.filter(x => x.visible).map(x => x.headerInfo[0].objectKey);
+      this.showSkeletonLoading = false;
+    }
+
+    //setting table column here as well because while showing skeleton loader, we should show table headers.
+    if (changes['tableHeaders'] && changes['tableHeaders'].currentValue) {
+      this.tableColumns = this.tableHeaders.filter(x => x.visible).map(x => x.headerInfo[0].objectKey)
+    }
+
+    if (changes['totalRowInfo'] && changes['totalRowInfo'].currentValue) {
+      this.totalRowColumns = this.totalRowInfo.map(x => x.colName);
+    }
+    this.cdRef.detectChanges();
+  }
+
+
+  trackByFn(index: number) {
+    return index;
+  }
+
+  setTooltipRadioNames() {
+    this.tooltipRadioTextMap = new Map();
+    this.tooltipRadioTextMap.set("StartTimeForFilter", "Start Time");
+    this.tooltipRadioTextMap.set("EndTimeForFilter", "End Time");
+    this.tooltipRadioTextMap.set("start_time_for_filter", "Start Time");
+    this.tooltipRadioTextMap.set("end_time_for_filter", "End Time");
+    this.tooltipRadioTextMap.set("primaryAEName", "Primary AE");
+    this.tooltipRadioTextMap.set("region", "Region");
+    this.tooltipRadioTextMap.set("agencyName", "Agency");
+    this.tooltipRadioTextMap.set("location", "Location");
+    this.tooltipRadioTextMap.set("advertiserName", "Advertiser");
+    this.tooltipRadioTextMap.set("productCode", "Product Code");
+    this.tooltipRadioTextMap.set("flightStartDate", "Start Date");
+    this.tooltipRadioTextMap.set("flightEndDate", "End Date");
+    this.tooltipRadioTextMap.set("orderIdAndRevNumber", "STN Order#-Rev#");
+    this.tooltipRadioTextMap.set("alternateOrderId", "Buyer Order#");
+    this.tooltipRadioTextMap.set("grp", "GRP");
+    this.tooltipRadioTextMap.set("cpp", "CPP");
+    this.tooltipRadioTextMap.set("imps", "IMPS");
+    this.tooltipRadioTextMap.set("cpm", "CPM");
+    this.tooltipRadioTextMap.set("offeredMGs", "Offered MG");
+    this.tooltipRadioTextMap.set("outstandingPE", "O/S PE");
+    this.tooltipRadioTextMap.set("offeredADUs", "Offered ADUs");
+    this.tooltipRadioTextMap.set("udDeficitValue", "Pending Audience Delta");
+    this.tooltipRadioTextMap.set("startEndTimeMulti", "Time");
+    this.tooltipRadioTextMap.set("bookedValue", "Booked");
+    this.tooltipRadioTextMap.set("bookedSpots", "Spots");
+    this.tooltipRadioTextMap.set("userChanges", "Other changes");
+    this.tooltipRadioTextMap.set("inventoryCode", "Inventory Code");
+    this.tooltipRadioTextMap.set("program", "Program");
+    this.tooltipRadioTextMap.set("agency", "Agency");
+    this.tooltipRadioTextMap.set("advertiser", "Advertiser");
+    this.tooltipRadioTextMap.set("startDate", "Start Date");
+    this.tooltipRadioTextMap.set("endDate", "End Date");
+    this.tooltipRadioTextMap.set("rcvPreempt", "Madegood PE");
+    this.tooltipRadioTextMap.set("osPreempt", "O/S PE");
+    this.tooltipRadioTextMap.set("rcvUnderDly", "Recovered UD");
+    this.tooltipRadioTextMap.set("osUnderDly", "O/s Under Dly");
+    this.tooltipRadioTextMap.set("primaryAe", "Primary AE");
+    this.tooltipRadioTextMap.set("region", "Region");
+    this.tooltipRadioTextMap.set("revCode1", "Rev code 1");
+    this.tooltipRadioTextMap.set("orderNoRevNo", "STN Order#-Rev#");
+    this.tooltipRadioTextMap.set("revCode2", "Rev code 2");
+    this.tooltipRadioTextMap.set("revCode3", "Rev code 3");
+    this.tooltipRadioTextMap.set("booked", "Booked");
+    this.tooltipRadioTextMap.set("spots", "Spots");
+    this.tooltipRadioTextMap.set("postedAudPercent", "Posted %");
+    this.tooltipRadioTextMap.set("revision", "Revision");
+    this.tooltipRadioTextMap.set("productCode", "Product Code");
+    this.tooltipRadioTextMap.set("buyerOrderId", "ALT Order#");
+    this.tooltipRadioTextMap.set("demo","Demo");
+    this.tooltipRadioTextMap.set("postedAdu","Posted ADUs");
+    this.tooltipRadioTextMap.set("scheduledAdu","Scheduled ADUs");
+    this.tooltipRadioTextMap.set("audienceDeficit","Audience Deficit");
+    this.tooltipRadioTextMap.set("postedAudPercent","Posted Audience %");
+  }
+
+  generateTableDataWrapper() {
+    this.showSkeletonLoading = true;
+    this.tableDataWrapper = [];
+    let rowObject: any;
+    let columnName: string;
+    let columnObject: { [x: string]: any; };
+    let columnObjectKey;
+    let keysUsedForTableDisplay: string[];
+    let keysUsedForColumn: string[];
+    let additionalInfoObject: { [x: string]: any; };
+    let additionalKeys;
+    this.tableData.forEach((obj: { [x: string]: any; }) => {
+      rowObject = {};
+      keysUsedForTableDisplay = [];
+      for (var colNum in this.tableHeaders) {
+        columnObject = {};
+        if (!this.tableHeaders[colNum].visible) {
+          continue;
+        }
+        columnName = "";
+        keysUsedForColumn = [];
+        this.tableHeaders[colNum].headerInfo.forEach((header) => {
+          if (header.typeOfBodyData === "STRING") {
+            columnObjectKey = header.objectKey;
+            columnObject[columnObjectKey] = obj[columnObjectKey];
+            keysUsedForTableDisplay.push(columnObjectKey);
+            keysUsedForColumn.push(columnObjectKey);
+          }
+          else if (header.typeOfBodyData === "ICON") {
+            columnObjectKey = header.typeOfBodyData;
+            columnObject[columnObjectKey] = obj[header.objectKey];
+            keysUsedForColumn.push(header.objectKey);
+          }
+          else if (header.typeOfBodyData === "CHECKBOX") {
+            columnObjectKey = header.typeOfBodyData;
+            columnObject[columnObjectKey] = obj[header.objectKey];
+            keysUsedForColumn.push(header.objectKey);
+          }
+        })
+        for (var i = 0; i < keysUsedForColumn.length; i++) {
+          columnName += keysUsedForColumn[i];
+          if (i !== keysUsedForColumn.length - 1) {
+            columnName += ',';
+          }
+        }
+        rowObject[columnName] = columnObject;
+      }
+      additionalInfoObject = {};
+      additionalKeys = Object.keys(obj).filter(key => !keysUsedForTableDisplay.includes(key));
+      additionalKeys.forEach(key => {
+        additionalInfoObject[key] = obj[key];
+      })
+      rowObject.AdditionalInfo = additionalInfoObject;
+      this.tableDataWrapper.push(rowObject);
+    })
+    this.tableData = this.tableDataWrapper;
+    this.showSkeletonLoading = false;
+    // console.log(JSON.stringify(this.tableDataWrapper));
+  }
+
+
+  selectOrUnselectCheckbox(rowData: any, columnKeys: any, isCheckboxSelected: any) {
+    this.toggleCheckbox.emit({ rowData, columnKeys, isCheckboxSelected });
+  }
+
+  selectUnselectAllRows() {
+    this.toggleHeaderCheckbox.emit();
+  }
+
+  selectUnselectRow(rowData: any) {
+    this.toggleRowCheckbox.emit(rowData);
+  }
+
+  undoCreditedSpot(data: any) {
+    this.undoIconClicked.emit({ data, mgOrCredit: "Credit" });
+  }
+
+  undoMgSpot(data: any) {
+    this.undoIconClicked.emit({ data, mgOrCredit: "MakeGood" });
+  }
+
+  //Sort and Filter Logic begins!
+  closeTooltip() {
+    if (this.tooltip && this.tooltip.isOpen()) {
+      this.tooltip.close();
+    }
+    this.tooltip = null;
+    this.disableCheckboxApply = false;
+    if (!this.bindValueFuncCalled) {
+      this.columnFilterClosed.emit();
+    }
+  }
+
+  closeSortTooltip() {
+    if (this.annaSortService.tooltip && this.annaSortService.tooltip.isOpen()) {
+      this.annaSortService.tooltip.close();
+    }
+  }
+
+  initFilters() {
+    this.annaFilterService.tooltipMap = new Map();
+    this.annaFilterService.tooltipSelectedMap = new Map();
+    this.annaSortService.sortByAsc = new Map();
+    this.annaSortService.sortByDesc = new Map();
+    this.annaFilterService.selectedRadio = null;
+    this.annaFilterService.appliedFiltersArray = [];
+    //closing the sort tooltip if we route on the same route or if we click dropdown filters
+    this.closeSortTooltip();
+    this.annaSortService.tooltip = null;
+    this.disableClearAllBtn = true;
+    this.disableTimeFilterApplyBtn = false;
+  }
+
+  setInitialValueMapData() {
+    this.annaFilterService.initialValueMap = new Map();
+    this.tableHeaders.forEach((column) => {
+      column.headerInfo.forEach((header) => {
+        if (header.filter === "SLIDER") {
+          header.filterObjectKeys.forEach((key) => {
+            let min = this.annaFilterService.returnMaxAndMinValue(this.clonedTableData, key, true);
+            let max = this.annaFilterService.returnMaxAndMinValue(this.clonedTableData, key, false);
+            let obj = { min, max };
+
+            this.annaFilterService.initialValueMap.set(key, obj);
+          })
+        }
+        else if (header.filter === "DATE") {
+          header.filterObjectKeys.forEach((key) => {
+            if(key == "period"){
+            const minMaxStartDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, "startDate");
+            const minMaxEndDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, "endDate");
+            let dateObj = { minSelectedDate: minMaxStartDate[0], maxSelectedDate: minMaxEndDate[1] };
+            this.annaFilterService.initialValueMap.set(key, dateObj);      
+          }
+          else{
+            const minMaxDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, key);
+            let obj = { minSelectedDate: minMaxDate[0], maxSelectedDate: minMaxDate[1] };
+            this.annaFilterService.initialValueMap.set(key, obj);
+          }
+          })
+        }
+        else if (header.filter === "TIME") {
+          header.filterObjectKeys.forEach((key) => {
+            let data = this.clonedTableData.filter((obj: { [x: string]: string; }) => !["", "-", null, "0", "<multi>"].includes(obj[key]));
+            let timeArr = map(data, key);
+            timeArr.sort((a, b) => {
+              return this.annaDateTimeFormatService.sortByTimeAscending(a, b);
+            });
+            let obj = {
+              fromTime: timeArr[0],
+              toTime: timeArr[timeArr.length - 1],
+            };
+            if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP") {
+              let includeMulti = this.clonedTableData.findIndex((obj: { [x: string]: string; }) => obj[key] == "<multi>") != -1;
+              let includeZero = this.clonedTableData.findIndex((obj: { [x: string]: string; }) => obj[key] == "0") != -1;
+              let includeTimeRange = this.clonedTableData.findIndex((obj: { [x: string]: string; }) => obj[key] != "0" && obj[key] != "<multi>") != -1;
+              let obj = {
+                fromTime: timeArr[0],
+                toTime: timeArr[timeArr.length - 1],
+                includeMulti: includeMulti,
+                includeZero: includeZero,
+                includeTimeRange: includeTimeRange
+              };
+              this.annaFilterService.initialValueMap.set(key, obj);
+            }
+            else if (this.gtGeneralConfig.component === "RATING") {
+              let includeMulti = this.clonedTableData.findIndex((obj: any) => obj[key][0] == "<multi>") != -1;
+              let includeZero = this.clonedTableData.findIndex((obj: { [x: string]: string[]; }) => obj[key][0] == "0") != -1;
+              let includeTimeRange = this.clonedTableData.findIndex((obj: { [x: string]: string[]; }) => obj[key][0] != "0" && obj[key][0] != "<multi>") != -1;
+
+              let startTimeArr = map(this.clonedTableData, "startTime");
+              let endTimeArr = map(this.clonedTableData, "endTime");
+
+              startTimeArr.sort((a, b) => {
+                return this.annaDateTimeFormatService.sortByTimeAscending(a, b);
+              });
+
+              endTimeArr.sort((a, b) => {
+                return this.annaDateTimeFormatService.sortByTimeDescending(a, b);
+              });
+
+              let obj = {
+                fromTime: startTimeArr[0],
+                toTime: endTimeArr[0],
+                includeMulti: includeMulti,
+                includeZero: includeZero,
+                includeTimeRange: includeTimeRange
+              };
+              this.annaFilterService.initialValueMap.set(key, obj);
+
+            }
+            else {
+              this.annaFilterService.initialValueMap.set(key, obj);
+            }
+          })
+        }
+      })
+    })
+  }
+
+  isTooltipActive(header: any[]) {
+    return this.annaFilterService.isTooltipActive(header);
+  }
+
+  bindTheValueToToolTip(tooltip: any, header: any[]) {
+
+    this.bindValueFuncCalled = true;
+    let containerToScroll;
+    if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "DRRLISTING") {
+      containerToScroll = document.getElementsByClassName("scrollable-container")[0];
+      var mediaQuery = window.matchMedia("(max-width: 1366px)");
+      if (mediaQuery.matches) {
+        containerToScroll.scroll(0, this.gtGeneralConfig.verticalScrollOffsetForFilterTooltip);
+      }
+    }
+    // if same tooltip opened close it
+    if (tooltip == this.tooltip) {
+      this.bindValueFuncCalled = false;
+      this.closeTooltip();
+    }
+    else {
+      this.searchBar = '';
+      let enabledHeaders: any[] = [];
+      header.forEach((item: string | number) => {
+        if(item == "period"){
+            let uniqStartDate = uniq(this.tableData.map((u: { [x: string]: any; }) => u["startDate"]));
+            let uniqEndDate = uniq(this.tableData.map((u:{ [x: string]: any; }) => u["endDate"]));
+            if(uniqStartDate.length > 1 || uniqEndDate.length > 1 || this.isTooltipActive([item])){
+              enabledHeaders.push(item);
+            }
+        }
+        else if(uniq(this.tableData.map((u:{ [x: string]: any; }) => u[item])).length > 1 || this.isTooltipActive([item])){
+            enabledHeaders.push(item);
+        }
+      });
+      this.openTooltip(tooltip, enabledHeaders);
+      if (window.innerWidth < 1500 && window.innerHeight < 768 && !this.annaFilterService.sliderSet.has(header[0])) {
+        this.columnFilterOpened.emit();
+      }
+
+      this.showCheckboxFilterRadioButtons = enabledHeaders.length > 1;
+
+      this.populateTooltipDataBasedOnSelectedRadio(enabledHeaders[0]);
+      this.bindValueFuncCalled = false;
+    }
+  }
+
+  openTooltip(tooltip: any, header: any[]) {
+    this.closeTooltip();
+    this.tooltip = tooltip;
+    this.tooltip.open();
+    //convert key into the header
+    this.radioButtons = header.map((key: any) => {
+      let value = this.tooltipRadioTextMap.has(key)
+        ? this.tooltipRadioTextMap.get(key)
+        : key; //change to display name
+      return new radioButtonModel(key, value);
+    });
+  }
+
+  clearColumnFilter() {
+    this.annaFilterService.clearColumnFilter();
+    this.toolTipdata = null;
+    this.tempTooltipData = null;
+    this.closeTooltip();
+    this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+    this.checkIfSortingIsApplied();
+    this.filterAppliedToTable.emit(this.tableData);
+    this.disableEnableEachColumnFilters();
+  }
+
+  populateTooltipDataBasedOnSelectedRadio(header: string) {
+
+    this.disableSliderApplyButton = false;
+    this.disableCheckboxApply = false;
+    if (this.toolTipdata) {
+      this.revert();
+    }
+
+    this.annaFilterService.selectedRadio = header;
+    let selectedFilterSet = new Set(this.annaFilterService.appliedFiltersArray);
+    this.disableColumnClearAllBtn = selectedFilterSet.has(this.annaFilterService.selectedRadio) ? false : true;
+    if (this.annaFilterService.calendarSet.has(header)) {
+      this.getCalendarData();
+    } else if (this.annaFilterService.sliderSet.has(header)) {
+      this.getSliderData(header);
+    } else if (this.annaFilterService.timeSet.has(header)) {
+      this.getTimeFilterData(header);
+    } else {
+      this.getCheckboxData(header);
+    }
+  }
+
+  getSliderData(header: string) {
+
+    if (header === "Rate") {
+      this.annaFilterService.translateFunc = "currency";
+    }
+    else {
+      this.annaFilterService.translateFunc = "normal";
+    }
+    this.options = this.annaFilterService.populateSliderTooltip(this.clonedTableData, this.tableData);
+
+    this.disableSliderApplyButton = this.disableSliderApplyBtn();
+    let selectedTooltipObj;
+    if (this.annaFilterService.tooltipSelectedMap.has(header)) {
+      selectedTooltipObj = this.annaFilterService.tooltipSelectedMap.get(header);
+    }
+    else {
+      selectedTooltipObj = this.annaFilterService.initialValueMap.get(header);
+    }
+
+    this.sliderMinValue = selectedTooltipObj.min < this.options.floor ? this.options.floor : selectedTooltipObj.min;
+    this.sliderMaxValue = selectedTooltipObj.max < this.options.ceil ? selectedTooltipObj.max : this.options.ceil;
+    //default step values
+    this.options.step = 1;
+    this.sliderFilterTextBoxStep = "1";
+    if (header !== "WeekNumber") {
+      this.options.step = 0.1;
+      this.sliderFilterTextBoxStep = "0.1";
+    }
+  }
+
+  getCheckboxData(header: string) {
+    this.tempTooltipData = this.annaFilterService.populateTooltip(header, this.clonedTableData, this.tableData);
+    this.allSelected = this.annaFilterService.isAllOptionsSelected();
+    this.showAll = this.tempTooltipData.filter((x: { isHidden: any; }) => !x.isHidden).length > 1 ? true : false;
+    this.toolTipdata = cloneDeep(this.tempTooltipData);
+  }
+
+  getCalendarData() {
+    const parsingFormat = "MM/DD/YYYY";
+    let minMaxdate: any = this.annaFilterService.populateDatePickerTooltipWithData(this.clonedTableData, this.tableData);
+    let selectedDateObj;
+    if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+      selectedDateObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+    }
+    else {
+      selectedDateObj = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+    }
+
+    // For startDate
+    // selected date is less than date which we get
+    if ((selectedDateObj.minSelectedDate).isAfter(minMaxdate.minStartDate)) {
+      this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.minSelectedDate, parsingFormat);
+    }
+    else {
+      this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.minStartDate, parsingFormat);
+    }
+
+    // For endData
+    // selectedDate is less than date which we get
+    if ((selectedDateObj.maxSelectedDate).isAfter(minMaxdate.maxEndDate)) {
+      this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.maxEndDate, parsingFormat);
+    }
+    else {
+      this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.maxSelectedDate, parsingFormat);
+    }
+
+    this.calendarMinEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.minStartDate, parsingFormat);
+    this.calendarMaxEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxdate.maxEndDate, parsingFormat);
+  }
+
+  getTimeFilterData(header: string): void {
+    if (this.annaFilterService.tooltipSelectedMap.has(header)) {
+      this.selectedFromTime = this.annaFilterService.tooltipSelectedMap.get(header).fromTime;
+      this.selectedToTime = this.annaFilterService.tooltipSelectedMap.get(header).toTime;
+    } else {
+      this.selectedFromTime = this.annaFilterService.initialValueMap.get(header).fromTime;
+      this.selectedToTime = this.annaFilterService.initialValueMap.get(header).toTime;
+    }
+    if (this.selectedFromTime != undefined || this.selectedToTime != undefined) {
+      this.selectedFromTime = this.annaDateTimeFormatService.formatToTwelveHrs(this.selectedFromTime, true);
+      this.selectedToTime = this.annaDateTimeFormatService.formatToTwelveHrs(this.selectedToTime, true);
+
+      this.clonedSelectedFromTime = cloneDeep(this.selectedFromTime);
+      this.clonedSelectedToTime = cloneDeep(this.selectedToTime);
+    }
+    else {
+      this.selectedFromTime = ["-", "-", "-"];
+      this.selectedToTime = ["-", "-", "-"];
+      this.disableTimeFilterApplyBtn = true;
+    }
+
+    if (this.gtGeneralConfig.component === "SPOTDETAILS" || this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP") {
+      this.showMultiTimeCheckbox = false;
+      this.showZeroTimeCheckbox = false;
+      this.showEnterTimeCheckbox = false;
+
+      if (this.clonedTableData.findIndex((obj: any) => obj[header] == "0") != -1) {
+        this.showZeroTimeCheckbox = true;
+        this.annaFilterService.includeZeroTime = this.tableData.findIndex((obj: any) => obj[header] == "0") != -1;
+        this.zeroTimeCheckboxChecked = this.annaFilterService.includeZeroTime;
+      }
+      if (this.clonedTableData.findIndex((obj: any) => obj[header] == "<multi>") != -1) {
+        this.showMultiTimeCheckbox = true;
+        this.annaFilterService.includeMultiTime = this.tableData.findIndex((obj: any) => obj[header] == "<multi>") != -1;
+        this.multiTimeCheckboxChecked = this.annaFilterService.includeMultiTime;
+      }
+      if (this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
+        this.showEnterTimeCheckbox = true;
+      }
+      if (this.clonedTableData.findIndex((obj: any) => obj[header] != "<multi>" && obj[header] != "0") != -1) {
+        this.annaFilterService.includeTimeRange = this.tableData.findIndex((obj: any) => obj[header] != "<multi>" && obj[header] != "0") != -1;
+        this.enterTimeCheckboxChecked = this.annaFilterService.includeTimeRange;
+      }
+    }
+    else if (this.gtGeneralConfig.component === "RATING") {
+      this.showMultiTimeCheckbox = false;
+      this.showZeroTimeCheckbox = false;
+      this.showEnterTimeCheckbox = false;
+
+      if (this.clonedTableData.findIndex((obj: any) => obj[header][0] == "0") != -1) {
+        this.showZeroTimeCheckbox = true;
+        this.annaFilterService.includeZeroTime = this.tableData.findIndex((obj: any) => obj[header][0] == "0") != -1;
+        this.zeroTimeCheckboxChecked = this.annaFilterService.includeZeroTime;
+      }
+      if (this.clonedTableData.findIndex((obj: any) => obj[header][0] == "<multi>") != -1) {
+        this.showMultiTimeCheckbox = true;
+        this.annaFilterService.includeMultiTime = this.tableData.findIndex((obj: any) => obj[header][0] == "<multi>") != -1;
+        this.multiTimeCheckboxChecked = this.annaFilterService.includeMultiTime;
+      }
+      if (this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
+        this.showEnterTimeCheckbox = true;
+      }
+      if (this.clonedTableData.findIndex((obj: any) => obj[header][0] != "<multi>" && obj[header][0] != "0") != -1) {
+        this.annaFilterService.includeTimeRange = this.tableData.findIndex((obj: any) => obj[header][0] != "<multi>" && obj[header][0] != "0") != -1;
+        this.enterTimeCheckboxChecked = this.annaFilterService.includeTimeRange;
+      }
+
+    }
+  }
+
+  selectOrUnselectMultiTimeCheckbox() {
+    this.multiTimeCheckboxChecked = !this.multiTimeCheckboxChecked;
+    this.annaFilterService.includeMultiTime = !this.annaFilterService.includeMultiTime;
+    this.disableTimeFilterApplyButton();
+  }
+
+  selectOrUnselectZeroTimeCheckbox() {
+    this.zeroTimeCheckboxChecked = !this.zeroTimeCheckboxChecked;
+    this.annaFilterService.includeZeroTime = !this.annaFilterService.includeZeroTime;
+    this.disableTimeFilterApplyButton();
+  }
+
+  selectOrUnselectEnterTimeCheckbox() {
+    this.enterTimeCheckboxChecked = !this.enterTimeCheckboxChecked;
+    this.annaFilterService.includeTimeRange = !this.annaFilterService.includeTimeRange;
+    this.disableTimeFilterApplyButton();
+  }
+
+  disableSliderApplyBtn() {
+    return this.options.floor === this.options.ceil;
+  }
+
+  isCheckboxSelected(data: boolean | number) {
+    this.allSelected = this.annaFilterService.isCheckboxSelected(data);
+    if (this.annaFilterService.tooltipMap.get(this.annaFilterService.selectedRadio).filter((x: any) => x.isSelected && !x.isHidden).length == 0) {
+      this.disableCheckboxApply = true;
+    } else {
+      this.disableCheckboxApply = false;
+    }
+  }
+
+  minValueChanged(value: string) {
+    if (isNaN(+value)) {
+      this.sliderMinValue = +this.options.floor;
+    }
+    else {
+      if (+value > this.sliderMaxValue) {
+        this.sliderMinValue = this.sliderMaxValue;
+      }
+      else if (+value < this.options.floor) {
+        this.sliderMinValue = this.options.floor;
+      } else {
+        this.sliderMinValue = +value;
+      }
+    }
+  }
+
+  maxValueChanged(value: string) {
+    if (isNaN(+value)) {
+      this.sliderMaxValue = +this.options.ceil;
+    }
+    else {
+      if (+value < this.sliderMinValue) {
+        this.sliderMaxValue = this.sliderMinValue;
+      }
+      else if (+value > this.options.ceil) {
+        this.sliderMinValue = this.options.ceil;
+      } else {
+        this.sliderMaxValue = +value;
+      }
+    }
+  }
+
+  sliderValueChange() {
+    this.sliderValue = { min: this.sliderMinValue, max: this.sliderMaxValue };
+  }
+
+  cancelSliderFilter() {
+    this.sliderValue = null;
+    this.closeTooltip();
+  }
+
+  allOptionClicked() {
+    if (this.allSelected == 0 || this.allSelected == 2) {
+      this.allSelected = 1;
+      this.disableCheckboxApply = false;
+    } else {
+      this.allSelected = 0;
+      this.disableCheckboxApply = true;
+    }
+    this.annaFilterService.allOptionsClicked(this.allSelected);
+  }
+
+  applyFilters() {
+    let isSame = isEqual(this.toolTipdata, this.tempTooltipData);
+    this.toolTipdata = cloneDeep(this.tempTooltipData);
+    this.annaFilterService.tooltipMap.set(this.annaFilterService.selectedRadio, this.tempTooltipData);
+    if (!isSame) {
+      this.annaFilterService.reOrderAppliedFiltersArray(false);
+    }
+    let tooltipSelectedDataArray = this.annaFilterService.tooltipMap.get(this.annaFilterService.selectedRadio).filter((x: { isSelected: any; }) => x.isSelected).map((x: { data: any; }) => x.data);
+    if (tooltipSelectedDataArray.length == 0) {
+      tooltipSelectedDataArray = this.annaFilterService.tooltipMap.get(this.annaFilterService.selectedRadio).map((x: { data: any; }) => x.data);
+    }
+    this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, tooltipSelectedDataArray);
+    this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+    this.checkIfSortingIsApplied();
+    this.filterAppliedToTable.emit(this.tableData);
+    // this.generateTableDataWrapper();
+    this.disableEnableEachColumnFilters();
+    this.closeTooltip();
+  }
+
+  revert() {
+    this.tempTooltipData = cloneDeep(this.toolTipdata);
+    this.annaFilterService.tooltipMap.set(this.annaFilterService.selectedRadio, this.tempTooltipData);
+    this.toolTipdata = null;
+  }
+
+  closeCheckboxFilter() {
+    if (this.toolTipdata) {
+      this.revert();
+    }
+    this.closeTooltip();
+  }
+
+  applySliderFilter() {
+    if (this.sliderValue) {
+      let selectedDataObj;
+      if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+        selectedDataObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+      }
+      else {
+        selectedDataObj = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+      }
+
+      let isSame = isEqual(selectedDataObj, this.sliderValue);
+
+
+      if (!isSame) {
+        this.annaFilterService.sliderData = { min: this.options.floor, max: this.options.ceil };
+        this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, this.sliderValue);
+        this.annaFilterService.reOrderAppliedFiltersArray(false);
+        this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+        this.checkIfSortingIsApplied();
+        this.filterAppliedToTable.emit(this.tableData);
+        // this.generateTableDataWrapper();
+        this.disableEnableEachColumnFilters();
+      }
+    }
+    this.sliderValue = null;
+    this.closeTooltip();
+  }
+
+  cancelInDateFilter() {
+    this.closeTooltip();
+  }
+
+  applyDateFilter(selectedDate: { fromDate: NgbDate, toDate: NgbDate }) {
+
+    let selectedDateObj;
+    if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+      selectedDateObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+    }
+    else {
+      selectedDateObj = cloneDeep(this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio));
+    }
+
+    let isStartDateSame = isEqual(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.fromDate), selectedDateObj.minSelectedDate);
+    let isEndDateSame = isEqual(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.toDate), selectedDateObj.maxSelectedDate);
+
+    if (!isStartDateSame || !isEndDateSame) {
+      selectedDateObj.minSelectedDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.fromDate));
+      selectedDateObj.maxSelectedDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(selectedDate.toDate));
+      this.annaFilterService.flightDateRange = {
+        minSelectedDate: moment(this.annaDateTimeFormatService.convertNgbDateToMoment(this.calendarMinEnabledDate)),
+        maxSelectedDate: moment(this.annaDateTimeFormatService.convertNgbDateToMoment(this.calendarMaxEnabledDate))
+      };
+      this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, selectedDateObj);
+      this.annaFilterService.reOrderAppliedFiltersArray(false);
+      this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+      this.checkIfSortingIsApplied();
+      this.filterAppliedToTable.emit(this.tableData);
+      // this.generateTableDataWrapper();
+      this.disableEnableEachColumnFilters();
+    }
+    this.closeTooltip();
+  }
+
+  applyWeekFilter(event: any) {
+
+  }
+
+  incrementHour(arr: any[]) {
+    if (arr[0] == "") {
+      arr[0] = 1;
+    } else if (parseInt(arr[0]) < 12) {
+      arr[0] = parseInt(arr[0]) + 1;
+    } else {
+      arr[0] = 1;
+    }
+  }
+
+  decrementHour(arr: any[]) {
+    if (arr[0] == "") {
+      arr[0] = 12;
+    } else if (parseInt(arr[0]) > 1) {
+      arr[0] = parseInt(arr[0]) - 1;
+    } else {
+      arr[0] = 12;
+    }
+  }
+
+  incrementMinute(arr: any[]) {
+    if (arr[1] == "" || parseInt(arr[1]) == 0) {
+      arr[1] = 30;
+    } else {
+      arr[1] = "00";
+    }
+  }
+
+  decrementMinute(arr: any) {
+    if (arr[1] == "" || parseInt(arr[1]) == 30) {
+      arr[1] = "00";
+    } else {
+      arr[1] = 30;
+    }
+  }
+
+  changeStartTimeHour(increment: boolean) {
+    if (increment) {
+      this.incrementHour(this.selectedFromTime);
+    } else {
+      this.decrementHour(this.selectedFromTime);
+    }
+    this.disableTimeFilterApplyButton();
+  }
+
+  changeEndTimeHour(increment: boolean) {
+    if (increment) {
+      this.incrementHour(this.selectedToTime);
+    } else {
+      this.decrementHour(this.selectedToTime);
+    }
+    this.disableTimeFilterApplyButton();
+  }
+
+  changeEndTimeMinute(increment: boolean) {
+    if (increment) {
+      this.incrementMinute(this.selectedToTime);
+    } else {
+      this.decrementMinute(this.selectedToTime);
+    }
+    this.disableTimeFilterApplyButton();
+  }
+
+  changeStartTimeMinute(increment: boolean) {
+    if (increment) {
+      this.incrementMinute(this.selectedFromTime);
+    } else {
+      this.decrementMinute(this.selectedFromTime);
+    }
+    this.disableTimeFilterApplyButton();
+  }
+
+  applyTimeFilters() {
+    let fromTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(
+      this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2],
+      true
+    );
+    let fromTime24HrFormat = fromTime24HrFormatArr[0] + ":" + fromTime24HrFormatArr[1] + ":00";
+    let toTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(
+      this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2],
+      true
+    );
+    let toTime24HrFormat = toTime24HrFormatArr[0] + ":" + toTime24HrFormatArr[1] + ":00";
+
+    let previousSelectedData;
+    if (this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)) {
+      previousSelectedData = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+    } else {
+      previousSelectedData = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+    }
+
+    let selectedData = {
+      fromTime: fromTime24HrFormat, toTime: toTime24HrFormat, includeMulti: this.annaFilterService.includeMultiTime,
+      includeZero: this.annaFilterService.includeZeroTime, includeTimeRange: this.annaFilterService.includeTimeRange
+    };
+    if (!isEqual(previousSelectedData, selectedData)) {
+      this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, selectedData);
+      this.annaFilterService.reOrderAppliedFiltersArray(false);
+      this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+      this.checkIfSortingIsApplied();
+      this.filterAppliedToTable.emit(this.tableData);
+      // this.generateTableDataWrapper();
+      this.disableEnableEachColumnFilters();
+    }
+    this.closeTooltip();
+  }
+
+  closeTimeFilter() {
+    this.selectedFromTime = cloneDeep(this.clonedSelectedFromTime);
+    this.selectedToTime = cloneDeep(this.clonedSelectedToTime);
+    this.closeTooltip();
+  }
+
+  disableTimeFilterApplyButton() {
+    let timeFormat = "HH:mm:ss";
+
+    let startTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(
+      this.selectedFromTime[0] + ":" + this.selectedFromTime[1] + " " + this.selectedFromTime[2],
+      true
+    );
+    let startTime24HrFormat = startTime24HrFormatArr[0] + ":" + startTime24HrFormatArr[1] + ":00";
+    let endTime24HrFormatArr = this.annaDateTimeFormatService.convertTotwentyFourHrsFormat(
+      this.selectedToTime[0] + ":" + this.selectedToTime[1] + " " + this.selectedToTime[2],
+      true
+    );
+    let endTime24HrFormat = endTime24HrFormatArr[0] + ":" + endTime24HrFormatArr[1] + ":00";
+
+    this.disableTimeFilterApplyBtn = moment(startTime24HrFormat, timeFormat).isAfter(moment(endTime24HrFormat, timeFormat));
+
+    if (!this.multiTimeCheckboxChecked && !this.zeroTimeCheckboxChecked && !this.enterTimeCheckboxChecked) {
+      this.disableTimeFilterApplyBtn = true;
+    }
+  }
+
+  sortedData(event: any) {
+    if (event.type == "none") {
+      this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+    } else {
+      this.tableData = event.data;
+    }
+    this.sortingAppliedToTable.emit(this.tableData);
+    // this.generateTableDataWrapper();
+  }
+
+  checkIfSortingIsApplied() {
+    let appliedkey;
+    let isAsc;
+    const arr = this.sortComponent.toArray();
+
+    let obj = this.annaSortService.checkIfSortingIsApplied(this.annaSortService.sortByAsc, true);
+    appliedkey = obj.key;
+    isAsc = obj.setValueTo;
+
+    if (!appliedkey) {
+      let obj = this.annaSortService.checkIfSortingIsApplied(this.annaSortService.sortByDesc, false);
+      appliedkey = obj.key;
+      isAsc = obj.setValueTo;
+    }
+
+    if (appliedkey) {
+      this.applySorting(arr, appliedkey, isAsc);
+    }
+  }
+
+  applySorting(sortComponentArr: AnnaSortComponent[], appliedKey: string, isAsc: boolean) {
+    sortComponentArr.forEach((component) => {
+      if (component.sortBy === appliedKey) {
+        this.setSortComponentDataProperty(component);
+        isAsc ? component.sortByAscending() : component.sortByDescending();
+      }
+    });
+  }
+
+  setSortComponentDataProperty(sortComponent: AnnaSortComponent) {
+    sortComponent.data = this.tableData;
+    sortComponent.clonedData = cloneDeep(this.tableData);
+  }
+
+  disableEnableEachColumnFilters() {
+    this.tableHeaders.forEach(header => {
+      header.headerInfo.forEach(item => {
+        if (item.filter != "") {
+          let values = [];
+          item.disableFilter = true;
+
+          item.filterObjectKeys.forEach(key => {
+            
+            if(key == "period"){
+              let uniqStartDate = uniq(this.tableData.map((u: { [x: string]: any; }) => u["startDate"]));
+              let uniqEndDate = uniq(this.tableData.map((u: { [x: string]: any; }) => u["endDate"]));
+
+              item.disableFilter = (uniqStartDate.length > 1 || uniqEndDate.length > 1) ? false : true; 
+            }
+            else{
+              values = this.tableData.map((u: { [x: string]: any; }) => u[key]);
+              if(uniq(values).filter(n => n!=null).length > 1){
+                item.disableFilter = false;
+              }
+            }
+
+          })
+          // if(uniq(values).length > 1){
+          //   item.disableFilter = false;
+          // }else{
+          //   item.disableFilter = true;
+          // }
+        }
+        if (item.sort) {
+          if (uniq(this.tableData.map((u: { [x: string]: any; }) => u[item.objectKey])).length > 1) {
+            item.disableSort = false;
+          } else {
+            item.disableSort = true;
+          }
+        }
+      });
+    });
+  }
+
+  ngAfterViewInit() {
+    this.annaGenericTableService.virtualScrollSubject.subscribe((val) =>{
+      this.isScrolledLeft = document.getElementsByClassName("anna-table-virtual-scroll-viewport")[0].scrollLeft > 0;
+      this.cdRef.detectChanges();
+    });
+  }
+
+  dataRowClicked(rowData: any) {
+    this.rowClicked.emit(rowData);
+  }
+
+  radioButtonClicked(data: any, action: string, isDisabled: boolean) {
+    if (!isDisabled) {
+      this.radioButtonSelected.emit({ data, action });
+    }
+  }
+
+  bindTheValueToSellerGroupTooltip(sellerGroupHierarchy: SellerGroupHierarchy[], tooltip: any): void {
+    if (this.hierarchyTooltip && this.hierarchyTooltip.open) {
+      this.hierarchyTooltip.close();
+    }
+    this.sellerGroupHierarchy = sellerGroupHierarchy;
+    this.hierarchyTooltip = tooltip;
+    this.hierarchyTooltip.open();
+  }
+
+  iconClicked(rowData: any,iconClass: string){
+    this.gtIconClicked.emit({data: rowData,iconClass: iconClass});
+  }
+
+  svgIconClicked(rowData: any,key: string){
+    this.gtSVGIconClicked.emit({data: rowData,key: key});
+  }
+
+  textActionClicked(rowData: any,id: number){
+    this.gtTextActionClicked.emit({data:rowData,id});
+  }
+
+  viewDetailsClicked(rowData: any){
+    this.gtViewDetailClicked.emit({data:rowData});
+  }
+
+}