adding data browser

2024-09-08 22:11:51 -04:00
parent e88499cbaf
commit 224e6388c1
48 changed files with 1037 additions and 75 deletions
--- a/src/components/query/query.component.ts
+++ b/src/components/query/query.component.ts
@@ -0,0 +1,106 @@
+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,
+  faRemove,
+} from '@fortawesome/free-solid-svg-icons';
+import { ExecuteService } from '../../services/execute.service';
+import { Header } from '../../models/header';
+
+@Component({
+  selector: 'fbi-query',
+  standalone: true,
+  imports: [TreeComponent],
+  templateUrl: './query.component.html',
+  styleUrl: './query.component.scss',
+})
+export class QueryComponent {
+  node: TreeNode = new TreeNode({});
+
+  constructor(
+    private queryService: QueryService,
+    executeService: ExecuteService
+  ) {
+    queryService.Query.subscribe((query: Query) => {
+      executeService.headers(query).subscribe((headers: Header[]) => {
+        this.node = new TreeNode({
+          hidden: true,
+          expanded: true,
+          children: [
+            {
+              label: 'Fields',
+              leaf: false,
+              expanded: true,
+              children: (query?.fields ?? []).map(
+                (field: string, index: number, array: string[]) => {
+                  const actions = [];
+                  if (index !== 0) {
+                    actions.push({
+                      label: 'Move Up',
+                      icon: faArrowUp,
+                      data: { cmd: ACTIONS.UP, data: index - 1 },
+                    });
+                  }
+                  if (index !== array.length - 1) {
+                    actions.push({
+                      label: 'Move Down',
+                      icon: faArrowDown,
+                      data: { cmd: ACTIONS.DOWN, data: index + 1 },
+                    });
+                  }
+                  actions.push({
+                    label: 'Remove',
+                    icon: faRemove,
+                    data: { cmd: ACTIONS.REMOVE },
+                  });
+
+                  const label =
+                    headers.find((header: Header) => header.source === field)
+                      ?.label ?? 'unknown';
+
+                  return {
+                    label: label,
+                    data: field,
+                    actions: actions,
+                  };
+                }
+              ),
+            },
+            { label: 'Filters', expanded: true, leaf: false },
+          ] as TreeNode[],
+        });
+      });
+    });
+  }
+
+  onActionClick(event: { action: Action; node: TreeNode }): void {
+    const data = event.action.data as ActionData;
+    switch (data.cmd) {
+      case ACTIONS.REMOVE:
+        this.queryService.remove(event.node.data);
+        break;
+      case ACTIONS.UP:
+        this.queryService.add(event.node.data, data.data);
+        break;
+      case ACTIONS.DOWN:
+        this.queryService.add(event.node.data, data.data);
+        break;
+    }
+  }
+}
+
+enum ACTIONS {
+  REMOVE = 'del',
+  UP = 'up',
+  DOWN = 'down',
+}
+
+type ActionData = {
+  cmd: ACTIONS;
+  data: any;
+};