update event type filter (#2191)

* update event type filter * Uncomment version header * Fix build error * Remove text format on event types filter
frain-dev · Nov 15, 2024 · 73d21bc · 73d21bc
1 parent c9e882f
commit 73d21bc
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 46 deletions.
diff --git a/...src/app/private/components/create-project-component/create-project-component.component.ts b/...src/app/private/components/create-project-component/create-project-component.component.ts
@@ -382,7 +382,7 @@ export class CreateProjectComponent implements OnInit {
 		if (this.privateService.getProjectDetails?.type === 'incoming') return;
 
 		try {
-			const response = await this.createProjectService.getEventTypes();
+			const response = await this.privateService.getEventTypes();
 			this.eventTypes = response.data.event_types ? response.data.event_types : [];
 			return;
 		} catch (error) {

diff --git a/...d/src/app/private/components/create-project-component/create-project-component.service.ts b/...d/src/app/private/components/create-project-component/create-project-component.service.ts
@@ -60,22 +60,6 @@ export class CreateProjectComponentService {
 		});
 	}
 
-	async getEventTypes(): Promise<HTTP_RESPONSE> {
-		return new Promise(async (resolve, reject) => {
-			try {
-				const response = await this.http.request({
-					url: `/event-types`,
-					method: 'get',
-					level: 'org_project'
-				});
-
-				return resolve(response);
-			} catch (error) {
-				return reject(error);
-			}
-		});
-	}
-
 	createEventType(requestDetails: any): Promise<HTTP_RESPONSE> {
 		return new Promise(async (resolve, reject) => {
 			try {

diff --git a/...dashboard/src/app/private/components/create-subscription/create-subscription.component.ts b/...dashboard/src/app/private/components/create-subscription/create-subscription.component.ts
@@ -177,7 +177,7 @@ export class CreateSubscriptionComponent implements OnInit {
 		if (this.privateService.getProjectDetails?.type === 'incoming') return;
 
 		try {
-			const response = await this.createSubscriptionService.getEventTypes();
+			const response = await this.privateService.getEventTypes();
 
 			const { event_types } = response.data;
 			this.eventTypes = event_types.filter((type: EVENT_TYPE) => !type.deprecated_at)

diff --git a/...i/dashboard/src/app/private/components/create-subscription/create-subscription.service.ts b/...i/dashboard/src/app/private/components/create-subscription/create-subscription.service.ts
@@ -106,20 +106,4 @@ export class CreateSubscriptionService {
 			}
 		});
 	}
-
-	async getEventTypes(): Promise<HTTP_RESPONSE> {
-		return new Promise(async (resolve, reject) => {
-			try {
-				const response = await this.http.request({
-					url: `/event-types`,
-					method: 'get',
-                    level: 'org_project'
-				});
-
-				return resolve(response);
-			} catch (error) {
-				return reject(error);
-			}
-		});
-	}
 }
diff --git a/...ard/src/app/private/components/event-delivery-filter/event-delivery-filter.component.html b/...ard/src/app/private/components/event-delivery-filter/event-delivery-filter.component.html
@@ -167,15 +167,21 @@
 					<div dropdownTrigger class="border border-new.primary-100 rounded-tl-8px rounded-bl-8px px-10px py-6px text-new.primary-300 text-12">Event Type</div>
 
 					<ng-container dropdownOptions>
-						<div>
-							<form class="border border-new.primary-400 h-36px px-14px py-0 max-w-[200px] w-full rounded-[10px] flex items-center bg-transparent">
-								<img src="/assets/img/search-icon.svg" alt="search icon" class="mr-10px" />
-								<input type="search" placeholder="Search event type" [(ngModel)]="eventsTypeSearchString" (change)="setEventType()" [ngModelOptions]="{ standalone: true }" class="w-full text-neutral-11 outline-none bg-transparent text-12 font-normal" />
-								<button *ngIf="eventsTypeSearchString">
-									<img src="/assets/img/enter-icon.png" alt="enter icon" class="w-16px opacity-75" />
+						<ul class="min-h-[100px] max-h-[200px] overflow-auto">
+							<li
+								convoy-dropdown-option
+								convoy-list-item
+								*ngFor="let type of eventTypes"
+								(click)="setEventType(type.name); toggleFilter('eventType', false)"
+								class="text-14 px-20px"
+								[ngClass]="{ 'text-primary-100 !bg-primary-500': queryParams && queryParams.eventType === type.name }"
+							>
+								<button convoy-button color="neutral" fill="text" class="font-normal text-left w-full !justify-start text-12">
+									{{ type.name }}
 								</button>
-							</form>
-						</div>
+							</li>
+						</ul>
+
 					</ng-container>
 				</div>
 			</ng-container>

diff --git a/...board/src/app/private/components/event-delivery-filter/event-delivery-filter.component.ts b/...board/src/app/private/components/event-delivery-filter/event-delivery-filter.component.ts
@@ -4,7 +4,7 @@ import { ButtonComponent } from 'src/app/components/button/button.component';
 import { DatePickerComponent } from 'src/app/components/date-picker/date-picker.component';
 import { EndpointFilterComponent } from '../endpoints-filter/endpoints-filter.component';
 import { DropdownComponent, DropdownOptionDirective } from 'src/app/components/dropdown/dropdown.component';
-import { FILTER_QUERY_PARAM } from 'src/app/models/event.model';
+import { EVENT_TYPE, FILTER_QUERY_PARAM } from 'src/app/models/event.model';
 import { ActivatedRoute } from '@angular/router';
 import { ListItemComponent } from 'src/app/components/list-item/list-item.component';
 import { ProjectService } from '../../pages/project/project.service';
@@ -61,6 +61,8 @@ export class EventDeliveryFilterComponent implements OnInit {
 		{ name: 'Endpoint', id: 'endpoint', show: false },
 		{ name: 'Event type', id: 'eventType', show: false }
 	];
+
+    eventTypes: EVENT_TYPE[] = [];
 	constructor(private route: ActivatedRoute, private _location: Location, public projectService: ProjectService, private privateService: PrivateService, private generalService: GeneralService, public licenseService: LicensesService) {}
 
 	async ngOnInit() {
@@ -78,6 +80,8 @@ export class EventDeliveryFilterComponent implements OnInit {
 		if (this.eventDeliveriesEndpoint) this.eventDeliveriesEndpointData = await this.getSelectedEndpointData();
 
 		if (!this.portalToken || this.projectService.activeProjectDetails?.type == 'incoming') this.getSourcesForFilter();
+
+        this.getEventTypesForFilter();
 	}
 
 	getFiltersFromURL() {
@@ -185,9 +189,9 @@ export class EventDeliveryFilterComponent implements OnInit {
 		this.filter.emit(this.queryParams);
 	}
 
-	setEventType() {
-		this.eventDelEventType = this.eventsTypeSearchString;
-		this.queryParams = this.generalService.addFilterToURL({ ...this.queryParams, eventType: this.eventsTypeSearchString });
+	setEventType(eventType: string) {
+		this.eventDelEventType = eventType;
+		this.queryParams = this.generalService.addFilterToURL({ ...this.queryParams, eventType });
 		this.checkIfTailModeIsEnabled() ? this.toggleTailMode(false, 'on') : this.toggleTailMode(false, 'off');
 		this.filter.emit(this.queryParams);
 		this.toggleFilter('eventType', false);
@@ -260,6 +264,18 @@ export class EventDeliveryFilterComponent implements OnInit {
 		} catch (error) {}
 	}
 
+    async getEventTypesForFilter() {
+		if (this.projectService.activeProjectDetails?.type === 'incoming') return;
+		try {
+			const response = await this.privateService.getEventTypes();
+			this.eventTypes = response.data.event_types ? response.data.event_types : [];
+			return;
+		} catch (error) {
+			return;
+		}
+	}
+
+
 	showBatchRetry() {
 		this.batchRetry.emit(this.queryParams);
 	}

diff --git a/web/ui/dashboard/src/app/private/private.service.ts b/web/ui/dashboard/src/app/private/private.service.ts
@@ -410,6 +410,22 @@ export class PrivateService {
 					level: 'org_project'
 				});
 
+				return resolve(response);
+			} catch (error) {
+				return reject(error);
+			}
+		});
+	}
+
+    async getEventTypes(): Promise<HTTP_RESPONSE> {
+		return new Promise(async (resolve, reject) => {
+			try {
+				const response = await this.http.request({
+					url: `/event-types`,
+					method: 'get',
+                    level: 'org_project'
+				});
+
 				return resolve(response);
 			} catch (error) {
 				return reject(error);