From 10169ec2d88d9b568596de5f47187575cb549fa2 Mon Sep 17 00:00:00 2001
From: Tschaika <tschaika@protonmail.com>
Date: Sun, 30 Jun 2024 12:59:51 +0200
Subject: [PATCH] DEV: select improvements

---
 .../add-blinds-select-option.component.html   | 14 ++++++++
 .../add-blinds-select-option.component.scss   | 10 ++++++
 .../add-blinds-select-option.component.ts     | 15 ++++++++
 .../add-blinds/add-blinds.component.html      | 21 +++++++++---
 .../add-blinds/add-blinds.component.ts        | 24 ++++---------
 .../add-pause-select-option.component.html    | 20 +++++++++++
 .../add-pause-select-option.component.scss    | 10 ++++++
 .../add-pause-select-option.component.ts      | 15 ++++++++
 .../add-pause/add-pause.component.html        | 19 +++++++++--
 .../dialogs/add-pause/add-pause.component.ts  | 22 ++++--------
 .../pipes/blind-level-trigger-text.pipe.ts    | 24 +++++++++++++
 .../shared/pipes/pause-trigger-text.pipe.ts   | 34 +++++++++++++++++++
 .../user-list/user-list.component.html        | 31 ++++++++++++++++-
 .../user-list/user-list.component.ts          |  7 +++-
 src/styles.scss                               |  6 ++++
 src/styles/_colors_texts.scss                 |  7 ++--
 src/styles/_spacing_dimensions.scss           | 16 +++++++++
 17 files changed, 250 insertions(+), 45 deletions(-)
 create mode 100644 src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.html
 create mode 100644 src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.scss
 create mode 100644 src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.ts
 create mode 100644 src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.html
 create mode 100644 src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.scss
 create mode 100644 src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.ts
 create mode 100644 src/app/shared/pipes/blind-level-trigger-text.pipe.ts
 create mode 100644 src/app/shared/pipes/pause-trigger-text.pipe.ts

