Added functionality and prompt message when attempting to delete app with sigfox

src/app/applications/application-detail/application-detail.component.ts

@@ -1,103 +1,109 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  OnDestroy,
+  OnInit,
+  Output,
+} from '@angular/core';
 import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Application } from '@applications/application.model';
 import { ApplicationService } from '@applications/application.service';
 import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dialog.service';
+import { DeviceType } from '@shared/enums/device-type';
 import { BackButton } from '@shared/models/back-button.model';
 import { DropdownButton } from '@shared/models/dropdown-button.model';
 import { MeService } from '@shared/services/me.service';
 import { Subscription } from 'rxjs';
 
 @Component({
-    selector: 'app-application',
-    templateUrl: './application-detail.component.html',
-    styleUrls: ['./application-detail.component.scss'],
+  selector: 'app-application',
+  templateUrl: './application-detail.component.html',
+  styleUrls: ['./application-detail.component.scss'],
 })
 export class ApplicationDetailComponent implements OnInit, OnDestroy {
-    @Output() deleteApplication = new EventEmitter();
-    public applicationsSubscription: Subscription;
-    private deleteDialogSubscription: Subscription;
-    public application: Application;
-    public backButton: BackButton = { label: '', routerLink: '/applications' };
-    public id: number;
-    public dropdownButton: DropdownButton;
-    public errorMessage: string;
-    public canEdit = false;
+  @Output() deleteApplication = new EventEmitter();
+  public applicationsSubscription: Subscription;
+  public application: Application;
+  public backButton: BackButton = { label: '', routerLink: '/applications' };
+  public id: number;
+  public dropdownButton: DropdownButton;
+  public errorMessage: string;
+  public canEdit = false;
 
-    constructor(
-        private applicationService: ApplicationService,
-        private route: ActivatedRoute,
-        public translate: TranslateService,
-        public router: Router,
-        private meService: MeService,
-        private titleService: Title,
-        private deleteDialogService: DeleteDialogService
-    ) { }
+  constructor(
+    private applicationService: ApplicationService,
+    private route: ActivatedRoute,
+    public translate: TranslateService,
+    public router: Router,
+    private meService: MeService,
+    private titleService: Title,
+    private deleteDialogService: DeleteDialogService
+  ) {}
 
-    ngOnInit(): void {
-        this.id = +this.route.snapshot.paramMap.get('id');
-        if (this.id) {
-            this.bindApplication(this.id);
-            this.dropdownButton = {
-                label: '',
-                editRouterLink: '../../edit-application/' + this.id,
-                isErasable: true,
-            };
+  ngOnInit(): void {
+    this.id = +this.route.snapshot.paramMap.get('id');
+    if (this.id) {
+      this.bindApplication(this.id);
+      this.dropdownButton = {
+        label: '',
+        editRouterLink: '../../edit-application/' + this.id,
+        isErasable: true,
+      };
 
-            console.log(this.id);
-        }
-
-        this.translate.get(['NAV.APPLICATIONS', 'APPLICATION-TABLE-ROW.SHOW-OPTIONS', 'TITLE.APPLICATION'])
-            .subscribe(translations => {
-                this.backButton.label = translations['NAV.APPLICATIONS'];
-                this.dropdownButton.label = translations['APPLICATION-TABLE-ROW.SHOW-OPTIONS'];
-                this.titleService.setTitle(translations['TITLE.APPLICATION']);
-            });
-        this.canEdit = this.meService.canWriteInTargetOrganization();
+      console.log(this.id);
     }
 
-    onDeleteApplication() {
-        let message: string;
-        if (this.applicationHasDevices()) {
-            message = this.translate.instant('APPLICATION.DELETE-HAS-DEVICES-PROMPT');
-        }
-
-        this.deleteDialogSubscription = this.deleteDialogService.showSimpleDialog(message).subscribe(
-            (response) => {
-                if (response) {
-                    this.applicationService.deleteApplication(this.application.id).subscribe((response) => {
-                        if (response.ok && response.body.affected > 0) {
-                            console.log('delete application with id:' + this.application.id.toString());
-                            this.router.navigate(['applications']);
-                        } else {
-                            this.errorMessage = response?.error?.message;
-                        }
-                    });
-                } else {
-                    console.log(response);
-                }
-            }
-        );
-    }
+    this.translate
+      .get([
+        'NAV.APPLICATIONS',
+        'APPLICATION-TABLE-ROW.SHOW-OPTIONS',
+        'TITLE.APPLICATION',
+      ])
+      .subscribe((translations) => {
+        this.backButton.label = translations['NAV.APPLICATIONS'];
+        this.dropdownButton.label =
+          translations['APPLICATION-TABLE-ROW.SHOW-OPTIONS'];
+        this.titleService.setTitle(translations['TITLE.APPLICATION']);
+      });
+    this.canEdit = this.meService.canWriteInTargetOrganization();
+  }
 
-    applicationHasDevices(): boolean {
-        return this.application.iotDevices?.length > 0;
-    }
+  onDeleteApplication() {
+    this.deleteDialogService
+      .showApplicationDialog(this.application)
+      .subscribe((response) => {
+        if (response) {
+          this.applicationService
+            .deleteApplication(this.application.id)
+            .subscribe((response) => {
+              if (response.ok && response.body.affected > 0) {
+                console.log(
+                  'delete application with id:' + this.application.id.toString()
+                );
+                this.router.navigate(['applications']);
+              } else {
+                this.errorMessage = response?.error?.message;
+              }
+            });
+        } else {
+          console.log(response);
+        }
+      });
+  }
 
-    bindApplication(id: number): void {
-        this.applicationsSubscription = this.applicationService.getApplication(id).subscribe((application) => {
-            this.application = application;
-        });
-    }
+  bindApplication(id: number): void {
+    this.applicationsSubscription = this.applicationService
+      .getApplication(id)
+      .subscribe((application) => {
+        this.application = application;
+      });
+  }
 
-    ngOnDestroy() {
-        if (this.applicationsSubscription) {
-            this.applicationsSubscription.unsubscribe();
-        }
-        if (this.deleteDialogSubscription) {
-            this.deleteDialogSubscription.unsubscribe();
-        }
+  ngOnDestroy() {
+    if (this.applicationsSubscription) {
+      this.applicationsSubscription.unsubscribe();
     }
+  }
 }

src/app/applications/applications-list/applications-table/applications-table.component.ts

@@ -1,4 +1,10 @@
-import { Component, ViewChild, AfterViewInit, Input, OnInit } from '@angular/core';
+import {
+  Component,
+  ViewChild,
+  AfterViewInit,
+  Input,
+  OnInit,
+} from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { Router } from '@angular/router';
@@ -10,6 +16,7 @@ import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dia
 import { MeService } from '@shared/services/me.service';
 import { merge, Observable, of as observableOf } from 'rxjs';
 import { catchError, map, startWith, switchMap } from 'rxjs/operators';
+import { DeviceType } from '@shared/enums/device-type';
 
 /**
  * @title Table retrieving data through HTTP
@@ -40,7 +47,7 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
     private router: Router,
     private meService: MeService,
     private deleteDialogService: DeleteDialogService
-  ) { }
+  ) {}
 
   ngOnInit() {
     this.canEdit = this.meService.canWriteInTargetOrganization();
@@ -87,33 +94,28 @@ export class ApplicationsTableComponent implements AfterViewInit, OnInit {
   }
 
   deleteApplication(id: number) {
-    let message: string;
-    if (this.applicationHasDevices(id)) {
-      message = this.translate.instant('APPLICATION.DELETE-HAS-DEVICES-PROMPT');
-    }
+    const applicationToDelete = this.data?.find((app) => app.id === id);
 
-    this.deleteDialogService.showSimpleDialog(message).subscribe((response) => {
-      if (response) {
-        this.applicationService.deleteApplication(id).subscribe((response) => {
-          if (response.ok && response.body.affected > 0) {
-            this.paginator.page.emit({
-              pageIndex: this.paginator.pageIndex,
-              pageSize: this.paginator.pageSize,
-              length: this.resultsLength,
+    this.deleteDialogService
+      .showApplicationDialog(applicationToDelete)
+      .subscribe((response) => {
+        if (response) {
+          this.applicationService
+            .deleteApplication(id)
+            .subscribe((response) => {
+              if (response.ok && response.body.affected > 0) {
+                this.paginator.page.emit({
+                  pageIndex: this.paginator.pageIndex,
+                  pageSize: this.paginator.pageSize,
+                  length: this.resultsLength,
+                });
+              } else {
+                this.errorMessage = response?.error?.message;
+              }
             });
-          } else {
-            this.errorMessage = response?.error?.message;
-          }
-        });
-      }
-    });
+        }
+      });
   }
-
-  applicationHasDevices(id: number): boolean {
-    const applicationToDelete = this.data?.find(app => app.id === id);
-    return applicationToDelete && applicationToDelete.iotDevices.length > 0;
-  }
-
   navigateToEditPage(applicationId: string) {
     this.router.navigate(['applications', 'edit-application', applicationId]);
   }

src/app/shared/components/delete-dialog/delete-dialog.service.ts

@@ -1,33 +1,72 @@
 import { Injectable } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DeleteDialogComponent } from './delete-dialog.component';
-import { Observable } from 'rxjs';
+import { Observable, Subscription } from 'rxjs';
+import { Application } from '@applications/application.model';
+import { DeviceType } from '@shared/enums/device-type';
+import { TranslateService } from '@ngx-translate/core';
 @Injectable({
   providedIn: 'root',
 })
 export class DeleteDialogService {
-
+  private deleteDialogSubscription: Subscription;
   constructor(
-    private dialog: MatDialog
-  ) { }
+    private dialog: MatDialog,
+    public translate: TranslateService,
+  ) {}
+
+  showSimpleDialog(
+    message?: string,
+    showAccept = true,
+    showCancel = true,
+    showOk = false,
+    infoTitle = ''
+  ): Observable<any> {
+    return new Observable((observer) => {
+      const dialog = this.dialog.open(DeleteDialogComponent, {
+        data: {
+          infoTitle,
+          showOk,
+          showAccept,
+          showCancel,
+          message: message ? message : 'Er du sikker på at du vil slette?',
+        },
+      });
+
+      dialog.afterClosed().subscribe((result) => {
+        observer.next(result);
+      });
+    });
+  }
 
-  showSimpleDialog(message?: string, showAccept = true, showCancel = true, showOk = false, infoTitle = ''): Observable<any> {
-    return new Observable(
-      (observer) => {
-        const dialog = this.dialog.open(DeleteDialogComponent, {
-          data: {
-            infoTitle,
-            showOk,
-            showAccept,
-            showCancel,
-            message: message ? message : 'Er du sikker på at du vil slette?'
-          }
-        });
+  showApplicationDialog(application: Application): Observable<any> {
+      let message: string;
+      let showAccept: boolean = true;
+      const hasSigfoxDevices: boolean = this.applicationHasSigFoxDevices(
+        application
+      );
 
-        dialog.afterClosed().subscribe((result) => {
-          observer.next(result);
-        });
+      if (hasSigfoxDevices) {
+        message = this.translate.instant(
+          'APPLICATION.DELETE-HAS-SIGFOX-DEVICES-PROMPT'
+        );
+        showAccept = false;
+      } else if (this.applicationHasDevices(application)) {
+        message = this.translate.instant(
+          'APPLICATION.DELETE-HAS-DEVICES-PROMPT'
+        );
       }
-    );
+      return this.showSimpleDialog(message, showAccept);
+  }
+
+  applicationHasDevices(application: Application): boolean {
+    return application.iotDevices?.length > 0;
+  }
+
+  applicationHasSigFoxDevices(application: Application): boolean {
+    const sigfoxDevice = application.iotDevices.find((device) => {
+      return device.type === DeviceType.SIGFOX;
+    });
+    return sigfoxDevice !== undefined;
   }
 }

src/assets/i18n/da.json

@@ -81,6 +81,7 @@
     "SAVE": "Gem applikation",
     "DELETE": "Slet applikation",
     "DELETE-HAS-DEVICES-PROMPT": "Der er knyttet IoT-enheder til denne applikation. Disse vil også blive slettet. Slet alligevel?",
+    "DELETE-HAS-SIGFOX-DEVICES-PROMPT": "Applikationen kan ikke slettes, da der er knyttet Sigfox enheder til den",
     "NAME": "Applikationens navn",
     "DESCRIPTION": "Applikationens beskrivelse",
     "ATTACHED-IOT": "Tilknyttede IoT enheder",