Chore: Removed Mat Card from everywhere.

Chore: Removed the Toaster Service.
Chore: Updated to Material Theme 3

bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html

@@ -1,45 +1,40 @@
-<mat-card class="flex-auto lg:max-w-[50%]">
-  <mat-card-header>
-    <mat-card-title>Modifier</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <form [formGroup]="form" class="flex flex-col">
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Name</mat-label>
-          <input matInput #name formControlName="name" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox formControlName="showInBill">Show In Bill?</mat-checkbox>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Price</mat-label>
-          <input matInput type="number" formControlName="price" />
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-form-field class="flex-auto">
-          <mat-label>Category</mat-label>
-          <mat-select formControlName="modifierCategory">
-            @for (mc of modifierCategories; track mc) {
-              <mat-option [value]="mc.id">
-                {{ mc.name }}
-              </mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
-      </div>
-    </form>
-  </mat-card-content>
-  <mat-card-actions class="row-container">
-    <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-    @if (!!item.id) {
-      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
-    }
-  </mat-card-actions>
-</mat-card>
+<h2>Modifier</h2>
+<form [formGroup]="form" class="flex flex-col">
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Name</mat-label>
+      <input matInput #name formControlName="name" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-checkbox formControlName="showInBill">Show In Bill?</mat-checkbox>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Price</mat-label>
+      <input matInput type="number" formControlName="price" />
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-form-field class="flex-auto">
+      <mat-label>Category</mat-label>
+      <mat-select formControlName="modifierCategory">
+        @for (mc of modifierCategories; track mc) {
+          <mat-option [value]="mc.id">
+            {{ mc.name }}
+          </mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
+  </div>
+  <div class="row-container">
+    <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
+  </div>
+</form>
+
+<div class="row-container">
+  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
+  @if (!!item.id) {
+    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  }
+</div>

bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts

@@ -1,18 +1,17 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatCardModule } from '@angular/material/card';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
 
 import { Modifier } from '../../core/modifier';
 import { ModifierCategory } from '../../core/modifier-category';
-import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { ModifierService } from '../modifier.service';
 
@@ -22,12 +21,13 @@ import { ModifierService } from '../modifier.service';
   styleUrls: ['./modifier-detail.component.css'],
   imports: [
     MatButtonModule,
-    MatCardModule,
+
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
     MatOptionModule,
     MatSelectModule,
+
     ReactiveFormsModule,
   ],
 })
@@ -35,7 +35,7 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
-  private toaster = inject(ToasterService);
+  private snackBar = inject(MatSnackBar);
   private ser = inject(ModifierService);
 
   @ViewChild('name', { static: true }) nameElement?: ElementRef;
@@ -91,11 +91,11 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/modifiers');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }
@@ -103,11 +103,11 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
   delete() {
     this.ser.delete(this.item.id as string).subscribe({
       next: () => {
-        this.toaster.show('Success', '');
+        this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/modifiers');
       },
       error: (error) => {
-        this.toaster.show('Error', error);
+        this.snackBar.open(error, 'Error');
       },
     });
   }