Made dashboard and dialog more mobile friendly and converted input to…

… angular material style

src/app/choice-card/choice-card.component.ts

@@ -28,7 +28,6 @@ export class ChoiceCardComponent implements OnInit {
   }
 
   choiceUpdated() {
-    console.log('Hey');
     this.choiceDataService.updateChoiceById(this.choice.id,this.groupId,this.choice);
   }
 

src/app/choice-group-detail/choice-group-detail.component.html

@@ -1,37 +1,52 @@
 <h2 mat-dialog-title>Choices</h2>
 
 <mat-dialog-content>
-  Add a new choice
-  <input
-    placeholder="Name for a new choice"
-    [(ngModel)]="newChoice.title"
-    (keyup.enter)="addChoice()"
-  />
+  <mat-form-field>
+    <mat-label>Name</mat-label>
+    <input
+      matInput
+      [formControl]="newChoiceNameControl"
+      placeholder="Name for new choice"
+    />
+    <button
+      type="button"
+      matSuffix
+      [disabled]="newChoiceNameControl.invalid"
+      mat-button
+      (click)="addChoice()"
+    >
+      Add
+    </button>
+  </mat-form-field>
 
-  <div *ngIf="choiceGroup.choices.length">
-    <ul class="choice-list">
-      @for (choice of choiceGroup.choices; track choice.id) {
-      <choice-card [choice]="choice" [groupId]="choiceGroup.id"></choice-card>
-      }
-    </ul>
+  <div *ngIf="choiceGroup.choices.length > 0" class="choice-list">
+    @for (choice of choiceGroup.choices; track choice.id) {
+    <choice-card [choice]="choice" [groupId]="choiceGroup.id"></choice-card>
+    }
   </div>
 
   <h2>Settings</h2>
-  Selections/Day
-  <input
-    type="number"
-    [(ngModel)]="choiceGroup.choicesPerDay"
-    (input)="choiceGroupUpdated()"
-  />
+
+  <mat-form-field>
+    <mat-label>Selections/Day</mat-label>
+    <input
+      matInput
+      [(ngModel)]="choiceGroup.choicesPerDay"
+      type="number"
+      (input)="choiceGroupUpdated()"
+    />
+  </mat-form-field>
 
   <h2>Analytics</h2>
   <h3>Distribution of choices for the next {{ numberOfDays }} days</h3>
 
+  <mat-form-field>
+    <mat-label>Number of Days</mat-label>
+    <input matInput type="number" [(ngModel)]="numberOfDays" value="100" />
+  </mat-form-field>
   <div>
-    <label>Number of Days</label>
-    <input type="number" [(ngModel)]="numberOfDays" value="100" />
+    <button mat-button (click)="startAnalytics()">Analyze</button>
   </div>
-  <button (click)="startAnalytics()">Analyze</button>
 
   <table *ngIf="analytics.length != 0">
     <tr>

src/app/choice-group-detail/choice-group-detail.component.ts

@@ -1,9 +1,11 @@
 import { Component, inject, OnInit } from '@angular/core';
-import { ActivatedRoute } from "@angular/router";
 
 import { NgFor, NgIf } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { ChoiceCardComponent } from '../choice-card/choice-card.component';
 import { Choice } from "./../shared/choice";
 import { ChoiceDataService } from "./../shared/choice-data.service";