diff --git a/src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.html b/src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.html
new file mode 100644
index 0000000..b3de3c8
--- /dev/null
+++ b/src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.html
@@ -0,0 +1,14 @@
+<div class="blind-level-select-option flex align-center">
+    <span class="bold time">
+        {{ blindLevel().duration }}min
+    </span>
+
+    <div class="flex flex-dir-column">
+        <span class="bold">
+            {{ blindLevel().sb }} / {{ blindLevel().bb }}
+        </span>
+        <span>
+            <small>Ante {{ blindLevel().ante }} | Btn Ante {{ blindLevel().btnAnte }}</small>
+        </span>
+    </div>
+</div>
diff --git a/src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.scss b/src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.scss
new file mode 100644
index 0000000..e263508
--- /dev/null
+++ b/src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.scss
@@ -0,0 +1,10 @@
+.blind-level-select-option {
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.time {
+    width: 120px;
+    font-size: 28px;
+    color: #888888;
+}
diff --git a/src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.ts b/src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.ts
new file mode 100644
index 0000000..69cff3b
--- /dev/null
+++ b/src/app/dialogs/add-blinds/add-blinds-select-option/add-blinds-select-option.component.ts
@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+import { BlindLevel } from '../../../shared/interfaces/blind-level.interface';
+
+@Component({
+    selector: 'app-add-blinds-select-option',
+    standalone: true,
+    imports: [],
+    templateUrl: './add-blinds-select-option.component.html',
+    styleUrl: './add-blinds-select-option.component.scss'
+})
+export class AddBlindsSelectOptionComponent {
+
+    blindLevel = input.required<BlindLevel>();
+
+}
diff --git a/src/app/dialogs/add-blinds/add-blinds.component.html b/src/app/dialogs/add-blinds/add-blinds.component.html
index bb2f867..0f729eb 100644
--- a/src/app/dialogs/add-blinds/add-blinds.component.html
+++ b/src/app/dialogs/add-blinds/add-blinds.component.html
@@ -19,12 +19,25 @@ <h2>Add Levels</h2>
         <mat-select
             name="blindIds"
             [ngModel]="model.blindIds()"
-            multiple
+            [multiple]="true"
+            #blinds
             (selectionChange)="model.blindIds.set($event.value)"
         >
-            @for (blind of allBlinds; track blind) {
-                <mat-option [value]="blind.value">
-                    {{ blind.label }}
+            <mat-select-trigger>
+                {{ blinds.value | blindLevelTriggerText:allBlindLevels }}
+                @if ((blinds.value?.length || 0) > 1) {
+                    <span class="example-additional-selection">
+                      (+{{ (blinds.value?.length ?? 0) - 1 }} {{ blinds.value?.length === 2 ? 'other' : 'others' }}
+                        )
+                    </span>
+                }
+            </mat-select-trigger>
+
+            @for (blindLevel of allBlindLevels; track blindLevel) {
+                <mat-option [value]="blindLevel.id">
+                    <app-add-blinds-select-option
+                        [blindLevel]="blindLevel"
+                    ></app-add-blinds-select-option>
                 </mat-option>
             }
         </mat-select>
diff --git a/src/app/dialogs/add-blinds/add-blinds.component.ts b/src/app/dialogs/add-blinds/add-blinds.component.ts
index 740b7cb..6506bf3 100644
--- a/src/app/dialogs/add-blinds/add-blinds.component.ts
+++ b/src/app/dialogs/add-blinds/add-blinds.component.ts
@@ -21,6 +21,8 @@ import { AddBlindsModel } from './add-blinds-model.interface';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
+import { BlindLevelTriggerTextPipe } from '../../shared/pipes/blind-level-trigger-text.pipe';
+import { AddBlindsSelectOptionComponent } from './add-blinds-select-option/add-blinds-select-option.component';
 
 @Component({
     selector: 'app-add-blinds',
@@ -34,7 +36,9 @@ import { MatSelectModule } from '@angular/material/select';
         AsyncPipe,
         MatFormFieldModule,
         MatOptionModule,
-        MatSelectModule
+        MatSelectModule,
+        BlindLevelTriggerTextPipe,
+        AddBlindsSelectOptionComponent
     ]
 })
 export class AddBlindsComponent extends BaseAddDialogComponent<AddAddonComponent, AddBlindsModel> implements OnInit {
@@ -50,7 +54,7 @@ export class AddBlindsComponent extends BaseAddDialogComponent<AddAddonComponent
     private destroyRef: DestroyRef = inject(DestroyRef);
     private fetchService: FetchService = inject(FetchService);
 
-    allBlinds: { label: string, value: number }[];
+    allBlindLevels: BlindLevel[] = [];
     filterDuration: number;
     private filterDurationTrigger$ = new BehaviorSubject<number>(0);
 
@@ -71,7 +75,7 @@ export class AddBlindsComponent extends BaseAddDialogComponent<AddAddonComponent
         ]).pipe(
             takeUntilDestroyed(this.destroyRef),
             tap(([blinds, duration]: [BlindLevel[], number]) => {
-                this.allBlinds = blinds
+                this.allBlindLevels = blinds
                     .filter(b => !b.isPause)
                     .sort((a, b) => a.bb - b.bb)
                     .filter(blind => !base.filter(p => !p.isPause).map(p => p.id).includes(blind.id))
@@ -83,12 +87,6 @@ export class AddBlindsComponent extends BaseAddDialogComponent<AddAddonComponent
 
                             return +level.duration === +duration;
                         }
-                    )
-                    .map(
-                        b => ({
-                            label: this.getLabel(b),
-                            value: b.id
-                        })
                     );
 
                 this.durations = Array.from(new Set(blinds.map(b => b.duration)));
@@ -97,14 +95,6 @@ export class AddBlindsComponent extends BaseAddDialogComponent<AddAddonComponent
 
     }
 
