Saving changes

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

@@ -0,0 +1 @@
+<p>filter-config works!</p>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FilterConfigComponent } from './filter-config.component';
+
+describe('FilterConfigComponent', () => {
+  let component: FilterConfigComponent;
+  let fixture: ComponentFixture<FilterConfigComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FilterConfigComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FilterConfigComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Component, inject, Input } from '@angular/core';
+import { Filter } from '../../models/filter';
+import { QueryService } from '../../services/query.service';
+
+@Component({
+  selector: 'fbi-filter-config',
+  standalone: true,
+  imports: [],
+  templateUrl: './filter-config.component.html',
+  styleUrl: './filter-config.component.scss',
+})
+export class FilterConfigComponent {
+  @Input() node!: Filter;
+  private queryService = inject(QueryService);
+}

src/components/metadata/metadata.component.html

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

src/components/metadata/metadata.component.ts

@@ -1,18 +1,20 @@
 import { Component, ViewChild } from '@angular/core';
-import { TreeComponent } from '../tree/tree.component';
+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';
-import { Action } from '../../models/action';
-import { faAdd, faFilter } from '@fortawesome/free-solid-svg-icons';
 import { QueryService } from '../../services/query.service';
-import { combineLatest } from 'rxjs';
-import { Query } from '../../models/query';
+import { FilterConfigComponent } from '../filter-config/filter-config.component';
+import { TreeComponent } from '../tree/tree.component';
 import { WindowComponent } from '../window/window.component';
 
 @Component({
   selector: 'fbi-metadata',
   standalone: true,
-  imports: [TreeComponent, WindowComponent],
+  imports: [FilterConfigComponent, TreeComponent, WindowComponent],
   templateUrl: './metadata.component.html',
   styleUrl: './metadata.component.scss',
 })
@@ -21,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({
@@ -65,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/components/query/query.component.ts

@@ -1,9 +1,4 @@
 import { Component } from '@angular/core';
-import { TreeComponent } from '../tree/tree.component';
-import { TreeNode } from '../../models/tree-node';
-import { QueryService } from '../../services/query.service';
-import { Query } from '../../models/query';
-import { Action } from '../../models/action';
 import {
   faArrowDown,
   faArrowUp,
@@ -13,9 +8,14 @@ import {
   faSortDesc,
   faSortDown,
 } from '@fortawesome/free-solid-svg-icons';
-import { ExecuteService } from '../../services/execute.service';
-import { Header } from '../../models/header';
 import { SORT } from '../../enums/sort';
+import { Action } from '../../models/action';
+import { Header } from '../../models/header';
+import { Query } from '../../models/query';
+import { TreeNode } from '../../models/tree-node';
+import { ExecuteService } from '../../services/execute.service';
+import { QueryService } from '../../services/query.service';
+import { TreeComponent } from '../tree/tree.component';
 
 @Component({
   selector: 'fbi-query',

src/components/result/result.component.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
-import { TreeComponent } from '../tree/tree.component';
-import { QueryService } from '../../services/query.service';
-import { Query } from '../../models/query';
-import { ExecuteService } from '../../services/execute.service';
-import { TableComponent } from '../table/table.component';
-import { Result } from '../../models/result';
 import { Header } from '../../models/header';
 import { Page } from '../../models/page';
+import { Query } from '../../models/query';
+import { Result } from '../../models/result';
+import { ExecuteService } from '../../services/execute.service';
+import { QueryService } from '../../services/query.service';
+import { TableComponent } from '../table/table.component';
+import { TreeComponent } from '../tree/tree.component';
 
 @Component({
   selector: 'fbi-result',

src/components/select/select.component.ts

@@ -1,9 +1,9 @@
-import { Component, Input, OnInit, inject } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit, inject } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { KeyValue } from '../../models/key-value';
 import { FilterService } from '../../services/filters.service';
-import { FormsModule } from '@angular/forms';
 
 @Component({
   selector: 'fbi-select',

src/components/table/table.component.ts

@@ -7,16 +7,16 @@ import {
   Output,
   SimpleChanges,
 } from '@angular/core';
-import { Header } from '../../models/header';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import {
   faSort,
   faSortDown,
   faSortUp,
 } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { SORT } from '../../enums/sort';
-import { Result } from '../../models/result';
+import { Header } from '../../models/header';
 import { Page } from '../../models/page';
+import { Result } from '../../models/result';
 
 @Component({
   selector: 'fbi-table',

src/components/tree/tree.component.ts

@@ -1,9 +1,9 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { TreeNode } from '../../models/tree-node';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
 import { Action } from '../../models/action';
+import { TreeNode } from '../../models/tree-node';
 
 @Component({
   selector: 'fbi-tree',

src/components/window/window.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule, DOCUMENT } from '@angular/common';
 import {
   Component,
   EventEmitter,
@@ -6,7 +7,6 @@ import {
   Input,
   Output,
 } from '@angular/core';
-import { CommonModule, DOCUMENT } from '@angular/common';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faRectangleXmark } from '@fortawesome/free-regular-svg-icons';
 import { WindowConfig } from './window-config';

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(';');