src/components/filter-config/filter-config.component.ts

@@ -1,4 +1,5 @@
-import { Component, inject } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
+import { Filter } from '../../models/filter';
 import { QueryService } from '../../services/query.service';
 
 @Component({
@@ -9,5 +10,6 @@ import { QueryService } from '../../services/query.service';
   styleUrl: './filter-config.component.scss',
 })
 export class FilterConfigComponent {
+  @Input() node!: Filter;
   private queryService = inject(QueryService);
 }

src/components/metadata/metadata.component.html

@@ -5,6 +5,6 @@
   (actionClick)="onActionClick($event)"
 ></fbi-tree>
 
-<fbi-window #filter [config]="windowConfig"
+<fbi-window #filter [config]="windowConfig">
-  ><fbi-filter-config></fbi-filter-config
+  <fbi-filter-config></fbi-filter-config>
-></fbi-window>
+</fbi-window>

src/components/metadata/metadata.component.ts

@@ -2,6 +2,7 @@ import { Component, ViewChild } from '@angular/core';
 import { faAdd, faFilter } from '@fortawesome/free-solid-svg-icons';
 import { combineLatest } from 'rxjs';
 import { Action } from '../../models/action';
+import { Filter } from '../../models/filter';
 import { Query } from '../../models/query';
 import { TreeNode } from '../../models/tree-node';
 import { MetaService } from '../../services/meta.service';
@@ -22,10 +23,10 @@ export class MetadataComponent {
   @ViewChild(WindowComponent) window!: WindowComponent;
 
   windowComponent = WindowComponent;
-
   windowConfig = {
     title: 'test',
   };
+  filter: Filter = new Filter({});
 
   constructor(metaService: MetaService, private queryService: QueryService) {
     combineLatest({
@@ -66,6 +67,7 @@ export class MetadataComponent {
         this.queryService.add(event.node.data);
         break;
       case ACTIONS.FILTER:
+        this.filter = new Filter({ field: event.node.data });
         this.window.show();
         break;
     }

src/enums/filter-op.ts

@@ -0,0 +1,4 @@
+export enum FilterOp {
+  Includes = 'in',
+  Excludes = 'ex',
+}

src/models/filter.ts

@@ -0,0 +1,17 @@
+import { FilterOp } from '../enums/filter-op';
+
+export class Filter {
+  field: string;
+  op: FilterOp;
+  values: string[];
+
+  constructor(data: Partial<Filter>) {
+    this.field = data?.field ?? '';
+    this.op = data?.op ?? FilterOp.Includes;
+    this.values = data?.values ?? [];
+  }
+
+  toString(): string {
+    return `(${this.field}:${this.op}[${this.values.join(',')}])`;
+  }
+}

src/models/query.ts

@@ -1,15 +1,18 @@
+import { Filter } from './filter';
 import { Page } from './page';
 import { Sort } from './sort';
 
 export class Query {
   fields: string[];
-  filter: string[];
+  filter: Filter[];
   sort: Sort;
   page?: Page;
 
   constructor(data: Partial<Query>) {
     this.fields = data?.fields ?? [];
-    this.filter = data?.filter ?? [];
+    this.filter = (data?.filter ?? []).map(
+      (f: Partial<Filter>) => new Filter(f)
+    );
     this.sort = new Sort(data?.sort ?? {});
     if (data?.page) this.page = new Page(data?.page);
   }
@@ -21,7 +24,7 @@ export class Query {
   toString(): string {
     return [
       this.fields.join(','),
-      '',
+      this.filter.map((f: Filter) => f.toString()).join(','),
       this.page?.toString(),
       this.sort.toString(),
     ].join(';');