-    private getLabel(blind: BlindLevel): string {
-        if (!blind.isPause) {
-            return `${blind.sb} / ${blind.bb} / ${blind.ante} / ${blind.btnAnte} - ${blind.duration}min`;
-        }
-
-        return `PAUSE -${blind.isChipUp ? ' CHIP-UP -' : ''} ${blind.duration}min`;
-    }
-
     private initModel(): void {
         this.model = {
             blindIds: signal(undefined),
diff --git a/src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.html b/src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.html
new file mode 100644
index 0000000..594f3a0
--- /dev/null
+++ b/src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.html
@@ -0,0 +1,20 @@
+<div class="pause-select-option flex align-center">
+    <span class="bold time">
+        {{ pause().duration }}min
+    </span>
+
+    <div class="flex flex-dir-column">
+        @if (pause().isChipUp) {
+            <span><small>Chip-Up</small></span>
+        }
+
+        @if (pause().endsRebuy) {
+            <span><small>Ends Rebuy</small></span>
+        }
+
+        @if (!pause().isChipUp && !pause().endsRebuy) {
+            <span><small>Regular</small></span>
+        }
+
+    </div>
+</div>
diff --git a/src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.scss b/src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.scss
new file mode 100644
index 0000000..ddbaf25
--- /dev/null
+++ b/src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.scss
@@ -0,0 +1,10 @@
+.pause-select-option {
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.time {
+    width: 120px;
+    font-size: 28px;
+    color: #888888;
+}
diff --git a/src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.ts b/src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.ts
new file mode 100644
index 0000000..7f271b1
--- /dev/null
+++ b/src/app/dialogs/add-pause/add-pause-select-option/add-pause-select-option.component.ts
@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+import { BlindLevel } from '../../../shared/interfaces/blind-level.interface';
+
+@Component({
+    selector: 'app-add-pause-select-option',
+    standalone: true,
+    imports: [],
+    templateUrl: './add-pause-select-option.component.html',
+    styleUrl: './add-pause-select-option.component.scss'
+})
+export class AddPauseSelectOptionComponent {
+
+    pause = input.required<BlindLevel>();
+
+}
diff --git a/src/app/dialogs/add-pause/add-pause.component.html b/src/app/dialogs/add-pause/add-pause.component.html
index d398100..bfba438 100644
--- a/src/app/dialogs/add-pause/add-pause.component.html
+++ b/src/app/dialogs/add-pause/add-pause.component.html
@@ -21,11 +21,24 @@ <h2>Add Pause</h2>
         <mat-select
             name="blindId"
             [ngModel]="model.blindId()"
+            #pauses
             (selectionChange)="model.blindId.set($event.value)"
         >
-            @for (blind of allPauses; track blind) {
-                <mat-option [value]="blind.value">
-                    {{ blind.label }}
+            <mat-select-trigger>
+                {{ pauses.value | pauseTriggerText:allPauses }}
+                @if ((pauses.value?.length || 0) > 1) {
+                    <span class="example-additional-selection">
+                      (+{{ (pauses.value?.length ?? 0) - 1 }} {{ pauses.value?.length === 2 ? 'other' : 'others' }}
+                        )
+                    </span>
+                }
+            </mat-select-trigger>
+
+            @for (pause of allPauses; track pause) {
+                <mat-option [value]="pause.id">
+                    <app-add-pause-select-option
+                        [pause]="pause"
+                    ></app-add-pause-select-option>
                 </mat-option>
             }
         </mat-select>
diff --git a/src/app/dialogs/add-pause/add-pause.component.ts b/src/app/dialogs/add-pause/add-pause.component.ts
index 8e0150b..fc78cad 100644
--- a/src/app/dialogs/add-pause/add-pause.component.ts
+++ b/src/app/dialogs/add-pause/add-pause.component.ts
@@ -16,6 +16,8 @@ import { AddPauseModel } from './add-pause-model.interface';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatOptionModule } from '@angular/material/core';
 import { MatSelectModule } from '@angular/material/select';
+import { PauseTriggerTextPipe } from '../../shared/pipes/pause-trigger-text.pipe';
+import { AddPauseSelectOptionComponent } from './add-pause-select-option/add-pause-select-option.component';
 
 @Component({
     selector: 'app-add-pause',
@@ -28,7 +30,9 @@ import { MatSelectModule } from '@angular/material/select';
         MatButtonModule,
         MatFormFieldModule,
         MatOptionModule,
-        MatSelectModule
+        MatSelectModule,
+        PauseTriggerTextPipe,
+        AddPauseSelectOptionComponent
     ]
 })
 export class AddPauseComponent extends BaseAddDialogComponent<AddPlayerComponent, AddPauseModel> implements OnInit {
@@ -44,7 +48,7 @@ export class AddPauseComponent extends BaseAddDialogComponent<AddPlayerComponent
     private blindStructureApiService: BlindStructureApiService = inject(BlindStructureApiService);
     private destroyRef: DestroyRef = inject(DestroyRef);
 
-    allPauses: { label: string, value: number }[];
+    allPauses: BlindLevel[] = [];
     filterDuration: number;
     private filterDurationTrigger$ = new BehaviorSubject<number>(0);
 
@@ -71,25 +75,11 @@ export class AddPauseComponent extends BaseAddDialogComponent<AddPlayerComponent
 
                             return level.duration === +duration;
                         }
-                    )
-                    .map(
-                        b => ({
-                            label: this.getLabel(b),
-                            value: b.id
-                        })
                     );
             })
         ).subscribe();
     }
 