@@ -21,7 +23,7 @@ export interface AnalyticResult {
     styleUrls: ['./choice-group-detail.component.css'],
     providers: [SelectorService],
     standalone: true,
-    imports: [FormsModule, NgIf, NgFor, ChoiceCardComponent, MatDialogModule]
+    imports: [ReactiveFormsModule, FormsModule, NgIf, NgFor, ChoiceCardComponent, MatButtonModule, MatDialogModule, MatFormFieldModule, MatInputModule]
 })
 export class ChoiceGroupDetailComponent implements OnInit {
 
@@ -30,15 +32,17 @@ export class ChoiceGroupDetailComponent implements OnInit {
   numberOfDays: number = 100;
 
   choiceGroup: ChoiceGroup;
-  newChoice: Choice = new Choice();
+  newChoiceNameControl = new FormControl('', Validators.required);
 
   analytics: Array<AnalyticResult> = [];
 
-  constructor(private route: ActivatedRoute, private choiceDataService: ChoiceDataService, private md5Service: SelectorService) { }
+  constructor(private choiceDataService: ChoiceDataService, private md5Service: SelectorService) { }
 
   addChoice() {
-    this.choiceDataService.addChoice(this.newChoice,this.choiceGroup.id);
-    this.newChoice = new Choice();
+    let newChoice: Choice = new Choice();
+    newChoice.title = this.newChoiceNameControl.value;
+    this.choiceDataService.addChoice(newChoice, this.choiceGroup.id);
+    this.newChoiceNameControl.reset();
   }
 
   ngOnInit() {

src/app/dashboard/dashboard.component.css

@@ -2,4 +2,5 @@
     padding-top: 32px;
     display: flex;
     gap: 16px;
+    flex-wrap: wrap;
 }

src/app/dashboard/dashboard.component.html

@@ -1,7 +1,9 @@
 
-Add a new Choice Group
-
-<input placeholder="Name for a new choice group" [(ngModel)]="newChoiceGroup.title" (keyup.enter)="addChoiceGroup()">
+<mat-form-field>
+  <mat-label>Name</mat-label>
+  <input matInput [formControl]="newChoiceGroupNameControl" placeholder="Name for a new choice group">
+  <button type="button" matSuffix [disabled]="newChoiceGroupNameControl.invalid" mat-button (click)="addChoiceGroup()">Add</button>
+</mat-form-field>
 
 <section class="main" *ngIf="choiceGroups.length > 0">
   @for (group of choiceGroups; track group.id) {

src/app/dashboard/dashboard.component.ts

@@ -1,7 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 
 import { NgFor, NgIf } from '@angular/common';
-import { FormsModule } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { ChoiceGroupCardComponent } from '../choice-group-card/choice-group-card.component';
 import { ChoiceDataService } from "./../shared/choice-data.service";
 import { ChoiceGroup } from "./../shared/choice-group";
@@ -13,17 +16,19 @@ import { SelectorService } from "./../shared/selector.service";
     styleUrls: ['./dashboard.component.css'],
     providers: [SelectorService],
     standalone: true,
-    imports: [FormsModule, NgIf, NgFor, ChoiceGroupCardComponent]
+    imports: [ReactiveFormsModule, NgIf, NgFor, ChoiceGroupCardComponent, MatButtonModule, MatFormFieldModule, MatInputModule]
 })
 export class DashboardComponent implements OnInit {
 
-  newChoiceGroup: ChoiceGroup = new ChoiceGroup();
+  newChoiceGroupNameControl = new FormControl('', Validators.required);
 
   constructor(private choiceDataService: ChoiceDataService, private md5Service: SelectorService) { }
 
   addChoiceGroup() {
-    this.choiceDataService.addChoiceGroup(this.newChoiceGroup);
-    this.newChoiceGroup = new ChoiceGroup();
+    const newChoiceGroup = new ChoiceGroup();
+    newChoiceGroup.title = this.newChoiceGroupNameControl.value;
+    this.choiceDataService.addChoiceGroup(newChoiceGroup);
+    this.newChoiceGroupNameControl.reset();
   }
 
   get choiceGroups() {

src/app/shared/choice-group.ts

@@ -1,4 +1,4 @@
-import {Choice} from "./choice";
+import { Choice } from "./choice";
 
 export class ChoiceGroup {
   id: number;
@@ -11,4 +11,4 @@ export class ChoiceGroup {
     Object.assign(this,values);
   }
 
-}
+}