From a81c458775a2dabdcd6558ad03fb1cb46e939342 Mon Sep 17 00:00:00 2001
From: Andreas Huber <andreas.huber@lucares.de>
Date: Tue, 1 Oct 2024 18:55:24 +0200
Subject: [PATCH] convert customizable grid to standalone component and add
 lazy loading

---
 pdb-js/src/app/app-routing.module.ts                   |  5 +----
 pdb-js/src/app/app.module.ts                           |  2 --
 .../customizable-grid/customizable-grid.component.ts   | 10 ++++++++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/pdb-js/src/app/app-routing.module.ts b/pdb-js/src/app/app-routing.module.ts
index e0843fb..732489f 100644
--- a/pdb-js/src/app/app-routing.module.ts
+++ b/pdb-js/src/app/app-routing.module.ts
@@ -2,11 +2,8 @@ import { NgModule } from "@angular/core";
 import { RouterModule, Routes } from "@angular/router";
 import { VisualizationPageComponent } from "./visualization-page/visualization-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 { DashboardComponent } from "./dashboard-page/dashboard/dashboard.component";
-import { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component";
 
 const routes: Routes = [
   { path: "", component: MainPageComponent },
@@ -14,7 +11,7 @@ const routes: Routes = [
   { path: "dashboard", component: DashboardPageComponent },
   { path: "dashboard/:id", component: DashboardComponent },
   { 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: '**', component: PageNotFoundComponent }
 ];
diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts
index 83e87ee..034bdf5 100644
--- a/pdb-js/src/app/app.module.ts
+++ b/pdb-js/src/app/app.module.ts
@@ -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 { 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 { CustomizableGridComponent } from "./customizable-grid/customizable-grid.component";
 
 import { DragDropModule } from "@angular/cdk/drag-drop";
 import { ConfirmationDialogComponent } from "./confirmation-dialog/confirmation-dialog.component";
@@ -74,7 +73,6 @@ import { MainPageComponent } from "./main-page/main-page.component";
         AddPlotDialogComponent,
         PlotWidgetComponent,
         FullScreenPlotDialogComponent,
-        CustomizableGridComponent,
         ConfirmationDialogComponent,
         FocusDirective,
     ],
diff --git a/pdb-js/src/app/customizable-grid/customizable-grid.component.ts b/pdb-js/src/app/customizable-grid/customizable-grid.component.ts
index 848a4e8..51935a5 100644
--- a/pdb-js/src/app/customizable-grid/customizable-grid.component.ts
+++ b/pdb-js/src/app/customizable-grid/customizable-grid.component.ts
@@ -1,12 +1,18 @@
 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 { ViewChild } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
 
 
 @Component({
   selector: 'app-customizable-grid',
-  templateUrl: './customizable-grid.component.html'
+  templateUrl: './customizable-grid.component.html',
+  standalone: true,
+  imports: [
+    BrowserModule,
+    DragDropModule
+  ]
 })
 export class CustomizableGridComponent implements AfterViewInit {
   @ViewChild(CdkDropList) placeholder!: CdkDropList;