-    private getLabel(blind: BlindLevel): string {
-        if (!blind.isPause) {
-            return `${blind.sb} / ${blind.bb} / ${blind.ante} / ${blind.btnAnte} - ${blind.duration}min`;
-        }
-
-        return `PAUSE -${blind.isChipUp ? ' CHIP-UP -' : ''}${blind.endsRebuy ? ' ENDS REBUY -' : ''} ${blind.duration}min`;
-    }
-
     private initModel(): void {
         this.model = {
             blindId: signal(undefined),
diff --git a/src/app/shared/pipes/blind-level-trigger-text.pipe.ts b/src/app/shared/pipes/blind-level-trigger-text.pipe.ts
new file mode 100644
index 0000000..c644fc8
--- /dev/null
+++ b/src/app/shared/pipes/blind-level-trigger-text.pipe.ts
@@ -0,0 +1,24 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { BlindLevel } from '../interfaces/blind-level.interface';
+
+@Pipe({
+    name: 'blindLevelTriggerText',
+    standalone: true
+})
+export class BlindLevelTriggerTextPipe implements PipeTransform {
+
+    transform(blindIds: number[] | null | undefined, allBlinds: BlindLevel[]): string {
+        if (!blindIds || blindIds.length === 0 || blindIds[0] === -1) {
+            return '';
+        }
+
+        const blindLevel = allBlinds.find(bl => bl.id === blindIds[0]);
+
+        if (!blindLevel) {
+            return '';
+        }
+
+        return `${blindLevel.sb} / ${blindLevel.bb} / ${blindLevel.ante} / ${blindLevel.btnAnte} / ${blindLevel.duration}min`;
+    }
+
+}
diff --git a/src/app/shared/pipes/pause-trigger-text.pipe.ts b/src/app/shared/pipes/pause-trigger-text.pipe.ts
new file mode 100644
index 0000000..c40c718
--- /dev/null
+++ b/src/app/shared/pipes/pause-trigger-text.pipe.ts
@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { BlindLevel } from '../interfaces/blind-level.interface';
+
+@Pipe({
+    name: 'pauseTriggerText',
+    standalone: true
+})
+export class PauseTriggerTextPipe implements PipeTransform {
+
+    transform(blindIds: number[] | null | undefined, allBlinds: BlindLevel[]): string {
+        if (!blindIds || blindIds.length === 0 || blindIds[0] === -1) {
+            return '';
+        }
+
+        const blindLevel = allBlinds.find(bl => bl.id === blindIds[0]);
+
+        if (!blindLevel) {
+            return '';
+        }
+
+        let text = `Pause ${blindLevel.duration}min`;
+
+        if (blindLevel.isChipUp) {
+            text += ' (Chip Up)';
+        }
+
+        if (blindLevel.endsRebuy) {
+            text += ' (Ends Rebuy)';
+        }
+
+        return text;
+    }
+
+}
diff --git a/src/app/welcome/welcome-page/components/user-list/user-list.component.html b/src/app/welcome/welcome-page/components/user-list/user-list.component.html
index e64d25a..a40902e 100644
--- a/src/app/welcome/welcome-page/components/user-list/user-list.component.html
+++ b/src/app/welcome/welcome-page/components/user-list/user-list.component.html
@@ -1,6 +1,6 @@
 @if (users()?.length) {
     <div class="flex flex-dir-column">
-        @for (player of users(); track player.id) {
+        @for (player of first5Users(); track player.id) {
             <app-user-with-image
                 [name]="player.name"
                 [subtitle]="player.email"
@@ -9,6 +9,35 @@
             ></app-user-with-image>
         }
     </div>
+
+    @if (restOfUsers().length > 0) {
+        <span
+            class="flex align-center cursor-pointer color-link m-b-12 p-l-4"
+            (click)="isListExpanded.set(!isListExpanded())"
+        >
+            <i
+                class="fa fa-chevron-circle-down hoverable m-r-12"
+                [class.rotate-180]="!isListExpanded()"
+            ></i>
+
+            <p class="margin-0">Show More </p>
+        </span>
+
+        <div
+            class="expandable"
+            [class.expanded]="isListExpanded()"
+        >
+            @for (player of restOfUsers(); track player.id) {
+                <app-user-with-image
+                    [name]="player.name"
+                    [subtitle]="player.email"
+                    [image]="player.image"
+                    [size]="userImageSize()"
+                ></app-user-with-image>
+            }
+        </div>
+    }
+
 } @else {
     <h4>
         {{ noEntriesText() }}
diff --git a/src/app/welcome/welcome-page/components/user-list/user-list.component.ts b/src/app/welcome/welcome-page/components/user-list/user-list.component.ts
index d9d05b1..2949b63 100644
--- a/src/app/welcome/welcome-page/components/user-list/user-list.component.ts
+++ b/src/app/welcome/welcome-page/components/user-list/user-list.component.ts
@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { Component, computed, input, signal } from '@angular/core';
 import { UserImageRoundComponent } from '../../../../shared/components/user-image-round/user-image-round.component';
 import { Player } from '../../../../shared/interfaces/player.interface';
 import { UserWithImageComponent } from '../../../../shared/components/user-with-image/user-with-image.component';
@@ -19,4 +19,9 @@ export class UserListComponent {
     userImageSize = input.required<number>();
     noEntriesText = input.required<string>();
 
+    first5Users = computed(() => this.users()?.slice(0, 5) ?? []);
+    restOfUsers = computed(() => this.users()?.slice(5) ?? []);
+
+    isListExpanded = signal(false);
+
 }
diff --git a/src/styles.scss b/src/styles.scss
index 48f31c2..b462511 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -279,3 +279,9 @@ form p {
 .relative {
     position: relative;
 }
+
+.cursor-pointer {
+    cursor: pointer;
+}
+
+
diff --git a/src/styles/_colors_texts.scss b/src/styles/_colors_texts.scss
index 36081d5..3558dab 100644
--- a/src/styles/_colors_texts.scss
+++ b/src/styles/_colors_texts.scss
@@ -35,9 +35,6 @@ h4 {
 }
 
 
-
-
-
 .regular {
     font-weight: normal !important;
 }
@@ -111,3 +108,7 @@ h4 .fa-exclamation-triangle {
     overflow: hidden;
     text-overflow: ellipsis;
 }
+
+.color-link {
+    color: $primary;
+}
diff --git a/src/styles/_spacing_dimensions.scss b/src/styles/_spacing_dimensions.scss
index 625172f..ca5df64 100644
--- a/src/styles/_spacing_dimensions.scss
+++ b/src/styles/_spacing_dimensions.scss
@@ -71,6 +71,22 @@
     flex: 0 0 120px;
 }
 
+.margin-0 {
+    margin: 0;
+}
+
+.m-r-12 {
+    margin-right: 12px;
+}
+
+.m-b-12 {
+    margin-bottom: 12px;
+}
+
+.p-l-4 {
+    padding-left: 4px;
+}
+
 .border-bottom-1 {
     border-bottom: solid 1px $borderColor;
 }