feat(pilot): do not add 2 umpires to the same splace

* placeholder fixes

src/app/tab1/tab1.page.html

@@ -34,14 +34,17 @@
           [lines]="'none'"
           cdkDropList
           [id]="`court-umpire-${$index + 1}`"
-          cdkDropListSortingDisabled
-          [cdkDropListData]="courtUmpires()"
+          [cdkDropListData]="umpireByCourt().get($index + 1) ? [umpireByCourt().get($index + 1)] : []"
+          [cdkDropListEnterPredicate]="canDropUmpire"
           (cdkDropListDropped)="dropToUmpire($event, $index + 1)">
           @if (umpireByCourt().get($index + 1); as umpire) {
 
-          <ion-item cdkDrag [cdkDragData]="umpire">
-            <ion-label>{{ umpire | fullname }}</ion-label>
-          </ion-item>
+          <div class="custom-ion-item" cdkDrag [cdkDragData]="umpire">
+            <div *cdkDragPlaceholder class="custom-ion-item primary">
+              <ion-label>{{ umpire|fullname }}</ion-label>
+            </div>
+            <ion-label>{{ umpire|fullname }}</ion-label>
+          </div>
 
           }
         </ion-list>
@@ -51,14 +54,16 @@
           [lines]="'none'"
           cdkDropList
           [id]="`court-service-judge-${$index + 1}`"
-          cdkDropListSortingDisabled
-          [cdkDropListData]="courtServiceJudges()"
+          [cdkDropListData]="serviceJudgeByCourt().get($index + 1) ? [serviceJudgeByCourt().get($index + 1)] : []"
           (cdkDropListDropped)="dropToServiceJudge($event, $index + 1)">
           @if (serviceJudgeByCourt().get($index + 1); as umpire) {
 
-          <ion-item cdkDrag [cdkDragData]="umpire">
-            <ion-label>{{ umpire | fullname }}</ion-label>
-          </ion-item>
+          <div class="custom-ion-item" cdkDrag [cdkDragData]="umpire">
+            <div *cdkDragPlaceholder class="custom-ion-item primary">
+              <ion-label>{{ umpire|fullname }}</ion-label>
+            </div>
+            <ion-label>{{ umpire|fullname }}</ion-label>
+          </div>
 
           }
         </ion-list>
@@ -89,14 +94,16 @@
         <ion-list
           [lines]="'none'"
           cdkDropList
-          cdkDropListSortingDisabled
           id="list-waiting-umpires"
           [cdkDropListData]="waitingUmpires()"
           (cdkDropListDropped)="dropToWaitingUmpire($event)">
           @for (umpire of waitingUmpires(); track umpire.id) {
-          <ion-item cdkDrag [cdkDragData]="umpire">
+          <div class="custom-ion-item" cdkDrag [cdkDragData]="umpire">
+            <div *cdkDragPlaceholder class="custom-ion-item primary">
+              <ion-label>{{ umpire|fullname }}</ion-label>
+            </div>
             <ion-label>{{ umpire|fullname }}</ion-label>
-          </ion-item>
+          </div>
           }
         </ion-list>
       </ion-col>
@@ -104,14 +111,16 @@
         <ion-list
           [lines]="'none'"
           cdkDropList
-          cdkDropListSortingDisabled
           id="list-waiting-service-judges"
           [cdkDropListData]="waitingServiceJudges()"
           (cdkDropListDropped)="dropToWaitingServiceJudge($event)">
           @for (umpire of waitingServiceJudges(); track umpire.id) {
-          <ion-item cdkDrag [cdkDragData]="umpire">
+          <div class="custom-ion-item" cdkDrag [cdkDragData]="umpire">
+            <div *cdkDragPlaceholder class="custom-ion-item primary">
+              <ion-label>{{ umpire|fullname }}</ion-label>
+            </div>
             <ion-label>{{ umpire|fullname }}</ion-label>
-          </ion-item>
+          </div>
           }
         </ion-list>
       </ion-col>
@@ -124,9 +133,12 @@
           (cdkDropListDropped)="dropToRest($event)"
           [cdkDropListData]="onRest()">
           @for (umpire of onRest(); track umpire.id) {
-          <ion-item cdkDrag [cdkDragData]="umpire">
+          <div class="custom-ion-item" cdkDrag [cdkDragData]="umpire">
+            <div *cdkDragPlaceholder class="custom-ion-item primary">
+              <ion-label>{{ umpire|fullname }}</ion-label>
+            </div>
             <ion-label>{{ umpire|fullname }}</ion-label>
-          </ion-item>
+          </div>
           }
         </ion-list>
       </ion-col>

src/app/tab1/tab1.page.scss

@@ -1,3 +1,12 @@
 .bottom-lists ion-list {
     min-height: 64px;
+}
+
+.custom-ion-item {
+    cursor: move;
+    padding: 10px 15px;
+
+    &.primary {
+        background-color: var(--ion-color-primary);
+    }
 }

