WIP - New season dialog

packages/bridge-server/src/seasons/seasons.controller.ts

@@ -1,6 +1,6 @@
-import { Body, Controller, Get, Param, Post } from '@nestjs/common';
+import { Body, Controller, Get, Param, Post, UseGuards } from '@nestjs/common';
 import { SeasonsService } from './seasons.service';
-import { get } from 'http';
+import { AuthGuard } from 'src/auth/auth.guard';
 
 @Controller('seasons')
 export class SeasonsController {
@@ -18,6 +18,7 @@ export class SeasonsController {
         return this.seasonsService.findOne(params.id);
     }
 
+    @UseGuards(AuthGuard)
     @Post()
     create(@Body() body: any) {
         return this.seasonsService.create(body.title, body.subTitle, body.startingDate);

packages/bridge-ui/src/app/app.config.ts

@@ -1,10 +1,10 @@
-import { ApplicationConfig } from '@angular/core';
+import { ApplicationConfig,importProvidersFrom } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { MatNativeDateModule } from '@angular/material/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 
-import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { routes } from './app.routes';
 import { AuthInterceptor } from './interceptors/auth.interceptor';
 
 export const appConfig: ApplicationConfig = {
@@ -14,6 +14,7 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(
       withInterceptorsFromDi()
     ),
+    importProvidersFrom(MatNativeDateModule),
     {provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true},
   ]
 };

packages/bridge-ui/src/app/components/new-season-dialog/new-season-dialog.component.html

@@ -0,0 +1,25 @@
+<div class="signInForm">
+    <h1 mat-dialog-title>Login</h1>
+    <div mat-dialog-content>
+        <mat-form-field class="full-width">
+            <mat-label>Title</mat-label>
+            <input matInput type="text" id="title" [formControl]="title" name="title" required>
+        </mat-form-field>
+        <br/>
+        <mat-form-field class="full-width">
+            <mat-label>Subtitle</mat-label>
+            <input matInput type="text" id="subTitle" [formControl]="subTitle" name="subTitle" required>
+        </mat-form-field>
+        <mat-form-field class="full-width">
+            <mat-label>Starting Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" [formControl]="startingDate" name="startingDate" id="startingDate" required>
+            <mat-hint>MM/DD/YYYY</mat-hint>
+            <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+            <mat-datepicker #picker></mat-datepicker>
+        </mat-form-field>
+    </div>
+    <mat-dialog-actions align="end">
+        <button mat-button mat-dialog-close>Cancel</button>
+        <button mat-button mat-dialog-close (click)="submit()">Submit</button>
+    </mat-dialog-actions>
+</div>

packages/bridge-ui/src/app/components/new-season-dialog/new-season-dialog.component.scss

@@ -0,0 +1,12 @@
+.signInForm {
+    width: 400px;
+    padding: 12px 24px 24px;
+  
+    igx-input-group + igx-input-group {
+        margin-top: 24px;
+    }
+  }
+  
+  .full-width {
+      width: 100%;
+  }

packages/bridge-ui/src/app/components/new-season-dialog/new-season-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NewSeasonDialogComponent } from './new-season-dialog.component';
+
+describe('NewSeasonDialogComponent', () => {
+  let component: NewSeasonDialogComponent;
+  let fixture: ComponentFixture<NewSeasonDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NewSeasonDialogComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(NewSeasonDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

packages/bridge-ui/src/app/components/new-season-dialog/new-season-dialog.component.ts

@@ -0,0 +1,72 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormControl } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+
+import {
+  MatDialog,
+  MAT_DIALOG_DATA,
+  MatDialogRef,
+  MatDialogTitle,
+  MatDialogContent,
+  MatDialogActions,
+  MatDialogClose,
+} from '@angular/material/dialog';
+import { SeasonsService } from '../../services/seasons.service';
+
+@Component({
+  selector: 'app-new-season-dialog',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatInputModule,
+    MatFormFieldModule,
+    FormsModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatDialogClose,
+    MatDatepickerModule,
+    MatNativeDateModule
+  ],
+  providers: [  
+    MatDatepickerModule, MatNativeDateModule
+  ],
+  templateUrl: './new-season-dialog.component.html',
+  styleUrl: './new-season-dialog.component.scss'
+})
+export class NewSeasonDialogComponent {
+  title = new FormControl('');
+  subTitle = new FormControl('');
+  startingDate = new FormControl('');
+
+  minDate: Date;
+  maxDate: Date;
+
+  constructor(
+    private seasonsService: SeasonsService
+  ) 
+  {
+    const currentYear = new Date().getFullYear();
+    this.minDate = new Date(Date.now());
+    this.maxDate = new Date(currentYear + 1, 11, 31);
+  }
+
+  submit(): void {
+    let title = this.title.value != undefined ? this.title.value : "";
+    let subTitle = this.subTitle.value != undefined ? this.subTitle.value : "";
+    let startingDate = this.startingDate.value != undefined ? this.startingDate.value : new Date(Date.now());
+
+    //this.seasonsService.create();
+  }
+}

packages/bridge-ui/src/app/components/season-card-new/season-card-new.component.ts

@@ -3,6 +3,9 @@ import { CommonModule } from '@angular/common';
 
 import { MatCardModule } from '@angular/material/card';
 import { MatIconModule } from '@angular/material/icon';
+import { MatDialog } from '@angular/material/dialog';
+
+import { NewSeasonDialogComponent } from '../new-season-dialog/new-season-dialog.component';
 
 @Component({
   selector: 'app-season-card-new',
@@ -17,7 +20,11 @@ import { MatIconModule } from '@angular/material/icon';
 })
 export class SeasonCardNewComponent {
 
-  openNewSeasonDialog() {
+  constructor(
+    public dialog: MatDialog
+  ) {}
 
+  openNewSeasonDialog() {
+    this.dialog.open(NewSeasonDialogComponent);
   }
 }