Add System component with table display for custom and all beans

2025-06-19 18:36:09 +03:00
parent 4e7af10940
commit ab36ee35b4
24 changed files with 919 additions and 57 deletions
@@ -0,0 +1,148 @@
+import { Component } from '@angular/core';
+import {Bean} from '../../models/Bean';
+import {SystemService} from '../../services/system.service';
+import {
+  MatCard,
+  MatCardContent,
+  MatCardHeader,
+  MatCardSubtitle,
+  MatCardTitle,
+  MatCardTitleGroup
+} from '@angular/material/card';
+import {MatDivider} from '@angular/material/divider';
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell,
+  MatHeaderCellDef, MatHeaderRow,
+  MatHeaderRowDef, MatRow, MatRowDef,
+  MatTable
+} from '@angular/material/table';
+import {MatIconButton} from '@angular/material/button';
+import {MatIcon} from '@angular/material/icon';
+import {MatList, MatListItem} from '@angular/material/list';
+import {MatTab, MatTabGroup} from '@angular/material/tabs';
+
+@Component({
+  selector: 'app-system.component',
+  imports: [
+    MatCard,
+    MatCardSubtitle,
+    MatCardContent,
+    MatCardHeader,
+    MatCardTitle,
+    MatDivider,
+    MatTable,
+    MatColumnDef,
+    MatHeaderCell,
+    MatCell,
+    MatIconButton,
+    MatIcon,
+    MatHeaderCellDef,
+    MatCellDef,
+    MatHeaderRowDef,
+    MatRowDef,
+    MatRow,
+    MatHeaderRow,
+    MatList,
+    MatListItem,
+    MatTabGroup,
+    MatTab
+  ],
+  templateUrl: './system.component.html',
+  styleUrl: './system.component.scss'
+})
+export class SystemComponent {
+
+  // @ViewChild(MatPaginator) paginator: MatPaginator;
+  // @ViewChild(MatSort) sort: MatSort;
+
+  customBeans:Bean[] = [] ;
+  allBeans:Bean[] = [] ;
+  displayedColumns: string[] = ['shortName', 'typeShortName', 'scope'];
+
+  columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+
+  expandedElement: Bean | null = null;
+
+  resultsLength = 0;
+  isLoadingResults = true;
+  isRateLimitReached = false;
+
+  constructor(private systemService: SystemService) { }
+
+  ngOnInit(): void {
+    this.retrieveBeans();
+  }
+
+  retrieveBeans(): void {
+    this.systemService.getCustomBeans()
+      .subscribe(
+          (data: Bean[]) => {
+          this.customBeans = data;
+          console.log(data);
+        },
+          (error: any) => {
+          console.log(error);
+        });
+    this.systemService.getAllBeans()
+      .subscribe(
+        (data: Bean[]) => {
+          this.allBeans = data;
+          console.log(data);
+        },
+        (error: any) => {
+          console.log(error);
+        });
+  }
+
+  /** Checks whether an element is expanded. */
+  isExpanded(element: Bean) {
+    return this.expandedElement === element;
+  }
+
+  /** Toggles the expanded state of an element. */
+  toggle(element: Bean) {
+    this.expandedElement = this.isExpanded(element) ? null : element;
+  }
+
+
+
+  ngAfterViewInit() {
+    //this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
+
+    // If the user changes the sort order, reset back to the first page.
+    /*  this.sort.sortChange.subscribe(() => (this.paginator.pageIndex = 0));
+
+      merge(this.sort.sortChange, this.paginator.page)
+        .pipe(
+          startWith({}),
+          switchMap(() => {
+            this.isLoadingResults = true;
+            return this.exampleDatabase!.getRepoIssues(
+              this.sort.active,
+              this.sort.direction,
+              this.paginator.pageIndex,
+            ).pipe(catchError(() => observableOf(null)));
+          }),
+          map(data => {
+            // Flip flag to show that loading has finished.
+            this.isLoadingResults = false;
+            this.isRateLimitReached = data === null;
+
+            if (data === null) {
+              return [];
+            }
+
+            // Only refresh the result length if there is new data. In case of rate
+            // limit errors, we do not want to reset the paginator to zero, as that
+            // would prevent users from re-triggering requests.
+            this.resultsLength = data.total_count;
+            return data.items;
+          }),
+        )
+        .subscribe(data => (this.data = data));*/
+  }
+
+}