src/app/tab1/tab1.page.ts

@@ -1,4 +1,4 @@
-import { Component, computed, effect, inject } from '@angular/core';
+import { Component, computed, inject } from '@angular/core';
 import {
   IonHeader,
   IonToolbar,
@@ -9,20 +9,20 @@ import {
   IonRow,
   IonList,
   IonItem,
-  IonLabel,
-  IonIcon
+  IonLabel
 } from '@ionic/angular/standalone';
 import { SettingsService } from '../services/settings-service';
 import { UmpireService } from '../services/umpire.service';
-import { Umpire, WaitingAsServiceJudge, WaitingAsUmpire } from 'db';
+import { Umpire } from 'db';
 import { WaitingUmpiresService } from '../services/waiting-umpires.service';
 import { WaitingServiceJudgesService } from '../services/waiting-service-judges.service';
 import { FullnamePipe } from '../fullname-pipe';
 import {
   CdkDrag,
   CdkDragDrop,
+  CdkDragPlaceholder,
   CdkDropList,
-  DragDropModule
+  CdkDropListGroup
 } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { CourtUmpireService } from '../services/court.umpire.service';
@@ -47,7 +47,8 @@ import { CourtServiceJudgeService } from '../services/court.service.judge.servic
     CdkDropList,
     CdkDrag,
     CommonModule,
-    DragDropModule
+    CdkDragPlaceholder,
+    CdkDropListGroup
   ]
 })
 export class Tab1Page {
@@ -255,7 +256,6 @@ export class Tab1Page {
   });
 
   dropToRest(event: CdkDragDrop<Umpire[]>) {
-    console.log('drop to rest');
     if (event.previousContainer === event.container) {
       return;
     } else {
@@ -266,37 +266,46 @@ export class Tab1Page {
   }
 
   dropToWaitingServiceJudge(event: CdkDragDrop<Umpire[]>) {
+    const umpireToMove = event.item.data;
     if (event.previousContainer === event.container) {
-      // TODO
-    } else {
-      const comingFrom = event.previousContainer.id;
-      const umpireToMove = event.item.data;
-      this.waitingServiceJudgeService.add(umpireToMove.id);
-
-      this.removeFromOriginalPlace(umpireToMove, comingFrom);
+      this.waitingServiceJudgeService.moveToPosition(
+        umpireToMove.id,
+        event.currentIndex + 1
+      );
+      return;
     }
+    const comingFrom = event.previousContainer.id;
+
+    this.waitingServiceJudgeService.add(
+      umpireToMove.id,
+      event.currentIndex + 1
+    );
+
+    this.removeFromOriginalPlace(umpireToMove, comingFrom);
   }
 
   dropToWaitingUmpire(event: CdkDragDrop<Umpire[]>) {
-    console.log(
-      event.container.data,
-      event.previousContainer.data,
-      event.previousContainer.id,
-      event.container.id
-    );
+    const umpireToMove = event.item.data;
     if (event.previousContainer === event.container) {
-      // TODO
+      this.waitingUmpireService.moveToPosition(
+        umpireToMove.id,
+        event.currentIndex + 1
+      );
+      return;
     } else {
       const comingFrom = event.previousContainer.id;
-      const umpireToMove = event.item.data;
-      this.waitingUmpireService.add(umpireToMove.id);
+      this.waitingUmpireService.add(umpireToMove.id, event.currentIndex + 1);
 
       this.removeFromOriginalPlace(umpireToMove, comingFrom);
     }
   }
 
-  dropToUmpire(event: CdkDragDrop<Umpire[]>, courtNo: number) {
-    // TODO: stop dropping if there is already another umpire
+  dropToUmpire(event: CdkDragDrop<(Umpire | undefined)[]>, courtNo: number) {
+    const targetUmpires = event.container.data;
+
+    if (targetUmpires.length > 0) {
+      return;
+    }
 
     const comingFrom = event.previousContainer.id;
     const umpireToMove = event.item.data;
@@ -305,8 +314,15 @@ export class Tab1Page {
     this.removeFromOriginalPlace(umpireToMove, comingFrom);
   }
 
-  dropToServiceJudge(event: CdkDragDrop<Umpire[]>, courtNo: number) {
-    // TODO: stop dropping if there is already another umpire
+  dropToServiceJudge(
+    event: CdkDragDrop<(Umpire | undefined)[]>,
+    courtNo: number
+  ) {
+    const targetUmpires = event.container.data;
+
+    if (targetUmpires.length > 0) {
+      return;
+    }
 
     const comingFrom = event.previousContainer.id;
     const umpireToMove = event.item.data;
@@ -335,4 +351,11 @@ export class Tab1Page {
       this.courtServiceJudgeService.removeByUmpireId(umpireToMove.id);
     }
   }
+
+  canDropUmpire = (
+    drag: CdkDrag<Umpire>,
+    drop: CdkDropList<Umpire[]>
+  ): boolean => {
+    return drop.data.length === 0;
+  };
 }