fix filters in events and event deliveries

web/ui/dashboard/src/app/private/components/date-filter/date-filter.component.html

@@ -1,17 +1,25 @@
 <div class="dropdown">
-	<button [ngClass]="{ active: dateRange.value.startDate !== '' && dateRange.value.endDate !== '' }" class="button button__filter button--has-icon" (click)="statsPicker.open()">
+	<button [ngClass]="{ active: dateRange.value.startDate && dateRange.value.endDate }" class="button button__filter button--has-icon" (click)="statsPicker.open()">
 		<img src="/assets/img/calendar-icon.svg" class="margin-right__4px" alt="calender icon" />
 		<span class="color__grey margin-right__4px">Date</span>
-		<mat-date-range-input [formGroup]="dateRange" [rangePicker]="statsPicker">
+
+		<mat-date-range-input [formGroup]="dateRange" [max]="maxDate" [rangePicker]="statsPicker">
 			<input matStartDate formControlName="startDate" placeholder="Start date" />
 			<input matEndDate formControlName="endDate" placeholder="End date" />
 		</mat-date-range-input>
+
 		<mat-date-range-picker #statsPicker [disabled]="false">
 			<mat-datepicker-actions class="flex__justify-start">
-				<button mat-raised-button class="button button__primary button__small" matDatepickerApply (click)="setDate()">Apply</button>
-				<button mat-button matDatepickerCancel class="button button__clear button__small margin-left__10px">Clear</button>
+				<button class="button button__primary button__small" matDatepickerApply (click)="setDate()">Apply</button>
+				<button matDatepickerCancel class="button button__clear button__small margin-left__10px" (click)="clearDate()">Clear</button>
 			</mat-datepicker-actions>
 		</mat-date-range-picker>
-		<img src="/assets/img/angle-arrow-down.svg" class="margin-right__0px" alt="arrow down icon" />
+
+		<img src="/assets/img/angle-arrow-down.svg" class="margin-right__0px" alt="arrow down icon" *ngIf="!dateRange.value.startDate && !dateRange.value.endDate" />
+		<button class="button button__clear" *ngIf="dateRange.value.startDate && dateRange.value.endDate" (click)="clearDate($event)">
+			<svg width="10" height="10" fill="var(--primary-color)">
+				<use xlink:href="#close-icon"></use>
+			</svg>
+		</button>
 	</button>
 </div>

web/ui/dashboard/src/app/private/components/date-filter/date-filter.component.ts

@@ -1,5 +1,6 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
 	selector: 'date-filter',
@@ -8,22 +9,30 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 })
 export class DateFilterComponent implements OnInit {
 	dateRange: FormGroup = this.formBuilder.group({
-		startDate: [{ value: '', disabled: true }],
-		endDate: [{ value: '', disabled: true }]
+		startDate: [{ value: null, disabled: true }],
+		endDate: [{ value: null, disabled: true }]
 	});
 	@Output() selectedDateRange = new EventEmitter<any>();
-	showMatDatepicker = false;
+	@Output() clearDates = new EventEmitter<any>();
+	@Input('dateRangeValue') dateRangeValue?: {
+		startDate: string | Date;
+		endDate: string | Date;
+	};
+	maxDate = new Date();
 
-	constructor(private formBuilder: FormBuilder) {}
+	constructor(private formBuilder: FormBuilder, private route: ActivatedRoute) {}
 
-	ngOnInit(): void {}
+	ngOnInit(): void {
+		if (this.dateRangeValue) this.dateRange.patchValue(this.dateRangeValue);
+	}
 
 	setDate() {
 		this.selectedDateRange.emit(this.dateRange.value);
 	}
 
-	clearDate() {
+	clearDate(event?: any) {
+		event?.stopPropagation();
+		this.clearDates.emit();
 		this.dateRange.patchValue({ startDate: '', endDate: '' });
-		this.setDate();
 	}
 }

web/ui/dashboard/src/app/private/components/date-filter/date-filter.module.ts

@@ -4,10 +4,11 @@ import { DateFilterComponent } from './date-filter.component';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
 	declarations: [DateFilterComponent],
-	imports: [CommonModule, ReactiveFormsModule, FormsModule, MatDatepickerModule, MatNativeDateModule],
+	imports: [CommonModule, ReactiveFormsModule, FormsModule, MatDatepickerModule, MatNativeDateModule, RouterModule],
 	exports: [DateFilterComponent]
 })
 export class DateFilterModule {}

web/ui/dashboard/src/app/private/components/time-filter/time-filter.component.html

@@ -1,8 +1,13 @@
 <div class="dropdown">
-	<button class="button button__filter button--has-icon" (click)="showDropdown = !showDropdown" [ngClass]="{ active: isFilterUpdated }">
+	<button class="button button__filter button--has-icon" (click)="showDropdown = !showDropdown" [ngClass]="{ active: filterIsActive() }">
 		<img src="assets/img/clock.svg" class="mar" alt="time filter icon" />
 		<span>Time</span>
-		<img class="margin-left__16px margin-right__0px" src="/assets/img/angle-arrow-down.svg" alt="arrow down icon" />
+		<img class="margin-left__16px margin-right__0px" src="/assets/img/angle-arrow-down.svg" *ngIf="!filterIsActive()" alt="arrow down icon" />
+		<button class="button button__clear margin-left__12px" *ngIf="filterIsActive()" (click)="clearFilter($event)">
+			<svg width="10" height="10" fill="var(--primary-color)">
+				<use xlink:href="#close-icon"></use>
+			</svg>
+		</button>
 	</button>
 
 	<div class="dropdown__menu time-filter with-padding" [ngClass]="{ show: showDropdown }">

