Reworked detail page

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

@@ -0,0 +1,3 @@
+.choice-card {
+	max-width: fit-content;
+}

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

@@ -0,0 +1,22 @@
+<mat-card class="choice-card" appearance="outlined">
+  <mat-card-header>
+    <mat-card-title>{{choice.title}}</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <table>
+      <tr>
+        <td><b>Color:</b></td>
+        <td><input type="color" [(ngModel)]="choice.color" (input)="choiceUpdated()" /></td>
+      </tr>
+      <tr>
+        <td><b>Weight:</b></td>
+        <td><input type="number" [(ngModel)]="choice.weight" min="0" (input)="choiceUpdated()" /></td>
+      </tr>
+    </table>
+  </mat-card-content>
+  <mat-card-actions align="end">
+    <button mat-icon-button (click)="deleteChoice()">
+      <mat-icon>delete</mat-icon>
+    </button>
+  </mat-card-actions>
+</mat-card>

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

@@ -1,17 +1,20 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatIconModule } from '@angular/material/icon';
 
-import {ChoiceDataService} from "./../shared/choice-data.service";
-import {Choice } from "./../shared/choice";
 import { FormsModule } from '@angular/forms';
+import { Choice } from "../shared/choice";
+import { ChoiceDataService } from "../shared/choice-data.service";
 
 @Component({
-    selector: 'choice-overview',
-    templateUrl: './choice-overview.component.html',
-    styleUrls: ['./choice-overview.component.css'],
+    selector: 'choice-card',
+    templateUrl: './choice-card.component.html',
+    styleUrls: ['./choice-card.component.css'],
     standalone: true,
-    imports: [FormsModule]
+    imports: [FormsModule, MatCardModule, MatIconModule, MatButtonModule]
 })
-export class ChoiceOverviewComponent implements OnInit {
+export class ChoiceCardComponent implements OnInit {
 
   @Input()
   choice: Choice;
@@ -25,6 +28,7 @@ export class ChoiceOverviewComponent 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.css

@@ -1,7 +1,6 @@
-.choice-list li {
+.choice-list {
+  display: flex;
 	list-style-type: none;
-}
-
-.clear {
-  clear: both;
+  flex-wrap: wrap;
+  gap: 16px;
 }

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

@@ -4,14 +4,12 @@ <h2>Choices</h2>
 
 <div *ngIf=choiceGroup.choices.length>
   <ul class="choice-list">
-    <li *ngFor="let choice of choiceGroup.choices">
-      <choice-overview [choice]="choice" [groupId]="choiceGroup.id"></choice-overview>
-    </li>
+    @for (choice of choiceGroup.choices; track choice.id) {
+      <choice-card [choice]="choice" [groupId]="choiceGroup.id"></choice-card>
+    }
   </ul>
 </div>
 
-<div class="clear"></div>
-
 <h2>Settings</h2>
 Selections/Day <input type="number" [(ngModel)]="choiceGroup.choicesPerDay" (input)="choiceGroupUpdated()" />
 

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

@@ -1,13 +1,13 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from "@angular/router";
 
+import { NgFor, NgIf } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ChoiceCardComponent } from '../choice-card/choice-card.component';
 import { Choice } from "./../shared/choice";
 import { ChoiceDataService } from "./../shared/choice-data.service";
 import { ChoiceGroup } from "./../shared/choice-group";
 import { SelectorService } from "./../shared/selector.service";
-import { FormsModule } from '@angular/forms';
-import { NgIf, NgFor } from '@angular/common';
-import { ChoiceOverviewComponent } from '../choice-overview/choice-overview.component';
 
 export interface AnalyticResult {
   choice: string;
@@ -20,7 +20,7 @@ export interface AnalyticResult {
     styleUrls: ['./choice-group-detail.component.css'],
     providers: [SelectorService],
     standalone: true,
-    imports: [FormsModule, NgIf, NgFor, ChoiceOverviewComponent]
+    imports: [FormsModule, NgIf, NgFor, ChoiceCardComponent]
 })
 export class ChoiceGroupDetailComponent implements OnInit {