Standardize the wow client selector

wowup-electron/src/app/components/common/client-selector/client-selector.component.html

@@ -0,0 +1,38 @@
+<div>
+  <mat-form-field>
+    <mat-label>
+      <div class="d-flex align-items-center">
+        <div class="flex-grow-1" translate>PAGES.MY_ADDONS.CLIENT_TYPE_SELECT_LABEL</div>
+        <div
+          *ngIf="updates && (totalAvailableUpdateCt$ | async) > 0"
+          class="update-badge badge-lg ml-1"
+          translate
+          [translateParams]="{ count: totalAvailableUpdateCt$ | async }"
+        >
+          PAGES.MY_ADDONS.CLIENT_TYPE_SELECT_BADGE
+        </div>
+      </div>
+    </mat-label>
+    <mat-select
+      class="select pointer"
+      [value]="selectedWowInstallationId$ | async"
+      (selectionChange)="onClientChange($event)"
+      [disabled]="enableControls$ | async | invertBool"
+      [disableOptionCentering]="true"
+    >
+      <mat-select-trigger>
+        {{ selectedWowInstallationLabel$ | async }}
+      </mat-select-trigger>
+      <mat-option [value]="installation.id" *ngFor="let installation of wowInstallations$ | async">
+        <div class="d-flex">
+          <div class="flex-grow-1">{{ installation.label }}</div>
+          <div *ngIf="updates && installation.availableUpdateCount > 0">
+            <div class="d-inline update-badge ml-1">
+              {{ installation.availableUpdateCount }}
+            </div>
+          </div>
+        </div>
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>

wowup-electron/src/app/components/common/client-selector/client-selector.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ClientSelectorComponent } from './client-selector.component';
+
+describe('ClientSelectorComponent', () => {
+  let component: ClientSelectorComponent;
+  let fixture: ComponentFixture<ClientSelectorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ClientSelectorComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ClientSelectorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

wowup-electron/src/app/components/common/client-selector/client-selector.component.ts

@@ -0,0 +1,57 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { BehaviorSubject, combineLatest, Observable } from "rxjs";
+import { map } from "rxjs/operators";
+import { WowInstallation } from "../../../../common/warcraft/wow-installation";
+import { AddonService } from "../../../services/addons/addon.service";
+import { SessionService } from "../../../services/session/session.service";
+import { WarcraftInstallationService } from "../../../services/warcraft/warcraft-installation.service";
+
+@Component({
+  selector: "app-client-selector",
+  templateUrl: "./client-selector.component.html",
+  styleUrls: ["./client-selector.component.scss"],
+})
+export class ClientSelectorComponent implements OnInit {
+  @Input() updates: boolean = false;
+
+  public readonly totalAvailableUpdateCt$ = new BehaviorSubject<number>(0);
+
+  public readonly enableControls$ = new BehaviorSubject<boolean>(true);
+
+  public readonly selectedWowInstallationId$ = this._sessionService.selectedWowInstallation$.pipe(
+    map((wowInstall) => wowInstall?.id)
+  );
+
+  public readonly selectedWowInstallationLabel$ = this._sessionService.selectedWowInstallation$.pipe(
+    map((wowInstall) => wowInstall?.label ?? "")
+  );
+
+  public wowInstallations$: Observable<WowInstallation[]> = combineLatest([
+    this._warcraftInstallationService.wowInstallations$,
+    this._addonService.anyUpdatesAvailable$,
+  ]).pipe(
+    map(([installations]) => {
+      let total = 0;
+      installations.forEach((inst) => {
+        inst.availableUpdateCount = this._addonService.getAllAddonsAvailableForUpdate(inst).length;
+        total += inst.availableUpdateCount;
+      });
+
+      this.totalAvailableUpdateCt$.next(total);
+      return installations;
+    })
+  );
+
+  constructor(
+    private _addonService: AddonService,
+    private _sessionService: SessionService,
+    private _warcraftInstallationService: WarcraftInstallationService
+  ) {}
+
+  ngOnInit(): void {}
+
+  public onClientChange(evt: any): void {
+    const val: string = evt.value.toString();
+    this._sessionService.setSelectedWowInstallation(val);
+  }
+}

wowup-electron/src/app/modules/common-ui.module.ts

@@ -6,6 +6,7 @@ import { AlertDialogComponent } from "../components/common/alert-dialog/alert-di
 import { AnimatedLogoComponent } from "../components/common/animated-logo/animated-logo.component";
 import { CellWrapTextComponent } from "../components/common/cell-wrap-text/cell-wrap-text.component";
 import { CenteredSnackbarComponent } from "../components/common/centered-snackbar/centered-snackbar.component";
+import { ClientSelectorComponent } from "../components/common/client-selector/client-selector.component";
 import { ConfirmDialogComponent } from "../components/common/confirm-dialog/confirm-dialog.component";
 import { ExternalUrlConfirmationDialogComponent } from "../components/common/external-url-confirmation-dialog/external-url-confirmation-dialog.component";
 import { PatchNotesDialogComponent } from "../components/common/patch-notes-dialog/patch-notes-dialog.component";
@@ -28,6 +29,7 @@ import { PipesModule } from "./pipes.module";
     TelemetryDialogComponent,
     CellWrapTextComponent,
     CenteredSnackbarComponent,
+    ClientSelectorComponent,
   ],
   imports: [CommonModule, FormsModule, TranslateModule, MatModule, PipesModule],
   exports: [
@@ -42,6 +44,7 @@ import { PipesModule } from "./pipes.module";
     TelemetryDialogComponent,
     CellWrapTextComponent,
     CenteredSnackbarComponent,
+    ClientSelectorComponent,
   ],
 })
 export class CommonUiModule {}

