Added the new season dialog

src/app/app.module.ts

@@ -30,6 +30,7 @@ import { NewSeasonCardComponent } from './components/new-season-card/new-season-
 import { NewSeasonDialogComponent } from './components/new-season-dialog/new-season-dialog.component';
 import { MatMenuModule } from '@angular/material/menu';
 import { FormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog';
 
 @NgModule({
   declarations: [
@@ -64,6 +65,7 @@ import { FormsModule } from '@angular/forms';
     ObserversModule,
     FormsModule,
     MatMenuModule,
+    MatDialogModule,
     HttpClientModule
   ],
   providers: [],

src/app/components/new-season-card/new-season-card.component.html

@@ -1,4 +1,4 @@
-<mat-card class="example-card">
+<mat-card class="example-card" (click)="openNewSeasonDialog()">
     <mat-card-header>
         <div mat-card-avatar class="example-header-image"></div>
         <mat-card-title>New Season</mat-card-title>

src/app/components/new-season-card/new-season-card.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { NewSeasonDialogComponent } from '../new-season-dialog/new-season-dialog.component';
 
 @Component({
   selector: 'app-new-season-card',
@@ -6,5 +8,27 @@ import { Component } from '@angular/core';
   styleUrls: ['./new-season-card.component.less']
 })
 export class NewSeasonCardComponent {
+  newSeasonDetails = {
+    title: '',
+    subtitle: '',
+    startDate: ''
+  };
 
+  constructor(public dialog: MatDialog) {}
+
+  openNewSeasonDialog(): void {
+    const dialogRef = this.dialog.open(NewSeasonDialogComponent, {
+      width: '400px',
+      data: { ...this.newSeasonDetails }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        console.log('Follow details saved:', result);
+        // You can update your data or perform other actions here
+      } else {
+        console.log('Dialog canceled');
+      }
+    });
+  }
 }

src/app/components/new-season-dialog/new-season-dialog.component.html

@@ -1 +1,10 @@
-<p>new-season-dialog works!</p>
+<h1 mat-dialog-title>New Season</h1>
+<div mat-dialog-content>
+  <p>Title: <input [(ngModel)]="data.title" /></p>
+  <p>Subtitle: <input [(ngModel)]="data.subtitle" /></p>
+  <p>Starting Date: <input type="date" [(ngModel)]="data.startDate" /></p>
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onCancelClick()">Cancel</button>
+  <button mat-button color="primary" (click)="onSaveClick()">Save</button>
+</div>

src/app/components/new-season-dialog/new-season-dialog.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-new-season-dialog',
@@ -7,4 +8,20 @@ import { Component } from '@angular/core';
 })
 export class NewSeasonDialogComponent {
 
+  constructor(
+    public dialogRef: MatDialogRef<NewSeasonDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  onCancelClick(): void {
+    this.dialogRef.close();
+  }
+
+  onSaveClick(): void {
+    // You can perform any actions here before closing the dialog
+    this.dialogRef.close(this.data);
+  }
 }