Added package for progress buttonAdded component for re-usable install button

wowup-electron/package.json

@@ -119,6 +119,7 @@
     "electron-updater": "4.3.5",
     "globrex": "0.1.2",
     "lodash": "4.17.19",
+    "mat-progress-buttons": "9.1.1",
     "ncp": "2.0.0",
     "node-cache": "5.1.2",
     "node-disk-info": "1.1.0",

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

@@ -22,6 +22,7 @@ import { FooterComponent } from './components/footer/footer.component';
 import { DefaultHeadersInterceptor } from './interceptors/default-headers.interceptor';
 import { AnalyticsService } from './services/analytics/analytics.service';
 import { DirectiveModule } from './directive.module';
+import { MatProgressButtonsModule } from 'mat-progress-buttons';
 
 // AoT requires an exported function for factories
 export function httpLoaderFactory(http: HttpClient): TranslateHttpLoader {
@@ -42,6 +43,7 @@ export function httpLoaderFactory(http: HttpClient): TranslateHttpLoader {
     HomeModule,
     AppRoutingModule,
     DirectiveModule,
+    MatProgressButtonsModule.forRoot(),
     TranslateModule.forRoot({
       loader: {
         provide: TranslateLoader,

wowup-electron/src/app/components/addon-detail/addon-detail.component.html

@@ -27,17 +27,14 @@
   </mat-dialog-content>
   <mat-dialog-actions class="dialog-buttons">
     <div class="btn-wrapper">
-      <a appExternalLink mat-stroked-button color="primary"[href]="addonDetail.externalUrl"
+      <a
+        appExternalLink
+        mat-stroked-button
+        color="primary"
+        [href]="addonDetail.externalUrl"
         >VIEW IN BROWSER</a
       >
-      <button
-        mat-raised-button
-        class="mat-primary"
-        (click)="installAddon()"
-        cdkFocusInitial
-      >
-        INSTALL
-      </button>
+      <app-addon-install-button [addon]="addonDetail"> </app-addon-install-button>
     </div>
   </mat-dialog-actions>
 </div>

wowup-electron/src/app/components/addon-install-button/addon-install-button.component.html

@@ -0,0 +1 @@
+<mat-bar-button (btnClick)="onButtonClick()" [options]="buttonOptions" cdkFocusInitial></mat-bar-button>

wowup-electron/src/app/components/addon-install-button/addon-install-button.component.spec.ts

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

wowup-electron/src/app/components/addon-install-button/addon-install-button.component.ts

@@ -0,0 +1,101 @@
+import { Component, Input, OnInit } from "@angular/core";
+import { AddonDetailModel } from "app/models/wowup/addon-detail.model";
+import { AddonInstallState } from "app/models/wowup/addon-install-state";
+import { PotentialAddon } from "app/models/wowup/potential-addon";
+import { AddonService } from "app/services/addons/addon.service";
+import { SessionService } from "app/services/session/session.service";
+import { MatProgressButtonOptions } from "mat-progress-buttons";
+
+@Component({
+  selector: "app-addon-install-button",
+  templateUrl: "./addon-install-button.component.html",
+  styleUrls: ["./addon-install-button.component.scss"],
+})
+export class AddonInstallButtonComponent implements OnInit {
+  @Input("addon") addon: PotentialAddon | AddonDetailModel;
+
+  isInstalled: boolean;
+  canUninstall: boolean;
+  hasUpdate: boolean;
+  buttonOptions: MatProgressButtonOptions;
+
+  constructor(
+    private _addonService: AddonService,
+    private _sessionService: SessionService
+  ) {}
+
+  ngOnInit(): void {
+    this.isInstalled = this._addonService.isInstalled(
+      this.addon.externalId,
+      this._sessionService.selectedClientType
+    );
+    this.setButtonOptions();
+  }
+
+  setButtonOptions(): void {
+    if (!this.isInstalled) {
+      this.buttonOptions = this.getBaseBtnOptions();
+    } else if (this.isInstalled && !this.canUninstall) {
+      this.buttonOptions = this.getInstalledBtnOptions();
+    } else if (this.isInstalled && this.canUninstall) {
+      this.buttonOptions = this.getUninstallBtnOptions();
+    } else if (this.isInstalled && this.hasUpdate) {
+      this.buttonOptions = this.getUpdateBtnOptions();
+    }
+  }
+
+  onButtonClick(): void {
+    this.buttonOptions.active = true;
+    this.buttonOptions.text = "Installing...";
+    this._addonService.installPotentialAddon(
+      this.addon as PotentialAddon,
+      this._sessionService.selectedClientType,
+      (state, progress) => {
+        if (state === AddonInstallState.Complete) {
+          this.isInstalled = true;
+          this.setButtonOptions();
+        }
+        this.buttonOptions.value = progress;
+      }
+    );
+  }
+
+  private getBaseBtnOptions(): MatProgressButtonOptions {
+    return {
+      active: false,
+      text: "Install",
+      buttonColor: "primary",
+      barColor: "accent",
+      customClass: 'install-button',
+      raised: true,
+      stroked: false,
+      mode: "determinate",
+      value: 0,
+      disabled: false,
+      fullWidth: false,
+    };
+  }
+
+  private getInstalledBtnOptions(): MatProgressButtonOptions {
+    return {
+      ...this.getBaseBtnOptions(),
+      disabled: true,
+      active: false,
+      text: "Installed",
+    };
+  }
+
+  private getUninstallBtnOptions(): MatProgressButtonOptions {
+    return {
+      ...this.getBaseBtnOptions(),
+      text: "Uninstall",
+    };
+  }
+
+  private getUpdateBtnOptions(): MatProgressButtonOptions {
+    return {
+      ...this.getBaseBtnOptions(),
+      text: "Update",
+    };
+  }
+}

wowup-electron/src/app/models/wowup/addon-detail.model.ts

@@ -3,6 +3,7 @@ import { AddonProviderType } from "app/addon-providers/addon-provider";
 export class AddonDetailModel {
   id: number;
   categoryId: number;
+  externalId: string;
   version: string;
   name: string;
   author: string;
@@ -33,5 +34,6 @@ export class AddonDetailModel {
     this.latestVersion = json.latestVersion;
     this.updatedAt = json.updatedAt;
     this.externalUrl = json.externalUrl;
+    this.externalId = json.externalId;
   }
 }

wowup-electron/src/app/models/wowup/potential-addon.ts

@@ -8,4 +8,5 @@ export interface PotentialAddon {
   author: string;
   downloadCount: number;
   summary?: string;
+  screenshotUrls?: string[];
 }

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

@@ -52,7 +52,8 @@
       <ng-container matColumnDef="status">
         <th mat-header-cell *matHeaderCellDef> Status </th>
         <td mat-cell *matCellDef="let element">
-          <app-potential-addon-status-column [addon]="element" ></app-potential-addon-status-column>
+          <!-- <app-potential-addon-status-column [addon]="element" ></app-potential-addon-status-column> -->
+          <app-addon-install-button [addon]="element"> </app-addon-install-button>
         </td>
       </ng-container>
 

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

@@ -1,28 +1,30 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { NgModule } from "@angular/core";
+import { CommonModule } from "@angular/common";
 
-import { HomeRoutingModule } from './home-routing.module';
+import { HomeRoutingModule } from "./home-routing.module";
 
-import { HomeComponent } from './home.component';
-import { SharedModule } from '../../shared/shared.module';
-import { MatModule } from '../../mat-module';
-import { MyAddonsComponent } from '../my-addons/my-addons.component';
-import { OptionsComponent } from '../options/options.component';
-import { GetAddonsComponent } from '../get-addons/get-addons.component';
-import { AboutComponent } from '../about/about.component';
-import { PotentialAddonTableColumnComponent } from 'app/components/potential-addon-table-column/potential-addon-table-column.component';
-import { PotentialAddonStatusColumnComponent } from 'app/components/potential-addon-status-column/potential-addon-status-column.component';
-import { MyAddonsAddonCellComponent } from 'app/components/my-addons-addon-cell/my-addons-addon-cell.component';
-import { ProgressSpinnerComponent } from 'app/components/progress-spinner/progress-spinner.component';
-import { DownloadCountPipe } from 'app/pipes/download-count.pipe';
-import { TelemetryDialogComponent } from 'app/components/telemetry-dialog/telemetry-dialog.component';
-import { ConfirmDialogComponent } from 'app/components/confirm-dialog/confirm-dialog.component';
-import { AlertDialogComponent } from 'app/components/alert-dialog/alert-dialog.component';
-import { WowClientOptionsComponent } from 'app/components/wow-client-options/wow-client-options.component';
-import { DirectiveModule } from 'app/directive.module';
-import { InstallFromUrlDialogComponent } from 'app/components/install-from-url-dialog/install-from-url-dialog.component';
-import { AddonDetailComponent } from 'app/components/addon-detail/addon-detail.component';
-import { AddonProviderBadgeComponent } from 'app/components/addon-provider-badge/addon-provider-badge.component';
+import { HomeComponent } from "./home.component";
+import { SharedModule } from "../../shared/shared.module";
+import { MatModule } from "../../mat-module";
+import { MyAddonsComponent } from "../my-addons/my-addons.component";
+import { OptionsComponent } from "../options/options.component";
+import { GetAddonsComponent } from "../get-addons/get-addons.component";
+import { AboutComponent } from "../about/about.component";
+import { PotentialAddonTableColumnComponent } from "app/components/potential-addon-table-column/potential-addon-table-column.component";
+import { PotentialAddonStatusColumnComponent } from "app/components/potential-addon-status-column/potential-addon-status-column.component";
+import { MyAddonsAddonCellComponent } from "app/components/my-addons-addon-cell/my-addons-addon-cell.component";
+import { ProgressSpinnerComponent } from "app/components/progress-spinner/progress-spinner.component";
+import { DownloadCountPipe } from "app/pipes/download-count.pipe";
+import { TelemetryDialogComponent } from "app/components/telemetry-dialog/telemetry-dialog.component";
+import { ConfirmDialogComponent } from "app/components/confirm-dialog/confirm-dialog.component";
+import { AlertDialogComponent } from "app/components/alert-dialog/alert-dialog.component";
+import { WowClientOptionsComponent } from "app/components/wow-client-options/wow-client-options.component";
+import { DirectiveModule } from "app/directive.module";
+import { InstallFromUrlDialogComponent } from "app/components/install-from-url-dialog/install-from-url-dialog.component";
+import { AddonDetailComponent } from "app/components/addon-detail/addon-detail.component";
+import { AddonProviderBadgeComponent } from "app/components/addon-provider-badge/addon-provider-badge.component";
+import { MatProgressButtonsModule } from "mat-progress-buttons";
+import { AddonInstallButtonComponent } from "app/components/addon-install-button/addon-install-button.component";
 
 @NgModule({
   declarations: [
@@ -42,14 +44,16 @@ import { AddonProviderBadgeComponent } from 'app/components/addon-provider-badge
     WowClientOptionsComponent,
     InstallFromUrlDialogComponent,
     AddonDetailComponent,
-    AddonProviderBadgeComponent
+    AddonProviderBadgeComponent,
+    AddonInstallButtonComponent
   ],
   imports: [
     CommonModule,
     SharedModule,
     HomeRoutingModule,
     MatModule,
-    DirectiveModule
-  ]
+    DirectiveModule,
+    MatProgressButtonsModule,
+  ],
 })
-export class HomeModule { }
+export class HomeModule {}

wowup-electron/src/styles.scss

@@ -270,3 +270,7 @@ img {
   background: rgb(107, 105, 214);
   background: linear-gradient(146deg, rgba(107, 105, 214, 1) 0%, rgba(80, 79, 161, 1) 100%);
 }
+
+.install-button {
+  min-width: 110px !important;
+}