web/ui/dashboard/src/app/private/components/time-filter/time-filter.component.ts

@@ -37,7 +37,13 @@ export class TimeFilterComponent implements OnInit {
 		this.showDropdown = false;
 	}
 
-	clearFilter() {
+	filterIsActive(): boolean {
+		return !(this.filterStartHour === 0 && this.filterStartMinute === 0 && this.filterEndHour === 23 && this.filterEndMinute === 59);
+	}
+
+	clearFilter(event?: any) {
+		event?.stopPropagation();
+
 		this.filterStartHour = 0;
 		this.filterEndHour = 23;
 		this.filterStartMinute = 0;

web/ui/dashboard/src/app/private/components/time-filter/time-filter.module.ts

@@ -2,13 +2,9 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { TimeFilterComponent } from './time-filter.component';
 
-
-
 @NgModule({
-  declarations: [TimeFilterComponent],
-  imports: [
-    CommonModule
-  ],
-  exports: [TimeFilterComponent]
+	declarations: [TimeFilterComponent],
+	imports: [CommonModule],
+	exports: [TimeFilterComponent]
 })
-export class TimeFilterModule { }
+export class TimeFilterModule {}

web/ui/dashboard/src/app/private/pages/project/events/event-deliveries/event-deliveries.component.html

@@ -1,8 +1,8 @@
-<div class="card events-card rounded--top-left__none rounded--top-right__none">
+<div class="card events-card rounded--top-left__none rounded--top-right__none border__top__none">
 	<div class="padding-x__16px padding-y__24px border__bottom">
 		<div class="flex flex__align-items-center flex__justify-between">
 			<div class="flex">
-				<date-filter (selectedDateRange)="getSelectedDateRange($event)"></date-filter>
+				<date-filter (selectedDateRange)="getSelectedDateRange($event)" [dateRangeValue]="dateFiltersFromURL" (clearDates)="clearFilters('eventsDelDate')"></date-filter>
 				<app-time-filter class="margin-left__14px" (applyFilter)="eventDelsTimeFilterData = $event; getEventDeliveries({ addToURL: true, fromFilter: true })" #eventDeliveryTimerFilter></app-time-filter>
 
 				<div class="dropdown margin-left__14px">
@@ -69,7 +69,7 @@
 					</div>
 				</div>
 
-				<div class="button__filter active margin-left__14px" *ngIf="eventDeliveryFilteredByEventId !== ''">
+				<div class="button__filter active margin-left__14px" *ngIf="eventDeliveryFilteredByEventId">
 					Event Filtered
 					<button class="button__clear button--has-icon margin-left__4px" (click)="eventDeliveryFilteredByEventId = ''; getEventDeliveries()">
 						<img src="assets/img/close-icon.svg" alt="close icon" />
@@ -81,7 +81,7 @@
 					(click)="fetchRetryCount()"
 					[ngClass]="{
 						disabled:
-							((eventDeliveriesFilterDateRange.value.startDate == '' || eventDeliveriesFilterDateRange.value.endDate == '') &&
+							((dateFiltersFromURL.startDate == '' || dateFiltersFromURL.endDate == '') &&
 								eventDeliveriesApp == '' &&
 								eventDeliveryFilteredByEventId == '' &&
 								!eventDeliveriesStatusFilterActive) ||
@@ -97,19 +97,20 @@
 				(click)="clearFilters()"
 				[ngClass]="{
 					disabled:
-						(eventDeliveriesFilterDateRange.value.startDate == '' || eventDeliveriesFilterDateRange.value.endDate == '') &&
-						eventDeliveriesApp == '' &&
-						eventDeliveryFilteredByEventId == '' &&
+						(dateFiltersFromURL.startDate == '' || dateFiltersFromURL.endDate == '') &&
+						(eventDeliveriesApp?.length == 0 || eventDeliveriesApp == undefined) &&
+						(eventDeliveryFilteredByEventId?.length == 0 || eventDeliveryFilteredByEventId == undefined) &&
 						!eventDeliveriesStatusFilterActive &&
 						eventDelsTimeFilterData.startTime == 'T00:00:00' &&
 						eventDelsTimeFilterData.endTime == 'T23:59:59'
 				}"
 			>
-				Clear Filter
+				Clear Filters
 			</button>
 		</div>
 	</div>
-	<div class="event__table width-100">
+
+	<div class="event__table">
 		<div class="table table--container has-loader" id="event-deliveries-table-container" *ngIf="displayedEventDeliveries && displayedEventDeliveries.length > 0">
 			<table id="table">
 				<thead>
@@ -213,7 +214,7 @@
 		</svg>
 	</button>
 </div>
-<div class="overlay" *ngIf="showOverlay" (click)="showOverlay = false; showEventDeliveriesAppsDropdown = false"></div>
+<div class="overlay" *ngIf="showOverlay" (click)="showOverlay = false; showEventDeliveriesAppsDropdown = false; showEventDeliveriesStatusDropdown = false"></div>
 <div class="_overlay" *ngIf="showBatchRetryModal" (click)="showBatchRetryModal = false"></div>
 <!-- batch retry modal  -->
 <div class="modal modal__center" *ngIf="showBatchRetryModal">

web/ui/dashboard/src/app/private/pages/project/events/event-deliveries/event-deliveries.component.scss

@@ -1 +1,5 @@
-
+.event {
+	&__table {
+		max-width: unset;
+	}
+}