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,38 @@
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p><p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p><p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p><p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+<p>admin-welcome.component works!</p>
+
+
+
+
+
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminWelcomeComponent } from './admin-welcome.component';
+
+describe('AdminWelcomeComponent', () => {
+  let component: AdminWelcomeComponent;
+  let fixture: ComponentFixture<AdminWelcomeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdminWelcomeComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AdminWelcomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-admin-welcome.component',
+  imports: [],
+  templateUrl: './admin-welcome.component.html',
+  styleUrl: './admin-welcome.component.scss'
+})
+export class AdminWelcomeComponent {
+
+}
@@ -0,0 +1,50 @@
+<!--<p>admin.component works!</p>-->
+
+  <app-navigation
+    class="pc-sidebar"
+    [ngClass]="{
+    'navbar-collapsed': navCollapsed,
+    'mob-open': navCollapsedMob
+  }"
+    (NavCollapse)="this.navCollapsed = !this.navCollapsed"
+  />
+<app-nav-bar (NavCollapsedMob)="navMobClick()" (NavCollapse)="this.navCollapsed = !this.navCollapsed"/>
+  <div class="pc-container">
+    <div class="coded-wrapper">
+      <div class="coded-content">
+        <div class="coded-inner-content">
+          <app-breadcrumb />
+          <div class="main-body">
+            <div class="page-wrapper">
+              <router-outlet />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pc-menu-overlay" (click)="closeMenu()" (keydown)="handleKeyDown($event)" tabindex="0"></div>
+  </div>
+
+
+
+
+
+
+
+<!--<div class="pc-container">
+  <div class="coded-wrapper">
+    <div class="coded-content">
+      <div class="coded-inner-content">
+        <app-breadcrumb />
+        <div class="main-body">
+          <div class="page-wrapper">
+            <router-outlet></router-outlet>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="pc-menu-overlay" (click)="closeMenu()" (keydown)="handleKeyDown($event)" tabindex="0"></div>
+</div>-->
+
+
@@ -0,0 +1,22 @@
+.example-container {
+  width: 500px;
+  height: 300px;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+
+.example-sidenav-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.example-sidenav {
+  padding: 20px;
+}
+
+.pc-sidebar{
+  top: 120px;
+}
+
+
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdminComponent } from './admin.component';
+
+describe('AdminComponent', () => {
+  let component: AdminComponent;
+  let fixture: ComponentFixture<AdminComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AdminComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AdminComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,112 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit} from '@angular/core';
+import {BreadcrumbComponent} from "../../components/breadcrumb/breadcrumb.component";
+import {NavBarComponent} from "../../layouts/admin-layout/nav-bar/nav-bar.component";
+import {NavigationComponent} from "../../layouts/admin-layout/navigation/navigation.component";
+import {Router, RouterLink, RouterOutlet} from "@angular/router";
+import {DOCUMENT, NgClass, NgStyle} from '@angular/common';
+import {MatDrawerContainer, MatSidenavModule} from '@angular/material/sidenav';
+import {MatButton} from '@angular/material/button';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+import {MenuItem} from 'primeng/api';
+import {PanelMenu} from 'primeng/panelmenu';
+@Component({
+  selector: 'app-admin.component',
+  imports: [
+    BreadcrumbComponent,
+    NavBarComponent,
+    NavigationComponent,
+    RouterOutlet,
+    NgClass,
+    MatDrawerContainer,
+    MatSidenavModule,
+    ScrollPanelModule,
+    MatButton,
+    RouterLink,
+    PanelMenu,
+    NgStyle,
+
+  ],
+  schemas:[CUSTOM_ELEMENTS_SCHEMA],
+  templateUrl: './admin.component.html',
+  styleUrl: './admin.component.scss'
+})
+export class AdminComponent implements OnInit {
+  private document = inject<Document>(DOCUMENT);
+  height = 0;
+
+  items: MenuItem[] | undefined;
+
+
+  constructor(private router: Router) {
+    this.height = 0
+
+
+  }
+
+  // public props
+  navCollapsed: boolean = false;
+  navCollapsedMob: boolean = false;
+
+  // public method
+  navMobClick() {
+    if (this.navCollapsedMob && !document.querySelector('app-navigation.pc-sidebar')?.classList.contains('mob-open')) {
+      this.navCollapsedMob = !this.navCollapsedMob;
+      setTimeout(() => {
+        this.navCollapsedMob = !this.navCollapsedMob;
+      }, 100);
+    } else {
+      this.navCollapsedMob = !this.navCollapsedMob;
+    }
+    if (document.querySelector('app-navigation.pc-sidebar')?.classList.contains('navbar-collapsed')) {
+      document.querySelector('app-navigation.pc-sidebar')?.classList.remove('navbar-collapsed');
+    }
+  }
+
+  handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.closeMenu();
+    }
+  }
+
+  closeMenu() {
+    if (document.querySelector('app-navigation.pc-sidebar')?.classList.contains('mob-open')) {
+      document.querySelector('app-navigation.pc-sidebar')?.classList.remove('mob-open');
+    }
+  }
+
+  ngOnInit() {
+
+    if(this.document.defaultView !== null || this.document.defaultView !== undefined) {
+      // @ts-ignore
+      this.height = this.document.defaultView.innerHeight;
+    }
+    else
+      this.height = 0;
+
+    this.items = [
+      {
+        label: 'Admin',
+        icon: 'pi pi-palette',
+        command: () => {
+          this.router.navigate(['/main/admin/welcome']);
+        },
+        items: [
+          {
+            label: 'Settings',
+            icon: 'pi pi-eraser',
+            // route: '/main/admin/settings'
+            command: () => {
+              this.router.navigate(['/main/admin/settings']);
+            }
+          },
+          {
+            label: 'System',
+            icon: 'pi pi-heart',
+            route: '/main/admin/system'
+          }
+        ]
+      }
+    ];
+  }
+
+}
@@ -0,0 +1,16 @@
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
+import {mainRouting} from '../main-module/main.routing';
+import {MainComponent} from '../main-module/main.component/main.component';
+import {RouterModule} from '@angular/router';
+import {AdminComponent} from './admin.component/admin.component';
+import {adminRouting} from './admin.routing';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
+@NgModule({
+  declarations: [
+
+  ],
+  imports: [adminRouting, AdminComponent,ScrollPanelModule],
+  exports: [RouterModule],
+  schemas:[CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AdminModule {}
@@ -0,0 +1,27 @@
+import {RouterModule, Routes} from '@angular/router';
+import {AdminComponent} from './admin.component/admin.component';
+
+const ADMIN_ROUTES: Routes = [
+  {
+    path: '',
+    component: AdminComponent,
+
+     children: [
+       {
+         path: 'welcome',
+         loadComponent: () => import('../admin-module/admin-welcome.component/admin-welcome.component').then((c) => c.AdminWelcomeComponent),
+       },
+       {
+         path: 'settings',
+        loadComponent: () => import('../admin-module/settings.component/settings.component').then((c) => c.SettingsComponent)
+      },
+       {
+         path: 'system',
+
+        loadComponent: () => import('../admin-module/system.component/system.component').then((c) => c.SystemComponent)
+      }
+    ]
+  }
+];
+
+export const adminRouting = RouterModule.forChild(ADMIN_ROUTES);
@@ -0,0 +1 @@
+<p>settings.component works!</p>
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SettingsComponent } from './settings.component';
+
+describe('SettingsComponent', () => {
+  let component: SettingsComponent;
+  let fixture: ComponentFixture<SettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SettingsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-settings.component',
+  imports: [],
+  templateUrl: './settings.component.html',
+  styleUrl: './settings.component.scss'
+})
+export class SettingsComponent {
+
+}
@@ -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));*/
+}
+
+