create cylinder

client/src/app/modules/cylinder/cylinder.component.ts

@@ -5,11 +5,15 @@ import { AgGridAngular } from 'ag-grid-angular';
 import { ApiService } from '../../shared/api.service';
 import { DatePipe } from '@angular/common';
 import { AgDeleteCylinderComponent } from '../../shared/ag-grid/components/ag-delete-cylinder/ag-delete-cylinder.component';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { CreateCylinderComponent } from './components/create-cylinder/create-cylinder.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
   selector: 'app-cylinder',
   standalone: true,
-  imports: [AgGridAngular],
+  imports: [AgGridAngular, MatDialogModule, MatIconModule, MatButtonModule],
   providers: [DatePipe],
   templateUrl: './cylinder.component.html',
   styleUrl: './cylinder.component.scss'
@@ -17,6 +21,7 @@ import { AgDeleteCylinderComponent } from '../../shared/ag-grid/components/ag-de
 export class CylinderComponent {
   private api: ApiService = inject(ApiService);
   private datePipe = inject(DatePipe);
+  private dialog = inject(MatDialog);
 
   gridApi!: GridApi;
 
@@ -38,7 +43,6 @@ export class CylinderComponent {
         , cellRenderer: AgDeleteCylinderComponent
       }
     ]
-
   }
 
   loadCylinders() {
@@ -54,4 +58,19 @@ export class CylinderComponent {
     this.gridApi = params.api;
     this.loadCylinders();
   }
+
+  openCreateCylinder() {
+    this.dialog.open(CreateCylinderComponent, {
+      maxWidth: "calc(100vw - 24px)",
+      width: "30vw",
+      minWidth: "200px",
+      disableClose: true
+    }).afterClosed().subscribe({
+      next: (cylinder) => {
+        if (cylinder) {
+          this.loadCylinders();
+        }
+      }
+    });
+  }
 }