Merge pull request #217 from mrchops1024/fix/get-addons-alpha-beta

fix(electron): add alpha/beta indicators for get addons

wowup-electron/src/app/components/potential-addon-table-column/potential-addon-table-column.component.html

@@ -1,14 +1,13 @@
 <div class="addon-column row align-items-center">
-  <div *ngIf="hasThumbnail === true" class="addon-logo-container"
-    [style.backgroundImage]="'url(' + addon.thumbnailUrl + ')'">
-  </div>
-  <div *ngIf="hasThumbnail === false" class="addon-logo-container">
-    <div class="addon-logo-letter">
-      {{thumbnailLetter}}
+  <div class="thumbnail-container">
+    <div class="addon-logo-container" [style.backgroundImage]="'url(' + addon.thumbnailUrl + ')'"></div>
+    <div *ngIf="isBetaChannel || isAlphaChannel" class="channel"
+      [ngClass]="{'beta': isBetaChannel, 'alpha': isAlphaChannel }">
+      {{isAlphaChannel ? 'Alpha': 'Beta'}}
     </div>
   </div>
   <div>
     <a class="addon-title mat-subheading-2" (click)="viewDetails()">{{addon.name}}</a>
     <div class="addon-version">{{addon | getAddonListItemFileProp:'version':channel}}</div>
   </div>
-</div>
+</div>

wowup-electron/src/app/components/potential-addon-table-column/potential-addon-table-column.component.scss

@@ -4,22 +4,39 @@
   padding-top: 0.5em;
   padding-bottom: 0.5em;
 
-  .addon-logo-container {
-    background-color: $dark-2;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  .thumbnail-container {
     margin-right: 11px;
-    flex-shrink: 0;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
 
-    .addon-logo {
-      width: 100%;
+    .addon-logo-container {
+      background-color: $dark-2;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      flex-shrink: 0;
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center;
+
+      .addon-logo {
+        width: 100%;
+      }
+    }
+
+    .channel {
+      background: $dark-4;
+      text-align: center;
+      font-weight: 400;
+      font-size: 0.8em;
+
+      &.beta {
+        color: $rare-color;
+      }
+
+      &.alpha {
+        color: $epic-color;
+      }
     }
 
     .addon-logo-letter {

wowup-electron/src/app/components/potential-addon-table-column/potential-addon-table-column.component.ts

@@ -3,28 +3,36 @@ import {
   EventEmitter,
   Input,
   OnChanges,
-  OnInit,
   Output,
   SimpleChanges,
 } from "@angular/core";
 import { GetAddonListItem } from "app/business-objects/get-addon-list-item";
+import { WowClientType } from "app/models/warcraft/wow-client-type";
 import { AddonChannelType } from "app/models/wowup/addon-channel-type";
 import { AddonSearchResult } from "app/models/wowup/addon-search-result";
-import { SessionService } from "app/services/session/session.service";
-import { WowUpService } from "app/services/wowup/wowup.service";
+import { GetAddonListItemFilePropPipe } from "app/pipes/get-addon-list-item-file-prop.pipe";
 
 @Component({
   selector: "app-potential-addon-table-column",
   templateUrl: "./potential-addon-table-column.component.html",
   styleUrls: ["./potential-addon-table-column.component.scss"],
 })
-export class PotentialAddonTableColumnComponent implements OnInit, OnChanges {
+export class PotentialAddonTableColumnComponent implements OnChanges {
   @Input("addon") addon: GetAddonListItem;
   @Input() channel: AddonChannelType;
+  @Input() clientType: WowClientType;
 
   @Output() onViewDetails: EventEmitter<AddonSearchResult> = new EventEmitter();
 
-  public addonVersion: string = "";
+  private _latestChannelType: AddonChannelType = AddonChannelType.Stable;
+
+  public get isBetaChannel(): boolean {
+    return this._latestChannelType === AddonChannelType.Beta;
+  }
+
+  public get isAlphaChannel(): boolean {
+    return this._latestChannelType === AddonChannelType.Alpha;
+  }
 
   public get hasThumbnail() {
     return !!this.addon.thumbnailUrl;
@@ -35,23 +43,15 @@ export class PotentialAddonTableColumnComponent implements OnInit, OnChanges {
   }
 
   constructor(
-    private _sessionService: SessionService,
-    private _wowupService: WowUpService
+    private _getAddonListItemFileProp: GetAddonListItemFilePropPipe
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes.channel) {
-      const latestFile = this.addon.getLatestFile(this.channel);
-      this.addonVersion = latestFile?.version;
+    if (changes.clientType) {
+      this._latestChannelType = this._getAddonListItemFileProp.transform(this.addon, 'channelType', this.channel) as AddonChannelType;
     }
   }
 
-  ngOnInit(): void {
-    // this._defaultChannel = this._wowupService.getDefaultAddonChannel(
-    //   this._sessionService.selectedClientType
-    // );
-  }
-
   viewDetails() {
     this.onViewDetails.emit(this.addon.searchResult);
   }

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

@@ -45,7 +45,7 @@
           {{'PAGES.GET_ADDONS.TABLE.ADDON_COLUMN_HEADER' | translate}}
         </th>
         <td mat-cell *matCellDef="let element">
-          <app-potential-addon-table-column [addon]="element" [channel]="defaultAddonChannel"
+          <app-potential-addon-table-column [addon]="element" [channel]="defaultAddonChannel" [clientType]="selectedClient"
             (onViewDetails)="openDetailDialog(element)">
           </app-potential-addon-table-column>
         </td>

wowup-electron/src/app/pages/home/home.module.ts

@@ -66,7 +66,8 @@ import { AddonUpdateButtonComponent } from "app/components/addon-update-button/a
     DirectiveModule,
   ],
   providers: [
-    DatePipe
+    DatePipe,
+    GetAddonListItemFilePropPipe,
   ]
 })
 export class HomeModule {}