fix: edit list items

angular.json

@@ -35,6 +35,7 @@
             ],
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "node_modules/bootstrap-icons/font/bootstrap-icons.min.css",
               "src/styles.less"
             ],
             "scripts": [],

package-lock.json

@@ -23,6 +23,7 @@
         "@ng-bootstrap/ng-bootstrap": "^18.0.0",
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.3",
+        "bootstrap-icons": "^1.13.1",
         "express": "^4.18.2",
         "rxjs": "~7.8.0",
         "sonarqube-scanner": "^4.3.0",
@@ -6249,6 +6250,22 @@
         "@popperjs/core": "^2.11.8"
       }
     },
+    "node_modules/bootstrap-icons": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
+      "integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -27,6 +27,7 @@
     "@ng-bootstrap/ng-bootstrap": "^18.0.0",
     "@popperjs/core": "^2.11.8",
     "bootstrap": "^5.3.3",
+    "bootstrap-icons": "^1.13.1",
     "express": "^4.18.2",
     "rxjs": "~7.8.0",
     "sonarqube-scanner": "^4.3.0",

src/app/app.component.html

@@ -1,5 +1,10 @@
 <main class="main">
-<app-screen-rotations [players]="players"></app-screen-rotations>
+    <router-outlet></router-outlet>
 </main>
-
-<router-outlet />
+<nav>
+  <ul ngbNav [activeId]="route.fragment | async" class="nav-tabs custom-navbar bg-body-secondary">
+    <li ngbNavItem="/edit" class="custom-navitem"><a ngbNavLink routerLink="/edit" routerLinkActive="active"><i class="bi bi-pencil-square"></i>{{ data.getPlayers().length }}</a></li>
+    <li ngbNavItem="/basic" class="custom-navitem"><a ngbNavLink routerLink="/basic" routerLinkActive="active"><i class="bi bi-shuffle"></i></a></li>
+    <li ngbNavItem="/rotations" class="custom-navitem"><a ngbNavLink routerLink="/rotations" routerLinkActive="active"><i class="bi bi-arrow-repeat"></i></a></li>
+  </ul>
+</nav>

src/app/app.component.less

@@ -16,3 +16,23 @@ tr{
     word-break: break-all;
     white-space: normal;
 }
+.main{
+    margin-bottom: 5rem;
+    padding: 1rem;
+    overflow-y: auto;
+}
+.custom-navbar{
+    height: 3rem;
+    width: 100vw;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    justify-content: space-around; /* Distribute items evenly */
+    z-index: 1000;
+}
+.custom-navitem{
+    text-align: center; /* Center the content of each item */
+    flex: 1;
+}
+.nav-link.active{
+}

src/app/app.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit} from '@angular/core';
+import { Component, inject, OnInit} from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { RouterOutlet, ActivatedRoute } from '@angular/router';
+import { RouterOutlet, ActivatedRoute, RouterLink } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { CommonModule } from '@angular/common';
@@ -9,26 +9,29 @@ import { ScreenBasicComponent } from "./screen-basic/screen-basic.component";
 import { ScreenRotationsComponent } from './screen-rotations/screen-rotations.component';
 import { Player } from './model';
 import { ScreenEditComponent } from './screen-edit/screen-edit.component';
