Add new components, styles, and services for user management and navigation

2025-06-25 13:44:35 +03:00
parent 9b7465d3dc
commit 2ae1871330
125 changed files with 12940 additions and 1610 deletions
@@ -0,0 +1,107 @@
+
+<mat-card>
+  <mat-card-content>
+    <mat-divider></mat-divider>
+    <mat-tab-group>
+      <mat-tab label="Custom beans">
+        Content 1
+        <table mat-table
+               [dataSource]="customBeans" multiTemplateDataRows="true" class="mat-elevation-z8">
+          @for (column of displayedColumns; track column) {
+            <ng-container matColumnDef="{{column}}">
+              <th mat-header-cell *matHeaderCellDef>{{column}}</th>
+              <td mat-cell *matCellDef="let element ; let k = dataIndex;">{{element[column]}}</td>
+            </ng-container>
+          }
+          <ng-container matColumnDef="expand">
+            <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
+            <td mat-cell *matCellDef="let element">
+              <button
+                matIconButton
+                aria-label="expand row"
+                (click)="toggle(element); $event.stopPropagation()"
+                class="example-toggle-button"
+                [class.example-toggle-button-expanded]="isExpanded(element)">
+                <mat-icon>keyboard_arrow_down</mat-icon>
+              </button>
+            </td>
+          </ng-container>
+
+          <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+          <ng-container matColumnDef="expandedDetail">
+            <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+              <div class="example-element-detail-wrapper"
+                   [class.example-element-detail-wrapper-expanded]="isExpanded(element)">
+                <div class="example-element-detail">
+
+                  <mat-list role="list">
+                    <mat-list-item role="listitem">Name: {{element.name}}</mat-list-item>
+                    <mat-list-item role="listitem">Type: {{element.type}}</mat-list-item>
+                  </mat-list>
+                </div>
+              </div>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
+          <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
+              class="example-element-row"
+              [class.example-expanded-row]="isExpanded(element)"
+              (click)="toggle(element)">
+          </tr>
+          <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
+        </table>
+
+      </mat-tab>
+      <mat-tab label="All beans">
+        Content 2
+        <table mat-table
+               [dataSource]="allBeans" multiTemplateDataRows="true" class="mat-elevation-z8">
+          @for (column of displayedColumns; track column) {
+            <ng-container matColumnDef="{{column}}">
+              <th mat-header-cell *matHeaderCellDef>{{column}}</th>
+              <td mat-cell *matCellDef="let element ; let k = dataIndex;">{{element[column]}}</td>
+            </ng-container>
+          }
+          <ng-container matColumnDef="expand">
+            <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
+            <td mat-cell *matCellDef="let element">
+              <button
+                matIconButton
+                aria-label="expand row"
+                (click)="toggle(element); $event.stopPropagation()"
+                class="example-toggle-button"
+                [class.example-toggle-button-expanded]="isExpanded(element)">
+                <mat-icon>keyboard_arrow_down</mat-icon>
+              </button>
+            </td>
+          </ng-container>
+
+          <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+          <ng-container matColumnDef="expandedDetail">
+            <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+              <div class="example-element-detail-wrapper"
+                   [class.example-element-detail-wrapper-expanded]="isExpanded(element)">
+                <div class="example-element-detail">
+
+                  <mat-list role="list">
+                    <mat-list-item role="listitem">Name: {{element.name}}</mat-list-item>
+                    <mat-list-item role="listitem">Type: {{element.type}}</mat-list-item>
+                  </mat-list>
+                </div>
+              </div>
+            </td>
+          </ng-container>
+
+          <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
+          <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
+              class="example-element-row"
+              [class.example-expanded-row]="isExpanded(element)"
+              (click)="toggle(element)">
+          </tr>
+          <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
+        </table>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>
@@ -0,0 +1,113 @@
+mat-card{
+  //margin: 20px;
+  background-color: rgba(240, 248, 255, 0.7);
+  backdrop-filter: blur(8px);
+}
+
+mat-card-title{
+  color: cyan;
+}
+
+mat-card-subtitle{
+  color: #009dff;
+}
+
+mat-tab{
+  color:black;
+}
+
+
+table {
+  width: 100%;
+  margin-top: 20px;
+  color:lightgrey;
+}
+
+
+mat-list{
+  //background-color: #1389d3;
+  color:black;
+  width: 100%;
+}
+
+mat-list-item{
+  margin: 10px 10px 10px 10px;
+  background-color: #447694;
+
+  color: #009dff;
+}
+
+tr.example-detail-row {
+  height: 0;
+  background: #fffdfd;
+}
+
+tr.example-element-row {
+  cursor: pointer;
+  color: #1389d3;
+  background: #fffdfd;
+}
+
+tr.example-element-row:not(.example-expanded-row):hover {
+  background: whitesmoke;
+}
+
+tr.example-element-row:not(.example-expanded-row):active {
+  background: #efefef;
+}
+
+.example-element-row td {
+  border-bottom-width: 0;
+}
+
+.example-element-detail-wrapper {
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: 0fr;
+  grid-template-columns: 100%;
+  transition: grid-template-rows 225ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.example-element-detail-wrapper-expanded {
+  grid-template-rows: 1fr;
+
+}
+
+.example-element-detail {
+  display: flex;
+  min-height: 0;
+}
+
+.example-element-diagram {
+  min-width: 80px;
+  border: 2px solid black;
+  padding: 8px;
+  font-weight: lighter;
+  margin: 8px 0;
+  height: 104px;
+}
+
+.example-element-symbol {
+  font-weight: bold;
+  font-size: 40px;
+  line-height: normal;
+}
+
+.example-element-description {
+  padding: 16px;
+}
+
+.example-element-description-attribution {
+  opacity: 0.5;
+}
+
+.example-toggle-button {
+  transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.example-toggle-button-expanded {
+  transform: rotate(180deg);
+}
+
+
+
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SystemComponent } from './system.component';
+
+describe('SystemComponent', () => {
+  let component: SystemComponent;
+  let fixture: ComponentFixture<SystemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SystemComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SystemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,138 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
+import {MatCard, MatCardContent, MatCardHeader} from '@angular/material/card';
+import {MatDivider} from '@angular/material/divider';
+import {MatTab, MatTabGroup} from '@angular/material/tabs';
+import {
+  MatCell,
+  MatCellDef,
+  MatColumnDef,
+  MatHeaderCell, MatHeaderCellDef,
+  MatHeaderRow, MatHeaderRowDef,
+  MatRow,
+  MatRowDef,
+  MatTable
+} from '@angular/material/table';
+import {MatList, MatListItem} from '@angular/material/list';
+import {MatIconButton} from '@angular/material/button';
+import {SystemService} from '../../services/system.service';
+import {Bean} from '../../models/Bean';
+import {MatIcon} from '@angular/material/icon';
+
+@Component({
+  selector: 'app-system.component',
+  imports: [
+    MatCard,
+    MatCardHeader,
+    MatCardContent,
+    MatDivider,
+    MatTabGroup,
+    MatTab,
+    MatTable,
+    MatColumnDef,
+    MatIcon,
+    MatCell,
+    MatCellDef,
+    MatList,
+    MatListItem,
+    MatRow,
+    MatHeaderRow,
+    MatRowDef,
+    MatHeaderCell,
+    MatHeaderCellDef,
+    MatIconButton,
+    MatIcon,
+    MatHeaderRowDef
+  ],
+  templateUrl: './system.component.html',
+  styleUrl: './system.component.scss',
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class SystemComponent {
+  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));*/
+}
+
+