Event deliveries search apps filter (#382)

* WIP

* undo push

* update dashboard component with external parameters for cloud support

* remove app portal
update convoy-dashboard

* implement search for apps filter in event deliveries tab

web/ui/dashboard-component/projects/convoy-dashboard/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "convoy-dashboard",
-	"version": "0.0.4",
+	"version": "0.3.1",
 	"description": "Convoy Dashboard UI",
 	"repository": {
 		"type": "git",

web/ui/dashboard-component/projects/convoy-dashboard/src/lib/convoy-dashboard.component.html

@@ -254,13 +254,27 @@ <h2>Configuration</h2>
 								</div>
 							</div>
 
-							<div class="select">
-								<select [ngClass]="{ active: !!eventDeliveriesApp }" aria-label="frequency" [(ngModel)]="eventDeliveriesApp" (change)="getEventDeliveries({ addToURL: true })">
-									<option value="">All Apps</option>
-									<option [value]="app.uid" *ngFor="let app of apps?.content">
-										{{ app.name }}
-									</option>
-								</select>
+							<div class="dropdown large">
+								<button
+									class="filter--button dropdown--button"
+									[ngClass]="{ active: !!eventDeliveriesApp }"
+									(click)="showOverlay = true; showEventDeliveriesAppsDropdown = !showEventDeliveriesAppsDropdown"
+								>
+									<img src="/assets/img/apps-icon-grey.svg" alt="apps filter icon" />
+									<span>All Apps</span>
+									<img src="/assets/img/angle-arrow-down.svg" alt="arrow down icon" />
+								</button>
+								<div class="dropdown--list" [ngClass]="{ show: showEventDeliveriesAppsDropdown }">
+									<div class="search">
+										<img src="/assets/img/search-icon.svg" alt="search icon" />
+										<input type="search" placeholder="Search apps here" (input)="searchApps($event)" />
+									</div>
+									<div class="dropdown--list--item" *ngFor="let app of filteredApps">
+										<input type="radio" name="app" [value]="app.uid" [id]="app.uid" [checked]="app.uid === eventDeliveriesApp" (change)="updateEventDevliveryAppFilter(app.uid, $event)" />
+										<label [for]="app.uid">{{ app.name }}</label>
+									</div>
+									<p *ngIf="filteredApps.length === 0">No app to display</p>
+								</div>
 							</div>
 
 							<div class="filter--button event-button active" *ngIf="eventDeliveryFilteredByEventId !== ''">
@@ -542,4 +556,4 @@ <h5>{{ endpoint.description }}</h5>
 	</div>
 </div>
 
-<div class="overlay" *ngIf="showOverlay" (click)="showOverlay = false; showEventDeliveriesStatusDropdown = false"></div>
+<div class="overlay" *ngIf="showOverlay" (click)="showOverlay = false; showEventDeliveriesStatusDropdown = false; showEventDeliveriesAppsDropdown = false"></div>

web/ui/dashboard-component/projects/convoy-dashboard/src/lib/convoy-dashboard.component.scss

@@ -322,3 +322,37 @@
 	font-size: 12px;
 	margin-top: 10px;
 }
+
+.dropdown {
+	&.large {
+		.dropdown--list {
+			width: 249px;
+		}
+
+		p {
+			text-align: center;
+			font-style: italic;
+		}
+	}
+}
+
+.search {
+	display: flex;
+	background: #ffffff;
+	border: 1px solid #edeff5;
+	box-sizing: border-box;
+	border-radius: 10px;
+	padding: 10px 15px;
+	align-items: center;
+	margin-bottom: 20px;
+
+	img {
+		margin-right: 10px;
+	}
+
+	input {
+		font-size: 14px;
+		border: none;
+		padding: 0;
+	}
+}

web/ui/dashboard-component/projects/convoy-dashboard/src/lib/convoy-dashboard.component.ts

@@ -38,6 +38,7 @@ export class ConvoyDashboardComponent implements OnInit {
 	}[] = [];
 	events!: { pagination: PAGINATION; content: EVENT[] };
 	apps!: { pagination: PAGINATION; content: APP[] };
+	filteredApps!: APP[];
 	eventDetailsTabs = [
 		{ id: 'data', label: 'Event' },
 		{ id: 'response', label: 'Response' },
@@ -82,6 +83,7 @@ export class ConvoyDashboardComponent implements OnInit {
 	eventDeliveryFilteredByStatus: string[] = [];
 	showOverlay = false;
 	showEventDeliveriesStatusDropdown = false;
+	showEventDeliveriesAppsDropdown = false;
 	@Input('apiURL') apiURL: string = '';
 	@Input('isCloud') isCloud: boolean = false;
 	@Input('groupId') groupId: string = '';
@@ -326,6 +328,11 @@ export class ConvoyDashboardComponent implements OnInit {
 		}
 	}
 
+	updateEventDevliveryAppFilter(appId: string, isChecked: any) {
+		if (isChecked.target.checked) this.eventDeliveriesApp = appId;
+		this.getEventDeliveries({ addToURL: true });
+	}
+
 	async getEventDeliveries(requestDetails?: { addToURL?: boolean }) {
 		if (requestDetails?.addToURL) this.addFilterToURL({ section: 'eventDels' });
 		const { startDate, endDate } = this.setDateForFilter(this.eventDeliveriesFilterDateRange.value);
@@ -379,20 +386,22 @@ export class ConvoyDashboardComponent implements OnInit {
 		}
 	}
 
-	async getApps() {
+	async getApps(search?: string) {
 		try {
 			const appsResponse = await this.convyDashboardService.request({
-				url: this.getAPIURL(`/apps?groupID=${this.activeGroup || ''}&sort=AESC&page=${this.appsPage || 1}&perPage=10`),
+				url: this.getAPIURL(`/apps?groupID=${this.activeGroup || ''}&sort=AESC&page=${this.appsPage || 1}&perPage=10${search ? `&q=${search}` : ''}`),
 				method: 'get'
 			});
 
-			if (this.apps?.pagination?.next === this.appsPage) {
+			if (!search && this.apps?.pagination?.next === this.appsPage) {
 				const content = [...this.apps.content, ...appsResponse.data.content];
 				const pagination = appsResponse.data.pagination;
 				this.apps = { content, pagination };
 				return;
 			}
-			this.apps = appsResponse.data;
+
+			if (!search) this.apps = appsResponse.data;
+			this.filteredApps = appsResponse.data.content;
 			if (this.activeTab === 'apps') this.detailsItem = this.apps?.content[0];
 			return;
 		} catch (error) {
@@ -556,4 +565,13 @@ export class ConvoyDashboardComponent implements OnInit {
 	checkIfEventDeliveryStatusFilterOptionIsSelected(status: string): boolean {
 		return this.eventDeliveryFilteredByStatus?.length > 0 ? this.eventDeliveryFilteredByStatus.includes(status) : false;
 	}
+
+	checkIfEventDeliveryAppFilterOptionIsSelected(appId: string): boolean {
+		return appId === this.eventDeliveriesApp;
+	}
+
+	searchApps(searchInput: any) {
+		const searchString = searchInput.target.value;
+		searchString ? this.getApps(searchString) : (this.filteredApps = this.apps.content);
+	}
 }

web/ui/dashboard/package.json

@@ -24,7 +24,7 @@
 		"@angular/router": "~13.0.0",
 		"angular-prism": "^0.1.20",
 		"chart.js": "^3.6.0",
-		"convoy-dashboard": "0.0.4",
+		"convoy-dashboard": "0.3.1",
 		"date-fns": "^2.27.0",
 		"moment": "^2.29.1",
 		"ng2-prism": "^2.3.2",

web/ui/dashboard/src/app/private/pages/app/app.component.html

@@ -27,5 +27,5 @@
 
 	<!-- <convoy-app-portal></convoy-app-portal> -->
 	<!-- <app-portal></app-portal> -->
-	<convoy-app></convoy-app>
+	<!-- <convoy-app></convoy-app> -->
 </div>

web/ui/dashboard/src/scss/_table.scss

@@ -27,6 +27,10 @@
 	.dropdown {
 		position: relative;
 
+		&.large {
+			min-width: 145px;
+		}
+
 		.dropdown--list {
 			position: absolute;
 			top: 110%;