@annalib/anna-core 0.0.4 → 1.2.0

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

@@ -0,0 +1,1748 @@
+
+// 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, sortBy } 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,TooltipModel,AnnaSortService,AnnaDateTimeFormatService, NgbDateType, AnnaFilterService, IGtGeneralConfig, IGtTableHeader, ITotalRowInfo, AnnaGenericTableService, SortType, IHeaderInfo, radioButtonModel } 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)";
+
+  showSortComponent: boolean = false;
+  showFilterComponent: boolean = false;
+  tempSortOrder: SortType = null;
+    
+  tooltipOptions: TooltipModel[];
+  clonedTooltipOptions: TooltipModel[];
+  disableSelectAll: boolean;
+  disableClearAll: boolean;
+  searchItem: string;
+
+  disableCalendarApplyBtn: boolean;
+  calendarSelection: any = {fromDate: null , toDate: null};
+
+  showSliderMinValueError: boolean;
+  showSliderMaxValueError: boolean;
+  isMinTextBoxEmpty: boolean;
+  isMaxTextBoxEmpty: boolean;
+  selectedLabel: string;
+
+  startTimeHourErr: boolean;
+  startTimeMinErr: boolean;
+  endTimeHourErr: boolean;
+  endTimeMinErr: boolean;
+
+  sameTooltipClicked: boolean;
+    
+  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;
+      console.log("initalValueMap set");
+      this.annaFilterService.initialValueMap = new Map();
+    }
+    else {
+      console.log("ng on change else condition");
+      // this.setInitialValueMapData();
+      this.disableEnableEachColumnTooltipIcon();
+      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);
+      this.annaSortService.columnSortState = new Map();
+      this.setColumnSortStateMap();   
+    }
+
+    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 %");
+    this.tooltipRadioTextMap.set("potentialUnitsValue","POT Units");
+    this.tooltipRadioTextMap.set("bookedUnitsValue","Booked Units");
+    this.tooltipRadioTextMap.set("bookedAmountWithZeroRatingValue","Total $ Booked");
+    this.tooltipRadioTextMap.set("bookedAmountPercentageWithZeroRatingValue","% of $ Booked");
+    this.tooltipRadioTextMap.set("bookedAmountWithoutZeroRatingValue","$Booked With Imps(’000)");
+    this.tooltipRadioTextMap.set("bookedAmountPercentageWithoutZeroRatingValue", "% OF $ Booked");
+  }
+
+  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,this.annaSortService.columnSortState);
+  }
+
+  bindTheValueToToolTip(tooltip: any, header: IHeaderInfo) {
+
+    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
+    //need to change this
+    //THe tooltip should not close
+    // if (tooltip == this.tooltip) {
+    //   this.bindValueFuncCalled = false;
+    //   this.closeTooltip();
+    // }
+    // else {
+      if(tooltip == this.tooltip){
+        console.log("inside if");
+        this.bindValueFuncCalled = false;
+        this.sameTooltipClicked = true;
+      }
+
+      this.searchItem = this.sameTooltipClicked ? this.searchItem : "";
+      let enabledHeaders: any[] = [];
+      header.filterSortObjectKeys.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,header);
+      if (window.innerWidth < 1500 && window.innerHeight < 768 && !this.annaFilterService.sliderSet.has(header.filterSortObjectKeys[0])) {
+        this.columnFilterOpened.emit();
+      }
+
+      this.showCheckboxFilterRadioButtons = header.filterSortObjectKeys.length > 1;
+      let radioButtonData = this.sameTooltipClicked ? this.radioButtons.filter(item => item.key == this.annaFilterService.selectedRadio)[0] : this.radioButtons[0];
+      this.populateTooltipDataBasedOnSelectedRadio(radioButtonData);
+      this.bindValueFuncCalled = false;
+    // }
+  }
+
+  openTooltip(tooltip: any,header: any, columnHeader: IHeaderInfo) {
+    this.closeTooltip();
+    this.tooltip = tooltip;
+    this.tooltip.open();
+    //convert key into the header
+    this.radioButtons = header.map((key: string,index: number) => {
+      let value = this.tooltipRadioTextMap.has(key)
+        ? this.tooltipRadioTextMap.get(key)
+        : key; //change to display name
+      return new radioButtonModel(key, value, columnHeader.isSortRequired[index], columnHeader.isFilterRequired[index]);
+    });
+  }
+
+  clearColumnFilter() {
+    this.annaFilterService.clearColumnFilter();
+    this.closeTooltip();
+    this.tableData = cloneDeep(this.annaFilterService.filterData(this.clonedTableData, ""));
+    this.annaSortService.noSortingAppliedData = this.tableData;
+    this.checkIfSortingIsApplied();
+    this.filterAppliedToTable.emit(this.tableData);
+    this.disableEnableEachColumnTooltipIcon();
+  }
+
+  populateTooltipDataBasedOnSelectedRadio(radioButtonData: radioButtonModel) {
+
+    let header = radioButtonData.key;
+    this.selectedLabel = radioButtonData.label;
+    this.showSortComponent = false;
+    this.showFilterComponent = false;
+    this.searchItem = this.sameTooltipClicked ? this.searchItem : null;
+    
+    // setTimeout(() => {
+      this.showSortComponent = radioButtonData.isSortRequired;
+      this.showFilterComponent = radioButtonData.isFilterRequired;
+    // }, 0);
+    this.tempSortOrder = this.sameTooltipClicked ? this.tempSortOrder : null;
+    
+    if(this.sameTooltipClicked && this.tempSortOrder){
+      setTimeout(() => {
+          this.annaSortService.updateSortTypeSubject.next(this.tempSortOrder);        
+      }, 0);
+    }
+
+    if (this.toolTipdata) {
+      this.revert();
+    }
+
+    this.annaFilterService.selectedRadio = header;
+    let selectedFilterSet = new Set(this.annaFilterService.appliedFiltersArray);
+    let isSortPresent = (this.annaSortService.columnSortState.size > 0 && this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio) != "DEFAULT");
+    this.disableColumnClearAllBtn = selectedFilterSet.has(this.annaFilterService.selectedRadio) || isSortPresent ? false : true;
+    
+    if(radioButtonData.isFilterRequired && !this.sameTooltipClicked){
+      this.disableSliderApplyButton = false;
+      this.disableCheckboxApply = false;
+    
+      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);
+      }
+    }
+    
+    this.sameTooltipClicked = false;
+  }
+
+  getSliderData(header: string) {
+
+    let translateFunc;
+
+    if (this.annaFilterService.sliderCurrencySet.has(header)) {
+      translateFunc = "currency";
+    }
+    else if(header == "postedAudPercent"){
+      translateFunc = "percent";
+    }
+    else {
+      translateFunc = "normal";
+    }
+
+    let optionsData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+    let minValue = this.annaFilterService.returnMaxAndMinValue(optionsData, header, true);
+    let maxValue = this.annaFilterService.returnMaxAndMinValue(optionsData, header, false);
+
+    let obj = this.annaFilterService.setOptionValues(minValue,maxValue);
+
+    if (translateFunc === "normal") {
+        obj.translate = this.annaFilterService.normalTranslateFunction;
+    } else if (translateFunc === "percent") {
+        obj.translate = this.annaFilterService.percentTranslateFunction;
+    } else if (translateFunc === "currency") {
+        obj.translate = this.annaFilterService.currencyTranslateFunction;
+    }
+
+    this.options = obj;
+       
+    if(this.annaFilterService.tooltipSelectedMap.has(header)){
+        let selectedObj = this.annaFilterService.tooltipSelectedMap.get(header);
+        this.sliderMinValue = selectedObj.min < this.options.floor ? this.options.floor : selectedObj.min;
+        this.sliderMaxValue = selectedObj.max < this.options.ceil ? selectedObj.max : this.options.ceil;   
+    }
+    else{
+        this.sliderMinValue = this.options.floor;
+        this.sliderMaxValue = 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) {
+
+    let optionData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+    let uniqOptionData = uniq(optionData.map(item => item[header]));
+    let tooltipOptions = uniqOptionData.map(item => new TooltipModel(item));
+
+    if(this.annaFilterService.tooltipSelectedMap.has(header)){
+      let selectedValueSet = new Set(this.annaFilterService.tooltipSelectedMap.get(header));
+      tooltipOptions.forEach(item => item.isSelected = selectedValueSet.has(item.data) ? true : false);
+    }
+    else{
+      tooltipOptions.forEach(item => item.isSelected = true);
+    }
+
+    let index = tooltipOptions.findIndex(item => item.data == null);
+    
+    if(index != -1){
+      tooltipOptions[index].data = "(Blank)";
+    }
+
+    let selectedItems = sortBy(tooltipOptions.filter(item => item.isSelected),"data");
+    let unselectedItems = sortBy(tooltipOptions.filter(item => !item.isSelected),"data");
+        
+    this.clonedTooltipOptions = [...selectedItems, ...unselectedItems];
+
+    this.tooltipOptions = cloneDeep(this.clonedTooltipOptions);
+        
+    this.disableSelectAll = unselectedItems.length == 0;
+    this.disableClearAll = selectedItems.length == 0;
+        
+  }
+
+  getCalendarData() {
+    
+    const parsingFormat = "MM/DD/YYYY";
+
+    let optionData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+    
+    let minMaxDate;
+    if(this.annaFilterService.selectedRadio == "period"){
+      let minStartDate = this.annaFilterService.returnMinAndMaxDate(optionData, "startDate");
+      let maxEndDate = this.annaFilterService.returnMinAndMaxDate(optionData,"endDate");
+      minMaxDate = [minStartDate[0],maxEndDate[1]];
+    }
+    else{
+      minMaxDate = this.annaFilterService.returnMinAndMaxDate(optionData, this.annaFilterService.selectedRadio);  
+    }
+    console.log(minMaxDate);
+    
+        
+    this.calendarMinEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[0],parsingFormat);
+    this.calendarMaxEnabledDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[1],parsingFormat);
+    
+    console.log(this.calendarMinEnabledDate);
+    console.log(this.calendarMaxEnabledDate);
+    
+    if(this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)){
+        let selectedDateObj = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+        
+        if(selectedDateObj.fromDate.isAfter(minMaxDate[0])){
+            this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.fromDate,parsingFormat);
+        }
+        else{
+            this.selectedMinDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[0],parsingFormat);
+        } 
+
+        if(selectedDateObj.toDate.isAfter(minMaxDate[1])){
+            this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(minMaxDate[1],parsingFormat);
+        }
+        else{
+            this.selectedMaxDate = this.annaDateTimeFormatService.convertToNgbDate(selectedDateObj.toDate,parsingFormat);
+        }
+
+    }
+    else{
+       this.selectedMinDate = cloneDeep(this.calendarMinEnabledDate);
+       this.selectedMaxDate = cloneDeep(this.calendarMaxEnabledDate);
+    }
+    console.log(this.selectedMinDate);
+    console.log(this.selectedMaxDate);
+        
+  }
+
+  getTimeFilterData(header: string): void {
+    
+    this.startTimeHourErr = this.startTimeMinErr = this.endTimeHourErr = this.endTimeMinErr = false;    
+
+    if (this.annaFilterService.tooltipSelectedMap.has(header)) {
+      this.selectedFromTime = this.annaFilterService.tooltipSelectedMap.get(header).fromTime;
+      this.selectedToTime = this.annaFilterService.tooltipSelectedMap.get(header).toTime;
+    } else {
+      this.setInitialValueMapForTimeFilter(header);
+      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.setTimeFilterDataForComponentsOtherThanRatingsPage(header);
+    }
+    else if(this.gtGeneralConfig.component === "RATING"){
+      this.setTimeFilterDataForRatingPageComponent(header);
+    }
+  }
+
+  //Need to change this method
+  setTimeFilterDataForComponentsOtherThanRatingsPage(header: string){
+    this.showMultiTimeCheckbox = false;
+    this.showZeroTimeCheckbox = false;
+    this.showEnterTimeCheckbox = false;
+    this.multiTimeCheckboxChecked = false;
+    this.zeroTimeCheckboxChecked = false;
+    this.enterTimeCheckboxChecked = false;
+
+
+    let optionsData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+    let selectedObj;
+
+    if(this.annaFilterService.tooltipSelectedMap.has(header)){
+      selectedObj = this.annaFilterService.tooltipSelectedMap.get(header);
+    }
+    else{
+      selectedObj = this.annaFilterService.initialValueMap.get(header);
+    }
+
+    if(optionsData.findIndex(obj => obj[header] == "0") != -1) {
+      this.showZeroTimeCheckbox = true;
+      this.zeroTimeCheckboxChecked = selectedObj.includeZeroTime;
+    }
+    
+    
+    if(optionsData.findIndex(obj => obj[header] == "<multi>") != -1) {
+      this.showMultiTimeCheckbox = true;
+      this.multiTimeCheckboxChecked = selectedObj.includeMulti;
+    }
+    
+
+    if(this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
+      this.showEnterTimeCheckbox = true;
+    }
+    
+    if(optionsData.findIndex(obj => obj[header] != "<multi>" && obj[header] != "0") != -1) {
+      this.enterTimeCheckboxChecked = selectedObj.includeTimeRange;
+    }
+  }
+
+  setTimeFilterDataForRatingPageComponent(header: string){
+      this.showMultiTimeCheckbox = false;
+      this.showZeroTimeCheckbox = false;
+      this.showEnterTimeCheckbox = false;
+      this.multiTimeCheckboxChecked = false;
+      this.zeroTimeCheckboxChecked = false;
+      this.enterTimeCheckboxChecked = false;
+
+      let optionsData = this.annaFilterService.getFilterOptionsData(this.tableData, this.clonedTableData);
+      let selectedObj;
+
+      if(this.annaFilterService.tooltipSelectedMap.has(header)){
+        selectedObj = this.annaFilterService.tooltipSelectedMap.get(header);
+      }
+      else{
+        selectedObj = this.annaFilterService.initialValueMap.get(header);
+      }
+
+      if(optionsData.findIndex(obj => obj[header][0] == "0") != -1) {
+        this.showZeroTimeCheckbox = true;
+        this.zeroTimeCheckboxChecked = selectedObj.includeZeroTime;
+      }
+      
+      
+      if(optionsData.findIndex(obj => obj[header][0] == "<multi>") != -1) {
+        this.showMultiTimeCheckbox = true;
+        this.multiTimeCheckboxChecked = selectedObj.includeMulti;
+      }
+      
+
+      if(this.showZeroTimeCheckbox || this.showMultiTimeCheckbox) {
+        this.showEnterTimeCheckbox = true;
+      }
+      
+      if(optionsData.findIndex(obj => obj[header][0] != "<multi>" && obj[header][0] != "0") != -1) {
+        this.enterTimeCheckboxChecked = selectedObj.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;
+  }
+
+  selectUnselectCheckbox(data: TooltipModel) {
+    data.isSelected = !data.isSelected;
+    let selectedItems = this.tooltipOptions.filter(item => item.isSelected);
+    let unselectedItems = this.tooltipOptions.filter(item => !item.isSelected);
+
+    this.disableCheckboxApply = this.disableClearAll =  selectedItems.length == 0;
+    this.disableSelectAll = unselectedItems.length == 0;
+        
+  }
+
+  minValueChanged(value: string) {
+    console.log("min Value Changed");
+    if (value == null) {
+      this.isMinTextBoxEmpty = true;
+      this.showSliderMinValueError = false;
+      this.showSliderMaxValueError = false;
+      this.disableSliderApplyButton = false;
+    } else {
+      this.isMinTextBoxEmpty = false;
+      if (+value > this.sliderMaxValue) {
+          if(!this.isMaxTextBoxEmpty){
+              this.showSliderMinValueError = true;
+              this.disableSliderApplyButton = true;
+          }
+      } else if (+value < this.options.floor) {
+          this.showSliderMinValueError = true;
+          this.disableSliderApplyButton = true;
+      } else {
+          this.sliderMinValue = +value;
+          this.showSliderMinValueError = false;
+          this.showSliderMaxValueError = false;
+          this.disableSliderApplyButton = false;
+      }
+    }
+    this.showErrorForMinAndMaxValue();
+  }
+
+  maxValueChanged(value: string) {
+    console.log("max Value Changed");
+    if (value == null) {
+      this.isMaxTextBoxEmpty = true;
+      this.showSliderMaxValueError = false;
+      this.showSliderMinValueError = false;
+      this.disableSliderApplyButton = false;
+    } else {
+      this.isMaxTextBoxEmpty = false;
+      if (+value < this.sliderMinValue) {
+          if(!this.isMinTextBoxEmpty){
+              this.showSliderMaxValueError = true;
+              this.disableSliderApplyButton = true;
+          }
+      } else if (+value > this.options.ceil) {
+          this.showSliderMaxValueError = true;
+          this.disableSliderApplyButton = true;
+      } else {
+          this.sliderMaxValue = +value;
+          this.showSliderMaxValueError = false;
+          this.showSliderMinValueError = false;
+          this.disableSliderApplyButton = false;
+      }
+    }
+    this.showErrorForMinAndMaxValue();
+  }
+
+  showErrorForMinAndMaxValue(){
+      if(this.isMinTextBoxEmpty && this.isMaxTextBoxEmpty){
+        this.showSliderMinValueError = true;
+        this.showSliderMaxValueError = true;
+        this.disableSliderApplyButton = true;
+     }
+  }
+
+  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 isFilterChanged = false;
+    let isSortChanged = false;
+    if(this.showFilterComponent){
+        let currentSelectedValue = [];
+        let previousSelectedValue = [];
+
+        if(this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)){
+          previousSelectedValue = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+        }
+        else if(this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+          previousSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        else{
+          previousSelectedValue = sortBy(uniq(this.clonedTableData.map(item => item[this.annaFilterService.selectedRadio])));
+          this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio,previousSelectedValue);
+        }
+
+        if(this.tooltipOptions){
+
+            currentSelectedValue = sortBy(this.tooltipOptions.filter(item => item.isSelected).map(item => item.data));
+
+            if(!this.searchItem && currentSelectedValue.length == this.tooltipOptions.length && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+              console.log("inside searchItem else condition");
+              currentSelectedValue = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+            }
+            
+        }
+
+        if(this.searchItem){
+          currentSelectedValue = currentSelectedValue.map( (item:string) => this.removeBoldElementFromString(item));
+        }
+
+        let blankIndex = currentSelectedValue.findIndex((item: string) => item == "(Blank)");
+        if(blankIndex != -1){
+          currentSelectedValue[blankIndex] = null;
+          currentSelectedValue = sortBy(currentSelectedValue);
+        }
+
+        console.log(currentSelectedValue);
+        console.log(previousSelectedValue);
+        isFilterChanged = !isEqual(currentSelectedValue,previousSelectedValue);
+
+        if(isFilterChanged){
+          this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData,currentSelectedValue);
+          this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio, currentSelectedValue);
+          this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+          this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
+        }
+
+    }
+    
+    if(this.showSortComponent){
+      isSortChanged = (this.tempSortOrder != null && this.tempSortOrder != this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio));  
+      if(isSortChanged){
+        for (let [key, value] of this.annaSortService.columnSortState.entries()) {
+          this.annaSortService.columnSortState.set(key, "DEFAULT");
+        }
+        this.annaSortService.columnSortState.set(this.annaFilterService.selectedRadio, this.tempSortOrder);
+        this.applySorting(this.annaFilterService.selectedRadio);
+      }
+      else if(isFilterChanged){
+        this.checkIfSortingIsApplied();
+      }
+    }
+    else if(isFilterChanged){
+      this.checkIfSortingIsApplied();
+    }
+    
+    if(isFilterChanged && isSortChanged){
+      this.filterAppliedToTable.emit(this.tableData);
+    }
+    else if(isFilterChanged){
+      this.filterAppliedToTable.emit(this.tableData);
+    }
+    else if(isSortChanged){
+      this.sortingAppliedToTable.emit(this.tableData);
+    }
+
+    this.disableEnableEachColumnTooltipIcon();
+    this.closeTooltip();
+  }
+
+  applySorting(key: string){
+    if(this.tempSortOrder == "ASC"){
+      this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(true,this.tableData,key));
+    }
+    else if(this.tempSortOrder == "DESC"){
+        this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(false,this.tableData,key));
+    }
+    else if(this.tempSortOrder == "DEFAULT"){
+        this.tableData = cloneDeep(this.annaSortService.noSortingAppliedData);
+    }
+  }
+
+  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() {
+
+    let isFilterChanged = false;
+    let isSortChanged = false;
+
+    if(this.showFilterComponent){
+        let currentSliderData: {min:any, max: any} = {min: null , max: null};
+        let previousSliderData: {min:any, max: any} = {min: "", max: ""};
+
+        if(this.isMinTextBoxEmpty){
+            currentSliderData.min = this.options.floor;
+            currentSliderData.max = this.sliderMaxValue;
+        }
+        else if(this.isMaxTextBoxEmpty){
+            currentSliderData.max = this.options.ceil;
+            currentSliderData.min = this.sliderMinValue;
+        }
+        else{
+            currentSliderData.max = this.sliderMaxValue;
+            currentSliderData.min = this.sliderMinValue;
+        }
+
+        if(this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)){
+          previousSliderData = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+        }
+        else if(this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+          previousSliderData = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        else{
+          let minValue = this.annaFilterService.returnMaxAndMinValue(this.clonedTableData, this.annaFilterService.selectedRadio, true);
+          let maxValue = this.annaFilterService.returnMaxAndMinValue(this.clonedTableData, this.annaFilterService.selectedRadio, false);
+          previousSliderData = { min: minValue, max: maxValue };
+          this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio, previousSliderData);
+        }
+
+        if(currentSliderData.min == this.options.floor && currentSliderData.max == this.options.ceil && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio) ){
+            currentSliderData = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        
+        
+
+        isFilterChanged = !isEqual(previousSliderData,currentSliderData);
+
+        if(isFilterChanged){
+            this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData,currentSliderData);
+            this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio,currentSliderData);
+            this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+            this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
+            this.disableEnableEachColumnTooltipIcon();
+        }
+    }
+
+    if(this.showSortComponent){
+      isSortChanged = (this.tempSortOrder != null && this.tempSortOrder != this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio));  
+      if(isSortChanged){
+        for (let [key, value] of this.annaSortService.columnSortState.entries()) {
+          this.annaSortService.columnSortState.set(key, "DEFAULT");
+        }
+        this.annaSortService.columnSortState.set(this.annaFilterService.selectedRadio, this.tempSortOrder);
+        this.applySorting(this.annaFilterService.selectedRadio);
+      }
+    }
+    else if(isFilterChanged){
+      this.checkIfSortingIsApplied();
+    }
+
+    if(isFilterChanged && isSortChanged){
+      this.filterAppliedToTable.emit(this.tableData);
+    }
+    else if(isFilterChanged){
+      this.filterAppliedToTable.emit(this.tableData);
+    }
+    else if(isSortChanged){
+      this.sortingAppliedToTable.emit(this.tableData);
+    }
+
+    this.closeTooltip();
+  }
+
+  cancelInDateFilter() {
+    this.closeTooltip();
+  }
+
+  applyDateFilter() {
+
+    let isFilterChanged = false;
+    let isSortChanged = false;
+
+    if(this.showFilterComponent){
+        let currentSelectedDate = this.calendarSelection;
+        let previousSelectedDate: {fromDate: any, toDate: any} = {fromDate: null, toDate: null};
+
+        if(this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)){
+          previousSelectedDate = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+        }
+        else if(this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+          previousSelectedDate = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+        }
+        else{
+          let minMaxDate;
+          if(this.annaFilterService.selectedRadio == "period"){
+            let minStartDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData, "startDate");
+            let maxEndDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData,"endDate");
+            minMaxDate = [minStartDate[0],maxEndDate[1]];
+          }
+          else{
+            minMaxDate = this.annaFilterService.returnMinAndMaxDate(this.clonedTableData,this.annaFilterService.selectedRadio);
+          }
+          previousSelectedDate = {fromDate: minMaxDate[0], toDate: minMaxDate[1]};
+          this.annaFilterService.initialValueMap.set(this.annaFilterService.selectedRadio, previousSelectedDate);
+        }
+
+        if(currentSelectedDate.fromDate && currentSelectedDate.toDate){
+            let fromDate = {year: currentSelectedDate.fromDate.year,month: currentSelectedDate.fromDate.month,day: currentSelectedDate.fromDate.day};
+            let toDate = {year: currentSelectedDate.toDate.year,month: currentSelectedDate.toDate.month,day: currentSelectedDate.toDate.day};
+            
+            if(isEqual(this.calendarMinEnabledDate,fromDate) && isEqual(this.calendarMaxEnabledDate,toDate) && this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+                currentSelectedDate = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+            }
+            else{
+                currentSelectedDate.fromDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.fromDate));
+                currentSelectedDate.toDate = moment(this.annaDateTimeFormatService.convertNgbDateToMoment(currentSelectedDate.toDate));
+            }
+            isFilterChanged = !isEqual(previousSelectedDate,currentSelectedDate);
+        
+            if(isFilterChanged){
+            
+                this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData,currentSelectedDate);
+                this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio,currentSelectedDate);
+                this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+                this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
+                this.disableEnableEachColumnTooltipIcon();
+            }
+        }
+
+    }
+
+    if(this.showSortComponent){
+      isSortChanged = (this.tempSortOrder != null && this.tempSortOrder != this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio));  
+      if(isSortChanged){
+        for (let [key, value] of this.annaSortService.columnSortState.entries()) {
+          this.annaSortService.columnSortState.set(key, "DEFAULT");
+        }
+        this.annaSortService.columnSortState.set(this.annaFilterService.selectedRadio, this.tempSortOrder);
+        this.applySorting(this.annaFilterService.selectedRadio);
+      }
+      else if(isFilterChanged){
+        this.checkIfSortingIsApplied();
+      }
+    }
+    else if(isFilterChanged){
+      this.checkIfSortingIsApplied();
+    }
+
+    if(isFilterChanged && isSortChanged){
+      this.filterAppliedToTable.emit(this.tableData);
+    }
+    else if(isFilterChanged){
+      this.filterAppliedToTable.emit(this.tableData);
+    }
+    else if(isSortChanged){
+      this.sortingAppliedToTable.emit(this.tableData);
+    }
+
+    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[]) {
+    arr[1] = parseInt(arr[1]) + 15;
+    if (parseInt(arr[1]) == 60) {
+        arr[1] = "00";
+    } else if (parseInt(arr[1]) == 0) {
+        arr[1] = "00";
+    }
+    else if(parseInt(arr[1]) > 60){
+        let res = parseInt(arr[1]) - 60;
+        arr[1] = res < 10 ? `0${res}` : res.toString();    
+    }
+  }
+
+  decrementMinute(arr: any) {
+    arr[1] = parseInt(arr[1]) - 15;
+    if (parseInt(arr[1]) < 0) {
+        let res = 60 + parseInt(arr[1]);
+        arr[1] = res;
+    } else if (parseInt(arr[1]) == 0) {
+        arr[1] = "00";
+    }
+    else if(arr[1] < 10){
+        arr[1]= `0${arr[1]}`;
+    }
+  }
+
+  changeStartTimeHour(increment: boolean) {
+    if (increment) {
+      this.incrementHour(this.selectedFromTime);
+    } else {
+      this.decrementHour(this.selectedFromTime);
+    }
+    this.startTimeHourChange(this.selectedFromTime[0].toString());
+    // this.disableTimeFilterApplyButton();
+  }
+
+  changeEndTimeHour(increment: boolean) {
+    if (increment) {
+      this.incrementHour(this.selectedToTime);
+    } else {
+      this.decrementHour(this.selectedToTime);
+    }
+    this.endTimeHourChange(this.selectedToTime[0].toString());
+    // this.disableTimeFilterApplyButton();
+  }
+
+  changeEndTimeMinute(increment: boolean) {
+    if (increment) {
+      this.incrementMinute(this.selectedToTime);
+    } else {
+      this.decrementMinute(this.selectedToTime);
+    }
+    this.endTimeMinChange(this.selectedToTime[1].toString());
+    // this.disableTimeFilterApplyButton();
+  }
+
+  changeStartTimeMinute(increment: boolean) {
+    if (increment) {
+      this.incrementMinute(this.selectedFromTime);
+    } else {
+      this.decrementMinute(this.selectedFromTime);
+    }
+    this.startTimeMinChange(this.selectedFromTime[1].toString());
+    // this.disableTimeFilterApplyButton();
+  }
+
+  applyTimeFilters() {
+
+    let isFilterChanged = false;
+    let isSortChanged = false;
+
+    if(this.showFilterComponent){
+      let currentSelectedTimeFilter: {fromTime: string, toTime:string, includeMulti: boolean, includeZero: boolean, includeTimeRange: boolean} = {
+        fromTime: null,
+        toTime: null,
+        includeMulti: false,
+        includeZero: false,
+        includeTimeRange: false,
+      };
+  
+      let previousSelectedTimeFilter;
+  
+      if(this.annaFilterService.tooltipSelectedMap.has(this.annaFilterService.selectedRadio)){
+        previousSelectedTimeFilter = this.annaFilterService.tooltipSelectedMap.get(this.annaFilterService.selectedRadio);
+      }
+      else if(this.annaFilterService.initialValueMap.has(this.annaFilterService.selectedRadio)){
+        previousSelectedTimeFilter = this.annaFilterService.initialValueMap.get(this.annaFilterService.selectedRadio);
+      }
+  
+      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";
+  
+      currentSelectedTimeFilter = { fromTime: fromTime24HrFormat, toTime: toTime24HrFormat, includeMulti: this.multiTimeCheckboxChecked, 
+      includeZero: this.zeroTimeCheckboxChecked, includeTimeRange: this.enterTimeCheckboxChecked};
+      
+      isFilterChanged = !isEqual(previousSelectedTimeFilter, currentSelectedTimeFilter);
+
+  
+      if(isFilterChanged){
+        let isFiltered = this.annaFilterService.reOrderAppliedFiltersState(this.clonedTableData,currentSelectedTimeFilter);
+        this.annaFilterService.tooltipSelectedMap.set(this.annaFilterService.selectedRadio,currentSelectedTimeFilter);
+        this.tableData = this.annaFilterService.filterData(this.clonedTableData, "");
+        
+        if(!isFiltered){
+          this.annaFilterService.tooltipSelectedMap.delete(this.annaFilterService.selectedRadio);
+        }
+        this.annaSortService.noSortingAppliedData = cloneDeep(this.tableData);
+        this.disableEnableEachColumnTooltipIcon();            
+      }
+
+      
+  
+    }
+
+
+    if(this.showSortComponent){
+      isSortChanged = (this.tempSortOrder != null && this.tempSortOrder != this.annaSortService.columnSortState.get(this.annaFilterService.selectedRadio));  
+      if(isSortChanged){
+        for (let [key, value] of this.annaSortService.columnSortState.entries()) {
+          this.annaSortService.columnSortState.set(key, "DEFAULT");
+        }
+        this.annaSortService.columnSortState.set(this.annaFilterService.selectedRadio, this.tempSortOrder);
+        this.applySorting(this.annaFilterService.selectedRadio);
+      }
+      else if(isFilterChanged){
+        this.checkIfSortingIsApplied();
+      }
+    }
+    else if(isFilterChanged){
+      this.checkIfSortingIsApplied();
+    }
+
+    if(isFilterChanged && isSortChanged){
+      this.filterAppliedToTable.emit(this.tableData);
+    }
+    else if(isFilterChanged){
+      this.filterAppliedToTable.emit(this.tableData);
+    }
+    else if(isSortChanged){
+      this.sortingAppliedToTable.emit(this.tableData);
+    }
+    
+    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() {
+    for(let [key,value] of this.annaSortService.columnSortState.entries()){
+      if(value == "ASC"){
+          this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(true,this.tableData,key));
+      }
+      else if(value == "DESC"){
+          this.tableData = cloneDeep(this.annaSortService.sortDataForComponentOtherThanLurAndCsrPage(false,this.tableData,key));
+      }
+    }
+  }
+
+  // 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);
+  // }
+
+  disableEnableEachColumnTooltipIcon() {
+    this.tableHeaders.forEach(header => {
+      
+      header.headerInfo.forEach(item => {
+        if (item.showTooltipIcon) {
+          
+          let values = [];
+          item.disableTooltipIcon = true;
+
+          item.filterSortObjectKeys.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.disableTooltipIcon = (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.disableTooltipIcon = false;
+              }
+            }
+            
+          })
+        }
+        
+      });
+    });
+  }
+
+  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});
+  }
+
+  setColumnSortStateMap(){
+    console.log("set column sort state map");
+    this.tableHeaders.forEach(column => {
+        column.headerInfo.forEach( (header) => {
+            if(header.showTooltipIcon && header.isSortRequired){
+                header.isSortRequired.forEach( (item,index) => {
+                  if(item){
+                    this.annaSortService.columnSortState.set(header.filterSortObjectKeys[index], "DEFAULT");  
+                  }
+                })
+            }
+        })
+    });
+  }
+
+  storeSortTypeInTempVariable(event: SortType){
+    this.tempSortOrder = event;
+  }
+
+  unCheckAllCheckbox(){
+      this.tooltipOptions.forEach(item => item.isSelected = false);
+      this.disableSelectAll = false;
+      this.disableClearAll = true;
+      this.disableCheckboxApply = true;
+  }
+
+  selectAllCheckbox(){
+      this.tooltipOptions.forEach(item => item.isSelected = true);
+      this.disableSelectAll = true;
+      this.disableClearAll = false;
+      this.disableCheckboxApply = false;
+  }
+
+  searchForTheItem(str: string){
+      if(str){
+          this.tooltipOptions = cloneDeep(this.clonedTooltipOptions.filter(item => item.data.toLowerCase().includes(str.toLowerCase())));
+          this.tooltipOptions.forEach(element => {
+            element.data = this.boldString(element.data,str);
+          });
+          
+          if(this.tooltipOptions.length > 0){
+              this.tooltipOptions.forEach(item => item.isSelected = true);
+              this.disableSelectAll = true;
+              this.disableClearAll = false;
+              this.disableCheckboxApply = false;
+          
+          }
+          else{
+              this.disableCheckboxApply = true;
+              this.disableClearAll = true;
+              this.disableSelectAll = true;
+          }
+      }
+      else{
+          this.tooltipOptions = cloneDeep(this.clonedTooltipOptions);
+          let unselectedItems = this.tooltipOptions.filter(item => !item.isSelected);
+          let selectedItems = this.tooltipOptions.filter(item => item.isSelected);
+          this.disableSelectAll = unselectedItems.length == 0;
+          this.disableClearAll = selectedItems.length == 0;
+      }
+  }
+
+  boldString(str: string, find: string){
+    var re = new RegExp(find, 'g');
+    return str.replace(re, '<b>'+find+'</b>');
+  }
+
+  removeBoldElementFromString(originalString: string){
+      let firstRegExp = new RegExp('<b>','g');
+      let secondRegExp = new RegExp('</b>','g');
+
+      let ret = originalString.replace(firstRegExp,'');
+      console.log(ret);
+      console.log(ret.replace(secondRegExp,''));
+      return ret.replace(secondRegExp,'');
+  }
+
+  clearSearchedItem(){
+      this.searchItem = "";
+      this.searchForTheItem("");
+  }
+
+  calendarDateChanged(event: any){
+    this.calendarSelection = event;
+    this.enableDisableCalendarApplyBtn();
+  }
+
+  enableDisableCalendarApplyBtn() {
+      this.disableCalendarApplyBtn = !(this.calendarSelection.fromDate && this.calendarSelection.toDate);
+  }
+
+  setInitialValueMapForTimeFilter(key: string) {
+    let data = this.clonedTableData.filter(
+        (obj) => !["", "-", 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],
+        includeMulti: false,
+        includeZero: false,
+        includeTimeRange: false
+    };
+    
+    if (
+        this.gtGeneralConfig.component === "SPOTDETAILS" ||
+        this.gtGeneralConfig.component === "EXCLUDEINVENTORYPOPUP"
+    ) {
+        let includeMulti =
+            this.clonedTableData.findIndex((obj) => obj[key] == "<multi>") !=
+            -1;
+        let includeZero =
+            this.clonedTableData.findIndex((obj) => obj[key] == "0") != -1;
+        let includeTimeRange =
+            this.clonedTableData.findIndex(
+                (obj) => 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") {
+        this.setInitialValueMapForRatingPageTimeFilter(key);
+    } else {
+        this.annaFilterService.initialValueMap.set(key, obj);
+    }
+}
+
+setInitialValueMapForRatingPageTimeFilter(key: string){
+  let includeMulti =
+            this.clonedTableData.findIndex((obj) => obj[key][0] == "<multi>") !=
+            -1;
+        let includeZero =
+            this.clonedTableData.findIndex((obj) => obj[key][0] == "0") != -1;
+        let includeTimeRange =
+            this.clonedTableData.findIndex(
+                (obj) => 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); 
+    }
+
+    startTimeHourChange(val: string){
+        if(val.length == 0 || 1 > parseInt(val) || parseInt(val) > 12){
+            this.startTimeHourErr = true;
+        }
+        else{
+            this.startTimeHourErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+
+    startTimeMinChange(val: string){
+        if(val.length != 2  || 0 > parseInt(val) || parseInt(val) > 59){
+            this.startTimeMinErr = true;
+        }
+        else{
+            this.startTimeMinErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+
+    endTimeHourChange(val: string){
+        if(val.length == 0 || 1 > parseInt(val) || parseInt(val) > 12){
+            this.endTimeHourErr = true;
+        }
+        else{
+            this.endTimeHourErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+
+    endTimeMinChange(val: string){
+        if(val.length != 2  || 0 > parseInt(val) || parseInt(val) > 59){
+            this.endTimeMinErr = true;
+        }
+        else{
+            this.endTimeMinErr = false;
+        }
+        this.disableTimeFilterApplyButton();
+    }
+
+}