+import { DataService } from './data.service';
 
 @Component({
   selector: 'app-root',
-  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule, ScreenBasicComponent, ScreenRotationsComponent, ScreenEditComponent],
+  imports: [NgbModule, RouterOutlet, CommonModule, FormsModule, ScreenBasicComponent, ScreenRotationsComponent, ScreenEditComponent, RouterLink],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })
 export class AppComponent implements OnInit {
   title = 'vb';
-  players : Player[] = [];
+  data = inject(DataService);
 
-  constructor(private activatedRoute: ActivatedRoute){}
+  constructor(public route: ActivatedRoute){}
 
   ngOnInit(): void {
-    this.activatedRoute.queryParams.pipe(
+    this.route.queryParams.pipe(
       filter(params => Object.keys(params).length > 0), // Only proceed if params are not empty
       take(1)
     ).subscribe(params => {
       if (params['names']){
-        this.players = params['names'].split(',').map((name: string) => new Player(name));
+        this.data.setPlayers(
+          params['names'].split(',').map((name: string) => new Player(name))
+        );
       }
     });
   }

src/app/app.routes.ts

@@ -1,3 +1,17 @@
 import { Routes } from '@angular/router';
+import { ScreenBasicComponent } from './screen-basic/screen-basic.component';
+import { ScreenEditComponent } from './screen-edit/screen-edit.component';
+import { ScreenRotationsComponent } from './screen-rotations/screen-rotations.component';
+import { AppComponent } from './app.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {
+    path: '',
+    children: [
+      { path: '', redirectTo: 'edit', pathMatch: 'full' },
+      { path: 'edit', component: ScreenEditComponent },
+      { path: 'basic', component: ScreenBasicComponent },
+      { path: 'rotations', component: ScreenRotationsComponent }
+    ]
+  }
+];

src/app/data.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { DataService } from './data.service';
+
+describe('DataService', () => {
+  let service: DataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/data.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Player } from './model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DataService {
+  private players: Player[] = [];
+
+  setPlayers(players: Player[]){
+    for (let player of players){
+      this.addPlayer(player);
+    }
+  }
+  
+  addPlayer(player: Player): boolean{
+    if (player.name.trim() && Player.isNew(player, this.players)){
+      this.players.push(player);
+      return true
+    }
+    return false
+  }
+  removePlayer(player: Player){
+    const index = this.players.indexOf(player);
+    if (index !== -1) {
+      this.players.splice(index, 1);
+    }
+  }
+  getPlayers(): Player[] {
+    let clone =Object.assign([],this.players);
+    return clone
+  }
+}

src/app/screen-basic/screen-basic.component.ts

@@ -1,11 +1,12 @@
 // Original Team Generation Screen for arbitrary size and number of teams
-import { Component, Input, OnInit} from '@angular/core';
+import { Component, inject} from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterOutlet, ActivatedRoute } from '@angular/router';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { CommonModule } from '@angular/common';
 import { Player } from '../model';
 import { iter } from '../util';
