Installation flow control

installed-software.js

@@ -41,7 +41,8 @@ async function downloadFile(resource, softwarePath) {
 }
 
 ipcMain.on('installed-software-install', async function (event, software) {
-  const softwarePath = path.join(app.getAppPath(), software.binary);
+  const softwarePath = path.join(app.getPath('temp'), software.binary);
+  const responseChannel = `installed-software-installed-${software.name}`;
 
   if (software.type == 'web') {
     const exists = fs.existsSync(softwarePath);
@@ -53,7 +54,7 @@ ipcMain.on('installed-software-install', async function (event, software) {
       try {
         await downloadFile(software.resource, softwarePath);
       } catch(error) {
-        event.sender.send('installed-software-installed', {
+        event.sender.send(responseChannel, {
           success: false,
           message: error.message
         });
@@ -82,7 +83,7 @@ ipcMain.on('installed-software-install', async function (event, software) {
 
   child.stdin.end();
   
-  event.sender.send('installed-software-installed', { 
+  event.sender.send(responseChannel, { 
     success: true
   });
 });

src/app/app.module.ts

@@ -86,6 +86,7 @@ import { InterfaceLabelDraggedComponent } from './components/drawings-listeners/
 import { ToolsService } from './services/tools.service';
 import { TextAddedComponent } from './components/drawings-listeners/text-added/text-added.component';
 import { DrawingAddedComponent } from './components/drawings-listeners/drawing-added/drawing-added.component';
+import { InstallSoftwareComponent } from './components/installed-software/install-software/install-software.component';
 
 
 if (environment.production) {
@@ -138,7 +139,8 @@ if (environment.production) {
     NodeLabelDraggedComponent,
     DrawingDraggedComponent,
     LinkCreatedComponent,
-    InterfaceLabelDraggedComponent
+    InterfaceLabelDraggedComponent,
+    InstallSoftwareComponent
   ],
   imports: [
     BrowserModule,

src/app/components/installed-software/install-software/install-software.component.html

@@ -0,0 +1,3 @@
+<button mat-button color="primary" (click)="install()" [disabled]="disabled">
+  <ng-container *ngIf="readyToInstall">{{ buttonText }}</ng-container>
+</button>

src/app/components/installed-software/install-software/install-software.component.spec.ts

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

src/app/components/installed-software/install-software/install-software.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit, Output, EventEmitter, Input, OnDestroy } from '@angular/core';
+import { ElectronService } from 'ngx-electron';
+
+@Component({
+  selector: 'app-install-software',
+  templateUrl: './install-software.component.html',
+  styleUrls: ['./install-software.component.scss']
+})
+export class InstallSoftwareComponent implements OnInit, OnDestroy {
+  @Input('software')
+  software: any;
+
+  @Output()
+  installedChanged = new EventEmitter();
+  
+  public disabled = false;
+  public readyToInstall = true;
+  public buttonText: string;
+
+  constructor(
+    private electronService: ElectronService
+  ) { }
+
+  ngOnInit() {
+    this.electronService.ipcRenderer.on(this.responseChannel, (event, data) => {
+      this.updateButton();
+      this.installedChanged.emit(data);
+    });
+    this.updateButton();
+  }
+
+  ngOnDestroy() {
+    this.electronService.ipcRenderer.removeAllListeners(this.responseChannel);
+  }
+
+
+  install() {
+    this.disabled = true;
+    this.buttonText = "Installing";
+    this.electronService.ipcRenderer.send('installed-software-install', this.software);
+  }
+
+  private get responseChannel() {
+    return `installed-software-installed-${this.software.name}`;
+  }
+
+  updateButton() {
+    this.disabled = this.software.installed;
+
+    if (this.software.installed) {
+      this.buttonText = "Installed";
+    }
+    else {
+      this.buttonText = "Install";
+    }
+  }
+}

src/app/components/installed-software/installed-software.component.html

@@ -14,10 +14,12 @@
           <ng-container matColumnDef="actions">
             <mat-header-cell *matHeaderCellDef></mat-header-cell>
             <mat-cell *matCellDef="let row;" style="text-align: right">
-              <button mat-button color="primary" (click)="install(row)" [disabled]="row.installed">
+              <app-install-software [software]="row" (installedChanged)="onInstalled($event)"></app-install-software>
+
+              <!-- <button *ngIf="row.installed" mat-button color="primary" (click)="install(row)" [disabled]="row.installed">
                 <ng-container *ngIf="row.installed">Installed</ng-container>
                 <ng-container *ngIf="!row.installed">Install</ng-container>
-              </button>
+              </button> -->
             </mat-cell>
           </ng-container>
   

src/app/components/installed-software/installed-software.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { InstalledSoftwareService } from '../../services/installed-software.service';
 import { DataSource } from '@angular/cdk/table';
-import { Observable, of } from 'rxjs';
+import { Observable, of, BehaviorSubject } from 'rxjs';
 
 @Component({
   selector: 'app-installed-software',
@@ -19,22 +19,28 @@ export class InstalledSoftwareComponent implements OnInit {
   ngOnInit() {
     this.dataSource = new InstalledSoftwareDataSource(this.installedSoftwareService);
   }
-
-  install(software) {
-    this.installedSoftwareService.install(software);
+  
+  onInstalled(event) {
+    this.dataSource.refresh();
   }
 }
 
 export class InstalledSoftwareDataSource extends DataSource<any> {
+  installed = new BehaviorSubject([]);
+
   constructor(private installedSoftwareService: InstalledSoftwareService) {
     super();
   }
 
   connect(): Observable<any[]> {
-    const installed = this.installedSoftwareService.list();
-    return of(installed);
+    this.refresh();
+    return this.installed;
   }
 
   disconnect() {}
 
+  refresh() {
+    this.installed.next(this.installedSoftwareService.list());
+  }
+
 }

src/app/services/installed-software.service.ts

@@ -32,10 +32,7 @@ export class InstalledSoftwareService {
   constructor(
     private electronService: ElectronService
   ) { 
-    this.electronService.ipcRenderer.on('installed-software-installed', (event, data) => {
-      console.log("installed", data);
-    });
-  }
+}
 
   list() {
     const installedSoftware = this.electronService.remote.require('./installed-software.js')
@@ -47,7 +44,4 @@ export class InstalledSoftwareService {
     });
   }
 
-  install(software) {
-    this.electronService.ipcRenderer.send('installed-software-install', software);
-  }
 }