andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

convert customizable grid to standalone component and add lazy loading

Browse Source
This commit is contained in:
Andreas Huber
2024-10-01 18:55:24 +02:00
parent ee0eab22f8
commit a81c458775
3 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pdb-js/src/app/app-routing.module.ts
View File

@@ -2,11 +2,8 @@ import { NgModule } from "@angular/core";
import { RouterModule, Routes } from "@angular/router"; import { RouterModule, Routes } from "@angular/router";
import { VisualizationPageComponent } from "./visualization-page/visualization-page.component"; import { VisualizationPageComponent } from "./visualization-page/visualization-page.component";
import { MainPageComponent } from "./main-page/main-page.component"; import { MainPageComponent } from "./main-page/main-page.component";
import { UploadPageComponent } from "./upload-page/upload-page.component";
import { HelpPageComponent } from "./help-page/help-page.component";
import { DashboardPageComponent } from "./dashboard-page/dashboard-page.component"; import { DashboardPageComponent } from "./dashboard-page/dashboard-page.component";
import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component"; import { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component";
import { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component";
const routes: Routes = [ const routes: Routes = [
{ path: "", component: MainPageComponent }, { path: "", component: MainPageComponent },
@@ -14,7 +11,7 @@ const routes: Routes = [
{ path: "dashboard", component: DashboardPageComponent }, { path: "dashboard", component: DashboardPageComponent },
{ path: "dashboard/:id", component: DashboardComponent }, { path: "dashboard/:id", component: DashboardComponent },
{ path: "upload", loadComponent: () => import("./upload-page/upload-page.component").then(m => m.UploadPageComponent) }, { path: "upload", loadComponent: () => import("./upload-page/upload-page.component").then(m => m.UploadPageComponent) },
{ path: "grid", component: CustomizableGridComponent }, { path: "grid", loadComponent: () => import("./customizable-grid/customizable-grid.component").then(m => m.CustomizableGridComponent) },
{ path: "help", loadComponent: () => import("./help-page/help-page.component").then(m => m.HelpPageComponent) }, { path: "help", loadComponent: () => import("./help-page/help-page.component").then(m => m.HelpPageComponent) },
// { path: '**', component: PageNotFoundComponent } // { path: '**', component: PageNotFoundComponent }
]; ];

2
pdb-js/src/app/app.module.ts
View File

@@ -48,7 +48,6 @@ import { TextWidgetComponent } from "./dashboard-page/dashboard/text-widget/text
import { AddPlotDialogComponent } from "./dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component"; import { AddPlotDialogComponent } from "./dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component";
import { PlotWidgetComponent } from "./dashboard-page/dashboard/plot-widget/plot-widget.component"; import { PlotWidgetComponent } from "./dashboard-page/dashboard/plot-widget/plot-widget.component";
import { FullScreenPlotDialogComponent } from "./dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component"; import { FullScreenPlotDialogComponent } from "./dashboard-page/dashboard/full-screen-plot-dialog/full-screen-plot-dialog.component";
import { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component";
import { DragDropModule } from "@angular/cdk/drag-drop"; import { DragDropModule } from "@angular/cdk/drag-drop";
import { ConfirmationDialogComponent } from "./confirmation-dialog/confirmation-dialog.component"; import { ConfirmationDialogComponent } from "./confirmation-dialog/confirmation-dialog.component";
@@ -74,7 +73,6 @@ import { MainPageComponent } from "./main-page/main-page.component";
AddPlotDialogComponent, AddPlotDialogComponent,
PlotWidgetComponent, PlotWidgetComponent,
FullScreenPlotDialogComponent, FullScreenPlotDialogComponent,
CustomizableGridComponent,
ConfirmationDialogComponent, ConfirmationDialogComponent,
FocusDirective, FocusDirective,
], ],

10
pdb-js/src/app/customizable-grid/customizable-grid.component.ts
View File

@@ -1,12 +1,18 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef} from '@angular/cdk/drag-drop'; import { CdkDragEnter, CdkDropList, moveItemInArray, DragRef, DragDropModule} from '@angular/cdk/drag-drop';
import { AfterViewInit } from '@angular/core'; import { AfterViewInit } from '@angular/core';
import { ViewChild } from '@angular/core'; import { ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@Component({ @Component({
selector: 'app-customizable-grid', selector: 'app-customizable-grid',
templateUrl: './customizable-grid.component.html' templateUrl: './customizable-grid.component.html',
standalone: true,
imports: [
BrowserModule,
DragDropModule
]
}) })
export class CustomizableGridComponent implements AfterViewInit { export class CustomizableGridComponent implements AfterViewInit {
@ViewChild(CdkDropList) placeholder!: CdkDropList; @ViewChild(CdkDropList) placeholder!: CdkDropList;