Improve control of installation

installed-software.js

@@ -59,9 +59,7 @@ ipcMain.on('installed-software-install', async function (event, software) {
           message: error.message
         });
       }
-      
     }
-
   }
   
   let child; 
@@ -74,16 +72,17 @@ ipcMain.on('installed-software-install', async function (event, software) {
   }
   
   child.on('exit', () => {
-    console.log("exited");
+    event.sender.send(responseChannel, { 
+      success: true
+    });
   });
 
   child.on('error', (err) => {
-    console.log(err);
+    event.sender.send(responseChannel, { 
+      success: false,
+      message: err.message
+    });
   });
 
   child.stdin.end();
-  
-  event.sender.send(responseChannel, { 
-    success: true
-  });
 });

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Output, EventEmitter, Input, OnDestroy } from '@angular/core';
+import { Component, OnInit, Output, EventEmitter, Input, OnDestroy, OnChanges } from '@angular/core';
 import { ElectronService } from 'ngx-electron';
 
 @Component({
@@ -6,7 +6,7 @@ import { ElectronService } from 'ngx-electron';
   templateUrl: './install-software.component.html',
   styleUrls: ['./install-software.component.scss']
 })
-export class InstallSoftwareComponent implements OnInit, OnDestroy {
+export class InstallSoftwareComponent implements OnInit, OnDestroy, OnChanges {
   @Input('software')
   software: any;
 
@@ -26,13 +26,15 @@ export class InstallSoftwareComponent implements OnInit, OnDestroy {
       this.updateButton();
       this.installedChanged.emit(data);
     });
-    this.updateButton();
   }
 
   ngOnDestroy() {
     this.electronService.ipcRenderer.removeAllListeners(this.responseChannel);
   }
 
+  ngOnChanges() {
+    this.updateButton();
+  }
 
   install() {
     this.disabled = true;
@@ -44,7 +46,7 @@ export class InstallSoftwareComponent implements OnInit, OnDestroy {
     return `installed-software-installed-${this.software.name}`;
   }
 
-  updateButton() {
+  private updateButton() {
     this.disabled = this.software.installed;
 
     if (this.software.installed) {

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

@@ -15,11 +15,6 @@
             <mat-header-cell *matHeaderCellDef></mat-header-cell>
             <mat-cell *matCellDef="let row;" style="text-align: right">
               <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> -->
             </mat-cell>
           </ng-container>
   

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
 import { InstalledSoftwareService } from '../../services/installed-software.service';
 import { DataSource } from '@angular/cdk/table';
 import { Observable, of, BehaviorSubject } from 'rxjs';
@@ -13,7 +13,8 @@ export class InstalledSoftwareComponent implements OnInit {
   displayedColumns = ['name', 'actions'];
 
   constructor(
-    private installedSoftwareService: InstalledSoftwareService
+    private installedSoftwareService: InstalledSoftwareService,
+    private changeDetectorRef: ChangeDetectorRef
   ) { }
 
   ngOnInit() {
@@ -22,6 +23,13 @@ export class InstalledSoftwareComponent implements OnInit {
 
   onInstalled(event) {
     this.dataSource.refresh();
+    console.log("On installed", event);
+    /**
+     * During software installation we are not performing any user action
+     * in browser hence Angular doesn't know something suppose to change.
+     * Here we ask to detect changes manually.
+     */
+    this.changeDetectorRef.detectChanges();
   }
 }