+import { DataService } from '../data.service';
 
 @Component({
   selector: 'app-screen-basic',
@@ -14,7 +15,7 @@ import { iter } from '../util';
   styleUrl: './screen-basic.component.less'
 })
 export class ScreenBasicComponent {
-  @Input() players!: Player[];
+  data = inject(DataService);
   numTeamsSelectorValue = "2";
   numTeamsSelected = 2;
   nTeamsValue = "4";
@@ -30,7 +31,7 @@ export class ScreenBasicComponent {
     
     let teams = Array.from({ length: this.numTeamsSelected }, () => []);
     // clone array here
-    let localPlayers: Player[] = Object.assign([],this.players);
+    let localPlayers: Player[] = this.data.getPlayers();
 
     let nameslen = localPlayers.length;
     let iterator = iter(teams);

src/app/screen-edit/screen-edit.component.html

@@ -1,5 +1,5 @@
 <div class="justify-content-md-center">
-  <h1>Players: {{ players.length }}</h1>
+  <h1>Players: {{ data.getPlayers().length }}</h1>
   <div class="input-group mb-3">
     <input
       type="text"
@@ -17,9 +17,12 @@
     }
 <div class="container mt-4">
   <ul class="list-group mb-3">
-      @for (player of players; track $index) {
-        <li class="list-group-item">
-            <a (click)="openPlayerModal(player)" style="display: block; cursor: pointer;">{{ player.name }}</a>
+      @for (player of data.getPlayers(); track $index) {
+        <li class="list-group-item d-flex justify-content-between">
+            <a (click)="openPlayerModal(player)" style="display: block; cursor: pointer; flex-grow: 1; text-align: left;">{{ player.name }}</a>
+            <button (click)="removeItem(player)" class="btn btn-secondary btn-sm p-0 ms-2" style="width: 24px; height: 24px" >
+              <i class="bi bi-x"></i>
+            </button>
         </li>
       }
   </ul>

src/app/screen-edit/screen-edit.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ViewChild } from '@angular/core';
+import { Component, inject, Input, ViewChild } from '@angular/core';
 import { NgbAlert, NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { Player } from '../model';
 import { ModalRotationsComponent } from '../modal-rotations/modal-rotations.component';
@@ -6,6 +6,7 @@ import { FormsModule } from '@angular/forms';
 import { Subject } from 'rxjs/internal/Subject';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { debounceTime, tap } from 'rxjs/operators';
+import { DataService } from '../data.service';
 
 @Component({
   selector: 'app-screen-edit',
@@ -14,7 +15,7 @@ import { debounceTime, tap } from 'rxjs/operators';
   styleUrl: './screen-edit.component.less'
 })
 export class ScreenEditComponent {
-  @Input() players!: Player[];
+  data = inject(DataService);
   @ViewChild('selfClosingAlert', { static: false })selfClosingAlert!: NgbAlert;
   private _message$ = new Subject<string>();
   newItem: string = "";
@@ -34,15 +35,18 @@ export class ScreenEditComponent {
     const name = this.newItem.trim()
     if (name) {
       let newPlayer = new Player(name);
-      if (Player.isNew(newPlayer, this.players)){
-        this.players.push(newPlayer);
+      if(this.data.addPlayer(newPlayer)){
         this.newItem = '';
+        return
       }
       else{
         this.setAlertMessage(newPlayer.name);
       }
     }
   }
+  removeItem(player: Player){
+    this.data.removePlayer(player);
+  }
 
   openPlayerModal(player: Player){
     const modalRef = this.modalService.open(ModalRotationsComponent);

src/app/screen-rotations/screen-rotations.component.html

@@ -1,65 +1,75 @@
 <div class="justify-content-md-center">
 <h1>Rotations</h1>
 <div ngbAccordion>
-  <div ngbAccordionItem>
-    <h2 ngbAccordionHeader>
-      <button ngbAccordionButton>Outside</button>
-    </h2>
-    <div ngbAccordionCollapse>
-      <div ngbAccordionBody>
-          @for (player of outsidePlayers; track $index) {
+	<div ngbAccordionItem [collapsed]="false">
+		<h2 ngbAccordionHeader>
+			<button ngbAccordionButton>Libero: {{ LiberoPlayers.length }}</button>
+		</h2>
+		<div ngbAccordionCollapse>
+			<div ngbAccordionBody>
+				<ng-template>
+          @for (player of LiberoPlayers; track $index) {
             {{ player.name }}
           }
-      </div>
-    </div>
+				</ng-template>
+			</div>
+		</div>
+	</div>
+	<div ngbAccordionItem>
+		<h2 ngbAccordionHeader>
+			<button ngbAccordionButton>Setter: {{ SetterPlayers.length }}</button>
+		</h2>
+		<div ngbAccordionCollapse>
+			<div ngbAccordionBody>
+				<ng-template>
+          @for (player of SetterPlayers; track $index) {
+            {{ player.name }}
+          }
+				</ng-template>
+			</div>
+		</div>
+	</div>
+	<div ngbAccordionItem>
+		<h2 ngbAccordionHeader>
+			<button ngbAccordionButton>Opposite: {{ OppositePlayers.length }}</button>
+		</h2>
+		<div ngbAccordionCollapse>
+			<div ngbAccordionBody>
+				<ng-template>
+          @for (player of OppositePlayers; track $index) {
+            {{ player.name }}
+          }
+				</ng-template>
+			</div>
+		</div>
+	</div>
+	<div ngbAccordionItem>
+		<h2 ngbAccordionHeader>
+			<button ngbAccordionButton>Middle: {{ MiddlePlayers.length }}</button>
+		</h2>
+		<div ngbAccordionCollapse>
+			<div ngbAccordionBody>
+				<ng-template>
+          @for (player of MiddlePlayers; track $index) {
+            {{ player.name }}
+          }
+				</ng-template>
+			</div>
+		</div>
+	</div>
+	<div ngbAccordionItem>
+		<h2 ngbAccordionHeader>
+			<button ngbAccordionButton>Outside: {{ OutsidePlayers.length}}</button>
+		</h2>
+		<div ngbAccordionCollapse>
+			<div ngbAccordionBody>
+				<ng-template>
+          @for (player of OutsidePlayers; track $index) {
+            {{ player.name }}
+          }
+				</ng-template>
+			</div>
+		</div>
+	</div>
   </div>
 </div>
-<div ngbAccordion>
-  <div ngbAccordionItem>
-    <h2 ngbAccordionHeader>
-      <button ngbAccordionButton>Middle</button>
-    </h2>
-    <div ngbAccordionCollapse>
-      <div ngbAccordionBody>
-        <ng-template>Content for the first item</ng-template>
-      </div>
-    </div>
-  </div>
-</div>
-<div ngbAccordion>
-  <div ngbAccordionItem>
-    <h2 ngbAccordionHeader>
-      <button ngbAccordionButton>Opposite</button>
-    </h2>
-    <div ngbAccordionCollapse>
-      <div ngbAccordionBody>
-        <ng-template>Content for the first item</ng-template>
-      </div>
-    </div>
-  </div>
-</div>
-<div ngbAccordion>
-  <div ngbAccordionItem>
-    <h2 ngbAccordionHeader>
-      <button ngbAccordionButton>Setter</button>
-    </h2>
-    <div ngbAccordionCollapse>
-      <div ngbAccordionBody>
-        <ng-template>Content for the first item</ng-template>
-      </div>
-    </div>
-  </div>
-</div>
-<div ngbAccordion>
-  <div ngbAccordionItem>
-    <h2 ngbAccordionHeader>
-      <button ngbAccordionButton>Libero</button>
-    </h2>
-    <div ngbAccordionCollapse>
-      <div ngbAccordionBody>
-        <ng-template>Content for the first item</ng-template>
-      </div>
-    </div>
-  </div>
-</div>
-</div>

src/app/screen-rotations/screen-rotations.component.ts

@@ -1,8 +1,9 @@
 // Team Generation Screen respecting volleyball roles as defined by `../model/Player`
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { Player } from '../model';
 import { NgbAccordionBody, NgbAccordionCollapse, NgbAccordionHeader, NgbAccordionItem, NgbAccordionButton, NgbAccordionDirective, NgbAccordionToggle } from '@ng-bootstrap/ng-bootstrap';
+import { DataService } from '../data.service';
 
 @Component({
   selector: 'app-screen-rotations',
@@ -11,20 +12,21 @@ import { NgbAccordionBody, NgbAccordionCollapse, NgbAccordionHeader, NgbAccordio
   styleUrl: './screen-rotations.component.less'
 })
 export class ScreenRotationsComponent {
-  @Input() players!: Player[];
-  get outsidePlayers(): Player[] {
-    return this.players.filter(player => !player.outside);
+  data = inject(DataService);
+
+  get OutsidePlayers(): Player[] {
+    return this.data.getPlayers().filter(player => player.outside);
   }
-  get middlePlayers(): Player[] {
-    return this.players.filter(player => player.middle);
+  get MiddlePlayers(): Player[] {
+    return this.data.getPlayers().filter(player => player.middle);
   }
-  get oppositePlayers(): Player[] {
-    return this.players.filter(player => player.opposite);
+  get OppositePlayers(): Player[] {
+    return this.data.getPlayers().filter(player => player.opposite);
   }
   get SetterPlayers(): Player[] {
-    return this.players.filter(player => player.setter);
+    return this.data.getPlayers().filter(player => player.setter);
   }
   get LiberoPlayers(): Player[] {
-    return this.players.filter(player => player.libero);
+    return this.data.getPlayers().filter(player => player.libero);
   }
 }