wowup-electron/src/app/pages/get-addons/get-addons.component.html

@@ -5,15 +5,7 @@
   }" (click)="onTableBlur($event)">
   <div class="control-container bg-secondary-3">
     <div class="select-container">
-      <mat-form-field>
-        <mat-label>{{ "PAGES.GET_ADDONS.CLIENT_TYPE_SELECT_LABEL" | translate }}</mat-label>
-        <mat-select class="select" [(value)]="selectedInstallationId" (selectionChange)="onClientChange()"
-          [disabled]="(isBusy$ | async) === true" [disableOptionCentering]="true">
-          <mat-option [value]="installation.id" *ngFor="let installation of wowInstallations$ | async">
-            {{ installation.label }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
+      <app-client-selector></app-client-selector>
     </div>
     <div *ngIf="selectedAddonCategory?.category !== addonCategory.AllAddons" class="center-container text-1">
       <h4 class="m-0">

wowup-electron/src/app/pages/my-addons/my-addons.component.html

@@ -9,42 +9,7 @@
 >
   <div class="control-container bg-secondary-3">
     <div class="select-container">
-      <mat-form-field>
-        <mat-label>
-          <div class="d-flex align-items-center">
-            <div class="flex-grow-1">{{ "PAGES.MY_ADDONS.CLIENT_TYPE_SELECT_LABEL" | translate }}</div>
-            <div
-              *ngIf="(totalAvailableUpdateCt$ | async) > 0"
-              class="update-badge badge-lg ml-1"
-              translate
-              [translateParams]="{ count: totalAvailableUpdateCt$ | async }"
-            >
-              PAGES.MY_ADDONS.CLIENT_TYPE_SELECT_BADGE
-            </div>
-          </div>
-        </mat-label>
-        <mat-select
-          class="select pointer"
-          [value]="selectedWowInstallationId$ | async"
-          (selectionChange)="onClientChange($event)"
-          [disabled]="enableControls$ | async | invertBool"
-          [disableOptionCentering]="true"
-        >
-          <mat-select-trigger>
-            {{ selectedWowInstallationLabel$ | async }}
-          </mat-select-trigger>
-          <mat-option [value]="installation.id" *ngFor="let installation of wowInstallations$ | async">
-            <div class="d-flex">
-              <div class="flex-grow-1">{{ installation.label }}</div>
-              <div *ngIf="installation.availableUpdateCount > 0">
-                <div class="d-inline update-badge ml-1">
-                  {{ installation.availableUpdateCount }}
-                </div>
-              </div>
-            </div>
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
+      <app-client-selector updates="true"></app-client-selector>
     </div>
     <div class="right-container">
       <div class="filter-container" *ngIf="hasSelectedWowInstallationId$ | async">