You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2022/07/09 08:04:19 UTC
[incubator-streampipes] 03/04: [STREAMPIPES-558] Add options bar to marketplace component
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-558
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 9f4b3b5cadde58ef37482c791471ccc35a835f5c
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Sat Jul 9 09:49:02 2022 +0200
[STREAMPIPES-558] Add options bar to marketplace component
---
.../basic-view/basic-view.component.scss | 2 +-
.../data-marketplace.component.html | 34 +++------
.../data-marketplace.component.scss | 28 --------
.../data-marketplace/data-marketplace.component.ts | 83 ++--------------------
.../existing-adapters.component.html | 4 ++
.../existing-adapters.component.scss | 6 ++
.../existing-adapters.component.ts | 7 +-
.../filter-toolbar/filter-toolbar.component.html | 27 +++++--
.../filter-toolbar/filter-toolbar.component.scss | 48 +++++++++++++
.../filter-toolbar/filter-toolbar.component.ts | 17 +++--
ui/src/app/connect/filter/filter.pipe.ts | 64 +++++++++++++----
.../adapter-filter-settings.model.ts} | 31 ++------
12 files changed, 171 insertions(+), 180 deletions(-)
diff --git a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
index a73f16375..86f2cd984 100644
--- a/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
+++ b/ui/projects/streampipes/shared-ui/src/lib/components/basic-view/basic-view.component.scss
@@ -37,7 +37,7 @@
}
.page-container-padding-inner {
- margin: 10px;
+ margin: 20px;
}
.pl-5 {
diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
index cd37e8489..b08e92220 100644
--- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.html
@@ -19,9 +19,9 @@
<sp-basic-view showBackLink="true" [backLinkTarget]="['connect']" [padding]="true">
<div nav fxFlex="100">
+ <sp-connect-filter-toolbar (filterChangedEmitter)="applyFilter($event)"></sp-connect-filter-toolbar>
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end center"
- style="padding-left:10px;padding-right:10px;font-size:14px;" class="page-container-nav"
- *ngIf="selectedIndex === 0 && newAdapterFromDescription === undefined">
+ style="padding-left:10px;padding-right:10px;font-size:14px;" class="page-container-nav">
<button mat-icon-button id="startAdapterTutorial3" (click)="startAdapterTutorial3()"
matTooltip="Tutorial: Generic Adapter">
<mat-icon color="accent">school</mat-icon>
@@ -39,27 +39,15 @@
<mat-spinner [mode]="'indeterminate'" [diameter]="20" color="accent"></mat-spinner>
<h4> Searching for available adapters, please wait...</h4>
</div>
- <div class="container-fluid marketplace-container" *ngIf="!adaptersLoading && !adapterLoadingError">
- <div *ngIf="selectedIndex === 0">
-
- <div *ngIf="newAdapterFromDescription===undefined" fxLayout="row wrap" fxLayoutAlign="start stretch"
- class="adapter-description-container">
- <sp-adapter-description attr.id="{{adapterDescription.name.replaceAll(' ', '_')}}"
- class="adapter-description"
- fxFlex="33" (click)="selectAdapter(adapterDescription.appId)"
- *ngFor="let adapterDescription of filteredAdapterDescriptions | filter:filterTerm"
- [adapter]="adapterDescription"
- (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-adapter-description>
- </div>
-
-
-<!-- <div class="new-adapter-container" fxFlex="100" fxLayout="row" fxLayoutAlign="start start"-->
-<!-- *ngIf="newAdapterFromDescription!==undefined">-->
-<!-- <sp-new-adapter fxFlex="100" (removeSelectionEmitter)="removeSelection($event)"-->
-<!-- [adapter]="newAdapterFromDescription"-->
-<!-- (updateAdapterEmitter)="updateDescriptionsAndRunningAdatpers()"></sp-new-adapter>-->
-<!-- </div>-->
-
+ <div class="container-fluid marketplace-container" *ngIf="!adaptersLoading && !adapterLoadingError && currentFilter">
+ <div fxLayout="row wrap" fxLayoutAlign="start stretch"
+ class="adapter-description-container">
+ <sp-adapter-description attr.id="{{adapterDescription.name.replaceAll(' ', '_')}}"
+ class="adapter-description"
+ fxFlex="33"
+ (click)="selectAdapter(adapterDescription.appId)"
+ *ngFor="let adapterDescription of adapterDescriptions | adapterFilter:currentFilter"
+ [adapter]="adapterDescription"></sp-adapter-description>
</div>
</div>
</div>
diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss
index 90345358c..04d1f5dca 100644
--- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.scss
@@ -46,38 +46,10 @@
background: #EEE;
}
-#categoryFilter {
- margin-top: 20px;
-}
-
-.fixed-height {
- height: 50px;
-}
-
-.form-style {
- margin: 0px 5px 0px 0px;
-}
-
.icon-style {
margin: 15px 4px 0px 0px;
color: var(--color-accent);
}
-.data-marketplace-options {
- padding:0px;
- background-color: var(--color-bg-1);
- border-bottom: 1px solid var(--color-bg-3);
-}
-.data-marketplace-options-item {
- display: inline;
- margin-right: 10px;
-}
-::ng-deep .mat-select-panel {
- background: #fff;
-}
-
-::ng-deep .mat-select-panel:not([class*=mat-elevation-z]) {
- box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
-}
diff --git a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
index 95e454535..844509a0d 100644
--- a/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
+++ b/ui/src/app/connect/components/data-marketplace/data-marketplace.component.ts
@@ -16,14 +16,14 @@
*
*/
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
import { DataMarketplaceService } from '../../services/data-marketplace.service';
import { ShepherdService } from '../../../services/tour/shepherd.service';
import { ConnectService } from '../../services/connect.service';
-import { FilterPipe } from '../../filter/filter.pipe';
import { AdapterDescriptionUnion } from '@streampipes/platform-services';
import { DialogService } from '@streampipes/shared-ui';
import { Router } from '@angular/router';
+import { AdapterFilterSettingsModel } from '../../model/adapter-filter-settings.model';
@Component({
selector: 'sp-data-marketplace',
@@ -31,24 +31,14 @@ import { Router } from '@angular/router';
styleUrls: ['./data-marketplace.component.scss']
})
export class DataMarketplaceComponent implements OnInit {
- adapterDescriptions: AdapterDescriptionUnion[];
- newAdapterFromDescription: AdapterDescriptionUnion;
- filteredAdapterDescriptions: AdapterDescriptionUnion[];
- adapters: AdapterDescriptionUnion[];
- filteredAdapters: AdapterDescriptionUnion[];
- visibleAdapters: AdapterDescriptionUnion[];
-
- @Output()
- selectAdapterEmitter: EventEmitter<AdapterDescriptionUnion> = new EventEmitter<AdapterDescriptionUnion>();
-
- selectedIndex = 0;
- filterTerm = '';
- pipe: FilterPipe = new FilterPipe();
+ adapterDescriptions: AdapterDescriptionUnion[];
adaptersLoading = true;
adapterLoadingError = false;
+ currentFilter: AdapterFilterSettingsModel;
+
constructor(private dataMarketplaceService: DataMarketplaceService,
private shepherdService: ShepherdService,
private connectService: ConnectService,
@@ -57,11 +47,6 @@ export class DataMarketplaceComponent implements OnInit {
}
ngOnInit() {
- this.updateDescriptionsAndRunningAdatpers();
- this.visibleAdapters = this.adapters;
- }
-
- updateDescriptionsAndRunningAdatpers() {
this.getAdapterDescriptions();
}
@@ -73,10 +58,8 @@ export class DataMarketplaceComponent implements OnInit {
.getAdapterDescriptions()
.subscribe((allAdapters) => {
this.adapterDescriptions = allAdapters;
- // this.adapterDescriptions = this.adapterDescriptions.concat(allAdapters[1]);
this.adapterDescriptions
.sort((a, b) => a.name.localeCompare(b.name));
- this.filteredAdapterDescriptions = this.adapterDescriptions;
this.adaptersLoading = false;
}, error => {
console.log(error);
@@ -85,12 +68,6 @@ export class DataMarketplaceComponent implements OnInit {
});
}
-
-
- selectedIndexChange(index: number) {
- this.selectedIndex = index;
- }
-
startAdapterTutorial() {
this.shepherdService.startAdapterTour();
}
@@ -108,53 +85,7 @@ export class DataMarketplaceComponent implements OnInit {
// this.shepherdService.trigger('select-adapter');
}
- templateFromRunningAdapter(adapter: AdapterDescriptionUnion) {
- adapter.elementId = undefined;
- adapter._rev = undefined;
- this.selectedIndexChange(0);
- //this.selectAdapter(adapter);
-
+ applyFilter(filter: AdapterFilterSettingsModel) {
+ this.currentFilter = { ...filter };
}
-
- removeSelection() {
- this.newAdapterFromDescription = undefined;
- }
-
- updateFilterTerm(inputValue) {
- this.filterTerm = inputValue;
- }
-
- filterAdapter(event) {
- const filteredAdapterTypes = this.filterAdapterType(this.adapterDescriptions);
- const filteredAdapterTemplateTypes = this.filterAdapterType(this.adapters);
-
- const filteredAdapterCategories = this.filterAdapterCategory(filteredAdapterTypes);
- const filteredAdapterTemplateCategories = this.filterAdapterCategory(filteredAdapterTemplateTypes);
-
- this.filteredAdapterDescriptions = filteredAdapterCategories;
- this.filteredAdapters = filteredAdapterTemplateCategories;
- }
-
- filterAdapterCategory(currentElements: AdapterDescriptionUnion[]): AdapterDescriptionUnion[] {
- // TODO
- // if (this.selectedCategory === this.adapterCategories[0].code) {
- // return currentElements;
- // } else {
- // return currentElements.filter(adapterDescription => adapterDescription.category.indexOf(this.selectedCategory) !== -1);
- // }
- return [];
- }
-
- filterAdapterType(currentElements: AdapterDescriptionUnion[]): AdapterDescriptionUnion[] {
- // TODO
- // if (this.selectedType === this.adapterTypes[0]) {
- // return currentElements;
- // } else if (this.selectedType === this.adapterTypes[1]) {
- // return currentElements.filter(adapterDescription => this.connectService.isDataSetDescription(adapterDescription));
- // } else if (this.selectedType === this.adapterTypes[2]) {
- // return currentElements.filter(adapterDescription => !this.connectService.isDataSetDescription(adapterDescription));
- // }
- return [];
- }
-
}
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
index 8ee8694a0..f15618f0a 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.html
@@ -21,6 +21,10 @@
<button mat-button mat-raised-button color="accent" (click)="createNewAdapter()">
<i class="material-icons">add</i> New adapter
</button>
+ <sp-connect-filter-toolbar
+ class="filter-bar-margin"
+ (filterChangedEmitter)="applyFilter($event)">
+ </sp-connect-filter-toolbar>
</div>
<div fxFlex="100" fxLayout="column">
<div class="assemblyOptions sp-blue-bg mt-20" style="padding:5px;">
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
index b69117a5f..61fa0a5e3 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
@@ -44,3 +44,9 @@
cursor: pointer;
color: #FFEB3B;
}
+
+.filter-bar-margin {
+ margin-left: 10px;
+ padding-left: 10px;
+ border-left: 2px solid var(--color-bg-2)
+}
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
index 53bc49661..275a1f9a8 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
+++ b/ui/src/app/connect/components/existing-adapters/existing-adapters.component.ts
@@ -21,7 +21,7 @@ import { AdapterDescriptionUnion, PipelineElementService } from '@streampipes/pl
import { MatTableDataSource } from '@angular/material/table';
import { ConnectService } from '../../services/connect.service';
import { DataMarketplaceService } from '../../services/data-marketplace.service';
-import { DialogRef, PanelType, DialogService } from '@streampipes/shared-ui';
+import { DialogRef, DialogService, PanelType } from '@streampipes/shared-ui';
import { DeleteAdapterDialogComponent } from '../../dialog/delete-adapter-dialog/delete-adapter-dialog.component';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
@@ -30,6 +30,7 @@ import { UserRole } from '../../../_enums/user-role.enum';
import { AuthService } from '../../../services/auth.service';
import { HelpComponent } from '../../../editor/dialog/help/help.component';
import { Router } from '@angular/router';
+import { AdapterFilterSettingsModel } from '../../model/adapter-filter-settings.model';
@Component({
selector: 'sp-existing-adapters',
@@ -168,4 +169,8 @@ export class ExistingAdaptersComponent implements OnInit {
this.router.navigate(['connect', 'create']);
}
+ applyFilter(filter: AdapterFilterSettingsModel) {
+
+ }
+
}
diff --git a/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.html b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.html
index ce79d7fd7..60daec146 100644
--- a/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.html
+++ b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.html
@@ -1,16 +1,34 @@
-<div fxLayout="row" class="fixed-height data-marketplace-options">
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ ~
+ -->
+
+<div fxLayout="row" class="fixed-height">
<div class="data-marketplace-options-item pl-5" style="margin-top:8px;" fxLayoutAlign="start center"
fxLayout="row">
<mat-icon color="accent">search</mat-icon>
- <mat-form-field class="form-style">
+ <mat-form-field class="form-style" color="accent" floatLabel="never">
<input matInput placeholder="Find Element" value="" (input)="updateFilterTerm($event.target.value)"
name="something">
</mat-form-field>
</div>
<div class="data-marketplace-options-item">
<mat-form-field color="accent">
- <mat-select [(value)]="selectedType" (selectionChange)="filterAdapter($event)">
+ <mat-select [(value)]="currentFilter.selectedType" (selectionChange)="filterAdapter($event)">
<mat-option *ngFor="let type of adapterTypes" [value]="type">
{{type}}
</mat-option>
@@ -19,7 +37,7 @@
</div>
<div class="data-marketplace-options-item">
<mat-form-field color="accent">
- <mat-select [(value)]="selectedCategory" (selectionChange)="filterAdapter($event)">
+ <mat-select [(value)]="currentFilter.selectedCategory" (selectionChange)="filterAdapter($event)">
<mat-option *ngFor="let category of adapterCategories" [value]="category.code">
{{category.label}}
</mat-option>
@@ -27,5 +45,4 @@
</mat-form-field>
</div>
<span fxFlex></span>
-
</div>
diff --git a/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.scss b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.scss
index e69de29bb..c239b471b 100644
--- a/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.scss
+++ b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.scss
@@ -0,0 +1,48 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+::ng-deep .mat-select-panel {
+ background: #fff;
+}
+
+::ng-deep .mat-select-panel:not([class*=mat-elevation-z]) {
+ box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
+}
+
+#categoryFilter {
+ margin-top: 20px;
+}
+
+.data-marketplace-options {
+ padding:0px;
+ background-color: var(--color-bg-1);
+ border-bottom: 1px solid var(--color-bg-3);
+}
+
+.data-marketplace-options-item {
+ display: inline;
+ margin-right: 10px;
+}
+
+.form-style {
+ margin: 0px 5px 0px 0px;
+}
+
+.fixed-height {
+ height: 50px;
+}
diff --git a/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.ts b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.ts
index c8dd09a73..5db11ff92 100644
--- a/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.ts
+++ b/ui/src/app/connect/components/filter-toolbar/filter-toolbar.component.ts
@@ -1,6 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { DataMarketplaceService } from '../../services/data-marketplace.service';
import { MatSelectChange } from '@angular/material/select';
+import { AdapterFilterSettingsModel } from '../../model/adapter-filter-settings.model';
@Component({
selector: 'sp-connect-filter-toolbar',
@@ -9,11 +10,13 @@ import { MatSelectChange } from '@angular/material/select';
})
export class SpConnectFilterToolbarComponent implements OnInit {
- adapterTypes: string[] = ['All types', 'Data Set', 'Data Stream'];
- selectedType = 'All types';
+ @Output()
+ filterChangedEmitter: EventEmitter<AdapterFilterSettingsModel> = new EventEmitter<AdapterFilterSettingsModel>();
+ adapterTypes: string[] = ['All types', 'Data Set', 'Data Stream'];
adapterCategories: any;
- selectedCategory: any = 'All';
+
+ currentFilter: AdapterFilterSettingsModel = {textFilter: '', selectedCategory: 'All', selectedType: 'All types'};
constructor(private dataMarketplaceService: DataMarketplaceService) {
@@ -27,15 +30,17 @@ export class SpConnectFilterToolbarComponent implements OnInit {
this.dataMarketplaceService.getAdapterCategories().subscribe(res => {
this.adapterCategories = res;
this.adapterCategories.unshift({ label: 'All categories', description: '', code: 'All' });
+ this.filterChangedEmitter.emit(this.currentFilter);
});
}
filterAdapter(event: MatSelectChange) {
-
+ this.filterChangedEmitter.emit(this.currentFilter);
}
updateFilterTerm(event: string) {
-
+ this.currentFilter.textFilter = event;
+ this.filterChangedEmitter.emit(this.currentFilter);
}
diff --git a/ui/src/app/connect/filter/filter.pipe.ts b/ui/src/app/connect/filter/filter.pipe.ts
index b7f663fb8..37a8f775f 100644
--- a/ui/src/app/connect/filter/filter.pipe.ts
+++ b/ui/src/app/connect/filter/filter.pipe.ts
@@ -18,24 +18,62 @@
import { Pipe, PipeTransform } from '@angular/core';
import { AdapterDescriptionUnion } from '@streampipes/platform-services';
+import { AdapterFilterSettingsModel } from '../model/adapter-filter-settings.model';
+import { ConnectService } from '../services/connect.service';
@Pipe({
- name: 'filter'
+ name: 'adapterFilter'
})
export class FilterPipe implements PipeTransform {
- transform(adapterDescriptions: AdapterDescriptionUnion[], filterTerm?: any): any {
- // check if search filterTerm is undefined
- if (filterTerm === undefined || !adapterDescriptions) { return adapterDescriptions; }
- return adapterDescriptions.filter(adapterDescription => {
- if (adapterDescription.name == null) {
- return true;
- } else {
- adapterDescription.name.replace(' ', '_');
- return adapterDescription.name.toLowerCase().includes(filterTerm.toLowerCase()) ||
- adapterDescription.description.toLowerCase().includes(filterTerm.toLowerCase());
- }
- });
+ constructor(private connectService: ConnectService) {
+ }
+
+ transform(adapterDescriptions: AdapterDescriptionUnion[],
+ activeFilters: AdapterFilterSettingsModel): AdapterDescriptionUnion[] {
+ return adapterDescriptions.filter(a => this.meetsFilterCondition(a, activeFilters));
+ }
+
+ private meetsFilterCondition(adapterDescription: AdapterDescriptionUnion,
+ activeFilters: AdapterFilterSettingsModel): boolean {
+ return this.meetsFilterTypeCondition(adapterDescription, activeFilters.selectedType) &&
+ this.meetsFilterCategoryCondition(adapterDescription, activeFilters.selectedCategory) &&
+ this.meetsFilterTextCondition(adapterDescription, activeFilters.textFilter);
+ }
+
+ private meetsFilterTypeCondition(adapterDescription: AdapterDescriptionUnion,
+ selectedType: string): boolean {
+ if (selectedType === 'All types') {
+ return true;
+ } else if (selectedType === 'Data Set') {
+ return this.connectService.isDataSetDescription(adapterDescription);
+ } else if (selectedType === 'Data Stream') {
+ return !this.connectService.isDataSetDescription(adapterDescription);
+ }
+ }
+
+ private meetsFilterCategoryCondition(adapterDescription: AdapterDescriptionUnion,
+ selectedCategory: string): boolean {
+ if (selectedCategory === 'All') {
+ return true;
+ } else {
+ return adapterDescription.category.indexOf(selectedCategory) !== -1;
+ }
+ }
+
+ private meetsFilterTextCondition(adapterDescription: AdapterDescriptionUnion,
+ filterTerm: string): boolean {
+ if (filterTerm === undefined || filterTerm === '') {
+ return true;
+ } else {
+ if (adapterDescription.name == null) {
+ return true;
+ } else {
+ adapterDescription.name.replace(' ', '_');
+ return adapterDescription.name.toLowerCase().includes(filterTerm.toLowerCase()) ||
+ adapterDescription.description.toLowerCase().includes(filterTerm.toLowerCase());
+ }
}
+ }
}
diff --git a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss b/ui/src/app/connect/model/adapter-filter-settings.model.ts
similarity index 69%
copy from ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
copy to ui/src/app/connect/model/adapter-filter-settings.model.ts
index b69117a5f..3b30586b8 100644
--- a/ui/src/app/connect/components/existing-adapters/existing-adapters.component.scss
+++ b/ui/src/app/connect/model/adapter-filter-settings.model.ts
@@ -16,31 +16,8 @@
*
*/
-
-.mat-table {
-
-}
-
-.mat-paginator {
- border-top: 1px solid rgba(0,0,0,.12);
-}
-
-.mat-row:nth-child(even) {
- background-color: var(--color-bg-2);
-}
-.mat-row:nth-child(odd) {
- background-color: var(--color-bg-3);
-}
-
-.adapter-icon {
- max-height:50px;
-}
-
-.historic {
- cursor: pointer;
- color: #ffa23b;
-}
-.real-time {
- cursor: pointer;
- color: #FFEB3B;
+export interface AdapterFilterSettingsModel {
+ textFilter: string;
+ selectedType: string;
+ selectedCategory: string;
}